javascript - 分析Threejs应用

我有一个webgl应用程序，我使用threejs编写。但是FPS在我的某些测试机上还不够好。我已尝试在本文的帮助下使用Chrome的about:tracing对我的应用程序进行配置:http://www.html5rocks.com/en/tutorials/games/abouttracing/

看来GPU过载了。我还发现，当我将整个场景都放在相机的视野中时，我的FPS急剧下降。该场景包含约17个网格和一个定向光源。这不是一个沉重的场面。我已经看到很多较重的场景在同一GPU上都能完美呈现。

那么，在不完全更改的情况下，我可以在场景中进行哪些更改以使其不那么沉重？我已经尝试过删除纹理了吗？但这似乎并不能解决问题。

是否有办法弄清楚Threejs正在将什么计算推向GPU？还是会破坏Threejs提供的基本抽象？

对GPU webgl-threejs应用进行性能分析的一般技巧是什么？

最佳答案

有很多尝试的方法。

你被束缚了吗？

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

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

你有阴影吗？把它们关掉。它走得更快吗？您可以使用更简单的阴影吗？例如the shadows in this sample are fake。它们只是具有圆形纹理的飞机。

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

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

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

您是否受几何约束？

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

如果您受几何约束，可以使用简化吗？如果几何图形的距离很远，是否可以拆分并使用块？ see lod sample。

关于javascript - 分析Threejs应用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22552415/