BindBuffer and BufferData go back

Question

In OpenGL ES (or in my case, WebGL) I don’t see how vertex and color buffers snap back, and then calls drawArrays. For example, here is a sample code for you to understand:

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);

If I bind GL_ARRAY_BUFFER to the first vertices, bufferData, then go and bind some colors, what happens behind the scenes? For some reason, it seems to me that the vertex information should be ignored, because I linked the color information to GL_ARRAY_BUFFER immediately after it.

Answer 1

glDrawArrays()no matter what is GL_ARRAY_BUFFERgenerally connected. It takes care of vertex binding pointers.

, : . GL_ARRAY_BUFFER glVertexAttribPointer(). VBO, VBO may, .

Answer 2

gl.vertexAttribPointer - , , , .

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

gl.bindBuffer, gl.

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;
   }
};