docs/module-twgl.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>twgl - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl.html">twgl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.addExtensionsToContext">addExtensionsToContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindTransformFeedbackInfo">bindTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedback">createTransformFeedback</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedbackInfo">createTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.getContext">getContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.glEnumToString">glEnumToString</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL1">isWebGL1</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL2">isWebGL2</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeCanvasToDisplaySize">resizeCanvasToDisplaySize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setDefaults">setDefaults</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#~createContext">createContext</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_attributes.html">twgl/attributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createAttribsFromArrays">createAttribsFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromArray">createBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromTypedArray">createBufferFromTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBuffersFromArrays">createBuffersFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttributePrefix">setAttributePrefix</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_draw.html">twgl/draw</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html">twgl/framebuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_m4.html">twgl/m4</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotate">axisRotate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotation">axisRotation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.create">create</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.frustum">frustum</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getAxis">getAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getTranslation">getTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.identity">identity</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.inverse">inverse</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.lookAt">lookAt</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.ortho">ortho</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.perspective">perspective</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateX">rotateX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateY">rotateY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateZ">rotateZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationX">rotationX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationY">rotationY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationZ">rotationZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scale">scale</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scaling">scaling</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setAxis">setAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setTranslation">setTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformDirection">transformDirection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformNormal">transformNormal</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformPoint">transformPoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translate">translate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translation">translation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transpose">transpose</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_primitives.html">twgl/primitives</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.concatVertices">concatVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBufferInfo">create3DFBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBuffers">create3DFBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFVertices">create3DFVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createAugmentedTypedArray">createAugmentedTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBufferInfo">createCrescentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBuffers">createCrescentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentVertices">createCrescentVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBufferInfo">createCresentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBufferInfo">createCubeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBuffers">createCubeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeVertices">createCubeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBufferInfo">createCylinderBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBuffers">createCylinderBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderVertices">createCylinderVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBufferInfo">createDiscBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBuffers">createDiscBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscVertices">createDiscVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBufferInfo">createPlaneBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBuffers">createPlaneBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneVertices">createPlaneVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBufferInfo">createSphereBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBuffers">createSphereBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereVertices">createSphereVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBufferInfo">createTorusBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBuffers">createTorusBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusVertices">createTorusVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBufferInfo">createTruncatedConeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBuffers">createTruncatedConeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeVertices">createTruncatedConeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBufferInfo">createXYQuadBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBuffers">createXYQuadBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadVertices">createXYQuadVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.deindexVertices">deindexVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.duplicateVertices">duplicateVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.flattenNormals">flattenNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.makeRandomVertexColors">makeRandomVertexColors</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientDirections">reorientDirections</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientNormals">reorientNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientPositions">reorientPositions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientVertices">reorientVertices</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_programs.html">twgl/programs</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createAttributeSetters">createAttributeSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgram">createProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramAsync">createProgramAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromScripts">createProgramFromScripts</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromSources">createProgramFromSources</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfoAsync">createProgramInfoAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfoFromProgram">createProgramInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfoFromProgram">createUniformBlockInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockSpecFromProgram">createUniformBlockSpecFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformSetters">createUniformSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformsAndBindTextures">setUniformsAndBindTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramInfos">createProgramInfos</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramInfosAsync">createProgramInfosAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createPrograms">createPrograms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramsAsync">createProgramsAsync</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_textures.html">twgl/textures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canFilter">canFilter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canGenerateMipmap">canGenerateMipmap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getBytesPerElementForInternalFormat">getBytesPerElementForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getFormatAndTypeForInternalFormat">getFormatAndTypeForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getNumComponentsForFormat">getNumComponentsForFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.loadTextureFromUrl">loadTextureFromUrl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setDefaultTextureColor">setDefaultTextureColor</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setEmptyTexture">setEmptyTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setSamplerParameters">setSamplerParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFilteringForSize">setTextureFilteringForSize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromElement">setTextureFromElement</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureParameters">setTextureParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~copyOptionsAndApplyPackState">copyOptionsAndApplyPackState</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~createTextureAsync">createTextureAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~createTexturesAsync">createTexturesAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~getPackStateOption">getPackStateOption</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_typedArray.html">twgl/typedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArray">getGLTypeForTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArrayType">getGLTypeForTypedArrayType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getTypedArrayTypeForGLType">getTypedArrayTypeForGLType</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_v3.html">twgl/v3</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.add">add</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.create">create</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.cross">cross</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distance">distance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distanceSq">distanceSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divide">divide</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divScalar">divScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.dot">dot</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.length">length</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lengthSq">lengthSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerp">lerp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerpV">lerpV</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.max">max</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.min">min</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.mulScalar">mulScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.normalize">normalize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.subtract">subtract</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html">twgl/vertexArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOAndSetAttributes">createVAOAndSetAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOFromBufferInfo">createVAOFromBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVertexArrayInfo">createVertexArrayInfo</a></span></li>
</nav>

<div id="main">
    
    <h1 class="page-title">twgl</h1>
    

<section>

<header>
    
        
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>The main TWGL module.</p>
<p>For most use cases you shouldn't need anything outside this module.<br>
Exceptions between the stuff added to twgl-full (v3, m4, primitives)</p></div>
        

<div class="section-method">


<dl class="details">

    
</dl>


</div>
        
    
    </div>

    
        <h3 class="subsection-title">Methods</h3>

        
<div class="section-method">

    
    <h4 class="name" id=".addExtensionsToContext"><span class="type-signature">(static) </span>addExtensionsToContext<span class="signature">(gl)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Attempts to enable all of the following extensions<br>
and add their functions and constants to the<br>
<code>WebGLRenderingContext</code> using their normal non-extension like names.</p>
<pre><code> ANGLE_instanced_arrays
 EXT_blend_minmax
 EXT_color_buffer_float
 EXT_color_buffer_half_float
 EXT_disjoint_timer_query
 EXT_disjoint_timer_query_webgl2
 EXT_frag_depth
 EXT_sRGB
 EXT_shader_texture_lod
 EXT_texture_filter_anisotropic
 OES_element_index_uint
 OES_standard_derivatives
 OES_texture_float
 OES_texture_float_linear
 OES_texture_half_float
 OES_texture_half_float_linear
 OES_vertex_array_object
 WEBGL_color_buffer_float
 WEBGL_compressed_texture_atc
 WEBGL_compressed_texture_etc1
 WEBGL_compressed_texture_pvrtc
 WEBGL_compressed_texture_s3tc
 WEBGL_compressed_texture_s3tc_srgb
 WEBGL_depth_texture
 WEBGL_draw_buffers
</code></pre>
<p>For example if <code>ANGLE_instanced_arrays</code> exists then the functions<br>
<code>drawArraysInstanced</code>, <code>drawElementsInstanced</code>, <code>vertexAttribDivisor</code><br>
and the constant <code>VERTEX_ATTRIB_ARRAY_DIVISOR</code> are added to the<br>
<code>WebGLRenderingContext</code>.</p>
<p>Note that if you want to know if the extension exists you should<br>
probably call <code>gl.getExtension</code> for each extension. Alternatively<br>
you can check for the existence of the functions or constants that<br>
are expected to be added. For example</p>
<p>if (gl.drawBuffers) {<br>
// Either WEBGL_draw_buffers was enabled OR you're running in WebGL2<br>
....</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".bindFramebufferInfo"><span class="type-signature">(static) </span>bindFramebufferInfo<span class="signature">(gl, framebufferInfo<span class="signature-attributes">opt</span>, target<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Binds a framebuffer</p>
<p>This function pretty much solely exists because I spent hours<br>
trying to figure out why something I wrote wasn't working only<br>
to realize I forget to set the viewport dimensions.<br>
My hope is this function will fix that.</p>
<p>It is effectively the same as</p>
<pre><code>gl.bindFramebuffer(gl.FRAMEBUFFER, someFramebufferInfo.framebuffer);
gl.viewport(0, 0, someFramebufferInfo.width, someFramebufferInfo.height);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>framebufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></code></span>
|

<span class="param-type"><code>null</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>a framebufferInfo as returned from <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a>.<br>
If falsy will bind the canvas.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>The target. If not passed <code>gl.FRAMEBUFFER</code> will be used.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".bindTransformFeedbackInfo"><span class="type-signature">(static) </span>bindTransformFeedbackInfo<span class="signature">(gl, transformFeedbackInfo, bufferInfo<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Binds buffers for transform feedback.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>transformFeedbackInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.TransformFeedbackInfo">module:twgl.TransformFeedbackInfo</a>></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A ProgramInfo or TransformFeedbackInfo.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>bufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A BufferInfo or set of AttribInfos.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".bindUniformBlock"><span class="type-signature">(static) </span>bindUniformBlock<span class="signature">(gl, programInfo, uniformBlockInfo)</span><span class="type-signature"> &rarr; {bool}</span></h4>

    
<div class="description">
    <p>Binds a uniform block to the matching uniform block point.<br>
Matches by blocks by name so blocks must have the same name not just the same<br>
structure.</p>
<p>If you have changed any values and you upload the values into the corresponding WebGLBuffer<br>
call <a href="module-twgl.html#.setUniformBlock"><code>module:twgl.setUniformBlock</code></a> instead.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGL 2 rendering context.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or or <code>UniformBlockSpec</code> as<br>
returned from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>UniformBlockInfo</code> as returned from<br>
<a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>bool</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>true if buffer was bound. If the programInfo has no block with the same block name<br>
no buffer is bound.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createBufferInfoFromArrays"><span class="type-signature">(static) </span>createBufferInfoFromArrays<span class="signature">(gl, arrays, srcBufferInfo<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a BufferInfo from an object of arrays.</p>
<p>This can be passed to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a> and to<br>
<code>module:twgl:drawBufferInfo</code>.</p>
<p>Given an object like</p>
<pre><code>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],                       },
};
</code></pre>
<p>Creates an BufferInfo like this</p>
<pre><code>bufferInfo = {
  numElements: 4,        // or whatever the number of elements is
  indices: WebGLBuffer,  // this property will not exist if there are no indices
  attribs: {
    position: { buffer: WebGLBuffer, numComponents: 3, },
    normal:   { buffer: WebGLBuffer, numComponents: 3, },
    texcoord: { buffer: WebGLBuffer, numComponents: 2, },
  },
};
</code></pre>
<p>The properties of arrays can be JavaScript arrays in which case the number of components<br>
will be guessed.</p>
<pre><code>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],
};
</code></pre>
<p>They can also be TypedArrays</p>
<pre><code>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]),
};
</code></pre>
<p>Or AugmentedTypedArrays</p>
<pre><code>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,
};
</code></pre>
<p>For the last example it is equivalent to</p>
<pre><code>var bufferInfo = {
  attribs: {
    position: { numComponents: 3, buffer: gl.createBuffer(), },
    texcoord: { numComponents: 2, buffer: gl.createBuffer(), },
    normal: { numComponents: 3, buffer: gl.createBuffer(), },
  },
  indices: gl.createBuffer(),
  numElements: 6,
};

gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.position.buffer);
gl.bufferData(gl.ARRAY_BUFFER, arrays.position, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.texcoord.buffer);
gl.bufferData(gl.ARRAY_BUFFER, arrays.texcoord, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.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);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>arrays</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.Arrays">module:twgl.Arrays</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Your data</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>srcBufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>An existing<br>
buffer info to start from. WebGLBuffers etc specified<br>
in the srcBufferInfo will be used in a new BufferInfo<br>
with any arrays specified overriding the ones in<br>
srcBufferInfo.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>A BufferInfo</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createFramebufferInfo"><span class="type-signature">(static) </span>createFramebufferInfo<span class="signature">(gl, attachments<span class="signature-attributes">opt</span>, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a framebuffer and attachments.</p>
<p>This returns a <a href="module-twgl.html#.FramebufferInfo"><code>module:twgl.FramebufferInfo</code></a> because it needs to return the attachments as well as the framebuffer.<br>
It also leaves the framebuffer it just created as the currently bound <code>FRAMEBUFFER</code>.<br>
Note: If this is WebGL2 or if you called <a href="module-twgl.html#.addExtensionsToContext"><code>module:twgl.addExtensionsToContext</code></a> then it will set the drawBuffers<br>
to <code>[COLOR_ATTACHMENT0, COLOR_ATTACHMENT1, ...]</code> for how ever many color attachments were created.</p>
<p>The simplest usage</p>
<pre><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
const fbi = twgl.createFramebufferInfo(gl);
</code></pre>
<p>More complex usage</p>
<pre><code>// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
const attachments = [
  { format: RGB565, mag: NEAREST },
  { format: STENCIL_INDEX8 },
]
const fbi = twgl.createFramebufferInfo(gl, attachments);
</code></pre>
<p>Passing in a specific size</p>
<pre><code>const width = 256;
const height = 256;
const fbi = twgl.createFramebufferInfo(gl, attachments, width, height);
</code></pre>
<p><strong>Note!!</strong> It is up to you to check if the framebuffer is renderable by calling <code>gl.checkFramebufferStatus</code>.<br>
<a href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.6">WebGL1 only guarantees 3 combinations of attachments work</a>.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>attachments</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;<a href="module-twgl.html#.AttachmentOptions">module:twgl.AttachmentOptions</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>which attachments to create. If not provided the default is a framebuffer with an<br>
<code>RGBA</code>, <code>UNSIGNED_BYTE</code> texture <code>COLOR_ATTACHMENT0</code> and a <code>DEPTH_STENCIL</code> renderbuffer <code>DEPTH_STENCIL_ATTACHMENT</code>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the width for the attachments. Default = size of drawingBuffer</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the height for the attachments. Default = size of drawingBuffer</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the framebuffer and attachments.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createProgramInfo"><span class="type-signature">(static) </span>createProgramInfo<span class="signature">(gl, shaderSources, opt_attribs<span class="signature-attributes">opt</span>, opt_locations<span class="signature-attributes">opt</span>, opt_errorCallback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a ProgramInfo from 2 sources.</p>
<p>A ProgramInfo contains</p>
<pre><code>programInfo = {
   program: WebGLProgram,
   uniformSetters: object of setters as returned from createUniformSetters,
   attribSetters: object of setters as returned from createAttribSetters,
}
</code></pre>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramInfo(gl, [vs, fs], options);
twgl.createProgramInfo(gl, [vs, fs], opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramInfo(gl, [vs, fs], opt_attribs, opt_locations, opt_errFunc);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The WebGLRenderingContext<br>
to use.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>shaderSources</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Array of sources for the<br>
shaders or ids. The first is assumed to be the vertex shader,<br>
the second the fragment shader.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramOptions">module:twgl.ProgramOptions</a></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>Options for the program or an array of attribs names or an error callback. Locations will be assigned by index if not passed in</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opt_locations</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>The locations for the. A parallel array to opt_attribs letting you assign locations or an error callback.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opt_errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>callback for errors. By default it just prints an error to the console<br>
on error. If you want something else pass an callback. It's passed an error message.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created ProgramInfo or null if it failed to link or compile</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createTexture"><span class="type-signature">(static) </span>createTexture<span class="signature">(gl, options<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {WebGLTexture}</span></h4>

    
<div class="description">
    <p>Creates a texture based on the options passed in.</p>
<p>Note: may reset UNPACK_ALIGNMENT, UNPACK_ROW_LENGTH, UNPACK_IMAGE_HEIGHT, UNPACK_SKIP_IMAGES<br>
UNPACK_SKIP_PIXELS, and UNPACK_SKIP_ROWS</p>
<p>UNPACK_FLIP_Y_WEBGL, UNPACK_PREMULTIPLY_ALPHA_WEBGL, UNPACK_COLORSPACE_CONVERSION_WEBGL<br>
are left as is though you can pass in options for flipY, premultiplyAlpha, and colorspaceConversion<br>
to override them.</p>
<p>As for the behavior of these settings</p>
<pre class="prettyprint source lang-js"><code>gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
t1 = twgl.createTexture({src: someImage }); // flipped
t2 = twgl.createTexture({src: someImage, flipY: true }); // flipped
t3 = twgl.createTexture({src: someImage, flipY: false }); // not flipped
t4 = twgl.createTexture({src: someImage }); // flipped
</code></pre>
<ul>
<li>t1 is flipped because UNPACK_FLIP_Y_WEBGL is true</li>
<li>t2 is flipped because it was requested</li>
<li>t3 is not flipped because it was requested</li>
<li>t4 is flipped because UNPACK_FLIP_Y_WEBGL has been restored to true</li>
</ul>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A TextureOptions object with whatever parameters you want set.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureReadyCallback">module:twgl.TextureReadyCallback</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A callback called when an image has been downloaded and uploaded to the texture.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLTexture</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created texture.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createTextures"><span class="type-signature">(static) </span>createTextures<span class="signature">(gl, options, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLTexture>}</span></h4>

    
<div class="description">
    <p>Creates a bunch of textures based on the passed in options.</p>
<p>Example:</p>
<pre><code>const textures = twgl.createTextures(gl, {
  // a power of 2 image
  hftIcon: { src: &quot;images/hft-icon-16.png&quot;, mag: gl.NEAREST },
  // a non-power of 2 image
  clover: { src: &quot;images/clover.jpg&quot; },
  // From a canvas
  fromCanvas: { src: ctx.canvas },
  // A cubemap from 6 images
  yokohama: {
    target: gl.TEXTURE_CUBE_MAP,
    src: [
      'images/yokohama/posx.jpg',
      'images/yokohama/negx.jpg',
      'images/yokohama/posy.jpg',
      'images/yokohama/negy.jpg',
      'images/yokohama/posz.jpg',
      'images/yokohama/negz.jpg',
    ],
  },
  // A cubemap from 1 image (can be 1x6, 2x3, 3x2, 6x1)
  goldengate: {
    target: gl.TEXTURE_CUBE_MAP,
    src: 'images/goldengate.jpg',
  },
  // A 2x2 pixel texture from a JavaScript array
  checker: {
    mag: gl.NEAREST,
    min: gl.LINEAR,
    src: [
      255,255,255,255,
      192,192,192,255,
      192,192,192,255,
      255,255,255,255,
    ],
  },
  // a 1x2 pixel texture from a typed array.
  stripe: {
    mag: gl.NEAREST,
    min: gl.LINEAR,
    format: gl.LUMINANCE,
    src: new Uint8Array([
      255,
      128,
      255,
      128,
      255,
      128,
      255,
      128,
    ]),
    width: 1,
  },
});
</code></pre>
<p>Now</p>
<ul>
<li><code>textures.hftIcon</code> will be a 2d texture</li>
<li><code>textures.clover</code> will be a 2d texture</li>
<li><code>textures.fromCanvas</code> will be a 2d texture</li>
<li><code>textures.yohohama</code> will be a cubemap texture</li>
<li><code>textures.goldengate</code> will be a cubemap texture</li>
<li><code>textures.checker</code> will be a 2d texture</li>
<li><code>textures.stripe</code> will be a 2d texture</li>
</ul>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a>></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A object of TextureOptions one per texture.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TexturesReadyCallback">module:twgl.TexturesReadyCallback</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A callback called when all textures have been downloaded.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLTexture></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created textures by name</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createTransformFeedback"><span class="type-signature">(static) </span>createTransformFeedback<span class="signature">(gl, programInfo, bufferInfo<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {WebGLTransformFeedback}</span></h4>

    
<div class="description">
    <p>Creates a transform feedback and sets the buffers</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A ProgramInfo as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>bufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A BufferInfo or set of AttribInfos.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLTransformFeedback</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created transform feedback</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createTransformFeedbackInfo"><span class="type-signature">(static) </span>createTransformFeedbackInfo<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {Object.&lt;string, <a href="module-twgl.html#.TransformFeedbackInfo">module:twgl.TransformFeedbackInfo</a>>}</span></h4>

    
<div class="description">
    <p>Create TransformFeedbackInfo for passing to bindTransformFeedbackInfo.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>The WebGLRenderingContext to use.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            </td>

            
            <td class="description last">
                <p>an existing WebGLProgram.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.TransformFeedbackInfo">module:twgl.TransformFeedbackInfo</a>></code></span>


    </dd>
</dl>


</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".createUniformBlockInfo"><span class="type-signature">(static) </span>createUniformBlockInfo<span class="signature">(gl, programInfo, blockName, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a <code>UniformBlockInfo</code> for the specified block</p>
<p>Note: <strong>If the blockName matches no existing blocks a warning is printed to the console and a dummy<br>
<code>UniformBlockInfo</code> is returned</strong>. This is because when debugging GLSL<br>
it is common to comment out large portions of a shader or for example set<br>
the final output to a constant. When that happens blocks get optimized out.<br>
If this function did not create dummy blocks your code would crash when debugging.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A WebGL2RenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>blockName</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The name of the block.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>module:twgl.UniformBlockInfoOptions</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>Optional options for using existing an existing buffer and arrayBuffer</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created UniformBlockInfo</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".drawBufferInfo"><span class="type-signature">(static) </span>drawBufferInfo<span class="signature">(gl, bufferInfo, type<span class="signature-attributes">opt</span>, count<span class="signature-attributes">opt</span>, offset<span class="signature-attributes">opt</span>, instanceCount<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Calls <code>gl.drawElements</code> or <code>gl.drawArrays</code>, whichever is appropriate</p>
<p>normally you'd call <code>gl.drawElements</code> or <code>gl.drawArrays</code> yourself<br>
but calling this means if you switch from indexed data to non-indexed<br>
data you don't have to remember to update your draw call.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>bufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A BufferInfo as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a> or<br>
a VertexArrayInfo as returned from <code>module:twgl.createVertexArrayInfo</code></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>eg (gl.TRIANGLES, gl.LINES, gl.POINTS, gl.TRIANGLE_STRIP, ...). Defaults to <code>gl.TRIANGLES</code></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>count</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>An optional count. Defaults to bufferInfo.numElements</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>An optional offset. Defaults to 0.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>instanceCount</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>An optional instanceCount. if set then <code>drawArraysInstanced</code> or <code>drawElementsInstanced</code> will be called</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".drawObjectList"><span class="type-signature">(static) </span>drawObjectList<span class="signature">(gl, objectsToDraw)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Draws a list of objects</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>objectsToDraw</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;DrawObject></code></span>


            </td>

            
            <td class="description last">
                <p>an array of objects to draw.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".getContext"><span class="type-signature">(static) </span>getContext<span class="signature">(canvas, opt_attribs<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {WebGLRenderingContext}</span></h4>

    
<div class="description">
    <p>Gets a WebGL context.  Will create a WebGL2 context if possible.</p>
<p>You can check if it's WebGL2 with</p>
<p>function isWebGL2(gl) {<br>
return gl.getParameter(gl.VERSION).indexOf(&quot;WebGL 2.0 &quot;) == 0;<br>
}</p>
<p>Note: For a WebGL1 context will attempt to enable Vertex Array Objects<br>
and add WebGL2 entry points. (unless you first set defaults with<br>
<code>twgl.setDefaults({enableVertexArrayObjects: false})</code>;</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>HTMLCanvasElement</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>a canvas element.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>opt_attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLContextAttributes</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>optional webgl context creation attributes</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLRenderingContext</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created context.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".glEnumToString"><span class="type-signature">(static) </span>glEnumToString<span class="signature">(gl, value)</span><span class="type-signature"> &rarr; {string}</span></h4>

    
<div class="description">
    <p>Gets a string for WebGL enum</p>
<p>Note: Several enums are the same. Without more<br>
context (which function) it's impossible to always<br>
give the correct enum. As it is, for matching values<br>
it gives all enums. Checking the WebGL2RenderingContext<br>
that means</p>
<pre><code> 0     = ZERO | POINT | NONE | NO_ERROR
 1     = ONE | LINES | SYNC_FLUSH_COMMANDS_BIT
 32777 = BLEND_EQUATION_RGB | BLEND_EQUATION_RGB
 36662 = COPY_READ_BUFFER | COPY_READ_BUFFER_BINDING
 36663 = COPY_WRITE_BUFFER | COPY_WRITE_BUFFER_BINDING
 36006 = FRAMEBUFFER_BINDING | DRAW_FRAMEBUFFER_BINDING
</code></pre>
<p>It's also not useful for bits really unless you pass in individual bits.<br>
In other words</p>
<pre><code>const bits = gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT;
twgl.glEnumToString(gl, bits);  // not going to work
</code></pre>
<p>Note that some enums only exist on extensions. If you<br>
want them to show up you need to pass the extension at least<br>
once. For example</p>
<pre><code>const ext = gl.getExtension('WEBGL_compressed_texture_s3tc');
if (ext) {
   twgl.glEnumToString(ext, 0);  // just prime the function

   ..later..

   const internalFormat = ext.COMPRESSED_RGB_S3TC_DXT1_EXT;
   console.log(twgl.glEnumToString(gl, internalFormat));
</code></pre>
<p>Notice I didn't have to pass the extension the second time. This means<br>
you can have place that generically gets an enum for texture formats for example.<br>
and as long as you primed the function with the extensions</p>
<p>If you're using <code>twgl.addExtensionsToContext</code> to enable your extensions<br>
then twgl will automatically get the extension's enums.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext or any extension object</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last">
                <p>the value of the enum you want to look up.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>string</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>enum string or hex value</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".isWebGL1"><span class="type-signature">(static) </span>isWebGL1<span class="signature">(gl)</span><span class="type-signature"> &rarr; {bool}</span></h4>

    
<div class="description">
    <p>Check if context is WebGL 1.0</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>bool</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>true if it's WebGL 1.0</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".isWebGL2"><span class="type-signature">(static) </span>isWebGL2<span class="signature">(gl)</span><span class="type-signature"> &rarr; {bool}</span></h4>

    
<div class="description">
    <p>Check if context is WebGL 2.0</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>bool</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>true if it's WebGL 2.0</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".resizeCanvasToDisplaySize"><span class="type-signature">(static) </span>resizeCanvasToDisplaySize<span class="signature">(canvas, multiplier<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>

    
<div class="description">
    <p>Resize a canvas to match the size it's displayed.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>HTMLCanvasElement</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The canvas to resize.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>multiplier</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>So you can pass in <code>window.devicePixelRatio</code> or other scale value if you want to.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>boolean</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>true if the canvas was resized.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".resizeFramebufferInfo"><span class="type-signature">(static) </span>resizeFramebufferInfo<span class="signature">(gl, framebufferInfo, attachments<span class="signature-attributes">opt</span>, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Resizes the attachments of a framebuffer.</p>
<p>You need to pass in the same <code>attachments</code> as you passed in <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a><br>
because TWGL has no idea the format/type of each attachment.</p>
<p>The simplest usage</p>
<pre><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
const fbi = twgl.createFramebufferInfo(gl);

...

function render() {
  if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
    // resize the attachments
    twgl.resizeFramebufferInfo(gl, fbi);
  }
</code></pre>
<p>More complex usage</p>
<pre><code>// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
const attachments = [
  { format: RGB565, mag: NEAREST },
  { format: STENCIL_INDEX8 },
]
const fbi = twgl.createFramebufferInfo(gl, attachments);

...

function render() {
  if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
    // resize the attachments to match
    twgl.resizeFramebufferInfo(gl, fbi, attachments);
  }</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>framebufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>a framebufferInfo as returned from <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>attachments</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;<a href="module-twgl.html#.AttachmentOptions">module:twgl.AttachmentOptions</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the same attachments options as passed to <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the width for the attachments. Default = size of drawingBuffer</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the height for the attachments. Default = size of drawingBuffer</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".resizeTexture"><span class="type-signature">(static) </span>resizeTexture<span class="signature">(gl, tex, options, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>, depth<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Resizes a texture based on the options passed in.</p>
<p>Note: This is not a generic resize anything function.<br>
It's mostly used by <a href="module-twgl.html#.resizeFramebufferInfo"><code>module:twgl.resizeFramebufferInfo</code></a><br>
It will use <code>options.src</code> if it exists to try to determine a <code>type</code><br>
otherwise it will assume <code>gl.UNSIGNED_BYTE</code>. No data is provided<br>
for the texture. Texture parameters will be set accordingly</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>tex</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the texture to resize</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A TextureOptions object with whatever parameters you want set.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the new width. If not passed in will use <code>options.width</code></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the new height. If not passed in will use <code>options.height</code></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>depth</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>the new depth. If not passed in will use <code>options.depth</code></p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setAttribInfoBufferFromArray"><span class="type-signature">(static) </span>setAttribInfoBufferFromArray<span class="signature">(gl, attribInfo, array, offset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Sets the contents of a buffer attached to an attribInfo</p>
<p>This is helper function to dynamically update a buffer.</p>
<p>Let's say you make a bufferInfo</p>
<pre><code>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]),
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);
</code></pre>
<p>And you want to dynamically update the positions. You could do this</p>
<pre><code>// assuming arrays.position has already been updated with new data.
twgl.setAttribInfoBufferFromArray(gl, bufferInfo.attribs.position, arrays.position);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>attribInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>AttribInfo</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The attribInfo who's buffer contents to set. NOTE: If you have an attribute prefix<br>
the name of the attribute will include the prefix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>array</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>ArraySpec</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Note: it is arguably inefficient to pass in anything but a typed array because anything<br>
else will have to be converted to a typed array before it can be used by WebGL. During init time that<br>
inefficiency is usually not important but if you're updating data dynamically best to be efficient.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>an optional offset into the buffer. This is only an offset into the WebGL buffer<br>
not the array. To pass in an offset into the array itself use a typed array and create an <code>ArrayBufferView</code><br>
for the portion of the array you want to use.</p>
<pre><code>   var someArray = new Float32Array(1000); // an array with 1000 floats
   var someSubArray = new Float32Array(someArray.buffer, offsetInBytes, sizeInUnits); // a view into someArray
</code></pre>
<p>Now you can pass <code>someSubArray</code> into setAttribInfoBufferFromArray`</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setBlockUniforms"><span class="type-signature">(static) </span>setBlockUniforms<span class="signature">(uniformBlockInfo, values)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Sets values of a uniform block object</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            </td>

            
            <td class="description last">
                <p>A UniformBlockInfo as returned by <a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>values</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            </td>

            
            <td class="description last">
                <p>A uniform name to value map where the value is correct for the given<br>
type of uniform. So for example given a block like</p>
<pre><code>  uniform SomeBlock {
    float someFloat;
    vec2 someVec2;
    vec3 someVec3Array[2];
    int someInt;
  }
</code></pre>
<p>You can set the values of the uniform block with</p>
<pre><code>  twgl.setBlockUniforms(someBlockInfo, {
     someFloat: 12.3,
     someVec2: [1, 2],
     someVec3Array: [1, 2, 3, 4, 5, 6],
     someInt: 5,
  }
</code></pre>
<p>Arrays can be JavaScript arrays or typed arrays</p>
<p>You can also fill out structure and array values either via<br>
shortcut. Example</p>
<pre><code>// -- in shader --
struct Light {
  float intensity;
  vec4 color;
  float nearFar[2];
};
uniform Lights {
  Light lights[2];
};

// in JavaScript

twgl.setBlockUniforms(someBlockInfo, {
  lights: [
    { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.1, 10] },
    { intensity: 2.0, color: [0, 0, 1, 1], nearFar[0.2, 15] },
  ],
});
</code></pre>
<p>or the more traditional way</p>
<pre><code>twgl.setBlockUniforms(someBlockInfo, {
  &quot;lights[0].intensity&quot;: 5.0,
  &quot;lights[0].color&quot;: [1, 0, 0, 1],
  &quot;lights[0].nearFar&quot;: [0.1, 10],
  &quot;lights[1].intensity&quot;: 2.0,
  &quot;lights[1].color&quot;: [0, 0, 1, 1],
  &quot;lights[1].nearFar&quot;: [0.2, 15],
});
</code></pre>
<p>You can also specify partial paths</p>
<pre><code>twgl.setBlockUniforms(someBlockInfo, {
  'lights[1]': { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.2, 15] },
});
</code></pre>
<p>But you can not specify leaf array indices.</p>
<pre><code>twgl.setBlockUniforms(someBlockInfo, {
  'lights[1].nearFar[1]': 15,     // BAD! nearFar is a leaf
  'lights[1].nearFar': [0.2, 15], // GOOD
});
</code></pre>
<p><strong>IMPORTANT!</strong>, packing in a UniformBlock is unintuitive.<br>
For example the actual layout of <code>someVec3Array</code> above in memory<br>
is <code>1, 2, 3, unused, 4, 5, 6, unused</code>. twgl takes in 6 values<br>
as shown about and copies them, skipping the padding. This might<br>
be confusing if you're already familiar with Uniform blocks.</p>
<p>If you want to deal with the padding yourself you can access the array<br>
buffer views directly. eg:</p>
<pre><code> someBlockInfo.someVec3Array.set([1, 2, 3, 0, 4, 5, 6, 0]);
</code></pre>
<p>Any name that doesn't match will be ignored</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setBuffersAndAttributes"><span class="type-signature">(static) </span>setBuffersAndAttributes<span class="signature">(gl, setters, buffers)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Sets attributes and buffers including the <code>ELEMENT_ARRAY_BUFFER</code> if appropriate</p>
<p>Example:</p>
<pre><code>const programInfo = createProgramInfo(
    gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);

const 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],                 },
};

const bufferInfo = createBufferInfoFromArrays(gl, arrays);

gl.useProgram(programInfo.program);
</code></pre>
<p>This will automatically bind the buffers AND set the<br>
attributes.</p>
<pre><code>setBuffersAndAttributes(gl, programInfo, bufferInfo);
</code></pre>
<p>For the example above it is equivalent to</p>
<pre><code>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);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, function()></code></span>


            </td>

            
            <td class="description last">
                <p>A <code>ProgramInfo</code> as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or Attribute setters as returned from <code>module:twgl.createAttributeSetters</code></p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>buffers</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>BufferInfo</code> as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a>.<br>
or a <code>VertexArrayInfo</code> as returned from <code>module:twgl.createVertexArrayInfo</code></p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setDefaults"><span class="type-signature">(static) </span>setDefaults<span class="signature">(newDefaults)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Sets various defaults for twgl.</p>
<p>In the interest of terseness which is kind of the point<br>
of twgl I've integrated a few of the older functions here</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>newDefaults</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.Defaults">module:twgl.Defaults</a></code></span>


            </td>

            
            <td class="description last">
                <p>The default settings.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setTextureFromArray"><span class="type-signature">(static) </span>setTextureFromArray<span class="signature">(gl, tex, src, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Sets a texture from an array or typed array. If the width or height is not provided will attempt to<br>
guess the size. See <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>tex</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the WebGLTexture to set parameters for</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>src</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>An array or typed arry with texture data.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>A TextureOptions object with whatever parameters you want set.<br>
This is often the same options you passed in when you created the texture.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setUniformBlock"><span class="type-signature">(static) </span>setUniformBlock<span class="signature">(gl, programInfo, uniformBlockInfo)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Uploads the current uniform values to the corresponding WebGLBuffer<br>
and binds that buffer to the program's corresponding bind point for the uniform block object.</p>
<p>If you haven't changed any values and you only need to bind the uniform block object<br>
call <a href="module-twgl.html#.bindUniformBlock"><code>module:twgl.bindUniformBlock</code></a> instead.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGL2RenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGL 2 rendering context.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>ProgramInfo</code><br>
as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a> or or <code>UniformBlockSpec</code> as<br>
returned from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>uniformBlockInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>UniformBlockInfo</code> as returned from<br>
<a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setUniforms"><span class="type-signature">(static) </span>setUniforms<span class="signature">(setters, values)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Set uniforms and binds related textures.</p>
<p>example:</p>
<pre><code>const programInfo = createProgramInfo(
    gl, [&quot;some-vs&quot;, &quot;some-fs&quot;]);

const tex1 = gl.createTexture();
const tex2 = gl.createTexture();

... assume we setup the textures with data ...

const 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(programInfo.program);
</code></pre>
<p>This will automatically bind the textures AND set the<br>
uniforms.</p>
<pre><code>twgl.setUniforms(programInfo, uniforms);
</code></pre>
<p>For the example above it is equivalent to</p>
<pre><code>let 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,
  ]);
</code></pre>
<p>Note it is perfectly reasonable to call <code>setUniforms</code> multiple times. For example</p>
<pre><code>const uniforms = {
  u_someSampler: tex1,
  u_someOtherSampler: tex2,
};

const 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,
  ],
};

twgl.setUniforms(programInfo, uniforms);
twgl.setUniforms(programInfo, moreUniforms);
</code></pre>
<p>You can also add WebGLSamplers to uniform samplers as in</p>
<pre><code>const uniforms = {
  u_someSampler: {
    texture: someWebGLTexture,
    sampler: someWebGLSampler,
  },
};
</code></pre>
<p>In which case both the sampler and texture will be bound to the<br>
same unit.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, function()></code></span>


            </td>

            
            <td class="description last">
                <p>a <code>ProgramInfo</code> as returned from <code>createProgramInfo</code> or the setters returned from<br>
<code>createUniformSetters</code>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>values</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            </td>

            
            <td class="description last">
                <p>an object with values for the<br>
uniforms.<br>
You can pass multiple objects by putting them in an array or by calling with more arguments.For example</p>
<pre><code>const sharedUniforms = {
  u_fogNear: 10,
  u_projection: ...
  ...
};

const localUniforms = {
  u_world: ...
  u_diffuseColor: ...
};

twgl.setUniforms(programInfo, sharedUniforms, localUniforms);

// is the same as

twgl.setUniforms(programInfo, [sharedUniforms, localUniforms]);

// is the same as

twgl.setUniforms(programInfo, sharedUniforms);
twgl.setUniforms(programInfo, localUniforms};
</code></pre>
<p>You can also fill out structure and array values either via<br>
shortcut. Example</p>
<pre><code>// -- in shader --
struct Light {
  float intensity;
  vec4 color;
  float nearFar[2];
};
uniform Light lights[2];

// in JavaScript

twgl.setUniforms(programInfo, {
  lights: [
    { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.1, 10] },
    { intensity: 2.0, color: [0, 0, 1, 1], nearFar[0.2, 15] },
  ],
});
</code></pre>
<p>or the more traditional way</p>
<pre><code>twgl.setUniforms(programInfo, {
  &quot;lights[0].intensity&quot;: 5.0,
  &quot;lights[0].color&quot;: [1, 0, 0, 1],
  &quot;lights[0].nearFar&quot;: [0.1, 10],
  &quot;lights[1].intensity&quot;: 2.0,
  &quot;lights[1].color&quot;: [0, 0, 1, 1],
  &quot;lights[1].nearFar&quot;: [0.2, 15],
});
</code></pre>
<p>You can also specify partial paths</p>
<pre><code>twgl.setUniforms(programInfo, {
  'lights[1]': { intensity: 5.0, color: [1, 0, 0, 1], nearFar[0.2, 15] },
});
</code></pre>
<p>But you can not specify leaf array indices</p>
<pre><code>twgl.setUniforms(programInfo, {
  'lights[1].nearFar[1]': 15,     // BAD! nearFar is a leaf
  'lights[1].nearFar': [0.2, 15], // GOOD
});</code></pre>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id="~createContext"><span class="type-signature">(inner) </span>createContext<span class="signature">(canvas)</span><span class="type-signature"> &rarr; {WebGLRenderingContext}</span></h4>

    
<div class="description">
    <p>Creates a webgl context.</p>
<p>Will return a WebGL2 context if possible.</p>
<p>You can check if it's WebGL2 with</p>
<pre><code>twgl.isWebGL2(gl);</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>canvas</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>HTMLCanvasElement</code></span>


            </td>

            
            <td class="description last">
                <p>The canvas tag to get<br>
context from. If one is not passed in one will be<br>
created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>WebGLRenderingContext</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created context.</p>
</div>

    
</div>


</div>
        
    
        <h3 class="subsection-title">Type Definitions</h3>

        
<div class="section-members">
<h4 class="name" id=".Arrays">Arrays</h4>


<div class="description">
    <p>This is a JavaScript object of arrays by name. The names should match your shader's attributes. If your<br>
attributes have a common prefix you can specify it by calling <code>module:twgl.setAttributePrefix</code>.</p>
<pre><code>Bare JavaScript Arrays

    var arrays = {
       position: [-1, 1, 0],
       normal: [0, 1, 0],
       ...
    }

Bare TypedArrays

    var arrays = {
       position: new Float32Array([-1, 1, 0]),
       color: new Uint8Array([255, 128, 64, 255]),
       ...
    }
</code></pre>
<ul>
<li>
<p>Will guess at <code>numComponents</code> if not specified based on name.</p>
<p>If <code>coord</code> is in the name assumes <code>numComponents = 2</code></p>
<p>If <code>color</code> is in the name assumes <code>numComponents = 4</code></p>
<p>otherwise assumes <code>numComponents = 3</code></p>
</li>
</ul>
<p>Objects with various fields. See <a href="module-twgl.html#.FullArraySpec"><code>module:twgl.FullArraySpec</code></a>.</p>
<pre><code>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],                       },
};</code></pre>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.ArraySpec">module:twgl.ArraySpec</a>></code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".ArraySpec">ArraySpec</h4>


<div class="description">
    <p>An individual array in <a href="module-twgl.html#.Arrays"><code>module:twgl.Arrays</code></a></p>
<p>When passed to <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a> if an ArraySpec is <code>number[]</code> or <code>ArrayBufferView</code><br>
the types will be guessed based on the name. <code>indices</code> will be <code>Uint16Array</code>, everything else will<br>
be <code>Float32Array</code>. If an ArraySpec is a number it's the number of floats for an empty (zeroed) buffer.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>number</code></span>
|

<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.FullArraySpec">module:twgl.FullArraySpec</a></code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".AttachmentOptions">AttachmentOptions</h4>


<div class="description">
    <p>The options for a framebuffer attachment.</p>
<p>Note: For a <code>format</code> that is a texture include all the texture<br>
options from <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a> for example<br>
<code>min</code>, <code>mag</code>, <code>clamp</code>, etc... Note that unlike <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a><br>
<code>auto</code> defaults to <code>false</code> for attachment textures but <code>min</code> and <code>mag</code> default<br>
to <code>gl.LINEAR</code> and <code>wrap</code> defaults to <code>CLAMP_TO_EDGE</code></p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>attachmentPoint</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The attachment point. Defaults<br>
to <code>gl.COLOR_ATTACHMENT0 + ndx</code> unless type is a depth or stencil type<br>
then it's gl.DEPTH_ATTACHMENT or <code>gl.DEPTH_STENCIL_ATTACHMENT</code> depending<br>
on the format or attachment type.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>format</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The format. If one of <code>gl.RGBA4</code>,<br>
<code>gl.RGB565</code>, <code>gl.RGB5_A1</code>, <code>gl.DEPTH_COMPONENT16</code>,<br>
<code>gl.STENCIL_INDEX8</code> or <code>gl.DEPTH_STENCIL</code> then will create a<br>
renderbuffer. Otherwise will create a texture. Default = <code>gl.RGBA</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The type. Used for texture. Default = <code>gl.UNSIGNED_BYTE</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The texture target for <code>gl.framebufferTexture2D</code>.<br>
Defaults to <code>gl.TEXTURE_2D</code>. Set to appropriate face for cube maps.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>samples</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The number of samples. Default = 1</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>level</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>level for <code>gl.framebufferTexture2D</code>. Defaults to 0.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>layer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>layer for <code>gl.framebufferTextureLayer</code>. Defaults to undefined.<br>
If set then <code>gl.framebufferTextureLayer</code> is called, if not then <code>gl.framebufferTexture2D</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attachment</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderbuffer</code></span>
|

<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>An existing renderbuffer or texture.<br>
If provided will attach this Object. This allows you to share<br>
attachments across framebuffers.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
        <dt class="mixes">Mixes In:</dt>

        <dd class="mixes"><ul>
        
            <li><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></li>
        
        </ul></dd>
    

</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".AttribInfo">AttribInfo</h4>


<div class="description">
    <p>The info for an attribute. This is effectively just the arguments to <code>gl.vertexAttribPointer</code> plus the WebGLBuffer<br>
for the attribute.</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a constant value for the attribute. Note: if this is set the attribute will be<br>
disabled and set to this constant value and all other values will be ignored.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>numComponents</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the number of components for this attribute.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>synonym for <code>numComponents</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the type of the attribute (eg. <code>gl.FLOAT</code>, <code>gl.UNSIGNED_BYTE</code>, etc...) Default = <code>gl.FLOAT</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>normalize</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>boolean</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>whether or not to normalize the data. Default = false</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>offset into buffer in bytes. Default = 0</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>stride</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the stride in bytes per element. Default = 0</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>divisor</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the divisor in instances. Default = 0.<br>
Requires WebGL2 or the ANGLE_instanced_arrays extension.<br>
and, if you're using WebGL1 you must have called <a href="module-twgl.html#.addExtensionsToContext"><code>module:twgl.addExtensionsToContext</code></a></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>buffer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLBuffer</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>the buffer that contains the data for this attribute</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>drawType</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the draw type passed to gl.bufferData. Default = gl.STATIC_DRAW</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".BlockSpec">BlockSpec</h4>


<div class="description">
    <p>The specification for one UniformBlockObject</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>index</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The index of the block.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The size in bytes needed for the block</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniformIndices</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            </td>

            
            <td class="description last"><p>The indices of the uniforms used by the block. These indices<br>
correspond to entries in a UniformData array in the <a href="module-twgl.html#.UniformBlockSpec"><code>module:twgl.UniformBlockSpec</code></a>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>usedByVertexShader</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>bool</code></span>


            </td>

            
            <td class="description last"><p>Self explanatory</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>usedByFragmentShader</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>bool</code></span>


            </td>

            
            <td class="description last"><p>Self explanatory</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>used</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>bool</code></span>


            </td>

            
            <td class="description last"><p>Self explanatory</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".BufferInfo">BufferInfo</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>numElements</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The number of elements to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>elementType</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The type of indices <code>UNSIGNED_BYTE</code>, <code>UNSIGNED_SHORT</code> etc..</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>indices</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLBuffer</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The indices <code>ELEMENT_ARRAY_BUFFER</code> if any indices exist.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The attribs appropriate to call <code>setAttributes</code></p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".CreateTextureInfo">CreateTextureInfo</h4>


<div class="description">
    <p>Value returned by createTextureAsync</p>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".CreateTexturesInfo">CreateTexturesInfo</h4>


<div class="description">
    <p>Value returned by createTextureAsync</p>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-method">

    
    <h4 class="name" id=".CubemapReadyCallback"><span class="type-signature"></span>CubemapReadyCallback<span class="signature">(err, tex, imgs)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>A callback for when an image finished downloading and been uploaded into a texture</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>err</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>*</code></span>


            </td>

            
            <td class="description last">
                <p>If truthy there was an error.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>tex</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
            <td class="description last">
                <p>the texture.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>imgs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;HTMLImageElement></code></span>


            </td>

            
            <td class="description last">
                <p>the images for each face.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-members">
<h4 class="name" id=".Defaults">Defaults</h4>


<div class="description">
    <p>Various default settings for twgl.</p>
<p>Note: You can call this any number of times. Example:</p>
<pre><code>twgl.setDefaults({ textureColor: [1, 0, 0, 1] });
twgl.setDefaults({ attribPrefix: 'a_' });
</code></pre>
<p>is equivalent to</p>
<pre><code>twgl.setDefaults({
  textureColor: [1, 0, 0, 1],
  attribPrefix: 'a_',
});</code></pre>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>attribPrefix</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The prefix to stick on attributes</p>
<p>When writing shaders I prefer to name attributes with <code>a_</code>, uniforms with <code>u_</code> and varyings with <code>v_</code><br>
as it makes it clear where they came from. But, when building geometry I prefer using un-prefixed names.</p>
<p>In other words I'll create arrays of geometry like this</p>
<pre><code>  const arrays = {
    position: ...
    normal: ...
    texcoord: ...
  };
</code></pre>
<p>But need those mapped to attributes and my attributes start with <code>a_</code>.</p>
<p>Default: <code>&quot;&quot;</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>textureColor</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Array of 4 values in the range 0 to 1</p>
<p>The default texture color is used when loading textures from<br>
urls. Because the URL will be loaded async we'd like to be<br>
able to use the texture immediately. By putting a 1x1 pixel<br>
color in the texture we can start using the texture before<br>
the URL has loaded.</p>
<p>Default: <code>[0.5, 0.75, 1, 1]</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>crossOrigin</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If not undefined sets the crossOrigin attribute on images<br>
that twgl creates when downloading images for textures.</p>
<p>Also see <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>addExtensionsToContext</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>bool</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If true, then, when twgl will try to add any supported WebGL extensions<br>
directly to the context under their normal GL names. For example<br>
if ANGLE_instances_arrays exists then twgl would enable it,<br>
add the functions <code>vertexAttribDivisor</code>, <code>drawArraysInstanced</code>,<br>
<code>drawElementsInstanced</code>, and the constant <code>VERTEX_ATTRIB_ARRAY_DIVISOR</code><br>
to the <code>WebGLRenderingContext</code>.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".DrawObject">DrawObject</h4>


<div class="description">
    <p>A DrawObject is useful for putting objects in to an array and passing them to <a href="module-twgl.html#.drawObjectList"><code>module:twgl.drawObjectList</code></a>.</p>
<p>You need either a <code>BufferInfo</code> or a <code>VertexArrayInfo</code>.</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>active</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>boolean</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>whether or not to draw. Default = <code>true</code> (must be <code>false</code> to be not true). In other words <code>undefined</code> = <code>true</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>type to draw eg. <code>gl.TRIANGLES</code>, <code>gl.LINES</code>, etc...</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>programInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A ProgramInfo as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>bufferInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>A BufferInfo as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>vertexArrayInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>A VertexArrayInfo as returned from <code>module:twgl.createVertexArrayInfo</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniforms</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ?></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The values for the uniforms.<br>
You can pass multiple objects by putting them in an array. For example</p>
<pre><code>var sharedUniforms = {
  u_fogNear: 10,
  u_projection: ...
  ...
};

var localUniforms = {
  u_world: ...
  u_diffuseColor: ...
};

var drawObj = {
  ...
  uniforms: [sharedUniforms, localUniforms],
};</code></pre></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the offset to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>. Defaults to 0.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>count</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the count to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>. Defaults to bufferInfo.numElements.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>instanceCount</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the number of instances. Defaults to undefined.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-method">

    
    <h4 class="name" id=".ErrorCallback"><span class="type-signature"></span>ErrorCallback<span class="signature">(msg, lineOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Error Callback</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>msg</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>error message.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>lineOffset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>amount to add to line number</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-members">
<h4 class="name" id=".FramebufferInfo">FramebufferInfo</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>framebuffer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLFramebuffer</code></span>


            </td>

            
            <td class="description last"><p>The WebGLFramebuffer for this framebufferInfo</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attachments</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;(WebGLRenderbuffer|WebGLTexture)></code></span>


            </td>

            
            <td class="description last"><p>The created attachments in the same order as passed in to <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The width of the framebuffer and its attachments</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The width of the framebuffer and its attachments</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".FullArraySpec">FullArraySpec</h4>


<div class="description">
    <p>Use this type of array spec when TWGL can't guess the type or number of components of an array</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>value</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a constant value for the attribute. Note: if this is set the attribute will be<br>
disabled and set to this constant value and all other values will be ignored.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>data</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>
|

<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The data of the array. A number alone becomes the number of elements of type.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>numComponents</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>number of components for <code>vertexAttribPointer</code>. Default is based on the name of the array.<br>
If <code>coord</code> is in the name assumes <code>numComponents = 2</code>.<br>
If <code>color</code> is in the name assumes <code>numComponents = 4</code>.<br>
otherwise assumes <code>numComponents = 3</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>
|

<span class="param-type"><code>TypedArrayConstructor</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>type. This is used if <code>data</code> is a JavaScript array, or <code>buffer</code> is passed in, or <code>data</code> is a number.<br>
It can either be the constructor for a typedarray. (eg. <code>Uint8Array</code>) OR a WebGL type, (eg <code>gl.UNSIGNED_BYTE</code>).<br>
For example if you want colors in a <code>Uint8Array</code> you might have a <code>FullArraySpec</code> like <code>{ type: gl.UNSIGNED_BYTE, data: [255,0,255,255, ...], }</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>synonym for <code>numComponents</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>normalize</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>boolean</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>normalize for <code>vertexAttribPointer</code>. Default is true if type is <code>Int8Array</code> or <code>Uint8Array</code> otherwise false.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>stride</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>stride for <code>vertexAttribPointer</code>. Default = 0</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>offset for <code>vertexAttribPointer</code>. Default = 0</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>divisor</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>divisor for <code>vertexAttribDivisor</code>. Default = 0.<br>
Requires WebGL2 or the ANGLE_instanced_arrays extension.<br>
and, if you using WebGL1 you must have called <a href="module-twgl.html#.addExtensionsToContext"><code>module:twgl.addExtensionsToContext</code></a></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attrib</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>name of attribute this array maps to. Defaults to same name as array prefixed by the default attribPrefix.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>synonym for <code>attrib</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribName</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>synonym for <code>attrib</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>buffer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLBuffer</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Buffer to use for this attribute. This lets you use your own buffer<br>
but you will need to supply <code>numComponents</code> and <code>type</code>. You can effectively pass an <code>AttribInfo</code><br>
to provide this. Example:</p>
<pre><code>    const bufferInfo1 = twgl.createBufferInfoFromArrays(gl, {
      position: [1, 2, 3, ... ],
    });
    const bufferInfo2 = twgl.createBufferInfoFromArrays(gl, {
      position: bufferInfo1.attribs.position,  // use the same buffer from bufferInfo1
    });</code></pre></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>drawType</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the draw type passed to gl.bufferData. Default = gl.STATIC_DRAW</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".FullProgramSpec">FullProgramSpec</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>shaders</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>the shader source or element ids.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>function</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>callback for errors</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribLocations</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, number></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a attribute name to location map, or array of attribute names where index = location.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>transformFeedbackVaryings</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If passed<br>
a BufferInfo will use the attribs names inside. If passed an object of AttribInfos will use the names from that object. Otherwise<br>
you can pass an array of names.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>transformFeedbackMode</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the mode to pass <code>gl.transformFeedbackVaryings</code>. Defaults to <code>SEPARATE_ATTRIBS</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>ProgramCallback</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>callback for async program compilation.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".ProgramInfo">ProgramInfo</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>program</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLProgram</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A shader program</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniformLocations</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, WebGLUniformLocation></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The uniform locations of each uniform</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribLocations</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, number></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The locations of each attribute</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniformSetters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, function()></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>object of setters as returned from createUniformSetters,</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribSetters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, function()></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>object of setters as returned from createAttribSetters,</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniformBlockSpec</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a uniform block spec for making UniformBlockInfos with createUniformBlockInfo etc..</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>transformFeedbackInfo</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.TransformFeedbackInfo">module:twgl.TransformFeedbackInfo</a>></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>info for transform feedbacks</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".ProgramOptions">ProgramOptions</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>errorCallback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>function</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>callback for errors</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>attribLocations</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, number></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a attribute name to location map, or array of attribute names where index = location.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>transformFeedbackVaryings</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>
|

<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If passed<br>
a BufferInfo will use the attribs names inside. If passed an object of AttribInfos will use the names from that object. Otherwise<br>
you can pass an array of names.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>transformFeedbackMode</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the mode to pass <code>gl.transformFeedbackVaryings</code>. Defaults to <code>SEPARATE_ATTRIBS</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>callback</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>ProgramCallback</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>callback for async program compilation.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".ProgramSpec">ProgramSpec</h4>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.FullProgramSpec">module:twgl.FullProgramSpec</a></code></span>


        </li>
    </ul>


</div>

            
<div class="section-method">

    
    <h4 class="name" id=".TextureFunc"><span class="type-signature"></span>TextureFunc<span class="signature">(gl, options)</span><span class="type-signature"> &rarr; {*}</span></h4>

    
<div class="description">
    <p>A function to generate the source for a texture.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>gl</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLRenderingContext</code></span>


            </td>

            
            <td class="description last">
                <p>A WebGLRenderingContext</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></code></span>


            </td>

            
            <td class="description last">
                <p>the texture options</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>*</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>Returns any of the things documented for <code>src</code> for <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p>
</div>

    
</div>


</div>
            
                
<div class="section-members">
<h4 class="name" id=".TextureOptions">TextureOptions</h4>


<div class="description">
    <p>Texture options passed to most texture functions. Each function will use whatever options<br>
are appropriate for its needs. This lets you pass the same options to all functions.</p>
<p>Note: A <code>TexImageSource</code> is defined in the WebGL spec as a <code>HTMLImageElement</code>, <code>HTMLVideoElement</code>,<br>
<code>HTMLCanvasElement</code>, <code>ImageBitmap</code>, or <code>ImageData</code>.</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the type of texture <code>gl.TEXTURE_2D</code> or <code>gl.TEXTURE_CUBE_MAP</code>. Defaults to <code>gl.TEXTURE_2D</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>level</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the mip level to affect. Defaults to 0. Note, if set auto will be considered false unless explicitly set to true.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the width of the texture. Only used if src is an array or typed array or null.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the height of a texture. Only used if src is an array or typed array or null.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>depth</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the depth of a texture. Only used if src is an array or type array or null and target is <code>TEXTURE_3D</code> .</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>min</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the min filter setting (eg. <code>gl.LINEAR</code>). Defaults to <code>gl.NEAREST_MIPMAP_LINEAR</code><br>
or if texture is not a power of 2 on both dimensions then defaults to <code>gl.LINEAR</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>mag</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>the mag filter setting (eg. <code>gl.LINEAR</code>). Defaults to <code>gl.LINEAR</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>minMag</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>both the min and mag filter settings.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>internalFormat</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>internal format for texture. Defaults to <code>gl.RGBA</code></p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>format</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>format for texture. Defaults to <code>gl.RGBA</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>type for texture. Defaults to <code>gl.UNSIGNED_BYTE</code> unless <code>src</code> is ArrayBufferView. If <code>src</code><br>
is ArrayBufferView defaults to type that matches ArrayBufferView type.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>wrap</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Texture wrapping for both S and T (and R if TEXTURE_3D or WebGLSampler). Defaults to <code>gl.REPEAT</code> for 2D unless src is WebGL1 and src not npot and <code>gl.CLAMP_TO_EDGE</code> for cube</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>wrapS</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Texture wrapping for S. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>wrapT</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Texture wrapping for T. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>wrapR</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Texture wrapping for R. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>minLod</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_MIN_LOD setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>maxLod</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_MAX_LOD setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>baseLevel</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_BASE_LEVEL setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>maxLevel</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_MAX_LEVEL setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>compareFunc</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_COMPARE_FUNC setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>compareMode</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>TEXTURE_COMPARE_MODE setting</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>unpackAlignment</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The <code>gl.UNPACK_ALIGNMENT</code> used when uploading an array. Defaults to 1.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>color</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Color to initialize this texture with if loading an image asynchronously.<br>
The default use a blue 1x1 pixel texture. You can set another default by calling <code>twgl.setDefaults</code><br>
or you can set an individual texture's initial color by setting this property. Example: <code>[1, .5, .5, 1]</code> = pink</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>premultiplyAlpha</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Whether or not to premultiply alpha. Defaults to whatever the current setting is.<br>
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br>
the current setting for specific textures.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>flipY</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Whether or not to flip the texture vertically on upload. Defaults to whatever the current setting is.<br>
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br>
the current setting for specific textures.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>colorspaceConversion</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Whether or not to let the browser do colorspace conversion of the texture on upload. Defaults to whatever the current setting is.<br>
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br>
the current setting for specific textures.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>auto</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>boolean</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If <code>undefined</code> or <code>true</code>, in WebGL1, texture filtering is set automatically for non-power of 2 images and<br>
mips are generated for power of 2 images. In WebGL2 mips are generated if they can be. Note: if <code>level</code> is set above<br>
then then <code>auto</code> is assumed to be <code>false</code> unless explicity set to <code>true</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>cubeFaceOrder</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The order that cube faces are pulled out of an img or set of images. The default is</p>
<pre><code>[gl.TEXTURE_CUBE_MAP_POSITIVE_X,
 gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
 gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
 gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
 gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
 gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]</code></pre></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>src</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>ArrayBufferView</code></span>
|

<span class="param-type"><code>TexImageSource</code></span>
|

<span class="param-type"><code>Array.&lt;TexImageSource></code></span>
|

<span class="param-type"><code>string</code></span>
|

<span class="param-type"><code>Array.&lt;string></code></span>
|

<span class="param-type"><code><a href="module-twgl.html#.TextureFunc">module:twgl.TextureFunc</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>source for texture</p>
<p>If <code>string</code> then it's assumed to be a URL to an image. The image will be downloaded async. A usable<br>
1x1 pixel texture will be returned immediately. The texture will be updated once the image has downloaded.<br>
If <code>target</code> is <code>gl.TEXTURE_CUBE_MAP</code> will attempt to divide image into 6 square pieces. 1x6, 6x1, 3x2, 2x3.<br>
The pieces will be uploaded in <code>cubeFaceOrder</code></p>
<p>If <code>string[]</code> or <code>TexImageSource[]</code> and target is <code>gl.TEXTURE_CUBE_MAP</code> then it must have 6 entries, one for each face of a cube map.</p>
<p>If <code>string[]</code> or <code>TexImageSource[]</code> and target is <code>gl.TEXTURE_2D_ARRAY</code> then each entry is a slice of the a 2d array texture<br>
and will be scaled to the specified width and height OR to the size of the first image that loads.</p>
<p>If <code>TexImageSource</code> then it wil be used immediately to create the contents of the texture. Examples <code>HTMLImageElement</code>,<br>
<code>HTMLCanvasElement</code>, <code>HTMLVideoElement</code>.</p>
<p>If <code>number[]</code> or <code>ArrayBufferView</code> it's assumed to be data for a texture. If <code>width</code> or <code>height</code> is<br>
not specified it is guessed as follows. First the number of elements is computed by <code>src.length / numComponents</code><br>
where <code>numComponents</code> is derived from <code>format</code>. If <code>target</code> is <code>gl.TEXTURE_CUBE_MAP</code> then <code>numElements</code> is divided<br>
by 6. Then</p>
<ul>
<li>
<p>If neither <code>width</code> nor <code>height</code> are specified and <code>sqrt(numElements)</code> is an integer then width and height<br>
are set to <code>sqrt(numElements)</code>. Otherwise <code>width = numElements</code> and <code>height = 1</code>.</p>
</li>
<li>
<p>If only one of <code>width</code> or <code>height</code> is specified then the other equals <code>numElements / specifiedDimension</code>.</p>
</li>
</ul>
<p>If <code>number[]</code> will be converted to <code>type</code>.</p>
<p>If <code>src</code> is a function it will be called with a <code>WebGLRenderingContext</code> and these options.<br>
Whatever it returns is subject to these rules. So it can return a string url, an <code>HTMLElement</code><br>
an array etc...</p>
<p>If <code>src</code> is undefined then an empty texture will be created of size <code>width</code> by <code>height</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>crossOrigin</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>What to set the crossOrigin property of images when they are downloaded.<br>
default: undefined. Also see <a href="module-twgl.html#.setDefaults"><code>module:twgl.setDefaults</code></a>.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-method">

    
    <h4 class="name" id=".TextureReadyCallback"><span class="type-signature"></span>TextureReadyCallback<span class="signature">(err, texture, source)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>A callback for when an image finished downloading and been uploaded into a texture</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>err</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>*</code></span>


            </td>

            
            <td class="description last">
                <p>If truthy there was an error.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>texture</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
            <td class="description last">
                <p>the texture.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>source</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl.html#.TextureSrc">module:twgl.TextureSrc</a></code></span>


            </td>

            
            <td class="description last">
                <p>image(s) used to as the src for the texture</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-members">
<h4 class="name" id=".TextureSrc">TextureSrc</h4>


<div class="description">
    <p>The src image(s) used to create a texture.</p>
<p>When you call <a href="module-twgl.html#.createTexture"><code>module:twgl.createTexture</code></a> or <a href="module-twgl.html#.createTextures"><code>module:twgl.createTextures</code></a><br>
you can pass in urls for images to load into the textures. If it's a single url<br>
then this will be a single HTMLImageElement. If it's an array of urls used for a cubemap<br>
this will be a corresponding array of images for the cubemap.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>HTMLImageElement</code></span>
|

<span class="param-type"><code>Array.&lt;HTMLImageElement></code></span>


        </li>
    </ul>


</div>

            
<div class="section-method">

    
    <h4 class="name" id=".TexturesReadyCallback"><span class="type-signature"></span>TexturesReadyCallback<span class="signature">(err, textures, sources)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>A callback for when all images have finished downloading and been uploaded into their respective textures</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>err</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>*</code></span>


            </td>

            
            <td class="description last">
                <p>If truthy there was an error.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>textures</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, WebGLTexture></code></span>


            </td>

            
            <td class="description last">
                <p>the created textures by name. Same as returned by <a href="module-twgl.html#.createTextures"><code>module:twgl.createTextures</code></a>.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>sources</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.TextureSrc">module:twgl.TextureSrc</a>></code></span>


            </td>

            
            <td class="description last">
                <p>the image(s) used for the texture by name.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-method">

    
    <h4 class="name" id=".ThreeDReadyCallback"><span class="type-signature"></span>ThreeDReadyCallback<span class="signature">(err, tex, imgs)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>A callback for when an image finished downloading and been uploaded into a texture</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>err</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>*</code></span>


            </td>

            
            <td class="description last">
                <p>If truthy there was an error.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>tex</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLTexture</code></span>


            </td>

            
            <td class="description last">
                <p>the texture.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>imgs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;HTMLImageElement></code></span>


            </td>

            
            <td class="description last">
                <p>the images for each slice.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-members">
<h4 class="name" id=".TransformFeedbackInfo">TransformFeedbackInfo</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>index</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>index of transform feedback</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>GL type</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>1 - 4</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".UniformBlockInfo">UniformBlockInfo</h4>


<div class="description">
    <p>Represents a UniformBlockObject including an ArrayBuffer with all the uniform values<br>
and a corresponding WebGLBuffer to hold those values on the GPU</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The name of the block</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>array</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>ArrayBuffer</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The array buffer that contains the uniform values</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>asFloat</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Float32Array</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A float view on the array buffer. This is useful<br>
inspecting the contents of the buffer in the debugger.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>asUint8t</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Uint8Array</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A uint8 view on the array buffer.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>buffer</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLBuffer</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A WebGL buffer that will hold a copy of the uniform values for rendering.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>offset into buffer</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniforms</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, ArrayBufferView></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A uniform name to ArrayBufferView map.<br>
each Uniform has a correctly typed <code>ArrayBufferView</code> into array at the correct offset<br>
and length of that uniform. So for example a float uniform would have a 1 float <code>Float32Array</code><br>
view. A single mat4 would have a 16 element <code>Float32Array</code> view. An ivec2 would have an<br>
<code>Int32Array</code> view, etc.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>setters</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, function()></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>A setter for this uniform.<br>
The reason to use setters is elements of arrays are padded to vec4 sizes which<br>
means if you want to set an array of 4 floats you'd need to set 16 values<br>
(or set elements 0, 4, 8, 12). In other words<br>
<code>someBlockInfo.uniforms.some4FloatArrayUniform.set([0, , , , 1, , , , 2, , , , 3])</code><br>
where as the setter handles just passing in [0, 1, 2, 3] either directly as in<br>
<code>someBlockInfo.setter.some4FloatArrayUniform.set([0, 1, 2, 3])</code> (not recommended)<br>
or via <a href="module-twgl.html#.setBlockUniforms"><code>module:twgl.setBlockUniforms</code></a></p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".UniformBlockSpec">UniformBlockSpec</h4>


<div class="description">
    <p>A <code>UniformBlockSpec</code> represents the data needed to create and bind<br>
UniformBlockObjects for a given program</p>
</div>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>blockSpecs</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.BlockSpec">module:twgl.BlockSpec</a>></code></span>


            </td>

            
            <td class="description last"><p>The BlockSpec for each block by block name</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>uniformData</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;UniformData></code></span>


            </td>

            
            <td class="description last"><p>An array of data for each uniform by uniform index.</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".UniformData">UniformData</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>name</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>string</code></span>


            </td>

            
            <td class="description last"><p>The name of the uniform</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>type</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The WebGL type enum for this uniform</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The number of elements for this uniform</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>blockNdx</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The block index this uniform appears in</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>offset</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last"><p>The byte offset in the block for this uniform's value</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id=".VertexArrayInfo">VertexArrayInfo</h4>


    <h5 class="subsection-title">Properties:</h5>

    
<table class="props">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>numElements</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The number of elements to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>.</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>elementType</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The type of indices <code>UNSIGNED_BYTE</code>, <code>UNSIGNED_SHORT</code> etc..</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>vertexArrayObject</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>WebGLVertexArrayObject</code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>a vertex array object</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
</article>

</section>


</div>

<br class="clear">

<script src="scripts/prep.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>