Pipeline: quad → fragment colors

Real-time 3D stacks usually run a vertex shader (where vertices go) and a fragment shader (what color each pixel becomes). These lessons use one fullscreen rectangle; the interesting code lives in GLSL fragment logic. The vertex shader passes v_uv — coordinates from 0–1 across the canvas — so you can think “every pixel samples the same math.”

Demos use WebGL1 + shared boot helper (shader-boot.js).

// Fragment snippet — vertical gradient using v_uv.y
precision mediump float;
varying vec2 v_uv;

void main() {
  vec3 top = vec3(0.45, 0.72, 0.92);
  vec3 bot = vec3(0.18, 0.12, 0.22);
  vec3 col = mix(bot, top, v_uv.y);
  gl_FragColor = vec4(col, 1.0);
}