Remap the x coordinate to [-1, 1], fold it with abs(), then shape it with smoothstep to build a center-symmetric layered gradient:
Let's break it down.
remap for range conversion
remap(v, inMin, inMax, outMin, outMax) linearly maps a value from one range to another.
vUv.x runs from 0 to 1 (left to right). remap(vUv.x, 0.0, 1.0, -1.0, 1.0) shifts that to -1 to 1:
- Left edge vUv.x = 0 → centered = -1
- Center vUv.x = 0.5 → centered = 0
- Right edge vUv.x = 1 → centered = +1
Now the center of the canvas is 0, which makes symmetric composition much easier to reason about.
abs for mirror symmetry
abs(centered) removes the sign, making both sides mirror each other:
- Center: centered = 0 → folded = 0 (closest)
- Left edge: centered = -1 → folded = 1 (furthest)
- Right edge: centered = +1 → folded = 1 (same as left)
The result is a V-shaped gradient that's perfectly symmetric around the center.
Two smoothstep layers for shaping
centerMask = 1.0 - smoothstep(0.0, 0.45, folded): small folded (near center) → mask near 1 (center color shows); large folded (near edges) → mask near 0.
edgeMask = smoothstep(0.15, 0.95, folded): the further from center, the stronger the edge darkening applied on top.
Together they produce a bright center that fades outward through a layered falloff.
Try changing it
| Change | Effect |
|---|---|
Change 0.45 to 0.2 | Center band narrows, highlight more concentrated |
Change edgeMask * 0.55 to edgeMask * 1.0 | Edges become much darker |
Change centerA to vec3(1.0, 0.5, 0.1) | Center shifts from cyan-blue to orange |
Remove the color = mix(color, outerColor * 0.65, …) line | Disables edge darkening, overall brighter |
Exercise
Remap vUv.x from [0, 1] to [-1, 1] using remap, fold it with abs(), then build centerMask and edgeMask using smoothstep.
Answer Breakdown
remap converts the linear x coordinate into a center-origin symmetric space. abs mirrors both sides. centerMask is 1 near center (center color visible) and 0 toward the edges. edgeMask grows outward and is used to push the outer region darker.
The exercise starts with all four values at 0, so only the outer colors appear. Fill in these lines to see the full layered result.
Try changing the remap output range to [-2.0, 2.0] and watch how the center band changes width.