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

终于在渲染功能，您使用的作曲家来呈现，而不是到渲染

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