BokehPass mix with other postprocessing THREE.js

Question

I,m trying to put multiple passes in EffectComposer and everything is fine except for BokehPass.

My code look like this (I already got a scene, camera and renderer):

...

var renderPass = new THREE.RenderPass( scene, camera );

var postRenderer = new THREE.EffectComposer( renderer );

var copyPass = new THREE.ShaderPass( THREE.CopyShader );

var bokehSettings = {
    focus : 1.0, aperture : 0.025,  maxblur : 1.0,
    width: window.innerWidth, height : window.innerHeight
}

var bokehPass =  new THREE.BokehPass( scene, camera, bokehSettings );

var bleachPass = new THREE.ShaderPass( THREE.BleachBypassShader);//I make clone of uniforms but, for puspose, I don't write here.


postRenderer.addPass( renderPass );

postRenderer.addPass( bleachPass );

postRenderer.addPass( bokehPass );

postRenderer.addPass( copyPass );


...

function render(){

    postRenderer.render( 0.1 );

}

...

The bleachPass work fine but not bokehPass in this order.

If I try : renderPass -> bleachPass -> bokehPass, bleachPass doesnt work.

Then I try : renderPass -> bleachPass -> copyPass -> bokehPass, but it give me some weird result.

Someone know how to mix multiple passes with bokeh?

Thanks!

Answer 1

Old question but for future reference here's the answer by @Mugen87: https://github.com/mrdoob/three.js/issues/18634

BokehPass set needsSwap to false. That means the result of the buffer is not available in the read buffer for the subsequent post processing pass. This is done for performance reasons since usually this DOF pass is used on its own or at the end of the pass chain. So adding the following line of code should solve the issue:

bokehPass.needsSwap = true;

Updated fiddle: https://jsfiddle.net/5nxy0tqp/