what you're looking at

The white outline is the shape. Inside is colored red-orange, outside is green-blue. Shade intensity grows with distance from the surface.

move the cursor

The pink dot is your cursor position. The dashed circle has radius equal to |sdf(p)|. It always just touches the surface, never crosses it. The arrow points to the nearest surface point.

why this matters

That "largest safe step" property is exactly what sphere tracing uses. Stand anywhere, and you know how far you can walk before hitting something.

what rendering is

For each pixel: cast a ray from the camera through it, find what it hits, color the pixel. Done.

the entire ray tracer

function trace(p, dir):
  for i in 1..MAX_STEPS:
    d = sdf(p)
    if |d| < eps: return HIT
    p = p + dir * d
  return MISS

why this is a big deal

That's the whole algorithm. Five lines, no mesh, no acceleration structures. A polygon ray tracer needs hundreds of lines and a textbook chapter of edge cases.

what's on screen

Two shapes, A and B, each with its own SDF. Drag either to move it. The white outline is the SDF of their combination.

the operations

Union: min(A, B).
Intersection: max(A, B).
Subtraction: max(A, -B).
Smooth union: blended variant, differentiable everywhere.

why it matters

Modeling with polygon meshes needs brittle boolean solvers. SDFs give you the same operations as single-line functions. And every expression is differentiable, so gradient-based optimization works directly on shape.