分析Threejs应用程序

Profiling Threejs app

本文关键字：应用程序 Threejs 分析      更新时间：2023-09-26

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

显示gpu正在过载。我还发现，当我将整个场景置于相机视图中时，我的FPS会急剧下降。场景包含大约17个网格和一个单向光源。这并不是一个沉重的场景。我曾见过更重的场景在相同的GPU上完美地渲染。

    那么，我可以在不完全改变它的情况下，在场景中做些什么改变来减轻它的重量?我已经试过移除纹理了吗?但这似乎并不能解决问题。
  • 有没有一种方法来弄清楚什么计算ejjs正在推动GPU?或者这是否会打破threejs给出的基本抽象?
    • 分析GPU webgl-threejs应用程序的一般技巧是什么?

有很多事情可以尝试。

你被束缚了吗?

将画布设置为1x1像素大。你的帧率会上升吗?如果是这样，你画了太多的像素或你的片段着色器太复杂。

看看是否简化你的片段着色器将有助于使用更简单的着色器。我不太懂three。js。也许是基础材料?

你有阴影吗?关掉它们。它走得更快吗?你能使用更简单的阴影吗?例如，这个例子中的阴影是假的。它们只是带有圆形纹理的平面。

你使用任何后处理效果吗?后处理效果是昂贵的，特别是在移动gpu上。

你画了很多不透明的东西吗?如果有的话，你能整理一下你的绘图顺序，让你从前到后(近到远)。不确定three.js是否有这样做的选项。我知道它可以对透明的东西进行排序，所以反向测试应该很简单。这将使渲染更快，假设你正在绘制深度测试，因为后面的像素将被DEPTH_TEST拒绝，因此不会有片段着色器为它们运行。

另一个可以节省带宽的方法是绘制一个较小的画布，并使用CSS将其拉伸以覆盖您想要显示的区域。很多游戏都是这么做的。

你有几何限制吗?

你说你只画了17个网格，但这些网格有多大?17个12个三角形立方体还是17个100万个三角形网格?

如果你的几何边界可以使用简化?如果几何图形进入很远的距离，你能将其分割并使用负载吗?

相关文章：