Centered UV Visual
The UV origin sits at the bottom-left corner. But for circles, glows, or anything symmetric, we usually want the canvas center to be the origin.
Subtract 0.5 to center the origin
One line:
Before and after:
| Position | vUv | p (after) |
|---|---|---|
| Bottom-left | (0.0, 0.0) | (-0.5, -0.5) |
| Top-right | (1.0, 1.0) | ( 0.5, 0.5) |
| Center | (0.5, 0.5) | ( 0.0, 0.0) |
Now p runs from -0.5 to 0.5, with center at (0, 0).
Visualizing p
p contains negative values, so using it as color directly gets clipped. Add 0.5 back to display it:
This looks the same as the UV color map, but now your coordinates are center-relative.
Why this matters
To draw a circle you need the distance from center:
Using raw vUv, length(vUv) gives distance from the corner — the circle lands off-center. With p = vUv - 0.5, it lands in the middle.
Exercise
Build p = vUv - 0.5, then output vec3(p + 0.5, 0.0) as the color.
Answer Breakdown
p + 0.5 shifts the range from -0.50.5 back to 01 for display.
p.x + 0.5→ red channel: 0 on the left, 1 on the rightp.y + 0.5→ green channel: 0 at the bottom, 1 at the top- Blue fixed at 0
It looks identical to the UV color map — the difference is that p is now center-relative, ready for any circle or glow.