index.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="container"></div>
		<a href="#" id="fullscreenBtn" >Go fullscreen</a>
		<div id="about" >This is the minefield playground for Wagner, a new composer for three.js.<br/>
		Check out the repo here <a href="https://github.com/spite/Wagner" >https://github.com/spite/Wagner</a> and contribute,<br/>
		open an issue, suggest your ideas. <b>This is extremely work in progress!</b><br/>
		Made with and for <a href="http://threejs.org/" >three.js</a> | Stats by <a href="http://spite.github.io/rstats/" >rStats</a> | <a href="http://www.twitter.com/thespite">@thespite</a> | <a href="http://www.clicktorelease.com">clicktorelease.com</a></div>

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

<script>

'use strict'

var composer;
/*
var rS = new rStats( {
	CSSPath: 'http://spite.github.io/rstats/',
	values: {
		frame: { caption: 'Total frame time (ms)', over: 16 },
        raf: { caption: 'Time since last rAF (ms)' },
        fps: { caption: 'Framerate (FPS)', below: 30 }
	},
	groups: [
		{ caption: 'Frame', values: [ 'frame', 'raf', 'fps' ] }
	]
} );*/

var links = document.querySelectorAll( 'a[rel=external]' );
for( var j = 0; j < links.length; j++ ) {
    var a = links[ j ];
    a.addEventListener( 'click', function( e ) {
        window.open( this.href, '_blank' );
        e.preventDefault();
    }, false );
}

var container, renderer, scene, camera, mesh, torus, material, fov = 70;
var model, quad, oculusEffect;
var light;
var controls;

var composerSim;

var invertPass, boxBlurPass, fullBoxBlurPass, zoomBlurPass, multiPassBloomPass, denoisePass, 
	sepiaPass, noisePass, vignettePass, vignette2Pass, CGAPass, sobelEdgeDetectionPass,
	dirtPass, blendPass, guidedFullBoxBlurPass, SSAOPass, pixelatePass, rgbSplitPass,
	artPass, chromaticAberrationPass, barrelBlurPass, oldVideoPass, dotScreenPass,
	circularBlur, poissonDiscBlur, cannyEdgeDetectionPass, freiChenEdgeDetectionPass,
	toonPass, fxaaPass, highPassPass, grayscalePass, asciiPass, guidedBoxPass,
	ledPass, halftonePass, halftoneCMYKPass;

var draganPass, crossHatchingPass, ssaoPass;

var particles, particleMaterial;

var depthTexture, normalTexture, colorTexture, uvTexture, scaledTexture, glowTexture;
var depthMaterial;// = new THREE.MeshDepthMaterial();
var modelMaterial = new THREE.MeshPhongMaterial( { 
	map: THREE.ImageUtils.loadTexture( 'assets/textures/1324.jpg' ), 
	normalMap: THREE.ImageUtils.loadTexture( 'assets/textures/1324-normal.jpg' ),
	normalScale: new THREE.Vector2( .8, -.8 ),
	shininess: 100
} );
var glowMaterial = new THREE.MeshBasicMaterial( {
	emissive: 0xffffff,
	map: THREE.ImageUtils.loadTexture( 'assets/textures/1324-glow.jpg' )
} );
var uvMaterial = new THREE.MeshBasicMaterial();
/*modelMaterial = new THREE.MeshPhongMaterial( {
	color: new THREE.Color( 0.1, 0.04, 0.02 ),
	depthTest: true,
	depthWrite: false,
	transparent: true,
	blending: THREE.AdditiveBlending
} );*/
//modelMaterial = new THREE.MeshNormalMaterial();

var sL = new ShaderLoader()
sL.add( 'depth-vs', 'vertex-shaders/packed-depth-vs.glsl' );
sL.add( 'depth-fs', 'fragment-shaders/packed-depth-fs.glsl' );
sL.load();
sL.onLoaded( function() {
	depthMaterial = new THREE.ShaderMaterial( {
		uniforms: {
			mNear: { type: 'f', value: 1 },
			mFar: { type: 'f', value: 1000 }
		},
		vertexShader: this.get( 'depth-vs' ),
		fragmentShader: this.get( 'depth-fs' ),
		shading: THREE.SmoothShading
	} );
} );

