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 vertices
definido 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.