BokehPass 与其他后处理 THREE.js 混合答案

【问题标题】：BokehPass mix with other postprocessing THREE.jsBokehPass 与其他后处理 THREE.js 混合
【发布时间】：2014-02-25 16:18:13
【问题描述】：

我正在尝试在 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 );

}

...

bokehPass 可以正常工作，但 bokehPass 不能按此顺序运行。

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

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

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

谢谢！

【问题讨论】：

标签： three.js

【解决方案1】：

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

BokehPass 设置 needsSwap 为 false。这意味着缓冲区的结果在读取缓冲区中不可用于后续的后处理过程。这样做是出于性能原因，因为通常此 DOF 通道单独使用或在通道链的末端使用。所以添加以下代码行应该可以解决问题：

bokehPass.needsSwap = true;

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

【讨论】：

【解决方案2】：

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

【讨论】：