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

我正在尝试在我的THREE.EffectComposer中将SMAA和SSAO结合在一起，如下所示：

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的顺序，但没有成功。
我哪里做错了？谢谢！

最佳答案

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放在所有内容之上，并在设置renderpass之前添加了ssao。我还将rendertoscreen放在设置的底部而不是顶部。还要删除this.depthRenderTarger = depthRenderTarger;，除非您将其设置在其他位置，否则不需要。我还将RGB格式添加到depthrendertarget。

关于javascript - THREE.js:结合smaa和sao的后处理，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43413685/