Added Tilt-Shift (DoF) effect

Gruntfile.js

@@ -25,6 +25,13 @@ module.exports = function(grunt) {
 					'src/shared/vendor/q.js',
 					'src/shared/vendor/three/three.js',
 					'src/shared/vendor/three/ColorConverter.js',
+					'src/shared/vendor/three/shaders/CopyShader.js',
+					'src/shared/vendor/three/shaders/HorizontalTiltShiftShader.js',
+					'src/shared/vendor/three/shaders/VerticalTiltShiftShader.js',
+					'src/shared/vendor/three/postprocessing/EffectComposer.js',
+					'src/shared/vendor/three/postprocessing/RenderPass.js',
+					'src/shared/vendor/three/postprocessing/ShaderPass.js',
+					'src/shared/vendor/three/postprocessing/MaskPass.js',
 					'src/shared/vendor/d3.js',
 					'src/shared/vendor/catiline.js',
 					'src/shared/vendor/dat.gui.js',
@@ -47,6 +54,7 @@ module.exports = function(grunt) {
 					'src/client/Loop.js',
 					'src/client/DOMEvents.js',
 					'src/client/webgl/WebGL.js',
+					'src/client/webgl/TiltShift.js',
 					'src/client/webgl/Scene.js',
 					'src/client/webgl/Camera.js',
 					'src/client/webgl/Renderer.js',

examples/index.html

@@ -37,7 +37,8 @@
     city.init({
       coords: [-0.01924, 51.50358], // Canary Wharf
       domElement: document.getElementById("vizicities-container"),
-      overpassGridUpdate: true
+      overpassGridUpdate: true,
+      tiltShift: { enable: true, blur: 5, focus: 0.5 }
     });
   </script>
 

src/client/City.js

@@ -78,7 +78,8 @@
 			overpass: true,
 			overpassGridUpdate: true,
 			overpassWayIntersect: false,
-			controls: { enable: true }
+			controls: { enable: true },
+			tiltShift: { enable: false, blur: 5, focus: 0.5 }
 		});
 
 		// Output city options
@@ -246,7 +247,7 @@
 
 		this.webgl = new VIZI.WebGL();
 
