在WebGL中，ARRAY_ELEMENT_BUFFER如何知道要引用哪个ARRAY_BUFFER

Question

我对ARRAY_INDEX_BUFFER（索引缓冲区）与ARRAY_BUFFER （数组缓冲区）的使用有点困惑，并且正在寻求澄清/更好的理解。

具体来说，我很困惑（考虑到多个数组缓冲区的存在）WebGL 和索引缓冲区如何知道要引用哪个数组缓冲区？*

使用从Mozilla 的使用 WebGL 演示创建 3D 对象获得的代码 作为基础，我理解数组缓冲区的分配和初始化为

cubeVerticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
var vertices = [
    // Front face
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,

    // Back face
    -1.0, -1.0, -1.0,
    -1.0,  1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0, -1.0, -1.0,

    // Top face
    -1.0,  1.0, -1.0,
    -1.0,  1.0,  1.0,
     1.0,  1.0,  1.0,
     1.0,  1.0, -1.0,

    // Bottom face
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
     1.0, -1.0,  1.0,
    -1.0, -1.0,  1.0,

    // Right face
     1.0, -1.0, -1.0,
     1.0,  1.0, -1.0,
     1.0,  1.0,  1.0,
     1.0, -1.0,  1.0,

    // Left face
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0,  1.0, -1.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

然后索引存储在索引缓冲区中，如下所示

cubeVerticesIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);  
var cubeVertexIndices = [
    0,  1,  2,      0,  2,  3,    // front
    4,  5,  6,      4,  6,  7,    // back
    8,  9,  10,     8,  10, 11,   // top
   12, 13, 14,     12, 14, 15,   // bottom
   16, 17, 18,     16, 18, 19,   // right
   20, 21, 22,     20, 22, 23    // left
 ]
 gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);

但考虑到还有一个颜色数组缓冲区定义为

var colors = [
    1.0,  1.0,  1.0,  1.0,    // Front face: white
    1.0,  0.0,  0.0,  1.0,    // Back face: red
    0.0,  1.0,  0.0,  1.0,    // Top face: green
    0.0,  0.0,  1.0,  1.0,    // Bottom face: blue
    1.0,  1.0,  0.0,  1.0,    // Right face: yellow
    1.0,  0.0,  1.0,  1.0     // Left face: purple
];
var generatedColors = [];
for (j=0; j<6; j++) {
    var c = colors[j];
    for (var i=0; i<4; i++) {
      generatedColors = generatedColors.concat(c);
    }
}

cubeVerticesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(generatedColors), gl.STATIC_DRAW);

但是一旦进入绘制例程，顺序就是

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);

我假设bindBuffer方法告诉 WebGL“状态机”使通用缓冲区“活动”，并且 gl.bindBuffer (gl.ELEMENT_ARRAY_BUFFER根据当前通用缓冲区使新的索引缓冲区处于活动状态

不知何故，我认为我对正在发生的事情的理解并不完全正确。任何澄清将不胜感激。具体来说，我想在某个时候添加具有不同缓冲区的附加对象（例如球体或环面，具有完全其他的配色方案）

但我理解drawElements(只是根据索引进行绘制，而不是drawArrays(完成的实际数组)

正确的？

Answer 1

OpenGL 及其变体（WebGL 等）的隐藏诅咒是状态机。当您调用时glBindBuffer(GL_ARRAY_BUFFER, buffer)，状态机将设置buffer为活动数组缓冲区。同样，当您调用 时glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, indexbuffer)，状态机设置indexbuffer为活动元素数组缓冲区（或活动索引缓冲区）。

调用时glVertexAttribPointer，给定属性索引的数据来自活动数组缓冲区。这正是您在上一个代码片段中描述的方式。当您发出绘制调用（例如glDrawElements）时，活动索引缓冲区用于对属性进行索引。

具体来说，我很困惑（考虑到多个数组缓冲区的存在）WebGL 和索引缓冲区如何知道要引用哪个数组缓冲区？

要认识到的最重要的一点是，单个顶点不仅仅是其位置，而是其所有属性的组合。在你的例子中，一个位置和一个颜色组成了一个顶点。现在，查看您指定的属性：

Position: | pos0   | pos1   | pos2   | pos3   | pos4   | pos5   | pos6   |
Color:    | color0 | color1 | color2 | color3 | color4 | color5 | color6 |

索引缓冲区中的每个索引都指位置和颜色属性的组合。也就是说，索引 0 将获取pos0和color0; 索引 5 将获取pos5和color5。

为了回答您的问题，索引缓冲区是指调用时引用的所有数组缓冲区glVertexAttribPointer。

（严格来说，索引缓冲区指的是所有启用的属性。 的最后一个参数glVertexAttribPointer允许您指定活动数组缓冲区的偏移量，以便多组属性可以来自同一数组缓冲区。）