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

}

...

bleachPass工作正常，但不是这个顺序的bokehPass。

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

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

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

谢谢！

Answer 1

旧问题，但供以后参考，这是@ Mugen87的回答： https://github.com/mrdoob/three.js/issues/18634

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

bokehPass.needsSwap = true;

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

Answer 2

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

BokehPass与其他后期处理THREE.js混合使用

2 个答案: