javascript - THREE.js:结合 smaa 和 ssao 后处理

Question

我正在尝试组合 SMAA和 SSAO在我的 THREE.EffectComposer 中，如下所示:

this.composer = new THREE.EffectComposer(this.renderer);

// Setup depth pass
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.depthPacking = THREE.RGBADepthPacking;
depthMaterial.blending = THREE.NoBlending;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter };
depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
// Setup SSAO pass
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.renderToScreen = true;
ssaoPass.uniforms[ "tDepth" ].value = depthRenderTarget.texture;
ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssaoPass.uniforms[ 'cameraNear' ].value = this.camera.near;
ssaoPass.uniforms[ 'cameraFar' ].value = this.camera.far;
ssaoPass.uniforms[ 'onlyAO' ].value = false;
ssaoPass.uniforms[ 'aoClamp' ].value = .3;
ssaoPass.uniforms[ 'lumInfluence' ].value = 1;

this.ssaoPass = ssaoPass;
this.depthRenderTarget = depthRenderTarget;


smaapass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
smaapass.renderToScreen = true;
this.composer.addPass(new THREE.RenderPass(this.scene, this.camera));
this.composer.addPass(ssaoPass);
this.composer.addPass(smaapass);

但不幸的是只有 smaapass 被应用。我还尝试颠倒 composer.addPass 的顺序，但没有成功。我哪里做错了？谢谢!

Answer 1

var renderPass = new THREE.RenderPass( scene, camera );
this.composer = new THREE.EffectComposer(this.renderer);
this.composer.addPass(renderPass);

// Setup depth pass
depthMaterial = new THREE.MeshDepthMaterial();
depthMaterial.depthPacking = THREE.RGBADepthPacking;
depthMaterial.blending = THREE.NoBlending;
var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, 
window.innerHeight, pars );
// Setup SSAO pass
ssaoPass = new THREE.ShaderPass( THREE.SSAOShader );
ssaoPass.uniforms[ "tDepth" ].value = depthRenderTarget.texture;
ssaoPass.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
ssaoPass.uniforms[ 'cameraNear' ].value = this.camera.near;
ssaoPass.uniforms[ 'cameraFar' ].value = this.camera.far;
ssaoPass.uniforms[ 'onlyAO' ].value = false;
ssaoPass.uniforms[ 'aoClamp' ].value = .3;
ssaoPass.uniforms[ 'lumInfluence' ].value = 1;
ssaoPass.renderToScreen = false; // lviggiani edit

smaapass = new THREE.SMAAPass( window.innerWidth, window.innerHeight );
smaapass.renderToScreen = true;
this.composer.addPass(ssaoPass);
this.composer.addPass(smaapass);

我将renderpass置于所有内容之上，并在设置ssao之前添加了renderpass。我还将 rendertoscreen 放在设置的底部而不是顶部。还删除了 this.depthRenderTarger = depthRenderTarger;，除非您已将其设置在其他不需要的地方。我还将 RGB 格式添加到了 深度渲染目标。