22

好的，

我是 3D 图形的新手，我想为模型中的单个特定顶点设置动画（不是整个模型变换）。我的脚本主要基于 NEHE webgl 教程。在本教程中，所有对象顶点都存储在缓冲区中，该缓冲区在程序第一次运行时初始化一次。下面是初始化代码： *注意 vertices 包含一个顶点数组

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

4

2 回答 2

50

好吧，经过大量的网络挖掘。我发现必须进行以下更改；首先，您必须使顶点数组缓冲区动态化。这可以通过使用枚举器“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

希望这可以帮助某人:)

Ĵ

于 2011-03-31T11:52:11.240 回答
4

或者，您可以按照http://learningwebgl.com/blog/?p=239中的说明进行操作。

在这里，它们保持顶点数据不变。相反，他们不断改变矩阵 mvMatrix，它提供了所需的平移和旋转。然后将 mvMatrix 通过一个统一变量馈送到着色器，然后乘以顶点位置以获得新的顶点位置。希望这可以帮助。

于 2012-08-03T08:50:43.367 回答