Chapter 04 said the GPU runs millions of little jobs. Here's the secret: those jobs are two tiny programs you can write. One places corners. One colors pixels. Together they're every material, every light, every cartoon outline you've ever seen.
press play — 90 seconds ↓Plays like the video — one caption at a time, the picture animating under it — and it pauses when it's your turn. Skip around with the dots or arrow keys. The full lab comes after.
A fragment shader is a function the GPU calls once per pixel, handing it that pixel's coordinates. Whatever color the function returns, the pixel becomes. Pick a recipe, then bend it with the sliders — everything you see is being recomputed for every pixel, every frame, exactly like the real thing.
Every point on a surface has a normal — the arrow pointing
straight away from it. Lighting is one line: brightness = max(0, N · L) —
the dot product from chapter 01, asking "does this point face the light?"
Slide bands down to 3 and you've invented toon shading.
The video's engine has PPQuadVertex/Fragment.glsl — a shader pair that runs over
the already-rendered frame, once per screen pixel: picture in, tweaked picture out.
That's every Instagram filter, every night-vision mode, every retro CRT look. Click an effect and
read what it does to each pixel.
This is real GLSL — the same shape as the files in the video's engine
(basicvertex.glsl, basicfragment.glsl, toonShading…).
The vertex shader runs once per corner; the fragment shader runs
once per pixel. Everything in this course meets here.
// vertex shader — runs once per VERTEX (chapter 03 + 04) #version 460 core layout (location = 0) in vec4 aPosition; uniform mat4 uModelMatrix; uniform mat4 uViewMatrix; uniform mat4 uProjectionMatrix; void main(void) { gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * aPosition; }
// fragment shader — runs once per PIXEL (chapter 01's dot product, at work) in vec3 normal; in vec3 lightDir; out vec4 fragColor; void main(void) { float d = max(0.0, dot(normalize(normal), normalize(lightDir))); // toon shading — the video's toonShadingFragment.glsl, in one line: // d = floor(d * 3.0) / 3.0; fragColor = vec4(albedo * (0.12 + d), 1.0); }
Everything above imitated a shader in canvas. This torus knot runs a real GLSL fragment shader, compiled by your actual GPU — the very N·L, bands and specular you just built, in the real language. Toggle toon and read the shader line doing it.
Click any moment on the right — it takes you straight there (in place when this site is served over http, on YouTube when opened as a local file).