[英]ThreeJS SSAO with SSAA
我想將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。
托馬斯,問候
如果仍然有人在尋找解決方案,那么我可以使用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
我希望它可以幫助其他人,因為我花了幾個小時才能解決這個問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.