Color in GLSL is one of the first things that makes shader programming feel alive. You go from abstract math to something visible, expressive, and instantly creative. At its core, GLSL color is surprisingly simple: it is just numbers arranged in a vec4.
But how those numbers are used is what creates everything from flat color fills to complex audio-reactive visuals.
How color works in GLSL
In GLSL, color is usually represented as:
vec4 color;
This vec4 contains four components:
- R (Red)
- G (Green)
- B (Blue)
- A (Alpha / opacity)
Each value typically ranges from 0.0 to 1.0.
So:
vec4(1.0, 0.0, 0.0, 1.0)
means pure red.
While:
vec4(1.0, 1.0, 1.0, 1.0)
means white.
And:
vec4(0.0, 0.0, 0.0, 1.0)
means black.
The most important idea: color is just math
In GLSL, colors are not “paint.” They are just values.
That means you can:
- add them
- multiply them
- mix them
- distort them
- drive them with UVs or audio
This is what makes shaders powerful: color becomes a result of computation, not a fixed choice.
Using UV to generate color
One of the easiest ways to understand GLSL color is to connect it with UV coordinates.
void main() {
gl_FragColor = vec4(vUv, 0.0, 1.0);
}
This creates a gradient:
- Red changes across X axis
- Green changes across Y axis
- Blue is constant
What you are seeing is not a texture — it is UV being interpreted as color.
Mixing colors with mix()
GLSL gives you a built-in function for blending:
mix(a, b, t)
It returns a blend between a and b based on t.
Example:
vec3 colorA = vec3(1.0, 0.0, 0.0);
vec3 colorB = vec3(0.0, 0.0, 1.0);
vec3 finalColor = mix(colorA, colorB, vUv.x);
This creates a smooth transition from red to blue.
Building gradients
Gradients are one of the simplest but most important shader techniques.
Horizontal gradient
vec3 color = vec3(vUv.x);
Vertical gradient
vec3 color = vec3(vUv.y);
Diagonal gradient
vec3 color = vec3(vUv.x + vUv.y);
These simple patterns are the foundation of more complex visuals.
Controlling brightness
You can adjust intensity easily:
vec3 color = vec3(0.2, 0.6, 1.0);
color *= vUv.x;
This darkens or brightens based on position.
Color and math patterns
Once you combine color with math functions, things get interesting:
float wave = sin(vUv.x * 10.0);
vec3 color = vec3(wave);
Now color is driven by a wave function, not just linear gradients.
This is where procedural art begins.
Alpha (transparency)
The fourth channel controls opacity:
gl_FragColor = vec4(color, 1.0);
- 1.0 = fully visible
- 0.0 = fully transparent
Alpha becomes important in:
- blending layers
- feedback systems
- TouchDesigner TOP compositing
Color in real shader systems
In real projects (like your TouchDesigner visualizer), color is rarely static.
Instead, it is driven by:
- audio amplitude (CHOP data)
- feedback loops
- noise functions
- UV distortion
- time (
u_time)
Example:
float audio = vUv.y;
vec3 color = vec3(audio * 0.5, audio, 1.0 - audio);
Now sound directly shapes color.
Why color matters in GLSL
Color is not just aesthetic. It is structural.
In shaders, color often represents:
- data
- intensity
- motion
- depth
- time evolution
Once you understand this, you stop thinking of color as decoration and start thinking of it as output of a system.
Posted Using INLEO
