渲染多个场景，仅使用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，则可以解决您的问题。