BindBuffer和BufferData背靠背调用

Question

在OpenGL ES(或者在我的例子中,WebGL)中,我没有看到如何绑定顶点和颜色缓冲区,然后调用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绑定到第一个顶点,bufferData,然后去绑定一些颜色,那么幕后会发生什么？在某种程度上,我觉得应该忽略顶点信息,因为我将颜色信息绑定到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;
   }
};