GLSL shader example

Sprite Outline from an Alpha Mask

Dilate alpha with a neighborhood maximum and subtract original alpha. This finds a silhouette, not brightness edges inside the leaf.

Live example

Edit the code and the preview updates as you type.

What to observe

Sprite Outline from an Alpha Mask.

Mechanism

Dilate alpha with a neighborhood maximum and subtract original alpha. This finds a silhouette, not brightness edges inside the leaf.

The controlling code

vec4 tex=texture2D(u_texture,uv);float a=tex.a;vec2 px=(1.+u_parameter*7.)/vec2(256.);float around=0.;for(int y=-1;y<=1;y++)for(int x=-1;x<=1;x++)around=max(around,texture2D(u_texture,uv+vec2(float(x),float(y))*px).a);c=mix(c,vec3(1.,.65,.2),max(around-a,0.));c=mix(c,tex.rgb,a);

Experiment

Set the Effect parameter to 0, then 1: px=(1.+u_parameter*7.)/vec2(256.) moves the neighbor probes from one to eight texture pixels away. The orange border spreads outward around the leaf while the opaque interior keeps its original color.

Debugging and cost

The 3×3 loop reads nine neighboring alpha values plus the original texel. Replace around-a with around to see the dilation before subtraction; the orange fill then includes the original silhouette, although the final leaf compositing covers its interior.

Understand the technique

Built-in functions used

Learn it step by step