zero dependencies · pure WebGL2
JakeDontDraws video is hella cool you shld check it out
Color has three dimensions, which means it can be built, walked around, and taken apart. LUMA is an exhibition of six interactive experiments about the gap between how computers describe color and how eyes actually see it — presented as a gallery: a bright hall, one darkened viewing chamber, and a placard for every piece.
01 · The cube's lie — the experiment from JakeDontDraw's "What if COLOR was 3D??". A 10×10×10 HSV lattice makes a tidy cube; the grayscale test repaints every point its perceived luminance and the "100% value" top layer shatters into different grays. Morph into the perceptual crystal (OKLab) and switch to the arrow field: every color's correction vector, V = P(perceptual) − P(hsv). Yellows fly up. Blues dive.
02 · The flow — the arrow field set in motion: tens of thousands of colors migrating from their HSV positions to their perceptual homes, braiding as they go. Every particle's full journey lives in one vertex shader.
03 · Collapse — two ways a color volume shrinks. Display gamuts: the sRGB solid inside Display P3 inside Rec.2020, all placed in OKLab — the halo is color your screen owes you but can't pay. Cone loss: drag the severity slider and watch the crystal flatten toward a plane as protanopia, deuteranopia, or tritanopia removes a dimension from color. For about 1 in 12 men, the flattened version is the only version.
04 · Geodesic — a gradient is a road through color space, and the CSS default drives straight through the gray mud in the center. Pick two colors, see both roads in 3D, compare the strips, copy the OKLab gradient as CSS.
05 · Forbidden — your cones define a vast signal space; light can only reach a wedge of it. The spectral locus is the outer wall of the possible, the sRGB gem huddles inside it, and the darkness around them is color that cannot exist. Then the demos: fatigue one cone type on purpose and, for a few seconds, see a chimerical color — stygian blue, self-luminous red, hyperbolic orange — from outside the wall.
06 · Headcanon — two identical patches on two different surrounds refuse to look alike, because color isn't received, it's computed. The chamber shows the pixel's true position and the two positions your brain files it under — the distortion field of chapter one, applied to your own head.
python3 -m http.server 8000
# → http://localhost:8000No frameworks, no build step. Keys 1–6 switch chapters, drag orbits, space pauses the spin, S saves a PNG.
One WebGL2 context, one shared GLSL color library (HSV, OKLab, Hunt–Pointer–Estevez LMS, Viénot cone-loss projection), and six chapter modules that each own their shaders and controls. Colors travel to the GPU as three bytes; every arrangement, morph, particle path, and collapse is computed in the vertex shader from those bytes. The gallery shell renders each chapter's placard, wall text, and controls from a declarative spec.
The design is the inverse of HYPERSHAPE's dark instrument: a daylight gallery in exhibition white and Fraunces, with the chamber as its one dark room — and no fixed accent color. Each chapter lends the chrome its own.
Chapter one models the experiment from "What if COLOR was 3D?? (I built it from scratch)" by JakeDontDraw; chapters two and three grew from ideas he inspired.
MIT licensed.