Shader Program

A vertex shader and fragment shader are compiled, attached to a program, linked, and selected for later draws.

Program

WebGL draw calls need an active program. The program is built from shader source, but none of those setup calls draws pixels yet.

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.