Smoothstep Edge Fade
The key idea: use smoothstep to turn a distance value into a mask that fades from bright to dark:
Let's break it down.
The distance function
distance(a, b) computes the straight-line distance between two points — equivalent to length(a - b).
distance(vUv, vec2(0.5)) gives every pixel its distance from the center of the canvas:
- Center pixel: distance = 0
- Corner pixels: distance ≈ 0.707
smoothstep for soft edges
smoothstep(0.3, 0.5, dist) maps the distance to a mask value:
- dist < 0.3 (center region) → mask = 0 (fully shows foreground color)
- dist between 0.3 and 0.5 → mask transitions smoothly from 0 to 1
- dist > 0.5 (outer region) → mask = 1 (fully shows background black)
The two parameters 0.3 and 0.5 define the inner and outer edges of the soft transition zone.
mix for blending
mix(colorA, colorB, t) blends two colors by the factor t:
- t = 0 → 100% colorA (warm yellow center)
- t = 1 → 100% colorB (black outer ring)
- t = 0.5 → equal blend of both
Here colorA is vec3(1.0, 0.8, 0.2) (warm yellow), colorB is vec3(0.0) (black), and the mask value serves as t.
Try changing it
| Change | Effect |
|---|---|
Change 0.3 to 0.1 | Transition moves inward, bright area shrinks |
Change 0.5 to 0.35 | Narrower transition zone, sharper edge |
Change vec3(0.0) to vec3(0.1, 0.0, 0.2) | Dark purple outer background |
Swap to smoothstep(0.5, 0.3, dist) | Mask inverts — center goes dark |
Exercise
Compute the distance from each pixel to the center, use smoothstep(0.3, 0.5, dist) to build a mask, then blend yellow and black with mix and output the result.
Answer Breakdown
distance(vUv, vec2(0.5)) gives each pixel its distance from center. smoothstep(0.3, 0.5, dist) creates a soft falloff between radius 0.3 and 0.5: mask = 0 inside (foreground visible), mask = 1 outside (background visible). mix uses that mask as the blend factor — yellow at the center, fading to black at the edge.
The exercise starts with an empty main(). Fill it in step by step to get the glowing circle.
Try swapping vec3(1.0, 0.8, 0.2) for vec3(0.3, 0.8, 1.0) to change the center color to cyan-blue.