【发布时间】：2013-10-16 07:27:47
【问题描述】：
这是我在这里的第一个问题，所以我希望它符合准则。也请原谅我的英语不好。
我目前正在开发一个基于 three.js 的 WebGL 应用程序，它显示了数千个立方体和这些立方体之间的线条。我有几个性能问题，所以我决定将所有立方体合并到一个几何体中。这有点帮助，但实际上性能会因数千行（都有自己的几何体（基于 three.js 的 NURBSCurve 示例）和着色器材质（着色器从行头到尾混合两种颜色）而减慢并控制不透明度）。我最大的数据包括超过 9000 条线和超过 5000 个立方体。没有这些线，FPS 速率在 45 - 50 (DirectX) 或 20 FPS (OpenGL) 之间，但有了这些线，性能下降到 5 FPS。我只有一个英特尔高清显卡（第 5 代）显卡，因此最大 FPS 似乎限制为 60 FPS，但在我的情况下这完全足够了。 正如我之前所说，这些线是 NURBS 曲线，它们的范围从短曲线到长而复杂的曲线。另一个要求（这让我有点头疼;-)）是每条线的宽度不同，所以我实际上必须使用 OpenGL，这在我的情况下速度较慢并且还会导致一些其他问题。
无论如何，我尝试了几种方法，但没有一种方法能真正帮助我解决问题。
1) 为每条线创建管道并合并几何图形。 -> 这将场景的创建时间从 1 秒减至几分钟。此外FPS率无法提高。这实际上是意料之中的，因为这种方法会产生大量的顶点和面。
2) 减少曲线点。 -> 从 200 点减少到 50 点，这有助于稍微提高 FPS。减少到 25 分并没有带来任何改进。我正在考虑编写一种方法来减少不需要的点（比如在直线曲线中，2 个而不是 50 个点就足够了），但我不知道如何实现这一点，所以我首先考虑了其他方法。也许我会回到这个。
3) 使用 BufferGeometry。 -> 似乎 BufferGeometry 不能与着色器材质一起使用。至少在我的情况下，我没有让它工作，所以我的尝试都没有显示任何东西。顺便说一句，我使用 THREE.BufferGeometryUtils 从我的 NURBS 曲线创建缓冲区几何图形。我尝试将 THREE.VertexColors 设置为几何中的函数和 colorsNeedUpdate 的参数，但仍然没有显示。实际上，我也尝试了带有路缘几何的 buffergeometry，但没有得到任何性能改进。
4) 使用样条线代替 NURBS 曲线。 ->曲线的路径与我希望的不同，也没有任何改进。
5) 使用 THREE.LinePieces 将线条合并为一行。 -> 好吧，虽然我不得不将顶点数加倍，但这实际上有很大帮助。在 DirectX 的情况下，性能从 5 FPS 提高到 25 FPS（OpenGL 仍为 4 FPS），但这种解决方案不适合我的情况。原因是线条的宽度不能不同，这是在 DirectX 无论如何都限制为 1 的情况下。我想知道其他人如何解决线宽限制的问题，并发现有些人正在通过几何着色器创建更粗的线。所以我的新希望是这个几何着色器。但后来我发现 WebGL 不支持几何着色器。
很抱歉到目前为止对我的方法的解释很长。在尝试了所有这些之后，我无法想出任何新的想法。现在我想从专家那里知道我是否应该忍受 FPS 下降，或者是否还有其他方法可以尝试？
【问题讨论】：
-
看看
renderer.info，看看你是否能找出你的瓶颈所在。此外，BufferGeometry实际上可以与ShaderMaterial一起使用：threejs.org/examples/…。 -
非常感谢您的快速回复。我查看了
renderer.info，正如预期的那样，几何图形的数量太多，导致调用过多（上面的示例有 9225 个几何图形/调用（在上传行之前有 4 个））。但是当我想要不同宽度的线条时，我不知道如何减少几何图形的数量（见 5）。关于BufferGeometry，我的代码中有一个错误（使用BufferGeometryUtils，但它实际上不支持线几何）。修复它但仍然没有提高性能可能是因为调用次数仍然相同？
标签： performance three.js line webgl