三.js 和 ssao

Question

我无法将 ssao 与 three.js 一起使用。 我尝试遵循 webgl_postprocessing_dof.html 示例： 这是函数initPostprocessing

function initPostprocessing() {
    postprocessing.scene = new THREE.Scene();

    postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
    postprocessing.camera.position.z = 100;             

    postprocessing.scene.add( postprocessing.camera );

    var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
    postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );  //modifier 500
    postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, height, pars );

    var ssao_shader = new THREE.ShaderMaterial(THREE.ShaderExtras[ "ssao" ]);  //modification

    postprocessing.ssao_uniforms = THREE.UniformsUtils.clone( ssao_shader.uniforms );
    postprocessing.ssao_uniforms[ "tDepth" ].value=1;
    postprocessing.ssao_uniforms[ "tDiffuse" ].value=1;
    postprocessing.ssao_uniforms[ "fogEnabled" ].value=1;
    postprocessing.ssao_uniforms[ "fogFar" ].value=100;
    postprocessing.ssao_uniforms[ "fogNear" ].value=0;
    postprocessing.ssao_uniforms[ "onlyAO" ].value=0;
    postprocessing.ssao_uniforms[ "aoClamp" ].value=0.1;
    postprocessing.ssao_uniforms[ "lumInfluence" ].value=0.1;

    postprocessing.materialSSAO = new THREE.ShaderMaterial( {
        uniforms: postprocessing.ssao_uniforms,
        vertexShader: ssao_shader.vertexShader,
        fragmentShader: ssao_shader.fragmentShader
    });

}

和渲染功能：

function render() {
    renderer.clear();

    // Render depth into texture                    
    scene.overrideMaterial=material_depth;
    renderer.render( scene, camera, postprocessing.rtTextureDepth, true );

    // Render color into texture
    scene.overrideMaterial = null;
    renderer.render( scene, camera, postprocessing.rtTextureColor);

    // 
    postprocessing.materialSSAO.uniforms[ "tDepth" ].texture=postprocessing.rtTextureDepth;
    postprocessing.materialSSAO.uniforms[ "tDiffuse" ].texture=postprocessing.rtTextureColor;
    postprocessing.scene.overrideMaterial = postprocessing.materialSSAO;
    renderer.render( postprocessing.scene, postprocessing.camera );
}

也许我误解了什么。

Answer 1

我不相信您可以像现在这样使用 SSAO 着色器作为材质。材料与几何图形相结合以绘制网格。 SSAO 着色器的目的不是将其输出绘制在多个几何体之上，而是绘制到屏幕对齐的四边形。

通常您会使用效果器类来完成此操作。

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( postprocessing.scene, postprocessing.camera ) );

然后，SSAO 不是创建材质，而是作为着色器通道添加到作曲家并渲染到屏幕上

var effect = new THREE.ShaderPass( THREE.SSAOShader );
effect.uniforms[ 'tDepth' ].value = postprocessing.rtTextureDepth;
effect.uniforms[ 'size' ].value.set( window.innerWidth, window.innerHeight );
effect.uniforms[ 'cameraNear' ].value = postprocessing.camera.near;
effect.uniforms[ 'cameraFar' ].value = postprocessing.camera.far;
effect.renderToScreen = true;
composer.addPass( effect );

最后在渲染函数中，你使用 composer 来渲染而不是渲染器

function render(){
    scene.overrideMaterial = material_depth;
    renderer.render( postprocessing.scene, postprocessing.camera, postprocessing.rtTextureDepth );
    scene.overrideMaterial = null;
    composer.render();
}

这也消除了拥有单独漫反射渲染目标的必要性，因为作曲家会通过渲染通道为您处理。

有关不带插件的 SSAO 的完整示例，请参阅 alterqualia：http://bit.ly/ZIPj2J