Fragment Shaders Made Simple: What gl-FragColor Does

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.

1. Learning GLSL as a Beginner
2. Understanding gl-Position: My First Real Vertex Shader

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.

---

This shader:

• takes a color from outside (u_color)
• applies it to every pixel
• outputs a flat-colored surface

Posted Using INLEO