Implemented .mdl model parsing and rendering. Refactored webgl stuff …

…out of index.html. Some .mdl models are still not being parsed correctly, but all players currently work

Map.js

@@ -5,9 +5,9 @@
 
 window.cs = window.cs || { };
 
-cs.Map = function(shaderProgram, gl, data) {
+cs.Map = function(gl, data) {
 	var mapData = cs.MapParser.parse(data);
-	var mapRender = new cs.MapRender(shaderProgram, gl, mapData);
+	var mapRender = new cs.MapRender(gl, mapData);
 
 	this.mapData = mapData;
 	/**

MapParser.js

@@ -13,42 +13,6 @@ window.cs = window.cs || { };
 /**
 	Provides easy-to-use functions for reading binary data
 **/
-DataReader = (function () {
-	var view = new DataView(new ArrayBuffer(4));
-
-	return {
-		//Might be a bit slow, but loading speed is currently not an issue
-		readFloat: function(data, n) {
-			view.setUint8(0, data[n+3]);
-			view.setUint8(1, data[n+2]);
-			view.setUint8(2, data[n+1]);
-			view.setUint8(3, data[n]);
-			return view.getFloat32(0);
-		},
-
-		readInteger: function(data, n) {
-			return data[n] + (data[n + 1] << 8) + (data[n + 2] << 16) + (data[n + 3] << 24);
-		},
-
-		readSignedShort: function(data, n) {
-			var k = (data[n] + (data[n + 1] << 8));
-			//If the sign bit is on
-			if(k & 0x8000) {
-				return k - 65536;
-			}
-			return k;
-		},
-
-		readShort: function(data, n) {
-			return data[n] + (data[n + 1] << 8);
-		},
-
-		readBinaryString: function(data, n, length) {
-			var str = data.subarray(n, n + length);
-			return String.fromCharCode.apply(null, str);
-		}
-	};
-})();
 
 cs.MapParser = (function () {
 	var constants = {

MapRender.js

@@ -7,27 +7,75 @@
 
 window.cs = window.cs || { };
 
-cs.MapRender = function(shaderProgram, gl, map) {
+cs.MapRender = function(gl, map) {
+	//Shaders
+	var fragmentShader =
+	"	precision mediump float;" +
+	"	varying vec3 forFragColor;" +
+
+	"	void main(void) {" +
+	"		gl_FragColor = vec4(forFragColor, 1.0);" +
+	"	}";
+
+	var vertexShader =
+	"	attribute vec3 aVertexPosition;" +
+	"	attribute vec3 aVertexColor;" +
+
+	"	varying vec3 forFragColor;" +
+
+	"	uniform mat4 uMVMatrix;" +
+	"	uniform mat4 uPMatrix;" +
+
+	"	void main(void) {" +
+	"		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);" +
+	"		forFragColor = aVertexColor;" +
+	"	}";
+
 	this.map = map;
 	this.gl = gl;
-	this.shaderProgram = shaderProgram;
+
+	function getShader(gl, shaderCode, shaderType) {
+		var shader = gl.createShader(shaderType);
+
+		gl.shaderSource(shader, shaderCode);
+		gl.compileShader(shader);
+
+		if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+			alert(gl.getShaderInfoLog(shader));
+			return null;
+		}
+
+		return shader;
+	}
+
+	var shaderProgram = (function() {
+		var sFragmentShader = getShader(gl, fragmentShader, gl.FRAGMENT_SHADER);
+		var sVertexShader = getShader(gl, vertexShader, gl.VERTEX_SHADER);
+
+		var program = gl.createProgram();
+		gl.attachShader(program, sVertexShader);
+		gl.attachShader(program, sFragmentShader);
+		gl.linkProgram(program);
+
+		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+			alert("Could not initialise shaders");
+		}
+
+		gl.useProgram(program);
+		program.vertexPositionAttribute = gl.getAttribLocation(program, "aVertexPosition");
+		program.vertexColorAttribute = gl.getAttribLocation(program, "aVertexColor");
+
+		program.pMatrixUniform = gl.getUniformLocation(program, "uPMatrix");
+		program.mvMatrixUniform = gl.getUniformLocation(program, "uMVMatrix");
+
+		return program;
+	})();
 
 	//Create buffers
 	var indexBuffer = gl.createBuffer();
 	var vertexBuffer = gl.createBuffer();
 	var colorBuffer = gl.createBuffer();
 
-	//Bind all of our data to the buffers
-	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-	gl.bufferData(gl.ARRAY_BUFFER, map.vertices, gl.STATIC_DRAW);
-	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3,
-		gl.FLOAT, false, 0, 0);
-
-	gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-	gl.bufferData(gl.ARRAY_BUFFER, map.lighting, gl.STATIC_DRAW);
-	gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, 3,
-		gl.FLOAT, false, 0, 0);
-
 	//Array of already drawn faces
 	var renderedFaces = [];
 
@@ -192,6 +240,27 @@ cs.MapRender = function(shaderProgram, gl, map) {
 	};
 
 	this.render = function(pos) {
+		gl.useProgram(shaderProgram);
+
+		gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+		gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
+
+		//Rotate the map
+		mat4.rotateX(cs.mvMatrix, cs.mvMatrix, -Math.PI/2);
+		mat4.rotateZ(cs.mvMatrix, cs.mvMatrix, Math.PI/2);
+		gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, cs.pMatrix);
+		gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, cs.mvMatrix);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, map.vertices, gl.STATIC_DRAW);
+		gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 3,
+			gl.FLOAT, false, 0, 0);
+
+		gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+		gl.bufferData(gl.ARRAY_BUFFER, map.lighting, gl.STATIC_DRAW);
+		gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, 3,
+			gl.FLOAT, false, 0, 0);
+
 		//Clear the array that tells us which faces we've already drawn
 		renderedFaces.length = 0;
 
@@ -208,5 +277,8 @@ cs.MapRender = function(shaderProgram, gl, map) {
 		gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, buffer, gl.STATIC_DRAW);
 		//Finally draw the map!
 		gl.drawElements(gl.TRIANGLES, buffer.length, gl.UNSIGNED_SHORT, 0);
+
+		gl.disableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+		gl.disableVertexAttribArray(shaderProgram.vertexColorAttribute);
 	};
 };

Player.js

@@ -2,12 +2,10 @@
 	This file defines the representation of a Player
 	A player is responsible for its own movement by
 	providing keyboard listeners
-	
-	TODO: Place a render function here for rendering a player
 **/
 window.cs = window.cs || { };
 
-cs.Player = function(x, y, z, speed) {
+cs.Player = function(gl, x, y, z, data, speed) {
 	this.x = x;
 	this.y = y;
 	this.z = z;
@@ -16,6 +14,8 @@ cs.Player = function(x, y, z, speed) {
 	//X and Y direction. Not necessarily normalized
 	var dir = [0, 0];
 	this.speed = speed;
+	var playerData = cs.PlayerParser.parse(gl, data);
+	var playerRender = new cs.PlayerRender(gl, playerData);
 
 	this.position = function() {
 		return [this.x, this.y, this.z];
@@ -111,6 +111,10 @@ cs.Player = function(x, y, z, speed) {
 		}
 	});
 
+	this.render = function() {
+		return playerRender.render();
+	}
+
 	//Handle a and d keys
 	//Symmetric to the handling of w and s
 	KeyboardJS.on("a,d", function(event, keys, combo){