search

OmarShehata / webgl-outlines

Implementation of a post process outline shader in ThreeJS & PlayCanvas.
MIT License
360 stars 39 forks source link

Filter outlines by the angle between surface normal & view direction #7

Open OmarShehata opened 1 year ago

OmarShehata commented 1 year ago

The updated article Better outlines using surface IDs improves outline rendering for terrain/ground surfaces a bit.

Here's before & after:

terrain_before terrain_after

The "before" screenshot is a lot more noisy. This is because of the contribution of the normal buffer. In the 2nd screenshot the whole ground is seen as one "surface" so the only thing that contributes to the outline is the depth buffer.

I also clamp the depth diff in the shader so that the outlines are either on or off to make them look more crisp:

if (depthDiff >= 0.2) depthDiff = 1.0; else depthDiff = 0.0;

However, there is a problem here, if you want to be able to see more outlines, you can decrease the depthBias, but then you get a lot of these false edges in the distance:

https://user-images.githubusercontent.com/1711126/195630447-8d64038c-4602-45c5-95ca-7dfba7b30e5e.mp4

Ian Maclarty's twitter thread here has a solution for this: we should filter out outlines where the surface normal is close to parallel with the view direction.

It would be great to show an example implementation of this in ThreeJS and see if that indeed fixes this specific artifact.

OmarShehata commented 1 year ago

The terrain model used above can be found here: https://github.com/OmarShehata/webgl-outlines/blob/main/threejs/public/terrain.glb