Indexed Quad

Four corner vertices and six indices draw a rectangle as two triangles without duplicating shared corners.

Program

Many meshes reuse vertices. An element array buffer stores indices so drawElements can assemble triangles from shared vertex data.

indexed_quad.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const vertices = new Float32Array([
    -0.62,  0.45,  0.96, 0.46, 0.24,
    -0.62, -0.45,  0.23, 0.75, 0.54,
     0.62, -0.45,  0.28, 0.48, 0.95,
     0.62,  0.45,  0.98, 0.78, 0.27
  ]);
  const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
</script>

index buffer An index buffer stores integer vertex references for drawElements.

drawElements drawElements assembles primitives by looking up vertices through the index buffer.

mesh reuse Indexed drawing avoids duplicating shared vertex attributes.