分析 Threejs 应用程序答案

【问题标题】：Profiling Threejs app分析 Threejs 应用程序
【发布时间】：2014-03-21 07:08:57
【问题描述】：

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

gpu 似乎正在过载。我还发现当我将整个场景都放在相机视野中时，我的 FPS 会急剧下降。该场景包含大约 17 个网格和一个定向光源。它不是一个沉重的场景。我见过更重的场景可以在同一个 GPU 上完美渲染。

那么，我可以在场景中进行哪些更改以使其不那么重，而无需完全更改它？我已经尝试删除纹理？但这似乎并不能解决问题。
有没有办法弄清楚threejs 正在向GPU 推送什么计算？或者这会破坏threejs 提供的基本抽象吗？
分析 GPU webgl-threejs 应用程序的一般技巧有哪些？

【问题讨论】：

检查 WebGL Inspector 工具以确定您的绘图调用。另外，你在什么机器上？此外，有时它与对象的数量无关，而是与顶点的数量有关。您正在绘制多少个顶点，对象使用多少个纹理以及多少个着色器？尝试一种灰色阴影材料，看看它是否效果更好。如果您还没有这样做，您还可以使用 BufferGeometry 来改善场景。例如，还有一个函数可以将 THREE.Geometry 转换为 THREE.BufferGeometry

标签： javascript three.js profiling

【解决方案1】：

有很多事情可以尝试。

你画完了吗？

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

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

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

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

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

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

你是否受到几何约束？

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

如果您受几何限制，可以使用简化吗？如果几何体很远，你可以分割它并使用lods吗？ see lod sample.

【讨论】：