Diagonal Factor
5 / 30
Build a diagonal factor (vUv.x+vUv.y)/2 and colorize it.
Horizontal uses vUv.x, vertical uses vUv.y. Average them together and you get a diagonal gradient factor.
Building the diagonal factor
Average of two components:
| Position | vUv.x | vUv.y | t (average) |
|---|---|---|---|
| Bottom-left | 0.0 | 0.0 | 0.0 |
| Top-right | 1.0 | 1.0 | 1.0 |
| Top-left | 0.0 | 1.0 | 0.5 |
| Bottom-right | 1.0 | 0.0 | 0.5 |
Result: a gradient from dark (bottom-left) to bright (top-right), with both other corners at mid-gray.
Exercise
The exercise has t = 0.0 (solid black). Change t to (vUv.x + vUv.y) * 0.5 to get the diagonal gradient.
Answer Breakdown
vUv.x + vUv.y ranges 0 to 2, so multiply by 0.5 to bring it back to 0–1.
The result isn't a perfect diagonal (top-left and bottom-right have the same value), but visually reads as diagonal.
Try t = vUv.x * vUv.y — multiplication gives a very different shape than addition.