graphics - BindBuffer和BufferData背靠背调用

Question

在 OpenGL ES(或者在我的例子中是 WebGL)中，我不明白如何将顶点和颜色缓冲区背对背绑定(bind)然后调用drawArrays 是如何工作的。例如，这里有一些示例代码供您了解:

vertexBuffer = glCreateBuffer();
glBindBuffer(GL_ARRAY_BUFFER, vertextBuffer);
glBufferData(GL_ARRAY_BUFFER, vertices, GL_STATIC_DRAW);

colorBuffer = glCreateBuffer();
glBindBuffer(GL_ARRAY_BUFFER, colorBuffer);
glBufferData(GL_ARRAY_BUFFER, colors, GL_STATIC_DRAW);

glDrawArrays(GL_TRIANGLES, 0, numberOfVertices);

如果我首先将 GL_ARRAY_BUFFER 绑定(bind)到顶点、bufferData，然后再绑定(bind)一些颜色，那么幕后发生了什么？在我看来，顶点信息应该被忽略，因为我将颜色信息绑定(bind)到它之后的 GL_ARRAY_BUFFER 上。

Answer 1

gl.vertexAttribPointer 实际设置哪些属性使用哪些缓冲区。

你可以把它想象成

gl = { 
   arrayBuffer: someBuffer, 
   vertexArray: {
     elementArrayBuffer: someOtherBuffer,
     attributes: [], 
   },
};

当您调用 gl.bindBuffer 时，您只是在 gl 状态下设置 2 个全局变量之一。

gl.bindBuffer = function(bindPoint, buffer) {
   switch (bindPoint) {
      case: this.ARRAY_BUFFER:
         this.arrayBuffer = buffer;
         break;
      case: this.ELEMENT_ARRAY_BUFFER:
         this.vertexArray.elementArrayBuffer = buffer;
         break;
   }
};

当您调用gl.vertexAttribPointer时，它会将arrayBuffer的当前值复制到指定的属性。

gl.vertexAttribPointer = function(index, size, type, normalized, stride, offset) {
    var attribute = this.vertexArray.attributes[index];
    attribute.size = size;
    attribute.type = type;
    attribute.normalized = normalized;
    attribute.stride = stride;
    attribute.offset = offset;
    attribute.buffer = this.arrayBuffer;  // copies the current buffer reference.
};

纹理的工作原理类似，只是只有 1 个全局变量

gl = { 
    activeTextureUnit: 0,
    textureUnits: [], 
};

gl.activeTexture 设置您正在处理的纹理单元。

gl.activeTexture = function(unit) {
   this.activeTextureUnit = unit - this.TEXTURE_0;  // make it zero based.
};

每个纹理单元都有一个TEXTURE_2D和一个TEXTURE_CUBEMAP，因此gl.bindTexture(b, t)实际上是

gl.bindTexture = function(bindPoint, texture) {
   var textureUnit = this.textureUnits[this.activeTextureUnit];
   switch (bindPoint) {
       case this.TEXTURE_2D:
           textureUnit.texture2D = texture;
           break;
       case this.TEXTURE_CUBEMAP:
           textureUnit.textureCubeMap = texture;
           break;
   }
};

这是一个webgl state diagram