Added basic render of floor and lights

Gruntfile.js

@@ -19,7 +19,8 @@ module.exports = function(grunt) {
 				// src: ['src/shared/vendor/underscore.js', 'src/shared/vendor/three.js', 'src/client/*'],
 				src: [
 					'src/shared/vendor/underscore.js',
-					'src/shared/vendor/three.js',
+					'src/shared/vendor/three/three.js',
+					'src/shared/vendor/three/ColorConverter.js',
 					'src/client/Vizi.js',
 					'src/client/Log.js',
 					'src/client/Mediator.js',
@@ -27,7 +28,8 @@ module.exports = function(grunt) {
 					'src/client/Loop.js',
 					'src/client/webgl/WebGL.js',
 					'src/client/webgl/Scene.js',
-					'src/client/webgl/Camera.js'
+					'src/client/webgl/Camera.js',
+					'src/client/webgl/Renderer.js'
 				],
 				dest: 'build/vizi.js'
 			}

src/client/City.js

@@ -1,11 +1,34 @@
-/* globals window, _, VIZI */
+/* globals window, _, VIZI, THREE */
 (function() {
 	"use strict";
 
 	VIZI.City = function() {
 		VIZI.Log("Inititialising city");
 
-		this.loop = new VIZI.Loop();
+		_.extend(this, VIZI.Mediator);
+		
 		this.webgl = new VIZI.WebGL();
+		this.loop = new VIZI.Loop();
+
+		// this.floor = new VIZI.Floor();
+		this.createFloor();
+	};
+
+	VIZI.City.prototype.createFloor = function() {
+		var floorWireGeom = new THREE.PlaneGeometry(5000, 5000, 200, 200);
+
+		var floorWireMat = new THREE.MeshBasicMaterial({color: 0xeeeeee, wireframe: true});
+		var floorWire = new THREE.Mesh(floorWireGeom, floorWireMat);
+		floorWire.position.y = -0.3;
+		floorWire.rotation.x = - 90 * Math.PI / 180;
+		this.publish("addToScene", floorWire);
+
+		var floorGeom = new THREE.PlaneGeometry(60000, 60000, 4, 4);
+
+		var floorMat = new THREE.MeshBasicMaterial({color: 0xffffff});
+		var floor = new THREE.Mesh(floorGeom, floorMat);
+		floor.position.y = -0.4;
+		floor.rotation.x = - 90 * Math.PI / 180;
+		this.publish("addToScene", floor);
 	};
 }());

src/client/Loop.js

@@ -8,7 +8,7 @@
 		_.extend(this, VIZI.Mediator);
 
 		this.stopLoop = false;
-		// this.start();
+		this.start();
 	};
 
 	VIZI.Loop.prototype.start = function() {
@@ -23,7 +23,8 @@
 	};
 
 	VIZI.Loop.prototype.tick = function() {
-		this.publish("tick");
+		this.publish("update");
+		this.publish("render");
 
 		if (!this.stopLoop) {
 			// Should probably be a bit more obvious that this comes from Three.js

src/client/webgl/Camera.js

@@ -17,7 +17,11 @@
 
 		this.camera = this.createCamera();
 
+		this.lookAtTarget();
+
 		this.publish("addToScene", this.camera);
+
+		this.subscribe("resize", this.resize);
 	};
 
 	VIZI.Camera.prototype.createCamera = function() {
@@ -31,6 +35,10 @@
 		return camera;
 	};
 
+	VIZI.Camera.prototype.lookAtTarget = function() {
+		this.camera.lookAt(this.target.position);
+	};
+
 	VIZI.Camera.prototype.enableControls = function() {
 		this.subscribe("mouseDown", function(event) {
 			VIZI.Log("Camera mouse down handler");
@@ -48,4 +56,9 @@
 			VIZI.Log("Camera mouse wheel handler");
 		});
 	};
+
+	VIZI.Camera.prototype.resize = function() {
+		this.camera.aspect = window.innerWidth / window.innerHeight;
+		this.camera.updateProjectionMatrix();
+	};
 }());

src/client/webgl/Renderer.js

@@ -0,0 +1,50 @@
+/* globals window, _, VIZI, THREE */
+(function() {
+	"use strict";
+
+	VIZI.Renderer = function(scene, camera, domContainer) {
+		VIZI.Log("Inititialising WebGL renderer");
+
+		_.extend(this, VIZI.Mediator);
+
+		this.scene = scene.scene;
+		this.camera = camera.camera;
+		this.domContainer = domContainer;
+
+		this.renderer = this.createRenderer();
+
+		// Listeners
+		this.subscribe("render", this.render);
+		this.subscribe("resize", this.resize);
+	};
+
+	VIZI.Renderer.prototype.createRenderer = function() {
+		var renderer = new THREE.WebGLRenderer({
+			antialias: false
+		});
+
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		renderer.setClearColor( this.scene.fog.color, 1 );
+
+		// Gamma settings make things look 'nicer' for some reason
+		renderer.gammaInput = true;
+		renderer.gammaOutput = true;
+
+		renderer.physicallyBasedShading = true;
+
+		renderer.shadowMapEnabled = true;
+		renderer.shadowMapSoft = true;
+
+		this.domContainer.appendChild(renderer.domElement);
+
+		return renderer;
+	};
+
+	VIZI.Renderer.prototype.render = function() {
+		this.renderer.render( this.scene, this.camera );
+	};
+
+	VIZI.Renderer.prototype.resize = function() {
+		this.renderer.setSize( window.innerWidth, window.innerHeight );
+	};
+}());

