三个j.js中的json对象上的SSAO生成黑屏

Question

我有一个项目，目前它的工作非常好。 但我想添加一些SSAO以使其进入下一步。

您可以在此处找到工作示例： http://www.wp11244834.server-he.de/3d-test/3d-testJUN14-JSON.php

我删除了纹理以使其更简单。 所以我现在尝试从这里添加SSAO代码： click

但我得到的只是一个黑屏。

我真的很喜欢这个。我是否必须将SSAO添加到整个屏幕或对象本身？或者我必须修改代码的哪一部分。

顺便说一句。 这是我的完整代码。 SSAO已被注释掉。

提前感谢您提供任何帮助或建议或更正代码。

<div id="container" style="position: absolute; left: 0; z-index: 100;background: white; color: black;"></div>

<script>//hauptscript three.js</script>
<script src="build/three.js"></script>

<script>//normaler .obj loader</script>
<script src="examples/js/loaders/OBJLoader.js"></script>

<script>//für .obj und mtl</script>
<script src="examples/js/loaders/MTLLoader.js"></script>
<script src="examples/js/loaders/OBJMTLLoader.js"></script>

<script>//utf8 loader</script>
<script src="examples/js/loaders/UTF8Loader.js"></script>
<script src="examples/js/loaders/MTLLoader.js"></script>

<script>//JSON loader</script>
<script src="src/loaders/JSONLoader.js"></script>
<script src="src/loaders/ObjectLoader.js"></script>


<script>//CONTROLS</script>
<script src="examples/js/controls/OrbitControls.js"></script>


<script>/* Brwoserkompatibilität und Stats Container */</script>
<script src="examples/js/Detector.js"></script>
<script src="examples/js/libs/stats.min.js"></script>


<script>/* Shader */</script>
<script src="examples/js/shaders/BleachBypassShader.js"></script>
<script src="examples/js/shaders/ColorCorrectionShader.js"></script>
<script src="examples/js/shaders/CopyShader.js"></script>
<script src="examples/js/shaders/SSAOShader.js"></script>
<script src="examples/js/shaders/FXAAShader.js"></script>

<script src="examples/js/postprocessing/EffectComposer.js"></script>
<script src="examples/js/postprocessing/RenderPass.js"></script>
<script src="examples/js/postprocessing/MaskPass.js"></script>
<script src="examples/js/postprocessing/ShaderPass.js"></script>



    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    // workaround for chrome bug: http://code.google.com/p/chromium/issues/detail?id=35980#c12
    if ( window.innerWidth === 0 ) { window.innerWidth = parent.innerWidth; window.innerHeight = parent.innerHeight; }


    var statsEnabled = true;

    var container, stats, loader, kontrolle;

    var camera, controls, scene, renderer;

    var mesh, zmesh, lightMesh, geometry;
    var mesh1;

    var directionalLight, pointLight, ambientLight;

    var mouseX = 0;
    var mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;




    // Boden / Gras Variablen 
    // Ausmaße der "Hügel"
    var worldWidth = 5, worldDepth = 5,
    worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;



    //SSAO Zeug (Ambient Occlusion)
    var depthScale = 0.5;
    var depthPassPlugin, depthTarget;
    var ssaoEffect;
    var depthMaterial, depthTarget, composer;


    init();
    animate();


    function init() {

        // wichtige Zeile! nicht löschen, nicht verschieben
        container = document.getElementById( 'container' );

        // 1: kamera
        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 10000 );
camera.position.x = 0; // Kamerawinkel links/rechts
camera.position.y = 0; // Kamerawinkel hoch/runter
camera.position.z = 400; //Entfernung = rauszoomen

camera.fov = Math.PI;

        // 2: controls setzen
        // für orbit controls
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );       


    /* limitierungen für orbit controls */
    // Zoom in / zoom out
    controls.minDistance = 100;
    controls.maxDistance = 410;


    //Don't let to go below the ground = hoch / runter grenze
    controls.minPolarAngle = -Math.PI/2 +0.1; // hinten
    controls.maxPolarAngle = Math.PI/2 - 0.1; // vorn

    controls.autoRotate = false; // dann dreht es sich automatisch
    controls.noPan = true; // verhindert nach links und rechts schieben des bildes mit der tatatur   

        // 3: scene
        scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2( 0xEEEEEE, 0.0015 ); // grauer nebel


        // 4: objekt laden      
