这是我的第一个问题，所以我希望它符合指南 . 还请原谅我糟糕的英语 .
我目前正在开发一个基于three.js的WebGL应用程序，它在这些多维数据集之间显示数千个立方体和线条 . 我有几个性能问题所以我决定将所有立方体合并到一个几何体 . 这有点帮助但实际上性能因数千行而减慢（所有行都有自己的几何形状（基于NURBSCurve示例为three.js）和着色器材质（着色器从行的开头到结尾混合两种颜色）我最大的数据包括超过9000行和超过5000个立方体 . 没有线路，FPS速率介于45 - 50（DirectX）或20 FPS（OpenGL）之间，但线路性能下降到5 FPS . 我只有一个英特尔高清显卡（第5代）显卡，所以最大FPS似乎限制在60 FPS，但这在我的情况下是完全足够的 . 正如我之前所说的线是NURBS曲线，它们的范围从短曲线到长曲线另一个要求（这让我有点头疼;-)）是每条线的宽度不同，所以我实际上必须使用OpenGL，这在我的情况下较慢，并且还会导致一些其他问题 .
无论如何，我已经尝试了几种方法，但它们都没有真正帮助我解决问题 .
1) Create pipes for each line and merge the geometries. - >这会将场景的创建速度从1秒减慢到几分钟 . 除了FPS率无法改善 . 实际上这是由于这种方法产生的顶点和面的质量 .
2) Reduce points of curve. - >从200减少到50分，这有助于提高FPS . 减少到25分并没有知道如何实现这一目标，所以我首先想到了其他方法 . 也许我会回到这里 .
3) Use BufferGeometry. - >似乎BufferGeometry不能与着色器材质一起使用 . 至少在我的情况下，我没有得到任何性能上的改进 .
4) Use splines instead of NURBS curves. - >曲线的路径不像我希望的那样，并没有任何改进 .
5) Merge lines to one line with THREE.LinePieces. - >好吧，虽然我不得不将顶点数量加倍，但实际上这有很大帮助 . 在DirectX的情况下，性能从5 FPS提高到25 FPS（OpenGL仍然是4 FPS），但这种解决方案在我的情况下并不合适 . 原因是线条的宽度不能有所不同，这是在DirectX限制为1的情况下 . 我想知道其他人是如何解决线宽限制问题的，并发现有些人正在通过Geometry Shader创建更粗的线条 . 所以我的新希望就是这个几何着色器 . 但后来我发现WebGL不支持几何着色器 .
很抱歉到目前为止对我的方法有很长的解释 . 在尝试了所有我无法想出任何新想法之后 . 现在我想知道专家是否应该接受FPS下降，或者还有其他方法可以尝试？
1 回答
我提出了按宽度捆绑线条的想法，然后使用
THREE.LinePieces合并这些捆绑包 . 在最好的情况下，我可以将大约860行减少到只有2.当然，此解决方案的有效性取决于数据 . 此外，我仍然存在DirectX比OpenGL快得多的问题（例如50 FPS而不是8 FPS），但我需要后者才能支持更粗的线条 . 因此，如果有人想出一个支持DirectX的问题的解决方案，我将非常感激:-) .