This is the source code for How to render outlines in WebGL & Better outline rendering using surface IDs with WebGL implemented in ThreeJS and PlayCanvas. This renders outlines with a post-process shader that takes the depth buffer and a surface normal buffer as inputs, followed by an FXAA pass.

Boat model by Google Poly

• Left is a common way to visualize outlines, boundary only.
• Middle is the technique in this repo.
• Right is same as middle with outlines only.

See live ThreeJS version.

Drag and drop any glTF file to see the outlines on your own models (must be a single .glb file).

Or click "Login to Sketchfab" and paste in any Sketchfab model URL, such as: https://sketchfab.com/3d-models/skull-downloadable-1a9db900738d44298b0bc59f68123393

• ThreeJS version
• ThreeJS version with debug visualizations <-- this is the source code for the live demo that contains all the parameters in the GUI
• PlayCanvas version

If you want to apply the outline effect to specific objects, instead of all objects in the scene, an example ThreeJS implementation is documented here: OmarShehata#3.