在Three.js中渲染阴影的性能

Question

我正在使用Three.js开展一个Minecraft项目，在渲染阴影时我遇到了性能问题。

以下是演示：http://johnhckuo.github.io/Minecraft/

正如您所看到的，FPS降至30以下，如果您在此页面停留更长时间，它会继续下降。

我认为这有点奇怪，因为这种规模的阴影渲染应该对GPU很容易吗？

Answer 1

正如唐所说，你正在渲染循环中创建新的网格和材质 特别是如何产生天空 真正的罪魁祸首可以通过Chrome devtools看到，这似乎是在创建带有地图的新材料（每帧生成画布）时，这个新的地图/纹理然后上传到GPU（附带截图）。 解决问题的方法可能是：

• 不要每帧都创建新的网格。
• 不要每帧都创造新材料。
• 不要每帧都为材质创建一个新画布，或者在着色器中进行这种颜色处理。

Devtools截图：

编辑：
看看this sky shader