ShaderBattle

Pixel basics · lesson 7 of 8 · Beginner · about 4 min

Distance fields & antialiasing

You will build: Turn the solid disc into a glowing ring: radius 0.3, soft edge width 0.02.

Start this lesson All lessons
The picture produced by the shader in the lesson "Distance fields & antialiasing"
The target picture. In the lesson you write the shader that draws it, and a match bar shows how close you are.

The key idea behind most 2D (and 3D!) shader art: compute a distance, then turn the distance into a color.

To draw an outline instead of a filled disc, ask “how far is this pixel from the circle's edge?”. If the circle has radius r, that's abs(d - r): zero exactly on the edge, growing in both directions.

float2 p = (uv - 0.5) * float2(aspect, 1.0);
float d = length(p);
float edgeDist = abs(d - 0.3);
float m = 1.0 - smoothstep(0.0, 0.02, edgeDist);   // 1 on the edge, fades to 0 within 0.02

Because smoothstep blends over a small range instead of snapping, the edge is automatically smooth — antialiasing for free.

The numbers you need

Everything the picture depends on is given, so the challenge is the code, not guessing.

Ring color
float3(0.4, 0.9, 1.0)
Background
float3(0.08, 0.08, 0.12)

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

Go deeper

Concept explainers with a live example: smoothstep, signed distance field, shader anti-aliasing.

Part of the learning paths: From zero to ray marching, From Shadertoy to Unity, Shader art basics.

More in Pixel basics