-		this.webgl.init(this.domElement, this.geo.centerPixels, options.capZoom, options.capOrbit).then(function(result) {
+		this.webgl.init(this.domElement, this.geo.centerPixels, options.capZoom, options.capOrbit, options.tiltShift).then(function(result) {
 			VIZI.Log("Finished intialising WebGL in " + (Date.now() - startTime) + "ms");
 
 			deferred.resolve();

src/client/webgl/TiltShift.js

@@ -0,0 +1,72 @@
+/* globals window, _, VIZI, THREE */
+(function() {
+	"use strict";
+
+	VIZI.TiltShift = function(scene, camera, renderer, options) {
+		VIZI.Log("Inititialising TiltShift");
+
+		_.extend(this, VIZI.Mediator);
+
+		this.enable = options.enable || false;
+		this.blur = options.blur || 5;
+		this.focus = options.focus || 0.5;
+
+		this.scene = scene.scene;
+		this.camera = camera.camera;
+		this.renderer = renderer.renderer;
+
+		this.composer = undefined;
+		this.vblur = undefined;
+		this.hblur = undefined;
+
+		this.createTiltShift();
+		this.render();
+
+		this.publish("addToDat", this, {name: "TiltShift", properties: ["enable", "blur", "focus"]});
+
+		// Listeners 
+		this.subscribe("render", this.render);
+		this.subscribe("resize", this.resize);
+	};
+
+	VIZI.TiltShift.prototype.createTiltShift = function(){
+
+		this.renderer.autoClear = false;
+
+		this.hblur = new THREE.ShaderPass( THREE.HorizontalTiltShiftShader );
+		this.vblur = new THREE.ShaderPass( THREE.VerticalTiltShiftShader );
+
+		this.datChange();
+
+		this.composer = new THREE.EffectComposer( this.renderer );
+
+		this.composer.addPass( new THREE.RenderPass( this.scene, this.camera ) );		
+		this.composer.addPass( this.hblur );
+		this.composer.addPass( this.vblur );
+	};
+
+	VIZI.TiltShift.prototype.render = function() {		
+		this.composer.render( 0.1 );
+	};
+
+	VIZI.TiltShift.prototype.resize = function() {
+		this.datChange();
+	};
+
+	VIZI.TiltShift.prototype.datChange = function() {
+
+		if(this.enable === true){
+			this.vblur.renderToScreen = true;
+
+			this.hblur.uniforms[ 'h' ].value = this.blur / window.innerWidth;
+			this.vblur.uniforms[ 'v' ].value = this.blur / window.innerHeight;
+			this.hblur.uniforms[ 'r' ].value = this.focus;
+			this.vblur.uniforms[ 'r' ].value = this.focus;
+
+		} else {
+			this.vblur.renderToScreen = false;
+		}
+
+	};
+
+}());

src/client/webgl/WebGL.js

@@ -15,11 +15,12 @@
 		this.lights = [];
 	};
 
-	VIZI.WebGL.prototype.init = function(domElement, cameraTargetPos, capZoom, capOrbit) {
+	VIZI.WebGL.prototype.init = function(domElement, cameraTargetPos, capZoom, capOrbit, tiltShift) {
 		this.domContainer = this.createDOMContainer(domElement);
 		this.scene = new VIZI.Scene();
 		this.camera = new VIZI.Camera(cameraTargetPos, capZoom, capOrbit);
 		this.renderer = new VIZI.Renderer(this.scene, this.camera, this.domContainer);
+		this.tiltShift = new VIZI.TiltShift(this.scene, this.camera, this.renderer, tiltShift);
 
 		this.lights = [];
 		this.addLights();

src/shared/vendor/three/postprocessing/EffectComposer.js

@@ -0,0 +1,135 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.EffectComposer = function ( renderer, renderTarget ) {
+
+	this.renderer = renderer;
+
+	if ( renderTarget === undefined ) {
+
+		var width = window.innerWidth || 1;
+		var height = window.innerHeight || 1;
+		var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat, stencilBuffer: false };
+
+		renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
+
+	}
+
+	this.renderTarget1 = renderTarget;
+	this.renderTarget2 = renderTarget.clone();
+
+	this.writeBuffer = this.renderTarget1;
+	this.readBuffer = this.renderTarget2;
+
+	this.passes = [];
+
+	if ( THREE.CopyShader === undefined )
+		console.error( "THREE.EffectComposer relies on THREE.CopyShader" );
+
+	this.copyPass = new THREE.ShaderPass( THREE.CopyShader );
+
+};
+
+THREE.EffectComposer.prototype = {
+
+	swapBuffers: function() {
+
+		var tmp = this.readBuffer;
+		this.readBuffer = this.writeBuffer;
+		this.writeBuffer = tmp;
+
+	},
+
+	addPass: function ( pass ) {
+
+		this.passes.push( pass );
+
+	},
+
+	insertPass: function ( pass, index ) {
+
+		this.passes.splice( index, 0, pass );
+
+	},
+
+	render: function ( delta ) {
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+		var maskActive = false;
+
+		var pass, i, il = this.passes.length;
+
+		for ( i = 0; i < il; i ++ ) {
+
+			pass = this.passes[ i ];
+
+			if ( !pass.enabled ) continue;
+
+			pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );
+
+			if ( pass.needsSwap ) {
+
+				if ( maskActive ) {
+
+					var context = this.renderer.context;
+
+					context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );
+
+					this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );
+
+					context.stencilFunc( context.EQUAL, 1, 0xffffffff );
+
+				}
+
+				this.swapBuffers();
+
+			}
+
+			if ( pass instanceof THREE.MaskPass ) {
+
+				maskActive = true;
+
+			} else if ( pass instanceof THREE.ClearMaskPass ) {
+
+				maskActive = false;
+
+			}
+
+		}
+
+	},
+
+	reset: function ( renderTarget ) {
+
+		if ( renderTarget === undefined ) {
+
+			renderTarget = this.renderTarget1.clone();
+
+			renderTarget.width = window.innerWidth;
+			renderTarget.height = window.innerHeight;
+
+		}
+
+		this.renderTarget1 = renderTarget;
+		this.renderTarget2 = renderTarget.clone();
+
+		this.writeBuffer = this.renderTarget1;
+		this.readBuffer = this.renderTarget2;
+
+	},
+
+	setSize: function ( width, height ) {
+
+		var renderTarget = this.renderTarget1.clone();
+
+		renderTarget.width = width;
+		renderTarget.height = height;
+
+		this.reset( renderTarget );
+
+	}
+
+};

src/shared/vendor/three/postprocessing/MaskPass.js

@@ -0,0 +1,86 @@
+/**
+ * @author alteredq / http://alteredqualia.com/
+ */
+
+THREE.MaskPass = function ( scene, camera ) {
+
+	this.scene = scene;
+	this.camera = camera;
+
+	this.enabled = true;
+	this.clear = true;
+	this.needsSwap = false;
+
+	this.inverse = false;
+
+};
+
+THREE.MaskPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+		var context = renderer.context;
+
+		// don't update color or depth
+
+		context.colorMask( false, false, false, false );
+		context.depthMask( false );
+
+		// set up stencil
+
+		var writeValue, clearValue;
+
+		if ( this.inverse ) {
+
+			writeValue = 0;
+			clearValue = 1;
+
+		} else {
+
+			writeValue = 1;
+			clearValue = 0;
+
+		}
+
+		context.enable( context.STENCIL_TEST );
+		context.stencilOp( context.REPLACE, context.REPLACE, context.REPLACE );
+		context.stencilFunc( context.ALWAYS, writeValue, 0xffffffff );
+		context.clearStencil( clearValue );
+
+		// draw into the stencil buffer
+
+		renderer.render( this.scene, this.camera, readBuffer, this.clear );
+		renderer.render( this.scene, this.camera, writeBuffer, this.clear );
+
+		// re-enable update of color and depth
+
+		context.colorMask( true, true, true, true );
+		context.depthMask( true );
+
+		// only render where stencil is set to 1
+
+		context.stencilFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
+		context.stencilOp( context.KEEP, context.KEEP, context.KEEP );
+
+	}
+
+};
+
+
+THREE.ClearMaskPass = function () {
+
+	this.enabled = true;
+
+};
+
+THREE.ClearMaskPass.prototype = {
+
+	render: function ( renderer, writeBuffer, readBuffer, delta ) {
+
+		var context = renderer.context;
+
+		context.disable( context.STENCIL_TEST );
+
+	}
+
+};