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

Question

我正在开发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));

但它始终呈现在同一点!

Answer 1

我使用额外的调用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上可以看到视频卡上两个顶点操作的实例.这些演示的源代码分别在这里和这里免费提供.

我希望这对你有所帮助.