All guides

SDF vs Alpha Outline vs Sobel

Outline can mean three different input problems. An SDF stroke selects |d| near zero. A sprite outline dilates alpha and subtracts the original mask. A photo edge detector measures luminance gradient. Using Sobel for a leaf silhouette also detects veins inside the leaf.

Fix the problem and environment

Outline can mean three different input problems. An SDF stroke selects |d| near zero. A sprite outline dilates alpha and subtracts the original mask. A photo edge detector measures luminance gradient. Using Sobel for a leaf silhouette also detects veins inside the leaf.

The controlling code

float sdfStroke=1.0-smoothstep(width,width+aa,abs(d));
float outerAlpha=max(neighborMaxAlpha-originalAlpha,0.0);
float photoEdge=length(vec2(sobelX,sobelY));

Verify in order

Open the SDF, transparent leaf and Sobel examples. Identify the input first and decide whether the wanted edge follows geometry, transparency or color change.

Scope and common mistakes

Neighborhood dilation is not exact Euclidean distance; thick strokes need more directions or a distance transform. Sobel width is not a geometric stroke width.

Continue experimenting

Reference

Official documentation

Run the related examples