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!
- PlayCanvas editor project: https://playcanvas.com/project/753116/overview/outline-post-process
- Engine-only version: https://github.com/OmarShehata/webgl-outlines/tree/main/playcanvas
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.