docs/module-twgl_programs.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>twgl/programs - 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/programs</h1>
    

<section>

<header>
    
        
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>Low level shader program related functions</p>
<p>You should generally not need to use these functions. They are provided<br>
for those cases where you're doing something out of the ordinary<br>
and you need lower level access.</p>
<p>For backward compatibility they are available at both <code>twgl.programs</code> and <code>twgl</code><br>
itself</p>
<p>See <a href="module-twgl.html"><code>module:twgl</code></a> for core functions</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=".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=".createAttributeSetters"><span class="type-signature">(static) </span>createAttributeSetters<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>

    
<div class="description">
    <p>Creates setter functions for all attributes of a shader<br>
program. You can pass this to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a> to set all your buffers and attributes.</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><code>module:twgl.setAttributes</code> for example</li>
        </ul>
    </dd>
    

</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>the program to create setters for.</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, function()></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>an object with a setter for each attribute by name.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createProgram"><span class="type-signature">(static) </span>createProgram<span class="signature">(gl, shaders, 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) {WebGLProgram}</span></h4>

    
<div class="description">
    <p>Creates a program, attaches (and/or compiles) shaders, binds attrib locations, links the<br>
program.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgram(gl, [vs, fs], options);
twgl.createProgram(gl, [vs, fs], opt_errFunc);
twgl.createProgram(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgram(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 to use.</p>
                
            </td>
        </tr>

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The shaders to attach, or element ids for their source, or strings that contain their source</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>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error of a callback was provided.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createProgramAsync"><span class="type-signature">(static) </span>createProgramAsync<span class="signature">(gl, shaders, 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; {Promise.&lt;WebGLProgram>}</span></h4>

    
<div class="description">
    <p>Same as createProgram but returns a promise</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramAsync(gl, [vs, fs], options);
twgl.createProgramAsync(gl, [vs, fs], opt_errFunc);
twgl.createProgramAsync(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramAsync(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 to use.</p>
                
            </td>
        </tr>

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The shaders to attach, or element ids for their source, or strings that contain their source</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>Promise.&lt;WebGLProgram></code></span>


    </dd>
</dl>


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

    
</div>


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

    
    <h4 class="name" id=".createProgramFromScripts"><span class="type-signature">(static) </span>createProgramFromScripts<span class="signature">(gl, shaderScriptIds, 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) {WebGLProgram}</span></h4>

    
<div class="description">
    <p>Creates a program from 2 script tags.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramFromScripts(gl, [vs, fs], opt_options);
twgl.createProgramFromScripts(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromScripts(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromScripts(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>shaderScriptIds</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 ids of the script<br>
tags for the shaders. The first is assumed to be the<br>
vertex shader, 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>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error or a callback was provided.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createProgramFromSources"><span class="type-signature">(static) </span>createProgramFromSources<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) {WebGLProgram}</span></h4>

    
<div class="description">
    <p>Creates a program from 2 sources.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre><code>twgl.createProgramFromSource(gl, [vs, fs], opt_options);
twgl.createProgramFromSource(gl, [vs, fs], opt_errFunc);
twgl.createProgramFromSource(gl, [vs, fs], opt_attribs, opt_errFunc);
twgl.createProgramFromSource(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. 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>WebGLProgram</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created program or null if error or a callback was provided.</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=".createProgramInfoAsync"><span class="type-signature">(static) </span>createProgramInfoAsync<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; {Promise.&lt;<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>>}</span></h4>

    
<div class="description">
    <p>Same as createProgramInfo but returns a promise</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<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>Promise.&lt;<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>></code></span>


    </dd>
</dl>


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

    
</div>


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

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

    
<div class="description">
    <p>Creates a ProgramInfo from an existing program.</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>
</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<br>
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><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></code></span>


    </dd>
</dl>


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

    
</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=".createUniformBlockInfoFromProgram"><span class="type-signature">(static) </span>createUniformBlockInfoFromProgram<span class="signature">(gl, program, 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>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 WebGLProgram</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">
                

                </td>
            

            <td class="description last">
                <p>A UniformBlockSpec as returned<br>
from <code>module:twgl.createUniformBlockSpecFromProgram</code>.</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=".createUniformBlockSpecFromProgram"><span class="type-signature">(static) </span>createUniformBlockSpecFromProgram<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a>}</span></h4>

    
<div class="description">
    <p>Creates a UniformBlockSpec for the given program.</p>
<p>A UniformBlockSpec represents the data needed to create and bind<br>
UniformBlockObjects</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 WebGL2 Rendering Context</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>A WebGLProgram for a successfully linked program</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#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></code></span>


    </dd>
</dl>


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

    
</div>


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

    
    <h4 class="name" id=".createUniformSetters"><span class="type-signature">(static) </span>createUniformSetters<span class="signature">(gl, program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>

    
<div class="description">
    <p>Creates setter functions for all uniforms of a shader<br>
program.</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><a href="module-twgl.html#.setUniforms"><code>module:twgl.setUniforms</code></a></li>
        </ul>
    </dd>
    

</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>the program to create setters for.</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, function()></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>an object with a setter by name for each uniform</p>
</div>

    
</div>


</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=".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=".setUniformsAndBindTextures"><span class="type-signature">(static) </span>setUniformsAndBindTextures<span class="signature">(setters, values)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Alias for <code>setUniforms</code></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</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

    
    <h4 class="name" id="~createProgramInfos"><span class="type-signature">(inner) </span>createProgramInfos<span class="signature">(gl, programSpecs, programOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {Object.&lt;string, <a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>>}</span></h4>

    
<div class="description">
    <p>Creates multiple programInfos</p>
<p>Note: the reason this function exists is because the fastest way to create multiple<br>
programs in WebGL is to create and compile all shaders and link all programs and only<br>
afterwards check if they succeeded. In that way, giving all your shaders</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><p><a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p>
<p>Examples:</p>
<pre><code>const programInfos = twgl.createProgramInfos(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});
</code></pre>
<p>or</p>
<pre><code>const {lambert, phong, particles} = twgl.createProgramInfos(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});</code></pre></li>
        </ul>
    </dd>
    

</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>programSpecs</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>An object of ProgramSpecs, one per program.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>options to apply to all programs</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#.ProgramInfo">module:twgl.ProgramInfo</a>></code></span>


    </dd>
</dl>


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

    
</div>


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

    
    <h4 class="name" id="~createProgramInfosAsync"><span class="type-signature">(inner) </span>createProgramInfosAsync<span class="signature">(gl, programSpecs, programOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Promise.&lt;Object.&lt;string, <a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>>>}</span></h4>

    
<div class="description">
    <p>Creates multiple programInfos asynchronously</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><p><code>module:twgl.createProgramInfoAsync</code></p>
<p>Example:</p>
<pre><code>const programInfos = await twgl.createProgramInfosAsync(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});</code></pre></li>
        </ul>
    </dd>
    

</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>programSpecs</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>An object of ProgramSpecs, one per program.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>options to apply to all programs</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>Promise.&lt;Object.&lt;string, <a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>>></code></span>


    </dd>
</dl>


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

    
</div>


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

    
    <h4 class="name" id="~createPrograms"><span class="type-signature">(inner) </span>createPrograms<span class="signature">(gl, programSpecs, programOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {Object.&lt;string, WebGLProgram>}</span></h4>

    
<div class="description">
    <p>Creates multiple programs</p>
<p>Note: the reason this function exists is because the fastest way to create multiple<br>
programs in WebGL is to create and compile all shaders and link all programs and only<br>
afterwards check if they succeeded. In that way, giving all your shaders</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><p><code>module:twgl.createProgram</code></p>
<p>Example:</p>
<pre><code>const programs = twgl.createPrograms(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});</code></pre></li>
        </ul>
    </dd>
    

</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>programSpecs</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>An object of ProgramSpecs, one per program.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>options to apply to all programs</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, WebGLProgram></code></span>


    </dd>
</dl>


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

    
</div>


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

    
    <h4 class="name" id="~createProgramsAsync"><span class="type-signature">(inner) </span>createProgramsAsync<span class="signature">(gl, programSpecs, programOptions<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; (nullable) {Object.&lt;string, WebGLProgram>}</span></h4>

    
<div class="description">
    <p>Creates multiple programs asynchronously</p>
</div>


<dl class="details">

    
    <dt class="tag-see">See:</dt>
    <dd class="tag-see">
        <ul>
            <li><p><code>module:twgl.createProgramAsync</code></p>
<p>Example:</p>
<pre><code>const programs = await twgl.createProgramsAsync(gl, {
  lambert: [lambertVS, lambertFS],
  phong: [phongVS, phoneFS],
  particles: {
    shaders: [particlesVS, particlesFS],
    transformFeedbackVaryings: ['position', 'velocity'],
  },
});</code></pre></li>
        </ul>
    </dd>
    

</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>programSpecs</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>An object of ProgramSpecs, one per program.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>options to apply to all programs</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, WebGLProgram></code></span>


    </dd>
</dl>


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

    
</div>


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

        
<div class="section-method">

    
    <h4 class="name" id="~ProgramCallback"><span class="type-signature"></span>ProgramCallback<span class="signature">(err<span class="signature-attributes">opt</span>, result<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>

    
<div class="description">
    <p>Program 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>err</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>error message, falsy if no error</p>
                
            </td>
        </tr>

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the program or programInfo</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


</div>
            
                
<div class="section-members">
<h4 class="name" id="~UniformBlockInfoOptions">UniformBlockInfoOptions</h4>


<div class="description">
    <p>Options to allow createUniformBlockInfo to use an existing buffer and arrayBuffer at an offset</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>array</code></td>
            

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


            </td>

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

                </td>
            

            <td class="description last"><p>an existing array buffer to use for values</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>the offset in bytes to use in the array buffer (default = 0)</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>the buffer to use for this uniform block info</p></td>
        </tr>

        
        <tr>
            
                <td class="name"><code>bufferOffset</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 in bytes in the buffer to use (default = use offset above)</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>