GLSL shader example
Constant Pixel Width SDF Outline
The left uses a fixed distance threshold; the right estimates pixel width from screen derivatives. Change radius and compare the stroke widths.
Live example
Edit the code and the preview updates as you type.
What to observe
Constant Pixel Width SDF Outline.
Mechanism
The left uses a fixed distance threshold; the right estimates pixel width from screen derivatives. Change radius and compare the stroke widths.
The controlling code
float scale=.4+1.4*u_parameter;float d=(length(p/scale)-.35)*scale;float width=p.x<0.?.025:2.*fwidth(d);float outline=1.-smoothstep(width,width+aa,abs(d));c=mix(c,vec3(.3,1.,.6),outline);
Experiment
Set the radius .35 in length(p/scale)-.35 to .5. The circle grows while the field is rescaled back by scale, letting you compare the fixed left threshold with the derivative-based right threshold.
Debugging and cost
The right threshold is 2.*fwidth(d), whereas the left is the constant .025. Change the right multiplier from 2. to 1. to narrow only that half; fwidth estimates a pixel-scale change, not an exact total stroke width in every orientation.