Three.js应用程序性能分析

Question

我有一个使用threejs编写的webgl应用程序。但在我的一些测试机器上，FPS并不够好。我尝试使用Chrome的about:tracing来分析我的应用程序，参考了这篇文章：http://www.html5rocks.com/en/tutorials/games/abouttracing/。

看起来是GPU负载过高。我还发现，当整个场景都在相机视图中时，我的FPS急剧下降。该场景包含约17个网格和一个单向光源。它并不是一个很重的场景。我已经看到在同样的GPU上渲染更重的场景而没有问题。

• 那么，在不完全改变场景的情况下，我可以对场景进行哪些更改以使其更轻？我已经尝试过删除纹理，但似乎并没有解决问题。
• 是否有一种方法可以确定threejs正在推送到GPU的计算内容？或者这会破坏threejs提供的基本抽象层？
• 有关于GPU webgl-threejs应用程序性能分析的一般提示是什么？

- captain_farrel

---

检查WebGL Inspector工具以确定您的绘制调用。另外，您使用的是哪种机器？有时候问题不在于对象数量，而在于顶点数量。您正在绘制多少个顶点，还有对象使用了多少纹理和着色器？尝试使用一个灰色着色材质，看看是否效果更好。如果您还没有使用BufferGeometry，则可以通过使用它来改善场景。例如，有一个函数可以将THREE.Geometry转换为THREE.BufferGeometry。 - GuyGood

Answer 1

有很多事情可以尝试。

你是否受到绘图限制？

将画布更改为1x1像素大小。帧速率是否显著提高？如果是，则说明你绘制了过多的像素或者片段着色器过于复杂。

为了查看简化片段着色器是否有助于优化，使用一个更简单的着色器。我不太熟悉three.js。也许使用基础材质？

你是否使用阴影？关闭它们。速度是否更快？能否使用更简单的阴影？例如此示例中的阴影是假的。它们只是带有圆形纹理的平面。

你是否使用任何后处理效果？后处理效果非常消耗资源，特别是在移动GPU上。

你是否绘制了大量不透明的内容？如果是，能否排序绘图顺序，以便从前到后（近到远）进行绘制。不确定three.js是否具有此选项。我知道它可以将透明物体从后向前排序，因此将测试反转应该很简单。这将使渲染加快，假设你正在使用深度测试进行绘制，因为后面的像素将被DEPTH_TEST拒绝，因此不会运行片段着色器。

你可以通过将画布缩小并使用CSS进行拉伸来节省带宽，以覆盖要显示的区域。很多游戏都这样做。

你是否受到几何限制？

你说你只绘制了17个网格，但这些网格有多大？是17个由12个三角形组成的立方体，还是17个由一百万个三角形组成的网格？

如果你受到几何限制，可以使用简化吗？如果几何形状远至远处，你可以将其分割并使用LOD吗？请参见LOD示例。

- gman