Line Strip Primitive

Five ordered vertices become one connected line strip after buffer upload, attribute setup, and a drawArrays call with gl.LINE_STRIP.

Program

Primitive modes decide how WebGL assembles vertices. LINE_STRIP keeps the vertex order and draws a connected segment between neighbors.

line_strip_primitive.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const vertices = new Float32Array([
   -0.82, -0.54,  0.20, 0.83, 0.70,
   -0.46,  0.34,  0.20, 0.55, 0.96,
   -0.12, -0.10,  0.95, 0.77, 0.25,
    0.30,  0.48,  0.96, 0.42, 0.32,
    0.78, -0.30,  0.70, 0.40, 0.96
  ]);
  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.LINE_STRIP, 0, 5);
</script>

primitive mode A primitive mode tells WebGL how to assemble vertices for drawing.

LINE_STRIP LINE_STRIP draws connected line segments through vertices in order.