0

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

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

链接到小提琴：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。

问候，托马斯

4

1 回答 1

2

如果有人仍在寻找解决方案，我通过使用 three.js 网站上提供的两个示例成功地将 SSAO 通行证与 MSAA 通行证结合起来。

以下是代码的显示方式：

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

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

于 2016-10-06T09:17:03.037 回答