Pipeline Basics

Vertex Buffer

Triangle vertex data is uploaded to a WebGL buffer and connected to the shader before drawArrays paints pixels.

Program

WebGL shaders do not know where vertices live until JavaScript binds a buffer and describes the attribute layout.

vertex_buffer.html
Visuals: generated teaching cards from captured state
  • state written by this keyframe
vertex_buffer.html · full logical source
1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  const gl = stage.getContext("webgl");
4  const vertices = new Float32Array([
        0.0,  0.62,  0.94, 0.35, 0.28,
       -0.62, -0.52,  0.22, 0.82, 0.55,
        0.62, -0.52,  0.29, 0.55, 0.96
      ]);
5  const buffer = gl.createBuffer();
6  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
7  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
8  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 20, 0);
9  gl.vertexAttribPointer(aColor, 3, gl.FLOAT, false, 20, 8);
10  gl.drawArrays(gl.TRIANGLES, 0, 3);
11</script>

  1. Create interleaved position and color data

    kf: 1event 0kind: lifecycle

    Create interleaved position and color data.

    4const vertices = new Float32Array→ 3 vertices([
  0.0,  0.62,  0.94, 0.35, 0.28,
 -0.62, -0.52,  0.22, 0.82, 0.55,
  0.62, -0.52,  0.29, 0.55, 0.96
]);
    The vertex array exists in JavaScript memory.
    Typed arrays hold compact numeric data before upload.
    State after this keyframeunset → 3 verticesvertices

  2. Create a GPU buffer object

    kf: 2event 1kind: lifecycle

    Create a GPU buffer object.

    5const buffer = gl.createBuffer→ WebGLBuffer();
    A buffer object is allocated but has no vertex bytes yet.
    A buffer is GPU-side storage selected by bindBuffer.
    State after this keyframenone → WebGLBufferbuffer

  3. Upload the typed array into the bound buffer

    kf: 3event 2kind: lifecycle

    Upload the typed array into the bound buffer.

    7gl.bufferData→ 15 floats(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    The GPU now has vertex bytes, but the shader still needs layout pointers.
    bufferData copies JavaScript data into GPU-managed buffer storage.
    State after this keyframeempty → 15 floatsbuffer data

  4. Describe position and color attributes

    kf: 4event 3kind: lifecycle

    Describe position and color attributes.

    9gl.vertexAttribPointer→ position + color(aColor, 3, gl.FLOAT, false, 20, 8);
    WebGL can now read positions and colors from each vertex stride.
    Attribute pointers describe how each vertex is packed in the buffer.
    State after this keyframedisabled → position + colorattributes

  5. Draw the three buffered vertices as one triangle

    kf: 5event 4kind: lifecycle

    Draw the three buffered vertices as one triangle.

    10gl.drawArrays→ colored triangle(gl.TRIANGLES, 0, 3);
    A three-color triangle appears on the dark canvas.
    drawArrays runs the active program over the buffered vertices.
    State after this keyframeclear color → colored triangleframebuffer
typed array Float32Array stores compact numeric data in the shape WebGL expects.
buffer A WebGL buffer stores vertex data on the GPU side.
attribute pointer vertexAttribPointer tells WebGL how to read each vertex attribute out of the buffer.