Depth Of Field Post-Processing Disables Renderer Alpha Property Feature

Questions
, ,
1

Hi there,

So i’m follwing the threeJs example on how to implement Depth of Field Effect where Object far away from the camera are blurred out while the object close to the camera are focused on as seen here.ThreeJs Example

Now everything seemed to have worked fine but i had set my renderer alpha property set to true so the background of the renderer will be transparent. In other words HTML element under the canvas will be displayed

const renderer = new THREE.WebGLRenderer({
            canvas: canvas,
            antialias: true,
            alpha: true
        })

Now immediately i activated the Depth Of Field feature, my canvas stopped being transparent, and after an hour of trying debug what i was doing wrong, i realized it was this line of code that disables it.

renderer.autoClear = false;

when i remove this line of code my canvas becomes transparent back but the depth-of-field post processing effect stops working, so it seems it can’t work onless renderer autoClear is set to false

So can anybody recommed for me how i can do a post-processing depth-of-field effect while still having my canvas transparent.

Thank you in advance.