0

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

}

およびレンダリング関数：

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

多分私は何かを誤解しました。

4

1 に答える 1

4

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

最後に、render 関数で、レンダラーではなくコンポーザを使用してレンダリングします。

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

これにより、コンポーザーがレンダー パスを使用してそれを処理するため、個別の拡散レンダー ターゲットを用意する必要もなくなります。

プラグインを使用しない SSAO の完全な例については、altertedqualia による次の URL を参照してください: http://bit.ly/ZIPj2J

于 2013-03-13T19:54:12.200 に答える