WebGL点亮数量限制

Question

背景信息：我正在玩Three.js和一些 PointLight here。

快速搜索后，对于WebGL和OpenGL似乎只允许少量光源（同时）。这听起来像是大多数3D场景的常见要求。喜欢沿着长长的街道展示灯具。或者像上面连接的这个小场景一样，同时有10多门大炮射击。是使用延迟渲染器的唯一解决方案（我不知道我在说什么，但这种技术是谷歌的答案，并且关于它的演示看起来很漂亮）。

最简单的解决方案是创建片段着色器来计算组8灯吗？然后使用某种混合技术（再次：'完全从这些主题开始）？

Answer 1

很好的演示。

除了性能方面的考虑因素，灯光should not be an issue的数量为WebGLRenderer。 （是的，如果您有许多灯，则首选WebGLDeferredRenderer。）

我认为这是一个three.js错误。请注意，您正在生成控制台错误。

问题在于您在第一次渲染之前实例化灯光并将其设置为false。如果您在开始时将每个灯光的可见性设置为true，则演示会正常运行。

three.js r.66。

编辑：@ gero3修复了three.js r.67dev分支中的这个错误。

Answer 2

WebGL和OpenGL ES 2.0对灯光没有限制。 Three.js可能。着色器之前的旧OpenGL。使用着色器，您可以编写自己的着色器，以便根据硬件的内存/资源限制放置任意数量。

对于更多数量的灯，延迟渲染可以更快。对于stackoverflow来说，这个话题可能太大了。也许别人能胜任这项任务。简短的版本是，不像大多数着色器一样计算像素的最终颜色，着色器只是将一堆数据（未点亮的颜色，法线，位置）存储到多个纹理中。之后，不同的着色器会读取这些纹理并计算光照。由于各种原因，最终可能会更快。有限制，它无法处理透明度。

Here's a tutorial here for OpenGL that might be useful。还有一些你可以解剖的three.js examples

注意：延迟呈现通常要求WEBGL_draw_buffers extension具有高效性。