archive-gh-me/twgl.js
1
0
Fork 0
mirror of https://github.com/greggman/twgl.js.git synced 2025-12-08 19:26:07 +00:00
Code Issues Projects Releases Wiki Activity
twgl.js/docs/module-twgl_programs.html
Gregg Tavares 75a6932dfa build
2019-03-10 13:43:43 +09:00

3872 lines
92 KiB
HTML
Raw Blame History

<!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>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" 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#.getWebGLContext">getWebGLContext</a></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#.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#.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#.createCresentVertices">createCresentVertices</a></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#.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#.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#.setAttributes">setAttributes</a></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#~getBindPointForSamplerType">getBindPointForSamplerType</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#.loadCubemapFromUrls">loadCubemapFromUrls</a></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#.loadSlicesFromUrls">loadSlicesFromUrls</a></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#.setTextureTo1PixelColor">setTextureTo1PixelColor</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 compatibily 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 unform 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 valus 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">(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>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_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 and calls useProgram.</p>
<p>NOTE: There are 4 signatures for this function</p>
<pre class="prettyprint source"><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|module:twgl.ErrorCallback</code></td>
<td class="type">
<span class="param-type"><code>Array.&lt;number></code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The 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.</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_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 class="prettyprint source"><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|module:twgl.ErrorCallback</code></td>
<td class="type">
<span class="param-type"><code>Array.&lt;number></code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The 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.</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_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 class="prettyprint source"><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|module:twgl.ErrorCallback</code></td>
<td class="type">
<span class="param-type"><code>Array.&lt;number></code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The 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.</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_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 class="prettyprint source"><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 class="prettyprint source"><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|module:twgl.ErrorCallback</code></td>
<td class="type">
<span class="param-type"><code>Array.&lt;number></code></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last">
<p>The 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=".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 class="prettyprint source"><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)</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 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 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="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="description last">
<p>The name of the block.</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)</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 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 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="description last">
<p>A WebGLProgram</p>
</td>
</tr>
<tr>
<td class="name"><code>uinformBlockSpec.</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="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="description last">
<p>The name of the block.</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">(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>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=".setAttributes"><span class="type-signature">(static) </span>setAttributes<span class="signature">(setters, buffers)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets attributes and binds buffers (deprecated... use <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a>)</p>
<p>Example:</p>
<pre class="prettyprint source"><code>const program = createProgramFromScripts(
gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);
const attribSetters = createAttributeSetters(program);
const positionBuffer = gl.createBuffer();
const texcoordBuffer = gl.createBuffer();
const attribs = {
a_position: {buffer: positionBuffer, numComponents: 3},
a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
};
gl.useProgram(program);</code></pre><p>This will automatically bind the buffers AND set the<br>attributes.</p>
<pre class="prettyprint source"><code>setAttributes(attribSetters, attribs);</code></pre><p>Properties of attribs. For each attrib you can add<br>properties:</p>
<ul>
<li>type: the type of data in the buffer. Default = gl.FLOAT</li>
<li>normalize: whether or not to normalize the data. Default = false</li>
<li>stride: the stride. Default = 0</li>
<li>offset: offset into the buffer. Default = 0</li>
<li>divisor: the divisor for instances. Default = undefined</li>
</ul>
<p>For example if you had 3 value float positions, 2 value<br>float texcoord and 4 value uint8 colors you'd setup your<br>attribs like this</p>
<pre class="prettyprint source"><code>const attribs = {
a_position: {buffer: positionBuffer, numComponents: 3},
a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
a_color: {
buffer: colorBuffer,
numComponents: 4,
type: gl.UNSIGNED_BYTE,
normalize: true,
},
};</code></pre>
</div>
<dl class="details">
<dt class="important tag-deprecated">Deprecated:</dt><dd><ul class="dummy"><li>use <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</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>setters</code></td>
<td class="type">
<span class="param-type"><code>Object.&lt;string, function()></code></span>
</td>
<td class="description last">
<p>Attribute setters as returned from createAttributeSetters</p>
</td>
</tr>
<tr>
<td class="name"><code>buffers</code></td>
<td class="type">
<span class="param-type"><code>Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></code></span>
</td>
<td class="description last">
<p>AttribInfos mapped by attribute name.</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-method">
<h4 class="name" id=".setBlockUniforms"><span class="type-signature">(static) </span>setBlockUniforms<span class="signature">(uniformBlockInfo, values)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets values of a uniform block object</p>
</div>
<dl class="details">
</dl>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>uniformBlockInfo</code></td>
<td class="type">
<span class="param-type"><code><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></code></span>
</td>
<td class="description last">
<p>A UniformBlockInfo as returned by <a href="module-twgl.html#.createUniformBlockInfo"><code>module:twgl.createUniformBlockInfo</code></a>.</p>
</td>
</tr>
<tr>
<td class="name"><code>values</code></td>
<td class="type">
<span class="param-type"><code>Object.&lt;string, ?></code></span>
</td>
<td class="description last">
<p>A uniform name to value map where the value is correct for the given<br> type of uniform. So for example given a block like</p>
<pre class="prettyprint source"><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 class="prettyprint source"><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> 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 class="prettyprint source"><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 class="prettyprint source"><code>setBuffersAndAttributes(gl, programInfo, bufferInfo);</code></pre><p>For the example above it is equivilent to</p>
<pre class="prettyprint source"><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 <code>module:twgl.createProgrmaInfo</code> 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 class="prettyprint source"><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(program);</code></pre><p>This will automatically bind the textures AND set the<br>uniforms.</p>
<pre class="prettyprint source"><code>twgl.setUniforms(programInfo, uniforms);</code></pre><p>For the example above it is equivalent to</p>
<pre class="prettyprint source"><code>var texUnit = 0;
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex1);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.activeTexture(gl.TEXTURE0 + texUnit);
gl.bindTexture(gl.TEXTURE_2D, tex2);
gl.uniform1i(u_someSamplerLocation, texUnit++);
gl.uniform4fv(u_someColorLocation, [1, 0, 0, 1]);
gl.uniform3fv(u_somePositionLocation, [0, 1, 1]);
gl.uniformMatrix4fv(u_someMatrix, false, [
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,0,
]);</code></pre><p>Note it is perfectly reasonable to call <code>setUniforms</code> multiple times. For example</p>
<pre class="prettyprint source"><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 class="prettyprint source"><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 class="prettyprint source"><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>
</td>
</tr>
</tbody>
</table>
</div>
<div class="section-method">
<h4 class="name" id="~getBindPointForSamplerType"><span class="type-signature">(inner) </span>getBindPointForSamplerType<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
<p>Returns the corresponding bind point for a given sampler type</p>
</div>
<dl class="details">
</dl>
</div>
</article>
</section>
</div>
<br class="clear">
<footer>
Generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.5.5</a> using the Minami theme.
</footer>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink