Home▸Rendering & Computer Graphics▸2D Ray Marching — Sphere Tracing & SDF Explainer

2D Ray Marching — Sphere Tracing & SDF Explainer

A 2D sphere-tracing visualizer: real signed-distance-field math for circles and rounded boxes, combined with union/subtract/intersect, marched ray by ray from a movable eye with the classic step-circle debug view alongside a live raycast render column.

Rendering & Computer Graphics2DAdvanced60 FPS📱 Mobile-adapted⇄ 3D version
2d-ray-marching ↗ Open standalone

This 2D companion strips ray marching down to the mechanic itself, in a plane instead of a 3D shader. A scene made of two real signed-distance functions — a circle and a rounded box, combinable with union, subtract or intersect — is sphere-traced ray by ray from a draggable eye. The left pane colours the plane by the live SDF value and draws a handful of rays with every intermediate step rendered as the safe-distance circle the algorithm actually computed, the classic ray-marching-explainer picture. The right pane turns the same per-ray hit distances into a 1D raycast wall render, so one identical march drives two different views at once.

⚙ Under the hood

A 2D sphere-tracing visualizer: real signed-distance-field math for a circle and a rounded box, combined interactively with union/subtract/intersect CSG operators, sphere-traced ray by ray from a draggable eye. The debug view draws every step of a handful of rays as the actual safe-distance circle the algorithm computed, while a second pane turns the same hit distances into a live 1D raycast wall render.

ray marchingsphere tracingsigned distance functionSDFCSG boolean operationsrendering2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)