/*var sL = new ShaderLoader()
sL.add( 'uv-vs', 'vertex-shaders/packed-depth-vs.glsl' );
sL.add( 'uv-fs', 'fragment-shaders/uv-material-fs.glsl' );
sL.load();
sL.onLoaded( function() {
	uvMaterial = new THREE.ShaderMaterial( {
		uniforms: {
			mNear: { type: 'f', value: 1 },
			mFar: { type: 'f', value: 10000 },
			repeat: { type: 'v2', value: new THREE.Vector2( 1, 1 ) }
		},
		vertexShader: this.get( 'uv-vs' ),
		fragmentShader: this.get( 'uv-fs' ),
		shading: THREE.SmoothShading
	} );
} );*/

var c = document.body;
document.getElementById( 'fullscreenBtn' ).addEventListener( 'click', function( e ) {
	c.onwebkitfullscreenchange = function(e) {
		c.onwebkitfullscreenchange = function() {
		};
	};
	c.onmozfullscreenchange = function(e) {
		c.onmozfullscreenchange = function() {
		};
	};
	if( c.webkitRequestFullScreen ) c.webkitRequestFullScreen();
	if( c.mozRequestFullScreen ) c.mozRequestFullScreen();
	e.preventDefault();
}, false );

window.addEventListener( 'load', function() {

	init();
	
} );

