SDF Ring

28 / 30
Draw a ring using a distance field: abs(length(p) - r) and smoothstep for smooth edges.

This is the Module 6 capstone. The two-step SDF process is made explicit: first compute distance to the circle boundary, then convert that distance into a mask with smoothstep.


Two steps

Step 1: compute ring distance

length(p) is the distance from center. radius is the circle's radius. Their absolute difference is the distance to the circle boundary: zero on the ring itself, growing inward and outward.

Step 2: distance to mask

When ringDist < thickness, the mask is 1 (on the ring). aa = 0.006 controls edge softness to prevent aliasing.


Exercise

The exercise starts with ringDist = 0.0, mask = 0.0 (all background). Complete the two TODOs in order: compute ringDist first, then mask.

Answer Breakdown

abs(length(p) - radius) folds the distance field around the circle boundary — ringDist is 0 on the ring, positive both inside and out. smoothstep symmetrically fades both edges.

Try thickness = 0.06 for a thicker ring, radius = 0.15 for a smaller circle, or aa = 0.02 for softer edges.

GLSL Code Editor

Correct Code Preview

Current Code Preview