What is a Shader?
A tiny program running millions of times in parallel
Every frame of every game you have ever played passed through code like this. Every movie with visual effects, every filter on your phone, every spinning logo on a website. Shaders are everywhere, quietly painting pixels at speeds that seem impossible.
The Pixel Problem
Consider a 1920x1080 display. That is 2,073,600 pixels. At 60 frames per second, we need to decide the color of over 124 million pixels every single second. A traditional program running one instruction after another cannot possibly keep up.
This is where the GPU comes in. Unlike your CPU, which has a handful of powerful cores designed for complex sequential tasks, a GPU has thousands of simpler cores designed to do one thing exceptionally well: run the same small program on massive amounts of data simultaneously.
Interactive: Watch pixels compute in parallel
In a real GPU, all 256 pixels would compute in a single instant. The animation is slowed to show that they all run at once, not one after another.
A shader is that small program. It runs once per pixel, independently, with no knowledge of what its neighboring pixels are doing. Each pixel asks the same question: what color should I be?
Sequential vs Parallel Thinking
When you write normal code, you think sequentially. Do this, then that, then something else. Loop through each item one by one.
Shader programming requires a different mental model. Instead of thinking about processing pixels one after another, imagine millions of tiny workers, each assigned to exactly one pixel. They all wake up at the same instant, run the same code with their own coordinates, and report back their color.
Sequential vs Parallel Execution
The CPU processes pixels one at a time. The GPU processes all pixels at once. Even at this small scale, the difference is dramatic.
This is why shader code has unusual constraints. You cannot easily ask what color the pixel next to you computed. You cannot store information between pixels. Each invocation is isolated, stateless, and fast.
Types of Shaders
The two most common shader types are vertex shaders and fragment shaders. They work together in what is called the graphics pipeline.
A vertex shader runs once per vertex of a 3D mesh. It transforms points in 3D space to 2D screen coordinates. Think of it as positioning the corners of triangles that will be drawn.
A fragment shader (also called a pixel shader) runs once per pixel that needs to be colored. After the GPU determines which pixels are covered by a triangle, the fragment shader decides what color each of those pixels should be.
The Graphics Pipeline
The Fragment Shader is where we will spend most of our time. It runs for every pixel and determines the final color you see on screen.
In this course, we focus primarily on fragment shaders. They are where the visual magic happens, where we paint gradients and shapes and animations and eventually entire 3D scenes using nothing but math.
The Fragment Shader Contract
Every fragment shader makes a simple promise: given some information about the current pixel, I will output a color.
The inputs include:
- The pixel's screen position (where am I?)
- Uniforms (values that stay constant across all pixels, like time or resolution)
- Varyings (interpolated data passed from the vertex shader)
The output is a single color: four numbers representing red, green, blue, and alpha (transparency).
That is it. No loops over pixels, no complex data structures. Just a function that takes position and produces color. The simplicity is deceptive, because from this constraint emerges extraordinary creative power.
What Makes Shaders Special
Shaders are not just fast, they embody a fundamentally different way of thinking about computation. Instead of describing a sequence of steps, you describe a relationship between input and output that can be evaluated anywhere, anytime, in any order.
This makes shaders:
- Massively parallel by nature
- Resolution independent since they work with normalized coordinates
- Deterministic because the same input always produces the same output
- Composable since simple functions combine to create complex effects
In the next chapter, we will write our first shader and see these principles in action. We will start with the simplest possible program: painting every pixel a single color. From there, the entire visual universe opens up.
Key Takeaways
- A shader is a program that runs once per pixel in parallel on the GPU
- GPUs have thousands of cores designed for this kind of embarrassingly parallel computation
- Fragment shaders take position as input and output a color
- Each pixel computes independently with no knowledge of its neighbors
- This parallel constraint enables incredible performance but requires different thinking