Three.js 中渲染阴影的性能
Performance of rendering shadows in Three.js
我正在使用 Three.js 开发我的世界项目，我在渲染阴影时遇到了性能问题。
这是演示：http://johnhckuo.github.io/Minecraft/
如您所见，FPS 降至 30 以下，并且如果您在此页面上停留的时间更长，它会继续下降。
我觉得这有点奇怪，因为这种阴影渲染比例对于 GPU 来说应该很容易吧？
正如 Don 所说，您正在渲染循环中创建新的网格和 materials。
具体天空是怎么生成的。
真正的罪魁祸首可以通过 Chrome devtools 看到，这似乎是在使用地图创建新的 material 时（每帧生成 canvas），这个新的 map/texture 是然后上传到GPU（附截图）。
解决问题的方法可能是：
- 不要每帧都创建新的网格。
- 不要每帧创建新的 material。
- 不要为 material 每帧创建一个新的 canvas，或者在着色器中进行这种颜色处理。
开发工具截图：
编辑：
看看this sky shader
我正在使用 Three.js 开发我的世界项目，我在渲染阴影时遇到了性能问题。
这是演示：http://johnhckuo.github.io/Minecraft/
如您所见，FPS 降至 30 以下，并且如果您在此页面上停留的时间更长，它会继续下降。
我觉得这有点奇怪，因为这种阴影渲染比例对于 GPU 来说应该很容易吧？
正如 Don 所说，您正在渲染循环中创建新的网格和 materials。
具体天空是怎么生成的。
真正的罪魁祸首可以通过 Chrome devtools 看到，这似乎是在使用地图创建新的 material 时（每帧生成 canvas），这个新的 map/texture 是然后上传到GPU（附截图）。
解决问题的方法可能是：
- 不要每帧都创建新的网格。
- 不要每帧创建新的 material。
- 不要为 material 每帧创建一个新的 canvas，或者在着色器中进行这种颜色处理。
开发工具截图：
编辑：
看看this sky shader