ThreeJS SSAO與SSAA

Question

我想將SSAO-Shader（屏幕空間環境光遮擋）整合到我的抗鋸齒渲染堆棧（超級採樣抗鋸齒）中。 AA是高質量渲染所必需的，我的GPU提供的默認抗鋸齒並不總是足夠的。現在我已經將SSAO整合到通常的渲染過程中，但我的新目標是將兩種技術結合起來。

爲此，我設置了一個小提琴。第一個EffectComposer將場景渲染到具有畫布兩倍分辨率的renderTarget。從這裏，我想使用SSO的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

我希望它可以幫助別人的事業我花了幾個小時來解決這個問題。