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

Visuals: generated teaching cards from captured state

state written by this keyframe

line_strip_primitive.html · full logical source

1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  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
      ]);
4  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
5  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
6  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 20, 0);
7  gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 20, 8);
8  gl.drawArrays(gl.LINE_STRIP, 0, 5);
9</script>

Store five ordered vertices

kf: 1event 0kind: lifecycle

Store five ordered vertices.

⋯3const vertices = new Float32Array→ 5 points([
 -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
]);⋯

The JavaScript array holds five points for a connected strip. — LINE_STRIP depends on vertex order; each point after the first extends the line.

State after this keyframeunset → 5 pointsvertex order

2
Upload the line-strip vertices
kf: 2event 1kind: lifecycle
Upload the line-strip vertices.
```
⋯5gl.bufferData→ 5 vertices(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);⋯
```
bufferData moves the typed array into GPU-side buffer storage.
State after this keyframeempty → 5 verticesbuffer data
3
Describe position and color attributes
kf: 3event 2kind: lifecycle
Describe position and color attributes.
```
⋯7gl.vertexAttribPointer→ position + color(aColor, 3, gl.FLOAT, false, 20, 8);⋯
```
The same interleaved attribute layout works for line and triangle primitives.
State after this keyframedisabled → position + colorattributes
4
Draw the connected strip primitive
kf: 4event 3kind: lifecycle
Draw the connected strip primitive.
```
⋯8gl.drawArrays→ LINE_STRIP(gl.LINE_STRIP, 0, 5);⋯
```
drawArrays with LINE_STRIP links each vertex to the next one.
State after this keyframenone → LINE_STRIPprimitive mode

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.