Implement HTML5 WebGL context creation API. Add support to library_gl.js to manage multiple simultaneous GL contexts.

Author: juj

src/library_browser.js

@@ -256,146 +256,41 @@ mergeInto(LibraryManager.library, {
     },
 
     createContext: function(canvas, useWebGL, setInModule, webGLContextAttributes) {
-#if !USE_TYPED_ARRAYS
-      if (useWebGL) {
-        Module.print('(USE_TYPED_ARRAYS needs to be enabled for WebGL)');
-        return null;
-      }
-#endif
-      if (useWebGL && Module.ctx) return Module.ctx; // no need to recreate singleton GL context
+      if (useWebGL && Module.ctx && canvas == Module.canvas) return Module.ctx; // no need to recreate GL context if it's already been created for this canvas.
 
       var ctx;
-      var errorInfo = '?';
-      function onContextCreationError(event) {
-        errorInfo = event.statusMessage || errorInfo;
-      }
-      try {
-        if (useWebGL) {
-          var contextAttributes = {
-            antialias: false,
-            alpha: false
-          };
-
-          if (webGLContextAttributes) {
-            for (var attribute in webGLContextAttributes) {
-              contextAttributes[attribute] = webGLContextAttributes[attribute];
-            }
-          }
-
-#if GL_TESTING
-          contextAttributes.preserveDrawingBuffer = true;
-#endif
-
-          canvas.addEventListener('webglcontextcreationerror', onContextCreationError, false);
-          try {
-            ['experimental-webgl', 'webgl'].some(function(webglId) {
-              return ctx = canvas.getContext(webglId, contextAttributes);
-            });
-          } finally {
-            canvas.removeEventListener('webglcontextcreationerror', onContextCreationError, false);
-          }
-        } else {
-          ctx = canvas.getContext('2d');
-        }
-        if (!ctx) throw ':(';
-      } catch (e) {
-        Module.print('Could not create canvas: ' + [errorInfo, e]);
-        return null;
-      }
+      var contextHandle;
       if (useWebGL) {
-#if GL_DEBUG
-        function wrapDebugGL(ctx) {
-
-          var printObjectList = [];
-
-          function prettyPrint(arg) {
-            if (typeof arg == 'undefined') return '!UNDEFINED!';
-            if (typeof arg == 'boolean') arg = arg + 0;
-            if (!arg) return arg;
-            var index = printObjectList.indexOf(arg);
-            if (index >= 0) return '<' + arg + '|'; // + index + '>';
-            if (arg.toString() == '[object HTMLImageElement]') {
-              return arg + '\n\n';
-            }
-            if (arg.byteLength) {
-              return '{' + Array.prototype.slice.call(arg, 0, Math.min(arg.length, 400)) + '}'; // Useful for correct arrays, less so for compiled arrays, see the code below for that
-              var buf = new ArrayBuffer(32);
-              var i8buf = new Int8Array(buf);
-              var i16buf = new Int16Array(buf);
-              var f32buf = new Float32Array(buf);
-              switch(arg.toString()) {
-                case '[object Uint8Array]':
-                  i8buf.set(arg.subarray(0, 32));
-                  break;
-                case '[object Float32Array]':
-                  f32buf.set(arg.subarray(0, 5));
-                  break;
-                case '[object Uint16Array]':
-                  i16buf.set(arg.subarray(0, 16));
-                  break;
-                default:
-                  alert('unknown array for debugging: ' + arg);
-                  throw 'see alert';
-              }
-              var ret = '{' + arg.byteLength + ':\n';
-              var arr = Array.prototype.slice.call(i8buf);
-              ret += 'i8:' + arr.toString().replace(/,/g, ',') + '\n';
-              arr = Array.prototype.slice.call(f32buf, 0, 8);
-              ret += 'f32:' + arr.toString().replace(/,/g, ',') + '}';
-              return ret;
-            }
-            if (typeof arg == 'object') {
-              printObjectList.push(arg);
-              return '<' + arg + '|'; // + (printObjectList.length-1) + '>';
-            }
-            if (typeof arg == 'number') {
-              if (arg > 0) return '0x' + arg.toString(16) + ' (' + arg + ')';
-            }
-            return arg;
-          }
+        // For GLES2/desktop GL compatibility, adjust a few defaults to be different to WebGL defaults, so that they align better with the desktop defaults.
+        var contextAttributes = {
+          antialias: false,
+          alpha: false
+        };
 
-          var wrapper = {};
-          for (var prop in ctx) {
-            (function(prop) {
-              switch (typeof ctx[prop]) {
-                case 'function': {
-                  wrapper[prop] = function gl_wrapper() {
-                    var printArgs = Array.prototype.slice.call(arguments).map(prettyPrint);
-                    dump('[gl_f:' + prop + ':' + printArgs + ']\n');
-                    var ret = ctx[prop].apply(ctx, arguments);
-                    if (typeof ret != 'undefined') {
-                      dump('[     gl:' + prop + ':return:' + prettyPrint(ret) + ']\n');
-                    }
-                    return ret;
-                  }
-                  break;
-                }
-                case 'number': case 'string': {
-                  wrapper.__defineGetter__(prop, function() {
-                    //dump('[gl_g:' + prop + ':' + ctx[prop] + ']\n');
-                    return ctx[prop];
-                  });
-                  wrapper.__defineSetter__(prop, function(value) {
-                    dump('[gl_s:' + prop + ':' + value + ']\n');
-                    ctx[prop] = value;
-                  });
-                  break;
-                }
-              }
-            })(prop);
+        if (webGLContextAttributes) {
+          for (var attribute in webGLContextAttributes) {
+            contextAttributes[attribute] = webGLContextAttributes[attribute];
           }
-          return wrapper;
         }
+#if GL_TESTING
+        contextAttributes.preserveDrawingBuffer = true;
 #endif
-        // possible GL_DEBUG entry point: ctx = wrapDebugGL(ctx);
 
+        contextHandle = GL.createContext(canvas, contextAttributes);
+        ctx = GL.getContext(contextHandle).GLctx;
         // Set the background of the WebGL canvas to black
         canvas.style.backgroundColor = "black";
+      } else {
+        ctx = canvas.getContext('2d');
       }
+
+      if (!ctx) return null;
+
       if (setInModule) {
         if (!useWebGL) assert(typeof GLctx === 'undefined', 'cannot set in module if GLctx is used, but we are a non-GL context that would replace it');
+
         Module.ctx = ctx;
-        if (useWebGL) GLctx = ctx;
+        if (useWebGL) GL.makeContextCurrent(contextHandle);
         Module.useWebGL = useWebGL;
         Browser.moduleContextCreatedCallbacks.forEach(function(callback) { callback() });
         Browser.init();