src/client/webgl/WebGL.js

@@ -5,10 +5,15 @@
 	VIZI.WebGL = function() {
 		VIZI.Log("Inititialising WebGL");
 
+		_.extend(this, VIZI.Mediator);
+
 		this.domContainer = this.createDOMContainer();
 		this.scene = new VIZI.Scene();
 		this.camera = new VIZI.Camera();
-		this.lights = undefined;
+		this.renderer = new VIZI.Renderer(this.scene, this.camera, this.domContainer);
+
+		this.lights = [];
+		this.addLights();
 	};
 
 	VIZI.WebGL.prototype.createDOMContainer = function() {
@@ -21,4 +26,43 @@
 
 		return container;
 	};
+
+	// TODO: Split lights out into classes
+	VIZI.WebGL.prototype.addLights = function() {
+		VIZI.Log("Adding lights to scene");
+
+		var ambientLight = new THREE.AmbientLight( 0x404040 );
+		THREE.ColorConverter.setHSV( ambientLight.color, 0.1, 0.1, 0.4 );
+
+		this.lights.push(ambientLight);
+		this.publish("addToScene", ambientLight);
+
+		var directionalLight = new THREE.DirectionalLight( 0xffffff );
+		THREE.ColorConverter.setHSV( directionalLight.color, 0.1, 0.1, 0.55 );
+		directionalLight.position.x = 1000;
+		directionalLight.position.y = 1000;
+		directionalLight.position.z = 750;
+		directionalLight.position.normalize();
+
+		this.lights.push(directionalLight);
+		this.publish("addToScene", directionalLight);
+
+		var directionalLight2 = new THREE.DirectionalLight( 0x808080 );
+		THREE.ColorConverter.setHSV( directionalLight2.color, 0.1, 0.1, 0.5 );
+		directionalLight2.position.x = - 1000;
+		directionalLight2.position.y = 1000;
+		directionalLight2.position.z = - 750;
+		directionalLight2.position.normalize();
+
+		this.lights.push(directionalLight2);
+		this.publish("addToScene", directionalLight2);
+
+		var hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.65 );
+		THREE.ColorConverter.setHSV( hemiLight.color, 0.6, 0.35, 0.7 );
+		THREE.ColorConverter.setHSV( hemiLight.groundColor, 0.095, 0.5, 0.6 );
+		hemiLight.position.set( 0, 600, 0 );
+
+		this.lights.push(hemiLight);
+		this.publish("addToScene", hemiLight);
+	};
 }());

src/shared/vendor/three/ColorConverter.js

@@ -0,0 +1,58 @@
+/**
+ * @author bhouston / http://exocortex.com/
+ * @author zz85 / http://github.com/zz85
+ */
+
+THREE.ColorConverter = {
+
+	setHSV: function ( color, h, s, v ) {
+
+		// https://gist.github.com/xpansive/1337890#file-index-js
+		return color.setHSL( h, ( s * v ) / ( ( h = ( 2 - s ) * v ) < 1 ? h : ( 2 - h ) ), h * 0.5 );
+
+	},
+
+	getHSV: function( color ) {
+
+		var hsl = color.getHSL();
+
+		// based on https://gist.github.com/xpansive/1337890#file-index-js
+		hsl.s *= ( hsl.l < 0.5 ) ? hsl.l : ( 1 - hsl.l );
+
+		return {
+			h: hsl.h,
+			s: 2 * hsl.s / ( hsl.l + hsl.s ),
+			v: hsl.l + hsl.s
+		};
+	},
+
+	// where c, m, y, k is between 0 and 1
+	
+	setCMYK: function ( color, c, m, y, k ) {
+
+		var r = ( 1 - c ) * ( 1 - k );
+		var g = ( 1 - m ) * ( 1 - k );
+		var b = ( 1 - y ) * ( 1 - k );
+
+		return color.setRGB( r, g, b );
+
+	},
+
+	getCMYK: function ( color ) {
+
+		var r = color.r;
+		var g = color.g;
+		var b = color.b;
+		var k = 1 - Math.max(r, g, b);
+		var c = ( 1 - r - k ) / ( 1 - k );
+		var m = ( 1 - g - k ) / ( 1 - k );
+		var y = ( 1 - b - k ) / ( 1 - k );
+
+		return {
+			c: c, m: m, y: y, k: k
+		};
+
+	}
+
+
+};