CPU vs. GPU, in one sentence
Your game's CPU code runs a handful of instructions on a handful of cores, one after another. A shader runs the same tiny program on thousands of GPU cores at once — one core per pixel on screen, all running in parallel, all at the same time.
The pipeline, reduced to what matters for 2D
A full render pipeline has many stages, but for a 2D fragment shader you only need two: the vertex shader positions a handful of points (for us: just three, forming one triangle that covers the whole screen), and the fragment shader runs once per pixel inside that triangle, deciding that pixel's final color.
That's the whole trick behind every effect in this course: you're writing one function that returns a color, and it happens to run once per pixel, in parallel, 60 times a second.
Why 2D games barely touch the vertex shader
In 3D, the vertex shader does real work — moving thousands of mesh vertices in space. In 2D, we almost always render a single fullscreen (or sprite-sized) rectangle and do everything — shape, color, motion — in the fragment shader, sampling a coordinate (uv) rather than moving any geometry. That's why this whole curriculum lives in the fragment shader.
When something looks wrong, don't guess — look at it
Here's a habit worth building on day one, before you've written a single real effect: when a shader isn't doing what you expect, the fastest way through is almost never to stare at the code and reason it out. It's to output the exact value you're unsure about as a color and just look at it. Wondering if uv is flipped? fragColor = vec4(uv, 0.0, 1.0) and read the answer straight off the screen — that's exactly the lab on the right. Wondering if a distance calculation went negative when it shouldn't have? Color it red when it's negative, green when it isn't. You'll do this constantly for the rest of the course; it's not a fallback for when you're stuck, it's the default first move.
Moving between Shadertoy and a real engine
A lot of shader tutorials live on Shadertoy, and it's a great place to browse other people's work — but its conventions aren't quite this playground's, or Godot's, or Unity's. Shadertoy calls the clock iTime and the canvas size iResolution; here (and in most engines) they come in as named uniforms you declare yourself, like this course's u_time and u_resolution. Shadertoy also has no vertex shader at all — you're purely writing the pixel function. And one more thing that quietly varies by platform: the precision highp float; line at the top of every shader here sets how much numeric precision the GPU spends per calculation — mobile GPUs sometimes default to lower precision for speed, which is worth knowing if a shader that looks perfect on desktop shows banding on a phone.