¿Qué es un búfer de índice y cómo se relaciona con los búferes de vértices?

Tengo un búfer de vértices como este:

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

Tengo el siguiente búfer de índice:

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

Sé que quiero dibujar gl.LINESusando WebGL, significa múltiples segmentos de línea separados.

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

Parece permitir el dibujo de múltiples segmentos de línea en una sola llamada de dibujo en WebGL.

¿Podría alguien ELI5 para mí, qué es un búfer de índice y cómo se relaciona con los búferes de vértices? ¿Cómo generar buffers de índice a partir de mis primitivas?

¿Podría alguien ELI5 para mí, qué es un búfer de índice y cómo se relaciona con los búferes de vértices?

Su búfer de vértices contiene las coordenadas X e Y de 5 vértices. Son:

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

Su búfer de índice contiene información sobre qué líneas dibujar entre estos vértices. Utiliza el índice de cada vértice en el búfer de vértices como valor.

Como está dibujando líneas, cada par de valores consecutivos en su búfer de índice indica un segmento de línea. Por ejemplo, si el búfer de índice comienza con 0, 2, significa dibujar una línea entre los vértices 0º y 2º en la matriz de vértices, que en este caso dibujaría una línea que va de [0.0, 0.0]a [0.0, 0.6].

En el siguiente gráfico, cada par de índices tiene un color coordinado con la línea que indica:

Del mismo modo, si estuviera dibujando triángulos en lugar de líneas, necesitaría proporcionar un búfer de índice donde cada 3 valores consecutivos indican los índices de tres vértices en el búfer de vértices, por ejemplo

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

Si tiene un búfer de vértices como este:

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
]

Y simplemente dibújalo como está:

// 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);

Requeriría dos coordenadas dedicadas para cada segmento de línea. Con lo verticesdefinido anteriormente, solo sería posible dibujar dos líneas :

Si tiene definidos los siguientes índices:

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

Es posible dibujar líneas que se cruzan con los mismos vértices una y otra vez. Esto reduce la redundancia. Si vincula el búfer de índice y le dice a la GPU que dibuje segmentos de línea que conectan los vértices por el orden especificado en la matriz de indencias:

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);

Uno puede dibujar figuras más complejas sin redefinir los mismos vértices una y otra vez. Este es el resultado:

Para lograr el mismo resultado sin índices, el búfer de vértices debería tener el siguiente aspecto:

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);

Lo que da como resultado la misma imagen:

Tenga en cuenta la enorme redundancia en los vértices almacenados.