颜色属性如何在VBO中工作?

我正在编写OpenGL ES 2.0(Webgl)的代码。我正在使用VBO绘制基元。我有顶点数组,颜色数组和索引数组。我看过示例代码、书籍和教程,但有一件事我不明白——如果颜色是按顶点定义的,它会如何影响与这些顶点相邻的多边形曲面?(我是OpenGL(ES)的新手)

我将举例说明。我有一个立方体要画。根据我在OpenGLES书中所读到的内容,颜色被定义为顶点属性。在这种情况下,如果我想用6种不同的颜色绘制立方体的6个面,我应该如何定义颜色。我感到困惑的原因是:每个顶点对3个面都是公共的,那么它将如何帮助定义每个顶点的颜色?(或者应该根据索引定义颜色?)。事实上,我们需要将这些面细分为三角形,这让我更难理解这种关系是如何运作的。同样的困惑也适用于边缘。假设我想使用LINES基元绘制边,而不是绘制三角形。每个边缘都有不同的颜色。在这种情况下,我应该如何定义颜色属性?

我很少看到工作实例。特别是本教程: http://learningwebgl.com/blog/?p=370

我在上面的例子中看到了如何定义颜色数组来绘制一个有6个不同颜色面的立方体,但我不明白为什么要这样定义。(例如,为什么每种颜色都被复制4次到未包装的颜色中?)

有人能解释颜色属性在VBO中是如何工作的吗?

[上面的链接似乎无法访问,所以我会在这里发布相关代码]

cubeVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
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 WebGLFloatArray(vertices), gl.STATIC_DRAW);
cubeVertexPositionBuffer.itemSize = 3;
cubeVertexPositionBuffer.numItems = 24;

cubeVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
var colors = [
  [1.0, 0.0, 0.0, 1.0],     // Front face
  [1.0, 1.0, 0.0, 1.0],     // Back face
  [0.0, 1.0, 0.0, 1.0],     // Top face
  [1.0, 0.5, 0.5, 1.0],     // Bottom face
  [1.0, 0.0, 1.0, 1.0],     // Right face
  [0.0, 0.0, 1.0, 1.0],     // Left face
];
var unpackedColors = []
for (var i in colors) {
  var color = colors[i];
  for (var j=0; j < 4; j++) {
    unpackedColors = unpackedColors.concat(color);
  }
}
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(unpackedColors), gl.STATIC_DRAW);
cubeVertexColorBuffer.itemSize = 4;
cubeVertexColorBuffer.numItems = 24;

cubeVertexIndexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
var cubeVertexIndices = [
  0, 1, 2,      0, 2, 3,    // Front face
  4, 5, 6,      4, 6, 7,    // Back face
  8, 9, 10,     8, 10, 11,  // Top face
  12, 13, 14,   12, 14, 15, // Bottom face
  16, 17, 18,   16, 18, 19, // Right face
  20, 21, 22,   20, 22, 23  // Left face
]
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
cubeVertexIndexBuffer.itemSize = 1;
cubeVertexIndexBuffer.numItems = 36;