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

Question

我需要在WebGL中创建一个曲面或网格（或粒子系统），并在给定的时间间隔更新一个新行。这基本上是一个光谱显示（类似于瀑布，但它需要在3D中），其中显示需要每隔2秒添加一列额外的光谱信息。我希望根据相对高度与整体最大高度相比，逐渐生长成具有彩色顶点/面/粒子的曲面。总而言之，我认为这是一个非常简单的努力。然而，由于性能的原因，我很难找到最适合的几何类型。最终，构成曲面的点有多达约1000x1000点，同时场景中至少有2个这样的曲面。

选项I都起到与周围迄今包括：

• 使用具有粒子系统材料BufferedGeometry。这似乎表现最好，但我无法找到一个实时更新此优雅方式。所以更新它时，整个场景都会锁定。
• 使用网格。但是没有简单的方法来添加一排点并对整个几何体进行三角测量，实时制作人脸等。这再次阻塞或辅助三角函数扼流圈（随机看起来）。
• 使用PlaneGeometry默认设置为1000x1000的大小，然后在收到数据列时修改每个点。我还没有真正尝试过这个，但是它作为一个（不希望的）选项在我的脑海中传播。

我尝试过的前两个选项都没有表现得像我所需要的那样好。每2秒钟接收一个〜1000个点并需要添加到（现有）几何图形中。这真的是如此复杂的努力？任何提示非常感谢！

Answer 1

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

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

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

所以，你逐渐收到日期，只更新你需要的缓冲区的部分（gl.bufferSubData等），这个参数会为你优化某些东西。

〜2M点在新GPU上应该不成问题。

教程：

动画万封带有three.js所 - >here（但不流）。