javascript - 尽管在 WebGL 中进行了优化，但帧速率仍然较低

Question

我正在使用 Three.Js 在 WEBGL 中开发一个项目。

该项目由一个静态几何形状的房间和数百把复制的椅子组成。将所有内容放在一起并使用以下技术来优化帧速率后:

• 椅子的实例化 - 每个对象都会加载一次，然后使用 object.clone() 循环实例化并添加到场景中。

• 对象选择光线转换的八叉树优化。

• 所有静态对象的几何合并。

• 实例化对象的 LOD 级别。

当所有场景放在一起时，我的性能仍然很糟糕，只有 15 fps。我使用两个定向灯和一个半球灯。

经过一些实验，瓶颈似乎在于几何本身。

有人知道可能出现什么问题吗？对于可接受的帧速率来说，合理的多边形数量是多少？难道是我使用的几何体太重了？

有关信息，

我的房间几何形状有: 69996点， 290571 个顶点， 82607 个基元

我的椅子几何形状有: 1254点， 4884 个顶点， 1232 个基元

Answer 1

我认为问题不仅仅在于几何体的多边形数量。我以 60 fps 渲染了更多。没有代码，很难说问题出在哪里。我认为您应该首先对其进行分析，看看是否发现任何瓶颈。然后获取 webGL 检查器并获取 GPU 跟踪。跟踪调用drawXXX的次数。这比多边形数量更有可能成为瓶颈。

最后，如果您已经完成了 Three js 可用的所有优化，但它仍然不够快，那么这可能是 Three js 问题。众所周知，Three js 的编写并没有将性能作为其主要目标之一。如果是这样的话，那么不幸的是你有点陷入困境。