2

我正在尝试使用 SSAO 后处理着色器渲染场景。没有任何错误,但我看不出使用和不使用 SSAO 通道渲染的场景之间有什么区别。我像这样初始化渲染器:

// Create WebGL Renderer
var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF };
renderer = new THREE.WebGLRenderer(renderParameters);
renderer.autoClear = false;
renderer.setSize(viewportWidth, viewportHeight);

// Create render targets
renderTargetParametersRGB = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGBA);
colorTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGB);

// The shader pass to draw the scene
var renderScenePass = new THREE.RenderPass(scene, camera);

// Copy to screen render pass
var copyToScreenPass = new THREE.ShaderPass(THREE.CopyShader);
copyToScreenPass.renderToScreen = true;

// SSAO render pass
effectSSAO = new THREE.ShaderPass(THREE.SSAOShader);
effectSSAO.uniforms['tDepth'].texture = depthTarget;
effectSSAO.uniforms['size'].value.set(width, height);
effectSSAO.uniforms['cameraNear'].value = camera.near; // 1
effectSSAO.uniforms['cameraFar'].value = camera.far;  // 1000
//effectSSAO.uniforms.onlyAO.value = 1;

// Setup post processing chain
composer = new THREE.EffectComposer(renderer, colorTarget);
composer.addPass(effectSSAO);
composer.addPass(copyToScreenPass); 

// Depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin(depthPassPlugin);

在渲染函数中,我像这样渲染场景:

requestAnimationFrame(render);
depthPassPlugin.enabled = true;
renderer.render(scene, camera, composer.renderTarget2, true);
depthPassPlugin.enabled = false;
composer.render(0.1);

正如我之前所说,一切似乎都运行良好,但屏幕上没有可见的 AO 效果。也许我只是使用了错误的参数值?我已经确保通过将 depthTarget 渲染到屏幕来更新深度通道。如果我打开 effectSSAO.uniforms.onlyAO.value,我会得到一个非常“平坦”的实际场景(包括纹理)的褐色渲染,但仍然没有 AO。有人可以给我一个建议下一步该尝试什么吗?

4

1 回答 1

5

在https://twitter.com/mrdoob/status/300919764262477824有一个使用当前版本的 three.js (r56) 的示例

这是代码的直接链接:http: //goo.gl/RzfwH

感谢 Altered Qualia 和 MrDoob 提供的示例代码和three.js 库!

于 2013-03-13T16:28:20.427 回答