散景通行证与其他后处理THREE.js混合

Question

我正在尝试在EffectComposer中放置多个通道，除了BokehPass之外，一切都很好。

我的代码看起来像这样（我已经得到了一个场景、相机和渲染器）：

...
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 );
}
...

漂白通行证工作正常，但不是散景通行证按此顺序。

如果我尝试：renderPass -> bleachPass -> bokehPass，bleachPass 不起作用。

然后我尝试：renderPass -> bleachPass -> copyPass -> bokehPass，但它给了我一些奇怪的结果。

有人知道如何将多个通道与散景混合吗？

谢谢！

Answer 1

老问题，但供将来参考，以下是@Mugen87的答案：https://github.com/mrdoob/three.js/issues/18634

散景通行证设置需要交换为假。这意味着缓冲区的结果在读取缓冲区中不可用，用于后续的后处理传递。这样做是出于性能原因，因为通常此 DOF 通道单独使用或在通道链的末端使用。因此，添加以下代码行应该可以解决问题：

bokehPass.needsSwap = true;

更新的小提琴：https://jsfiddle.net/5nxy0tqp/

Answer 2

也许它仍然可以帮助人们： 我想你忘记了copyPass.renderToScreen = true（因为它是你最后一个使用addPass的着色器）