webaverse / app

Web metaverse client
https://app.webaverse.com
MIT License
339 stars 207 forks source link

App: SSAO does not obey transparency #1702

Open avaer opened 2 years ago

avaer commented 2 years ago

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.

avaer commented 2 years ago

You can see the error in the rock here: image