first cube showing in webgl

.gitignore

@@ -6,3 +6,5 @@
 *.n
 
 /samples/comps/arial.ttf
+/engine.js
+/engine.js.map

engine.hxml

@@ -1,8 +1,5 @@
 -cp samples/basic
--swf engine.swf
--swf-header 800:600:60:FFFFFF
---flash-strict
--swf-version 11
+-js engine.js
 -main Test
 -lib hxsl
 -D h3d

engine.hxproj

@@ -4,13 +4,13 @@
   <output>
     <movie outputType="Application" />
     <movie input="" />
-    <movie path="engine.swf" />
+    <movie path="engine.js" />
     <movie fps="60" />
     <movie width="800" />
     <movie height="600" />
-    <movie version="11" />
+    <movie version="1" />
     <movie minorVersion="0" />
-    <movie platform="Flash Player" />
+    <movie platform="JavaScript" />
     <movie background="#FFFFFF" />
   </output>
   <!-- Other classes to be compiled into your SWF -->
@@ -33,10 +33,6 @@
   <compileTargets>
     <!-- example: <compile path="..." /> -->
   </compileTargets>
-  <!-- Assets to embed into the output SWF -->
-  <library>
-    <!-- example: <asset path="..." id="..." update="..." glyphs="..." mode="..." place="..." sharepoint="..." /> -->
-  </library>
   <!-- Paths to exclude from the Project Explorer tree -->
   <hiddenPaths>
     <hidden path="engine.hxml" />
@@ -48,7 +44,8 @@
   <!-- Other project options -->
   <options>
     <option showHiddenPaths="False" />
-    <option testMovie="Default" />
+    <option testMovie="OpenDocument" />
+    <option testMovieCommand="index.html" />
   </options>
   <!-- Plugin storage -->
   <storage />

h3d/Engine.hx

