This is a fragment shader written in GLSL (used in WebGL / Three.js / TouchDesigner-style pipelines).
This is the 3rd post in the GlSL learning series.
Let’s break it down simply.
The full code
const fshader = `
uniform vec3 u_color;
void main (void)
{
gl_FragColor = vec4(u_color, 1.0);
}
`
1. uniform vec3 u_color;
This is a uniform variable.
What it means:
-
uniform= value coming from JavaScript / TouchDesigner / host app -
vec3= 3 numbers (R, G, B) -
u_color= the name of the variable
Example from JS:
material.uniforms.u_color.value = { r: 1, g: 0, b: 0 };
So you are passing a color like:
-
red = (1, 0, 0)
-
green = (0, 1, 0)
-
blue = (0, 0, 1)
2. void main (void)
This is the main function of the fragment shader.
-
Runs for every single pixel
-
Think: “what color should this pixel be?”
So if your object has 100,000 pixels → this runs 100,000 times.
3. gl_FragColor = vec4(u_color, 1.0);
This is the actual output color.
Breakdown:
-
gl_FragColor= final pixel color (old WebGL 1 style) -
vec4(...)= RGBA color-
R = red
-
G = green
-
B = blue
-
A = alpha (opacity)
-
So:
vec4(u_color, 1.0)
means:
-
take
u_color(RGB) -
add alpha =
1.0(fully opaque)
What this shader actually does
It paints every pixel the exact same color.
So:
The entire object becomes a flat solid color.
No gradients, no lighting, no variation.
Mental model
Think of it like:
-
CPU gives: “color = blue”
-
GPU does:
-
pixel 1 → blue
-
pixel 2 → blue
-
pixel 3 → blue
-
...
-
Result: solid blue shape
Why uniforms are powerful
Because you can change color in real time without changing shader code:
-
audio → color shifts
-
mouse → color changes
-
TouchDesigner → reactive visuals
If you extend this shader
Right now it's static. But you could do:
Gradient idea:
gl_FragColor = vec4(gl_FragCoord.xy / resolution.xy, 0.0, 1.0);
Now each pixel differs → gradient appears.
Summary
This shader:
-
takes a color from outside (
u_color) -
applies it to every pixel
-
outputs a flat-colored surface
