agora-electron-sdk 0.0.0-dev.1

package/ts/Renderer/WebGLRenderer/webgl-utils.js

@@ -0,0 +1,1510 @@
+/*
+ * Copyright 2012, Gregg Tavares.
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are
+ * met:
+ *
+ *     * Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ *     * Redistributions in binary form must reproduce the above
+ * copyright notice, this list of conditions and the following disclaimer
+ * in the documentation and/or other materials provided with the
+ * distribution.
+ *     * Neither the name of Gregg Tavares. nor the names of his
+ * contributors may be used to endorse or promote products derived from
+ * this software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+ * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+ * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+ * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+ * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+ * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+ * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+ * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+'use strict';
+
+(function (root, factory) {
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define([], factory);
+  } else {
+    // Browser globals
+    var lib = factory.call(root);
+    Object.keys(lib).forEach(function (key) {
+      root[key] = lib[key];
+    });
+  }
+})(this, function () {
+  var topWindow = this;
+
+  /** @module webgl-utils */
+
+  /**
+   * Wrapped logging function.
+   * @param {string} msg The message to log.
+   */
+  function error(msg) {
+    if (topWindow.console) {
+      if (topWindow.console.error) {
+        topWindow.console.error(msg);
+      } else if (topWindow.console.log) {
+        topWindow.console.log(msg);
+      }
+    }
+  }
+
+  /**
+   * Check if the page is embedded.
+   * @param {Window?) w window to check
+   * @return {boolean} True of we are in an iframe
+   */
+  function isInIFrame(w) {
+    w = w || topWindow;
+    return w !== w.top;
+  }
+
+  /**
+   * Creates the HTLM for a failure message
+   * @param {string} canvasContainerId id of container of th
+   *        canvas.
+   * @return {string} The html.
+   */
+  function makeFailHTML(msg) {
+    return (
+      '' +
+      '<table style="background-color: #8CE; width: 100%; height: 100%;"><tr>' +
+      '<td align="center">' +
+      '<div style="display: table-cell; vertical-align: middle;">' +
+      '<div style="">' +
+      msg +
+      '</div>' +
+      '</div>' +
+      '</td></tr></table>'
+    );
+  }
+
+  /**
+   * Mesasge for getting a webgl browser
+   * @type {string}
+   */
+  var GET_A_WEBGL_BROWSER =
+    '' +
+    'This page requires a browser that supports WebGL.<br/>' +
+    '<a href="http://get.webgl.org">Click here to upgrade your browser.</a>';
+
+  /**
+   * Mesasge for need better hardware
+   * @type {string}
+   */
+  var OTHER_PROBLEM =
+    '' +
+    "It doesn't appear your computer can support WebGL.<br/>" +
+    '<a href="http://get.webgl.org/troubleshooting/">Click here for more information.</a>';
+
+  /**
+   * Creates a webgl context.
+   * @param {HTMLCanvasElement} canvas The canvas tag to get
+   *     context from. If one is not passed in one will be
+   *     created.
+   * @return {WebGLRenderingContext} The created context.
+   */
+  function create3DContext(canvas, opt_attribs) {
+    var names = ['webgl', 'experimental-webgl'];
+    var context = null;
+    for (var ii = 0; ii < names.length; ++ii) {
+      try {
+        context = canvas.getContext(names[ii], opt_attribs);
+      } catch (e) {} // eslint-disable-line
+      if (context) {
+        break;
+      }
+    }
+    return context;
+  }
+
+  /**
+   * Creates a webgl context. If creation fails it will
+   * change the contents of the container of the <canvas>
+   * tag to an error message with the correct links for WebGL.
+   * @param {HTMLCanvasElement} canvas. The canvas element to
+   *     create a context from.
+   * @param {WebGLContextCreationAttirbutes} opt_attribs Any
+   *     creation attributes you want to pass in.
+   * @return {WebGLRenderingContext} The created context.
+   * @memberOf module:webgl-utils
+   */
+  function setupWebGL(canvas, opt_attribs) {
+    function showLink(str) {
+      var container = canvas.parentNode;
+      if (container) {
+        container.innerHTML = makeFailHTML(str);
+      }
+    }
+
+    if (!topWindow.WebGLRenderingContext) {
+      showLink(GET_A_WEBGL_BROWSER);
+      return null;
+    }
+
+    var context = create3DContext(canvas, opt_attribs);
+    if (!context) {
+      showLink(OTHER_PROBLEM);
+    }
+    return context;
+  }
+
+  function updateCSSIfInIFrame() {
+    if (isInIFrame()) {
+      document.body.className = 'iframe';
+    }
+  }
+
+  /**
+   * @typedef {Object} GetWebGLContextOptions
+   * @property {boolean} [dontResize] by default `getWebGLContext` will resize the canvas to match the size it's displayed.
+   * @property {boolean} [noTitle] by default inserts a copy of the `<title>` content into the page
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Gets a WebGL context.
+   * makes its backing store the size it is displayed.
+   * @param {HTMLCanvasElement} canvas a canvas element.
+   * @param {WebGLContextCreationAttirbutes} [opt_attribs] optional webgl context creation attributes
+   * @param {module:webgl-utils.GetWebGLContextOptions} [opt_options] options
+   * @memberOf module:webgl-utils
+   */
+  function getWebGLContext(canvas, opt_attribs, opt_options) {
+    var options = opt_options || {};
+
+    if (isInIFrame()) {
+      updateCSSIfInIFrame();
+
+      // make the canvas backing store the size it's displayed.
+      if (!options.dontResize && options.resize !== false) {
+        var width = canvas.clientWidth;
+        var height = canvas.clientHeight;
+        canvas.width = width;
+        canvas.height = height;
+      }
+    } else if (!options.noTitle && options.title !== false) {
+      var title = document.title;
+      var h1 = document.createElement('h1');
+      h1.innerText = title;
+      document.body.insertBefore(h1, document.body.children[0]);
+    }
+
+    var gl = setupWebGL(canvas, opt_attribs);
+    return gl;
+  }
+
+  /**
+   * Error Callback
+   * @callback ErrorCallback
+   * @param {string} msg error message.
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Loads a shader.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} shaderSource The shader source.
+   * @param {number} shaderType The type of shader.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function loadShader(gl, shaderSource, shaderType, opt_errorCallback) {
+    var errFn = opt_errorCallback || error;
+    // Create the shader object
+    var shader = gl.createShader(shaderType);
+
+    // Load the shader source
+    gl.shaderSource(shader, shaderSource);
+
+    // Compile the shader
+    gl.compileShader(shader);
+
+    // Check the compile status
+    var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+    if (!compiled) {
+      // Something went wrong during compilation; get the error
+      var lastError = gl.getShaderInfoLog(shader);
+      errFn("*** Error compiling shader '" + shader + "':" + lastError);
+      gl.deleteShader(shader);
+      return null;
+    }
+
+    return shader;
+  }
+
+  /**
+   * Creates a program, attaches shaders, binds attrib locations, links the
+   * program and calls useProgram.
+   * @param {WebGLShader[]} shaders The shaders to attach
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @memberOf module:webgl-utils
+   */
+  function createProgram(
+    gl,
+    shaders,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
+    var errFn = opt_errorCallback || error;
+    var program = gl.createProgram();
+    shaders.forEach(function (shader) {
+      gl.attachShader(program, shader);
+    });
+    if (opt_attribs) {
+      obj_attrib.forEach(function (attrib, ndx) {
+        gl.bindAttribLocation(
+          program,
+          opt_locations ? opt_locations[ndx] : ndx,
+          attrib
+        );
+      });
+    }
+    gl.linkProgram(program);
+
+    // Check the link status
+    var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
+    if (!linked) {
+      // something went wrong with the link
+      var lastError = gl.getProgramInfoLog(program);
+      errFn('Error in program linking:' + lastError);
+
+      gl.deleteProgram(program);
+      return null;
+    }
+    return program;
+  }
+
+  /**
+   * Loads a shader from a script tag.
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext to use.
+   * @param {string} scriptId The id of the script tag.
+   * @param {number} opt_shaderType The type of shader. If not passed in it will
+   *     be derived from the type of the script tag.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors.
+   * @return {WebGLShader} The created shader.
+   */
+  function createShaderFromScript(
+    gl,
+    scriptId,
+    opt_shaderType,
+    opt_errorCallback
+  ) {
+    var shaderSource = '';
+    var shaderType;
+    var shaderScript = document.getElementById(scriptId);
+    if (!shaderScript) {
+      throw '*** Error: unknown script element' + scriptId;
+    }
+    shaderSource = shaderScript.text;
+
+    if (!opt_shaderType) {
+      if (shaderScript.type === 'x-shader/x-vertex') {
+        shaderType = gl.VERTEX_SHADER;
+      } else if (shaderScript.type === 'x-shader/x-fragment') {
+        shaderType = gl.FRAGMENT_SHADER;
+      } else if (
+        shaderType !== gl.VERTEX_SHADER &&
+        shaderType !== gl.FRAGMENT_SHADER
+      ) {
+        throw '*** Error: unknown shader type';
+      }
+    }
+
+    return loadShader(
+      gl,
+      shaderSource,
+      opt_shaderType ? opt_shaderType : shaderType,
+      opt_errorCallback
+    );
+  }
+
+  var defaultShaderType = ['VERTEX_SHADER', 'FRAGMENT_SHADER'];
+
+  /**
+   * Creates a program from 2 script tags.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderScriptIds Array of ids of the script
+   *        tags for the shaders. The first is assumed to be the
+   *        vertex shader, the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromScripts(
+    gl,
+    shaderScriptIds,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
+    var shaders = [];
+    for (var ii = 0; ii < shaderScriptIds.length; ++ii) {
+      shaders.push(
+        createShaderFromScript(
+          gl,
+          shaderScriptIds[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback
+        )
+      );
+    }
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback
+    );
+  }
+
+  /**
+   * Creates a program from 2 sources.
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {WebGLProgram} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramFromSources(
+    gl,
+    shaderSources,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
+    var shaders = [];
+    for (var ii = 0; ii < shaderSources.length; ++ii) {
+      shaders.push(
+        loadShader(
+          gl,
+          shaderSources[ii],
+          gl[defaultShaderType[ii]],
+          opt_errorCallback
+        )
+      );
+    }
+    return createProgram(
+      gl,
+      shaders,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback
+    );
+  }
+
+  /**
+   * Returns the corresponding bind point for a given sampler type
+   */
+  function getBindPointForSamplerType(gl, type) {
+    if (type === gl.SAMPLER_2D) return gl.TEXTURE_2D; // eslint-disable-line
+    if (type === gl.SAMPLER_CUBE) return gl.TEXTURE_CUBE_MAP; // eslint-disable-line
+  }
+
+  /**
+   * @typedef {Object.<string, function>} Setters
+   */
+
+  /**
+   * Creates setter functions for all uniforms of a shader
+   * program.
+   *
+   * @see {@link module:webgl-utils.setUniforms}
+   *
+   * @param {WebGLProgram} program the program to create setters for.
+   * @returns {Object.<string, function>} an object with a setter by name for each uniform
+   * @memberOf module:webgl-utils
+   */
+  function createUniformSetters(gl, program) {
+    var textureUnit = 0;
+
+    /**
+     * Creates a setter for a uniform of the given program with it's
+     * location embedded in the setter.
+     * @param {WebGLProgram} program
+     * @param {WebGLUniformInfo} uniformInfo
+     * @returns {function} the created setter.
+     */
+    function createUniformSetter(program, uniformInfo) {
+      var location = gl.getUniformLocation(program, uniformInfo.name);
+      var type = uniformInfo.type;
+      // Check if this uniform is an array
+      var isArray =
+        uniformInfo.size > 1 && uniformInfo.name.substr(-3) === '[0]';
+      if (type === gl.FLOAT && isArray) {
+        return function (v) {
+          gl.uniform1fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT) {
+        return function (v) {
+          gl.uniform1f(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC2) {
+        return function (v) {
+          gl.uniform2fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC3) {
+        return function (v) {
+          gl.uniform3fv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_VEC4) {
+        return function (v) {
+          gl.uniform4fv(location, v);
+        };
+      }
+      if (type === gl.INT && isArray) {
+        return function (v) {
+          gl.uniform1iv(location, v);
+        };
+      }
+      if (type === gl.INT) {
+        return function (v) {
+          gl.uniform1i(location, v);
+        };
+      }
+      if (type === gl.INT_VEC2) {
+        return function (v) {
+          gl.uniform2iv(location, v);
+        };
+      }
+      if (type === gl.INT_VEC3) {
+        return function (v) {
+          gl.uniform3iv(location, v);
+        };
+      }
+      if (type === gl.INT_VEC4) {
+        return function (v) {
+          gl.uniform4iv(location, v);
+        };
+      }
+      if (type === gl.BOOL) {
+        return function (v) {
+          gl.uniform1iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC2) {
+        return function (v) {
+          gl.uniform2iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC3) {
+        return function (v) {
+          gl.uniform3iv(location, v);
+        };
+      }
+      if (type === gl.BOOL_VEC4) {
+        return function (v) {
+          gl.uniform4iv(location, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT2) {
+        return function (v) {
+          gl.uniformMatrix2fv(location, false, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT3) {
+        return function (v) {
+          gl.uniformMatrix3fv(location, false, v);
+        };
+      }
+      if (type === gl.FLOAT_MAT4) {
+        return function (v) {
+          gl.uniformMatrix4fv(location, false, v);
+        };
+      }
+      if ((type === gl.SAMPLER_2D || type === gl.SAMPLER_CUBE) && isArray) {
+        var units = [];
+        for (var ii = 0; ii < info.size; ++ii) {
+          units.push(textureUnit++);
+        }
+        return (function (bindPoint, units) {
+          return function (textures) {
+            gl.uniform1iv(location, units);
+            textures.forEach(function (texture, index) {
+              gl.activeTexture(gl.TEXTURE0 + units[index]);
+              gl.bindTexture(bindPoint, texture);
+            });
+          };
+        })(getBindPointForSamplerType(gl, type), units);
+      }
+      if (type === gl.SAMPLER_2D || type === gl.SAMPLER_CUBE) {
+        return (function (bindPoint, unit) {
+          return function (texture) {
+            gl.uniform1i(location, unit);
+            gl.activeTexture(gl.TEXTURE0 + unit);
+            gl.bindTexture(bindPoint, texture);
+          };
+        })(getBindPointForSamplerType(gl, type), textureUnit++);
+      }
+      throw 'unknown type: 0x' + type.toString(16); // we should never get here.
+    }
+
+    var uniformSetters = {};
+    var numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS);
+
+    for (var ii = 0; ii < numUniforms; ++ii) {
+      var uniformInfo = gl.getActiveUniform(program, ii);
+      if (!uniformInfo) {
+        break;
+      }
+      var name = uniformInfo.name;
+      // remove the array suffix.
+      if (name.substr(-3) === '[0]') {
+        name = name.substr(0, name.length - 3);
+      }
+      var setter = createUniformSetter(program, uniformInfo);
+      uniformSetters[name] = setter;
+    }
+    return uniformSetters;
+  }
+
+  /**
+   * Set uniforms and binds related textures.
+   *
+   * example:
+   *
+   *     var programInfo = createProgramInfo(
+   *         gl, ["some-vs", "some-fs");
+   *
+   *     var tex1 = gl.createTexture();
+   *     var tex2 = gl.createTexture();
+   *
+   *     ... assume we setup the textures with data ...
+   *
+   *     var uniforms = {
+   *       u_someSampler: tex1,
+   *       u_someOtherSampler: tex2,
+   *       u_someColor: [1,0,0,1],
+   *       u_somePosition: [0,1,1],
+   *       u_someMatrix: [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ],
+   *     };
+   *
+   *     gl.useProgram(program);
+   *
+   * This will automatically bind the textures AND set the
+   * uniforms.
+   *
+   *     setUniforms(programInfo.uniformSetters, uniforms);
+   *
+   * For the example above it is equivalent to
+   *
+   *     var texUnit = 0;
+   *     gl.activeTexture(gl.TEXTURE0 + texUnit);
+   *     gl.bindTexture(gl.TEXTURE_2D, tex1);
+   *     gl.uniform1i(u_someSamplerLocation, texUnit++);
+   *     gl.activeTexture(gl.TEXTURE0 + texUnit);
+   *     gl.bindTexture(gl.TEXTURE_2D, tex2);
+   *     gl.uniform1i(u_someSamplerLocation, texUnit++);
+   *     gl.uniform4fv(u_someColorLocation, [1, 0, 0, 1]);
+   *     gl.uniform3fv(u_somePositionLocation, [0, 1, 1]);
+   *     gl.uniformMatrix4fv(u_someMatrix, false, [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ]);
+   *
+   * Note it is perfectly reasonable to call `setUniforms` multiple times. For example
+   *
+   *     var uniforms = {
+   *       u_someSampler: tex1,
+   *       u_someOtherSampler: tex2,
+   *     };
+   *
+   *     var moreUniforms {
+   *       u_someColor: [1,0,0,1],
+   *       u_somePosition: [0,1,1],
+   *       u_someMatrix: [
+   *         1,0,0,0,
+   *         0,1,0,0,
+   *         0,0,1,0,
+   *         0,0,0,0,
+   *       ],
+   *     };
+   *
+   *     setUniforms(programInfo.uniformSetters, uniforms);
+   *     setUniforms(programInfo.uniformSetters, moreUniforms);
+   *
+   * @param {Object.<string, function>} setters the setters returned from
+   *        `createUniformSetters`.
+   * @param {Object.<string, value>} an object with values for the
+   *        uniforms.
+   * @memberOf module:webgl-utils
+   */
+  function setUniforms(setters, values) {
+    Object.keys(values).forEach(function (name) {
+      var setter = setters[name];
+      if (setter) {
+        setter(values[name]);
+      }
+    });
+  }
+
+  /**
+   * Creates setter functions for all attributes of a shader
+   * program. You can pass this to {@link module:webgl-utils.setBuffersAndAttributes} to set all your buffers and attributes.
+   *
+   * @see {@link module:webgl-utils.setAttributes} for example
+   * @param {WebGLProgram} program the program to create setters for.
+   * @return {Object.<string, function>} an object with a setter for each attribute by name.
+   * @memberOf module:webgl-utils
+   */
+  function createAttributeSetters(gl, program) {
+    var attribSetters = {};
+
+    function createAttribSetter(index) {
+      return function (b) {
+        gl.bindBuffer(gl.ARRAY_BUFFER, b.buffer);
+        gl.enableVertexAttribArray(index);
+        gl.vertexAttribPointer(
+          index,
+          b.numComponents || b.size,
+          b.type || gl.FLOAT,
+          b.normalize || false,
+          b.stride || 0,
+          b.offset || 0
+        );
+      };
+    }
+
+    var numAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+    for (var ii = 0; ii < numAttribs; ++ii) {
+      var attribInfo = gl.getActiveAttrib(program, ii);
+      if (!attribInfo) {
+        break;
+      }
+      var index = gl.getAttribLocation(program, attribInfo.name);
+      attribSetters[attribInfo.name] = createAttribSetter(index);
+    }
+
+    return attribSetters;
+  }
+
+  /**
+   * Sets attributes and binds buffers (deprecated... use {@link module:webgl-utils.setBuffersAndAttributes})
+   *
+   * Example:
+   *
+   *     var program = createProgramFromScripts(
+   *         gl, ["some-vs", "some-fs");
+   *
+   *     var attribSetters = createAttributeSetters(program);
+   *
+   *     var positionBuffer = gl.createBuffer();
+   *     var texcoordBuffer = gl.createBuffer();
+   *
+   *     var attribs = {
+   *       a_position: {buffer: positionBuffer, numComponents: 3},
+   *       a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+   *     };
+   *
+   *     gl.useProgram(program);
+   *
+   * This will automatically bind the buffers AND set the
+   * attributes.
+   *
+   *     setAttributes(attribSetters, attribs);
+   *
+   * Properties of attribs. For each attrib you can add
+   * properties:
+   *
+   * *   type: the type of data in the buffer. Default = gl.FLOAT
+   * *   normalize: whether or not to normalize the data. Default = false
+   * *   stride: the stride. Default = 0
+   * *   offset: offset into the buffer. Default = 0
+   *
+   * For example if you had 3 value float positions, 2 value
+   * float texcoord and 4 value uint8 colors you'd setup your
+   * attribs like this
+   *
+   *     var attribs = {
+   *       a_position: {buffer: positionBuffer, numComponents: 3},
+   *       a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+   *       a_color: {
+   *         buffer: colorBuffer,
+   *         numComponents: 4,
+   *         type: gl.UNSIGNED_BYTE,
+   *         normalize: true,
+   *       },
+   *     };
+   *
+   * @param {Object.<string, function>} setters Attribute setters as returned from createAttributeSetters
+   * @param {Object.<string, module:webgl-utils.AttribInfo>} buffers AttribInfos mapped by attribute name.
+   * @memberOf module:webgl-utils
+   * @deprecated use {@link module:webgl-utils.setBuffersAndAttributes}
+   */
+  function setAttributes(setters, buffers) {
+    Object.keys(buffers).forEach(function (name) {
+      var setter = setters[name];
+      if (setter) {
+        setter(buffers[name]);
+      }
+    });
+  }
+
+  /**
+   * @typedef {Object} ProgramInfo
+   * @property {WebGLProgram} program A shader program
+   * @property {Object<string, function>} uniformSetters: object of setters as returned from createUniformSetters,
+   * @property {Object<string, function>} attribSetters: object of setters as returned from createAttribSetters,
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a ProgramInfo from 2 sources.
+   *
+   * A ProgramInfo contains
+   *
+   *     programInfo = {
+   *        program: WebGLProgram,
+   *        uniformSetters: object of setters as returned from createUniformSetters,
+   *        attribSetters: object of setters as returned from createAttribSetters,
+   *     }
+   *
+   * @param {WebGLRenderingContext} gl The WebGLRenderingContext
+   *        to use.
+   * @param {string[]} shaderSourcess Array of sources for the
+   *        shaders or ids. The first is assumed to be the vertex shader,
+   *        the second the fragment shader.
+   * @param {string[]} [opt_attribs] An array of attribs names. Locations will be assigned by index if not passed in
+   * @param {number[]} [opt_locations] The locations for the. A parallel array to opt_attribs letting you assign locations.
+   * @param {module:webgl-utils.ErrorCallback} opt_errorCallback callback for errors. By default it just prints an error to the console
+   *        on error. If you want something else pass an callback. It's passed an error message.
+   * @return {module:webgl-utils.ProgramInfo} The created program.
+   * @memberOf module:webgl-utils
+   */
+  function createProgramInfo(
+    gl,
+    shaderSources,
+    opt_attribs,
+    opt_locations,
+    opt_errorCallback
+  ) {
+    shaderSources = shaderSources.map(function (source) {
+      var script = document.getElementById(source);
+      return script ? script.text : source;
+    });
+    var program = createProgramFromSources(
+      gl,
+      shaderSources,
+      opt_attribs,
+      opt_locations,
+      opt_errorCallback
+    );
+    if (!program) {
+      return null;
+    }
+    var uniformSetters = createUniformSetters(gl, program);
+    var attribSetters = createAttributeSetters(gl, program);
+    return {
+      program: program,
+      uniformSetters: uniformSetters,
+      attribSetters: attribSetters,
+    };
+  }
+
+  /**
+   * Sets attributes and buffers including the `ELEMENT_ARRAY_BUFFER` if appropriate
+   *
+   * Example:
+   *
+   *     var programInfo = createProgramInfo(
+   *         gl, ["some-vs", "some-fs");
+   *
+   *     var arrays = {
+   *       position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *       texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *     };
+   *
+   *     var bufferInfo = createBufferInfoFromArrays(gl, arrays);
+   *
+   *     gl.useProgram(programInfo.program);
+   *
+   * This will automatically bind the buffers AND set the
+   * attributes.
+   *
+   *     setBuffersAndAttributes(programInfo.attribSetters, bufferInfo);
+   *
+   * For the example above it is equivilent to
+   *
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+   *     gl.enableVertexAttribArray(a_positionLocation);
+   *     gl.vertexAttribPointer(a_positionLocation, 3, gl.FLOAT, false, 0, 0);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
+   *     gl.enableVertexAttribArray(a_texcoordLocation);
+   *     gl.vertexAttribPointer(a_texcoordLocation, 4, gl.FLOAT, false, 0, 0);
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext.
+   * @param {Object.<string, function>} setters Attribute setters as returned from `createAttributeSetters`
+   * @param {module:webgl-utils.BufferInfo} buffers a BufferInfo as returned from `createBufferInfoFromArrays`.
+   * @memberOf module:webgl-utils
+   */
+  function setBuffersAndAttributes(gl, setters, buffers) {
+    setAttributes(setters, buffers.attribs);
+    if (buffers.indices) {
+      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
+    }
+  }
+
+  // Add your prefix here.
+  var browserPrefixes = ['', 'MOZ_', 'OP_', 'WEBKIT_'];
+
+  /**
+   * Given an extension name like WEBGL_compressed_texture_s3tc
+   * returns the supported version extension, like
+   * WEBKIT_WEBGL_compressed_teture_s3tc
+   * @param {string} name Name of extension to look for
+   * @return {WebGLExtension} The extension or undefined if not
+   *     found.
+   * @memberOf module:webgl-utils
+   */
+  function getExtensionWithKnownPrefixes(gl, name) {
+    for (var ii = 0; ii < browserPrefixes.length; ++ii) {
+      var prefixedName = browserPrefixes[ii] + name;
+      var ext = gl.getExtension(prefixedName);
+      if (ext) {
+        return ext;
+      }
+    }
+  }
+
+  /**
+   * Resize a canvas to match the size its displayed.
+   * @param {HTMLCanvasElement} canvas The canvas to resize.
+   * @param {boolean} true if the canvas was resized.
+   * @memberOf module:webgl-utils
+   */
+  function resizeCanvasToDisplaySize(canvas, multiplier) {
+    multiplier = multiplier || 1;
+    var width = canvas.clientWidth * multiplier;
+    var height = canvas.clientHeight * multiplier;
+    if (canvas.width !== width || canvas.height !== height) {
+      canvas.width = width;
+      canvas.height = height;
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Get's the iframe in the parent document
+   * that is displaying the specified window .
+   * @param {Window} window window to check.
+   * @return {HTMLIFrameElement?) the iframe element if window is in an iframe
+   */
+  function getIFrameForWindow(window) {
+    if (!isInIFrame(window)) {
+      return;
+    }
+    var iframes = window.parent.document.getElementsByTagName('iframe');
+    for (var ii = 0; ii < iframes.length; ++ii) {
+      var iframe = iframes[ii];
+      if (iframe.contentDocument === window.document) {
+        return iframe; // eslint-disable-line
+      }
+    }
+  }
+
+  /**
+   * Returns true if window is on screen. The main window is
+   * always on screen windows in iframes might not be.
+   * @param {Window} window the window to check.
+   * @return {boolean} true if window is on screen.
+   */
+  function isFrameVisible(window) {
+    try {
+      var iframe = getIFrameForWindow(window);
+      if (!iframe) {
+        return true;
+      }
+
+      var bounds = iframe.getBoundingClientRect();
+      var isVisible =
+        bounds.top < window.parent.innerHeight &&
+        bounds.bottom >= 0 &&
+        bounds.left < window.parent.innerWidth &&
+        bounds.right >= 0;
+
+      return isVisible && isFrameVisible(window.parent);
+    } catch (e) {
+      return true; // We got a security error?
+    }
+  }
+
+  /**
+   * Returns true if element is on screen.
+   * @param {HTMLElement} element the element to check.
+   * @return {boolean} true if element is on screen.
+   */
+  function isOnScreen(element) {
+    var isVisible = true;
+
+    if (element) {
+      var bounds = element.getBoundingClientRect();
+      isVisible = bounds.top < topWindow.innerHeight && bounds.bottom >= 0;
+    }
+
+    return isVisible && isFrameVisible(topWindow);
+  }
+
+  // Add `push` to a typed array. It just keeps a 'cursor'
+  // and allows use to `push` values into the array so we
+  // don't have to manually compute offsets
+  function augmentTypedArray(typedArray, numComponents) {
+    var cursor = 0;
+    typedArray.push = function () {
+      for (var ii = 0; ii < arguments.length; ++ii) {
+        var value = arguments[ii];
+        if (
+          value instanceof Array ||
+          (value.buffer && value.buffer instanceof ArrayBuffer)
+        ) {
+          for (var jj = 0; jj < value.length; ++jj) {
+            typedArray[cursor++] = value[jj];
+          }
+        } else {
+          typedArray[cursor++] = value;
+        }
+      }
+    };
+    typedArray.reset = function (opt_index) {
+      cursor = opt_index || 0;
+    };
+    typedArray.numComponents = numComponents;
+    Object.defineProperty(typedArray, 'numElements', {
+      get: function () {
+        return (this.length / this.numComponents) | 0;
+      },
+    });
+    return typedArray;
+  }
+
+  /**
+   * creates a typed array with a `push` function attached
+   * so that you can easily *push* values.
+   *
+   * `push` can take multiple arguments. If an argument is an array each element
+   * of the array will be added to the typed array.
+   *
+   * Example:
+   *
+   *     var array = createAugmentedTypedArray(3, 2);  // creates a Float32Array with 6 values
+   *     array.push(1, 2, 3);
+   *     array.push([4, 5, 6]);
+   *     // array now contains [1, 2, 3, 4, 5, 6]
+   *
+   * Also has `numComponents` and `numElements` properties.
+   *
+   * @param {number} numComponents number of components
+   * @param {number} numElements number of elements. The total size of the array will be `numComponents * numElements`.
+   * @param {constructor} opt_type A constructor for the type. Default = `Float32Array`.
+   * @return {ArrayBuffer} A typed array.
+   * @memberOf module:webgl-utils
+   */
+  function createAugmentedTypedArray(numComponents, numElements, opt_type) {
+    var Type = opt_type || Float32Array;
+    return augmentTypedArray(
+      new Type(numComponents * numElements),
+      numComponents
+    );
+  }
+
+  function createBufferFromTypedArray(gl, array, type, drawType) {
+    type = type || gl.ARRAY_BUFFER;
+    var buffer = gl.createBuffer();
+    gl.bindBuffer(type, buffer);
+    gl.bufferData(type, array, drawType || gl.STATIC_DRAW);
+    return buffer;
+  }
+
+  function allButIndices(name) {
+    return name !== 'indices';
+  }
+
+  function createMapping(obj) {
+    var mapping = {};
+    Object.keys(obj)
+      .filter(allButIndices)
+      .forEach(function (key) {
+        mapping['a_' + key] = key;
+      });
+    return mapping;
+  }
+
+  function getGLTypeForTypedArray(gl, typedArray) {
+    if (typedArray instanceof Int8Array) {
+      return gl.BYTE;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint8Array) {
+      return gl.UNSIGNED_BYTE;
+    } // eslint-disable-line
+    if (typedArray instanceof Int16Array) {
+      return gl.SHORT;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint16Array) {
+      return gl.UNSIGNED_SHORT;
+    } // eslint-disable-line
+    if (typedArray instanceof Int32Array) {
+      return gl.INT;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint32Array) {
+      return gl.UNSIGNED_INT;
+    } // eslint-disable-line
+    if (typedArray instanceof Float32Array) {
+      return gl.FLOAT;
+    } // eslint-disable-line
+    throw 'unsupported typed array type';
+  }
+
+  // This is really just a guess. Though I can't really imagine using
+  // anything else? Maybe for some compression?
+  function getNormalizationForTypedArray(typedArray) {
+    if (typedArray instanceof Int8Array) {
+      return true;
+    } // eslint-disable-line
+    if (typedArray instanceof Uint8Array) {
+      return true;
+    } // eslint-disable-line
+    return false;
+  }
+
+  function isArrayBuffer(a) {
+    return a.buffer && a.buffer instanceof ArrayBuffer;
+  }
+
+  function guessNumComponentsFromName(name, length) {
+    var numComponents;
+    if (name.indexOf('coord') >= 0) {
+      numComponents = 2;
+    } else if (name.indexOf('color') >= 0) {
+      numComponents = 4;
+    } else {
+      numComponents = 3; // position, normals, indices ...
+    }
+
+    if (length % numComponents > 0) {
+      throw 'can not guess numComponents. You should specify it.';
+    }
+
+    return numComponents;
+  }
+
+  function makeTypedArray(array, name) {
+    if (isArrayBuffer(array)) {
+      return array;
+    }
+
+    if (Array.isArray(array)) {
+      array = {
+        data: array,
+      };
+    }
+
+    if (!array.numComponents) {
+      array.numComponents = guessNumComponentsFromName(name, array.length);
+    }
+
+    var type = array.type;
+    if (!type) {
+      if (name === 'indices') {
+        type = Uint16Array;
+      }
+    }
+    var typedArray = createAugmentedTypedArray(
+      array.numComponents,
+      (array.data.length / array.numComponents) | 0,
+      type
+    );
+    typedArray.push(array.data);
+    return typedArray;
+  }
+
+  /**
+   * @typedef {Object} AttribInfo
+   * @property {number} [numComponents] the number of components for this attribute.
+   * @property {number} [size] the number of components for this attribute.
+   * @property {number} [type] the type of the attribute (eg. `gl.FLOAT`, `gl.UNSIGNED_BYTE`, etc...) Default = `gl.FLOAT`
+   * @property {boolean} [normalized] whether or not to normalize the data. Default = false
+   * @property {number} [offset] offset into buffer in bytes. Default = 0
+   * @property {number} [stride] the stride in bytes per element. Default = 0
+   * @property {WebGLBuffer} buffer the buffer that contains the data for this attribute
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a set of attribute data and WebGLBuffers from set of arrays
+   *
+   * Given
+   *
+   *      var arrays = {
+   *        position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *        texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *        normal:   { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],     },
+   *        color:    { numComponents: 4, data: [255, 255, 255, 255, 255, 0, 0, 255, 0, 0, 255, 255], type: Uint8Array, },
+   *        indices:  { numComponents: 3, data: [0, 1, 2, 1, 2, 3],                       },
+   *      };
+   *
+   * returns something like
+   *
+   *      var attribs = {
+   *        a_position: { numComponents: 3, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_texcoord: { numComponents: 2, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_normal:   { numComponents: 3, type: gl.FLOAT,         normalize: false, buffer: WebGLBuffer, },
+   *        a_color:    { numComponents: 4, type: gl.UNSIGNED_BYTE, normalize: true,  buffer: WebGLBuffer, },
+   *      };
+   *
+   * @param {WebGLRenderingContext} gl The webgl rendering context.
+   * @param {Object.<string, array|typedarray>} arrays The arrays
+   * @param {Object.<string, string>} [opt_mapping] mapping from attribute name to array name.
+   *     if not specified defaults to "a_name" -> "name".
+   * @return {Object.<string, module:webgl-utils.AttribInfo>} the attribs
+   * @memberOf module:webgl-utils
+   */
+  function createAttribsFromArrays(gl, arrays, opt_mapping) {
+    var mapping = opt_mapping || createMapping(arrays);
+    var attribs = {};
+    Object.keys(mapping).forEach(function (attribName) {
+      var bufferName = mapping[attribName];
+      var array = makeTypedArray(arrays[bufferName], bufferName);
+      attribs[attribName] = {
+        buffer: createBufferFromTypedArray(gl, array),
+        numComponents:
+          array.numComponents || guessNumComponentsFromName(bufferName),
+        type: getGLTypeForTypedArray(gl, array),
+        normalize: getNormalizationForTypedArray(array),
+      };
+    });
+    return attribs;
+  }
+
+  /**
+   * tries to get the number of elements from a set of arrays.
+   */
+  function getNumElementsFromNonIndexedArrays(arrays) {
+    var key = Object.keys(arrays)[0];
+    var array = arrays[key];
+    if (isArrayBuffer(array)) {
+      return array.numElements;
+    } else {
+      return array.data.length / array.numComponents;
+    }
+  }
+
+  /**
+   * @typedef {Object} BufferInfo
+   * @property {number} numElements The number of elements to pass to `gl.drawArrays` or `gl.drawElements`.
+   * @property {WebGLBuffer} [indices] The indices `ELEMENT_ARRAY_BUFFER` if any indices exist.
+   * @property {Object.<string, module:webgl-utils.AttribInfo>} attribs The attribs approriate to call `setAttributes`
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Creates a BufferInfo from an object of arrays.
+   *
+   * This can be passed to {@link module:webgl-utils.setBuffersAndAttributes} and to
+   * {@link module:webgl-utils:drawBufferInfo}.
+   *
+   * Given an object like
+   *
+   *     var arrays = {
+   *       position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
+   *       texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1],                 },
+   *       normal:   { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],     },
+   *       indices:  { numComponents: 3, data: [0, 1, 2, 1, 2, 3],                       },
+   *     };
+   *
+   *  Creates an BufferInfo like this
+   *
+   *     bufferInfo = {
+   *       numElements: 4,        // or whatever the number of elements is
+   *       indices: WebGLBuffer,  // this property will not exist if there are no indices
+   *       attribs: {
+   *         a_position: { buffer: WebGLBuffer, numComponents: 3, },
+   *         a_normal:   { buffer: WebGLBuffer, numComponents: 3, },
+   *         a_texcoord: { buffer: WebGLBuffer, numComponents: 2, },
+   *       },
+   *     };
+   *
+   *  The properties of arrays can be JavaScript arrays in which case the number of components
+   *  will be guessed.
+   *
+   *     var arrays = {
+   *        position: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0],
+   *        texcoord: [0, 0, 0, 1, 1, 0, 1, 1],
+   *        normal:   [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
+   *        indices:  [0, 1, 2, 1, 2, 3],
+   *     };
+   *
+   *  They can also by TypedArrays
+   *
+   *     var arrays = {
+   *        position: new Float32Array([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]),
+   *        texcoord: new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]),
+   *        normal:   new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]),
+   *        indices:  new Uint16Array([0, 1, 2, 1, 2, 3]),
+   *     };
+   *
+   *  Or augmentedTypedArrays
+   *
+   *     var positions = createAugmentedTypedArray(3, 4);
+   *     var texcoords = createAugmentedTypedArray(2, 4);
+   *     var normals   = createAugmentedTypedArray(3, 4);
+   *     var indices   = createAugmentedTypedArray(3, 2, Uint16Array);
+   *
+   *     positions.push([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]);
+   *     texcoords.push([0, 0, 0, 1, 1, 0, 1, 1]);
+   *     normals.push([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
+   *     indices.push([0, 1, 2, 1, 2, 3]);
+   *
+   *     var arrays = {
+   *        position: positions,
+   *        texcoord: texcoords,
+   *        normal:   normals,
+   *        indices:  indices,
+   *     };
+   *
+   * For the last example it is equivalent to
+   *
+   *     var bufferInfo = {
+   *       attribs: {
+   *         a_position: { numComponents: 3, buffer: gl.createBuffer(), },
+   *         a_texcoods: { numComponents: 2, buffer: gl.createBuffer(), },
+   *         a_normals: { numComponents: 3, buffer: gl.createBuffer(), },
+   *       },
+   *       indices: gl.createBuffer(),
+   *       numElements: 6,
+   *     };
+   *
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_position.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.position, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_texcoord.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.texcoord, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_normal.buffer);
+   *     gl.bufferData(gl.ARRAY_BUFFER, arrays.normal, gl.STATIC_DRAW);
+   *     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.indices);
+   *     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, arrays.indices, gl.STATIC_DRAW);
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {Object.<string, array|object|typedarray>} arrays Your data
+   * @param {Object.<string, string>} [opt_mapping] an optional mapping of attribute to array name.
+   *    If not passed in it's assumed the array names will be mapped to an attibute
+   *    of the same name with "a_" prefixed to it. An other words.
+   *
+   *        var arrays = {
+   *           position: ...,
+   *           texcoord: ...,
+   *           normal:   ...,
+   *           indices:  ...,
+   *        };
+   *
+   *        bufferInfo = createBufferInfoFromArrays(gl, arrays);
+   *
+   *    Is the same as
+   *
+   *        var arrays = {
+   *           position: ...,
+   *           texcoord: ...,
+   *           normal:   ...,
+   *           indices:  ...,
+   *        };
+   *
+   *        var mapping = {
+   *          a_position: "position",
+   *          a_texcoord: "texcoord",
+   *          a_normal:   "normal",
+   *        };
+   *
+   *        bufferInfo = createBufferInfoFromArrays(gl, arrays, mapping);
+   *
+   * @return {module:webgl-utils.BufferInfo} A BufferInfo
+   * @memberOf module:webgl-utils
+   */
+  function createBufferInfoFromArrays(gl, arrays, opt_mapping) {
+    var bufferInfo = {
+      attribs: createAttribsFromArrays(gl, arrays, opt_mapping),
+    };
+    var indices = arrays.indices;
+    if (indices) {
+      indices = makeTypedArray(indices, 'indices');
+      bufferInfo.indices = createBufferFromTypedArray(
+        gl,
+        indices,
+        gl.ELEMENT_ARRAY_BUFFER
+      );
+      bufferInfo.numElements = indices.length;
+    } else {
+      bufferInfo.numElements = getNumElementsFromNonIndexedArrays(arrays);
+    }
+
+    return bufferInfo;
+  }
+
+  /**
+   * Creates buffers from typed arrays
+   *
+   * Given something like this
+   *
+   *     var arrays = {
+   *        positions: [1, 2, 3],
+   *        normals: [0, 0, 1],
+   *     }
+   *
+   * returns something like
+   *
+   *     buffers = {
+   *       positions: WebGLBuffer,
+   *       normals: WebGLBuffer,
+   *     }
+   *
+   * If the buffer is named 'indices' it will be made an ELEMENT_ARRAY_BUFFER.
+   *
+   * @param {WebGLRenderingContext) gl A WebGLRenderingContext.
+   * @param {Object<string, array|typedarray>} arrays
+   * @return {Object<string, WebGLBuffer>} returns an object with one WebGLBuffer per array
+   * @memberOf module:webgl-utils
+   */
+  function createBuffersFromArrays(gl, arrays) {
+    var buffers = {};
+    Object.keys(arrays).forEach(function (key) {
+      var type = key === 'indices' ? gl.ELEMENT_ARRAY_BUFFER : gl.ARRAY_BUFFER;
+      var array = makeTypedArray(arrays[key], name);
+      buffers[key] = createBufferFromTypedArray(gl, array, type);
+    });
+
+    // hrm
+    if (arrays.indices) {
+      buffers.numElements = arrays.indices.length;
+    } else if (arrays.position) {
+      buffers.numElements = arrays.position.length / 3;
+    }
+
+    return buffers;
+  }
+
+  /**
+   * Calls `gl.drawElements` or `gl.drawArrays`, whichever is appropriate
+   *
+   * normally you'd call `gl.drawElements` or `gl.drawArrays` yourself
+   * but calling this means if you switch from indexed data to non-indexed
+   * data you don't have to remember to update your draw call.
+   *
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {enum} type eg (gl.TRIANGLES, gl.LINES, gl.POINTS, gl.TRIANGLE_STRIP, ...)
+   * @param {module:webgl-utils.BufferInfo} bufferInfo as returned from createBufferInfoFromArrays
+   * @param {number} [count] An optional count. Defaults to bufferInfo.numElements
+   * @param {number} [offset] An optional offset. Defaults to 0.
+   * @memberOf module:webgl-utils
+   */
+  function drawBufferInfo(gl, type, bufferInfo, count, offset) {
+    var indices = bufferInfo.indices;
+    var numElements = count === undefined ? bufferInfo.numElements : count;
+    offset = offset === undefined ? offset : 0;
+    if (indices) {
+      gl.drawElements(type, numElements, gl.UNSIGNED_SHORT, offset);
+    } else {
+      gl.drawArrays(type, offset, numElements);
+    }
+  }
+
+  /**
+   * @typedef {Object} DrawObject
+   * @property {module:webgl-utils.ProgramInfo} programInfo A ProgramInfo as returned from createProgramInfo
+   * @property {module:webgl-utils.BufferInfo} bufferInfo A BufferInfo as returned from createBufferInfoFromArrays
+   * @property {Object<string, ?>} uniforms The values for the uniforms
+   * @memberOf module:webgl-utils
+   */
+
+  /**
+   * Draws a list of objects
+   * @param {WebGLRenderingContext} gl A WebGLRenderingContext
+   * @param {DrawObject[]} objectsToDraw an array of objects to draw.
+   * @memberOf module:webgl-utils
+   */
+  function drawObjectList(gl, objectsToDraw) {
+    var lastUsedProgramInfo = null;
+    var lastUsedBufferInfo = null;
+
+    objectsToDraw.forEach(function (object) {
+      var programInfo = object.programInfo;
+      var bufferInfo = object.bufferInfo;
+      var bindBuffers = false;
+
+      if (programInfo !== lastUsedProgramInfo) {
+        lastUsedProgramInfo = programInfo;
+        gl.useProgram(programInfo.program);
+        bindBuffers = true;
+      }
+
+      // Setup all the needed attributes.
+      if (bindBuffers || bufferInfo !== lastUsedBufferInfo) {
+        lastUsedBufferInfo = bufferInfo;
+        setBuffersAndAttributes(gl, programInfo.attribSetters, bufferInfo);
+      }
+
+      // Set the uniforms.
+      setUniforms(programInfo.uniformSetters, object.uniforms);
+
+      // Draw
+      drawBufferInfo(gl, gl.TRIANGLES, bufferInfo);
+    });
+  }
+
+  return {
+    createAugmentedTypedArray: createAugmentedTypedArray,
+    createAttribsFromArrays: createAttribsFromArrays,
+    createBuffersFromArrays: createBuffersFromArrays,
+    createBufferInfoFromArrays: createBufferInfoFromArrays,
+    createAttributeSetters: createAttributeSetters,
+    createProgram: createProgram,
+    createProgramFromScripts: createProgramFromScripts,
+    createProgramFromSources: createProgramFromSources,
+    createProgramInfo: createProgramInfo,
+    createUniformSetters: createUniformSetters,
+    drawBufferInfo: drawBufferInfo,
+    drawObjectList: drawObjectList,
+    getWebGLContext: getWebGLContext,
+    updateCSSIfInIFrame: updateCSSIfInIFrame,
+    getExtensionWithKnownPrefixes: getExtensionWithKnownPrefixes,
+    resizeCanvasToDisplaySize: resizeCanvasToDisplaySize,
+    setAttributes: setAttributes,
+    setBuffersAndAttributes: setBuffersAndAttributes,
+    setUniforms: setUniforms,
+    setupWebGL: setupWebGL,
+  };
+});