@@ -47,6 +47,8 @@ class Engine {
 		stage.addResizeEvent(onStageResize);
 		#if flash
 		driver = new h3d.impl.Stage3dDriver();
+		#elseif js
+		driver = new h3d.impl.WebglDriver();
 		#else
 		throw "No driver";
 		#end

h3d/impl/Driver.hx

@@ -4,6 +4,10 @@ package h3d.impl;
 typedef IndexBuffer = flash.display3D.IndexBuffer3D;
 typedef VertexBuffer = Stage3dDriver.VertexWrapper;
 typedef Texture = flash.display3D.textures.TextureBase;
+#elseif js
+typedef IndexBuffer = js.html.webgl.Buffer;
+typedef VertexBuffer = js.html.webgl.Buffer;
+typedef Texture = js.html.webgl.Texture;
 #else
 typedef IndexBuffer = Int;
 typedef VertexBuffer = Int;
@@ -76,12 +80,6 @@ class Driver {
 		return null;
 	}
 
-	public function disposeTexture( t : Texture ) {
-	}
-	
-	public function disposeVertex( v : VertexBuffer ) {
-	}
-	
 	public function allocIndexes( count : Int ) : IndexBuffer {
 		return null;
 	}
@@ -90,6 +88,15 @@ class Driver {
 		return null;
 	}
 	
+	public function disposeTexture( t : Texture ) {
+	}
+	
+	public function disposeIndexes( i : IndexBuffer ) {
+	}
+	
+	public function disposeVertex( v : VertexBuffer ) {
+	}
+	
 	public function uploadIndexesBuffer( i : IndexBuffer, startIndice : Int, indiceCount : Int, buf : hxd.IndexBuffer, bufPos : Int ) {
 	}
 
@@ -102,9 +109,6 @@ class Driver {
 	public function uploadVertexBytes( v : VertexBuffer, startVertex : Int, vertexCount : Int, buf : haxe.io.Bytes, bufPos : Int ) {
 	}
 	
-	public function disposeIndexes( i : IndexBuffer ) {
-	}
-	
 	public function uploadTextureBitmap( t : h3d.mat.Texture, bmp : hxd.BitmapData, mipLevel : Int, side : Int ) {
 	}
 

h3d/impl/MemoryManager.hx

@@ -1,5 +1,11 @@
 package h3d.impl;
 
+#if flash
+private typedef WeakMap<K,T> = haxe.ds.WeakMap<K,T>;
+#else
+private typedef WeakMap<K,T> = haxe.ds.ObjectMap<K,T>;
+#end
+
 @:allow(h3d)
 class FreeCell {
 	var pos : Int;
@@ -85,7 +91,7 @@ class MemoryManager {
 	var buffers : Array<BigBuffer>;
 	var idict : Map<Indexes,Bool>;
 	
-	var tdict : haxe.ds.WeakMap<h3d.mat.Texture,Driver.Texture>;
+	var tdict : WeakMap<h3d.mat.Texture,Driver.Texture>;
 	var textures : Array<Driver.Texture>;
 	
 	public var indexes(default,null) : Indexes;
@@ -99,7 +105,7 @@ class MemoryManager {
 		this.allocSize = allocSize;
 
 		idict = new Map();
-		tdict = new haxe.ds.WeakMap();
+		tdict = new WeakMap();
 		textures = new Array();
 		buffers = new Array();
 		

h3d/impl/Shader.hx

@@ -4,6 +4,13 @@ package h3d.impl;
 typedef Shader = hxsl.Shader;
 #else
 class Shader implements Dynamic {
+	
+	#if js
+	var program : js.html.webgl.Program;
+	var attribs : Array<js.html.webgl.ActiveInfo>;
+	var uniforms : Array<js.html.webgl.ActiveInfo>;
+	#end
+	
 	public function new() {
 	}
 }

h3d/impl/WebglDriver.hx

@@ -0,0 +1,187 @@
+package h3d.impl;
+import h3d.impl.Driver;
+
+private typedef GL = js.html.webgl.GL;
+
+@:access(h3d.impl.Shader)
+class WebglDriver extends Driver {
+
+	var canvas : js.html.CanvasElement;
+	var gl : js.html.webgl.RenderingContext;
+	
+	var curAttribs : Int;
+	
+	public function new() {
+		canvas = cast js.Browser.document.getElementById("webgl");
+		if( canvas == null ) throw "Canvas #webgl not found";
+		gl = canvas.getContextWebGL();
+		if( gl == null ) throw "Could not acquire GL context";
+		// debug if webgl_debug.js is included
+		untyped if( __js__('typeof')(WebGLDebugUtils) != "undefined" ) gl = untyped WebGLDebugUtils.makeDebugContext(gl);
+	}
+	
+	override function clear( r : Float, g : Float, b : Float, a : Float ) {
+		gl.clearColor(r, g, b, a);
+		gl.clearDepth(0);
+		gl.clear(GL.COLOR_BUFFER_BIT|GL.DEPTH_BUFFER_BIT);
+	}
+	
+	override function resize(width, height, aa:Int) {
+		canvas.width = width;
+		canvas.height = height;
+		gl.viewport(0, 0, width, height);
+	}
+	
+	override function allocTexture( t : h3d.mat.Texture ) : Texture {
+		var tt = gl.createTexture();
+		gl.bindTexture(GL.TEXTURE_2D, tt);
+		gl.texImage2D(GL.TEXTURE_2D, 0, GL.RGBA, t.width, t.height, 0, GL.RGBA, GL.UNSIGNED_BYTE, null);
+		gl.bindTexture(GL.TEXTURE_2D, null);
+		return tt;
+	}
+	
+	override function allocVertex( count : Int, stride : Int ) : VertexBuffer {
+		var b = gl.createBuffer();
+		gl.bindBuffer(GL.ARRAY_BUFFER, b);
+		gl.bufferData(GL.ARRAY_BUFFER, count * stride * 4, GL.STATIC_DRAW);
+		gl.bindBuffer(GL.ARRAY_BUFFER, null);
+		untyped b.stride = stride;
+		return b;
+	}
+	
+	override function allocIndexes( count : Int ) : IndexBuffer {
+		var b = gl.createBuffer();
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, b);
+		gl.bufferData(GL.ELEMENT_ARRAY_BUFFER, count * 2, GL.STATIC_DRAW);
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
+		return b;
+	}
+
+	override function disposeTexture( t : Texture ) {
+		gl.deleteTexture(t);
+	}
+
+	override function disposeIndexes( i : IndexBuffer ) {
+		gl.deleteBuffer(i);
+	}
+	
+	override function disposeVertex( v : VertexBuffer ) {
+		gl.deleteBuffer(v);
+	}
+	
+	override function uploadTextureBytes( t : h3d.mat.Texture, bytes : haxe.io.Bytes, mipLevel : Int, side : Int ) {
+		gl.bindTexture(GL.TEXTURE_2D, t.t);
+		var pixels = new js.html.Uint8Array(bytes.getData());
+		gl.texImage2D(GL.TEXTURE_2D, mipLevel, GL.RGBA, t.width, t.height, 0, GL.RGBA, GL.UNSIGNED_BYTE, pixels);
+		gl.bindTexture(GL.TEXTURE_2D, null);
+	}
+	
+	override function uploadVertexBuffer( v : VertexBuffer, startVertex : Int, vertexCount : Int, buf : hxd.FloatBuffer, bufPos : Int ) {
+		var stride : Int = untyped v.stride;
+		var buf = new js.html.Float32Array(buf.getNative());
+		gl.bindBuffer(GL.ARRAY_BUFFER, v);
+		gl.bufferSubData(GL.ARRAY_BUFFER, startVertex * stride * 4, new js.html.Float32Array(buf.buffer, bufPos, vertexCount * stride));
+		gl.bindBuffer(GL.ARRAY_BUFFER, null);
+	}
+
+	override function uploadVertexBytes( v : VertexBuffer, startVertex : Int, vertexCount : Int, buf : haxe.io.Bytes, bufPos : Int ) {
+		var stride : Int = untyped v.stride;
+		var buf = new js.html.Uint8Array(buf.getData());
+		gl.bindBuffer(GL.ARRAY_BUFFER, v);
+		gl.bufferSubData(GL.ARRAY_BUFFER, startVertex * stride * 4, new js.html.Uint8Array(buf.buffer, bufPos, vertexCount * stride * 4));
+		gl.bindBuffer(GL.ARRAY_BUFFER, null);
+	}
+
+	override function uploadIndexesBuffer( i : IndexBuffer, startIndice : Int, indiceCount : Int, buf : hxd.IndexBuffer, bufPos : Int ) {
+		var buf = new js.html.Uint16Array(buf.getNative());
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, i);
+		gl.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, startIndice * 2, new js.html.Uint16Array(buf.buffer, bufPos, indiceCount));
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
+	}
+
+	override function uploadIndexesBytes( i : IndexBuffer, startIndice : Int, indiceCount : Int, buf : haxe.io.Bytes , bufPos : Int ) {
+		var buf = new js.html.Uint8Array(buf.getData());
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, i);
+		gl.bufferSubData(GL.ELEMENT_ARRAY_BUFFER, startIndice * 2, new js.html.Uint8Array(buf.buffer, bufPos, indiceCount * 2));
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
+	}
+
+	override function selectShader( shader : Shader ) : Bool {
+		
+		if( shader.program == null ) {
+			var cl = Type.getClass(shader);
+			function compileShader(name, type) {
+				var code = Reflect.field(cl, name);
+				if( code == null ) throw "Missing " + Type.getClassName(cl) + "." + name + " shader source";
+				var s = gl.createShader(type);
+				gl.shaderSource(s, code);
+				gl.compileShader(s);
+				if( !gl.getShaderParameter(s, GL.COMPILE_STATUS) )
+					throw "An error occurred compiling the shaders: " + gl.getShaderInfoLog(s);
+				return s;
+			}
+			var vs = compileShader("VERTEX", GL.VERTEX_SHADER);
+			var fs = compileShader("FRAGMENT", GL.FRAGMENT_SHADER);
+			
+			var p = gl.createProgram();
+			gl.attachShader(p, vs);
+			gl.attachShader(p, fs);
+			gl.linkProgram(p);
+			if( !gl.getProgramParameter(p, GL.LINK_STATUS) )
+				throw "Program linkage failure";
+			
+			var nattr = gl.getProgramParameter(p, GL.ACTIVE_ATTRIBUTES);
+			var nuni = gl.getProgramParameter(p, GL.ACTIVE_UNIFORMS);
+			shader.attribs = [];
+			for( k in 0...nattr )
+				shader.attribs.push(gl.getActiveAttrib(p, k));
+			shader.uniforms = [];
+			for( k in 0...nuni )
+				shader.uniforms.push(gl.getActiveUniform(p, k));
+			shader.program = p;
+		}
+		
+		gl.useProgram(shader.program);
+		for( i in curAttribs...shader.attribs.length ) {
+			gl.enableVertexAttribArray(i);
+			curAttribs++;
+		}
+		while( curAttribs > shader.attribs.length )
+			gl.disableVertexAttribArray(--curAttribs);
+			
+		var mpos = gl.getUniformLocation(shader.program, "mpos");
+		var mat : Matrix = shader.mpos;
+		gl.uniformMatrix4fv(mpos, false, new js.html.Float32Array(mat.getFloats()));
+
+		var mproj = gl.getUniformLocation(shader.program, "mproj");
+		var mat : Matrix = shader.mproj;
+		gl.uniformMatrix4fv(mproj, false, new js.html.Float32Array(mat.getFloats()));
+		
+		return true;
+	}
+	
+	override function selectBuffer( v : VertexBuffer ) {
+		var stride : Int = untyped v.stride;
+		gl.bindBuffer(GL.ARRAY_BUFFER, v);
+		gl.vertexAttribPointer(0, 3, GL.FLOAT, false, stride * 4, 0);
+		//gl.vertexAttribPointer(1, 2, GL.FLOAT, false, stride * 4, 3 * 4);
+	}
+	
+	override function draw( ibuf : IndexBuffer, startIndex : Int, ntriangles : Int ) {
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, ibuf);
+		gl.drawElements(GL.TRIANGLES, ntriangles * 3, GL.UNSIGNED_SHORT, startIndex * 2);
+		gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, null);
+	}
+	
+	override function present() {
+		gl.finish();
+	}
+
+	override function isDisposed() {
+		return false;
+	}
+
+	override function init( onCreate : Bool -> Void, forceSoftware = false ) {
+		haxe.Timer.delay(onCreate.bind(false), 1);
+	}
+}

