javascript - webGL 绑定(bind)缓冲区不工作

Question

在尝试在 webgl 中显示一些不同形状的对象时，我发现渲染时只能使用最新创建的缓冲区。这看起来很奇怪，因为我每次渲染之前都会绑定(bind)当前缓冲区:

gl.useProgram(this.program);
gl.enableVertexAttribArray(this.a_Position);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);

gl.uniformMatrix4fv(this.u_ModelMatrix, false, MVPMatrix.elements);
gl.uniform4fv(this.u_FragColor, this.color);

gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.disableVertexAttribArray(this.a_Position);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

因此，为了测试最基本的示例，我尝试创建两个缓冲区并查看将使用哪一个:

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.enableVertexAttribArray(this.a_Position);
// gl.enableVertexAttribArray(this.a_UV);
gl.vertexAttribPointer(this.a_Position, 3, gl.FLOAT, false, 3*4, 0);
// gl.vertexAttribPointer(this.a_UV, 2, gl.FLOAT, false, 5*4, 3*4);
gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
         0.5,  0.5, 0,
        -0.5, -0.5, 0,
         0.5, -0.5, 0,
         0.5,  0.5, 0,
        -0.5,  0.5, 0,
        -0.5, -0.5, 0
    ]),
    gl.STATIC_DRAW
);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

var buffer2 = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer2);
gl.enableVertexAttribArray(this.a_Position);
gl.vertexAttribPointer(this.a_Position, 3, gl.FLOAT, false, 3*4, 0);
gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
         1,  0.5, 0,
        -0, -0.5, 0,
         1, -0.5, 0,
         1,  0.5, 0,
        -0,  0.5, 0,
        -0, -0.5, 0
    ]),
   gl.STATIC_DRAW
);
this.buffer = buffer;

结果是每次都会渲染后一个缓冲区 (buffer2)。这是为什么？我错过了什么？

Answer 1

顶点属性指针是全局状态，不是缓冲区本地的，当您将数据设置到缓冲区时，无需设置顶点属性指针。

vertexAttribPointer 调用基本上告诉 GPU“嘿，位置从 0 开始，每个位置有 3 个 float ”，GPU 通过将属性 pointer 设置为 来遵循当前绑定(bind)的缓冲区地址 + 属性偏移，但是当您更改缓冲区时，该指针保持不变，仍然指向该“旧”缓冲区，您需要通过再次调用来更新它vertexAttribPointer.

所以你的缓冲区初始化代码变成:

var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(
    gl.ARRAY_BUFFER,
    new Float32Array([
         0.5,  0.5, 0,
        -0.5, -0.5, 0,
         0.5, -0.5, 0,
         0.5,  0.5, 0,
        -0.5,  0.5, 0,
        -0.5, -0.5, 0
    ]),
    gl.STATIC_DRAW
);

然后在渲染代码中将顶点属性指针设置为主动绑定(bind)的缓冲区:

gl.useProgram(this.program);
gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
gl.enableVertexAttribArray(this.a_Position);

// Set vertex attribute pointer to current buffer
// Note: I adjusted the stride to 0 to make sense
//       in the context of this question/answer
gl.vertexAttribPointer(this.a_Position, 3, gl.FLOAT, false, 0, 0);

gl.uniformMatrix4fv(this.u_ModelMatrix, false, MVPMatrix.elements);
gl.uniform4fv(this.u_FragColor, this.color);
gl.drawArrays(gl.TRIANGLES, 0, 6);