#VertexMode

How a Vertices object connects its position array into triangles. Same conventions as OpenGL primitive types.

Six vertices in a 3 × 2 grid drawn three different ways:

const mode = controls.select('mode', ['Triangles', 'TrianglesStrip', 'TriangleFan'], 'Triangles');

// 3 across × 2 down. Same six vertices for every mode.
const positions = new Float32Array([
   60,  60, 220,  60, 380,  60,
   60, 200, 220, 200, 380, 200,
]);

const colors = new Float32Array([
  ...CK.Color(220,  60,  60, 1),
  ...CK.Color( 60, 200, 130, 1),
  ...CK.Color( 40,  90, 180, 1),
  ...CK.Color(220, 220,  60, 1),
  ...CK.Color( 60, 200, 200, 1),
  ...CK.Color(200,  60, 200, 1),
]);

const paint = new CK.Paint();
paint.setColor(CK.WHITE);
paint.setAntiAlias(true);

loop(() => {
  const verts = CK.MakeVertices(CK.VertexMode[mode()], positions, null, colors);
  canvas.clear(CK.WHITE);
  canvas.drawVertices(verts, CK.BlendMode.Modulate, paint);
  verts.delete();
  surface.flush();
});

Triangles reads vertices as independent triples — vertices 0/1/2 and 3/4/5 → two separate triangles, ignoring the middle. TrianglesStrip keeps a sliding 3-vertex window — 0/1/2, 1/2/3, 2/3/4, 3/4/5 → four overlapping triangles, filling the rectangle. TriangleFan shares vertex 0 across every triangle — 0/1/2, 0/2/3, 0/3/4, 0/4/5 → a fan out of the top-left corner.

#All values

#See also

• Vertices — the geometry consumer.
• Canvas.drawVertices.