Skip to content

Implementation of a post process outline shader in ThreeJS & PlayCanvas.


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



41 Commits

Repository files navigation

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

  • 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:

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: #3.