问题标签 [webgl]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
974 浏览

webgl - 操纵 gl_LightSource[gl_MaxLights]

OpenGL ® 着色语言规范 1.20 版http://www.opengl.org/registry/doc/GLSLangSpec.Full.1.20.8.pdf显示以下内容:

此外,http://www.lighthouse3d.com/opengl/glsl/index.php?ogldir1显示了以下代码片段:

https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.html#5.10显示了许多 uniform* 函数,但似乎没有处理统一变量数组,例如gl_LightSource[0]。

我们如何使用 JavaScript在WebGL中设置 gl_LightSource[0] 字段?例如,gl_LightSource[0].position

在此先感谢您的帮助。

注意:在http://www.khronos.org/message_boards/viewtopic.php?f=43&t=3373上发帖

0 投票
1 回答
2075 浏览

opengl - 网络上是否有任何示例如何使用着色器实现碰撞检测?

网络上是否有任何 OpenGL、OpenGL ES 或 WebGL 代码示例如何使用着色器(最好是 GLSL)实现 3D 碰撞检测?

谢谢你。

0 投票
1 回答
961 浏览

webgl - 在 WebGL 上计算半向量

http://www.lighthouse3d.com/opengl/glsl/index.php?ogldir2显示以下内容:

H = 眼睛 - L

我在我的 WebGL 顶点着色器上执行了以下操作来计算半向量:

但我不确定上面的代码片段是否正确。

任何指针/帮助表示赞赏。在此先感谢您的帮助。

编辑:似乎正确的代码应该是

0 投票
1 回答
926 浏览

javascript - 每个索引的法线?

我有一个金字塔,它有 5 个顶点和 18 个索引。因为我想为每个面添加法线,所以我刚刚找到了每个顶点法线的解决方案。这意味着我不能使用索引来定义我的金字塔我需要有 18 个顶点(空间中同一点的相同顶点的 3 倍)。

必须有一个解决方案,不是在顶点基础上而是在索引基础上使用法线。

一些代码(javascript):

0 投票
3 回答
1897 浏览

javascript - WebGL Benchmark - 我应该创建什么样的测试?

(我不确定这是否应该在https://softwareengineering.stackexchange.com/上,如果您认为请发表评论)

我即将为我的学士论文创建一个 WebGL 实现的基准。我不确定我应该创建什么样的测试,如果我应该只测量每秒帧数,是否可以获得一些其他有用的数据来进行基准测试......

目前我只是想到了这样的测试:

  • 1 个单色物体
  • 1 个多色物体
  • 1 个带纹理的对象
  • 1 个带有混合的纹理对象
  • 1 个带闪电的纹理对象
  • 1 个带有多个照明点的纹理对象
  • 1 个场景渲染为纹理并将其用于另一个对象
  • 1 模型动画
  • 所有包含更多对象的测试:50、500、5000
  • 每次渲染更改着色器/程序(一次、两次、多次)

这将导致 40 种不同的测试,但我不确定这些是否是对性能的重要测试。

一位朋友建议在复杂着色器上进行测试,但由于着色器在图形硬件上运行,因此与 java 桌面应用程序应该没有区别,对吧?

无论如何,我的感觉是,JavaScript 的性能是 WebGL 的主要瓶颈。

更新

我终于做了我的测试。在讨论了基准测试的工作方式之后,我创建了以下内容:http ://martin.cyor.eu/benchmark

0 投票
1 回答
5888 浏览

javascript - 如何在 WebGL 中实现这种旋转螺旋?

有人可以尝试将给定的动画实现到 WebGL 着色器示例中吗?这对于像我这样学习 WebGL 的人来说会很棒。

替代文字

来源:http ://dvdp.tumblr.com/post/2664387637/110109

0 投票
3 回答
527 浏览

opengl - 无需插件即可在 Web 上显示 3D 视频

这是一个可能无法回答的问题......

如何在不使用插件的情况下创建能够在支持 3D 的显示器/监视器上显示 3D 图像的网站?

忽略带宽问题,因为它们不是问题。我也希望避免红/绿效果(浮雕),因为它们有很多问题。我想我可以简单地显示一个 120Hz 的视频,但是如何将左右图像与屏幕的时间同步呢?

任何帮助将不胜感激,但“不可能”永远不是答案。谢谢

0 投票
2 回答
6938 浏览

webgl - 在 WebGL 上访问图像/纹理数据(纹素)

我在 WebGL 上有以下代码片段:

我想在加载纹理贴图后获取它的内容(RGBA)。类似地,readPixels() 获取绘图缓冲区内容的能力。

可能吗?如果是这样,最好的做法是什么?

我正在使用 Chrome Canary 构建进行开发。

在此先感谢您的帮助。

注意:在http://www.khronos.org/message_boards/viewtopic.php?f=43&t=3439上发帖

0 投票
1 回答
17012 浏览

javascript - 将向量数组传递给制服

我正在尝试在我的着色器中实现多个灯光,但我无法用我的灯光数据填充制服。

我的顶点着色器:

仅显示最新灯的代码:

由于制服uPointLightingLocation是一个大小为 16 的 vec3 数组,我认为可以将完整的数组传递给制服,但我没有可行的解决方案。

当我尝试传递完整的数组this.lightsColor(没有索引)时,我根本看不到任何光线。

0 投票
1 回答
1772 浏览

webgl - 在 WebGL 上释放加载的纹理

http://www.khronos.org/webgl/wiki/Demo_Repository上的 Textured Box 演示具有以下代码片段:

如何释放分配/加载的纹理以避免(图形)内存泄漏?

下面的代码会释放加载/分配的纹理和图像吗?

在此先感谢您的帮助。

注意:2010 年 12 月 23 日在http://www.khronos.org/message_boards/viewtopic.php?f=43&t=3367上发帖,但到目前为止没有答案。