Home

Awesome

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.

Three versions of a boat 3D model showing the different outline techniquesBoat model by Google Poly

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

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.

outline_selected