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提供了视频卡上两个顶点操作的实例。这些演示的源代码分别免费提供here和here。

我希望这对你有所帮助。

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

1 个答案:

然而