h3d/mat/MeshMaterial.hx

@@ -149,6 +149,33 @@ private class MeshShader extends h3d.impl.Shader {
 		}
 		
 	}
+#else
+
+	static var VERTEX = "
+	
+		attribute vec3 pos;
+		//attribute vec2 uv;
+
+		uniform mat4 mpos;
+		uniform mat4 mproj;
+		
+		//varying lowp vec2 tuv;
+
+		void main(void) {
+			gl_Position = mproj * mpos * vec4(pos, 1.0);
+			//tuv = uv;
+		}
+
+	";
+	
+	static var FRAGMENT = "
+	
+		void main(void) {
+			gl_FragColor = vec4(1.0, 0, 0, 1.0);
+		}
+			
+	";
+
 #end
 	
 }

hxd/IndexBuffer.hx

@@ -23,8 +23,12 @@ abstract IndexBuffer(InnerData) {
 	
 	public var length(get, never) : Int;
 	
-	public inline function new(length=0) {
+	public inline function new(length = 0) {
+		#if js
+		this = untyped __new__(Array, length);
+		#else
 		this = new InnerData(length);
+		#end
 	}
 	
 	public inline function push( v : Int ) {

hxd/Resource.hx

@@ -0,0 +1,55 @@
+package hxd;
+#if macro
+import haxe.macro.Context;
+#end
+
+#if js
+abstract BitmapRes(String) {
+	public function new( resourceName : String ) {
+		this = resourceName;
+	}
+	public function toTexture() {
+		var engine = h3d.Engine.getCurrent();
+		var res = haxe.Resource.getBytes(this);
+		if( res == null ) throw "Missing resource " + this;
+		var isPng = res.get(0) == 137;
+		if( isPng ) {
+			var png = new format.png.Reader(new haxe.io.BytesInput(res)).read();
+			var pngBytes = format.png.Tools.extract32(png);
+			var pngHeader = format.png.Tools.getHeader(png);
+			var tex = engine.mem.allocTexture(pngHeader.width, pngHeader.height);
+			tex.uploadBytes(pngBytes);
+			return tex;
+		} else {
+			throw "TODO";
+		}
+	}
+}
+#end
+
+
+class Resource {
+
+	public static macro function embed( fileName : String ) {
+		try {
+			var path = Context.resolvePath(fileName);
+			var ext = fileName.split(".").pop().toLowerCase();
+			switch( ext ) {
+			case "png", "jpg":
+				if( Context.defined("flash") ) {
+					throw "TODO";
+				} else if( Context.defined("js") ) {
+					Context.addResource(fileName, sys.io.File.getBytes(path));
+					return macro new hxd.Resource.BitmapRes($v{fileName});
+				}
+			default:
+				throw "Unsupported file extension '" + ext + "'";
+			}
+			throw "Not implementation for this platform";
+		} catch( msg : String ) {
+			Context.error(msg, Context.currentPos());
+			return macro null;
+		}
+	}
+	
+}

hxd/Stage.hx

@@ -4,9 +4,9 @@ class Stage {
 	
 	#if flash
 	var stage : flash.display.Stage;
-	var resizeEvents : List<Void -> Void>;
 	var fsDelayed : Bool;
 	#end
+	var resizeEvents : List < Void -> Void > ;
 	var eventTargets : List<Event -> Void>;
 	
 	public var width(get, null) : Float;
@@ -16,11 +16,11 @@ class Stage {
 	
 	function new() {
 		eventTargets = new List();
+		resizeEvents = new List();
 		#if flash
 		stage = flash.Lib.current.stage;
 		stage.scaleMode = flash.display.StageScaleMode.NO_SCALE;
 		stage.addEventListener(flash.events.Event.RESIZE, onResize);
-		resizeEvents = new List();
 		if( hxd.System.isTouch ) {
 			flash.ui.Multitouch.inputMode = flash.ui.MultitouchInputMode.TOUCH_POINT;
 			stage.addEventListener(flash.events.TouchEvent.TOUCH_BEGIN, onTouchDown);
@@ -34,6 +34,12 @@ class Stage {
 			stage.addEventListener(flash.events.KeyboardEvent.KEY_DOWN, onKeyDown);
 			stage.addEventListener(flash.events.KeyboardEvent.KEY_UP, onKeyUp);
 		}
+		#elseif js
+		js.Browser.window.addEventListener("mousedown", onMouseDown);
+		js.Browser.window.addEventListener("mouseup", onMouseUp);
+		js.Browser.window.addEventListener("keydown", onKeyDown);
+		js.Browser.window.addEventListener("keyup", onKeyUp);
+		js.Browser.window.addEventListener("resize", onResize);
 		#end
 	}
 	
@@ -51,19 +57,11 @@ class Stage {
 	}
 	
 	public function addResizeEvent( f : Void -> Void ) {
-		#if flash
 		resizeEvents.push(f);
-		#else
-		throw "TODO";
-		#end
 	}
 
 	public function removeResizeEvent( f : Void -> Void ) {
-		#if flash
-		resizeEvents.push(f);
-		#else
-		throw "TODO";
-		#end
+		resizeEvents.remove(f);
 	}
 	
 	public function getFrameRate() : Float {
@@ -170,7 +168,42 @@ class Stage {
 		ev.touchId = e.touchPointID;
 		event(ev);
 	}
-			
+	
+#elseif js
+
+	function get_width() {
+		return js.Browser.document.width;
+	}
+
+	function get_height() {
+		return js.Browser.document.height;
+	}
+
+	function get_mouseX() {
+		throw "TODO";
+		return 0.;
+	}
+
+	function get_mouseY() {
+		throw "TODO";
+		return 0.;
+	}
+	
+	function onMouseDown(e) {
+	}
+
+	function onMouseUp(e) {
+	}
+
+	function onKeyDown(e) {
+	}
+
+	function onKeyUp(e) {
+	}
+
+	function onResize(e) {
+	}
+
 #end
 
 }

hxd/System.hx

@@ -114,28 +114,52 @@ class System {
 	#elseif js
 
 	static var LOOP = null;
+	static var LOOP_INIT = false;
 	
-	public static function setLoop( f : Void -> Void ) {
+	static function loopFunc() {
 		var window : Dynamic = js.Browser.window;
-		if( LOOP != null  ) {
-			var caf : Dynamic = window.cancelAnimationFrame ||
-			window.webkitCancelAnimationFrame ||
-			window.mozCancelAnimationFrame;
-			caf(LOOP);
-			LOOP = null;
-		}
-		if( f == null )
-			return;
 		var rqf : Dynamic = window.requestAnimationFrame ||
 			window.webkitRequestAnimationFrame ||
 			window.mozRequestAnimationFrame;
-		rqf(f);
+		rqf(loopFunc);
+		if( LOOP != null ) LOOP();
+	}
+	
+	public static function setLoop( f : Void -> Void ) {
+		if( !LOOP_INIT ) {
+			LOOP_INIT = true;
+			loopFunc();
+		}
+		LOOP = f;
 	}
 
 	public static function setCursor( c : Cursor ) {
 		throw "TODO";
 	}
 	
+	static function get_screenDPI() {
+		return 72.;
+	}
+	
+	static function get_isAndroid() {
+		return false;
+	}
+	
+	static function get_isWindowed() {
+		return true;
+	}
+	
+	static function get_isTouch() {
+		return false;
+	}
+	
+	static function get_width() {
+		return js.Browser.document.width;
+	}
+	
+	static function get_height() {
+		return js.Browser.document.height;
+	}
 	
 	#else
 

index.html

@@ -0,0 +1,9 @@
+<html>
+<body style="margin:0;padding:0">
+	
+	<canvas id="webgl" style="width:100%;height:100%"></canvas>
+	<script type="text/javascript" src="webgl-debug.js"></script>
+	<script type="text/javascript" src="engine.js"></script>
+	
+</body>
+</html>

samples/basic/Test.hx

@@ -25,15 +25,8 @@ class Test {
 		prim.addUVs();
 		prim.addNormals();
 		
-		var bmp : hxd.BitmapData = null;
-		#if flash
-		var tbmp = new flash.display.BitmapData(256, 256);
-		tbmp.perlinNoise(64, 64, 3, 0, true, true, 7);
-		bmp = hxd.BitmapData.fromNative(tbmp);
-		#end
-		var tex = h3d.mat.Texture.fromBitmap(bmp);
+		var tex = hxd.Resource.embed("texture.png").toTexture();
 		var mat = new h3d.mat.MeshMaterial(tex);
-		bmp.dispose();
 		
 		scene = new Scene();
 		obj1 = new Mesh(prim, mat, scene);

webgl-debug.js

@@ -0,0 +1,900 @@
+/*
+** Copyright (c) 2012 The Khronos Group Inc.
+**
+** Permission is hereby granted, free of charge, to any person obtaining a
+** copy of this software and/or associated documentation files (the
+** "Materials"), to deal in the Materials without restriction, including
+** without limitation the rights to use, copy, modify, merge, publish,
+** distribute, sublicense, and/or sell copies of the Materials, and to
+** permit persons to whom the Materials are furnished to do so, subject to
+** the following conditions:
+**
+** The above copyright notice and this permission notice shall be included
+** in all copies or substantial portions of the Materials.
+**
+** THE MATERIALS ARE PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+** EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+** MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+** IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+** CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+** TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+** MATERIALS OR THE USE OR OTHER DEALINGS IN THE MATERIALS.
+*/
+
+// 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);
+  }
+};
+
+/**
+ * Wrapped error logging function.
+ * @param {string} msg Message to log.
+ */
+var error = function(msg) {
+  if (window.console && window.console.error) {
+    window.console.error(msg);
+  } else {
+    log(msg);
+  }
+};
+
+
+/**
+ * Which arguments are enums based on the number of arguments to the function.
+ * So
+ *    'texImage2D': {
+ *       9: { 0:true, 2:true, 6:true, 7:true },
+ *       6: { 0:true, 2:true, 3:true, 4:true },
+ *    },
+ *
+ * means if there are 9 arguments then 6 and 7 are enums, if there are 6
+ * arguments 3 and 4 are enums
+ *
+ * @type {!Object.<number, !Object.<number, string>}}
+ */
+var glValidEnumContexts = {
+  // Generic setters and getters
+
+  'enable': {1: { 0:true }},
+  'disable': {1: { 0:true }},
+  'getParameter': {1: { 0:true }},
+
+  // Rendering
+
+  'drawArrays': {3:{ 0:true }},
+  'drawElements': {4:{ 0:true, 2:true }},
+
+  // Shaders
+
+  'createShader': {1: { 0:true }},
+  'getShaderParameter': {2: { 1:true }},
+  'getProgramParameter': {2: { 1:true }},
+  'getShaderPrecisionFormat': {2: { 0: true, 1:true }},
+
+  // Vertex attributes
+
+  'getVertexAttrib': {2: { 1:true }},
+  'vertexAttribPointer': {6: { 2:true }},
+
+  // Textures
+
+  'bindTexture': {2: { 0:true }},
+  'activeTexture': {1: { 0:true }},
+  'getTexParameter': {2: { 0:true, 1:true }},
+  'texParameterf': {3: { 0:true, 1:true }},
+  'texParameteri': {3: { 0:true, 1:true, 2:true }},
+  'texImage2D': {
+     9: { 0:true, 2:true, 6:true, 7:true },
+     6: { 0:true, 2:true, 3:true, 4:true },
+  },
+  'texSubImage2D': {
+    9: { 0:true, 6:true, 7:true },
+    7: { 0:true, 4:true, 5:true },
+  },
+  'copyTexImage2D': {8: { 0:true, 2:true }},
+  'copyTexSubImage2D': {8: { 0:true }},
+  'generateMipmap': {1: { 0:true }},
+  'compressedTexImage2D': {7: { 0: true, 2:true }},
+  'compressedTexSubImage2D': {8: { 0: true, 6:true }},
+
+  // Buffer objects
+
+  'bindBuffer': {2: { 0:true }},
+  'bufferData': {3: { 0:true, 2:true }},
+  'bufferSubData': {3: { 0:true }},
+  'getBufferParameter': {2: { 0:true, 1:true }},
+
+  // Renderbuffers and framebuffers
+
+  'pixelStorei': {2: { 0:true, 1:true }},
+  'readPixels': {7: { 4:true, 5:true }},
+  'bindRenderbuffer': {2: { 0:true }},
+  'bindFramebuffer': {2: { 0:true }},
+  'checkFramebufferStatus': {1: { 0:true }},
+  'framebufferRenderbuffer': {4: { 0:true, 1:true, 2:true }},
+  'framebufferTexture2D': {5: { 0:true, 1:true, 2:true }},
+  'getFramebufferAttachmentParameter': {3: { 0:true, 1:true, 2:true }},
+  'getRenderbufferParameter': {2: { 0:true, 1:true }},
+  'renderbufferStorage': {4: { 0:true, 1:true }},
+
+  // Frame buffer operations (clear, blend, depth test, stencil)
+
+  'clear': {1: { 0:true }},
+  'depthFunc': {1: { 0:true }},
+  'blendFunc': {2: { 0:true, 1:true }},
+  'blendFuncSeparate': {4: { 0:true, 1:true, 2:true, 3:true }},
+  'blendEquation': {1: { 0:true }},
+  'blendEquationSeparate': {2: { 0:true, 1:true }},
+  'stencilFunc': {3: { 0:true }},
+  'stencilFuncSeparate': {4: { 0:true, 1:true }},
+  'stencilMaskSeparate': {2: { 0:true }},
+  'stencilOp': {3: { 0:true, 1:true, 2:true }},
+  'stencilOpSeparate': {4: { 0:true, 1:true, 2:true, 3:true }},
+
+  // Culling
+
+  'cullFace': {1: { 0:true }},
+  'frontFace': {1: { 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) ? ("gl." + 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} numArgs the number of arguments passed to the 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, numArgs, argumentIndex, value) {
+  var funcInfo = glValidEnumContexts[functionName];
+  if (funcInfo !== undefined) {
+    var funcInfo = funcInfo[numArgs];
+    if (funcInfo !== undefined) {
+      if (funcInfo[argumentIndex]) {
+        return glEnumToString(value);
+      }
+    }
+  }
+  if (value === null) {
+    return "null";
+  } else if (value === undefined) {
+    return "undefined";
+  } else {
+    return value.toString();
+  }
+}
+
+/**
+ * Converts the arguments of a WebGL function to a string.
+ * Attempts to convert enum arguments to strings.
+ *
+ * @param {string} functionName the name of the WebGL function.
+ * @param {number} args The arguments.
+ * @return {string} The arguments as a string.
+ */
+function glFunctionArgsToString(functionName, args) {
+  // apparently we can't do args.join(",");
+  var argStr = "";
+  var numArgs = args.length;
+  for (var ii = 0; ii < numArgs; ++ii) {
+    argStr += ((ii == 0) ? '' : ', ') +
+        glFunctionArgToString(functionName, numArgs, ii, args[ii]);
+  }
+  return argStr;
+};
+
+
+function makePropertyWrapper(wrapper, original, propertyName) {
+  //log("wrap prop: " + propertyName);
+  wrapper.__defineGetter__(propertyName, function() {
+    return original[propertyName];
+  });
+  // TODO(gmane): this needs to handle properties that take more than
+  // one value?
+  wrapper.__defineSetter__(propertyName, function(value) {
+    //log("set: " + propertyName);
+    original[propertyName] = value;
+  });
+}
+
+// Makes a function that calls a function on another object.
+function makeFunctionWrapper(original, functionName) {
+  //log("wrap fn: " + functionName);
+  var f = original[functionName];
+  return function() {
+    //log("call: " + functionName);
+    var result = f.apply(original, arguments);
+    return result;
+  };
+}
+
+/**
+ * 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.
+ * @param {!function(funcName, args): void} opt_onFunc The
+ *        function to call when each webgl function is called.
+ *        You can use this to log all calls for example.
+ */
+function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc) {
+  init(ctx);
+  opt_onErrorFunc = opt_onErrorFunc || function(err, functionName, args) {
+        // apparently we can't do args.join(",");
+        var argStr = "";
+        var numArgs = args.length;
+        for (var ii = 0; ii < numArgs; ++ii) {
+          argStr += ((ii == 0) ? '' : ', ') +
+              glFunctionArgToString(functionName, numArgs, ii, args[ii]);
+        }
+        error("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() {
+      if (opt_onFunc) {
+        opt_onFunc(functionName, arguments);
+      }
+      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 {
+       makePropertyWrapper(wrapper, ctx, propertyName);
+     }
+  }
+
+  // Override the getError function with one that returns our saved results.
+  wrapper.getError = function() {
+    for (var err in glErrorShadow) {
+      if (glErrorShadow.hasOwnProperty(err)) {
+        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.width, ctx.canvas.height);
+  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 makeLostContextSimulatingCanvas(canvas) {
+  var unwrappedContext_;
+  var wrappedContext_;
+  var onLost_ = [];
+  var onRestored_ = [];
+  var wrappedContext_ = {};
+  var contextId_ = 1;
+  var contextLost_ = false;
+  var resourceId_ = 0;
+  var resourceDb_ = [];
+  var numCallsToLoseContext_ = 0;
+  var numCalls_ = 0;
+  var canRestore_ = false;
+  var restoreTimeout_ = 0;
+
+  // Holds booleans for each GL error so can simulate errors.
+  var glErrorShadow_ = { };
+
+  canvas.getContext = function(f) {
+    return function() {
+      var ctx = f.apply(canvas, arguments);
+      // Did we get a context and is it a WebGL context?
+      if (ctx instanceof WebGLRenderingContext) {
+        if (ctx != unwrappedContext_) {
+          if (unwrappedContext_) {
+            throw "got different context"
+          }
+          unwrappedContext_ = ctx;
+          wrappedContext_ = makeLostContextSimulatingContext(unwrappedContext_);
+        }
+        return wrappedContext_;
+      }
+      return ctx;
+    }
+  }(canvas.getContext);
+
+  function wrapEvent(listener) {
+    if (typeof(listener) == "function") {
+      return listener;
+    } else {
+      return function(info) {
+        listener.handleEvent(info);
+      }
+    }
+  }
+
+  var addOnContextLostListener = function(listener) {
+    onLost_.push(wrapEvent(listener));
+  };
+
+  var addOnContextRestoredListener = function(listener) {
+    onRestored_.push(wrapEvent(listener));
+  };
+
+
+  function wrapAddEventListener(canvas) {
+    var f = canvas.addEventListener;
+    canvas.addEventListener = function(type, listener, bubble) {
+      switch (type) {
+        case 'webglcontextlost':
+          addOnContextLostListener(listener);
+          break;
+        case 'webglcontextrestored':
+          addOnContextRestoredListener(listener);
+          break;
+        default:
+          f.apply(canvas, arguments);
+      }
+    };
+  }
+
+  wrapAddEventListener(canvas);
+
+  canvas.loseContext = function() {
+    if (!contextLost_) {
+      contextLost_ = true;
+      numCallsToLoseContext_ = 0;
+      ++contextId_;
+      while (unwrappedContext_.getError());
+      clearErrors();
+      glErrorShadow_[unwrappedContext_.CONTEXT_LOST_WEBGL] = true;
+      var event = makeWebGLContextEvent("context lost");
+      var callbacks = onLost_.slice();
+      setTimeout(function() {
+          //log("numCallbacks:" + callbacks.length);
+          for (var ii = 0; ii < callbacks.length; ++ii) {
+            //log("calling callback:" + ii);
+            callbacks[ii](event);
+          }
+          if (restoreTimeout_ >= 0) {
+            setTimeout(function() {
+                canvas.restoreContext();
+              }, restoreTimeout_);
+          }
+        }, 0);
+    }
+  };
+
+  canvas.restoreContext = function() {
+    if (contextLost_) {
+      if (onRestored_.length) {
+        setTimeout(function() {
+            if (!canRestore_) {
+              throw "can not restore. webglcontestlost listener did not call event.preventDefault";
+            }
+            freeResources();
+            resetToInitialState(unwrappedContext_);
+            contextLost_ = false;
+            numCalls_ = 0;
+            canRestore_ = false;
+            var callbacks = onRestored_.slice();
+            var event = makeWebGLContextEvent("context restored");
+            for (var ii = 0; ii < callbacks.length; ++ii) {
+              callbacks[ii](event);
+            }
+          }, 0);
+      }
+    }
+  };
+
+  canvas.loseContextInNCalls = function(numCalls) {
+    if (contextLost_) {
+      throw "You can not ask a lost contet to be lost";
+    }
+    numCallsToLoseContext_ = numCalls_ + numCalls;
+  };
+
+  canvas.getNumCalls = function() {
+    return numCalls_;
+  };
+
+  canvas.setRestoreTimeout = function(timeout) {
+    restoreTimeout_ = timeout;
+  };
+
+  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 glErrorShadow_[k];
+    }
+  }
+
+  function loseContextIfTime() {
+    ++numCalls_;
+    if (!contextLost_) {
+      if (numCallsToLoseContext_ == numCalls_) {
+        canvas.loseContext();
+      }
+    }
+  }
+
+  // Makes a function that simulates WebGL when out of context.
+  function makeLostContextFunctionWrapper(ctx, functionName) {
+    var f = ctx[functionName];
+    return function() {
+      // log("calling:" + functionName);
+      // Only call the functions if the context is not lost.
+      loseContextIfTime();
+      if (!contextLost_) {
+        //if (!checkResources(arguments)) {
+        //  glErrorShadow_[wrappedContext_.INVALID_OPERATION] = true;
+        //  return;
+        //}
+        var result = f.apply(ctx, arguments);
+        return result;
+      }
+    };
+  }
+
+  function freeResources() {
+    for (var ii = 0; ii < resourceDb_.length; ++ii) {
+      var resource = resourceDb_[ii];
+      if (resource instanceof WebGLBuffer) {
+        unwrappedContext_.deleteBuffer(resource);
+      } else if (resource instanceof WebGLFramebuffer) {
+        unwrappedContext_.deleteFramebuffer(resource);
+      } else if (resource instanceof WebGLProgram) {
+        unwrappedContext_.deleteProgram(resource);
+      } else if (resource instanceof WebGLRenderbuffer) {
+        unwrappedContext_.deleteRenderbuffer(resource);
+      } else if (resource instanceof WebGLShader) {
+        unwrappedContext_.deleteShader(resource);
+      } else if (resource instanceof WebGLTexture) {
+        unwrappedContext_.deleteTexture(resource);
+      }
+    }
+  }
+
+  function makeWebGLContextEvent(statusMessage) {
+    return {
+      statusMessage: statusMessage,
+      preventDefault: function() {
+          canRestore_ = true;
+        }
+    };
+  }
+
+  return canvas;
+
+  function makeLostContextSimulatingContext(ctx) {
+    // copy all functions and properties to wrapper
+    for (var propertyName in ctx) {
+      if (typeof ctx[propertyName] == 'function') {
+         wrappedContext_[propertyName] = makeLostContextFunctionWrapper(
+             ctx, propertyName);
+       } else {
+         makePropertyWrapper(wrappedContext_, ctx, propertyName);
+       }
+    }
+
+    // Wrap a few functions specially.
+    wrappedContext_.getError = function() {
+      loseContextIfTime();
+      if (!contextLost_) {
+        var err;
+        while (err = unwrappedContext_.getError()) {
+          glErrorShadow_[err] = true;
+        }
+      }
+      for (var err in glErrorShadow_) {
+        if (glErrorShadow_[err]) {
+          delete glErrorShadow_[err];
+          return err;
+        }
+      }
+      return wrappedContext_.NO_ERROR;
+    };
+
+    var creationFunctions = [
+      "createBuffer",
+      "createFramebuffer",
+      "createProgram",
+      "createRenderbuffer",
+      "createShader",
+      "createTexture"
+    ];
+    for (var ii = 0; ii < creationFunctions.length; ++ii) {
+      var functionName = creationFunctions[ii];
+      wrappedContext_[functionName] = function(f) {
+        return function() {
+          loseContextIfTime();
+          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];
+      wrappedContext_[functionName] = function(f) {
+        return function() {
+          loseContextIfTime();
+          if (contextLost_) {
+            return null;
+          }
+          return f.apply(ctx, arguments);
+        }
+      }(wrappedContext_[functionName]);
+    }
+
+    var isFunctions = [
+      "isBuffer",
+      "isEnabled",
+      "isFramebuffer",
+      "isProgram",
+      "isRenderbuffer",
+      "isShader",
+      "isTexture"
+    ];
+    for (var ii = 0; ii < isFunctions.length; ++ii) {
+      var functionName = isFunctions[ii];
+      wrappedContext_[functionName] = function(f) {
+        return function() {
+          loseContextIfTime();
+          if (contextLost_) {
+            return false;
+          }
+          return f.apply(ctx, arguments);
+        }
+      }(wrappedContext_[functionName]);
+    }
+
+    wrappedContext_.checkFramebufferStatus = function(f) {
+      return function() {
+        loseContextIfTime();
+        if (contextLost_) {
+          return wrappedContext_.FRAMEBUFFER_UNSUPPORTED;
+        }
+        return f.apply(ctx, arguments);
+      };
+    }(wrappedContext_.checkFramebufferStatus);
+
+    wrappedContext_.getAttribLocation = function(f) {
+      return function() {
+        loseContextIfTime();
+        if (contextLost_) {
+          return -1;
+        }
+        return f.apply(ctx, arguments);
+      };
+    }(wrappedContext_.getAttribLocation);
+
+    wrappedContext_.getVertexAttribOffset = function(f) {
+      return function() {
+        loseContextIfTime();
+        if (contextLost_) {
+          return 0;
+        }
+        return f.apply(ctx, arguments);
+      };
+    }(wrappedContext_.getVertexAttribOffset);
+
+    wrappedContext_.isContextLost = function() {
+      return contextLost_;
+    };
+
+    return wrappedContext_;
+  }
+}
+
+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', 2, 0, gl.TEXTURE_2D);
+   *
+   * would return 'TEXTURE_2D'
+   *
+   * @param {string} functionName the name of the WebGL function.
+   * @param {number} numArgs The number of arguments
+   * @param {number} argumentIndx the index of the argument.
+   * @param {*} value The value of the argument.
+   * @return {string} The value as a string.
+   */
+  'glFunctionArgToString': glFunctionArgToString,
+
+  /**
+   * Converts the arguments of a WebGL function to a string.
+   * Attempts to convert enum arguments to strings.
+   *
+   * @param {string} functionName the name of the WebGL function.
+   * @param {number} args The arguments.
+   * @return {string} The arguments as a string.
+   */
+  'glFunctionArgsToString': glFunctionArgsToString,
+
+  /**
+   * 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.
+   * @param {!function(funcName, args): void} opt_onFunc The
+   *     function to call when each webgl function is called. You
+   *     can use this to log all calls for example.
+   */
+  'makeDebugContext': makeDebugContext,
+
+  /**
+   * Given a canvas element returns a wrapped canvas element that will
+   * simulate lost context. The canvas returned adds the following functions.
+   *
+   * loseContext:
+   *   simulates a lost context event.
+   *
+   * restoreContext:
+   *   simulates the context being restored.
+   *
+   * lostContextInNCalls:
+   *   loses the context after N gl calls.
+   *
+   * getNumCalls:
+   *   tells you how many gl calls there have been so far.
+   *
+   * setRestoreTimeout:
+   *   sets the number of milliseconds until the context is restored
+   *   after it has been lost. Defaults to 0. Pass -1 to prevent
+   *   automatic restoring.
+   *
+   * @param {!Canvas} canvas The canvas element to wrap.
+   */
+  'makeLostContextSimulatingCanvas': makeLostContextSimulatingCanvas,
+
+  /**
+   * Resets a context to the initial state.
+   * @param {!WebGLRenderingContext} ctx The webgl context to
+   *     reset.
+   */
+  'resetToInitialState': resetToInitialState
+};
+
+}();
+