How to render outlines in WebGL
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.
Live demo
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
Source code
- 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
Applying outlines selectively to objects
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: https://github.com/OmarShehata/webgl-outlines/pull/3.
