Cómo los atributos de color trabajar en VBO?

Question

Estoy de codificación para OpenGL ES 2.0 (webgl). Estoy usando OISCIV para dibujar primitivas. Tengo array vértice, matriz de color y gama de índices. He mirado códigos de ejemplo, libros y tutorial, pero una cosa que no te - si el color se define por vértice cómo afecta a las superficies poligonales adyacentes a esos vértices? (Soy un novato en OpenGL (ES))

voy a explicar con un ejemplo. Tengo un cubo de dibujar. Por lo que leo en el libro OpenGLES, el color se define como un atributo vértice. En ese caso, si quiero llamar 6 caras del cubo con 6 colores diferentes de cómo debería definir los colores. La fuente de mi confusión es: cada vértice es común a 3 caras, entonces, ¿cómo va a ayudar a definir un color por vértice? (O el color debe ser definida por el índice?). El hecho de que necesitamos para subdividir estas caras en forma de triángulos, hace que sea más difícil para mí entender cómo funciona esta relación. La misma confusión va para bordes. En vez de dibujar triángulos, digamos que quiero dibujar bordes utilizando líneas primitivas. Cada borde de diferente color. ¿Cómo se supone para definir los atributos de color en ese caso?

he visto algunos ejemplos de trabajo. Específicamente este tutorial: http://learningwebgl.com/blog/?p=370

Me ver cómo se define la matriz de colores en el ejemplo anterior para dibujar un cubo con 6 caras diferentes colores, pero yo no entiendo por qué se define de esa manera. (¿Por qué cada color copiada 4 veces en unpackedColors por ejemplo?)

Puede alguien explicar cómo los atributos de color de trabajo en VBO?

[El enlace de arriba parece inaccesible, por lo que voy a publicar el código en cuestión aquí]

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

La forma en que me gusta verlo es que cada vértice no es un punto en el espacio, sino más bien un conjunto de atributos. Estos por lo general (pero no siempre) incluyen su ubicación y puede incluir su color, coordenadas de textura, etc., etc., etc. Un triángulo (o línea, o de otra primitiva) se define mediante la especificación de un conjunto de vértices, a continuación, la generación de valores para cada atributo en cada pixel por interpolación lineal de los valores por vértice.

Como dice Liam, y como se ha dado cuenta en su comentario, esto significa que si usted quiere tener un punto del espacio que es utilizado por un vértice para múltiples primitivas - por ejemplo, la esquina de un cubo - con otros no-lugar atributos que varía en función de cada primitiva, necesita un vértice separado para cada combinación de atributos.

Esto es un desperdicio de memoria hasta cierto punto - pero la complejidad de hacerlo de otra manera sería empeorar las cosas, y requeriría el hardware de gráficos para hacer mucho más trabajo desembalaje y volver a empaquetar los datos. Para mí, se siente como los residuos es comparable a los residuos que obtenemos mediante el uso de los valores RGBA de 32 bits para cada píxel en nuestra memoria de vídeo en lugar de mantener una tabla de búsqueda "paleta" de todos los colores que queremos usar y luego simplemente almacenar una índice en ese pixel per-(que es, por supuesto, lo que solíamos hacer cuando la memoria RAM era más caro).

Answer 2

Si el color de un conjunto de polígonos es la misma, entonces un vértice compartido por todos los polígonos, junto con su color, se puede definir una vez y compartido por los polígonos (utilizando un índice).

Si el color de los polígonos es diferente a continuación, a pesar de que la posición de un vértice puede ser común, el color no es, y por lo tanto el vértice en su conjunto no puede ser compartida. Usted tendrá que definir el vértice de cada polígono.