使用 SSAO 着色器在场景中出现奇怪的正方形答案

【问题标题】：Weird square on scene with SSAO shader使用 SSAO 着色器在场景中出现奇怪的正方形
【发布时间】：2013-11-11 12:25:29
【问题描述】：

我正在运行以下代码（jsfiddle：http://jsfiddle.net/sx9p7/）：

var scene, camera, renderer, composer;
var l1, l2, hemiLight;

var effectSSAO;

init();
animate();

function init() {
    renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );

    renderer.shadowMapEnabled = true;

    renderer.setClearColor( 0xd8e7ff );
    renderer.setSize( 800,600);
    document.body.appendChild( renderer.domElement );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 40, 800 / 600, 1, 10000 );
    camera.position.set(-200,100,-60);
    camera.lookAt(new THREE.Vector3(0,0,0));

    var container = document.createElement( 'div' );
    document.body.appendChild( container );

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

    effectSSAO = new THREE.ShaderPass( THREE.SSAOShader );
    effectSSAO.renderToScreen = true;
    composer.addPass( effectSSAO ); 

    hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.4 );
    hemiLight.position.set( 0, 300, 0 );
    scene.add( hemiLight );

    l1 = new THREE.DirectionalLight( 0xffffff, 0.3);
    l1.position.set( 100, 100, 0 );
    l1.castShadow = true;
    scene.add(l1);

    l2 = new THREE.DirectionalLight( 0xffffff, 0.3);
    l2.position.set( -100, 100, 0 );
    l2.castShadow = true;
    scene.add(l2);

    var plane = new THREE.Mesh( new THREE.PlaneGeometry( 200, 200), new THREE.MeshLambertMaterial({ }) );
    plane.receiveShadow = true;
    plane.castShadow = true;

    plane.rotation.x = - 90 * Math.PI / 180;
    plane.position.set(0,0,0);
    scene.add( plane );


    var cube = new THREE.Mesh(new THREE.CubeGeometry(50, 50, 50), new THREE.MeshPhongMaterial( { color: 0xaaaaaa, ambient: 0xbbbbbb, specular: 0xcccccc, perPixel: true,  vertexColors: THREE.FaceColors } ));
    cube.receiveShadow = true;
    cube.castShadow = true;
    scene.add(cube);
}

function animate() {
    requestAnimationFrame( animate );
    composer.render();
}

我对 SSAO 着色器有疑问。我确实尝试了许多参数、代码、示例，但我仍然无法删除场景中间的那个正方形（有时看起来像正确的 SSAO 效果但位置错误？？？）

如果我要移除一个定向光片段，它就消失了 - 但仍然没有 SSAO 效果，阴影的分辨率仍然非常低。

【问题讨论】：

标签： three.js ssao

【解决方案1】：

好吧，无论如何，2个方向灯很奇怪，暂时将其保留为1。

关于 SSAO，请参阅着色器及其众多参数。您需要根据您的场景进行调整。示例：

effectSSAO .uniforms[ 'tDepth' ].value = depthTarget;
effectSSAO .uniforms[ 'size' ].value.set( width, height );
effectSSAO .uniforms[ 'cameraNear' ].value = 0.1;
effectSSAO .uniforms[ 'cameraFar' ].value = 1000;

正如您在上面看到的，您还需要的不仅仅是一些参数调整。 Three.SSAO 着色器期望之前渲染的深度通道能够正常工作。有关更多帮助，请参见此处：

How to use the three.js SSAO shader?

【讨论】：