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.

The picture produced by the shader in the lesson "Every pixel, one function"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

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?”) and time.
  • No for over pixels, no x++ 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.

Try it now: the output on the right is deliberately tiny — 8×6 = 48 pixels. Move your mouse over it: the line under the picture shows the exact call your function received for that pixel and what it returned. Then use the Resolution dropdown to go up.

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