Nice silhouette outline and glow effects have always felt fairly elusive and I’ve been wanting to learn more about the jump flood algorithm since I saw this this article on the topic by Ben Golus years ago. So with trying to get back into working on personal projects I figured I’d give it a go.
The above article describes the algorithm fairly well but it basically works by checking sibling pixels at smaller and smaller distance in order to estimate the position of the closest pixel in a target region (in this case a character model). By taking advantage of the work done for other pixels in previous passes you save a lot of time compared to brute force checking every pixel until you find the nearest target. This gets you a screenspace SDF around the character fairly quickly:
You’ll notice that the SDF is also generated on the inside of the model with a negative sign so things like “interior” or “center” outlines can be generated, as well, similar to Photoshop’s Layer Effects:
Outlines and glow effects seem like common realtime applications but there are other cool dynamic effects you can make with this kind of data – like these comic book and pulsating outline effects for something like a game. You can also imagine using the SDF to drive things like particles or other physics effects in screen space.
You can see the repository and code here with links to a demo, as well. There’s still some room for improvement around performance and anti-aliasing quality - something to revisit in the future!