A hard `step` edge aliases in GLSL — use `smoothstep` with a `fwidth` width for anti-aliasing

Drawing an edge with step produces a hard boundary that aliases: jagged, shimmering edges under motion, because there is no transition band across a pixel. The fix is to fade the edge over roughly one pixel’s worth of the distance field using smoothstep(-w, w, d) with the pixel-scale width w = fwidth(d). This gives a resolution-independent anti-aliased edge that stays crisp without shimmering.

Examples

float e = step(0.0, d); // aliased, shimmers float w = fwidth(d); float e = smoothstep(-w, w, d); // anti-aliased

Assessment

An SDF shape has jagged, shimmering edges. Explain why a step edge aliases and rewrite it with smoothstep and fwidth for a clean edge.