绘制更新webGL网格/曲面的最佳方法

Question

我需要在WebGL中创建一个表面或网格（或粒子系统），它在给定的时间间隔内使用新行进行更新。这基本上是一个光谱显示（类似于瀑布，但它需要是3D），其中每2秒，显示器需要添加一列额外的光谱信息。我想要根据相对高度与整体最大高度逐渐增长为具有彩色顶点/面/粒子的曲面。

总而言之，我认为这是一项非常简单的尝试。然而，出于性能原因，我很难找到最适合这种类型的几何形状。最终，构成表面的点数大约为1000x1000，并且场景中一次至少有2个这样的表面。

到目前为止我玩过的选项包括：

• 将BufferedGeometry与粒子系统材质一起使用。这似乎表现最好，但我无法找到一种优雅的方式来实时更新。因此，在更新时，整个场景都会锁定。
• 使用网格。但是，没有简单的方法来添加一行点并对整个几何体进行三角测量，实时制作面等。这再次阻塞或辅助三角测量功能扼流圈（似乎是随机的）。
• 使用PlaneGeometry默认设置为1000x1000，然后在接收数据列时修改每个点。我还没有真正尝试过这个......但它已经超越了我的想法作为（不受欢迎的）选择。

我试过的前两个选项中的任何一个都没有像我需要的那样表现得那么好。每2秒，接收到~1000个点，需要添加到（现有）几何体中。这真的是一件如此复杂的事吗？任何提示都非常感谢！

Answer 1

您正在寻找流式顶点缓冲区。

创建缓冲区时，您可以指定＆＃34;如何＆＃34;它将被使用（see this）。

我相信STREAM_DRAW最能满足您的需求。

因此，您逐渐收到日期，并仅更新所需缓冲区的部分（gl.bufferSubData等），此参数将为您优化某些内容。

在某些较新的GPU上，

~2M点不应成为问题。

教程：

使用Three.js动画百万个字母 - ＆gt; here（但没有流式传输）。