Pipeline Basics

Shader Program

A vertex shader and fragment shader are compiled, attached, linked, and selected, but pixels wait for a later draw call.

Program

WebGL separates setup calls from draw calls. Compiling shaders, attaching them, linking a program, and selecting it with useProgram configure GPU state; they do not rasterize anything. Pixels appear only when a draw call runs with a program and vertex data ready.

shader_program.html
Visuals: generated teaching cards from captured state
  • state written by this keyframe
shader_program.html · full logical source
1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  const gl = stage.getContext("webgl");
4  const vs = gl.createShader(gl.VERTEX_SHADER);
5  gl.shaderSource(
6    vs,
7    "attribute vec2 aPos; " +
8      "void main(){ gl_Position = vec4(aPos,0,1); }"
9  );
10  gl.compileShader(vs);
11  const fs = gl.createShader(gl.FRAGMENT_SHADER);
12  gl.shaderSource(
13    fs,
14    "precision mediump float; " +
15      "void main(){ gl_FragColor = vec4(0.2,0.8,0.9,1); }"
16  );
17  gl.compileShader(fs);
18  const program = gl.createProgram();
19  gl.attachShader(program, vs);
20  gl.attachShader(program, fs);
21  gl.linkProgram(program);
22  gl.useProgram(program);
23</script>

  1. Create the vertex shader object

    kf: 1event 0kind: lifecycle

    Create the vertex shader object.

    4const vs = gl.createShader→ created(gl.VERTEX_SHADER);
    The canvas remains cleared while a vertex shader object is allocated.
    Shader objects are GPU resources, not visible geometry.
    State after this keyframenone → createdvertex shader

  2. Compile the vertex shader source

    kf: 2event 1kind: lifecycle

    Compile the vertex shader source.

    10gl.compileShader→ compiled(vs);
    The vertex shader is compiled; no fragments have been produced.
    Compilation validates shader code for later pipeline use.
    State after this keyframesource text → compiledvertex shader

  3. Compile the fragment shader source

    kf: 3event 2kind: lifecycle

    Compile the fragment shader source.

    17gl.compileShader→ compiled(fs);
    The fragment shader is compiled, but the screen is still just the clear color.
    Fragment shaders color pixels only during a draw call.
    State after this keyframesource text → compiledfragment shader

  4. Link both compiled shaders into a program

    kf: 4event 3kind: lifecycle

    Link both compiled shaders into a program.

    21gl.linkProgram→ linked(program);
    The shaders are linked into one program object.
    Linking joins vertex and fragment stages into one pipeline program.
    State after this keyframeattached shaders → linkedprogram

  5. Select the program for later drawing

    kf: 5event 4kind: lifecycle

    Select the program for later drawing.

    22gl.useProgram→ program(program);
    The program is active, but pixels wait for vertex input and a draw call.
    useProgram changes current WebGL state; it does not draw.
    State after this keyframenone → programactive program
vertex shader A vertex shader computes clip-space positions for vertices.
fragment shader A fragment shader computes colors for pixels covered by primitives.
program A program is a linked pair of shader stages selected by `useProgram`. It is necessary drawing state, not a draw by itself.