Better outline rendering using surface IDs with WebGL

Screenshot from Mars First Logistics.

Live demo & source code

Try out this outline rendering implementation in the demo below. You can drag and drop your own models into the viewer (as a single .glb/glTF file) or log in with Sketchfab and paste a model URL.

How it works — an overview

The previous technique uses a combination of the normals & depth of the scene to detect edges in a post process pass. The new technique uses “surface IDs” instead of the normals.

Pipeline image from the previous “How to render outlines in WebGL” article

How to compute surface IDs of a mesh

Ian MacLarty defines a surface as “a set of vertices that share triangles”. That means what we’re doing here is looking for all connected components in our mesh and assigning each a unique ID.

Using the surface IDs in the edge detection post process

Once we have the surface ID’s assigned to each vertex, we store them as a vertex attribute. We then have a render pass to render all surface ID’s in the scene to a buffer.

  1. Normalizing them between 0 and 1
  2. Writing it to a float texture

Tweaking your geometry for outline rendering

Because this method of detecting edges relies on how the geometry is constructed, you may find artifacts caused by how your geometry is constructed.

  1. Select the two (or more) faces in edit mode that should be considered one surface

Notes on other ways to compute surface IDs

Instead of manually fixing your geometry by merging vertices, you could pre-compute and bake in a value in your model authoring workflow.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Omar Shehata

Omar Shehata

Graphics programmer working on maps. I love telling stories and it's why I do what I do, from making games, to teaching & writing. https://omarshehata.me/