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

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，它可以解决你的问题。