Babylon.js/localDev/src/webgl-debug.js

/*
** 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 and texSubImage2D are defined below with WebGL 2 entrypoints
      'copyTexImage2D': {8: { 0:true, 2:true }},
      'copyTexSubImage2D': {8: { 0:true }},
      'generateMipmap': {1: { 0:true }},
      // compressedTexImage2D and compressedTexSubImage2D are defined below with WebGL 2 entrypoints
    
      // Buffer objects
    
      'bindBuffer': {2: { 0:true }},
      // bufferData and bufferSubData are defined below with WebGL 2 entrypoints
      'getBufferParameter': {2: { 0:true, 1:true }},
    
      // Renderbuffers and framebuffers
    
      'pixelStorei': {2: { 0:true, 1:true }},
      // readPixels is defined below with WebGL 2 entrypoints
      '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: { 'enumBitwiseOr': ['COLOR_BUFFER_BIT', 'DEPTH_BUFFER_BIT', 'STENCIL_BUFFER_BIT'] }}},
      '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 }},
    
      // ANGLE_instanced_arrays extension
    
      'drawArraysInstancedANGLE': {4: { 0:true }},
      'drawElementsInstancedANGLE': {5: { 0:true, 2:true }},
    
      // EXT_blend_minmax extension
    
      'blendEquationEXT': {1: { 0:true }},
    
      // WebGL 2 Buffer objects
    
      'bufferData': {
        3: { 0:true, 2:true }, // WebGL 1
        4: { 0:true, 2:true }, // WebGL 2
        5: { 0:true, 2:true }  // WebGL 2
      },
      'bufferSubData': {
        3: { 0:true }, // WebGL 1
        4: { 0:true }, // WebGL 2
        5: { 0:true }  // WebGL 2
      },
      'copyBufferSubData': {5: { 0:true, 1:true }},
      'getBufferSubData': {3: { 0:true }, 4: { 0:true }, 5: { 0:true }},
    
      // WebGL 2 Framebuffer objects
    
      'blitFramebuffer': {10: { 8: { 'enumBitwiseOr': ['COLOR_BUFFER_BIT', 'DEPTH_BUFFER_BIT', 'STENCIL_BUFFER_BIT'] }, 9:true }},
      'framebufferTextureLayer': {5: { 0:true, 1:true }},
      'invalidateFramebuffer': {2: { 0:true }},
      'invalidateSubFramebuffer': {6: { 0:true }},
      'readBuffer': {1: { 0:true }},
    
      // WebGL 2 Renderbuffer objects
    
      'getInternalformatParameter': {3: { 0:true, 1:true, 2:true }},
      'renderbufferStorageMultisample': {5: { 0:true, 2:true }},
    
      // WebGL 2 Texture objects
    
      'texStorage2D': {5: { 0:true, 2:true }},
      'texStorage3D': {6: { 0:true, 2:true }},
      'texImage2D': {
        9: { 0:true, 2:true, 6:true, 7:true }, // WebGL 1 & 2
        6: { 0:true, 2:true, 3:true, 4:true }, // WebGL 1
        10: { 0:true, 2:true, 6:true, 7:true } // WebGL 2
      },
      'texImage3D': {
        10: { 0:true, 2:true, 7:true, 8:true },
        11: { 0:true, 2:true, 7:true, 8:true }
      },
      'texSubImage2D': {
        9: { 0:true, 6:true, 7:true }, // WebGL 1 & 2
        7: { 0:true, 4:true, 5:true }, // WebGL 1
        10: { 0:true, 6:true, 7:true } // WebGL 2
      },
      'texSubImage3D': {
        11: { 0:true, 8:true, 9:true },
        12: { 0:true, 8:true, 9:true }
      },
      'copyTexSubImage3D': {9: { 0:true }},
      'compressedTexImage2D': {
        7: { 0: true, 2:true }, // WebGL 1 & 2
        8: { 0: true, 2:true }, // WebGL 2
        9: { 0: true, 2:true }  // WebGL 2
      },
      'compressedTexImage3D': {
        8: { 0: true, 2:true },
        9: { 0: true, 2:true },
        10: { 0: true, 2:true }
      },
      'compressedTexSubImage2D': {
        8: { 0: true, 6:true }, // WebGL 1 & 2
        9: { 0: true, 6:true }, // WebGL 2
        10: { 0: true, 6:true } // WebGL 2
      },
      'compressedTexSubImage3D': {
        10: { 0: true, 8:true },
        11: { 0: true, 8:true },
        12: { 0: true, 8:true }
      },
    
      // WebGL 2 Vertex attribs
    
      'vertexAttribIPointer': {5: { 2:true }},
    
      // WebGL 2 Writing to the drawing buffer
    
      'drawArraysInstanced': {4: { 0:true }},
      'drawElementsInstanced': {5: { 0:true, 2:true }},
      'drawRangeElements': {6: { 0:true, 4:true }},
    
      // WebGL 2 Reading back pixels
    
      'readPixels': {
        7: { 4:true, 5:true }, // WebGL 1 & 2
        8: { 4:true, 5:true }  // WebGL 2
      },
    
      // WebGL 2 Multiple Render Targets
    
      'clearBufferfv': {3: { 0:true }, 4: { 0:true }},
      'clearBufferiv': {3: { 0:true }, 4: { 0:true }},
      'clearBufferuiv': {3: { 0:true }, 4: { 0:true }},
      'clearBufferfi': {4: { 0:true }},
    
      // WebGL 2 Query objects
    
      'beginQuery': {2: { 0:true }},
      'endQuery': {1: { 0:true }},
      'getQuery': {2: { 0:true, 1:true }},
      'getQueryParameter': {2: { 1:true }},
    
      // WebGL 2 Sampler objects
    
      'samplerParameteri': {3: { 1:true, 2:true }},
      'samplerParameterf': {3: { 1:true }},
      'getSamplerParameter': {2: { 1:true }},
    
      // WebGL 2 Sync objects
    
      'fenceSync': {2: { 0:true, 1: { 'enumBitwiseOr': [] } }},
      'clientWaitSync': {3: { 1: { 'enumBitwiseOr': ['SYNC_FLUSH_COMMANDS_BIT'] } }},
      'waitSync': {3: { 1: { 'enumBitwiseOr': [] } }},
      'getSyncParameter': {2: { 1:true }},
    
      // WebGL 2 Transform Feedback
    
      'bindTransformFeedback': {2: { 0:true }},
      'beginTransformFeedback': {1: { 0:true }},
      'transformFeedbackVaryings': {3: { 2:true }},
    
      // WebGL2 Uniform Buffer Objects and Transform Feedback Buffers
    
      'bindBufferBase': {3: { 0:true }},
      'bindBufferRange': {5: { 0:true }},
      'getIndexedParameter': {2: { 0:true }},
      'getActiveUniforms': {3: { 2:true }},
      'getActiveUniformBlockParameter': {3: { 2:true }}
    };
    
    /**
     * Map of numbers to names.
     * @type {Object}
     */
    var glEnums = null;
    
    /**
     * Map of names to numbers.
     * @type {Object}
     */
    var enumStringToValue = 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 = { };
        enumStringToValue = { };
        for (var propertyName in ctx) {
          if (typeof ctx[propertyName] == 'number') {
            glEnums[ctx[propertyName]] = propertyName;
            enumStringToValue[propertyName] = ctx[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]) {
            if (typeof funcInfo[argumentIndex] === 'object' &&
                funcInfo[argumentIndex]['enumBitwiseOr'] !== undefined) {
              var enums = funcInfo[argumentIndex]['enumBitwiseOr'];
              var orResult = 0;
              var orEnums = [];
              for (var i = 0; i < enums.length; ++i) {
                var enumValue = enumStringToValue[enums[i]];
                if ((value & enumValue) !== 0) {
                  orResult |= enumValue;
                  orEnums.push(glEnumToString(enumValue));
                }
              }
              if (orResult === value) {
                return orEnums.join(' | ');
              } else {
                return glEnumToString(value);
              }
            } else {
              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.
     * @param {!WebGLRenderingContext} opt_err_ctx The webgl context
     *        to call getError on if different than ctx.
     */
    function makeDebugContext(ctx, opt_onErrorFunc, opt_onFunc, opt_err_ctx) {
      opt_err_ctx = opt_err_ctx || ctx;
      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 = opt_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') {
          if (propertyName != 'getExtension') {
            wrapper[propertyName] = makeErrorWrapper(ctx, propertyName);
          } else {
            var wrapped = makeErrorWrapper(ctx, propertyName);
            wrapper[propertyName] = function () {
              var result = wrapped.apply(ctx, arguments);
              if (!result) {
                return null;
              }
              return makeDebugContext(result, opt_onErrorFunc, opt_onFunc, opt_err_ctx);
            };
          }
        } 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 isWebGL2RenderingContext = !!ctx.createTransformFeedback;
    
      if (isWebGL2RenderingContext) {
        ctx.bindVertexArray(null);
      }
    
      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);
        if (isWebGL2RenderingContext) {
          ctx.vertexAttribDivisor(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);
        if (isWebGL2RenderingContext) {
          ctx.bindTexture(ctx.TEXTURE_2D_ARRAY, null);
          ctx.bindTexture(ctx.TEXTURE_3D, null);
          ctx.bindSampler(ii, 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);
    
      if (isWebGL2RenderingContext) {
        ctx.drawBuffers([ctx.BACK]);
        ctx.readBuffer(ctx.BACK);
        ctx.bindBuffer(ctx.COPY_READ_BUFFER, null);
        ctx.bindBuffer(ctx.COPY_WRITE_BUFFER, null);
        ctx.bindBuffer(ctx.PIXEL_PACK_BUFFER, null);
        ctx.bindBuffer(ctx.PIXEL_UNPACK_BUFFER, null);
        var numTransformFeedbacks = ctx.getParameter(ctx.MAX_TRANSFORM_FEEDBACK_SEPARATE_ATTRIBS);
        for (var ii = 0; ii < numTransformFeedbacks; ++ii) {
          ctx.bindBufferBase(ctx.TRANSFORM_FEEDBACK_BUFFER, ii, null);
        }
        var numUBOs = ctx.getParameter(ctx.MAX_UNIFORM_BUFFER_BINDINGS);
        for (var ii = 0; ii < numUBOs; ++ii) {
          ctx.bindBufferBase(ctx.UNIFORM_BUFFER, ii, null);
        }
        ctx.disable(ctx.RASTERIZER_DISCARD);
        ctx.pixelStorei(ctx.UNPACK_IMAGE_HEIGHT, 0);
        ctx.pixelStorei(ctx.UNPACK_SKIP_IMAGES, 0);
        ctx.pixelStorei(ctx.UNPACK_ROW_LENGTH, 0);
        ctx.pixelStorei(ctx.UNPACK_SKIP_ROWS, 0);
        ctx.pixelStorei(ctx.UNPACK_SKIP_PIXELS, 0);
        ctx.pixelStorei(ctx.PACK_ROW_LENGTH, 0);
        ctx.pixelStorei(ctx.PACK_SKIP_ROWS, 0);
        ctx.pixelStorei(ctx.PACK_SKIP_PIXELS, 0);
        ctx.hint(ctx.FRAGMENT_SHADER_DERIVATIVE_HINT, ctx.DONT_CARE);
      }
    
      // 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;
      var isWebGL2RenderingContext;
    
      // 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) || (window.WebGL2RenderingContext && (ctx instanceof WebGL2RenderingContext))) {
            if (ctx != unwrappedContext_) {
              if (unwrappedContext_) {
                throw "got different context"
              }
              isWebGL2RenderingContext = window.WebGL2RenderingContext && (ctx instanceof WebGL2RenderingContext);
              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[ii]];
        }
      }
    
      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);
          }
          else if (isWebGL2RenderingContext) {
            if (resource instanceof WebGLQuery) {
              unwrappedContext_.deleteQuery(resource);
            } else if (resource instanceof WebGLSampler) {
              unwrappedContext_.deleteSampler(resource);
            } else if (resource instanceof WebGLSync) {
              unwrappedContext_.deleteSync(resource);
            } else if (resource instanceof WebGLTransformFeedback) {
              unwrappedContext_.deleteTransformFeedback(resource);
            } else if (resource instanceof WebGLVertexArrayObject) {
              unwrappedContext_.deleteVertexArray(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"
        ];
        if (isWebGL2RenderingContext) {
          creationFunctions.push(
            "createQuery",
            "createSampler",
            "fenceSync",
            "createTransformFeedback",
            "createVertexArray"
          );
        }
        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"
        ];
        if (isWebGL2RenderingContext) {
          functionsThatShouldReturnNull.push(
            "getInternalformatParameter",
            "getQuery",
            "getQueryParameter",
            "getSamplerParameter",
            "getSyncParameter",
            "getTransformFeedbackVarying",
            "getIndexedParameter",
            "getUniformIndices",
            "getActiveUniforms",
            "getActiveUniformBlockParameter",
            "getActiveUniformBlockName"
          );
        }
        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"
        ];
        if (isWebGL2RenderingContext) {
          isFunctions.push(
            "isQuery",
            "isSampler",
            "isSync",
            "isTransformFeedback",
            "isVertexArray"
          );
        }
        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_;
        };
    
        if (isWebGL2RenderingContext) {
          wrappedContext_.getFragDataLocation = function(f) {
            return function() {
              loseContextIfTime();
              if (contextLost_) {
                return -1;
              }
              return f.apply(ctx, arguments);
            };
          }(wrappedContext_.getFragDataLocation);
    
          wrappedContext_.clientWaitSync = function(f) {
            return function() {
              loseContextIfTime();
              if (contextLost_) {
                return wrappedContext_.WAIT_FAILED;
              }
              return f.apply(ctx, arguments);
            };
          }(wrappedContext_.clientWaitSync);
    
          wrappedContext_.getUniformBlockIndex = function(f) {
            return function() {
              loseContextIfTime();
              if (contextLost_) {
                return wrappedContext_.INVALID_INDEX;
              }
              return f.apply(ctx, arguments);
            };
          }(wrappedContext_.getUniformBlockIndex);
        }
    
        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
    };
    
    }();