Three.js和ssao

Question

我不能在three.js中使用ssao。我尝试遵循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
    });

}

和render函数：

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着色器旨在将其输出绘制到屏幕对齐的四边形上，而不是在多个几何图形的顶部。

通常，您将使用effect composer类来完成此操作。

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 );

最后，在渲染函数中，使用编写器而不是渲染器进行渲染

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

这也消除了有一个单独的漫反射渲染目标的必要性，因为合成器会通过渲染过程为您处理该目标。

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