How to render full outlines as a post process - tutorial

Hey all,

I wrote an updated outlines tutorial called Better outline rendering with surface Ids that solves a lot of the artifacts of the previous technique. It’s inspired by this twitter thread by Ian MacLarty about how outline rendering works in their game Mars First Logistics.

I’ve also updated the ThreeJS demo to have both the “v1” and “v2” outline techniques to make them easy to compare.

Here’s the cylinder model from earlier in this thread. From left to right:

No outlines — V1 — V2

Note in V1 there are missing edges in the interior of the top gear, and also faint “false edges” on the bottom of the bottom gear.

The artifacts in V1 are most visible when the camera/objects are moving like below:

v1_v2_artifacts

Here’s an example using this Sketchfab skull model (you can paste any sketchfab link in the demo to try it).

V2 on the right.

V2 overall is always going to be more crisp/stable with changing camera angles. The tradeoff is possibly having to tweak the geometry of your model, but I personally prefer this approach because it’s much easier to get the results you want compared to trying to tweak all the depth/normal multiplier parameters.

Hope people find this useful!

12 Likes

didi you find a solution?

Hi, this is great!
One question - is there a simple way to display only outlines created by intersection of clip plane and model?