From 7dc5a32d0ddf6d618eb613889f022f6705475973 Mon Sep 17 00:00:00 2001
From: Brandon Poythress <bgpoythress@yahoo.com>
Date: Sat, 19 May 2018 06:32:07 -0400
Subject: [PATCH] first commit

---
 .DS_Store               | Bin 0 -> 6148 bytes
 Color.js                |  21 ++
 DrawableObject.js       |  18 +
 EventHandler.js         | 116 +++++++
 Freedom.js              |  57 ++++
 GPUMemManager.js        | 154 +++++++++
 IdGenerator.js          |  15 +
 LabScene.js             |  95 ++++++
 Line.js                 |  23 ++
 ModelObject.js          |  21 ++
 ModelState.js           | 221 ++++++++++++
 Plane.js                | 138 ++++++++
 Point.js                |  28 ++
 Portal.js               |  43 +++
 README.md               |  90 +++++
 Renderer.js             | 302 ++++++++++++++++
 Sketch.js               |  30 ++
 Surface.js              |  22 ++
 Test.js                 | 198 +++++++++++
 Vertex.js               |  17 +
 freedom.html            |  46 +++
 lib/IntersectionMath.js |   0
 lib/cuon-matrix.js      | 741 ++++++++++++++++++++++++++++++++++++++++
 lib/cuon-utils.js       | 113 ++++++
 lib/webgl-debug.js      | 677 ++++++++++++++++++++++++++++++++++++
 lib/webgl-utils.js      | 197 +++++++++++
 test.html               |  23 ++
 27 files changed, 3406 insertions(+)
 create mode 100644 .DS_Store
 create mode 100644 Color.js
 create mode 100644 DrawableObject.js
 create mode 100644 EventHandler.js
 create mode 100644 Freedom.js
 create mode 100644 GPUMemManager.js
 create mode 100644 IdGenerator.js
 create mode 100644 LabScene.js
 create mode 100644 Line.js
 create mode 100644 ModelObject.js
 create mode 100644 ModelState.js
 create mode 100644 Plane.js
 create mode 100644 Point.js
 create mode 100644 Portal.js
 create mode 100644 README.md
 create mode 100644 Renderer.js
 create mode 100644 Sketch.js
 create mode 100644 Surface.js
 create mode 100644 Test.js
 create mode 100644 Vertex.js
 create mode 100644 freedom.html
 create mode 100644 lib/IntersectionMath.js
 create mode 100755 lib/cuon-matrix.js
 create mode 100755 lib/cuon-utils.js
 create mode 100755 lib/webgl-debug.js
 create mode 100755 lib/webgl-utils.js
 create mode 100644 test.html

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..52b0f12a32391dfc4a72a1bc40d87970f6a4518f
GIT binary patch
literal 6148
zcmeH~JqiLr422W55Nx)zoW=uqgF*BJUO-kGVZlP|=jgutu;6MfA}^4<nQX$cU$HY0
z5#2p5TaivgmT*(qSeTe%KbJwS(qHc9p}*aRv0|1htATeic|I0$K>{Q|0wh2JB=9o?
z?A(SeSD}m~KmsH%60rY6ft%LU7V5ta1RnvQ3#8q!_E`d2ECH>lEfg7;Mk_R0)yELa
zdpopbT}^GF(Jq?9hvu8rrWlw;yJ*1%rqzXk1V~^)U>^I<&i@1a)BHba;g$qQ;Lix?
zVt?H4@KJfTzI~qMPnorKgG0R>;pGy5jUB~nxEr1qTR>}S3q=OTi-2QbAc3zEcmnFH
B5n=!U

literal 0
HcmV?d00001

