SSAO on json object in three.js produces black screen - three.js

Question

i have an project and its working very good at the moment.
BUT i want to add some SSAO to make it go to the next step.
You find the working example here:
http://www.wp11244834.server-he.de/3d-test/3d-testJUN14-JSON.php
I removed the textures to make it more simple.
SO now i tried to add the SSAO code from here:
click
But all i get is a black screen.
I am really stucked on this. Do i have to add the SSAO to the whole screen or to the object itself? Or which part of the code do i have to modify.
BTW.
Here my complete code. The SSAO is commented out.
Thank you in advance for any help or advice or correctet code.
<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();
}
I removed the lights part and such stuff.