Three.js - SSAO defect transparent area

Question

I've been trying to add SSAO into my game, per this SSAO EXAMPLE

Unfortunately, my transparent trees now defected:

Please advise on how to fix it.

Answer 1

You could pass the texture into the normal/depth fragment shader and discard any fragments with an alpha < 0.5

Answer 2

This is not a defect, during the depth-Path, which you need to pass to the SSAO shader further on, transparency is not taken into account, thus your leave-defining planes get detected as planar geometry and get the appropriate outline. Concerning a solution, I cannot really help you. What you can do is hide all the transparent stuff before rendering the depth pass but then, the AO-pass gets multiplied over it, so you just trade in a visual problem against another one. To really solve this, i think you need an additional Three.MaskPass, see here:

Rendering multiple scenes, with only 1 using SSAO [Three.js]

Hope this helps.