◆ Signed Distance

Level 5 · ●●●

Infinite Worlds From Formulas

Prerequisites: Level 4 for full value — skimmable by anyone.

You now know the whole trick: one function, asked patiently, becomes geometry, light, and a camera. This last level looks outward — at where this idea actually lives in the world, honestly sorted into “the same idea” and “a cousin” — and then looks down, into the place where formulas outrun geometry entirely. At the end, the site hands you its keys.

Where this idea lives

The demoscene.The same idea, in its purest form. A 4-kilobyte demo — smaller than this paragraph's HTML — has no room for meshes or textures, so the whole world ships as a distance function plus a marcher, almost line-for-line the code in this site's library. Landmark productions like Elevated built mountains, lighting, and music into the space of an email signature. Scarcity invented this aesthetic; the field made it possible.

Games and VFX.The same idea, embedded in pipelines built on triangles. Engines march fields for volumetric clouds and fog (where there is no surface for triangles to hold), for soft real-time shadows and ambient occlusion (Unreal's distance-field AO keeps a baked SDF of the scene), and for effects that must blend and morph. The hero is usually still a mesh; the atmosphere around it is often a field.

Font rendering.The same idea, precomputed. Valve's SDF text trick stores, in each texel, the signed distance to the glyph's outline. Magnify it and the bilinear-interpolated field still crosses zero exactly where the edge belongs — crisp text at any scale from a tiny texture, the zero level set doing all the work. Most game UIs and map labels you have read lately were drawn this way.

CAD and 3D printing.The same idea, taken as the ground truth of solid modeling. “Implicit” CAD kernels (OpenSCAD-style unions, nTopology's lattices) represent parts as fields, where booleans never produce the cracked seams mesh booleans suffer, and printers can ask “inside or outside?” per voxel. The marching happens once, into layers, instead of per frame.

Creative coding and plotter art.The same idea, with no GPU in sight. The generative-art community runs these formulas in ordinary JavaScript and Python: the circle packing you met in Level 2, contour traces of 2D fields for pen plotters, and “rayhatching” — Level 3's march, aimed at paper, shading 3D scenes with nothing but pen strokes. Genuary (the genre's January challenge) has dedicated an entire day's prompt to SDFs. If shaders ever feel distant, this scene is proof the mathematics stands on its own.

Machine learning. A cousin, and a close one. Neural SDFs (DeepSDF and descendants) train a network to be the function f(p)f(p)— the representation is identical, only authorship changed: gradient descent instead of algebra. NeRFs are a step further removed: they store density and color, not distance, so they march without the safe-leap guarantee. The echo is real, but say it precisely: neural SDFs are this idea; NeRFs are this idea's rendering loop with a different field inside.

The gallery: distance estimators and infinite detail

Everything so far came from primitives a person could write down. Fractals break that ceiling. There is no sdMandelbulb to derive — but if you can bound how fast an iteration escapes, you can compute a distance estimator: a cautious, Level-1-style promise of empty space around the set. A bound is all the marcher ever needed, so “render the un-renderable” reduces to Level 3's loop, unchanged:

Menger sponge
Drag to orbit. Each iteration subtracts a 3×-finer lattice of crosses — Level 2's mod-repetition and max-subtraction, recursed. Five iterations describe more holes than there are pixels on your screen, and the formula still fits in a dozen lines.
Mandelbulb
Drag to orbit. No primitive in any library describes this surface — the distance comes from a distance estimator, a bound computed from how fast the z → z⁸ + c iteration escapes. At low iterations you can watch the bulb being carved.

Watch the step-cost intuition from Level 3 pay off here: every canyon of the sponge and frill of the bulb is a grazing-ray trap, and the marcher spends its steps exactly where the detail is. Infinite worlds are not free — they are priced by proximity.

The studio

One gesture remains. The scene on this site's landing page — the one drawn beneath the words “by Level 4, you'll command it” — is loaded below, live, into a builder where every choice that made it is a control: the primitives, the operators between them, the materials, the light, the lens. The promise is kept.

The studio
seed 1
shape 1
shape 2
shape 3
2 onto 1
3 onto rest
material
mood
It opens on the scene that opened this site. Every slider that made the front door is now in your hands — drag to orbit, melt, carve, relight, and export your world at double resolution.
Go deeper: raytracing proper — reflections via secondary rays★★

Classical raytracing's defining move is recursion: when a ray hits something shiny, spawn a new ray and ask the scene again. Our marcher inherits it without ceremony — a reflected direction is reflect(rd, n), and a second march from the hit point is the recursion, depth one. Live:

One mirror bounce, live
The chrome sphere owns no color: every pixel on it is a second march, launched along reflect(rd, n). Toggle the bounce off and chrome becomes gray paint — reflection is not a material, it is another ray.

Each bounce multiplies cost (every chrome pixel pays for two full marches here) and production marchers cap depth at 1–2 bounces, often dropping shadow quality inside reflections. Note also what the shadows did notneed: Level 4's shadow march was already a secondary ray. You have been raytracing since the first shadow.

Go deeper: path tracing — the road ahead★★★

One mirror bounce answers one question; physically based rendering asks them all: light arrives at every point from everydirection, having bounced anywhere. Path tracing embraces the integral — shoot many rays per pixel, bounce each randomly (importance-sampled by the material), average, and let the noise melt away over samples. Every term maps onto what you know: the “visibility test” is Level 4's shadow march; each bounce is the mirror trick with a randomized direction; the field supplies hits and normals as always. What changes is the budget — hundreds of marches per pixel — which is why real-time path tracing leans on denoisers and why raymarched demos fake global illumination with AO and fill lights. If you take one road from this site, take this one: a weekend path tracer over your Level-4 renderer is within your reach.

Go deeper: performance engineering on real GPUs★★★

The march is honest but not free, and shipping it means respecting how GPUs actually run shaders:

  • Divergence: pixels execute in lockstep groups (warps); one grazing ray makes its 31 neighbors wait. Edges cost more than their pixel count — the step-cost view from Level 3 is literally a divergence map.
  • Cheapen the field: the map runs hundreds of times per pixel. Bound expensive shapes in cheap ones (test a sphere before a fractal), share work between branches, avoid pow where a multiply chain does.
  • Render less, smartly: half-resolution with sharp upscaling, adaptive resolution under load (this site does exactly this — open the page source), early-out on sky pixels, and capped iteration counts tuned per scene.
  • Precompute: bake static scenes into 3D distance textures and march the texture — constant-cost field queries, which is how engines afford scene-scale SDF shadows and AO.

Closing: geometry as arithmetic

Five levels ago you measured the distance to a circle and wrote it as a subtraction. That was the entire secret. Shapes became functions; functions had algebra; the algebra welded and tiled and carved; one Lipschitz promise let rays leap through space; and every question after that — which way, how bright, how shadowed, how far — was the same function, asked again with intent. Worlds as formulas. Geometry as arithmetic. The renderer you can read.

Look again at any image on this site — the hero, the sponge, the thing you just built in the studio. Every pixel of it is length(p) - r wearing increasingly ambitious clothes. You started by measuring a circle.

What you now know

  • The technique in the wild: demoscene 4k worlds and SDF fonts are the same idea; engine clouds/shadows embed it; neural SDFs learn it; NeRFs borrow its loop.
  • Distance estimators extend the marcher to fractals — a bound on escape speed is promise enough.
  • Reflection is another ray: reflect(rd, n) plus a second march; path tracing is that move, randomized and averaged.
  • The hero scene was never magic — you now own every slider that made it.

The ladder ends where it began: with one number per point, and everything else as consequence.

↩ Back to Level 1 — you started by measuring a circle