Filter outlines by the angle between surface normal & view direction

[OmarShehata]

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

Here's before & 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:

terrain_depth_bias.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]

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