Ray Marching SDF Playground
Combine sphere, box and ring distance fields into interactive 3D shapes.
About this tool
Build an implicit shape by combining up to three spheres, boxes or rings. Choose an example, edit one object through its tab, then Render. Changes hide the old image until rendered again. Reset restores the three-shape example. Inputs and selection values are saved, not the image or camera.
Position X/Y/Z ranges from −2 to 2 in arbitrary scene units. A sphere has one radius; a box uses half extents on each axis. A ring lies in the XZ plane, with Y as its axis: its ring radius reaches the tube centre and its tube radius gives the thickness. Dimensions range from 0.05 to 1.5; the tube radius must be smaller than the ring radius. Disabled objects ignore their number fields.
Blend width 0 makes an ordinary union. A positive width up to 1 rounds joins using a polynomial smooth minimum; it may enlarge the silhouette. Different object orders may produce different blends. This is a geometric playground, not a physical simulation or a mesh exporter.
Drag to orbit, use Ctrl/Meta with the wheel to zoom, or enable Rotate. A plain wheel scrolls the page. Rotation preserves the current viewing distance and stops while the tool is hidden; rendering again reuses the same WebGL context. Raw input drafts and Rotate are saved locally, including unfinished numbers. An oversized draft shows a warning and preserves the previous saved version; copy it before leaving. Editing shapes or resizing the preview fits the scene into view; rendering an unchanged scene retains your camera view.
The sphere distance is length(p)−r. The box measures distance to its axis-aligned faces; the torus measures distance to a circle then subtracts its tube radius. Each pixel advances by the absolute distance bound along a unit ray, including from inside a shape. Rendering uses at most 128 steps, a 0.001 surface threshold and a 60-unit travel limit. Normals use finite differences. Edges and grazing rays can show numerical artifacts; shading is illustrative, without reflections or physically based lighting. WebGL is required.