spite/gist:9667071

## gistfile1.txt
<!doctype html>
<html lang="en">
	<head>
		<title>Wagner - Minefield!</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<style>
			body {
				color: #ffffff;
				font-family: 'roboto condensed', tahoma;
				font-size:13px;
				text-align: left;
				font-weight: 100;
				background-color: #111;
				background-image: url( escheresque_ste.png );
				margin: 0px;
				overflow: hidden;
			}
			#container canvas{ width: 100%; height: 100%;}
			#fullscreenBtn{ position: absolute; right: 10px; top: 10px; color :white; border: 1px solid white; border-radius: 4px; padding: 10px 20px; background-color: black; text-decoration: none;}
			#fullscreenBtn:hover{ color: black; background-color: white;}
			#about{ position: absolute; left: 10px; bottom: 10px; background-color: #000; padding: 10px;}
			a{ color: #b70000;}
		</style>
		<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
	</head>
	<body>

		<div id="ThreeJS"></div>

<script src="js/three.min.js"></script>
<!--<script src="js/OculusRiftEffect.js"></script>-->
<script src="http://spite.github.io/rstats/rStats.js" ></script>
<script src="Wagner.js"></script>
<script src="Wagner.experimental.js"></script>
<script src="ShaderLoader.js"></script>

<script>

'use strict'

   // standard global variables
    var threecontainer, scene, camera, renderer, controls, stats;

    var clock = new THREE.Clock();

    // particle emmiter (fireworks)
    var emitterSettings;
    var textMesh;
    var particleGroup;
    var fireworksActive;

    // wagner related
    var composer;
    var zoomBlurPass;
    var multiPassBloomPass;
    //var dirtPass;

    // custom global variables
    var mesh;

    init();
    animate();

    // FUNCTIONS
    function init()
    {
        // SCENE
        scene = new THREE.Scene();
        // CAMERA
        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
        var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
        camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
        scene.add(camera);
        camera.position.set(0,150,400);
        camera.lookAt(scene.position);

        // RENDERER
        renderer = new THREE.WebGLRenderer( {antialias:true, alpha : false});

        renderer.shadowMapEnabled = true;
        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
        threecontainer = document.getElementById( 'ThreeJS' );
        threecontainer.appendChild( renderer.domElement );

        composer = new WAGNER.Composer( renderer );
        composer.setSize( window.innerWidth, window.innerHeight ); // or whatever resolution

        zoomBlurPass = new WAGNER.ZoomBlurPass();
        multiPassBloomPass = new WAGNER.MultiPassBloomPass();
        //dirtPass = new WAGNER.DirtPass();


        // CONTROLS
        //controls = new THREE.OrbitControls( camera, renderer.domElement );

        // STATS
        /*stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.bottom = '0px';
        stats.domElement.style.zIndex = 100;
        threecontainer.appendChild( stats.domElement );*/

        // SUNLIGHT
        var sunlight = new THREE.DirectionalLight();
        sunlight.intensity = 1.0;
        sunlight.position.set(100, 100, 100);
        scene.add(sunlight);
        sunlight.castShadow = true;

        // // FLOOR
        // var floorTexture = new THREE.ImageUtils.loadTexture( 'img/checkerboard.jpg' );
        // floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
        // floorTexture.repeat.set( 10, 10 );
        // var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
        // var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
        // var floor = new THREE.Mesh(floorGeometry, floorMaterial);
        // floor.position.y = -0.5;
        // floor.rotation.x = Math.PI / 2;
        // scene.add(floor);

        // SKYBOX
        var imagePrefix = "img/DarkSea-";
        var directions  = ["zneg", "zpos", "ypos", "yneg", "xpos", "xneg"];
        var imageSuffix = ".jpg";
        var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
        var materialArray = [];
        for (var i = 0; i < 6; i++)
            materialArray.push( new THREE.MeshBasicMaterial({
                map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
                side: THREE.BackSide
            }));
        var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
        var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
        scene.add( skyBox );

        ////////////
        // CUSTOM //
        ////////////

        var jsonLoader = new THREE.JSONLoader();

            var sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 10, 10 ), new THREE.MeshNormalMaterial() );
        scene.add( sphere );


    }

    function addTextMesh(){
        var materialFront = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

        var materialSide = new THREE.MeshBasicMaterial({
            color: 0xffaa00,
            wireframe: true
        });

        var materialArray = [ materialFront, materialSide ];
        // add text geometry
        var textGeom = new THREE.TextGeometry( "World Cup 2014", {
            size: 30,
            height: 4,
            curveSegments: 3,

            font: "helvetiker",
            weight: "bold",
            style: "normal",

            bevelThickness: 1,
            bevelSize: 2,
            bevelEnabled: true,

            material: 0,
            extrudeMaterial: 1
        });

        var textMaterial = new THREE.MeshFaceMaterial(materialArray);
        textMesh = new THREE.Mesh( textGeom, textMaterial );
        textGeom.computeBoundingBox();
        var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;

        textMesh.position.set( -0.5 * textWidth, 50, 0 );

        textMesh.rotation.x = -Math.PI / 4;

        scene.add(textMesh);

    }

    function randomVector3(xMin, xMax, yMin, yMax, zMin, zMax)
    {
        return new THREE.Vector3( xMin + (xMax - xMin) * Math.random(),
            yMin + (yMax - yMin) * Math.random(), zMin + (zMax - zMin) * Math.random() );
    }

    function addFireworks () {
        emitterSettings = {
            type: 'sphere',
            positionSpread: new THREE.Vector3(10, 10, 10),
            acceleration: new THREE.Vector3(0, -20, 0),
            radius: 10,
            speed: 40,
            speedSpread: 20,
            sizeStart: 30,
            // sizeStartSpread: 30,
            sizeEnd: 10,
            opacityStart: 1,
            opacityMiddle: 1,
            opacityEnd: 0,
            colorStart: new THREE.Color('white'),
            colorStartSpread: new THREE.Vector3(0.5,0.5,0.5),
            colorMiddle: new THREE.Color('red'),
            colorEnd: new THREE.Color('red'),
            particlesPerSecond: 2000,
            alive: 0, // initially disabled, will be triggered later
            emitterDuration: 0.1
        };

        // Create a particle group to add the emitter
        particleGroup = new ShaderParticleGroup(
        {
            texture: THREE.ImageUtils.loadTexture('img/spark.png'),
            maxAge: 2,
            colorize: 1,
            blending: THREE.AdditiveBlending,
        });

        var colors = ["red", "orange", "yellow", "green", "blue", "violet", "pink", "magenta", "cyan", "steelblue", "seagreen"];
        for (var i = 0; i < colors.length; i++)
        {
            emitterSettings.colorMiddle = new THREE.Color( colors[i] );
            emitterSettings.colorEnd = new THREE.Color( colors[i] );
            particleGroup.addPool( 1, emitterSettings, false );
        }

        // Add the particle group to the scene so it can be drawn.
        scene.add( particleGroup.mesh );

        fireworksActive = true;

    }

    function animate()
    {
        requestAnimationFrame( animate );
        render();
        update();
    }

    function update()
    {

        if(fireworksActive){
            var delta = clock.getDelta();
            particleGroup.tick( delta );

            if ( Math.random() < delta )
                particleGroup.triggerPoolEmitter( 1, randomVector3(-200,200, 50,200, -200,-100) );
        }


    }

    function render()
    {
    	camera.lookAt( scene.position );
        //renderer.render( scene, camera );

        renderer.autoClearColor = true;
        composer.reset();
        composer.render( scene, camera );

        if(multiPassBloomPass.isLoaded()){
            composer.pass( multiPassBloomPass );
        }

        // if(zoomBlurPass.isLoaded){
        //     composer.pass( zoomBlurPass );
        // }

        //if(dirtPass.isLoaded()){
            //composer.pass( dirtPass );
        //}
        composer.toScreen();
    }

</script>

	</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<title>Wagner - Minefield!</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	color: #ffffff;
	font-family: 'roboto condensed', tahoma;
	font-size:13px;
	text-align: left;
	font-weight: 100;
	background-color: #111;
	background-image: url( escheresque_ste.png );
	margin: 0px;
	overflow: hidden;
	}
	#container canvas{ width: 100%; height: 100%;}
	#fullscreenBtn{ position: absolute; right: 10px; top: 10px; color :white; border: 1px solid white; border-radius: 4px; padding: 10px 20px; background-color: black; text-decoration: none;}
	#fullscreenBtn:hover{ color: black; background-color: white;}
	#about{ position: absolute; left: 10px; bottom: 10px; background-color: #000; padding: 10px;}
	a{ color: #b70000;}
	</style>
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
	</head>
	<body>

	<div id="ThreeJS"></div>

	<script src="js/three.min.js"></script>
	<!--<script src="js/OculusRiftEffect.js"></script>-->
	<script src="http://spite.github.io/rstats/rStats.js" ></script>
	<script src="Wagner.js"></script>
	<script src="Wagner.experimental.js"></script>
	<script src="ShaderLoader.js"></script>

	<script>

	'use strict'

	// standard global variables
	var threecontainer, scene, camera, renderer, controls, stats;

	var clock = new THREE.Clock();

	// particle emmiter (fireworks)
	var emitterSettings;
	var textMesh;
	var particleGroup;
	var fireworksActive;

	// wagner related
	var composer;
	var zoomBlurPass;
	var multiPassBloomPass;
	//var dirtPass;

	// custom global variables
	var mesh;

	init();
	animate();

	// FUNCTIONS
	function init()
	{
	// SCENE
	scene = new THREE.Scene();
	// CAMERA
	var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
	var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
	camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
	scene.add(camera);
	camera.position.set(0,150,400);
	camera.lookAt(scene.position);

	// RENDERER
	renderer = new THREE.WebGLRenderer( {antialias:true, alpha : false});

	renderer.shadowMapEnabled = true;
	renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
	threecontainer = document.getElementById( 'ThreeJS' );
	threecontainer.appendChild( renderer.domElement );

	composer = new WAGNER.Composer( renderer );
	composer.setSize( window.innerWidth, window.innerHeight ); // or whatever resolution

	zoomBlurPass = new WAGNER.ZoomBlurPass();
	multiPassBloomPass = new WAGNER.MultiPassBloomPass();
	//dirtPass = new WAGNER.DirtPass();


	// CONTROLS
	//controls = new THREE.OrbitControls( camera, renderer.domElement );

	// STATS
	/*stats = new Stats();
	stats.domElement.style.position = 'absolute';
	stats.domElement.style.bottom = '0px';
	stats.domElement.style.zIndex = 100;
	threecontainer.appendChild( stats.domElement );*/

	// SUNLIGHT
	var sunlight = new THREE.DirectionalLight();
	sunlight.intensity = 1.0;
	sunlight.position.set(100, 100, 100);
	scene.add(sunlight);
	sunlight.castShadow = true;

	// // FLOOR
	// var floorTexture = new THREE.ImageUtils.loadTexture( 'img/checkerboard.jpg' );
	// floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
	// floorTexture.repeat.set( 10, 10 );
	// var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
	// var floorGeometry = new THREE.PlaneGeometry(1000, 1000, 10, 10);
	// var floor = new THREE.Mesh(floorGeometry, floorMaterial);
	// floor.position.y = -0.5;
	// floor.rotation.x = Math.PI / 2;
	// scene.add(floor);

	// SKYBOX
	var imagePrefix = "img/DarkSea-";
	var directions = ["zneg", "zpos", "ypos", "yneg", "xpos", "xneg"];
	var imageSuffix = ".jpg";
	var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
	var materialArray = [];
	for (var i = 0; i < 6; i++)
	materialArray.push( new THREE.MeshBasicMaterial({
	map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
	side: THREE.BackSide
	}));
	var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
	var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
	scene.add( skyBox );

	////////////
	// CUSTOM //
	////////////

	var jsonLoader = new THREE.JSONLoader();

	var sphere = new THREE.Mesh( new THREE.SphereGeometry( 100, 10, 10 ), new THREE.MeshNormalMaterial() );
	scene.add( sphere );


	}

	function addTextMesh(){
	var materialFront = new THREE.MeshBasicMaterial( { color: 0xff0000 } );

	var materialSide = new THREE.MeshBasicMaterial({
	color: 0xffaa00,
	wireframe: true
	});

	var materialArray = [ materialFront, materialSide ];
	// add text geometry
	var textGeom = new THREE.TextGeometry( "World Cup 2014", {
	size: 30,
	height: 4,
	curveSegments: 3,

	font: "helvetiker",
	weight: "bold",
	style: "normal",

	bevelThickness: 1,
	bevelSize: 2,
	bevelEnabled: true,

	material: 0,
	extrudeMaterial: 1
	});

	var textMaterial = new THREE.MeshFaceMaterial(materialArray);
	textMesh = new THREE.Mesh( textGeom, textMaterial );
	textGeom.computeBoundingBox();
	var textWidth = textGeom.boundingBox.max.x - textGeom.boundingBox.min.x;

	textMesh.position.set( -0.5 * textWidth, 50, 0 );

	textMesh.rotation.x = -Math.PI / 4;

	scene.add(textMesh);

	}

	function randomVector3(xMin, xMax, yMin, yMax, zMin, zMax)
	{
	return new THREE.Vector3( xMin + (xMax - xMin) * Math.random(),
	yMin + (yMax - yMin) * Math.random(), zMin + (zMax - zMin) * Math.random() );
	}

	function addFireworks () {
	emitterSettings = {
	type: 'sphere',
	positionSpread: new THREE.Vector3(10, 10, 10),
	acceleration: new THREE.Vector3(0, -20, 0),
	radius: 10,
	speed: 40,
	speedSpread: 20,
	sizeStart: 30,
	// sizeStartSpread: 30,
	sizeEnd: 10,
	opacityStart: 1,
	opacityMiddle: 1,
	opacityEnd: 0,
	colorStart: new THREE.Color('white'),
	colorStartSpread: new THREE.Vector3(0.5,0.5,0.5),
	colorMiddle: new THREE.Color('red'),
	colorEnd: new THREE.Color('red'),
	particlesPerSecond: 2000,
	alive: 0, // initially disabled, will be triggered later
	emitterDuration: 0.1
	};

	// Create a particle group to add the emitter
	particleGroup = new ShaderParticleGroup(
	{
	texture: THREE.ImageUtils.loadTexture('img/spark.png'),
	maxAge: 2,
	colorize: 1,
	blending: THREE.AdditiveBlending,
	});

	var colors = ["red", "orange", "yellow", "green", "blue", "violet", "pink", "magenta", "cyan", "steelblue", "seagreen"];
	for (var i = 0; i < colors.length; i++)
	{
	emitterSettings.colorMiddle = new THREE.Color( colors[i] );
	emitterSettings.colorEnd = new THREE.Color( colors[i] );
	particleGroup.addPool( 1, emitterSettings, false );
	}

	// Add the particle group to the scene so it can be drawn.
	scene.add( particleGroup.mesh );

	fireworksActive = true;

	}

	function animate()
	{
	requestAnimationFrame( animate );
	render();
	update();
	}

	function update()
	{

	if(fireworksActive){
	var delta = clock.getDelta();
	particleGroup.tick( delta );

	if ( Math.random() < delta )
	particleGroup.triggerPoolEmitter( 1, randomVector3(-200,200, 50,200, -200,-100) );
	}


	}

	function render()
	{
	camera.lookAt( scene.position );
	//renderer.render( scene, camera );

	renderer.autoClearColor = true;
	composer.reset();
	composer.render( scene, camera );

	if(multiPassBloomPass.isLoaded()){
	composer.pass( multiPassBloomPass );
	}

	// if(zoomBlurPass.isLoaded){
	// composer.pass( zoomBlurPass );
	// }

	//if(dirtPass.isLoaded()){
	//composer.pass( dirtPass );
	//}
	composer.toScreen();
	}

	</script>

	</body>
	</html>