Second Program Switch

Two linked programs draw two triangles with different fragment behavior after WebGL switches the active program.

Program

A WebGL context can hold many linked programs, but only one program is active for a draw call. Switching programs changes the shader code that runs next.

second_program_switch.html

<canvas id="stage" width="360" height="210"></canvas>
<script>
  const colorProgram = linkProgram(colorVS, colorFS);
  const solidProgram = linkProgram(positionVS, solidFS);
  gl.useProgram(colorProgram);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
  gl.useProgram(solidProgram);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

program switch useProgram selects the linked shader program used by subsequent draw calls.

draw order Changing state affects future draws while earlier framebuffer pixels remain.