diff --git a/Color.js b/Color.js
new file mode 100644
index 0000000..0518062
--- /dev/null
+++ b/Color.js
@@ -0,0 +1,21 @@
+//Color.js
+//Written by Brandon Poythress
+//14MAY2018
+//Description: 
+//This class and global functions manage color in the program.
+
+//Color class
+function Color(rIn,gIn,bIn,aIn){
+	this.type = "Color";
+	this.r = rIn;
+	this.g = gIn;
+	this.b = bIn;
+	this.a = aIn;
+}
+
+//Basic colors are listed below. RGBA format 
+var RED = new Color(1.0, 0.0, 0.0, 1.0);
+var GREEN = new Color(0.0, 1.0, 0.0, 1.0);
+var BLUE = new Color(0.0, 0.0, 1.0, 1.0);
+var BLACK = new Color(0.0, 0.0, 0.0, 1.0);
+var WHITE = new Color(1.0, 1.0, 1.0, 1.0);
\ No newline at end of file
diff --git a/DrawableObject.js b/DrawableObject.js
new file mode 100644
index 0000000..87b4edc
--- /dev/null
+++ b/DrawableObject.js
@@ -0,0 +1,18 @@
+//DrawableObject.js
+//Written by Brandon Poythress
+//01MAY2018
+
+function DrawableObject(colorIn){
+	this.graphicsMemoryAddress = null;
+	this.killMe = false;
+
+	this.color = new Color(colorIn.r, colorIn.g, colorIn.b, colorIn.a);
+}
+
+//setter to change the color
+DrawableObject.prototype.setColorByObject = function(colorIn){
+	this.color.r = colorIn.r;
+	this.color.g = colorIn.g;
+	this.color.b = colorIn.b;
+	this.color.a = colorIn.a;	
+};
\ No newline at end of file
diff --git a/EventHandler.js b/EventHandler.js
new file mode 100644
index 0000000..90f8c77
--- /dev/null
+++ b/EventHandler.js
@@ -0,0 +1,116 @@
+//EventHandler.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This class handles all events
+
+function EventHandler(canvasIn, rendererIn, currentStateIn){
+
+	this.canvas = canvasIn;
+	this.renderer = rendererIn;
+	this.currentState = currentStateIn;
+
+	//The EventHandler will hold on to a variable that contains the inverse perspective matrix
+	//of the renderer.  The EventHandler will use this to give the currentState ray information
+	//that it can use to figure out what was clicked or hovered over.
+	this.inverseProjMatrix = new Matrix4();
+	
+	//ray after normalizing
+	this.normalizedRay = new Vector4();
+
+	//ray after applying the inverse perspective matrix
+	this.eyeRay = new Vector4();
+
+	//event handlers----------------------------------------------------------------------
+	
+	//window resize event
+	window.addEventListener('resize', function(){
+										this.renderer.resizeCanvas(this.canvas);}.bind(this), 
+										false);
+
+	//mouse down event
+	this.canvas.addEventListener('mousedown', function(evt){
+												this.handleMouseDown(evt);
+											}.bind(this), false);
+
+	this.canvas.addEventListener('mouseup', function(evt){
+												this.handleMouseUp(evt);}.bind(this), false);
+
+	//keydown event
+	document.addEventListener('keydown', function(evt){
+											this.handleKeyDown(evt);
+										}.bind(this), false);
+
+	//keyup event
+	document.addEventListener('keyup', function(evt){
+											this.handleKeyUp(evt);
+										}.bind(this), false);
+
+
+}
+
+//Implementing mouseDown
+EventHandler.prototype.handleMouseDown = function(evt){
+	
+
+};
+
+//Implementing mouseUp
+EventHandler.prototype.handleMouseUp = function(evt){
+	
+	//update the eyeRay variable so that it is ready to pass to the currentState
+	this.updateEyeRay(evt);
+	this.currentState.onMouseUp(evt, this.eyeRay);
+
+};
+
+//Implementing keyDown
+EventHandler.prototype.handleKeyDown = function(evt){
+	this.currentState.onKeyDown(evt);
+};
+
+//Implementing keyUp
+EventHandler.prototype.handleKeyUp = function(evt){
+	this.currentState.onKeyUp(evt);
+};
+
+EventHandler.prototype.updateEyeRay = function(evt){
+	//steps to create a ray
+
+	//step 0: 2d viewpoint coordinates
+	var x = evt.x;
+	var y = evt.y;
+	var z = null;
+	var w = null;
+
+	//Step 1 and 2: Make normalized Device Coordinates.  x, y, and z
+	//now define a vector looking in the negative z direction
+	x = ((2.0 * x) / this.canvas.width) - 1.0;
+	y = 1.0 - ((2.0 * y) / this.canvas.height);
+	z = -1.0;
+	w = 1.0;
+
+	this.normalizedRay.elements[0] = x;
+	this.normalizedRay.elements[1] = y;
+	this.normalizedRay.elements[2] = z;
+	this.normalizedRay.elements[3] = w;
+
+	//console.log(this.normalizedRay);
+
+	//Step 3: 4d Eye(Camera) Coordinates
+	this.inverseProjMatrix.setInverseOf(this.renderer.projMatrix);
+
+	//console.log(this.inverseProjMatrix);
+
+
+	this.eyeRay = this.inverseProjMatrix.multiplyVector4(this.normalizedRay);
+	this.eyeRay.elements[2] = -1.0
+	this.eyeRay.elements[3] = 0.0;
+
+	//console.log(this.eyeRay);
+	
+
+};
+
+
+
diff --git a/Freedom.js b/Freedom.js
new file mode 100644
index 0000000..536cc6d
--- /dev/null
+++ b/Freedom.js
@@ -0,0 +1,57 @@
+//Freedom.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This file is the main game loop
+
+//if there are textures you have to run a local server with the command:
+// If Python version is 3.X
+// python -m http.server
+// If Python version is 2.X
+// python -m SimpleHTTPServer
+
+debugging = true;
+
+function main(){
+	//retrieve the canvas from the html file
+	var canvas = document.getElementById('webgl');
+	if(!canvas){
+		console.log('Failed to retrieve the <canvas> element');
+		return;
+	}
+
+	//create the renderer instance
+	var renderer = new Renderer(canvas);
+	
+	//load state
+	var currentState = new ModelState();
+
+	//event handler
+	var eventHandler = new EventHandler(canvas, renderer, currentState);
+
+	//size the canvase based on the current browser window size
+	renderer.resizeCanvas(canvas);
+
+	//There will probably be a function call somewhere around here that loads
+	//existing saved data if there is any.
+	
+	//holds the time of last view update
+	var lastUpdate = Date.now();
+	var currentTime = Date.now();
+	var delta;
+
+	//define the game Loop
+	var gameLoop = function(){
+			currentTime = Date.now();
+			delta = currentTime - lastUpdate;
+			lastUpdate = currentTime;
+			currentState.update(delta);
+			renderer.render(currentState, canvas);
+			requestAnimationFrame(gameLoop);
+	};
+
+	//starting the main game loop
+	gameLoop();
+}	
+
+
diff --git a/GPUMemManager.js b/GPUMemManager.js
new file mode 100644
index 0000000..dc7e0cc
--- /dev/null
+++ b/GPUMemManager.js
@@ -0,0 +1,154 @@
+//GPUMemManager.js
+//Written by Brandon Poythress 4/17/18
+//Description: 
+//There needs to be a lot of thought put into this memory manager.  right now it
+//is good enough for development.  once the program is working pretty well more 
+//attention should be given to this because the performance effects are significant.
+
+function GPUMemManager(gl){
+	//set the current buffer size in bytes
+	this.INITIAL_BUFFER_SIZE = 1024;
+	this.BUFFER_GROW_SIZE = 1024;
+
+	//the first block of memory takes up the entire buffer and is empty
+	//starting at address 0.
+	initialBlock = new MemoryBlock(0, this.INITIAL_BUFFER_SIZE);
+	initialBlock.isAvailable = true;
+
+	//list of all memory blocks
+	this.blockList = [];
+
+	//add the big empty block to the blockList
+	this.blockList.push(initialBlock);
+
+	//create an empty buffer
+	this.graphicsBuffer = gl.createBuffer();
+	if(!this.graphicsBuffer){
+		console.log('Failed to create buffer object');
+		return -1;
+	}
+
+	//Bind the buffer object to the target
+	gl.bindBuffer(gl.ARRAY_BUFFER, this.graphicsBuffer);
+
+	//Expand the buffer to its inital size in bytes
+	gl.bufferData(gl.ARRAY_BUFFER, this.INITIAL_BUFFER_SIZE, gl.DYNAMIC_DRAW);
+
+	// Unbind the buffer object
+	gl.bindBuffer(gl.ARRAY_BUFFER, null);
+}
+
+GPUMemManager.prototype.allocate = function(gl, vertexArray){
+	//determine the size of the vertexArray in bytes
+	var vertArraySize = vertexArray.length * vertexArray.BYTES_PER_ELEMENT;
+	
+	//set the index of the new memory to an error value.
+	//this will only be corrected if memory is successfully allocated
+	var indexOfNewMemory = -1;
+
+	//find a empty block of memory
+	for (var i=0; i<this.blockList.length; i++){
+		if (this.blockList[i].isAvailable && this.blockList[i].size>=vertArraySize){
+
+			//store the original size of the available block
+			var sizeOfOldBlock = this.blockList[i].size;
+			
+			//if the required amount of memory is less than what is available
+			//in the block, then break up the block into two
+			if(this.blockList[i].size != vertArraySize){
+				
+				//use the current unused block as the new block
+				this.blockList[i].size = vertArraySize;
+				this.blockList[i].isAvailable = false;
+
+				//calculate the new location and size of the empty block
+				freeLocation = this.blockList[i].location + vertArraySize;
+				freeSize = sizeOfOldBlock - vertArraySize;
+
+				//create the empty block
+				freeBlock = new MemoryBlock(freeLocation, freeSize);
+				freeBlock.isAvailable = true;
+
+				//Push the empty block to the end of the stack
+				this.blockList.push(freeBlock);
+
+			} else{
+
+				//if the new and old block are the same size, creation of new
+				//memory blocks is not necessary
+				this.blockList[i].isAvailable = false;
+			}
+
+			//each drawable object will use index number instead of address
+			//to access it's memory block so they do not have to iterate through
+			//the blockList to find it
+			indexOfNewMemory = i; 
+
+			//allocate the memory in the GPU
+			gl.bindBuffer(gl.ARRAY_BUFFER, this.graphicsBuffer);
+			gl.bufferSubData(gl.ARRAY_BUFFER, this.blockList[i].location, vertexArray);
+			gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+			//once memory has been allocated we can break out of the for loop
+			break;
+
+
+		} else if(i == this.blockList.length - 1) {
+			//if you dont break out of the foor loop before getting here, it means
+			//that there was not a block of memory available
+			console.log("Out of memory in the GPUMemoryManager.  Need to expand memory");
+		}
+	}
+
+	return indexOfNewMemory; //if a negative number is returned there is a problem
+};
+
+
+GPUMemManager.prototype.update = function(gl, object, vertexArray){
+
+	//first we must figure out is memory is already allocated or the object is new
+	if(object.graphicsMemoryAddress){
+		//because the object already has a memory address/index, i am going to release it.
+		//each time I modify the vertices an existing object, I free its memory and rebuffer it.
+		//this helps with memory fragmentation.
+		this.blockList[object.graphicsMemoryAddress].isAvailable = true;
+		object.graphicsMemoryAddress = null;
+	}else{
+		
+	}
+
+	//then we figure out if the object is requesting deletion.  If so we just return without
+	//allocating any more.
+	if(object.killMe){
+		return;
+	} else {
+		object.graphicsMemoryAddress = this.allocate(gl, vertexArray);
+	}
+
+	if(debugging){
+		console.log("Memory Information:");
+		for (var i=0; i<this.blockList.length; i++){
+			console.log("MemoryBlock Index:");
+			console.log(i);
+			console.log("MemoryBlock Size:");
+			console.log(this.blockList[i].size);
+			console.log("MemoryBlock Location:");
+			console.log(this.blockList[i].location);
+			console.log("-----------------------------");
+		}
+	}
+
+};
+
+
+function MemoryBlock(locationIn, sizeIn){
+	//is the memory block used or available.  Default is used.
+	this.isAvailable = false;
+
+	//location pointer of the memory block
+	this.location = locationIn;
+
+	//size of the memory block in bytes
+	this.size = sizeIn;
+
+}
\ No newline at end of file
diff --git a/IdGenerator.js b/IdGenerator.js
new file mode 100644
index 0000000..d6df253
--- /dev/null
+++ b/IdGenerator.js
@@ -0,0 +1,15 @@
+//IdGenerator.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This class handles all ID distribution
+
+function IdGenerator(){
+	this.nextId = 1;
+}
+
+IdGenerator.prototype.getId = function(){
+	var idToReturn = this.nextId;
+	this.nextID = this.nextId + 1;
+	return idToReturn;
+};
\ No newline at end of file
diff --git a/LabScene.js b/LabScene.js
new file mode 100644
index 0000000..e32cec7
--- /dev/null
+++ b/LabScene.js
@@ -0,0 +1,95 @@
+//LabScene.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This class handles the setting
+
+function LabScene(idIn, parentIdIn, parentDirtyListCallbackIn){
+
+	ModelObject.call(this, "Scene", idIn, parentIdIn, true, parentDirtyListCallbackIn);
+	
+	console.log(this.type);
+	console.log(this.usesRenderList);
+	
+
+
+
+	// this.type = "Scene";
+	// this.id = idIn;
+	// this.parent = parentIdIn;
+	// this.hasRenderList = true;
+	// this.idGen = new IdGenerator();
+
+	// this.renderList = [];
+	
+	//assign the callback function to the scene object
+	// this.passDirtyToParent = parentDirtyListCallback;
+
+
+	//to test the rendering system, the lab scene will contain a single sketch
+	//with 4 points that make up a plane.  This plane will serve as the 
+	//floor for future development.
+
+	//need to work out how to have "mates" between the plane and the 
+	//sketch.  That way, if the plane changes, the sketch knows how
+	//and when to update itself.  while working on the graphics stuff,
+	//I will just leave the plane static, but I need to work this out
+	//down the road.
+	this.floorPlane = new Plane(this.idGen.getId(), 
+						this.id, this.dirtyListCallback.bind(this), 
+						0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, -1.0);
+
+	sketch1 = new Sketch(this.idGen.getId(), this.id,
+	 					this.dirtyListCallback.bind(this),
+	 					this.floorPlane);
+
+	//define the size of the scene in mm
+	this.width = 10000.0;
+	this.length = 10000.0;
+
+	//sketch1.addPoint(0.0, 0.0, 0.0, RED);
+
+	//sketch1.addPoint(-6000, 0.0, -this.length/2.0, BLUE);
+	// sketch1.addPoint(-this.width/2.0, 0.0, this.length/2.0, BLUE);
+	// sketch1.addPoint(this.width/2.0, 0.0, this.length/2.0, BLUE);
+	// sketch1.addPoint(this.width/2.0, 0.0, -this.length/2.0, BLUE);
+
+	//sketch1.addPoint(0.0, 0.0, 0.0, BLUE);
+	// sketch1.addPoint(0.25, 0.35, 0.25, RED);
+	// sketch1.addPoint(-0.25, 0.35, 0.25, GREEN);
+	// sketch1.addPoint(0.25, -0.35, 0.25, WHITE);
+	// sketch1.addPoint(-0.5, -.5, 0.25, BLUE);
+	// sketch1.addPoint(-0.25, -0.35, 0.25, RED);
+	
+
+	this.renderList.push(this.floorPlane);
+
+
+
+}
+
+// LabScene.prototype.draw = function(gl, renderer){
+
+
+// }
+
+//Every parent object must have a callback function that allows children
+//to communitate to it "up the chain".
+// LabScene.prototype.dirtyListCallback = function(dirtyObject){
+// 	this.passDirtyToParent(dirtyObject);
+// };
+
+
+
+LabScene.prototype = Object.create(ModelObject.prototype);
+
+LabScene.prototype.update = function(lastUpdate){
+
+};
+
+LabScene.prototype.constructor = LabScene;
+
+LabScene.prototype.onMouseUp = function(eyeX, eyeY, eyeZ, worldRay){
+	
+
+};
\ No newline at end of file
diff --git a/Line.js b/Line.js
new file mode 100644
index 0000000..6a6b302
--- /dev/null
+++ b/Line.js
@@ -0,0 +1,23 @@
+//Line.js
+//Written by Brandon Poythress
+//14MAY2018
+//Description: 
+//Line object
+
+//Line class
+function Line(idIn, parentIdIn, parentDirtyListCallbackIn, point1In, point2In, colorIn){
+	
+	//Line inherits properties from ModelObject but not methods
+	ModelObject.call(this, "Line", idIn, parentIdIn, false, parentDirtyListCallbackIn);
+
+	//Line is a drawable object
+	DrawableObject.call(this, colorIn);
+
+	this.point1 = point1In;
+	this.point2 = point2In;
+	
+
+}
+
+Line.prototype = Object.create(DrawableObject.prototype);
+Line.prototype.constructor = Line;
diff --git a/ModelObject.js b/ModelObject.js
new file mode 100644
index 0000000..a04b959
--- /dev/null
+++ b/ModelObject.js
@@ -0,0 +1,21 @@
+//ModelObject.js
+//Written by Brandon Poythress
+//30APR2018
+//Description: 
+//This object contains some basic functionality for all model objects
+//in terms of Model-View-Controller organization.
+
+function ModelObject(typeIn, idIn, parentIdIn,
+					usesRenderListIn, parentDirtyListCallbackIn){
+	this.type = typeIn;
+	this.id = idIn;
+	this.parent = parentIdIn;
+	this.usesRenderList = usesRenderListIn;
+	this.passDirtyToParent = parentDirtyListCallbackIn;
+	this.idGen = new IdGenerator();
+	this.renderList = [];
+}
+
+ModelObject.prototype.dirtyListCallback = function(dirtyObject){
+	this.passDirtyToParent(dirtyObject);
+};
\ No newline at end of file
diff --git a/ModelState.js b/ModelState.js
new file mode 100644
index 0000000..aa7e31c
--- /dev/null
+++ b/ModelState.js
@@ -0,0 +1,221 @@
+//ModelState.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This is the top level model class
+
+function ModelState(){
+	
+	//Inherits from ModelObject but because it is the top level object
+	//it does not use id, parentId, or parentDirtyListCallback so they
+	//are set to null.  It also does not need ModelObject methods,
+	//so ModelState doesnt grab its prototypes.
+	ModelObject.call(this, "State", null, null, true, null);
+
+	//the state object manages its own model matrix
+	//and view matrix.  The renderer handles proj
+	//matrix...for now at least
+	this.modelMatrix = new Matrix4();
+	this.viewMatrix = new Matrix4();
+
+	this.inverseModelMatrix = new Matrix4();
+	this.inverseViewMatrix = new Matrix4();
+
+	this.tempWorldRay = new Vector4();
+	this.worldRay = new Vector3();
+
+
+	//some temporary code to test moving around
+	this.radius = -2500;
+	this.angle = 0;
+
+	
+
+	//this is the state of the viewer or player or users
+	this.eyeX = 0.0;
+	this.eyeY = 1000.0;
+	this.eyeZ = 0.0;
+
+	this.lookX = -this.radius*Math.sin(this.angle);
+	this.lookY = 0.0;
+	this.lookZ = this.radius*Math.cos(this.angle);
+
+	this.isMovingForward = false;
+	this.isMovingBackward = false;
+	this.isMovingRight = false;
+	this.isMovingLeft = false;
+	this.isRotatingRight = false;
+	this.isRotatingLeft = false;
+
+	this.viewMatrix.setLookAt(this.eyeX, this.eyeY, this.eyeZ, 
+								this.lookX, this.lookY, this.lookZ, 
+								0, 1, 0);
+	
+	//movement per millisecond
+	this.acceleration = 0.0005;
+
+	//the dirtyList and the renderList is the handshake between the "model" 
+	//and the "view". The model and the renderer both have access to it.   
+	//Whatever you place in the dirtyList will be re-presented to the GPU because it 
+	//is new or it has changed...or it needs to be deleted.
+	//whatever is in the renderList will be renderered. 
+	
+	//i am going to try a single dirtyList for everything
+	this.dirtyList = [];
+
+	
+
+	//initialize the scene.
+	this.scene = new LabScene(this.idGen.getId(), 
+								this.id, 
+								this.dirtyListCallback.bind(this));
+	
+	//initialize one portal.  Multiple portals will be supported in the final build.
+	//may need a portal list
+	this.portal = new Portal(this.idGen.getId(), 
+								this.id, 
+								this.dirtyListCallback.bind(this));  
+
+	//each object that is the parent to renderable objects must have a renderList
+	this.renderList.push(this.scene);
+	this.renderList.push(this.portal);
+
+	this.viewMatrix.setLookAt(this.eyeX, this.eyeY, this.eyeZ, 
+								this.lookX, this.lookY, this.lookZ, 
+								0, 1, 0);
+	
+}
+
+// ModelState.prototype.draw = function(gl, renderer){
+// 	this.scene.draw(gl, renderer);
+// 	this.portal.draw(gl, renderer);
+// }
+
+ModelState.prototype.dirtyListCallback = function(dirtyObject){
+	this.dirtyList.push(dirtyObject);
+};
+
+
+
+ModelState.prototype.update = function(delta){
+
+
+
+	if(this.isRotatingRight){
+		this.angle =  this.angle + delta*this.acceleration;
+		console.log("rotating right");
+
+	
+	}else if(this.isRotatingLeft){
+		console.log("rotating left");
+		this.angle = this.angle - delta*this.acceleration;
+	}
+
+	this.viewMatrix.setLookAt(this.eyeX, this.eyeY, this.eyeZ, 
+								-this.radius*Math.sin(this.angle), 
+								this.lookY, this.radius*Math.cos(this.angle), 
+								0, 1, 0);
+
+	this.scene.update(delta);
+	this.portal.update(delta);
+};
+
+
+
+ModelState.prototype.onKeyDown = function(evt){
+	
+
+	switch(evt.key){
+		case "w":
+			//this.isMovingForward = true;
+			break;
+
+		case "W":
+			//this.isMovingForward = true;
+			break;
+
+		case "s":
+			//this.isMovingBackward = true;
+			break;
+
+		case "S":
+			//this.isMovingBackward = true;
+			break;
+
+		case "a":
+			this.isRotatingLeft = true;
+			break;
+
+		case "A":
+			this.isRotatingLeft = true;
+			break;
+
+		case "d":
+			this.isRotatingRight = true;
+			break;
+
+		case "D":
+			this.isRotatingRight = true;
+			break;
+	}
+
+};
+
+ModelState.prototype.onKeyUp = function(evt){
+	switch(evt.key){
+		case "w":
+			//this.isMovingForward = false;
+			break;
+
+		case "W":
+			//this.isMovingForward = false;
+			break;
+
+		case "s":
+			//this.isMovingBackward = false;
+			break;
+
+		case "S":
+			//this.isMovingBackward = false;
+			break;
+
+		case "a":
+			this.isRotatingLeft = false;
+			break;
+
+		case "A":
+			this.isRotatingLeft = false;
+			break;
+
+		case "d":
+			this.isRotatingRight = false;
+			break;
+
+		case "D":
+			this.isRotatingRight = false;
+			break;
+	}
+	
+};
+
+ModelState.prototype.onMouseUp = function(evt, eyeRay){
+
+	//step 4: get everything into world coordinates
+	this.inverseViewMatrix.setInverseOf(this.viewMatrix);
+
+	//fill a temporary Vector4 that will be reduced to a Vector3
+	this.tempWorldRay = this.inverseViewMatrix.multiplyVector4(eyeRay);
+	
+	//fill the vector3
+	this.worldRay.elements[0] = this.tempWorldRay.elements[0];
+	this.worldRay.elements[1] = this.tempWorldRay.elements[1];
+	this.worldRay.elements[2] = this.tempWorldRay.elements[2];
+
+	this.worldRay.normalize();
+
+	console.log(this.worldRay);
+
+	this.scene.onMouseUp(this.eyeX, this.eyeY, this.eyeZ, this.worldRay);
+
+
+};
\ No newline at end of file
diff --git a/Plane.js b/Plane.js
new file mode 100644
index 0000000..a9a801e
--- /dev/null
+++ b/Plane.js
@@ -0,0 +1,138 @@
+//Plane.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This class represents a plane.
+
+function Plane(idIn, parentIdIn, parentDirtyListCallback, xIn, yIn, zIn, normalXIn, normalYIn, normalZIn, upXIn, upYIn, upZIn){
+	
+	//basic information about the plane
+	this.type = "Plane";
+	this.id = idIn;
+	this.parent = parentIdIn;
+	this.idGen = new IdGenerator();
+
+	//rendering information
+	this.usesRenderList = true;
+	this.renderList = [];
+
+	//color of the plane
+	this.color = GREEN;
+	//callback function to the parent
+	//used to inform about children that need
+	//to be updated in the GPU because they have
+	//changed
+	this.passDirtyToParent = parentDirtyListCallback;
+
+	//location of the plane's center point
+	this.x = xIn;
+	this.y = yIn;
+	this.z = zIn;
+
+	//normal vector components
+	this.normalX = normalXIn;
+	this.normalY = normalYIn;
+	this.normalZ = normalZIn;
+
+	//Local Y axis vector components
+	this.upX = upXIn;
+	this.upY = upYIn;
+	this.upZ = upZIn;
+
+	//size of the plane in mm.  May be better
+	//to pass this into the constructor
+	//but for now I will hard code it
+	this.size = 5000;
+
+	//create the points that make up the
+	//four corners of the plane.  We
+	//need them to draw the lines but we
+	//will not add them to the render
+	//list of the plane
+	point1 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					-this.size/2.0, 0.0, -this.size/2.0,
+					 this.color);
+
+	point2 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					-this.size/2.0, 0.0, this.size/2.0, this.color);
+
+	point3 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					this.size/2.0, 0.0, this.size/2.0, this.color);
+
+	point4 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					this.size/2.0, 0.0, -this.size/2.0, this.color);
+	midPoint1 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					0.0, 0.0, -this.size/2.0, RED);
+	midPoint2 = new Point(this.idGen.getId(),
+					this.id, this.dirtyListCallback.bind(this),
+					0.0, 0.0, this.size/2.0, RED);
+
+	point1.color.a = 1.0;
+	point2.color.a = 1.0;
+	point3.color.a = 1.0;
+	point4.color.a = 1.0;
+
+	//add the four lines to dirty and render lists
+	this.line1 = new Line(this.idGen.getId(),
+						this.id, this.dirtyListCallback.bind(this),
+						point1, point2, BLUE);
+
+	
+	
+	this.line2 = new Line(this.idGen.getId(),
+						this.id, this.dirtyListCallback.bind(this),
+						point2, point3, BLUE);
+	
+	
+	this.line3 = new Line(this.idGen.getId(),
+						this.id, this.dirtyListCallback.bind(this),
+						point3, point4, BLUE);
+	
+	this.line4 = new Line(this.idGen.getId(),
+						this.id, this.dirtyListCallback.bind(this),
+						point4, point1, BLUE);
+
+	this.midPointLine = new Line(this.idGen.getId(),
+						this.id, this.dirtyListCallback.bind(this),
+						midPoint1, midPoint2, BLACK);
+
+	this.passDirtyToParent(this.line1);
+	this.passDirtyToParent(this.line2);
+	this.passDirtyToParent(this.line3);
+	this.passDirtyToParent(this.line4);
+	this.passDirtyToParent(this.midPointLine);
+	this.renderList.push(this.line1);
+	this.renderList.push(this.line2);
+	this.renderList.push(this.line3);
+	this.renderList.push(this.line4);
+
+
+	//create a surface object
+	this.surface = new Surface(this.idGen.getId(),
+								this.id, this.dirtyListCallback.bind(this),
+								this.color);
+
+	//I am going to render planes partially transparent
+	//this.surface.color.a = 0.2;
+	
+	this.surface.triangles.push(point1, point2, point3,
+								point1, point3, point4);
+
+	this.passDirtyToParent(this.surface);
+	this.renderList.push(this.surface);
+	this.renderList.push(this.midPointLine);
+
+}
+
+Plane.prototype.dirtyListCallback = function(dirtyObject){
+	this.passDirtyToParent(dirtyObject);
+};
+
+Plane.prototype.update = function(){
+
+};
\ No newline at end of file
diff --git a/Point.js b/Point.js
new file mode 100644
index 0000000..d8b3fb2
--- /dev/null
+++ b/Point.js
@@ -0,0 +1,28 @@
+//Point.js
+//Written by Brandon Poythress
+//14MAY2018
+//Description: 
+//I found that it was necessary to separate vertices from points.
+//Points are objects that are visible and selectable to the user.
+//vertices are the building blocks for complex objects but
+//are not necessarily viewable or able to be interacted with by
+//the user.  Each point will contain a vertex object, but
+//every vertex will not be necessarily be a point.
+
+//Point class
+function Point(idIn, parentIdIn, parentDirtyListCallbackIn, xIn, yIn, zIn, colorIn){
+	
+	//Point inherits properties from ModelObject but not methods
+	ModelObject.call(this, "Point", idIn, parentIdIn, false, parentDirtyListCallbackIn);
+
+	//Point is a drawable object
+	DrawableObject.call(this, colorIn);
+	
+	//this is the vertex location of the point
+	this.vertex = new Vertex(xIn, yIn, zIn);
+	
+}
+
+//Inheriting methods from drawable object but keeping constructor 
+Point.prototype = Object.create(DrawableObject.prototype);
+Point.prototype.constructor = Point;
\ No newline at end of file
diff --git a/Portal.js b/Portal.js
new file mode 100644
index 0000000..6bd851c
--- /dev/null
+++ b/Portal.js
@@ -0,0 +1,43 @@
+//Portal.js
+//Written by Brandon Poythress
+//25APR2018
+//Description: 
+//This class represents the portal
+
+function Portal(idIn, parentIn, parentDirtyListCallback){
+	this.type = "Portal";
+	this.id = idIn;
+	this.parent = parentIn;
+
+	//assign the callback function to the scene object
+	this.tellParentThatImDirty = parentDirtyListCallback;
+
+	this.usesRenderList = true;
+	this.renderList = [];
+	this.dirtyList = [];
+	//this.init(gl);
+
+}
+
+Portal.prototype.update = function(){
+
+};
+
+// Portal.prototype.init= function(gl){
+// 	// var point1 = new Point(gl, 0.2, 0.2, 0.0, RED);
+// 	// var point2 = new Point(gl, -0.3, -0.3, 0.0, GREEN);
+// 	// var point3 = new Point(gl, -0.7, -0.2, 0.0, WHITE);
+// 	// var line1 = new Line(gl, point1, point2, BLUE);
+// 	// this.itemList.push(line1);
+// 	// this.itemList.push(point1);
+// 	// this.itemList.push(point2);
+// 	// this.itemList.push(point3);
+// }
+
+//loop through the items in the portal and draw them
+// Portal.prototype.draw = function(gl, renderer){
+// 	for(var i = 0; i< this.itemList.length; i++){
+// 		this.itemList[i].draw(gl, renderer);
+// 	}
+
+// }
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..e2df4f3
--- /dev/null
+++ b/README.md
@@ -0,0 +1,90 @@
+# freedom
+A parametric, user friendly CAD program that feels like a game.
+
+
+FILE STRUCTURE:
+---
+
+**freedom.html** - main html file.
+
+**Freedom.js** - Runs the gameLoop and has all the top level objects and variables.  It is the connection between the model and the view.
+
+Contains the following objects/variables:
+* canvas object-the webGL drawing surface for HTML5.
+* renderer object that handles all the webGL
+rendering for the program.
+* current state object that get assigned to whatever the current state is.  The current state can be a loading screen, a menu screen, or a model screen.  Maybe more things in the future.
+* event handler object that takes all events a passes them down to the model and/or renderer to do things with.
+* lastUpdate variable, currentTime variable, and delta variable that are used by the gameLoop to calculate how much time has passed since that last update to the currentState.
+* debugging variable which can be turned on or off by the programmer in order to get error outputs on the console.
+
+Contains the following functions:
+* main().  No parameters, no returns.
+* gameLoop().  No parameters, but is an anonymous function that uses variables defined in main().  Its job is to calculate the elapsed time since the last update, then to update the model, then to render the model, then it calles requestAnimationFrame(gameLoop) to recursively do it again.
+
+**Renderer.js** - the Renderer class is in charge of rendering the model.  I tried to separate the renderer and the model as much as possible so the code could be ported later on.
+
+Contains the following objects/variables:
+* this.gl - the webGL context.
+* this.VSHADER_SOURCE - the vertex shader
+* this.FSHADER_SOURCE - the fragment shader
+* this.a_Position - the location of the a_Position variable in the shader program.
+* this.a_Color - the location of the a_Color variable in the shader program.
+* this.u_ProjMatrix - the location of the u_ProjMatrix variable in the shader program.
+* this.u_ViewMatrix - the location of the u_ViewMatrix variable in the shader program.
+* this.u_ModelMatrix - the location of the u_ModelMatrix variable in the shader program.
+* this.projMatrix - the projMatrix is the only matrix that is not managed by the current state and its children.  It is managed only by the renderer.
+* this.memory - this is an instance of the GPUMemManager class.  All the things in the program are crammed into one buffer.  The memory object keeps track of how much memory is allocated, allocates new memory, and deletes old memory.
+
+Contains the following methods:
+* render(state) - takes a state object and returns nothing.  This function goes through and updates the memory instance with any changes the goes through the entire model hierarchy, rendering it as is goes.
+* renderThing(thingToRender) -  takes any renderable object and returns nothing.  It will try to render anything that is passed to it.  This is really just a helper function to render(state)
+* generateArray(dirtyObject) - takes an object that needs updating and returns nothing.  It generates the Float32Array object that will eventually be used by the this.memory object to properly manage the buffer object.
+* renderLine(line) - takes a line object and returns nothing.  It is a helper function to render thing with specific drawing instructions for the line type of object.
+* renderPoint(point) - takes a point object and returns nothing.  It is a helper function to render thing with specific drawing instructions for the point type of object.
+* renderSurface(surface) - takes a surface object and returns nothing.  It is a helper function to render thing with specific drawing instructions for the surface type of object.
+* resizeCanvas(canvas) - takes a canvas object and returns nothing.  This method updates the view if the browser window is resized.
+
+**ModelState.js** - The ModelState class is the top level State Class.
+
+Contains the following objects/variables:
+* this.type - is of the type "State".
+* this.hasRenderList - anything that has renderable children contains this variable set to "true".  When the renderer parses through the Model Hierarchy, it looks at this variable in order to make rendering decisions.
+* this.idGen - and instance of the IdGenerator class.  This is in charge of assigning id numbers to child objects.
+* this.id - id number.
+* this.modelMatrix - model matrix for the ModelState.
+* this.viewMatrix - the point of view of the viewer.  This may be moved to a "Human" class object later on.
+* this.dirtyList - a top level list that contains any children that are new or have changed and need to be passed to the renderer for updating the GPU buffer.  All child objects use a dirtyListCallback function to fill this list as objects become dirty.
+* this.renderList = list of ALL objects to be rendered.  This contains both dirty and clean objects.
+* this.scene - an instance that cantains all data for the scene.
+* this.portal - a portal is a table that projects the actual cad model in the air above it.  Like in the IronMan movies.  There is always at least one of these.  The program may be expanded in the future to allow for multiple portals.
+
+Contains the following methods:
+* update(delta) - takes the amount of time since the last render and returns nothing.  It updates the ModelState and calls the update function in it's children.
+* dirtyListCallback(dirtyObject) - takes any renderable object and returns nothing.  All child objects can communicate with their parent using this callback.  This method adds the object to the dirtyList in the modelState which is updated by the renderer.
+* onKeyDown(evt) and onKeyUp(evt) - used by the EventHandler class to pass events to the ModelState. The ModelState can then react to the event in any way necessary.
+
+**Vertex.js** - the simplest thing.  it just contains x, y, and z components.  Thats it.
+
+**Point.js** - a vertext that can be displayed and interacted with. 
+
+Constructor: idIn, parentIdIn, parentDirtyListCallbackIn, xIn, yIn, zIn, colorIn.  Returns nothing.
+
+Contains the following objects/variabls:
+* implements the ModelObject via "call".
+* implements the DrawableObject via "call".
+* this.vertex - contains the position data
+* this. color - contains the point's color
+
+Contains the following methods:
+* setColorByObject(colorIn) - takes in a color object and returns nothing.  Sets the color of the point.  this is already done in the constructor, but this is how you change it if you need to.
+
+
+
+
+
+
+
+
+
+
diff --git a/Renderer.js b/Renderer.js
new file mode 100644
index 0000000..372db0f
--- /dev/null
+++ b/Renderer.js
@@ -0,0 +1,302 @@
+//Renderer.js
+//Written by Brandon Poythress
+//17APR2018
+//Description: 
+//This class renders the state
+
+
+function Renderer(canvas){
+
+	//get the rendering context
+	this.gl = getWebGLContext(canvas);
+	if(!this.gl){
+		console.log('Failed to get the rendering context for WebGL');
+		return;
+	}
+
+
+	//shader code-------------------------------------------------------------------
+	//vertex shader program
+	this.VSHADER_SOURCE = 
+		'attribute vec4 a_Position;\n' +
+		'attribute vec4 a_Color;\n' +
+		'uniform mat4 u_ModelMatrix;\n'+
+		'uniform mat4 u_ViewMatrix;\n' +
+		'uniform mat4 u_ProjMatrix;\n' +
+		'varying vec4 v_Color;\n' +
+		'void main() {\n' +
+		'	gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;\n'+
+		// '	gl_Position = a_Position;\n'+
+		'	gl_PointSize = 10.0;\n'+
+		'	v_Color = a_Color;\n'+
+		'}\n';
+	
+	//fragment shader program
+	this.FSHADER_SOURCE = 
+		'precision mediump float;' +
+		'varying vec4 v_Color;\n' +
+		'void main() {\n' +
+		'gl_FragColor = v_Color;\n' +
+		'}\n';
+	
+	//initialize shaders
+	if(!initShaders(this.gl, this.VSHADER_SOURCE, this.FSHADER_SOURCE)){
+		console.log('Failed to initialize shaders.');
+		return;
+	}
+	//end of shader code-------------------------------------------------------------------	
+	
+	//Specify the color for clearing the canvas
+	this.gl.clearColor(0.0, 1.0, 1.0, 1.0);
+	
+	//enable alpha blending
+	this.gl.enable(this.gl.BLEND);
+	this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
+	
+	//get the locations of the attribute variables
+	this.a_Position = this.gl.getAttribLocation(this.gl.program, 'a_Position');
+	if (this.a_Position<0){
+		console.log('Failed to get location of a_Position');
+		return -1;
+	}
+	
+	this.a_Color = this.gl.getAttribLocation(this.gl.program, 'a_Color');
+	if (this.a_Color<0){
+		console.log('Failed to get location of a_Color');
+		return -1;
+	}
+
+	//get the locations of the uniform variables
+	this.u_ProjMatrix = this.gl.getUniformLocation(this.gl.program, "u_ProjMatrix");
+	if(this.u_ProjMatrix<0){
+		console.log('Failed to get location of u_ProjMatrix');
+		return;
+	}
+
+	this.u_ViewMatrix = this.gl.getUniformLocation(this.gl.program, "u_ViewMatrix");
+	if(this.u_ViewMatrix<0){
+		console.log('Failed to get location of u_ViewMatrix');
+		return;
+	}
+
+	this.u_ModelMatrix = this.gl.getUniformLocation(this.gl.program, "u_ModelMatrix");
+	if(this.u_ModelMatrix<0){
+		console.log('Failed to get location of u_ModelMatrix');
+		return;
+	}
+
+	//create the projection matrix.  The proj matrix
+	//is managed by the renderer.  The other matrices
+	//are managed by the model
+	this.projMatrix = new Matrix4();
+
+	
+	this.projMatrix.setPerspective(45, canvas.width/canvas.height, 1, 20000);
+	this.gl.viewport(0, 0, canvas.width, canvas.height);
+
+	
+	this.gl.uniformMatrix4fv(this.u_ProjMatrix, false, this.projMatrix.elements);
+
+	//create the graphics memory manager object
+	this.memory = new GPUMemManager(this.gl);
+
+}	
+	
+
+
+//------------------------------------------------------------------------------------
+//This set of functions is the meat an potatoes of the renderer.  It  searches through
+//the data structures of the given state and recursively decides how to render each item.
+
+Renderer.prototype.render = function(state){
+
+	//set the Model and View Matrix data from the state object
+
+	this.gl.uniformMatrix4fv(this.u_ModelMatrix, false, state.modelMatrix.elements);
+	this.gl.uniformMatrix4fv(this.u_ViewMatrix, false, state.viewMatrix.elements);
+
+	//first all dirty objects have to be updated
+	for (var i = 0; i<state.dirtyList.length; i++){
+		
+		//use the generateArray function to produce Float32 arrays for 
+		//the different kinds of primatives
+		var verticesColors = this.generateArray(state.dirtyList[i]);
+		console.log(verticesColors);
+
+		//update the GPU memory with these vertices
+		this.memory.update(this.gl, state.dirtyList[i], verticesColors);
+		}
+
+	//then clear the dirtyList.  There is a lot of online debate about the proper way
+	//to clear an array in javascript.  beware of this if there are bugs.
+	state.dirtyList.length = 0;
+
+	this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+
+	//then all items in the render hierachy must be rendered
+	this.renderThing(state);
+};
+
+
+
+Renderer.prototype.renderThing = function(thingToRender){
+	//First I test the type of thing that is going to be rendered.
+	//If the thing has a renderlist it sends each thing back to this function.
+
+	if (thingToRender.usesRenderList){
+		for (var i=0; i<thingToRender.renderList.length; i++){
+			this.renderThing(thingToRender.renderList[i]);
+		}
+	} else {
+		switch(thingToRender.type){
+			case "Surface":
+				this.renderSurface(thingToRender);
+				break;
+
+			case "Line":
+				this.renderLine(thingToRender);
+				break;
+
+			case "Point":
+				this.renderPoint(thingToRender);
+				break;
+
+			default:
+				if(debugging){
+					console.log("could not render: " + thingToRender.type);
+
+				}
+		}
+	}
+};
+
+Renderer.prototype.generateArray = function(dirtyObject){
+	var verticesColors;
+	var point1;
+	var point2;
+	var point3;
+	var i;
+	
+	switch(dirtyObject.type){
+
+		case "Surface":
+			var trianglesLength = dirtyObject.triangles.length;
+			var components = 7;
+			verticesColors = new Float32Array(trianglesLength * components);
+			
+			for(i = 0; i<trianglesLength; i++){
+				verticesColors[i*components] = dirtyObject.triangles[i].vertex.x;
+				verticesColors[(i*components)+1] = dirtyObject.triangles[i].vertex.y;
+				verticesColors[(i*components)+2] = dirtyObject.triangles[i].vertex.z;
+				verticesColors[(i*components)+3] = dirtyObject.triangles[i].color.r;
+				verticesColors[(i*components)+4] = dirtyObject.triangles[i].color.g;
+				verticesColors[(i*components)+5] = dirtyObject.triangles[i].color.b;
+				verticesColors[(i*components)+6] = dirtyObject.triangles[i].color.a;
+			}
+
+			return verticesColors;
+
+		case "Line":
+			point1 = dirtyObject.point1;
+			point2 = dirtyObject.point2;
+
+			verticesColors = new Float32Array([
+			point1.vertex.x, point1.vertex.y, point1.vertex.z,
+			dirtyObject.color.r, dirtyObject.color.g, dirtyObject.color.b, 
+			dirtyObject.color.a,
+			point2.vertex.x, point2.vertex.y, point2.vertex.z,
+			dirtyObject.color.r, dirtyObject.color.g, dirtyObject.color.b, 
+			dirtyObject.color.a]);
+
+			return verticesColors;
+
+		case "Point":
+
+			verticesColors = new Float32Array([
+			dirtyObject.vertex.x, dirtyObject.vertex.y, dirtyObject.vertex.z,
+			dirtyObject.color.r, dirtyObject.color.g, dirtyObject.color.b, 
+			dirtyObject.color.a]);
+
+			return verticesColors;
+
+		default:
+			console.log("Renderer cannont generate an array for this object");
+
+	}
+};
+
+Renderer.prototype.renderSurface = function(surface){
+	//using the surface's memory index (graphics memory address), the actual memory
+	//location in the buffer is stored in "memoryLocation"
+	var numberOfVertices = surface.triangles.length;
+	var memoryLocation = this.memory.blockList[surface.graphicsMemoryAddress].location;
+
+	//draw the surface
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.memory.graphicsBuffer);
+	this.gl.vertexAttribPointer(this.a_Position, 3, this.gl.FLOAT, false, 28, memoryLocation);
+	this.gl.enableVertexAttribArray(this.a_Position);
+	this.gl.vertexAttribPointer(this.a_Color, 4, this.gl.FLOAT, false, 28, memoryLocation+12);
+	this.gl.enableVertexAttribArray(this.a_Color);
+	
+	this.gl.drawArrays(this.gl.TRIANGLES, 0, numberOfVertices);
+
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+};
+
+Renderer.prototype.renderLine = function(line){
+	//using the point's memory index (graphics memory address), the actual memory
+	//location in the buffer is stored in "memoryLocation"
+	var memoryLocation = this.memory.blockList[line.graphicsMemoryAddress].location;
+
+	//draw the line
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.memory.graphicsBuffer);
+	this.gl.vertexAttribPointer(this.a_Position, 3, this.gl.FLOAT, false, 28, memoryLocation);
+	this.gl.enableVertexAttribArray(this.a_Position);
+	this.gl.vertexAttribPointer(this.a_Color, 4, this.gl.FLOAT, false, 28, memoryLocation+12);
+	this.gl.enableVertexAttribArray(this.a_Color);
+
+	this.gl.drawArrays(this.gl.LINES, 0, 2);
+
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+	//console.log(line.color);
+	
+};
+
+Renderer.prototype.renderPoint = function(point){
+
+//using the point's memory index (graphics memory address), the actual memory
+//location in the buffer is stored in "memoryLocation"
+var memoryLocation = this.memory.blockList[point.graphicsMemoryAddress].location;
+
+	//draw the point
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.memory.graphicsBuffer);
+	this.gl.vertexAttribPointer(this.a_Position, 3, this.gl.FLOAT, false, 28, memoryLocation);
+	this.gl.enableVertexAttribArray(this.a_Position);
+	this.gl.vertexAttribPointer(this.a_Color, 4, this.gl.FLOAT, false, 28, memoryLocation+12);
+	this.gl.enableVertexAttribArray(this.a_Color);
+	
+	this.gl.drawArrays(this.gl.POINTS, 0, 1);
+
+	this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+
+	
+};
+
+Renderer.prototype.resizeCanvas = function(canvas){
+		canvas.width = window.innerWidth;
+		canvas.height = window.innerHeight;
+		this.gl.viewport(0, 0, canvas.width, canvas.height);
+		this.projMatrix.setPerspective(60, canvas.width/canvas.height, 1, 20000);
+		this.gl.uniformMatrix4fv(this.u_ProjMatrix, false, this.projMatrix.elements);
+};
+
+
+
+//end of meat and potatoes--------------------------------------------------------------	
+
+
+
+
+
+
+
diff --git a/Sketch.js b/Sketch.js
new file mode 100644
index 0000000..ef885e7
--- /dev/null
+++ b/Sketch.js
@@ -0,0 +1,30 @@
+//Sketch.js
+function Sketch(idIn, parentIn, parentDirtyListCallback, planeIn){
+	this.type = "Sketch";
+	this.usesRenderList = true;
+	this.id = idIn;
+	this.parent = parentIn;
+	this.passDirtyToParent = parentDirtyListCallback;
+
+	//this is the plane that the sketch sits on
+	this.plane = planeIn;
+
+	//this is the list of objects in the sketch
+	this.renderList = [];
+	this.dirtyList = [];
+
+	//every child of the sketch gets a local id number
+	this.idGen = new IdGenerator();
+}
+
+Sketch.prototype.addPoint = function(xIn, yIn, zIn, colorIn){
+	point = new Point(this.idGen.getId, this.id, this.dirtyListCallback.bind(this),
+					 xIn, yIn, zIn, colorIn);
+	this.renderList.push(point);
+	this.passDirtyToParent(point);
+
+};
+
+Sketch.prototype.dirtyListCallback = function(dirtyObject){
+	this.passDirtyToParent(dirtyObject);
+};
\ No newline at end of file
diff --git a/Surface.js b/Surface.js
new file mode 100644
index 0000000..22ed975
--- /dev/null
+++ b/Surface.js
@@ -0,0 +1,22 @@
+//Surface.js
+//Written by Brandon Poythress
+//14MAY2018
+//Description: 
+//Surface class
+
+
+
+//Surface class----------------------
+function Surface(idIn, parentIdIn, parentDirtyListCallbackIn, colorIn){
+	//Surface inherits properties from ModelObject but not methods
+	ModelObject.call(this, "Surface", idIn, parentIdIn, false, parentDirtyListCallbackIn);
+
+	//Surface is a drawable object
+	DrawableObject.call(this, colorIn);
+	
+	this.triangles = [];
+
+}
+
+Surface.prototype = Object.create(DrawableObject.prototype);
+Surface.prototype.constructor = Surface;
\ No newline at end of file
diff --git a/Test.js b/Test.js
new file mode 100644
index 0000000..1f0b48c
--- /dev/null
+++ b/Test.js
@@ -0,0 +1,198 @@
+//Freedom.js
+
+//if there are textures you have to run a local server with the command:
+// If Python version is 3.X
+// python -m http.server
+// If Python version is 2.X
+// python -m SimpleHTTPServer
+
+
+
+function main(){
+	//retrieve the canvas from the html file
+	var canvas = document.getElementById('webgl');
+	if(!canvas){
+		console.log('Failed to retrieve the <canvas> element');
+		return;
+	}
+	//get the rendering context
+	// var gl = getWebGLContext(canvas);
+	// if(!gl){
+	// 	console.log('Failed to get the rendering context for WebGL');
+	// 	return;
+	// }
+
+
+	//create the renderer instance
+	//var renderer = new Renderer(gl);
+	
+	
+	//load state
+	var currentState = new ModelState();
+}	
+	
+// 	//holds the time of last view update
+// 	var lastUpdate = Date.now();
+
+
+// 	//draw state
+// 	renderer.draw(currentState);
+
+// 	//define the game Loop
+// 	var gameLoop = function(){
+// 			currentState.update(lastUpdate);
+// 			renderer.render(currentState);
+// 			requestAnimationFrame(gameLoop);
+// 	};
+
+// 	//starting the main game loop
+// 	gameLoop();
+// }	
+	
+////////////////////////////////////////////////////////////////////////////////////
+//a reference game loop from google
+
+
+// function update(progress) {
+//   // Update the state of the world for the elapsed time since last render
+// }
+// 
+// function draw() {
+//   // Draw the state of the world
+// }
+// 
+// function loop(timestamp) {
+//   var progress = timestamp - lastRender
+// 
+//   update(progress)
+//   draw()
+// 
+//   lastRender = timestamp
+//   window.requestAnimationFrame(loop)
+// }
+// var lastRender = 0
+// window.requestAnimationFrame(loop)
+// 
+// 
+
+////////////////////////////////////	
+	
+
+	
+	
+	// Set the positions of vertices
+// 	var n = initVertexBuffers(gl);
+// 	if (n<0){
+// 		console.log('Failed to set the positions of the vertices');
+// 		return;
+// 	}
+// 	
+// 	Get the storage location of u_ViewMatrix  and u_ModelMatrix variable
+// 	var u_ViewMatrix = gl.getUniformLocation(gl.program, 'u_ViewMatrix');
+// 	var u_ProjMatrix = gl.getUniformLocation(gl.program, 'u_ProjMatrix');
+// 	
+// 	Set the eye point, look at point, and up direction
+// 	var viewMatrix = new Matrix4();
+// 	
+// 	Register the event handler to be called on key press
+// 	document.onkeydown = function(ev){
+// 		keydown(ev, gl, n, u_ViewMatrix, viewMatrix)
+// 	};
+// 	
+// 	var projMatrix = new Matrix4();
+// 	projMatrix.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 2.0);
+// 	gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
+// 	
+// 	draw(gl, n, u_ViewMatrix, viewMatrix);
+// 	
+// 	
+// 	
+// }
+// 
+// var g_eyeX = 0.20;
+// var g_eyeY = 0.25;
+// var g_eyeZ = 0.25;
+// 
+// function keydown(ev, gl, n, u_ViewMatrix, viewMatrix){
+// 	if(ev.keyCode == 39){
+// 		g_eyeX += 0.01;
+// 	} else if(ev.keyCode ==37){
+// 		g_eyeX -= 0.01;
+// 	} else{
+// 		return;
+// 	}
+// 	draw(gl, n, u_ViewMatrix, viewMatrix);
+// 
+// }
+// 
+// function draw(gl, n, u_ViewMatrix, viewMatrix){
+// 		viewMatrix.setLookAt(g_eyeX, g_eyeY, g_eyeZ, 0, 0, 0, 0, 1, 0);
+// 		gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
+// 		gl.clear(gl.COLOR_BUFFER_BIT);
+// 		gl.drawArrays(gl.TRIANGLES, 0, n);
+// }
+// 
+// function initVertexBuffers(gl){
+// 	var verticesColors = new Float32Array([
+// 
+// 	0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // The back green one
+//     -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
+//      0.5, -0.5,  -0.4,  1.0,  0.4,  0.4, 
+//    
+//      0.5,  0.4,  -0.2,  1.0,  0.4,  0.4, // The middle yellow one
+//     -0.5,  0.4,  -0.2,  1.0,  1.0,  0.4,
+//      0.0, -0.6,  -0.2,  1.0,  1.0,  0.4, 
+// 
+//      0.0,  0.5,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
+//     -0.5, -0.5,   0.0,  0.4,  0.4,  1.0,
+//      0.5, -0.5,   0.0,  1.0,  0.4,  0.4
+// 		]);
+// 	
+// 	var n = 9;
+// 	
+// 	create buffer object
+// 	var vertexColorBuffer = gl.createBuffer();
+// 	if(!vertexColorBuffer){
+// 		console.log('Failed to create buffer object');
+// 		return -1;
+// 	}
+// 	
+// 	Bind the buffer object to the target
+// 	gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
+// 	
+// 	Write data into the buffer object
+// 	gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
+// 	
+// 	var FSIZE = verticesColors.BYTES_PER_ELEMENT;
+// 	
+// 	var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
+// 	if (a_Position<0){
+// 		console.log('Failed to get location of a_Position');
+// 	}
+// 	
+// 	var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
+// 	if (a_Color<0){
+// 		console.log('Failed to get location of a_Color');
+// 	}
+// 	
+// 	Assign the buffer object to a_Position variable and enable it
+// 	gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE*6, 0);
+// 	gl.enableVertexAttribArray(a_Position);
+// 	
+// 	Assign the buffer object to a_TexCoord variable and enable it
+// 	gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE*6, FSIZE*3);
+// 	gl.enableVertexAttribArray(a_Color);
+// 	
+// 	Unbind the buffer object
+//    gl.bindBuffer(gl.ARRAY_BUFFER, null);
+// 	
+// 	return n;
+// }
+
+	
+
+	
+	
+	
+	
+	
\ No newline at end of file
diff --git a/Vertex.js b/Vertex.js
new file mode 100644
index 0000000..dd76996
--- /dev/null
+++ b/Vertex.js
@@ -0,0 +1,17 @@
+//Vertex.js
+//Written by Brandon Poythress
+//14MAY2018
+//Description: 
+//I found that it was necessary to separate vertices from points.
+//Points are objects that are visible and selectable to the user.
+//vertices are the building blocks for complex objects but
+//are not necessarily viewable or able to be interacted with by
+//the user.  Each point will contain a vertex object, but
+//every vertex will not be necessarily be a point.
+
+function Vertex(xIn, yIn, zIn){
+
+	this.x = xIn;
+	this.y = yIn;
+	this.z = zIn;
+}
\ No newline at end of file
diff --git a/freedom.html b/freedom.html
new file mode 100644
index 0000000..91b2ea0
--- /dev/null
+++ b/freedom.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf=8"/>
+		<title>CAD Like</title>
+		<style>
+			html, body{
+				width: 100%;
+				height:100%;
+				margin:0px;
+				border:0;
+				overflow:hidden; /*disable scrollbars*/
+				display:block; /*no floating content on sides*/
+			}
+		</style>
+	</head>
+	
+	<body onload="main()">
+		<canvas id="webgl" style = 'position: absolute; left: 0px; top: 0px;'>
+			Please use a browser that supports "canvas"	
+		</canvas>
+		
+		<script src="lib/webgl-utils.js"></script>
+		<script src="lib/webgl-debug.js"></script>
+		<script src="lib/cuon-utils.js"></script>
+		<script src="lib/cuon-matrix.js"></script>
+		<script src="Color.js"></script>
+		<script src="ModelObject.js"></script>
+		<script src="DrawableObject.js"></script>
+		<script src="Vertex.js"></script>
+		<script src="Point.js"></script>
+		<script src="Line.js"></script>
+		<script src="Surface.js"></script>
+		<script src="EventHandler.js"></script>
+		<script src="GPUMemManager.js"></script>
+		<script src="IdGenerator.js"></script>
+		<script src="LabScene.js"></script>
+		<script src="ModelState.js"></script>
+		<script src="Plane.js"></script>
+		<script src="Portal.js"></script>
+		<script src="Renderer.js"></script>
+		<script src="Sketch.js"></script>
+		<script src="Freedom.js"></script>
+	</body>
+
+</html>
\ No newline at end of file
diff --git a/lib/IntersectionMath.js b/lib/IntersectionMath.js
new file mode 100644
index 0000000..e69de29
diff --git a/lib/cuon-matrix.js b/lib/cuon-matrix.js
new file mode 100755
index 0000000..26585b7
--- /dev/null
+++ b/lib/cuon-matrix.js
@@ -0,0 +1,741 @@
+// cuon-matrix.js (c) 2012 kanda and matsuda
+/** 
+ * This is a class treating 4x4 matrix.
+ * This class contains the function that is equivalent to OpenGL matrix stack.
+ * The matrix after conversion is calculated by multiplying a conversion matrix from the right.
+ * The matrix is replaced by the calculated result.
+ */
+
+/**
+ * Constructor of Matrix4
+ * If opt_src is specified, new matrix is initialized by opt_src.
+ * Otherwise, new matrix is initialized by identity matrix.
+ * @param opt_src source matrix(option)
+ */
+var Matrix4 = function(opt_src) {
+  var i, s, d;
+  if (opt_src && typeof opt_src === 'object' && opt_src.hasOwnProperty('elements')) {
+    s = opt_src.elements;
+    d = new Float32Array(16);
+    for (i = 0; i < 16; ++i) {
+      d[i] = s[i];
+    }
+    this.elements = d;
+  } else {
+    this.elements = new Float32Array([1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]);
+  }
+};
+
+/**
+ * Set the identity matrix.
+ * @return this
+ */
+Matrix4.prototype.setIdentity = function() {
+  var e = this.elements;
+  e[0] = 1;   e[4] = 0;   e[8]  = 0;   e[12] = 0;
+  e[1] = 0;   e[5] = 1;   e[9]  = 0;   e[13] = 0;
+  e[2] = 0;   e[6] = 0;   e[10] = 1;   e[14] = 0;
+  e[3] = 0;   e[7] = 0;   e[11] = 0;   e[15] = 1;
+  return this;
+};
+
+/**
+ * Copy matrix.
+ * @param src source matrix
+ * @return this
+ */
+Matrix4.prototype.set = function(src) {
+  var i, s, d;
+
+  s = src.elements;
+  d = this.elements;
+
+  if (s === d) {
+    return;
+  }
+    
+  for (i = 0; i < 16; ++i) {
+    d[i] = s[i];
+  }
+
+  return this;
+};
+
+/**
+ * Multiply the matrix from the right.
+ * @param other The multiply matrix
+ * @return this
+ */
+Matrix4.prototype.concat = function(other) {
+  var i, e, a, b, ai0, ai1, ai2, ai3;
+  
+  // Calculate e = a * b
+  e = this.elements;
+  a = this.elements;
+  b = other.elements;
+  
+  // If e equals b, copy b to temporary matrix.
+  if (e === b) {
+    b = new Float32Array(16);
+    for (i = 0; i < 16; ++i) {
+      b[i] = e[i];
+    }
+  }
+  
+  for (i = 0; i < 4; i++) {
+    ai0=a[i];  ai1=a[i+4];  ai2=a[i+8];  ai3=a[i+12];
+    e[i]    = ai0 * b[0]  + ai1 * b[1]  + ai2 * b[2]  + ai3 * b[3];
+    e[i+4]  = ai0 * b[4]  + ai1 * b[5]  + ai2 * b[6]  + ai3 * b[7];
+    e[i+8]  = ai0 * b[8]  + ai1 * b[9]  + ai2 * b[10] + ai3 * b[11];
+    e[i+12] = ai0 * b[12] + ai1 * b[13] + ai2 * b[14] + ai3 * b[15];
+  }
+  
+  return this;
+};
+Matrix4.prototype.multiply = Matrix4.prototype.concat;
+
+/**
+ * Multiply the three-dimensional vector.
+ * @param pos  The multiply vector
+ * @return The result of multiplication(Float32Array)
+ */
+Matrix4.prototype.multiplyVector3 = function(pos) {
+  var e = this.elements;
+  var p = pos.elements;
+  var v = new Vector3();
+  var result = v.elements;
+
+  result[0] = p[0] * e[0] + p[1] * e[4] + p[2] * e[ 8] + e[12];
+  result[1] = p[0] * e[1] + p[1] * e[5] + p[2] * e[ 9] + e[13];
+  result[2] = p[0] * e[2] + p[1] * e[6] + p[2] * e[10] + e[14];
+
+  return v;
+};
+
+/**
+ * Multiply the four-dimensional vector.
+ * @param pos  The multiply vector
+ * @return The result of multiplication(Float32Array)
+ */
+Matrix4.prototype.multiplyVector4 = function(pos) {
+  var e = this.elements;
+  var p = pos.elements;
+  var v = new Vector4();
+  var result = v.elements;
+
+  result[0] = p[0] * e[0] + p[1] * e[4] + p[2] * e[ 8] + p[3] * e[12];
+  result[1] = p[0] * e[1] + p[1] * e[5] + p[2] * e[ 9] + p[3] * e[13];
+  result[2] = p[0] * e[2] + p[1] * e[6] + p[2] * e[10] + p[3] * e[14];
+  result[3] = p[0] * e[3] + p[1] * e[7] + p[2] * e[11] + p[3] * e[15];
+
+  return v;
+};
+
+/**
+ * Transpose the matrix.
+ * @return this
+ */
+Matrix4.prototype.transpose = function() {
+  var e, t;
+
+  e = this.elements;
+
+  t = e[ 1];  e[ 1] = e[ 4];  e[ 4] = t;
+  t = e[ 2];  e[ 2] = e[ 8];  e[ 8] = t;
+  t = e[ 3];  e[ 3] = e[12];  e[12] = t;
+  t = e[ 6];  e[ 6] = e[ 9];  e[ 9] = t;
+  t = e[ 7];  e[ 7] = e[13];  e[13] = t;
+  t = e[11];  e[11] = e[14];  e[14] = t;
+
+  return this;
+};
+
+/**
+ * Calculate the inverse matrix of specified matrix, and set to this.
+ * @param other The source matrix
+ * @return this
+ */
+Matrix4.prototype.setInverseOf = function(other) {
+  var i, s, d, inv, det;
+
+  s = other.elements;
+  d = this.elements;
+  inv = new Float32Array(16);
+
+  inv[0]  =   s[5]*s[10]*s[15] - s[5] *s[11]*s[14] - s[9] *s[6]*s[15]
+            + s[9]*s[7] *s[14] + s[13]*s[6] *s[11] - s[13]*s[7]*s[10];
+  inv[4]  = - s[4]*s[10]*s[15] + s[4] *s[11]*s[14] + s[8] *s[6]*s[15]
+            - s[8]*s[7] *s[14] - s[12]*s[6] *s[11] + s[12]*s[7]*s[10];
+  inv[8]  =   s[4]*s[9] *s[15] - s[4] *s[11]*s[13] - s[8] *s[5]*s[15]
+            + s[8]*s[7] *s[13] + s[12]*s[5] *s[11] - s[12]*s[7]*s[9];
+  inv[12] = - s[4]*s[9] *s[14] + s[4] *s[10]*s[13] + s[8] *s[5]*s[14]
+            - s[8]*s[6] *s[13] - s[12]*s[5] *s[10] + s[12]*s[6]*s[9];
+
+  inv[1]  = - s[1]*s[10]*s[15] + s[1] *s[11]*s[14] + s[9] *s[2]*s[15]
+            - s[9]*s[3] *s[14] - s[13]*s[2] *s[11] + s[13]*s[3]*s[10];
+  inv[5]  =   s[0]*s[10]*s[15] - s[0] *s[11]*s[14] - s[8] *s[2]*s[15]
+            + s[8]*s[3] *s[14] + s[12]*s[2] *s[11] - s[12]*s[3]*s[10];
+  inv[9]  = - s[0]*s[9] *s[15] + s[0] *s[11]*s[13] + s[8] *s[1]*s[15]
+            - s[8]*s[3] *s[13] - s[12]*s[1] *s[11] + s[12]*s[3]*s[9];
+  inv[13] =   s[0]*s[9] *s[14] - s[0] *s[10]*s[13] - s[8] *s[1]*s[14]
+            + s[8]*s[2] *s[13] + s[12]*s[1] *s[10] - s[12]*s[2]*s[9];
+
+  inv[2]  =   s[1]*s[6]*s[15] - s[1] *s[7]*s[14] - s[5] *s[2]*s[15]
+            + s[5]*s[3]*s[14] + s[13]*s[2]*s[7]  - s[13]*s[3]*s[6];
+  inv[6]  = - s[0]*s[6]*s[15] + s[0] *s[7]*s[14] + s[4] *s[2]*s[15]
+            - s[4]*s[3]*s[14] - s[12]*s[2]*s[7]  + s[12]*s[3]*s[6];
+  inv[10] =   s[0]*s[5]*s[15] - s[0] *s[7]*s[13] - s[4] *s[1]*s[15]
+            + s[4]*s[3]*s[13] + s[12]*s[1]*s[7]  - s[12]*s[3]*s[5];
+  inv[14] = - s[0]*s[5]*s[14] + s[0] *s[6]*s[13] + s[4] *s[1]*s[14]
+            - s[4]*s[2]*s[13] - s[12]*s[1]*s[6]  + s[12]*s[2]*s[5];
+
+  inv[3]  = - s[1]*s[6]*s[11] + s[1]*s[7]*s[10] + s[5]*s[2]*s[11]
+            - s[5]*s[3]*s[10] - s[9]*s[2]*s[7]  + s[9]*s[3]*s[6];
+  inv[7]  =   s[0]*s[6]*s[11] - s[0]*s[7]*s[10] - s[4]*s[2]*s[11]
+            + s[4]*s[3]*s[10] + s[8]*s[2]*s[7]  - s[8]*s[3]*s[6];
+  inv[11] = - s[0]*s[5]*s[11] + s[0]*s[7]*s[9]  + s[4]*s[1]*s[11]
+            - s[4]*s[3]*s[9]  - s[8]*s[1]*s[7]  + s[8]*s[3]*s[5];
+  inv[15] =   s[0]*s[5]*s[10] - s[0]*s[6]*s[9]  - s[4]*s[1]*s[10]
+            + s[4]*s[2]*s[9]  + s[8]*s[1]*s[6]  - s[8]*s[2]*s[5];
+
+  det = s[0]*inv[0] + s[1]*inv[4] + s[2]*inv[8] + s[3]*inv[12];
+  if (det === 0) {
+    return this;
+  }
+
+  det = 1 / det;
+  for (i = 0; i < 16; i++) {
+    d[i] = inv[i] * det;
+  }
+
+  return this;
+};
+
+/**
+ * Calculate the inverse matrix of this, and set to this.
+ * @return this
+ */
+Matrix4.prototype.invert = function() {
+  return this.setInverseOf(this);
+};
+
+/**
+ * Set the orthographic projection matrix.
+ * @param left The coordinate of the left of clipping plane.
+ * @param right The coordinate of the right of clipping plane.
+ * @param bottom The coordinate of the bottom of clipping plane.
+ * @param top The coordinate of the top top clipping plane.
+ * @param near The distances to the nearer depth clipping plane. This value is minus if the plane is to be behind the viewer.
+ * @param far The distances to the farther depth clipping plane. This value is minus if the plane is to be behind the viewer.
+ * @return this
+ */
+Matrix4.prototype.setOrtho = function(left, right, bottom, top, near, far) {
+  var e, rw, rh, rd;
+
+  if (left === right || bottom === top || near === far) {
+    throw 'null frustum';
+  }
+
+  rw = 1 / (right - left);
+  rh = 1 / (top - bottom);
+  rd = 1 / (far - near);
+
+  e = this.elements;
+
+  e[0]  = 2 * rw;
+  e[1]  = 0;
+  e[2]  = 0;
+  e[3]  = 0;
+
+  e[4]  = 0;
+  e[5]  = 2 * rh;
+  e[6]  = 0;
+  e[7]  = 0;
+
+  e[8]  = 0;
+  e[9]  = 0;
+  e[10] = -2 * rd;
+  e[11] = 0;
+
+  e[12] = -(right + left) * rw;
+  e[13] = -(top + bottom) * rh;
+  e[14] = -(far + near) * rd;
+  e[15] = 1;
+
+  return this;
+};
+
+/**
+ * Multiply the orthographic projection matrix from the right.
+ * @param left The coordinate of the left of clipping plane.
+ * @param right The coordinate of the right of clipping plane.
+ * @param bottom The coordinate of the bottom of clipping plane.
+ * @param top The coordinate of the top top clipping plane.
+ * @param near The distances to the nearer depth clipping plane. This value is minus if the plane is to be behind the viewer.
+ * @param far The distances to the farther depth clipping plane. This value is minus if the plane is to be behind the viewer.
+ * @return this
+ */
+Matrix4.prototype.ortho = function(left, right, bottom, top, near, far) {
+  return this.concat(new Matrix4().setOrtho(left, right, bottom, top, near, far));
+};
+
+/**
+ * Set the perspective projection matrix.
+ * @param left The coordinate of the left of clipping plane.
+ * @param right The coordinate of the right of clipping plane.
+ * @param bottom The coordinate of the bottom of clipping plane.
+ * @param top The coordinate of the top top clipping plane.
+ * @param near The distances to the nearer depth clipping plane. This value must be plus value.
+ * @param far The distances to the farther depth clipping plane. This value must be plus value.
+ * @return this
+ */
+Matrix4.prototype.setFrustum = function(left, right, bottom, top, near, far) {
+  var e, rw, rh, rd;
+
+  if (left === right || top === bottom || near === far) {
+    throw 'null frustum';
+  }
+  if (near <= 0) {
+    throw 'near <= 0';
+  }
+  if (far <= 0) {
+    throw 'far <= 0';
+  }
+
+  rw = 1 / (right - left);
+  rh = 1 / (top - bottom);
+  rd = 1 / (far - near);
+
+  e = this.elements;
+
+  e[ 0] = 2 * near * rw;
+  e[ 1] = 0;
+  e[ 2] = 0;
+  e[ 3] = 0;
+
+  e[ 4] = 0;
+  e[ 5] = 2 * near * rh;
+  e[ 6] = 0;
+  e[ 7] = 0;
+
+  e[ 8] = (right + left) * rw;
+  e[ 9] = (top + bottom) * rh;
+  e[10] = -(far + near) * rd;
+  e[11] = -1;
+
+  e[12] = 0;
+  e[13] = 0;
+  e[14] = -2 * near * far * rd;
+  e[15] = 0;
+
+  return this;
+};
+
+/**
+ * Multiply the perspective projection matrix from the right.
+ * @param left The coordinate of the left of clipping plane.
+ * @param right The coordinate of the right of clipping plane.
+ * @param bottom The coordinate of the bottom of clipping plane.
+ * @param top The coordinate of the top top clipping plane.
+ * @param near The distances to the nearer depth clipping plane. This value must be plus value.
+ * @param far The distances to the farther depth clipping plane. This value must be plus value.
+ * @return this
+ */
+Matrix4.prototype.frustum = function(left, right, bottom, top, near, far) {
+  return this.concat(new Matrix4().setFrustum(left, right, bottom, top, near, far));
+};
+
+/**
+ * Set the perspective projection matrix by fovy and aspect.
+ * @param fovy The angle between the upper and lower sides of the frustum.
+ * @param aspect The aspect ratio of the frustum. (width/height)
+ * @param near The distances to the nearer depth clipping plane. This value must be plus value.
+ * @param far The distances to the farther depth clipping plane. This value must be plus value.
+ * @return this
+ */
+Matrix4.prototype.setPerspective = function(fovy, aspect, near, far) {
+  var e, rd, s, ct;
+
+  if (near === far || aspect === 0) {
+    throw 'null frustum';
+  }
+  if (near <= 0) {
+    throw 'near <= 0';
+  }
+  if (far <= 0) {
+    throw 'far <= 0';
+  }
+
+  fovy = Math.PI * fovy / 180 / 2;
+  s = Math.sin(fovy);
+  if (s === 0) {
+    throw 'null frustum';
+  }
+
+  rd = 1 / (far - near);
+  ct = Math.cos(fovy) / s;
+
+  e = this.elements;
+
+  e[0]  = ct / aspect;
+  e[1]  = 0;
+  e[2]  = 0;
+  e[3]  = 0;
+
+  e[4]  = 0;
+  e[5]  = ct;
+  e[6]  = 0;
+  e[7]  = 0;
+
+  e[8]  = 0;
+  e[9]  = 0;
+  e[10] = -(far + near) * rd;
+  e[11] = -1;
+
+  e[12] = 0;
+  e[13] = 0;
+  e[14] = -2 * near * far * rd;
+  e[15] = 0;
+
+  return this;
+};
+
+/**
+ * Multiply the perspective projection matrix from the right.
+ * @param fovy The angle between the upper and lower sides of the frustum.
+ * @param aspect The aspect ratio of the frustum. (width/height)
+ * @param near The distances to the nearer depth clipping plane. This value must be plus value.
+ * @param far The distances to the farther depth clipping plane. This value must be plus value.
+ * @return this
+ */
+Matrix4.prototype.perspective = function(fovy, aspect, near, far) {
+  return this.concat(new Matrix4().setPerspective(fovy, aspect, near, far));
+};
+
+/**
+ * Set the matrix for scaling.
+ * @param x The scale factor along the X axis
+ * @param y The scale factor along the Y axis
+ * @param z The scale factor along the Z axis
+ * @return this
+ */
+Matrix4.prototype.setScale = function(x, y, z) {
+  var e = this.elements;
+  e[0] = x;  e[4] = 0;  e[8]  = 0;  e[12] = 0;
+  e[1] = 0;  e[5] = y;  e[9]  = 0;  e[13] = 0;
+  e[2] = 0;  e[6] = 0;  e[10] = z;  e[14] = 0;
+  e[3] = 0;  e[7] = 0;  e[11] = 0;  e[15] = 1;
+  return this;
+};
+
+/**
+ * Multiply the matrix for scaling from the right.
+ * @param x The scale factor along the X axis
+ * @param y The scale factor along the Y axis
+ * @param z The scale factor along the Z axis
+ * @return this
+ */
+Matrix4.prototype.scale = function(x, y, z) {
+  var e = this.elements;
+  e[0] *= x;  e[4] *= y;  e[8]  *= z;
+  e[1] *= x;  e[5] *= y;  e[9]  *= z;
+  e[2] *= x;  e[6] *= y;  e[10] *= z;
+  e[3] *= x;  e[7] *= y;  e[11] *= z;
+  return this;
+};
+
+/**
+ * Set the matrix for translation.
+ * @param x The X value of a translation.
+ * @param y The Y value of a translation.
+ * @param z The Z value of a translation.
+ * @return this
+ */
+Matrix4.prototype.setTranslate = function(x, y, z) {
+  var e = this.elements;
+  e[0] = 1;  e[4] = 0;  e[8]  = 0;  e[12] = x;
+  e[1] = 0;  e[5] = 1;  e[9]  = 0;  e[13] = y;
+  e[2] = 0;  e[6] = 0;  e[10] = 1;  e[14] = z;
+  e[3] = 0;  e[7] = 0;  e[11] = 0;  e[15] = 1;
+  return this;
+};
+
+/**
+ * Multiply the matrix for translation from the right.
+ * @param x The X value of a translation.
+ * @param y The Y value of a translation.
+ * @param z The Z value of a translation.
+ * @return this
+ */
+Matrix4.prototype.translate = function(x, y, z) {
+  var e = this.elements;
+  e[12] += e[0] * x + e[4] * y + e[8]  * z;
+  e[13] += e[1] * x + e[5] * y + e[9]  * z;
+  e[14] += e[2] * x + e[6] * y + e[10] * z;
+  e[15] += e[3] * x + e[7] * y + e[11] * z;
+  return this;
+};
+
+/**
+ * Set the matrix for rotation.
+ * The vector of rotation axis may not be normalized.
+ * @param angle The angle of rotation (degrees)
+ * @param x The X coordinate of vector of rotation axis.
+ * @param y The Y coordinate of vector of rotation axis.
+ * @param z The Z coordinate of vector of rotation axis.
+ * @return this
+ */
+Matrix4.prototype.setRotate = function(angle, x, y, z) {
+  var e, s, c, len, rlen, nc, xy, yz, zx, xs, ys, zs;
+
+  angle = Math.PI * angle / 180;
+  e = this.elements;
+
+  s = Math.sin(angle);
+  c = Math.cos(angle);
+
+  if (0 !== x && 0 === y && 0 === z) {
+    // Rotation around X axis
+    if (x < 0) {
+      s = -s;
+    }
+    e[0] = 1;  e[4] = 0;  e[ 8] = 0;  e[12] = 0;
+    e[1] = 0;  e[5] = c;  e[ 9] =-s;  e[13] = 0;
+    e[2] = 0;  e[6] = s;  e[10] = c;  e[14] = 0;
+    e[3] = 0;  e[7] = 0;  e[11] = 0;  e[15] = 1;
+  } else if (0 === x && 0 !== y && 0 === z) {
+    // Rotation around Y axis
+    if (y < 0) {
+      s = -s;
+    }
+    e[0] = c;  e[4] = 0;  e[ 8] = s;  e[12] = 0;
+    e[1] = 0;  e[5] = 1;  e[ 9] = 0;  e[13] = 0;
+    e[2] =-s;  e[6] = 0;  e[10] = c;  e[14] = 0;
+    e[3] = 0;  e[7] = 0;  e[11] = 0;  e[15] = 1;
+  } else if (0 === x && 0 === y && 0 !== z) {
+    // Rotation around Z axis
+    if (z < 0) {
+      s = -s;
+    }
+    e[0] = c;  e[4] =-s;  e[ 8] = 0;  e[12] = 0;
+    e[1] = s;  e[5] = c;  e[ 9] = 0;  e[13] = 0;
+    e[2] = 0;  e[6] = 0;  e[10] = 1;  e[14] = 0;
+    e[3] = 0;  e[7] = 0;  e[11] = 0;  e[15] = 1;
+  } else {
+    // Rotation around another axis
+    len = Math.sqrt(x*x + y*y + z*z);
+    if (len !== 1) {
+      rlen = 1 / len;
+      x *= rlen;
+      y *= rlen;
+      z *= rlen;
+    }
+    nc = 1 - c;
+    xy = x * y;
+    yz = y * z;
+    zx = z * x;
+    xs = x * s;
+    ys = y * s;
+    zs = z * s;
+
+    e[ 0] = x*x*nc +  c;
+    e[ 1] = xy *nc + zs;
+    e[ 2] = zx *nc - ys;
+    e[ 3] = 0;
+
+    e[ 4] = xy *nc - zs;
+    e[ 5] = y*y*nc +  c;
+    e[ 6] = yz *nc + xs;
+    e[ 7] = 0;
+
+    e[ 8] = zx *nc + ys;
+    e[ 9] = yz *nc - xs;
+    e[10] = z*z*nc +  c;
+    e[11] = 0;
+
+    e[12] = 0;
+    e[13] = 0;
+    e[14] = 0;
+    e[15] = 1;
+  }
+
+  return this;
+};
+
+/**
+ * Multiply the matrix for rotation from the right.
+ * The vector of rotation axis may not be normalized.
+ * @param angle The angle of rotation (degrees)
+ * @param x The X coordinate of vector of rotation axis.
+ * @param y The Y coordinate of vector of rotation axis.
+ * @param z The Z coordinate of vector of rotation axis.
+ * @return this
+ */
+Matrix4.prototype.rotate = function(angle, x, y, z) {
+  return this.concat(new Matrix4().setRotate(angle, x, y, z));
+};
+
+/**
+ * Set the viewing matrix.
+ * @param eyeX, eyeY, eyeZ The position of the eye point.
+ * @param centerX, centerY, centerZ The position of the reference point.
+ * @param upX, upY, upZ The direction of the up vector.
+ * @return this
+ */
+Matrix4.prototype.setLookAt = function(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
+  var e, fx, fy, fz, rlf, sx, sy, sz, rls, ux, uy, uz;
+
+  fx = centerX - eyeX;
+  fy = centerY - eyeY;
+  fz = centerZ - eyeZ;
+
+  // Normalize f.
+  rlf = 1 / Math.sqrt(fx*fx + fy*fy + fz*fz);
+  fx *= rlf;
+  fy *= rlf;
+  fz *= rlf;
+
+  // Calculate cross product of f and up.
+  sx = fy * upZ - fz * upY;
+  sy = fz * upX - fx * upZ;
+  sz = fx * upY - fy * upX;
+
+  // Normalize s.
+  rls = 1 / Math.sqrt(sx*sx + sy*sy + sz*sz);
+  sx *= rls;
+  sy *= rls;
+  sz *= rls;
+
+  // Calculate cross product of s and f.
+  ux = sy * fz - sz * fy;
+  uy = sz * fx - sx * fz;
+  uz = sx * fy - sy * fx;
+
+  // Set to this.
+  e = this.elements;
+  e[0] = sx;
+  e[1] = ux;
+  e[2] = -fx;
+  e[3] = 0;
+
+  e[4] = sy;
+  e[5] = uy;
+  e[6] = -fy;
+  e[7] = 0;
+
+  e[8] = sz;
+  e[9] = uz;
+  e[10] = -fz;
+  e[11] = 0;
+
+  e[12] = 0;
+  e[13] = 0;
+  e[14] = 0;
+  e[15] = 1;
+
+  // Translate.
+  return this.translate(-eyeX, -eyeY, -eyeZ);
+};
+
+/**
+ * Multiply the viewing matrix from the right.
+ * @param eyeX, eyeY, eyeZ The position of the eye point.
+ * @param centerX, centerY, centerZ The position of the reference point.
+ * @param upX, upY, upZ The direction of the up vector.
+ * @return this
+ */
+Matrix4.prototype.lookAt = function(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ) {
+  return this.concat(new Matrix4().setLookAt(eyeX, eyeY, eyeZ, centerX, centerY, centerZ, upX, upY, upZ));
+};
+
+/**
+ * Multiply the matrix for project vertex to plane from the right.
+ * @param plane The array[A, B, C, D] of the equation of plane "Ax + By + Cz + D = 0".
+ * @param light The array which stored coordinates of the light. if light[3]=0, treated as parallel light.
+ * @return this
+ */
+Matrix4.prototype.dropShadow = function(plane, light) {
+  var mat = new Matrix4();
+  var e = mat.elements;
+
+  var dot = plane[0] * light[0] + plane[1] * light[1] + plane[2] * light[2] + plane[3] * light[3];
+
+  e[ 0] = dot - light[0] * plane[0];
+  e[ 1] =     - light[1] * plane[0];
+  e[ 2] =     - light[2] * plane[0];
+  e[ 3] =     - light[3] * plane[0];
+
+  e[ 4] =     - light[0] * plane[1];
+  e[ 5] = dot - light[1] * plane[1];
+  e[ 6] =     - light[2] * plane[1];
+  e[ 7] =     - light[3] * plane[1];
+
+  e[ 8] =     - light[0] * plane[2];
+  e[ 9] =     - light[1] * plane[2];
+  e[10] = dot - light[2] * plane[2];
+  e[11] =     - light[3] * plane[2];
+
+  e[12] =     - light[0] * plane[3];
+  e[13] =     - light[1] * plane[3];
+  e[14] =     - light[2] * plane[3];
+  e[15] = dot - light[3] * plane[3];
+
+  return this.concat(mat);
+}
+
+/**
+ * Multiply the matrix for project vertex to plane from the right.(Projected by parallel light.)
+ * @param normX, normY, normZ The normal vector of the plane.(Not necessary to be normalized.)
+ * @param planeX, planeY, planeZ The coordinate of arbitrary points on a plane.
+ * @param lightX, lightY, lightZ The vector of the direction of light.(Not necessary to be normalized.)
+ * @return this
+ */
+Matrix4.prototype.dropShadowDirectionally = function(normX, normY, normZ, planeX, planeY, planeZ, lightX, lightY, lightZ) {
+  var a = planeX * normX + planeY * normY + planeZ * normZ;
+  return this.dropShadow([normX, normY, normZ, -a], [lightX, lightY, lightZ, 0]);
+};
+
+/**
+ * Constructor of Vector3
+ * If opt_src is specified, new vector is initialized by opt_src.
+ * @param opt_src source vector(option)
+ */
+var Vector3 = function(opt_src) {
+  var v = new Float32Array(3);
+  if (opt_src && typeof opt_src === 'object') {
+    v[0] = opt_src[0]; v[1] = opt_src[1]; v[2] = opt_src[2];
+  } 
+  this.elements = v;
+}
+
+/**
+  * Normalize.
+  * @return this
+  */
+Vector3.prototype.normalize = function() {
+  var v = this.elements;
+  var c = v[0], d = v[1], e = v[2], g = Math.sqrt(c*c+d*d+e*e);
+  if(g){
+    if(g == 1)
+        return this;
+   } else {
+     v[0] = 0; v[1] = 0; v[2] = 0;
+     return this;
+   }
+   g = 1/g;
+   v[0] = c*g; v[1] = d*g; v[2] = e*g;
+   return this;
+};
+
+/**
+ * Constructor of Vector4
+ * If opt_src is specified, new vector is initialized by opt_src.
+ * @param opt_src source vector(option)
+ */
+var Vector4 = function(opt_src) {
+  var v = new Float32Array(4);
+  if (opt_src && typeof opt_src === 'object') {
+    v[0] = opt_src[0]; v[1] = opt_src[1]; v[2] = opt_src[2]; v[3] = opt_src[3];
+  } 
+  this.elements = v;
+}
diff --git a/lib/cuon-utils.js b/lib/cuon-utils.js
new file mode 100755
index 0000000..3968d72
--- /dev/null
+++ b/lib/cuon-utils.js
@@ -0,0 +1,113 @@
+// cuon-utils.js (c) 2012 kanda and matsuda
+/**
+ * Create a program object and make current
+ * @param gl GL context
+ * @param vshader a vertex shader program (string)
+ * @param fshader a fragment shader program (string)
+ * @return true, if the program object was created and successfully made current 
+ */
+function initShaders(gl, vshader, fshader) {
+  var program = createProgram(gl, vshader, fshader);
+  if (!program) {
+    console.log('Failed to create program');
+    return false;
+  }
+
+  gl.useProgram(program);
+  gl.program = program;
+
+  return true;
+}
+
+/**
+ * Create the linked program object
+ * @param gl GL context
+ * @param vshader a vertex shader program (string)
+ * @param fshader a fragment shader program (string)
+ * @return created program object, or null if the creation has failed
+ */
+function createProgram(gl, vshader, fshader) {
+  // Create shader object
+  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
+  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
+  if (!vertexShader || !fragmentShader) {
+    return null;
+  }
+
+  // Create a program object
+  var program = gl.createProgram();
+  if (!program) {
+    return null;
+  }
+
+  // Attach the shader objects
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+
+  // Link the program object
+  gl.linkProgram(program);
+
+  // Check the result of linking
+  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+  if (!linked) {
+    var error = gl.getProgramInfoLog(program);
+    console.log('Failed to link program: ' + error);
+    gl.deleteProgram(program);
+    gl.deleteShader(fragmentShader);
+    gl.deleteShader(vertexShader);
+    return null;
+  }
+  return program;
+}
+
+/**
+ * Create a shader object
+ * @param gl GL context
+ * @param type the type of the shader object to be created
+ * @param source shader program (string)
+ * @return created shader object, or null if the creation has failed.
+ */
+function loadShader(gl, type, source) {
+  // Create shader object
+  var shader = gl.createShader(type);
+  if (shader == null) {
+    console.log('unable to create shader');
+    return null;
+  }
+
+  // Set the shader program
+  gl.shaderSource(shader, source);
+
+  // Compile the shader
+  gl.compileShader(shader);
+
+  // Check the result of compilation
+  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+  if (!compiled) {
+    var error = gl.getShaderInfoLog(shader);
+    console.log('Failed to compile shader: ' + error);
+    gl.deleteShader(shader);
+    return null;
+  }
+
+  return shader;
+}
+
+/** 
+ * Initialize and get the rendering for WebGL
+ * @param canvas <cavnas> element
+ * @param opt_debug flag to initialize the context for debugging
+ * @return the rendering context for WebGL
+ */
+function getWebGLContext(canvas, opt_debug) {
+  // Get the rendering context for WebGL
+  var gl = WebGLUtils.setupWebGL(canvas);
+  if (!gl) return null;
+
+  // if opt_debug is explicitly false, create the context for debugging
+  if (arguments.length < 2 || opt_debug) {
+    gl = WebGLDebugUtils.makeDebugContext(gl);
+  }
+
+  return gl;
+}
diff --git a/lib/webgl-debug.js b/lib/webgl-debug.js
new file mode 100755
index 0000000..2fd32de
--- /dev/null
+++ b/lib/webgl-debug.js
@@ -0,0 +1,677 @@
+//Copyright (c) 2009 The Chromium Authors. All rights reserved.
+//Use of this source code is governed by a BSD-style license that can be
+//found in the LICENSE file.
+
+// Various functions for helping debug WebGL apps.
+
+WebGLDebugUtils = function() {
+
+/**
+ * Wrapped logging function.
+ * @param {string} msg Message to log.
+ */
+var log = function(msg) {
+  if (window.console && window.console.log) {
+    window.console.log(msg);
+  }
+};
+
+/**
+ * Which arguements are enums.
+ * @type {!Object.<number, string>}
+ */
+var glValidEnumContexts = {
+
+  // Generic setters and getters
+
+  'enable': { 0:true },
+  'disable': { 0:true },
+  'getParameter': { 0:true },
+
+  // Rendering
+
+  'drawArrays': { 0:true },
+  'drawElements': { 0:true, 2:true },
+
+  // Shaders
+
+  'createShader': { 0:true },
+  'getShaderParameter': { 1:true },
+  'getProgramParameter': { 1:true },
+
+  // Vertex attributes
+
+  'getVertexAttrib': { 1:true },
+  'vertexAttribPointer': { 2:true },
+
+  // Textures
+
+  'bindTexture': { 0:true },
+  'activeTexture': { 0:true },
+  'getTexParameter': { 0:true, 1:true },
+  'texParameterf': { 0:true, 1:true },
+  'texParameteri': { 0:true, 1:true, 2:true },
+  'texImage2D': { 0:true, 2:true, 6:true, 7:true },
+  'texSubImage2D': { 0:true, 6:true, 7:true },
+  'copyTexImage2D': { 0:true, 2:true },
+  'copyTexSubImage2D': { 0:true },
+  'generateMipmap': { 0:true },
+
+  // Buffer objects
+
+  'bindBuffer': { 0:true },
+  'bufferData': { 0:true, 2:true },
+  'bufferSubData': { 0:true },
+  'getBufferParameter': { 0:true, 1:true },
+
+  // Renderbuffers and framebuffers
+
+  'pixelStorei': { 0:true, 1:true },
+  'readPixels': { 4:true, 5:true },
+  'bindRenderbuffer': { 0:true },
+  'bindFramebuffer': { 0:true },
+  'checkFramebufferStatus': { 0:true },
+  'framebufferRenderbuffer': { 0:true, 1:true, 2:true },
+  'framebufferTexture2D': { 0:true, 1:true, 2:true },
+  'getFramebufferAttachmentParameter': { 0:true, 1:true, 2:true },
+  'getRenderbufferParameter': { 0:true, 1:true },
+  'renderbufferStorage': { 0:true, 1:true },
+
+  // Frame buffer operations (clear, blend, depth test, stencil)
+
+  'clear': { 0:true },
+  'depthFunc': { 0:true },
+  'blendFunc': { 0:true, 1:true },
+  'blendFuncSeparate': { 0:true, 1:true, 2:true, 3:true },
+  'blendEquation': { 0:true },
+  'blendEquationSeparate': { 0:true, 1:true },
+  'stencilFunc': { 0:true },
+  'stencilFuncSeparate': { 0:true, 1:true },
+  'stencilMaskSeparate': { 0:true },
+  'stencilOp': { 0:true, 1:true, 2:true },
+  'stencilOpSeparate': { 0:true, 1:true, 2:true, 3:true },
+
+  // Culling
+
+  'cullFace': { 0:true },
+  'frontFace': { 0:true },
+};
+
+/**
+ * Map of numbers to names.
+ * @type {Object}
+ */
+var glEnums = null;
+
+/**
+ * Initializes this module. Safe to call more than once.
+ * @param {!WebGLRenderingContext} ctx A WebGL context. If
+ *    you have more than one context it doesn't matter which one
+ *    you pass in, it is only used to pull out constants.
+ */
+function init(ctx) {
+  if (glEnums == null) {
+    glEnums = { };
+    for (var propertyName in ctx) {
+      if (typeof ctx[propertyName] == 'number') {
+        glEnums[ctx[propertyName]] = propertyName;
+      }
+    }
+  }
+}
+
+/**
+ * Checks the utils have been initialized.
+ */
+function checkInit() {
+  if (glEnums == null) {
+    throw 'WebGLDebugUtils.init(ctx) not called';
+  }
+}
+
+/**
+ * Returns true or false if value matches any WebGL enum
+ * @param {*} value Value to check if it might be an enum.
+ * @return {boolean} True if value matches one of the WebGL defined enums
+ */
+function mightBeEnum(value) {
+  checkInit();
+  return (glEnums[value] !== undefined);
+}
+
+/**
+ * Gets an string version of an WebGL enum.
+ *
+ * Example:
+ *   var str = WebGLDebugUtil.glEnumToString(ctx.getError());
+ *
+ * @param {number} value Value to return an enum for
+ * @return {string} The string version of the enum.
+ */
+function glEnumToString(value) {
+  checkInit();
+  var name = glEnums[value];
+  return (name !== undefined) ? name :
+      ("*UNKNOWN WebGL ENUM (0x" + value.toString(16) + ")");
+}
+
+/**
+ * Returns the string version of a WebGL argument.
+ * Attempts to convert enum arguments to strings.
+ * @param {string} functionName the name of the WebGL function.
+ * @param {number} argumentIndx the index of the argument.
+ * @param {*} value The value of the argument.
+ * @return {string} The value as a string.
+ */
+function glFunctionArgToString(functionName, argumentIndex, value) {
+  var funcInfo = glValidEnumContexts[functionName];
+  if (funcInfo !== undefined) {
+    if (funcInfo[argumentIndex]) {
+      return glEnumToString(value);
+    }
+  }
+  return value.toString();
+}
+
+/**
+ * Given a WebGL context returns a wrapped context that calls
+ * gl.getError after every command and calls a function if the
+ * result is not gl.NO_ERROR.
+ *
+ * @param {!WebGLRenderingContext} ctx The webgl context to
+ *        wrap.
+ * @param {!function(err, funcName, args): void} opt_onErrorFunc
+ *        The function to call when gl.getError returns an
+ *        error. If not specified the default function calls
+ *        console.log with a message.
+ */
+function makeDebugContext(ctx, opt_onErrorFunc) {
+  init(ctx);
+  opt_onErrorFunc = opt_onErrorFunc || function(err, functionName, args) {
+        // apparently we can't do args.join(",");
+        var argStr = "";
+        for (var ii = 0; ii < args.length; ++ii) {
+          argStr += ((ii == 0) ? '' : ', ') +
+              glFunctionArgToString(functionName, ii, args[ii]);
+        }
+        log("WebGL error "+ glEnumToString(err) + " in "+ functionName +
+            "(" + argStr + ")");
+      };
+
+  // Holds booleans for each GL error so after we get the error ourselves
+  // we can still return it to the client app.
+  var glErrorShadow = { };
+
+  // Makes a function that calls a WebGL function and then calls getError.
+  function makeErrorWrapper(ctx, functionName) {
+    return function() {
+      var result = ctx[functionName].apply(ctx, arguments);
+      var err = ctx.getError();
+      if (err != 0) {
+        glErrorShadow[err] = true;
+        opt_onErrorFunc(err, functionName, arguments);
+      }
+      return result;
+    };
+  }
+
+  // Make a an object that has a copy of every property of the WebGL context
+  // but wraps all functions.
+  var wrapper = {};
+  for (var propertyName in ctx) {
+    if (typeof ctx[propertyName] == 'function') {
+       wrapper[propertyName] = makeErrorWrapper(ctx, propertyName);
+     } else {
+       wrapper[propertyName] = ctx[propertyName];
+     }
+  }
+
+  // Override the getError function with one that returns our saved results.
+  wrapper.getError = function() {
+    for (var err in glErrorShadow) {
+      if (glErrorShadow[err]) {
+        glErrorShadow[err] = false;
+        return err;
+      }
+    }
+    return ctx.NO_ERROR;
+  };
+
+  return wrapper;
+}
+
+function resetToInitialState(ctx) {
+  var numAttribs = ctx.getParameter(ctx.MAX_VERTEX_ATTRIBS);
+  var tmp = ctx.createBuffer();
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, tmp);
+  for (var ii = 0; ii < numAttribs; ++ii) {
+    ctx.disableVertexAttribArray(ii);
+    ctx.vertexAttribPointer(ii, 4, ctx.FLOAT, false, 0, 0);
+    ctx.vertexAttrib1f(ii, 0);
+  }
+  ctx.deleteBuffer(tmp);
+
+  var numTextureUnits = ctx.getParameter(ctx.MAX_TEXTURE_IMAGE_UNITS);
+  for (var ii = 0; ii < numTextureUnits; ++ii) {
+    ctx.activeTexture(ctx.TEXTURE0 + ii);
+    ctx.bindTexture(ctx.TEXTURE_CUBE_MAP, null);
+    ctx.bindTexture(ctx.TEXTURE_2D, null);
+  }
+
+  ctx.activeTexture(ctx.TEXTURE0);
+  ctx.useProgram(null);
+  ctx.bindBuffer(ctx.ARRAY_BUFFER, null);
+  ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, null);
+  ctx.bindFramebuffer(ctx.FRAMEBUFFER, null);
+  ctx.bindRenderbuffer(ctx.RENDERBUFFER, null);
+  ctx.disable(ctx.BLEND);
+  ctx.disable(ctx.CULL_FACE);
+  ctx.disable(ctx.DEPTH_TEST);
+  ctx.disable(ctx.DITHER);
+  ctx.disable(ctx.SCISSOR_TEST);
+  ctx.blendColor(0, 0, 0, 0);
+  ctx.blendEquation(ctx.FUNC_ADD);
+  ctx.blendFunc(ctx.ONE, ctx.ZERO);
+  ctx.clearColor(0, 0, 0, 0);
+  ctx.clearDepth(1);
+  ctx.clearStencil(-1);
+  ctx.colorMask(true, true, true, true);
+  ctx.cullFace(ctx.BACK);
+  ctx.depthFunc(ctx.LESS);
+  ctx.depthMask(true);
+  ctx.depthRange(0, 1);
+  ctx.frontFace(ctx.CCW);
+  ctx.hint(ctx.GENERATE_MIPMAP_HINT, ctx.DONT_CARE);
+  ctx.lineWidth(1);
+  ctx.pixelStorei(ctx.PACK_ALIGNMENT, 4);
+  ctx.pixelStorei(ctx.UNPACK_ALIGNMENT, 4);
+  ctx.pixelStorei(ctx.UNPACK_FLIP_Y_WEBGL, false);
+  ctx.pixelStorei(ctx.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
+  // TODO: Delete this IF.
+  if (ctx.UNPACK_COLORSPACE_CONVERSION_WEBGL) {
+    ctx.pixelStorei(ctx.UNPACK_COLORSPACE_CONVERSION_WEBGL, ctx.BROWSER_DEFAULT_WEBGL);
+  }
+  ctx.polygonOffset(0, 0);
+  ctx.sampleCoverage(1, false);
+  ctx.scissor(0, 0, ctx.canvas.width, ctx.canvas.height);
+  ctx.stencilFunc(ctx.ALWAYS, 0, 0xFFFFFFFF);
+  ctx.stencilMask(0xFFFFFFFF);
+  ctx.stencilOp(ctx.KEEP, ctx.KEEP, ctx.KEEP);
+  ctx.viewport(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);
+  ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT | ctx.STENCIL_BUFFER_BIT);
+
+  // TODO: This should NOT be needed but Firefox fails with 'hint'
+  while(ctx.getError());
+}
+
+function makeLostContextSimulatingContext(ctx) {
+  var wrapper_ = {};
+  var contextId_ = 1;
+  var contextLost_ = false;
+  var resourceId_ = 0;
+  var resourceDb_ = [];
+  var onLost_ = undefined;
+  var onRestored_ = undefined;
+  var nextOnRestored_ = undefined;
+
+  // Holds booleans for each GL error so can simulate errors.
+  var glErrorShadow_ = { };
+
+  function isWebGLObject(obj) {
+    //return false;
+    return (obj instanceof WebGLBuffer ||
+            obj instanceof WebGLFramebuffer ||
+            obj instanceof WebGLProgram ||
+            obj instanceof WebGLRenderbuffer ||
+            obj instanceof WebGLShader ||
+            obj instanceof WebGLTexture);
+  }
+
+  function checkResources(args) {
+    for (var ii = 0; ii < args.length; ++ii) {
+      var arg = args[ii];
+      if (isWebGLObject(arg)) {
+        return arg.__webglDebugContextLostId__ == contextId_;
+      }
+    }
+    return true;
+  }
+
+  function clearErrors() {
+    var k = Object.keys(glErrorShadow_);
+    for (var ii = 0; ii < k.length; ++ii) {
+      delete glErrorShdow_[k];
+    }
+  }
+
+  // Makes a function that simulates WebGL when out of context.
+  function makeLostContextWrapper(ctx, functionName) {
+    var f = ctx[functionName];
+    return function() {
+      // Only call the functions if the context is not lost.
+      if (!contextLost_) {
+        if (!checkResources(arguments)) {
+          glErrorShadow_[ctx.INVALID_OPERATION] = true;
+          return;
+        }
+        var result = f.apply(ctx, arguments);
+        return result;
+      }
+    };
+  }
+
+  for (var propertyName in ctx) {
+    if (typeof ctx[propertyName] == 'function') {
+       wrapper_[propertyName] = makeLostContextWrapper(ctx, propertyName);
+     } else {
+       wrapper_[propertyName] = ctx[propertyName];
+     }
+  }
+
+  function makeWebGLContextEvent(statusMessage) {
+    return {statusMessage: statusMessage};
+  }
+
+  function freeResources() {
+    for (var ii = 0; ii < resourceDb_.length; ++ii) {
+      var resource = resourceDb_[ii];
+      if (resource instanceof WebGLBuffer) {
+        ctx.deleteBuffer(resource);
+      } else if (resource instanceof WebctxFramebuffer) {
+        ctx.deleteFramebuffer(resource);
+      } else if (resource instanceof WebctxProgram) {
+        ctx.deleteProgram(resource);
+      } else if (resource instanceof WebctxRenderbuffer) {
+        ctx.deleteRenderbuffer(resource);
+      } else if (resource instanceof WebctxShader) {
+        ctx.deleteShader(resource);
+      } else if (resource instanceof WebctxTexture) {
+        ctx.deleteTexture(resource);
+      }
+    }
+  }
+
+  wrapper_.loseContext = function() {
+    if (!contextLost_) {
+      contextLost_ = true;
+      ++contextId_;
+      while (ctx.getError());
+      clearErrors();
+      glErrorShadow_[ctx.CONTEXT_LOST_WEBGL] = true;
+      setTimeout(function() {
+          if (onLost_) {
+            onLost_(makeWebGLContextEvent("context lost"));
+          }
+        }, 0);
+    }
+  };
+
+  wrapper_.restoreContext = function() {
+    if (contextLost_) {
+      if (onRestored_) {
+        setTimeout(function() {
+            freeResources();
+            resetToInitialState(ctx);
+            contextLost_ = false;
+            if (onRestored_) {
+              var callback = onRestored_;
+              onRestored_ = nextOnRestored_;
+              nextOnRestored_ = undefined;
+              callback(makeWebGLContextEvent("context restored"));
+            }
+          }, 0);
+      } else {
+        throw "You can not restore the context without a listener"
+      }
+    }
+  };
+
+  // Wrap a few functions specially.
+  wrapper_.getError = function() {
+    if (!contextLost_) {
+      var err;
+      while (err = ctx.getError()) {
+        glErrorShadow_[err] = true;
+      }
+    }
+    for (var err in glErrorShadow_) {
+      if (glErrorShadow_[err]) {
+        delete glErrorShadow_[err];
+        return err;
+      }
+    }
+    return ctx.NO_ERROR;
+  };
+
+  var creationFunctions = [
+    "createBuffer",
+    "createFramebuffer",
+    "createProgram",
+    "createRenderbuffer",
+    "createShader",
+    "createTexture"
+  ];
+  for (var ii = 0; ii < creationFunctions.length; ++ii) {
+    var functionName = creationFunctions[ii];
+    wrapper_[functionName] = function(f) {
+      return function() {
+        if (contextLost_) {
+          return null;
+        }
+        var obj = f.apply(ctx, arguments);
+        obj.__webglDebugContextLostId__ = contextId_;
+        resourceDb_.push(obj);
+        return obj;
+      };
+    }(ctx[functionName]);
+  }
+
+  var functionsThatShouldReturnNull = [
+    "getActiveAttrib",
+    "getActiveUniform",
+    "getBufferParameter",
+    "getContextAttributes",
+    "getAttachedShaders",
+    "getFramebufferAttachmentParameter",
+    "getParameter",
+    "getProgramParameter",
+    "getProgramInfoLog",
+    "getRenderbufferParameter",
+    "getShaderParameter",
+    "getShaderInfoLog",
+    "getShaderSource",
+    "getTexParameter",
+    "getUniform",
+    "getUniformLocation",
+    "getVertexAttrib"
+  ];
+  for (var ii = 0; ii < functionsThatShouldReturnNull.length; ++ii) {
+    var functionName = functionsThatShouldReturnNull[ii];
+    wrapper_[functionName] = function(f) {
+      return function() {
+        if (contextLost_) {
+          return null;
+        }
+        return f.apply(ctx, arguments);
+      }
+    }(wrapper_[functionName]);
+  }
+
+  var isFunctions = [
+    "isBuffer",
+    "isEnabled",
+    "isFramebuffer",
+    "isProgram",
+    "isRenderbuffer",
+    "isShader",
+    "isTexture"
+  ];
+  for (var ii = 0; ii < isFunctions.length; ++ii) {
+    var functionName = isFunctions[ii];
+    wrapper_[functionName] = function(f) {
+      return function() {
+        if (contextLost_) {
+          return false;
+        }
+        return f.apply(ctx, arguments);
+      }
+    }(wrapper_[functionName]);
+  }
+
+  wrapper_.checkFramebufferStatus = function(f) {
+    return function() {
+      if (contextLost_) {
+        return ctx.FRAMEBUFFER_UNSUPPORTED;
+      }
+      return f.apply(ctx, arguments);
+    };
+  }(wrapper_.checkFramebufferStatus);
+
+  wrapper_.getAttribLocation = function(f) {
+    return function() {
+      if (contextLost_) {
+        return -1;
+      }
+      return f.apply(ctx, arguments);
+    };
+  }(wrapper_.getAttribLocation);
+
+  wrapper_.getVertexAttribOffset = function(f) {
+    return function() {
+      if (contextLost_) {
+        return 0;
+      }
+      return f.apply(ctx, arguments);
+    };
+  }(wrapper_.getVertexAttribOffset);
+
+  wrapper_.isContextLost = function() {
+    return contextLost_;
+  };
+
+  function wrapEvent(listener) {
+    if (typeof(listener) == "function") {
+      return listener;
+    } else {
+      return function(info) {
+        listener.handleEvent(info);
+      }
+    }
+  }
+
+  wrapper_.registerOnContextLostListener = function(listener) {
+    onLost_ = wrapEvent(listener);
+  };
+
+  wrapper_.registerOnContextRestoredListener = function(listener) {
+    if (contextLost_) {
+      nextOnRestored_ = wrapEvent(listener);
+    } else {
+      onRestored_ = wrapEvent(listener);
+    }
+  }
+
+  return wrapper_;
+}
+
+return {
+  /**
+   * Initializes this module. Safe to call more than once.
+   * @param {!WebGLRenderingContext} ctx A WebGL context. If
+   *    you have more than one context it doesn't matter which one
+   *    you pass in, it is only used to pull out constants.
+   */
+  'init': init,
+
+  /**
+   * Returns true or false if value matches any WebGL enum
+   * @param {*} value Value to check if it might be an enum.
+   * @return {boolean} True if value matches one of the WebGL defined enums
+   */
+  'mightBeEnum': mightBeEnum,
+
+  /**
+   * Gets an string version of an WebGL enum.
+   *
+   * Example:
+   *   WebGLDebugUtil.init(ctx);
+   *   var str = WebGLDebugUtil.glEnumToString(ctx.getError());
+   *
+   * @param {number} value Value to return an enum for
+   * @return {string} The string version of the enum.
+   */
+  'glEnumToString': glEnumToString,
+
+  /**
+   * Converts the argument of a WebGL function to a string.
+   * Attempts to convert enum arguments to strings.
+   *
+   * Example:
+   *   WebGLDebugUtil.init(ctx);
+   *   var str = WebGLDebugUtil.glFunctionArgToString('bindTexture', 0, gl.TEXTURE_2D);
+   *
+   * would return 'TEXTURE_2D'
+   *
+   * @param {string} functionName the name of the WebGL function.
+   * @param {number} argumentIndx the index of the argument.
+   * @param {*} value The value of the argument.
+   * @return {string} The value as a string.
+   */
+  'glFunctionArgToString': glFunctionArgToString,
+
+  /**
+   * Given a WebGL context returns a wrapped context that calls
+   * gl.getError after every command and calls a function if the
+   * result is not NO_ERROR.
+   *
+   * You can supply your own function if you want. For example, if you'd like
+   * an exception thrown on any GL error you could do this
+   *
+   *    function throwOnGLError(err, funcName, args) {
+   *      throw WebGLDebugUtils.glEnumToString(err) + " was caused by call to" +
+   *            funcName;
+   *    };
+   *
+   *    ctx = WebGLDebugUtils.makeDebugContext(
+   *        canvas.getContext("webgl"), throwOnGLError);
+   *
+   * @param {!WebGLRenderingContext} ctx The webgl context to wrap.
+   * @param {!function(err, funcName, args): void} opt_onErrorFunc The function
+   *     to call when gl.getError returns an error. If not specified the default
+   *     function calls console.log with a message.
+   */
+  'makeDebugContext': makeDebugContext,
+
+  /**
+   * Given a WebGL context returns a wrapped context that adds 4
+   * functions.
+   *
+   * ctx.loseContext:
+   *   simulates a lost context event.
+   *
+   * ctx.restoreContext:
+   *   simulates the context being restored.
+   *
+   * ctx.registerOnContextLostListener(listener):
+   *   lets you register a listener for context lost. Use instead
+   *   of addEventListener('webglcontextlostevent', listener);
+   *
+   * ctx.registerOnContextRestoredListener(listener):
+   *   lets you register a listener for context restored. Use
+   *   instead of addEventListener('webglcontextrestored',
+   *   listener);
+   *
+   * @param {!WebGLRenderingContext} ctx The webgl context to wrap.
+   */
+  'makeLostContextSimulatingContext': makeLostContextSimulatingContext,
+
+  /**
+   * Resets a context to the initial state.
+   * @param {!WebGLRenderingContext} ctx The webgl context to
+   *     reset.
+   */
+  'resetToInitialState': resetToInitialState
+};
+
+}();
+
diff --git a/lib/webgl-utils.js b/lib/webgl-utils.js
new file mode 100755
index 0000000..4c63041
--- /dev/null
+++ b/lib/webgl-utils.js
@@ -0,0 +1,197 @@
+/*
+ * Copyright 2010, Google Inc.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Google Inc. nor the names of its
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+
+/**
+ * @fileoverview This file contains functions every webgl program will need
+ * a version of one way or another.
+ *
+ * Instead of setting up a context manually it is recommended to
+ * use. This will check for success or failure. On failure it
+ * will attempt to present an approriate message to the user.
+ *
+ *       gl = WebGLUtils.setupWebGL(canvas);
+ *
+ * For animated WebGL apps use of setTimeout or setInterval are
+ * discouraged. It is recommended you structure your rendering
+ * loop like this.
+ *
+ *       function render() {
+ *         window.requestAnimationFrame(render, canvas);
+ *
+ *         // do rendering
+ *         ...
+ *       }
+ *       render();
+ *
+ * This will call your rendering function up to the refresh rate
+ * of your display but will stop rendering if your app is not
+ * visible.
+ */
+
+WebGLUtils = function() {
+
+/**
+ * Creates the HTLM for a failure message
+ * @param {string} canvasContainerId id of container of th
+ *        canvas.
+ * @return {string} The html.
+ */
+var makeFailHTML = function(msg) {
+  return '' +
+        '<div style="margin: auto; width:500px;z-index:10000;margin-top:20em;text-align:center;">' + msg + '</div>';
+  return '' +
+    '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
+    '<td align="center">' +
+    '<div style="display: table-cell; vertical-align: middle;">' +
+    '<div style="">' + msg + '</div>' +
+    '</div>' +
+    '</td></tr></table>';
+};
+
+/**
+ * Mesasge for getting a webgl browser
+ * @type {string}
+ */
+var GET_A_WEBGL_BROWSER = '' +
+  'This page requires a browser that supports WebGL.<br/>' +
+  '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
+
+/**
+ * Mesasge for need better hardware
+ * @type {string}
+ */
+var OTHER_PROBLEM = '' +
+  "It doesn't appear your computer can support WebGL.<br/>" +
+  '<a href="http://get.webgl.org">Click here for more information.</a>';
+
+/**
+ * Creates a webgl context. If creation fails it will
+ * change the contents of the container of the <canvas>
+ * tag to an error message with the correct links for WebGL.
+ * @param {Element} canvas. The canvas element to create a
+ *     context from.
+ * @param {WebGLContextCreationAttirbutes} opt_attribs Any
+ *     creation attributes you want to pass in.
+ * @param {function:(msg)} opt_onError An function to call
+ *     if there is an error during creation.
+ * @return {WebGLRenderingContext} The created context.
+ */
+var setupWebGL = function(canvas, opt_attribs, opt_onError) {
+  function handleCreationError(msg) {
+      var container = document.getElementsByTagName("body")[0];
+    //var container = canvas.parentNode;
+    if (container) {
+      var str = window.WebGLRenderingContext ?
+           OTHER_PROBLEM :
+           GET_A_WEBGL_BROWSER;
+      if (msg) {
+        str += "<br/><br/>Status: " + msg;
+      }
+      container.innerHTML = makeFailHTML(str);
+    }
+  };
+
+  opt_onError = opt_onError || handleCreationError;
+
+  if (canvas.addEventListener) {
+    canvas.addEventListener("webglcontextcreationerror", function(event) {
+          opt_onError(event.statusMessage);
+        }, false);
+  }
+  var context = create3DContext(canvas, opt_attribs);
+  if (!context) {
+    if (!window.WebGLRenderingContext) {
+      opt_onError("");
+    } else {
+      opt_onError("");
+    }
+  }
+
+  return context;
+};
+
+/**
+ * Creates a webgl context.
+ * @param {!Canvas} canvas The canvas tag to get context
+ *     from. If one is not passed in one will be created.
+ * @return {!WebGLContext} The created context.
+ */
+var create3DContext = function(canvas, opt_attribs) {
+  var names = ["webgl", "experimental-webgl", "webkit-3d", "moz-webgl"];
+  var context = null;
+  for (var ii = 0; ii < names.length; ++ii) {
+    try {
+      context = canvas.getContext(names[ii], opt_attribs);
+    } catch(e) {}
+    if (context) {
+      break;
+    }
+  }
+  return context;
+}
+
+return {
+  create3DContext: create3DContext,
+  setupWebGL: setupWebGL
+};
+}();
+
+/**
+ * Provides requestAnimationFrame in a cross browser
+ * way.
+ */
+if (!window.requestAnimationFrame) {
+  window.requestAnimationFrame = (function() {
+    return window.requestAnimationFrame ||
+           window.webkitRequestAnimationFrame ||
+           window.mozRequestAnimationFrame ||
+           window.oRequestAnimationFrame ||
+           window.msRequestAnimationFrame ||
+           function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
+             window.setTimeout(callback, 1000/60);
+           };
+  })();
+}
+
+/** * ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec. 
+ * 
+ * Cancels an animation frame request. 
+ * Checks for cross-browser support, falls back to clearTimeout. 
+ * @param {number}  Animation frame request. */
+if (!window.cancelAnimationFrame) {
+  window.cancelAnimationFrame = (window.cancelRequestAnimationFrame ||
+                                 window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame ||
+                                 window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame ||
+                                 window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame ||
+                                 window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame ||
+                                 window.clearTimeout);
+}
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100644
index 0000000..1ed463c
--- /dev/null
+++ b/test.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf=8"/>
+		<title>Look At Triangles With Keys</title>
+	</head>
+	
+	<body onload="main()">
+		<canvas id="webgl" width="400" height="400">
+			Please use a browser that supports "canvas"	
+		</canvas>
+		
+		<script src="Portal.js"></script>
+		<script src="LabScene.js"></script>
+		<script src="ModelState.js"></script>
+		<script src="EventHandler.js"></script>
+		<script src="Plane.js"></script>
+		<script src="DrawingPrimatives.js"></script>
+		<script src="IdGenerator.js"></script>
+		<script src="Test.js"></script>
+	</body>
+
+</html>
\ No newline at end of file