function init() {

	container = document.getElementById( 'container' );
	
	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 10000 );
	camera.position.z = 1000;
	scene.add( camera );

	controls = new THREE.OrbitControls( camera );
	controls.dampening = .2;

	renderer = new THREE.WebGLRenderer( { antialias: false, alpha: false } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setPixelRatio( window.devicePixelRatio );

    //oculusEffect = new THREE.OculusRiftEffect(renderer, {worldScale: 100});
    //oculusEffect.setSize( window.innerWidth, window.innerHeight );

	container.appendChild( renderer.domElement );

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

	var useTeapot = false;

	if( useTeapot ) {
		
		var loader = new THREE.JSONLoader();
		loader.load( 'assets/models/LeePerrySmith.js', function( data ) { 
			data.computeCentroids();
			data.computeFaceNormals();
			data.computeVertexNormals();
			THREE.GeometryUtils.center( data );
			model = new THREE.Mesh( 
				data,
				modelMaterial
			);
			var scale = 100;
			model.scale.set ( scale, scale, scale );
			model.material.map.wrapS = model.material.map.wrapT = THREE.RepeatWrapping;
			model.material.map.repeat.set( 4, 400 );
			scene.add( model );
		} );

	} else {

		/*model = new THREE.Mesh( 
			new THREE.TorusKnotGeometry( 300, 100, 200, 50, 1, 3 ), 
			modelMaterial
		);
		model.material.map.wrapS = model.material.map.wrapT = THREE.RepeatWrapping;
		model.material.map.repeat.set( 8, 2 );
		model.scale.set( 4, 4,4 );*/

		var s = new THREE.CubeGeometry( 10, 10, 10, 1, 1 ,1 );
		//var s = new THREE.IcosahedronGeometry( 5, 3 );
		var g = new THREE.Geometry();
		var r = 2000;
		for( var j = 0; j < 100 ; j++ ) {
			var m = new THREE.Mesh( s, modelMaterial );
			m.rotation.set( Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI, Math.random() * 2 * Math.PI );
			m.position.set( ( .5 - Math.random() ) * r, ( .5 - Math.random() ) * r, ( .5 - Math.random() ) * r );
			var scale = 10 + Math.random() * 20;
			m.scale.set( scale, scale, scale );
			THREE.GeometryUtils.merge( g, m );
		}
		model = new THREE.Mesh( g, modelMaterial );
		model.castShadow = true;
		model.receiveShadow = true;

		scene.add( model );

	}

	var SHADOW_MAP_WIDTH = 2048, SHADOW_MAP_HEIGHT = 1024;

	var ambient = new THREE.AmbientLight( 0x444444 );
	scene.add( ambient );

	light = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI / 2, 1 );
	light.position.set( 0, 1500, 1000 );
	light.target.position.set( 0, 0, 0 );

	light.castShadow = true;

	light.shadowCameraNear = 1200;
	light.shadowCameraFar = 2500;
	light.shadowCameraFov = 90;

	//light.shadowCameraVisible = true;

	light.shadowBias = 0.0001;
	light.shadowDarkness = 0.5;

	light.shadowMapWidth = SHADOW_MAP_WIDTH;
	light.shadowMapHeight = SHADOW_MAP_HEIGHT;

	scene.add( light );

	renderer.shadowMapEnabled = true;
	renderer.shadowMapType = THREE.PCFShadowMap;

	composer = new WAGNER.Composer( renderer, { useRGBA: false } );

	invertPass = new WAGNER.InvertPass();
	sepiaPass = new WAGNER.SepiaPass();
	noisePass = new WAGNER.NoisePass();
	boxBlurPass = new WAGNER.BoxBlurPass();
	fullBoxBlurPass = new WAGNER.FullBoxBlurPass();
	zoomBlurPass = new WAGNER.ZoomBlurPass();
	multiPassBloomPass = new WAGNER.MultiPassBloomPass();
	denoisePass = new WAGNER.DenoisePass();
	noisePass = new WAGNER.NoisePass();
	vignettePass = new WAGNER.VignettePass();
	vignette2Pass = new WAGNER.Vignette2Pass();
	CGAPass = new WAGNER.CGAPass();
	sobelEdgeDetectionPass = new WAGNER.SobelEdgeDetectionPass();
	dirtPass = new WAGNER.DirtPass();
	blendPass = new WAGNER.BlendPass();
	guidedBoxPass = new WAGNER.GuidedBoxBlurPass();
	guidedFullBoxBlurPass = new WAGNER.GuidedFullBoxBlurPass();
	pixelatePass = new WAGNER.PixelatePass();
	rgbSplitPass = new WAGNER.RGBSplitPass();
	chromaticAberrationPass = new WAGNER.ChromaticAberrationPass();
	barrelBlurPass = new WAGNER.BarrelBlurPass();
	oldVideoPass = new WAGNER.OldVideoPass();
	dotScreenPass = new WAGNER.DotScreenPass();
	circularBlur = new WAGNER.CircularBlurPass();
	poissonDiscBlur = new WAGNER.PoissonDiscBlurPass();
	freiChenEdgeDetectionPass = new WAGNER.FreiChenEdgeDetectionPass();
	toonPass = new WAGNER.ToonPass();
	fxaaPass = new WAGNER.FXAAPass();
	highPassPass = new WAGNER.HighPassPass();
	grayscalePass = new WAGNER.GrayscalePass();
	asciiPass = new WAGNER.ASCIIPass();
	ledPass = new WAGNER.LEDPass();
	halftonePass = new WAGNER.HalftonePass();
	//halftoneCMYKPass = new WAGNER.HalftoneCMYKPass();
	ssaoPass = new WAGNER.SSAOPass();
	
	multiPassBloomPass.params.blurAmount = 2;
	guidedFullBoxBlurPass.params.amount = 20;
	guidedFullBoxBlurPass.params.invertBiasMap = true;

	//ssaoPass = new WAGNER.MultiPassSSAOPass();//SSAOPass();
	//crossHatchingPass = new WAGNER.CrossHatchingPass();
	//draganPass = new WAGNER.DraganPass();
	//artPass = new WAGNER.ArtPass();
	
	/*var w = 2048, h = 2048;
	composerSim = new WAGNER.SimComposer( renderer, { width: w, height: h, shader: 'particles-snow-fs.glsl' } );
	var geometry = new THREE.Geometry();

	for ( var i = 0, l = w * h; i < l; i ++ ) {

		var vertex = new THREE.Vector3();
		vertex.x = 1000 * ( .5 - Math.random() );
		vertex.y = 1000 * ( .5 - Math.random() );
		vertex.z = 1000 * ( .5 - Math.random() );
		geometry.vertices.push( vertex );

	}

	particleMaterial = new THREE.MeshBasicMaterial();

	particles = new THREE.ParticleSystem( geometry, particleMaterial );
	scene.add( particles );

	var sL = new ShaderLoader()
	sL.add( 'particles-vs', 'particles-vs.glsl' );
	sL.add( 'particles-fs', 'particles-fs.glsl' );
	sL.load();
	sL.onLoaded( function() {
		particleMaterial = new THREE.ShaderMaterial( {
			uniforms: {
				map: { type: "t", value: composerSim.composer.output },
				width: { type: "f", value: w },
				height: { type: "f", value: h },

				pointColor: { type: "v4", value: new THREE.Vector4( 0.25, 0.50, 1.0, 0.25 ) },
				pointSize: { type: "f", value: 8 },
				flakeMap: { type: "t", value: THREE.ImageUtils.loadTexture( 'snowflake.png' ) },
				influence: { type: "f", value: 0 },
				time: { type: 'f', value: 0 }
			},
			vertexShader: this.get( 'particles-vs' ),
			fragmentShader: this.get( 'particles-fs' ),
			shading: THREE.SmoothShading,
			blending: THREE.NormalBlending,
			transparent: true,
			depthWrite: false,
			depthTest: false
		} );
		particles.material = particleMaterial;
	} );

	mesh = new THREE.Mesh(
		new THREE.CubeGeometry( 100, 100, 100 ),
		new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture( 'assets/snapshot.jpg' ) } ) 
	);
	scene.add( mesh );*/

	onWindowResize();

	render();
	
}

