Question

在我继续尝试使用Three.js时，我撞到了另一面似乎无法爬过的墙。

我正在尝试在具有SSAO后期处理效果的前景场景下渲染一个背景场景（其中有一个楼层）。背景场景不应该进行任何后处理。

我尝试了多种方法（使用蒙版等），我似乎无法解决这个问题。我看到的主要问题是SSAO场景的背景是不透明的，因此背景场景没有显示。我仍然不相信，即使解决了透明度问题，事情也会按预期发挥作用。

如果没有SSAO后期处理，这就是事情的样子：http://jsfiddle.net/uJbPe/1/

这就是启用SSAO后处理时目前的情况：http://jsfiddle.net/7hfdC/6/

知道我做错了吗？

Answer 1

你可以使用掩蔽传递来实现这一点。我认为这是解决问题的正确方法。您的原始代码需要一些补充才能实现这一目标。

首先，您需要创建一个渲染目标，该目标具有启用模板缓冲区以传递给效果编辑器以供使用。模板缓冲区中的信息允许进行屏蔽。

renderTargetParameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: true };
renderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, renderTargetParameters );
composer = new THREE.EffectComposer( renderer, renderTarget );

接下来，我建议让你的背景和前景都在作曲家中。它使渲染堆栈更清晰。渲染前景场景时，请确保将其clear属性设置为false，以便为掩蔽过程保留模板缓冲区数据。

然后屏幕传递，ssao传递，清晰的遮罩路径和最终着色器传递以将其全部渲染到屏幕上。你可以在这里使用简单的通过着色器或fxaa。可能还有另一种渲染到屏幕的方法，我不知道，但你不能将ssao传递分配给渲染到屏幕，并且当透明蒙版传递跟随它时让它工作。

此处是实施此方法的小提琴的链接http://jsfiddle.net/xqLdz/3/

Answer 2

我正在做一些非常相似的事情。在你的SSAO中你试过'ssaoPass.material.transparent = true;'。看起来如果你制作前景RGBA而不是默认的RGB它可以解决你的问题。

渲染多个场景，只有1个使用SSAO [Three.js]

2 个答案: