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

THREE.js：结合smaa和ssao后处理

1 个答案: