Website powered by

Aliasing-free wireframe shader on Oculus Quest

For "PeachGarden", an Oculus Quest project, I had to write a shader for a wireframe effect. As we couldn't afford to have any bloom on this Android Device, and MSAA*4 wasn't efficient enough for this kind of geometry, we had a lot of aliasing, especially when viewing from far away. I decided to take a "billboard" approach, to fade lines manually, and get this effect working from any view distance. I also developped on small python script to generate a shader-ready geometry on Blender.
This project is developped by InnerspaceVR, and directed by Hayoun Kwon. Level design : Fabrice Gaston. Lead Artist : Guillaume Bertinet.

A custom vertex shader allows planes to rotate around their axis and to face camera, keeping a constant width on screen independently of the view distance.

We do not have any bloom or efficient enough anti-aliasing on this android project, we need to manually fade lines. The effect has to work from any view distance.

Vertex shader : Billboard rotating around an axis stored in vertex normal, using a simple cross product. Effect amplitude is modulated by viewing distance to keep a constant width independently of the view distance.

Vertex shader : Billboard rotating around an axis stored in vertex normal, using a simple cross product. Effect amplitude is modulated by viewing distance to keep a constant width independently of the view distance.

Fragment shader : line opacity is simply based on a gradient (using UVs), and weighted by viewing distance.

Fragment shader : line opacity is simply based on a gradient (using UVs), and weighted by viewing distance.

I wrote a small python script to generate a mesh ready for wireframe shader in UE4 : edges are transformed into quad with vertex normal parallel to the edge direction, UV are also automatically generated for each of these quads.