Che cos'è un buffer di indice e in che modo è correlato ai buffer dei vertici?

Ho un buffer di vertici come questo:

0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0

Ho il seguente buffer di indice:

0, 2,
2, 4,
4, 3,
3, 2,
2, 1,
1, 0,
0, 3,
3, 1

So che voglio disegnare gl.LINESusando WebGL, significa più segmenti di linea separati.

gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, indexBuffer);

Sembra abilitare il disegno di più segmenti di linea in una singola chiamata di disegno in WebGL.

Qualcuno potrebbe ELI5 per me, che cos'è un buffer di indice e in che modo è correlato ai buffer dei vertici? Come generare buffer di indice dalle mie primitive?

Qualcuno potrebbe ELI5 per me, che cos'è un buffer di indice e in che modo è correlato ai buffer dei vertici

Il buffer dei vertici contiene le coordinate X e Y di 5 vertici. Loro sono:

index |  X  |  Y
  0   | 0.0 | 0.0 
  1   | 1.0 | 0.0
  2   | 0.0 | 0.6
  3   | 1.0 | 0.6
  4   | 0.5 | 1.0

Il buffer dell'indice contiene informazioni su quali linee tracciare tra questi vertici. Utilizza come indice l'indice di ciascun vertice nel buffer dei vertici.

Dato che stai disegnando linee, ogni coppia di valori consecutivi nel tuo buffer indice indica un segmento di linea. Ad esempio, se il buffer dell'indice inizia con 0, 2, significa tracciare una linea tra il vertice 0 e il secondo nell'array di vertici, che in questo caso trarrebbe una linea che va da [0.0, 0.0]a [0.0, 0.6].

Nel grafico seguente ogni coppia di indici è coordinata per colore con la linea che indica:

Allo stesso modo, se si disegnassero triangoli anziché linee, sarebbe necessario fornire un buffer di indice in cui ogni 3 valori consecutivi indicano gli indici di tre vertici nel buffer di vertici, ad es.

0, 1, 2,
2, 1, 3,
2, 3, 4,

Se hai un buffer di vertici come questo:

var vertices = [
  0.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.5, 1.0, 0.0
]

E semplicemente disegnalo così com'è:

// Create an empty buffer object
var vertex_buffer = gl.createBuffer();

// Bind appropriate array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

// Pass the vertex data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 5);

Richiederebbe due coordinate dedicate per ogni segmento di linea. Con verticesquanto sopra definito, sarebbero possibili solo due linee :

Se sono stati definiti i seguenti indici:

var indices = [
  0, 2,
  2, 4,
  4, 3,
  3, 2,
  2, 1,
  1, 0,
  0, 3,
  3, 1
]

È possibile disegnare linee che intersecano gli stessi vertici ancora e ancora. Questo riduce la ridondanza. Se si collega il buffer dell'indice e si dice alla GPU di disegnare segmenti di linea che collegano i vertici secondo l'ordine specificato nell'array indecies:

var index_buffer = gl.createBuffer();

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);

gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// draw geometry lines by indices
gl.drawElements(gl.LINES, 16, gl.UNSIGNED_SHORT, index_buffer);

Si possono disegnare figure più complesse senza ridefinire continuamente gli stessi vertici. Questo è il risultato:

Per ottenere lo stesso risultato senza indici, il buffer dei vertici dovrebbe essere simile al seguente:

var vertices = [
  0.0, 0.0, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.5, 1.0, 0.0,
  0.5, 1.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  0.0, 0.6, 0.0,
  1.0, 0.0, 0.0,
  1.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  0.0, 0.0, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.6, 0.0,
  1.0, 0.0, 0.0
]

/* [...] */

// Draw the lines
gl.drawArrays(gl.LINES, 0, 16);

Che risulta nella stessa immagine:

Nota l'enorme ridondanza nei vertici memorizzati.