javascript - 在WebGL中动态更改顶点缓冲区

我正在WebGL中开发布料模拟器，已经准备好所有物理和动画，但是我无法渲染。我习惯在Opengl中使用glVertex，因此在每次迭代中我都可以更改顶点的位置，并且它会移动，但是在WebGL(OpenGL ES)中没有这种方法。

这是我的代码:

//Initialization:
    puntosBuffer= gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    telaVertices3=new Array(12);
    telaVertices3=[
    0.0,0.0,0.0,
    2.0,0.0,0.0,
    1.0,1.7,0.0,
    0.0,1.0,0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(telaVertices3), gl.DYNAMIC_DRAW);

//loop:
    posx=posx+0.2;
    telaVertices3[0]=posx;
    gl.bindBuffer(gl.ARRAY_BUFFER, puntosBuffer);
    gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(telaVertices3));

但是它总是在相同的位置渲染!!!

最佳答案

我使用了对gl.bufferData(...)而不是gl.bufferSubData(...)的其他调用。我不知道这是否重要，但我认为这是我所做的唯一与您的示例不同的事情。

您可以在jax/buffer.js#L48上看到我当前的缓冲区管理实现，并在webgl/buffer.js#L26上看到一个旧版本。如您所见，我没有做任何特别的事情:

gl.bindBuffer(self.bufferType, buffer);
gl.bufferData(self.bufferType, instance, self.drawType);

您可以在webgldemos/md2的实时演示中观看动画。

然而

如果您打算一次更新很多顶点，那么这可能不是最好的方法。相反，我建议将相关数据发送到视频卡并直接在GLSL中执行动画，这样您就不会受到JavaScript速度的限制，并可以利用硬件加速的优势。实际上，我正在将大部分代码转换为这种方式。可以通过jax/blobular和jax/meadow获得视频卡上顶点操作的两个实时示例。这些演示的源代码分别可以免费获得here和here。

希望对您有帮助。

关于javascript - 在WebGL中动态更改顶点缓冲区，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7166931/