Unify the 2D and WebGL contexts

src/library_gl.js

@@ -10,12 +10,12 @@ var LibraryGL = {
 
   glGetString: function(name_) {
     switch(name_) {
-      case Module.ctxGL.VENDOR:
+      case Module.ctx.VENDOR:
-      case Module.ctxGL.RENDERER:
+      case Module.ctx.RENDERER:
-      case Module.ctxGL.VERSION:
+      case Module.ctx.VERSION:
-        return allocate(intArrayFromString(Module.ctxGL.getParameter(name_)), 'i8', ALLOC_NORMAL);
+        return allocate(intArrayFromString(Module.ctx.getParameter(name_)), 'i8', ALLOC_NORMAL);
       case 0x1F03: // Extensions
-        return allocate(intArrayFromString(Module.ctxGL.getSupportedExtensions().join(' ')), 'i8', ALLOC_NORMAL);
+        return allocate(intArrayFromString(Module.ctx.getSupportedExtensions().join(' ')), 'i8', ALLOC_NORMAL);
       default:
         throw 'Failure: Invalid glGetString value: ' + name_;
     }
@@ -23,8 +23,8 @@ var LibraryGL = {
 
   glGetIntegerv: function(name_, p) {
     switch(name_) {
-      case Module.ctxGL.MAX_TEXTURE_SIZE:
+      case Module.ctx.MAX_TEXTURE_SIZE:
-        IHEAP[p] = Module.ctxGL.getParameter(name_);
+        IHEAP[p] = Module.ctx.getParameter(name_);
         break;
       default:
         throw 'Failure: Invalid glGetIntegerv value: ' + name_;
@@ -35,7 +35,7 @@ var LibraryGL = {
   glGenTextures: function(n, textures) {
     for (var i = 0; i < n; i++) {
       var id = GL.textureCounter++;
-      GL.textures[id] = Module.ctxGL.createTexture();
+      GL.textures[id] = Module.ctx.createTexture();
       IHEAP[textures+QUANTUM_SIZE*i] = id;
     }
   },
@@ -43,7 +43,7 @@ var LibraryGL = {
   glDeleteTextures: function(n, textures) {
     for (var i = 0; i < n; i++) {
       var id = IHEAP[textures+QUANTUM_SIZE*i];
-      Module.ctxGL.deleteTexture(GL.textures[id]);
+      Module.ctx.deleteTexture(GL.textures[id]);
       delete GL.textures[id];
     }
   },
@@ -52,34 +52,34 @@ var LibraryGL = {
     if (pixels) {
       pixels = new Uint8Array(IHEAP.slice(pixels, pixels + width*height*4)); // TODO: optimize
     }
-    Module.ctxGL.texImage2D(target, level, internalformat, width, height, border, format, type, pixels);
+    Module.ctx.texImage2D(target, level, internalformat, width, height, border, format, type, pixels);
   },
 
   glTexSubImage2D: function(target, level, xoffset, yoffset, width, height, format, type, pixels) {
     if (pixels) {
       pixels = new Uint8Array(IHEAP.slice(pixels, pixels + width*height*4)); // TODO: optimize
     }
-    Module.ctxGL.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels);
+    Module.ctx.texSubImage2D(target, level, xoffset, yoffset, width, height, format, type, pixels);
   },
 
   glBindTexture: function(target, texture) {
-    Module.ctxGL.bindTexture(target, GL.textures[texture]);
+    Module.ctx.bindTexture(target, GL.textures[texture]);
   },
 
   glClearColor: function(red, green, blue, alpha) {
-    Module.ctxGL.clearColor(red, green, blue, alpha);
+    Module.ctx.clearColor(red, green, blue, alpha);
   },
 
   glClear: function(mask) {
-    Module.ctxGL.clear(mask);
+    Module.ctx.clear(mask);
   },
 
   glEnable: function(cap) {
-    Module.ctxGL.enable(cap);
+    Module.ctx.enable(cap);
   },
 
   glScissor: function(x, y, width, height) {
-    Module.ctxGL.scissor(x, y, width, height);
+    Module.ctx.scissor(x, y, width, height);
   },
 
 };
@@ -99,7 +99,7 @@ var LibraryGL = {
   var num = data[0];
   var names = data[1];
   var args = range(num).map(function(i) { return 'x' + i }).join(', ');
-  var stub = '(function(' + args + ') { ' + (num > 0 ? 'Module.ctxGL.NAME(' + args + ')' : '') + ' })';
+  var stub = '(function(' + args + ') { ' + (num > 0 ? 'Module.ctx.NAME(' + args + ')' : '') + ' })';
   names.split(' ').forEach(function(name_) {
     var cName = 'gl' + name_[0].toUpperCase() + name_.substr(1);
     LibraryGL[cName] = eval(stub.replace('NAME', name_));

src/library_sdl.js

@@ -1,16 +1,14 @@
 //"use strict";
 
 // To use emscripten's SDL library here, you need to define
-// Module.canvas and at least one of Module.ctx2D, Module.ctxGL.
+// Module.canvas.
 //
-// More specifically, for 2D our SDL implementation will look for
+// More specifically, our SDL implementation will look for
-// Module.canvas and Module.ctx2D. You should fill them using
+// Module.canvas. You should fill it using something like
-// something like
 //
 //      function onLoad() {
 //        // Pass canvas and context to the generated code
 //        Module.canvas = document.getElementById('canvas');
-//        Module.ctx2D = Module.canvas.getContext('2d');
 //      }
 //
 // Note that this must be called during onload, since you will
@@ -49,11 +47,6 @@
       function onLoad() {
         // Pass canvas and context to the generated code, and do the actual run() here
         Module.canvas = document.getElementById('canvas');
-        Module.ctx2D = Module.canvas.getContext('2d');
-        if (!Module.ctx2D) {
-          alert('Canvas not available :(');
-          return;
-        }
         Module.run();
       }
     </script>
@@ -70,9 +63,6 @@
 //
 //  * Make sure alpha values are proper in your input. If they are all 0, everything will be transparent!
 //
-//  * It's best to set the ctx stuff in your html file, as above. Otherwise you will need
-//    to edit the generated .js file each time you generate it.
-//
 //  * Your code should not write a 32-bit value and expect that to set an RGBA pixel.
 //    The reason is that that data will be read as 8-bit values, and according to the
 //    load-store consistency assumption, it should be written that way (see docs/paper.pdf).
@@ -173,7 +163,7 @@ mergeInto(LibraryManager.library, {
         width: width,
         height: height,
         canvas: Module['canvas'],
-        ctx: useWebGL ? Module['ctxGL'] : Module['ctx2D'],
+        ctx: SDL.createContext(useWebGL),
         surf: surf,
         buffer: buffer,
         pixelFormat: pixelFormat,
@@ -182,6 +172,17 @@ mergeInto(LibraryManager.library, {
       return surf;
     },
 
+    createContext: function(useWebGL) {
+      try {
+        var ctx = Module.canvas.getContext(useWebGL ? 'experimental-webgl' : '2d');
+        if (!ctx) throw 'Could not create canvas :(';
+        return Module.ctx = ctx;
+      } catch (e) {
+        Module.print('(canvas not available)');
+        return null;
+      }
+    },
+
     freeSurface: function(surf) {
       _free(SDL.surfaces[surf].buffer);
       _free(SDL.surfaces[surf].pixelFormat);

src/shell.html

@@ -19,38 +19,6 @@
         })(),
         canvas: document.getElementById('canvas')
       };
-      // Define the 2D and WebGL contexts lazily, because a canvas can only
-      // have one context type.
-      Module.__defineGetter__("ctx2D", function() {
-        try {
-          var ctx = Module.canvas.getContext('2d');
-          if (!ctx) throw 'Could not create canvas :(';
-          delete Module["ctxGL"];
-          Module.__defineGetter__("ctxGL", function() {
-            throw 'Could not create a WebGL context for a 2D canvas :(';
-          });
-          delete Module["ctx2D"];
-          return Module["ctx2D"] = ctx;
-        } catch (e) {
-          Module.print('(canvas not available)');
-          return null;
-        }
-      });
-      Module.__defineGetter__("ctxGL", function() {
-        try {
-          var ctx = Module.canvas.getContext('experimental-webgl');
-          if (!ctx) throw 'Could not create canvas :(';
-          delete Module["ctx2D"];
-          Module.__defineGetter__("ctx2D", function() {
-            throw 'Could not create a 2D context for a WebGL canvas :(';
-          });
-          delete Module["ctxGL"];
-          return Module["ctxGL"] = ctx;
-        } catch (e) {
-          Module.print('(canvas not available)');
-          return null;
-        }
-      });
 
       // The compiled code
       {{{ SCRIPT_CODE }}}