The Quest for Very Wide Outlines

An Exploration of GPU Silhouette Rendering

Disclaimer: Not Real Concept Art

Cracked Shell

Jet Set Radio HD and Guilty Gear Xrd -SIGN- using inverted hull mesh outlines
Holes and seams from hard mesh edges and inconsistent line widths

Eh Tu Brute?

10 pixel radius Brute Force Outline ~2.7 ms @ 1080p
Yellow showing interior stencil mask
Green showing outer range stencil mask
Red showing inner line fill stencil mask
30 pixel Optimized Brute Force Outline ~2.5 ms @ 1080p
The difference between a 32 vs 33 pixel outline showing significant increase in the mask area as the mip level increases

Blurring the Line

30 pixel Gaussian Blur Outline ~1.1 ms @ 1080p
30 pixel Optimized Brute Force vs Gaussian Blur Outline
Highlighting artifacts when using a Gaussian Blur based outline

Missing the Jump

30 pixel Jump Flood Algorithm Outline ~0.6 ms @ 1080p
100 pixel JFA Outline ~0.7 ms @ 1080p
Mask Pass
Jump Flood Init Pass
Init pass only outputting the mask edge
Jump Flood Passes for a 14 Pixel Radius
Final Jump Flood Pass Output for a 14 Pixel Radius, and 500 Pixel Radius
10 pixel basic JFA outline
Anti-aliasing from fading distance to aliased Threshold Jump Flood Init
Jump Flood Init approximating sub pixel edge position using left/right & above/below texel samples
“bubble” artifact on sharp anti-aliased corners
correct outline on sharp anti-aliased corners
1 pixel Jump Flood Outline on geometry less than a pixel wide (500% Zoom)
1 pixel Brute Force Outline on geometry less than a pixel wide (500% Zoom)

Optimizations

Final Words

Bye!

Additional Thoughts

Code Samples

--

--

Tech Artist & Graphics Programmer lately focused on Unity VR game dev. https://ko-fi.com/bgolus

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store