// Wohnung per JSONLoader
var modelLoader = new THREE.JSONLoader().
load( 'obj/JUN14/wohnung/test4.js', function ( geometry, materials ) { 
    var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) ); 
    mesh.scale.set( 1, 1, 1 ); 

    // das objekt drehen, da es "falsch" geliefert wird
    mesh.rotation.x = -Math.PI/2;
    // dadurch wird y und z achse vertauscht -> es müssen die werte angepasst werden
    mesh.position.y = 2; //hoehe vom Boden
    mesh.position.z = 0; // 

    mesh.castShadow = true;

    scene.add( mesh ); 

}, '/3d-test/obj/JUN14/wohnung/maps/' );
        // 5: Licht       
        light = new THREE.AmbientLight( 0x999999 );
scene.add( light );               



// LIGHTS /* soll himmel simulieren */
//... removed for stackoverflow


// Floor -> einfacher grüner fussboden
//... removed for stackoverflow





        // 7: Renderer

        renderer = new THREE.WebGLRenderer({ antialias: true }); // mit antialiasing
        renderer.setClearColor( 0xEEEEEE, 1 ); // weiss
        renderer.setSize( window.innerWidth, window.innerHeight );

        container.innerHTML = "";
        container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

        //

        renderer.gammaInput = true;
        renderer.gammaOutput = true;
        renderer.physicallyBasedShading = true;

        //

        renderer.shadowMapEnabled = true;

        renderer.shadowMapCascade = true;
        renderer.shadowMapType = THREE.PCFSoftShadowMap;
        //renderer.shadowMapDebug = true;

        renderer.shadowMapSlopeDepthBias = true;
        renderer.shadowMapCullFace = THREE.CullFaceBack;



        // 8: Stats-container 
        stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
        scene.add(new THREE.AxisHelper(100));


        // 8.5: Composer für AO     
        // depth

//var depthShader = THREE.ShaderLib[ "depthRGBA" ];
//var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );

//depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );

// postprocessing

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

//depthTarget = new THREE.WebGLRenderTarget( 512, 512, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat } );


// Erstelle einen neuen ShaderPass:
//--effectSSAO = new THREE.ShaderPass( THREE.SSAOShader );

// definiere dessen Groesse
//--effectSSAO.uniforms[ 'size' ].value.set( 512, 512 );
//--effectSSAO.uniforms[ 'cameraNear' ].value = camera.near;
//--effectSSAO.uniforms[ 'cameraFar' ].value = camera.far;

// setze den Schatten auf 0 -> erzeugt schwarzen Bildschirm
//-- effectSSAO.uniforms[ 'fogEnabled' ].value = 0;

// was machen diese sachen? :
//--effectSSAO.uniforms[ 'aoClamp' ].value = 0.5;
//--effectSSAO.uniforms[ 'lumInfluence' ].value = 0.59;
//effectSSAO.uniforms[ 'onlyAO' ].value = 1;

//--effectSSAO.material.defines = { "FLOAT_DEPTH": true };

//effectSSAO.renderToScreen = true;
//composer.addPass( effectSSAO );

// wende den Effekt an. Erzeugt auch kurz Schwarzen Bildschirm und haengt sich dann auf
//-- renderer.addEffect( effectSSAO, "tDepth" );

        // 9: die eventListener für die Kontrolle des objektes

        window.addEventListener( 'resize', onWindowResize, false );



    } // Ende init() Funktion



    /* HAUPT-Funktionen */
    function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    //camera.updateProjectionMatrix();

    // diese funktion verzerrt das objekt: 
    renderer.setSize( window.innerWidth, window.innerHeight );
    // --- noch ändern! ||


    controls.handleResize();

    render();

}




function animate() {

        requestAnimationFrame( animate );
        var timer = performance.now();
        controls.update();
        render(); // laed das objekt sofort!

}

function render() {


        //renderer.autoClear = false;
        //depthPassPlugin.enabled = true;
        //depthPassPlugin.enabled = false;
        //composer.render();


        renderer.render( scene, camera );
        //renderer.render( scene, camera, depthTarget );
        stats.update();

}

我删除了灯光部分和这些东西。