分析Threejs app

Question

我有一个webgl应用程序,我用threejs编写.但是我的一些测试机上的FPS还不够好.我试着来分析使用Chrome关于我的申请:从这篇文章中帮助跟踪http://www.html5rocks.com/en/tutorials/games/abouttracing/

似乎gpu正在超载.我还发现当我在相机的视野中拥有整个场景时,我的FPS大幅下降.场景包含大约17个网格和单个定向光源.它不是一个沉重的场景.我已经看到更多更重的场景在同一GPU上完美呈现.

• 那么,我可以在场景中做些什么改变,使其不那么重,而不是完全改变它？我已经尝试删除纹理？但这似乎并没有解决问题.
• 有没有办法弄清楚3j正在推动GPU的计算？或者这会破坏threejs给出的基本抽象？
• 有关分析GPU webgl-threejs应用程序的一般提示是什么？

Answer 1

有很多尝试的方法。

你受约束吗？

将您的画布更改为1x1像素大。您的帧率会上升吗？如果是这样，则您绘制的像素过多，或者片段着色器过于复杂。

若要查看简化片段着色器是否有助于使用更简单的着色器。我不太了解three.js。也许是基本材料？

你有阴影吗？把它们关掉。它走得更快吗？您可以使用更简单的阴影吗？例如，此示例中的阴影是假的。它们只是具有圆形纹理的平面。

您是否正在使用任何后期处理效果？后处理效果非常昂贵，尤其是在移动GPU上。

您在绘制很多不透明的东西吗？如果是这样，您可以对绘图顺序进行排序，以便从前到后（从近到远）绘制。不知道three.js是否可以选择执行此操作。我知道它可以对透明的东西进行排序，因此逆向测试应该很简单。假设您正在进行深度测试，这将使渲染更快，因为背面的像素将被DEPTH_TEST拒绝，因此不会为其运行片段着色器。

节省带宽的另一件事是绘制到较小的画布上，并使用CSS对其进行拉伸以覆盖您希望其显示的区域。很多游戏都这样做。

您是否受几何约束？

您说您只绘制17个网格，但是这些网格有多大？17个12个三角形立方体或17个一百万个三角形网格？

如果您受几何约束，可以使用简化吗？如果几何图形的距离很远，可以拆分并使用块吗？参见lod示例。