UV Visualizer
12 / 30
Directly convert UV coordinates to color values to facilitate understanding of vUv color mapping.
vUv is normalized UV passed in from the vertex shader, ranging from 0 to 1. Map it directly to color and you can see what UV space looks like.
Turning UV into color
vec3 needs three components (red, green, blue), and vUv has only two (x, y). Add a fixed blue value:
This means:
vUv.x→ red: 0 on the left, 1 on the rightvUv.y→ green: 0 at the bottom, 1 at the top- Blue fixed at 0
The result is a four-corner color map — a visual map of UV space.
What each corner looks like
| Position | vUv | Color |
|---|---|---|
| Bottom-left | (0.0, 0.0) | Black |
| Bottom-right | (1.0, 0.0) | Red |
| Top-left | (0.0, 1.0) | Green |
| Top-right | (1.0, 1.0) | Yellow |
Exercise
The exercise code has color = vec3(0.0) (black). Change it to output the UV color map using vUv.
Answer Breakdown
vec3(vUv, 0.0) expands the vUv vec2 into the first two components of a vec3, with the third (blue) set to 0.
This is GLSL constructor shorthand — you can assemble larger vectors from smaller ones:
vec3(vUv, 0.0)=vec3(vUv.x, vUv.y, 0.0)
Try vec3(0.0, vUv) or vec3(vUv.y, 0.0, vUv.x) to see how the colors shift.