Triangle Strip Primitive

Six vertices form a zig-zag strip of four triangles with a single drawArrays call using gl.TRIANGLE_STRIP.

Program

Triangle strips are compact because each vertex after the first two completes one more triangle. This reduces repeated vertex data in connected meshes.

triangle_strip_primitive.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const vertices = new Float32Array([
   -0.78,  0.52,  0.20, 0.83, 0.70,
   -0.78, -0.52,  0.22, 0.47, 0.96,
   -0.08,  0.52,  0.96, 0.72, 0.28,
    0.08, -0.52,  0.96, 0.42, 0.32,
    0.78,  0.52,  0.65, 0.45, 0.96,
    0.78, -0.52,  0.14, 0.76, 0.54
  ]);
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 20, 0);
  gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 20, 8);
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 6);
</script>

TRIANGLE_STRIP TRIANGLE_STRIP builds a connected run of triangles from an ordered vertex strip.

vertex reuse A strip reuses nearby vertices instead of repeating every triangle corner.