Smoothstep Basics
The key is these two lines — using an S-curve to turn a distance value into a mask:
Let's break it down.
step vs. smoothstep
step(edge, x) is a hard switch: 0 below the edge, 1 above it — a sharp, aliased line.
smoothstep(edge0, edge1, x) is an S-curve transition: it smoothly goes from 0 to 1 between edge0 and edge1, giving you soft, natural edges.
Think of step as a light switch — instant on/off. smoothstep is a dimmer — it fades gradually.
What this code does
abs(vUv.x - 0.5) computes the horizontal distance from each pixel to the center line (x = 0.5):
- At the center, distance = 0 (closest)
- At the edges, distance = 0.5 (furthest)
smoothstep(0.0, 0.25, d) maps that distance to 0–1:
- d = 0 → output 0 (brightest)
- d = 0.25 → output 1 (darkest)
Finally, 1.0 - … inverts it so the center is bright and the sides are dark — a white vertical band.
Try changing it
| Change | Effect |
|---|---|
Change 0.25 to 0.1 | Narrower band with harder edges |
Change 0.25 to 0.5 | Band spreads across the whole canvas |
Change vUv.x - 0.5 to vUv.y - 0.5 | Becomes a horizontal band |
Remove 1.0 - | Center becomes dark, edges become bright |
Exercise
Compute m = 1.0 - smoothstep(0.0, 0.25, d) to produce a bright center band that fades to black on both sides.
Answer Breakdown
abs(vUv.x - 0.5) gives each pixel's horizontal distance from center, ranging from 0 to 0.5. smoothstep(0.0, 0.25, d) smoothly maps distances in the 0–0.25 range to 0–1; anything beyond 0.25 stays at 1 (black). Inverting with 1.0 - flips it so center = brightest, edges = darkest.
The exercise starts with m = 0.0, giving a fully black canvas. Swap it in to see the white band appear.
Try changing the first parameter of smoothstep from 0.0 to 0.1 — notice how the inside edge of the band gains a soft transition.