How to render full outlines as a post process - tutorial

I was looking for an outline implementation that could show all edges (like the middle image), not just the outer boundary (left). I couldn’t find one, so I wrote one up and thought I’d share it here!

I also wrote an article that descibes this technique more generally: https://omar-shehata.medium.com/how-to-render-outlines-in-webgl-8253c14724f9.

I started out wanting to recreate the stylized aesthetic of Return of the Obra Dinn with PlayCanvas, and ended up spending the majority of the time figuring out the outlines part, so hopefully this can be useful to others!

It’s not a complicated effect but it requires setting up the rendering pipeline in the right way, and this was thankfully way easier with the layers system, compared to the last time I was doing stuff like this a few years ago.

12 Likes

That’s awesome work, very nice!

1 Like

It really is fantastic implementation, well done!

1 Like

Thank you for sharing, @OmarShehata!

1 Like

Thanks everyone! Really appreciate the support, and I definitely leaned in a lot on countless forum posts as I made my way through here.