GLSL

Core Idea

GLSL is the language of the pipeline’s two gold stations — a small, strict C dialect that runs thousands of copies of itself at once, one per vertex or one per pixel, each copy blind to all the others. The editor above is this article: the code on the left is running on your GPU on the right, recompiling as you type. Edit it. Break it — the terracotta strip is the actual driver error, and reading those is half of shader literacy.

Everything Is a Vector

The native nouns are float, vec2, vec3, vec4 (and matrices). Components answer to position names or color names interchangeably — v.xyz and v.rgb are the same three floats — and swizzling reorders them for free:

vec4 v = vec4(1.0, 2.0, 3.0, 4.0);
v.bgra;   // reshuffled
v.yyy;    // one component, broadcast to three

Built-ins broadcast the same way: sin(vec3) is three sines at once, no loop. The language is shaped like the hardware — everything wide, everything parallel, a vector in every hand.

Strict About Numbers

float f = 1;     // ERROR — 1 is an int
float f = 1.0;   // correct

The type system refuses to guess. It’s the first error everyone hits — try deleting a .0 in the editor and watch the strip. (The other numeric dial is precision: highp for positions and normals, mediump where color math can afford rounding.)

The Vocabulary

A handful of built-ins carry most shaders ever written — each one is a concept from this knowledge base wearing its GPU name:

The presets above are these words’ first sentences: the circle is length + step, the glow is one smoothstep, the waves are mix driven by sin(u_time).

Debugging by Color

There is no console.log — the GPU is a one-way street, and two million pixels have nowhere to print to. So shader debugging inverts: paint the value you’re unsure about. The first preset is exactly that move — “what is my uv?” answered as a gradient. Suspicious normal? gl_FragColor = vec4(n * 0.5 + 0.5, 1.0). Suspicious float? Put it in the red channel and look. The color is the print statement, the screen is the log. (For extracting an exact number, gl.readPixels can fish one pixel back to JavaScript — a message in a bottle.)

Data enters through three storage qualifiers — attribute, uniform, varying — whose full story is the buffers table; the editor hands you three uniforms to play with.

Connections

GLSL fills the two programmable slots of the GPU pipeline; WebGL is the JavaScript side that compiles these strings and wires their data. Three.js writes GLSL for you inside every material until you take over with ShaderMaterial (its TSL node system now compiles to GLSL or WGSL, WebGPU’s dialect). The math vocabulary is the KB’s concept tier — dot product, interpolation, vectors — and ray marching is this language at full power: an entire scene living inside one fragment shader.