Examples
Open any card to view it on its own page — a live WebGL2 render, sliders, and the emitted WGSL / GLSL / reflection, all from one DSL source. Start with the extended-precision set: the same scene in f32 and emulated f64, side by side, diving until only the f64 half survives.
Extended precision (fp64)
Emulated double precision on hardware that only has f32. Each card renders the same scene twice — plain f32 on the left, emulated double-float (df64) on the right — then dives until the f32 half shatters into blocky artefacts and the f64 half keeps going. This is what keeps a globe sharp at street level.
fp64-deep-zoom.ts
fp64 deep zoom
Emulated double precision (two-f32 df64): a world coordinate rendered as fract() stripes. Drag the DISTANCE slider out from the origin — near 10⁶ both halves stripe cleanly, but past ~10⁷·² one f32 ulp swallows a whole stripe and the plain-f32 left half collapses flat, while the f64 right half keeps the stripes to 10⁹, identical authoring syntax. Flip the fp64 toggle off to watch the right half collapse too. The auto-injected _fp64 guard uniform must be set to 1.0.
Open & run
fp64-checker-plane.ts
fp64 checker plane
A 1-unit checkerboard on a world plane. Drag the DISTANCE slider (or wheel) to carry the plane out from the origin: near 10⁶ both halves are a crisp checker, but past ~10⁷·² one f32 ulp grows wider than a cell and the plain-f32 left half collapses flat (parity can no longer flip) — while the f64 right half, doing floor/fract on the emulated-double type, keeps cell parity and anti-aliased borders all the way to 10⁹. Watch the exact distance where f32 gives out; flip the fp64 toggle to collapse the right half too.
Open & run
fp64-loran.ts
fp64 hyperbolic navigation
A LORAN-style chart grid: cyan hyperbolae of constant d₁−d₂ to two stations, amber ellipses of constant d₁+d₂. The signal is the DIFFERENCE of two nearly-equal distances followed by fract() — catastrophic cancellation plus phase recovery. Drag the DISTANCE slider to push the whole station triangle out from the origin: near 10⁶ both halves are a clean chart, but past ~10⁷·² the coordinate ulp grows wider than a band, d₁ and d₂ quantize, and the plain-f32 left half dissolves into blocky garbage — while the vec64 distance reduction keeps the right half sharp to 10⁹. Wheel drives the distance; flip the fp64 toggle to compare.
Open & run
fp64-mercator-tiles.ts
fp64 Mercator tiles
The tile-engine formula itself: normalized Web-Mercator (Seoul) × 2^z, floor → tile index, fract → in-tile uv. One f32 ulp of x ≈ 0.85 is 27 px at tile-z 21, so the plain-f32 left half smears tiles into blocks while the f64 right half keeps crisp borders through z 23. The 2^z scale is built by exact repeated doubling — the multiply is free; only the fraction ever needed extended precision. Wheel through zoom levels and flip the fp64 toggle to compare.
Open & run
fp64-rtc.ts
fp64 relative-to-center
Why planet-scale engines render relative-to-eye: a reticle marks a survey point a few fractional units from the eye. Drag the DISTANCE slider out from the origin — near 10⁶ both halves put the reticle dead centre, but past ~10⁷·² the eye and marker land on the same f32 ulp grid, their difference quantizes, and the f32 left half snaps the reticle off-target in whole-ulp jumps. The f64 right half subtracts eye from marker in extended precision FIRST, then narrows the small delta — crisp to 10⁹. Wheel drives the distance; flip the fp64 toggle to compare.
Open & run
fp64-mandelbrot.ts
fp64 Mandelbrot
The classic double-float demo: a Mandelbrot needle-spike filament zoomed to a ~1e-7 span — narrower than one f32 ulp, so the plain-f32 left half collapses flat while the emulated-double f64 right half keeps the structure. Drag to pan and wheel to zoom, map-style — the camera accumulates in full double precision and lands in the vec2<f64> center uniform, so the f64 half stays sharp all the way to the df64 floor (~1e-13) while the f32 half died six orders of magnitude earlier. Raise the iterations slider past the old 96 to keep deep-zoom filaments resolved, or flip the fp64 toggle to collapse the right half in place.
Open & run
fp64-julia.ts
fp64 Julia set
The Julia-set face of the double-float technique: the seed c is fixed and the PIXEL becomes z₀, so precision lives entirely in the starting coordinate. The camera parks on a repelling fixed point — a point that is ON the Julia set at every scale — and dives: the plain-f32 left half collapses flat past a ~1e-7 span while the emulated-double right half keeps spiralling to the df64 floor. Drag to pan, wheel to zoom, flip the fp64 toggle to collapse the right half in place.
Open & run
fp64-burning-ship.ts
fp64 Burning Ship
The Burning Ship fractal (fold |Re z|, |Im z| before squaring) zoomed onto its needle spike — the fold runs as df64 abs INSIDE the extended-precision iteration, exact by construction. The plain-f32 left half collapses flat past a ~1e-7 span; the emulated-double right half keeps the flame filaments down to the df64 floor. Drag to pan, wheel to zoom, flip the fp64 toggle to collapse the right half in place.
Open & run
fp64-newton.ts
fp64 Newton fractal
Newton’s method for z³ = 1, colour = which cube root a pixel falls into — a full complex DIVISION per step, running through df64_div on the f64 side. The basin boundary has the Wada property (all three colours touch at every boundary point), so the interleaving persists to any depth: the f32 left half collapses flat past a ~1e-7 span while the emulated-double right half keeps dividing cleanly. Drag to pan, wheel to zoom, flip the fp64 toggle to compare.
Open & run
fp64-mandelbrot-de.ts
fp64 distance estimate
Mandelbrot boundary rendered by DISTANCE ESTIMATE (d = ½·|z|·ln|z|/|dz|) with precision split mid-formula: the orbit z iterates in emulated f64 (its absolute position is what deep zoom destroys) while the derivative dz iterates in plain f32 (the estimate needs |dz| to a few digits only). Filaments keep glowing at any depth on the right; the all-f32 left half collapses past a ~1e-7 span. Drag to pan, wheel to zoom, flip the fp64 toggle to compare.
Open & run
fp64-clock.ts
fp64 long-uptime clock
The long-uptime animation bug: fract(t) where t is the epoch base plus live seconds. Drag the UPTIME slider — near 10⁴ s both dials sweep, but past ~10⁷·² one f32 ulp grows wider than a second, the +time vanishes into it, and the plain-f32 left dial freezes (it only lurches when the sum crosses an ulp) while the f64 right dial, adding the live time in extended precision, keeps sweeping to 10⁹ s (30+ years). Speed is live; flip the fp64 toggle to freeze the right dial too.
Open & run
fp64-cancellation.ts
fp64 catastrophic cancellation
The numerics-textbook plot on a GPU: (x−1)⁷ evaluated in EXPANDED form near x = 1 — eight ~1-sized terms must cancel to nine digits. f32 (left) returns pure noise thousands of times the plot range; emulated f64 (right) hugs the true curve. The thin red reference is the FACTORED form, which even f32 nails — restructure the math when you can, reach for fp64 when you can’t. Narrow the width slider and watch df64 hit its own wall two decades later.
Open & run
fp64-sine-sweep.ts
fp64 sine sweep
sin(x) for x = a large base + a small on-screen sweep. Past ~2²⁴ one f32 ulp of the argument grows wider than the sweep window, so the plain-f32 wave (left) collapses into an aliased staircase; the emulated-f64 side (right) carries the base in extended precision and the injected df64_sin — argument reduction + tabled angle-addition + a short Taylor — resolves the smooth curve. Drag BASE from 10⁴ (both smooth) to 10⁸ (only f64 survives); flip the fp64 toggle to shatter both. Correct on backends where the df64 multiply survives fast-math (Apple/Metal collapses it — see AUTHORING §7).
Open & run
Cartographic shaders
The GPU code behind a map — a graticule, shaded relief, a choropleth colour ramp. Procedural, so they render with no data and no tiles.
graticule.ts
Graticule
The lon/lat grid every map draws — anti-aliased with screen-constant width via fwidth, gold equator, slowly spinning over time. Adjust the spacing in degrees.
Open & run
hillshade.ts
Hillshade
Shaded relief — procedural terrain lit by a movable sun, tinted hypsometrically. A reusable terrain() DSL function is called 3× for the height + finite-difference normal.
Open & run
color-ramp.ts
Colour ramp
The data-driven choropleth ramp: a reusable ramp() function maps a value field through a 5-stop palette, with anti-aliased contour isolines. Set how many bands to draw.
Open & run
General shaders
The DSL isn’t map-specific. The same authoring surface, pointed at raymarched SDFs, escape-time fractals, fBm noise, and classic demo effects — proof the IR handles real shaders, not just map primitives.
plasma.ts
Plasma
The classic sum-of-sines plasma folded through an RGB palette — the "hello shader". One DSL source, animated by a single time uniform.
Open & run
voronoi.ts
Voronoi
Animated cellular noise — each fragment shaded by the distance to its nearest of a grid of orbiting feature points (a 3×3 neighbour scan). Built on the `distance` builtin + nested loops.
Open & run
julia.ts
Julia set
Escape-time Julia fractal — z ← z² + c iterated per pixel, coloured by iteration count through a cosine palette. The constant c orbits on autopilot; move the pointer over the canvas to steer it by hand.
Open & run
mandelbrot.ts
Mandelbrot set
The Mandelbrot set with smooth escape-time colouring — log₂ log₂ |z|² removes the iteration banding — breathing in and out of the seahorse valley. Move the pointer to pan the view; the zoom slider sets how deep the breath goes (f32 bounds the floor).
Open & run
fbm-clouds.ts
fBm clouds
Fractal Brownian motion — value noise summed over octaves of doubling frequency / halving amplitude, drifting over time. The classic procedural cloud field, octave count live-tunable.
Open & run
domain-warp.ts
Domain warping
fbm fed its own output — f(p) = fbm(p + w·fbm(p + fbm(p))) — melts lattice noise into marbled organic flow; the intermediate warp vectors double as colour axes. Warp strength is live.
Open & run
raymarch-sphere.ts
Raymarched sphere
A sphere signed-distance field, sphere-traced from a camera ray and Blinn-Phong shaded with an orbiting light. The "hello world" of raymarching — built on normalize / length / dot + a Loop march.
Open & run
raymarch-boxes.ts
Raymarched box field
Domain repetition — one rounded-box SDF floor-modded into an infinite lattice, flown through forever. Move the pointer to look around the corridor; a reusable scene() helper serves the march and the six-tap normal. Fly speed is live.
Open & run
tunnel.ts
Tunnel
The demoscene tunnel — the screen remapped to polar coordinates (angle around, 1/radius into the depth) so a checker pattern flies past forever. atan2 + length + fog, with a live twist control.
Open & run
metaballs.ts
Metaballs
Implicit blobs — each ball adds an inverse-square field, the fields sum, and the iso-contour merges and splits as they orbit. Move the pointer and one ball follows it into the swarm. Ball count is live.
Open & run
ocean.ts
Ocean horizon
A seascape from first principles — the rows below the horizon perspective-divided into a water plane, waved by fBm value noise, with a sun disc and a glitter path where crests align beneath it. Swell height is live.
Open & run
starfield.ts
Starfield
A textureless night sky — three hash-grid layers decide per cell whether a star exists, where it sits, and how it twinkles; nearer layers drift faster for parallax. Density is live.
Open & run
truchet.ts
Truchet tiles
One tile — two quarter-circle arcs — mirrored per cell by a hash bit, and the plane weaves itself into an endless maze. fwidth keeps the strokes screen-constant; energy pulses along the arcs. Tile count is live.
Open & run
kaleidoscope.ts
Kaleidoscope
The polar mirror fold — the angle floor-modded into one sector and mirrored about its midline, so every sector repeats the same wedge of swirling fbm and rings. Segment count is live.
Open & run
heart.ts
Beating heart
The sextic heart curve (x²+y²−1)³ = x²y³, sign-filled and fwidth-anti-aliased, thumping to a sharpened-sine heartbeat with a beat-synced glow. Beat rate is live.
Open & run
gradient.ts
Gradient pass
A two-colour vertical gradient with a biasable blend — the minimal render pass. `top`/`bottom`/`mix_bias` are packed into one std140 uniform block recovered from reflect().
Open & run
override-quality.ts
Specialization constant
A pipeline-overridable `quality` constant (#923): WGSL `override` + GLSL `#define`, guarding a branch the DRIVER dead-code-eliminates per variant. One authored module → N driver-specialized pipelines. Shows WGSL + reflection.
View source
Compute (WebGPU)
GPGPU kernels. GLSL ES 3.00 has no compute, so the DSL fails closed for WebGL2 — these show the WGSL + reflection face of the same source.