This is the source code for How to render outlines in 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
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.
