A signed distance function (SDF) returns positive distances outside a shape, negative inside, and zero at its boundary

An SDF takes a 2D or 3D position and returns the distance from that position to the nearest point on a shape’s surface. The sign distinguishes inside (negative) from outside (positive), with zero exactly on the boundary. For a circle of radius r centered at the origin: SDF(p) = length(p) - r. Rendering uses this: smooth-step over a thin band around zero gives a crisp anti-aliased edge; taking the absolute value turns a filled circle into a ring; applying smoothstep with different thresholds gives soft glows. SDFs compose well (union, intersection, subtraction using min/max) and are the foundation of much procedural shape work in shaders.

Examples

float d = length(uv) - 0.5; // SDF of circle, radius 0.5
// d > 0: outside circle
// d < 0: inside circle (black)
// d == 0: circle edge
float ring = abs(d); // distance to circle edge in both directions
float shape = smoothstep(0.1, 0.0, abs(d)); // anti-aliased filled circle

Assessment

Write the SDF for a circle centered at (0.3, 0.2) with radius 0.4. Describe what abs(sdf) looks like when rendered in grayscale. Contrast it with step(0.0, sdf) and smoothstep(-0.01, 0.01, sdf).