Triangle Fan Primitive

A center vertex and surrounding ring vertices produce a pie-slice fan with gl.TRIANGLE_FAN.

Program

Triangle fans are useful for radial or convex shapes. The first vertex is reused as the shared center of every triangle.

triangle_fan_primitive.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const vertices = new Float32Array([
    0.00,  0.00,  0.98, 0.78, 0.27,
   -0.74, -0.20,  0.20, 0.83, 0.70,
   -0.38,  0.58,  0.22, 0.47, 0.96,
    0.36,  0.62,  0.66, 0.45, 0.96,
    0.74, -0.14,  0.96, 0.42, 0.32,
    0.22, -0.66,  0.14, 0.76, 0.54,
   -0.74, -0.20,  0.20, 0.83, 0.70
  ]);
  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_FAN, 0, 7);
</script>

TRIANGLE_FAN TRIANGLE_FAN reuses the first vertex as the center of each triangle.

fan closure Repeating the first outer vertex closes a complete fan shape.