Three.js SSAO on a smooth mesh produces flat-shaded results

Hi all,

I have already asked this question on SO but had no traction with it this far. Here is the link:

I have a fairly low res-mesh, so with material.flatShading = true the triagles are fairly visible (top image). When I set material.flatShading = false the result is much better (second image), which is expected. To the best of my understanding flat shading doesn’t affect the actual geometry, but rather affects the way light reflects off of it - that’s how the smooth light transition on the surface is achieved.

Now I am applying an SSAO postprocessing step (https://threejs.org/examples/webgl_postprocessing_ssao.html). Under the hood SSAOPass uses a MeshDepthMaterial that is set as override material on the scene, then the scene is rendered into texture and then this texture is used when calling unpackRGBAToDepth in SSAOShader to get the depth of each vUv coordinate.

The resulting SSAO shows triangles of my coarse mesh and I am trying to find ways around it, if any. My current understanding is that MeshDepthMaterial doesn’t have a concept of flat or smooth shading as it simply computes the depth from camera near plane to the mesh (which itself is coarse). As a result the AO computation produces coarse results…

Is my only way around this to make the mesh as high-res as possible (with a lot more triangles in it)?

Thank you.

The SAAO implementation is currently broken so it’s not recommended to use it.

Thank you. Until this is ironed out I think I will consider using SAO…

There is a new SSAO implementation, see:

Excellent, thank you for tackling this!

1 Like