Because of how THREE.js does SSAO, we sometimes get artifacts where the depth is wrong on transparent materials.
If you think about it for a sec, this is actually most likely because of how THREE.js sorts objects: we don't sort them but THREE.js does use the painter's algorithm where transparencies are added after the solids (or else it just wouldn't work right at all in most cases).
The fix would be to have two SSAO materials, one for the solid pass, and one for the transparent pass, and set itmaually on the objects instead of on the override.
Because of how THREE.js does SSAO, we sometimes get artifacts where the depth is wrong on transparent materials.
If you think about it for a sec, this is actually most likely because of how THREE.js sorts objects: we don't sort them but THREE.js does use the painter's algorithm where transparencies are added after the solids (or else it just wouldn't work right at all in most cases).
The SSAO pass looks like it does not copy transparency on the override material, causing the bug: https://github.com/mrdoob/three.js/blob/85d747b86b56db220a3855e406c09c87add60a8f/examples/jsm/postprocessing/SSAOPass.js#L307
The fix would be to have two SSAO materials, one for the solid pass, and one for the transparent pass, and set itmaually on the objects instead of on the override.