Color Blending Gradient
Use vUv.x as the blend factor for mix to create a smooth horizontal transition from red to blue:
Here's the breakdown.
The three parameters of mix
mix(A, B, t) linearly interpolates between color A and color B:
t = 0.0→ 100% At = 0.5→ 50% A, 50% Bt = 1.0→ 100% B
Higher t leans toward B, lower t leans toward A, and values in between produce a smooth transition.
vUv.x as the blend factor
vUv.x goes from 0.0 on the left edge to 1.0 on the right edge.
Using it as the third argument to mix:
- Leftmost pixel: t = 0 → pure red
(1.0, 0.0, 0.0) - Rightmost pixel: t = 1 → pure blue
(0.0, 0.0, 1.0) - Middle: t = 0.5 → half red, half blue → purple
Try changing it
| Change | Effect |
|---|---|
Set colorA to vec3(1.0, 1.0, 0.0) | Yellow to blue gradient |
Replace vUv.x with vUv.y | Vertical gradient (red at bottom, blue at top) |
Replace vUv.x with vUv.x * vUv.x | Gradient accelerates, blue appears quickly on the right |
Replace vUv.x with 1.0 - vUv.x | Direction reverses — blue on left, red on right |
Exercise
Write the complete shader from scratch to produce a horizontal gradient from red on the left to blue on the right.
Answer Breakdown
colorA is pure red (red 100%, green 0%, blue 0%). colorB is pure blue (red 0%, green 0%, blue 100%). mix uses vUv.x as the weight — at the far left it takes 100% of colorA, at the far right 100% of colorB, and linearly blends between the two across the canvas.
The starting code produces nothing. The key steps are: define the two endpoint colors, then connect them with mix and a UV coordinate component.
Try replacing vUv.x with smoothstep(0.3, 0.7, vUv.x) — the transition concentrates between 30% and 70% of the canvas width, while both ends hold solid colors.