如何在WebGL中为对象设置动画(修改特定顶点不是完全变换)

Question

好的,

我是3D图形的新手,我想在模型中为各个特定顶点设置动画(不是整个模型变换).我的脚本主要基于NEHE webgl教程.在本教程中,所有对象顶点都存储在缓冲区中,该缓冲区在首次运行程序时初始化一次.这是初始化代码:*注意顶点包含顶点数组

vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
vertexBuffer.itemSize = 3;
vertexBuffer.numItems = parseInt(vertices.length/vertexBuffer.itemSize);

现在因为它们在开始时被初始化,显然改变顶点数组将不起作用.所以我想知道如何实时修改顶点的最佳方法,同时仍保持其足够高效以便顺利运行.

是否有可能以某种方式重新绑定缓冲区,例如在每个动画时刻再次运行此代码？

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

干杯,J

Answer 1

好好经过大量的网络挖掘.我发现必须做出以下改变; 首先,您必须使顶点数组缓冲区动态化.这是通过使用枚举器'gl.DYNAMIC_DRAW'实现的,以前在大多数教程中我们都有'gl.STATIC_DRAW'.导致以下结果:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.DYNAMIC_DRAW);

必须在循环(或刻度或动画)函数中触发第二个更改.调用新函数以更新数组.您必须首先首先绑定先前的动态数组缓冲区:

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

然后在此之后使用以下函数更新旧顶点:

gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(vertices));

参数是<buffer_type>,<array_offset>,<new_data>

资料来源:http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf

希望这有助于某人:)

Ĵ