smoothstep() creates smooth transitions between two thresholds, enabling anti-aliased edges in shaders

smoothstep(edge0, edge1, x) returns 0 when x ≤ edge0, 1 when x ≥ edge1, and smoothly interpolates between 0 and 1 within [edge0, edge1] using a cubic curve. In shader art this replaces the hard step() function for drawing shapes with soft, anti-aliased edges. The width of the transition band (edge1 - edge0) controls sharpness: very narrow = crisp edge; wider = soft glow. Using smoothstep(0.0, 0.1, d) on an SDF value d renders a shape that fades from solid white (inside) to black (outside) over a 10% range. This is the standard way to avoid jagged aliasing artifacts in procedural shapes.

Examples

float d = length(uv) - 0.5;
// hard edge:
float hard = step(0.0, -d); // binary in/out
// soft edge:
float soft = smoothstep(0.1, 0.0, d); // anti-aliased circle

Assessment

Draw a diagram showing the output of step(0.5, x), smoothstep(0.4, 0.6, x), and smoothstep(0.45, 0.55, x) over x=[0,1]. Explain why a narrower transition band increases apparent sharpness.