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

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const gl = stage.getContext("webgl");
  const vs = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(
    vs,
    "attribute vec2 aPos; " +
      "void main(){ gl_Position = vec4(aPos,0,1); }"
  );
  gl.compileShader(vs);
  const fs = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(
    fs,
    "precision mediump float; " +
      "void main(){ gl_FragColor = vec4(0.2,0.8,0.9,1); }"
  );
  gl.compileShader(fs);
  const program = gl.createProgram();
  gl.attachShader(program, vs);
  gl.attachShader(program, fs);
  gl.linkProgram(program);
  gl.useProgram(program);
</script>

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.