javascript - WebGL 更新动态网格

Question

我有一个每帧都更新的顶点(网格)集合，想象一朵生长的花，必须在屏幕上绘制。

我目前通过绑定(bind)包含网格顶点的 Float32Array 来渲染网格，每个刻度，因此缓冲区的每一帧都会上传到 GPU。

有没有什么方法可以在不重新上传缓冲区的情况下更新网格？每帧包含添加的新点和保持不变的旧点，是否有任何“gl_pushVerticies”方法？

Answer 1

“每一帧都包含新点，旧点保持不变”这一行 **是这里的关键……

作为“花”的一部分保持不变并添加"new"顶点，我将创建一个包含所有顶点(所有部分)的大顶点缓冲区(完整的花)并使用计数(例如)void gl.drawElements(mode, count, type, offset);

这样您就不需要操作任何顶点缓冲区。

例如使用索引

// create the vertex buffer with all vertices (complete object)
// for example 56 vertices

第 1 帧:

// instead of drawing the complete object, you draw only 24 vertices
gl.drawArrays(gl.TRIANGLES, 24, 0);

框架2:

// instead of drawing the complete object, you draw only 48 vertices
gl.drawArrays(gl.TRIANGLES, 48, 0);

第 3 帧:

// instead of drawing the complete object, you draw only 56 vertices
gl.drawArrays(gl.TRIANGLES, 56, 0);

等.....