01 · Author
One module, one source of truth
Every material exports its name, its TSL apply() function, and the readable source fragment displayed in the Lab.
Proven Today · Shader Lab
Live TSL materials, with the receipts attached.
Shader Lab is Aurelius' public rendering workbench. Pick a material, drag the geometry, adjust the clock, and inspect the source that built the result. Every material here is a reusable module verified on both WebGPU and WebGL2 before it appears.
18 verified material programs
WebGPU + WebGL2 parity-gated
Source derived from implementation modules
Interactive workbench
Choose a material. Inspect its behavior.
INITIALIZING
-- MS · -- FPS
DRAG TO ROTATE · SCROLL TO ZOOM
Loading the pinned renderer and verified material modules.
What this proves
These are not screenshots or separate shader forks. The material selected above is the same ES module used by the benchmark, the landing-page preview, and this dedicated workbench. The source pane is exported by that module, so it cannot silently diverge from the implementation.
From material idea to public artifact
02 · Verify
Both browser GPU paths
The bench renders frozen parity frames, live animation, and a mobile advisory pass on WebGPU and WebGL2. Console errors and invalid frames fail the gate.
03 · Measure
Cost is part of the claim
Each chip carries its measured cost class and baseline provenance. Expensive materials remain visible, but never hidden behind a performance claim.
New in this material wave
Three new materials broaden the library without adding redundant variations:
Prismatic Field
Thin film meets Truchet facets
An iridescent shell exposes view-dependent thin-film color alongside a drifting, circuit-like facet field.
Circuit Maze
Signal on a patterned surface
Animated radial pulses illuminate Truchet traces, turning a low-cost pattern primitive into a readable surface language.
Vortex Flow
Flow as a material
Curl noise drives color bands and filaments. It is intentionally expensive and visibly badged as the right reference for a real flow-field shader.
Why TSL
Modern browser rendering spans two backends: WebGPU uses WGSL and WebGL2 uses GLSL. Three.js Shading Language lets Aurelius author one node graph and compile it for both. That reduces parallel maintenance, but only if the graph is tested on both paths. The Lab exists to make that testable work public.
Engineering notes
Backend discipline
Parity is measured, not assumed
Materials receive a frozen clock for screenshot comparison, then run live under each backend. Differences beyond a material-specific tolerance block release.
Performance discipline
Frame time has context
Cost classes come from a documented Intel UHD 630 baseline. The live readout is your machine's current frame time, not a borrowed benchmark number.
Interaction discipline
Explore the implementation
Drag the knot, change the clock, and switch materials. Direct interaction is a useful test of behavior that static imagery cannot provide.