VBO中的颜色属性如何工作？

Question

我正在编码OpenGL ES 2.0（WebGL）。我正在使用VBO绘制原语。我有顶点阵列，颜色阵列和各种索引。我已经查看了示例代码，书籍和教程，但是我没有得到的一件事 - 如果每个顶点定义颜色，它如何影响与这些顶点相邻的多边形表面？ （我是opengl（ES）的新手）

我将以一个例子解释。我有一个立方体要画。根据我在OpenGles书中阅读的内容，该颜色被定义为顶点属性。在这种情况下，如果我想用6种不同颜色绘制6个立方体的面孔，我应该如何定义颜色。我的混乱来源是：每个顶点是3个面的共同点，那么它将如何帮助定义每个顶点的颜色？ （或者应该按索引定义颜色？）。我们需要将这些面孔细分为三角形的事实使我更难理解这种关系的工作方式。边缘也是如此的混乱。假设我想使用线条线绘制边缘，而不是绘制三角形。不同颜色的每个边缘。在这种情况下，我应该如何定义颜色属性？

我看过几乎没有工作的例子。特别是本教程： http://learningwebgl.com/blog/?p=370

我看到上面示例中如何定义颜色数组以绘制具有6个不同颜色面的立方体，但是我不明白为什么要以这种方式定义。 （为什么每种颜色都将4次复制到UnxetColors中？）

有人可以解释颜色属性如何在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;

Answer 1

我喜欢看的方式是，每个顶点不是空间的点，而是一束属性。这些通常（但并非总是）包括其位置和 可能 包括其颜色，纹理坐标等，等等。通过指定一组顶点来定义三角形（或行或其他原始），然后通过线性插值来定义每个像素的每个属性的值值。

正如利亚姆（Liam）所说，正如您在评论中所意识到的那样，这意味着，如果您想在太空中使用一个顶点用于多个原语的空间点（例如，Cube的一角） - location属性以每个属性为基础变化，每个属性组合都需要一个单独的顶点。

这在某种程度上浪费了内存 - 但是采用其他任何方式所涉及的复杂性会使情况变得更糟，并且需要图形硬件来完成更多的工作解开和重新包装数据。对我来说，感觉浪费与我们在视频记忆中使用32位RGBA值获得的浪费相媲美，而不是保留我们想要使用的每种颜色的“调色板”查找表，然后存储一个索引该像素（当然，当RAM更昂贵时我们过去要做的事情）。

Answer 2

如果一组多边形的颜色相同，则可以将所有多边形共享的顶点及其颜色共享一次，并由多边形共享（使用索引）。

如果多边形的颜色不同，那么即使顶点的位置可能很常见，也不是颜色，因此无法共享顶点。您需要为每个多边形定义顶点。