Three.js 中数千行的性能问题

Question

这是我在这里的第一个问题，所以我希望它符合准则。也请原谅我的英语不好。

我目前正在开发基于three.js 的WebGL 应用程序，该应用程序显示数以千计的立方体和这些立方体之间的线。我有几个性能问题，所以我决定将所有立方体合并为一个几何体。这有一点帮助，但实际上性能被那数千行(都有自己的几何图形(基于three.js的NURBSCurve示例)和着色器 Material (着色器从行的开始到结束混合两种颜色)减慢并控制不透明度。我最大的数据包括超过 9000 条线和超过 5000 个立方体。没有这些线，FPS 率在 45 - 50 (DirectX) 或 20 FPS (OpenGL) 之间，但有线性能下降到 5 FPS。我只拥有 Intel HD Graphics(第 5 代)显卡，因此最大 FPS 似乎被限制为 60 FPS，但这对我来说已经足够了。
正如我之前所说，这些线是 NURBS 曲线，它们的范围从短曲线到长而复杂的曲线。另一个要求(这让我有点头疼;-))是每条线的宽度不同，所以我实际上必须使用 OpenGL，这在我的情况下速度较慢，并且还会导致一些其他问题。

无论如何，我尝试了几种方法，但没有一种方法能真正帮助我解决问题。

1) 为每条线创建管道并合并几何图形。 -> 这将场景的创建从 1 秒减慢到几分钟。此外FPS率无法提高。由于这种方法产生的大量顶点和面，这实际上是预期的。

2) 减少曲线点。 -> 从 200 点减少到 50 点，这有助于稍微提高 FPS。减少到 25 分并没有带来更多的改进。我正在考虑编写一种方法来减少不需要的点(例如在直线曲线中，2 而不是 50 点就足够了)，但我不知道如何实现这一点，所以我首先考虑了其他方法。也许我会回到这个话题。

3) 使用 BufferGeometry。 -> BufferGeometry 似乎不能与着色器 Material 一起使用。至少在我的情况下，我没有让它工作，所以我的尝试都没有显示任何内容。顺便说一下，我使用 THREE.BufferGeometryUtils 从我的 NURBS 曲线创建缓冲区几何。我试图将 THREE.VertexColors 设置为几何中函数和 colorsNeedUpdate 的参数，但仍然没有显示。实际上，我还尝试了使用curbes 几何体的buffergeometry，但没有获得任何性能改进。

4) 使用样条曲线代替 NURBS 曲线。 ->曲线的路径不像我希望的那样，也没有任何改进。

5) 使用 THREE.LinePieces 将行合并为一行。 -> 好吧，虽然我不得不将顶点数量加倍，但这实际上有很大帮助。在 DirectX 的情况下，性能从 5 FPS 提高到 25 FPS(OpenGL 仍为 4 FPS)，但此解决方案不适合我的情况。原因是线条的宽度不能不同，这是在 DirectX 限制为 1 的情况下。我想知道其他人是如何解决线宽限制问题的，并发现有些人通过几何着色器创建了更粗的线条。所以我的新希望是这个几何着色器。但后来我发现 WebGL 不支持几何着色器。

抱歉到目前为止对我的方法的解释很长。在尝试了所有这些之后，我无法想出任何新想法。现在我想从专家那里知道我是否应该忍受 FPS 下降，或者是否还有另一种方法可以尝试？

Answer 1

我想出了按宽度捆绑线条然后使用 THREE.LinePieces 合并这些捆绑的想法.在最好的情况下，我可以将大约 860 行减少到 2 行。当然，此解决方案的有效性取决于数据。此外，我仍然有一个问题，即 DirectX 比 OpenGL 快得多(例如 50 FPS 而不是 8 FPS)，但我需要后者以支持更粗的线条。因此，如果有人为我支持 DirectX 的问题提出解决方案，我将不胜感激:-)。