Start here · lesson 1 of 2 · Beginner · about 5 min
Every pixel, one function
You will build: Make the whole screen the same blue as the target.
Short answer to your question: yes, you've got it. A fragment shader (Unity calls it a pixel shader too) is a small function that the GPU runs once for every pixel it draws — and it runs them all at the same time.
On the CPU you'd write the loops yourself:
// C# / Java brain
for (int y = 0; y < height; y++)
for (int x = 0; x < width; x++)
image[x, y] = ComputeColor(x / width, y / height);
On the GPU you only write ComputeColor. The GPU owns the loops, and spreads them across thousands of tiny cores. That's the whole trick, and it explains every "weird" rule of shaders:
- No memory between pixels. Pixel (5,3) can't see what pixel (4,3) returned. Same input → same output, always.
- Everything that varies across the image must come from inputs — mainly
uv(“which pixel am I?”) andtime. - No
forover pixels, nox++over the screen. You describe what one pixel looks like, as a formula.
If you used LWJGL: this is the fragment stage of the pipeline you already know. Here the vertex stage is trivial (one rectangle that covers the screen), so we only write the fragment half.
Your job: this function currently returns red for every pixel. Make every pixel return the blue color from the target.
The numbers you need
Everything the picture depends on is given, so the challenge is the code, not guessing.
- Color
float4(0.1, 0.3, 0.9, 1.0)
Try it in your own language
The lesson is written once and shown in every language. Pick yours: Unity (Built-in), Unity (URP), Unreal, Shadertoy / WebGL, OpenGL (LWJGL, raylib), three.js, GameMaker, LÖVE (Lua), Godot, Apple (iOS, macOS), WebGPU / Bevy.
Start coding