var tTexture;

function onWindowResize() {

	var s = 1,
		w = window.innerWidth,
		h = window.innerHeight;

	renderer.setSize( s * w, s * h );
	camera.projectionMatrix.makePerspective( fov, w / h, camera.near, camera.far );
	composer.setSize( w, h );
	depthTexture = WAGNER.Pass.prototype.getOfflineTexture( w, h, true );
	/*normalTexture = WAGNER.Pass.prototype.getOfflineTexture( w, h );
	colorTexture = WAGNER.Pass.prototype.getOfflineTexture( w, h, true );
	uvTexture = WAGNER.Pass.prototype.getOfflineTexture( w, h, true );
	scaledTexture = WAGNER.Pass.prototype.getOfflineTexture( 512, 512, true )
	glowTexture = WAGNER.Pass.prototype.getOfflineTexture( w, h, false );

	tTexture = WAGNER.Pass.prototype.getOfflineTexture( 100, 100, false );*/
}

var startTime = Date.now();
var copy = true;

function render() {
	
	var t = .001 * Date.now();

	/*rS( 'frame' ).start();
    rS( 'rAF' ).tick();
    rS( 'FPS' ).frame();*/

	//light.position.set( 0, 3000 * Math.cos( t ), 2000 * Math.sin( t ) );

    if( model ) {
	    /*model.rotation.x += .001;
	    model.rotation.y += .001;
	    model.rotation.z += .005;*/
	
		renderer.autoClearColor = true;
		composer.reset();

		model.material = depthMaterial;
		composer.render( scene, camera, null, depthTexture );

		model.material = modelMaterial;
		composer.render( scene, camera );

		guidedFullBoxBlurPass.params.tBias = depthTexture;
		
		composer.pass( multiPassBloomPass );
		composer.pass( guidedFullBoxBlurPass );
		composer.pass( dirtPass );

		composer.pass( vignette2Pass );
		composer.pass( fxaaPass );

		composer.toScreen();

	}

    //rS( 'frame' ).end();
    //rS().update();

	requestAnimationFrame( render );
	startTime = t;
	
}

</script>
		
	</body>
</html>