The core of this shader is one line — clamping a value so it never goes out of range:
Let's break it down.
What is clamp?
clamp(x, min, max) constrains x so it stays between min and max. Think of it like a volume knob with hard stops at 0% and 100% — turning it past the limit does nothing.
- If x is below min, it returns min
- If x is above max, it returns max
- If x is in between, it passes through unchanged
What this code does
vUv.x * 1.8 - 0.4 applies a linear transformation to the x coordinate — stretching and shifting it so the gradient starts earlier and ends sooner than the screen edges.
Without clamp, values near x = 1.0 would exceed 1.0 (blown-out white at the edge), and values near x = 0.0 would go negative (blown-out black). Adding clamp(…, 0.0, 1.0) locks both ends: hard black on the left, hard white on the right, smooth transition in between.
Try changing it
| Change | Effect |
|---|---|
Change 1.8 to 4.0 | Gradient becomes narrower — most of the canvas is solid black or white |
Change -0.4 to 0.0 | Gradient starts from the left edge |
Change the upper bound 1.0 to 0.6 | Brightest value is 60% — no pure white |
Change the lower bound 0.0 to 0.3 | Darkest value is 30% — no pure black |
Exercise
Use clamp to constrain the expression vUv.x * 1.8 - 0.4 to the range 0.0–1.0, and assign the result to t.
Answer Breakdown
vUv.x * 1.8 - 0.4 stretches and shifts the x coordinate so the transition zone sits in the middle of the canvas. Without clamping, edge values overflow or go negative. With clamp(…, 0.0, 1.0), out-of-range values are cut off at both ends, giving you clean black-to-white.
The exercise starts with float t = 0.0, which makes the canvas solid black. Replace it with clamp(vUv.x * 1.8 - 0.4, 0.0, 1.0) to restore the gradient.
Try changing the upper bound from 1.0 to 0.7 and see how it flattens the bright end.