1

在我对 Three.js 的持续试验中，我碰到了另一面似乎无法翻越的墙。

我正在尝试在具有 SSAO 后期处理效果的前景场景下方渲染背景场景（其中有地板）。背景场景不应应用任何后期处理。

我尝试了多种方法（使用面具等），但我似乎无法破解这一点。我看到的主要问题是 SSAO 场景的背景不透明，因此没有显示背景场景。我仍然不相信即使解决了透明度问题，事情也会按预期进行。

这就是没有SSAO后处理的情况：http: //jsfiddle.net/uJbPe/1/

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

知道我做错了什么吗？

4

2 回答 2

2

您可以使用掩蔽通道来实现这一点。我相信这是解决问题的正确方法。您的原始代码需要添加一些内容才能实现。

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

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/

于 2013-03-13T16:33:23.243 回答
0

我正在做一些非常非常相似的事情。在您的 SSAO 中，您是否尝试过“ssaoPass.material.transparent = true;”。好像如果你让你的前景 RGBA 而不是默认的 RGB 它可以解决你的问题。

于 2013-03-09T03:32:04.033 回答