SDF Playground

SDF Playground is a browser-based environment for writing and previewing Signed Distance Field scenes in real time. You type GLSL code, and the scene renders live in the fragment shader — no compilation step, no build tool, no GPU driver setup.

What is an SDF?

A Signed Distance Function takes a point in space and returns the distance to the nearest surface. The sign indicates whether the point is inside (negative) or outside (positive) the surface. The function is zero exactly on the surface.

SDFs are the foundation of a technique called ray-marched rendering. Instead of rasterizing triangles, you cast rays from the camera through each pixel and march along the ray, checking the distance to the nearest surface at each step. When the distance drops below a threshold, you've hit a surface. The number of steps gives you depth; the surface normal (computed via finite differences of the SDF) gives you shading.

The entire scene — geometry, lighting, materials, shadows, ambient occlusion — is defined in a single fragment shader. No geometry data. No vertex buffers. Just math.

Why a playground

SDF rendering is beautiful but unintuitive. The relationship between the function you write and the image you see is not obvious until you've iterated on it many times. Small changes to parameters can produce large changes in the output. The feedback loop — edit, compile, render, inspect — needs to be as short as possible for learning to happen.

The Playground provides this loop:

1. You write or modify an SDF scene in the editor pane
2. The scene recompiles and renders immediately on every keystroke
3. You can adjust uniforms (time, resolution, camera position) via sliders

Technical details

The Playground uses a single full-screen quad with a custom fragment shader. The shader is compiled at runtime using WebGLRenderingContext.compileShader() and errors are displayed inline in the editor — no silent failures.

The shader template provides built-in utility functions: SDF primitives (sphere, box, torus, plane, capsule), domain operations (repeat, mirror, bend, twist), and combining operations (union, subtract, intersect, smooth blend). You can use these or write your own from scratch.

Uniforms are injected automatically: u_time, u_resolution, u_mouse, and u_camera are always available. Additional uniforms can be declared with a special comment syntax and automatically appear as sliders in the UI.

Smooth blending

The most educational feature is the smooth-min visualization. SDF combining operations use min() for union, but replacing it with a smooth-min function produces organic-looking blends between surfaces. The smooth-min parameter controls the blend radius:

// Hard union — sharp intersection
float d = min(d1, d2);

// Smooth union — organic blend
float d = smin(d1, d2, 0.1);

The Playground lets you toggle between hard and smooth operations and adjust the blend radius with a slider, making the relationship between the function and the visual output immediately clear.

What people use it for

The Playground has found an audience among shader learners, demoscene artists, and math educators. Common use cases include:

• Learning SDF techniques by modifying existing scenes
• Prototyping shader ideas before integrating them into larger projects
• Teaching spatial mathematics — the distance-field concept maps directly to the math
• Creating shader art for the demoscene or social media

It's not a production tool. It's a sketchbook for shader mathematics — a place to think in distance fields and see the result instantly.