Shaders for Games (GLSL) Lesson 3 of 20
Gradients and mixing colors
Blend between two colors with mix() — the workhorse of shaders.
A grey gradient is one thing; blending between two real colors is where it gets useful. The function mix(a, b, t) blends from color a to color b as t goes from 0 to 1. Feed it a coordinate — say st.y — and you get a smooth vertical gradient between two colors, like a sky.
mix() is one of the most-used functions in all of shader work: skies, water depth, day-to-night, health-bar color by value — all of it is mixing colors by some value you compute.
Your turn
Blend blue (bottom) to pink (top).
Use mix(blue, pink, st.y). Blue is vec3(0.1, 0.3, 0.9); pink is vec3(0.9, 0.3, 0.6). st.y is 0 at the bottom, 1 at the top.
Quick check
What does mix(a, b, t) return when t is 0.0?