WEBGL
RAW GPU · THE RENDERING PIPELINE · SHADER LANGUAGE
120 BPM SYNC · LIVE MESH
Section 02
The GPU Pipeline
From Vertices to Pixels — click each stage to expand
LIVE MINI RENDERER
STAGE: CPU DATA
3 VERTS
1 TRIANGLE
Section 03
Geometry Workshop
Five procedural mesh generators — raw WebGL, zero libraries
Section 04
Texture & UV Mapping
Painting on geometry — procedural textures in the fragment shader
MODE: CHECKERBOARD
SEAM: HIDDEN
UV TRANSFORMS
UV coordinates map 2D texture space (0→1) onto 3D geometry.
U = horizontal axis → longitude
V = vertical axis → latitude
Seams appear where UV wraps around — visible as abrupt texture jumps.
Section 05
Lighting Models
The physics of fake light — four models, one draggable light source
LIGHT & SURFACE
Ambient — constant, direction-independent glow.
Lambert — N·L dot product, cosine falloff.
Phong — specular highlight via reflection vector.
PBR — energy-conserving, physically-based BRDF.
↖ Drag inside any canvas to move the light.
Section 06
Particle System
GPU-accelerated points — instanced rendering at scale
PARTICLES: 0
BLEND: ADDITIVE
CONTROLS
gl.POINTS draws one quad per vertex, centered on the vertex position.
Additive blending makes overlapping particles brighter — perfect for fire and plasma.
Alpha blending creates opacity — use for smoke and dust.
Section 07
Transform Hierarchies
The scene graph — matrix stacks and parent-child transforms
SELECTED: SUN
HIERARCHY: INTACT
ORBITAL CONTROLS
MODEL MATRIX — SELECTED BODY
Each body multiplies its parent's matrix by its local transform.
Moon world position = Sun × Planet × Moon
"Breaking" the hierarchy detaches a body so it no longer inherits parent transforms.
Section 09
Glossary
22 essential WebGL terms — from buffer to vertex