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 ThreeJS version on CodeSandbox.
Drag and drop any glTF file to see the outlines on your own models (must be a single .glb
file).