Come gli attributi di colore lavorare in VBO?

Question

sto codifica per OpenGL ES 2.0 (WebGL). Sto usando VBOs disegnare primitive. Ho vertex array, array di colore e la matrice di indici. Ho guardato codici di esempio, libri e tutorial, ma una cosa che non si ottiene - se il colore è definito per vertice come influisce sulle superfici poligonali adiacenti a quei vertici? (Sono un novizio a OpenGL (ES))

vi spiegherò con un esempio. Ho un cubo per disegnare. Da quello che ho letto OpenGLES libro, il colore è definito come un attributo vertice. In tal caso, se voglio disegnare 6 facce del cubo con 6 colori diversi come devo definire i colori. La fonte della mia confusione è: ogni vertice è comune a 3 facce, allora come lo aiuterà definire un colore per vertice? (O dovrebbe il colore essere definito per ogni indice?). Il fatto che abbiamo bisogno di suddividere questi volti in triangoli, rende più difficile per me capire come funziona questo rapporto. Lo stesso vale per confusione bordi. Invece di disegnare triangoli, diciamo che voglio disegnare bordi utilizzando linee primitive. Ciascun bordo colore. Come faccio a definire gli attributi del colore in quel caso?

ho visto alcuni esempi di lavoro. In particolare questo tutorial: http://learningwebgl.com/blog/?p=370

I vedere come array di colore è definito nell'esempio di cui sopra per disegnare un cubo con 6 facce diverse di colore, ma non capisco il motivo per cui è definito in quel modo. (Perché ogni colore copiato 4 volte in unpackedColors per esempio?)

qualcuno può spiegare come il colore degli attributi lavoro VBO?

[Il collegamento di cui sopra sembra inaccessibile, così mi post il relativo codice qui]

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

Il modo in cui mi piace vedere le cose è che ogni vertice non è un punto nello spazio, ma piuttosto un insieme di attributi. Questi generalmente (ma non sempre) includono la sua posizione e possono includere il suo colore, coordinate di texture, ecc, ecc, ecc Un triangolo (o linea, o altra primitiva) è definito specificando un insieme di vertici, quindi generare valori per ciascun attributo per ogni pixel interpolando linearmente i valori per-vertice.

Come Liam dice, e come hai capito nel tuo commento, questo significa che se si vuole avere un punto nello spazio che viene utilizzato da un vertice per più primitive - per esempio, l'angolo di un cubo - con altri non-luogo attributi che varia in base al-primitivo, è necessario un vertice separato per ogni combinazione di attributi.

Questo è uno spreco di memoria in una certa misura -, ma la complessità insita nel fare in altro modo sarebbe peggiorare le cose, e richiederebbe l'hardware grafico di fare molto più lavoro disimballaggio e reimballaggio dati. Per me, si sente come i rifiuti è paragonabile ai rifiuti si ottiene utilizzando i valori RGBA a 32 bit per ogni pixel nella nostra memoria video invece di mantenere una "tavolozza" tabella di ricerca di ogni colore che vogliamo utilizzare e poi basta memorizzare un indice in quel pixel per-(che è, ovviamente, quello che abbiamo usato per fare quando la RAM era più costoso).

Answer 2

Se il colore di un insieme di poligoni è lo stesso poi un vertice condiviso da tutti i poligoni, insieme con il suo colore, può essere definito una volta condiviso dai poligoni (utilizzando un indice).

Se il colore dei poligoni è diversa anche se la posizione di un vertice può essere comune, il colore non è, e quindi il vertice nel suo complesso non può essere condivisa. Sarà necessario definire il vertice per ogni poligono.