Question

我想将SSAO-Shader（屏幕空间环境遮挡）集成到我的抗锯齿渲染堆栈（Super Sampling Anti-Aliasing）中。 AA是高质量渲染所必需的，我的gpu提供的默认抗锯齿并不足够。现在我已经将SSAO集成到通常的渲染过程中，但我的新目标是结合这两种技术。

为此，我设置了一个小提琴。第一个EffectComposer将场景渲染到一个renderTarget，其分辨率是画布的两倍。由此，我想为SSAO使用depthTarget。最后一步是将渲染图像绘制到具有画布大小的平面，这会导致下采样，因此我们具有抗锯齿效果。

链接到小提琴：SSAO+SSAA

堆栈设置如下：

function initManualAntiAliasing2(width, height, wStepMax, hStepMax) {

    var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };

    // render image with double size
    var rw1 = wStepMax * width;
    var rh1 = hStepMax * height;
    var myRenderTarget1 = new THREE.WebGLRenderTarget( rw1, rh1, parameters );
    var myRenderTargetSSAO = new THREE.WebGLRenderTarget( rw1, rh1, parameters );

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

    var renderSceneSSAO = new THREE.TexturePass(composer.renderTarget2);

    composerSSAO = new THREE.EffectComposer( renderer, myRenderTargetSSAO );
    composerSSAO.addPass(renderSceneSSAO);


    var depthShader = THREE.ShaderLib[ "depthRGBA" ];
    var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );

    depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
    depthMaterial.blending = THREE.NoBlending;

    var parametersDepth = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };

    myRenderTargetDepth = new THREE.WebGLRenderTarget( rw1, rh1, parametersDepth );

    ssaoEffect = new THREE.ShaderPass( THREE.SSAOShader );
    ssaoEffect.uniforms[ 'tDepth' ].value = myRenderTargetDepth;
    ssaoEffect.uniforms[ 'size' ].value.set( rw1, rh1 );
    ssaoEffect.uniforms[ 'cameraNear' ].value = camera.near;
    ssaoEffect.uniforms[ 'cameraFar' ].value = camera.far;
    ssaoEffect.uniforms[ 'aoClamp' ].value = 0.4;
    ssaoEffect.uniforms[ 'lumInfluence' ].value = 0.4;
    ssaoEffect.uniforms[ 'onlyAO' ].value = 1; // debug: when ssao shader works, we will definitely see it with this option
    ssaoEffect.renderToScreen = true;
    composerSSAO.addPass( ssaoEffect );

    var renderScene1 = new THREE.TexturePass(composer.renderTarget2);

    // sample down to screen size
    composer1 = new THREE.EffectComposer(renderer);
    composer1.addPass(renderScene1);

    var renderScene2 = new THREE.TexturePass(composer1.renderTarget2);

    var effectCopy = new THREE.ShaderPass( THREE.CopyShader );
    effectCopy.renderToScreen = true;
    composer1.addPass(effectCopy);
}

渲染功能设置如下：

function renderAA2() {
    renderer.autoClear = false;
    renderer.clear();
    scene.overrideMaterial = myRenderTargetDepth;
    composer.render();
    composerSSAO.render();
    scene.overrideMaterial = null;
    composer1.render();
}

我没有找到类似的情况，所以我的问题是：如何设置整个堆栈，以便使用ssao。

问候，托马斯

Answer 1

如果有人仍在寻找解决方案，我成功将SSAO传递与MSAA传递相结合，使用three.js网站上提供的两个示例。

以下是代码的显示方式：

function initPostprocessing() {
    // Setup render pass
    var renderPass = new THREE.RenderPass( scene, camera );
    effectComposer = new THREE.EffectComposer( renderer );

    // 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, stencilBuffer: false };
    depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );

    // Setup Anti Aliasing pass
    msaaRenderPass = new THREE.ManualMSAARenderPass( scene, camera );
    msaaRenderPass.unbiased = false;
    msaaRenderPass.sampleLevel = 2;

    // Setup Ambient Occlusion 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 = camera.near;
    ssaoPass.uniforms[ 'cameraFar' ].value = camera.far;
    ssaoPass.uniforms[ 'onlyAO' ].value = false;
    ssaoPass.uniforms[ 'aoClamp' ].value = 1.0;
    ssaoPass.uniforms[ 'lumInfluence' ].value = 0.7;

    effectComposer.addPass( renderPass );
    effectComposer.addPass( msaaRenderPass );
    effectComposer.addPass( ssaoPass );
}
function updatePostprocessing() {
    scene.overrideMaterial = depthMaterial;
    renderer.render( scene, camera, depthRenderTarget, true );
    scene.overrideMaterial = null;
    effectComposer.render();
}

此代码中混合的两个示例是：

https://threejs.org/examples/?q=post#webgl_postprocessing_msaa

https://threejs.org/examples/?q=post#webgl_postprocessing_ssao

我希望它可以帮助别人，因为我花了好几个小时来解决这个问题。

带有SSAA的ThreeJS SSAO

1 个答案: