WebGL灯数限制

Question

上下文:我在玩Three.js和一些PointLight 这里。

快速搜索后，WebGL和OpenGL似乎只允许少量光源(同时)。这听起来似乎是大多数3d场景的共同要求。喜欢展示一条长长的街道，沿途灯火辉煌。或者就像在这个小场景中，上面有10多门大炮同时开火。是使用延迟渲染器的唯一解决方案(我不知道我在说什么，但这种技术是Google的答案，它的演示看起来很棒)。

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

Answer 1

很好的演示。

除了性能方面的考虑外，不应该是个问题和WebGLRenderer的灯数。(是的，如果你有很多灯，WebGLDeferredRenderer会更好。))

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

问题是，您正在实例化一个光线，并在第一个呈现之前设置它对false的可见性。如果您在开始时将每个灯的可见性设置为true，则演示将无错误地运行。

three.js r.66.

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

​

​

Answer 2

WebGL和OpenGL ES2.0对灯光没有任何限制。Three.js可能会。旧的OpenGL之前的着色。使用着色器，您可以自己编写，因此尽可能多地使用硬件的内存/资源限制。

延迟渲染可以更快的对更多的灯。对于堆叠溢出来说，这可能是个太大的话题了。也许其他人能胜任这项任务。简短的版本是，不是像大多数着色器那样计算像素的最终颜色，而是将大量数据(未亮色、法线、位置)存储到多个纹理中。在此之后，不同的着色器会读取这些纹理并计算光照。由于各种各样的原因，最终可能会变得更快。它不能处理透明度的限制。

这里有一个关于OpenGL的教程，它可能很有用。你可以解剖几个three.js 示例

注意:延迟呈现通常要求缓冲区扩展具有表现性。