Shader Learn

00 Prologue: how a GPU paints

Where does a shader’s result show up?

On the left is a real HTML canvas; the GPU paints its colours.

(0.50, 0.50)
01
01
01
01
Explanation

Drag the underlined numbers left and right

void main() {  vec3 color = vec3(, , );  gl_FragColor = vec4(color, );}
  1. JS sends data
  2. GPU computes colours
  3. canvas shows them
canvasA bitmap drawing surface in the page
WebGLThe API JS uses to hand data and shaders to the GPU
shaderA small program that runs on the GPU, written in GLSL

Drag the numbers left and right, right in the code; the fourth is the opacity. Every lesson’s code works this way, and you can also just type.

A canvas is a drawing surface in the page; WebGL lets the GPU write colours into it.

Try it

  • Make the canvas pure red
  • What colour do you get when all three numbers are equal?