archive-gh-me/twgl.js
1
0
Fork 0
mirror of https://github.com/greggman/twgl.js.git synced 2026-01-25 14:57:59 +00:00
Code Issues Projects Releases Wiki Activity
twgl.js/docs/module-twgl.html
Gregg Tavares aaa9dfc8b8 build
2016-10-21 11:54:33 +09:00

10305 lines
173 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>twgl - 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>
<h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-twgl.html">twgl</a><ul class='methods'><li data-type='method'><a href="module-twgl.html#.bindFramebufferInfo">bindFramebufferInfo</a></li><li data-type='method'><a href="module-twgl.html#.bindUniformBlock">bindUniformBlock</a></li><li data-type='method'><a href="module-twgl.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></li><li data-type='method'><a href="module-twgl.html#.createFramebufferInfo">createFramebufferInfo</a></li><li data-type='method'><a href="module-twgl.html#.createProgramInfo">createProgramInfo</a></li><li data-type='method'><a href="module-twgl.html#.createTexture">createTexture</a></li><li data-type='method'><a href="module-twgl.html#.createTextures">createTextures</a></li><li data-type='method'><a href="module-twgl.html#.createUniformBlockInfo">createUniformBlockInfo</a></li><li data-type='method'><a href="module-twgl.html#.createVertexArrayInfo">createVertexArrayInfo</a></li><li data-type='method'><a href="module-twgl.html#.drawBufferInfo">drawBufferInfo</a></li><li data-type='method'><a href="module-twgl.html#.drawObjectList">drawObjectList</a></li><li data-type='method'><a href="module-twgl.html#.getContext">getContext</a></li><li data-type='method'><a href="module-twgl.html#.getWebGLContext">getWebGLContext</a></li><li data-type='method'><a href="module-twgl.html#.resizeCanvasToDisplaySize">resizeCanvasToDisplaySize</a></li><li data-type='method'><a href="module-twgl.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></li><li data-type='method'><a href="module-twgl.html#.resizeTexture">resizeTexture</a></li><li data-type='method'><a href="module-twgl.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></li><li data-type='method'><a href="module-twgl.html#.setBlockUniforms">setBlockUniforms</a></li><li data-type='method'><a href="module-twgl.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></li><li data-type='method'><a href="module-twgl.html#.setDefaults">setDefaults</a></li><li data-type='method'><a href="module-twgl.html#.setTextureFromArray">setTextureFromArray</a></li><li data-type='method'><a href="module-twgl.html#.setUniformBlock">setUniformBlock</a></li><li data-type='method'><a href="module-twgl.html#.setUniforms">setUniforms</a></li></ul></li><li><a href="module-twgl_attributes.html">twgl/attributes</a><ul class='methods'><li data-type='method'><a href="module-twgl_attributes.html#.createAttribsFromArrays">createAttribsFromArrays</a></li><li data-type='method'><a href="module-twgl_attributes.html#.createBufferFromArray">createBufferFromArray</a></li><li data-type='method'><a href="module-twgl_attributes.html#.createBufferFromTypedArray">createBufferFromTypedArray</a></li><li data-type='method'><a href="module-twgl_attributes.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></li><li data-type='method'><a href="module-twgl_attributes.html#.createBuffersFromArrays">createBuffersFromArrays</a></li><li data-type='method'><a href="module-twgl_attributes.html#.createVertexArrayInfo">createVertexArrayInfo</a></li><li data-type='method'><a href="module-twgl_attributes.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></li><li data-type='method'><a href="module-twgl_attributes.html#.setAttributePrefix">setAttributePrefix</a></li></ul></li><li><a href="module-twgl_draw.html">twgl/draw</a><ul class='methods'><li data-type='method'><a href="module-twgl_draw.html#.drawBufferInfo">drawBufferInfo</a></li><li data-type='method'><a href="module-twgl_draw.html#.drawObjectList">drawObjectList</a></li></ul></li><li><a href="module-twgl_framebuffers.html">twgl/framebuffers</a><ul class='methods'><li data-type='method'><a href="module-twgl_framebuffers.html#.bindFramebufferInfo">bindFramebufferInfo</a></li><li data-type='method'><a href="module-twgl_framebuffers.html#.createFramebufferInfo">createFramebufferInfo</a></li><li data-type='method'><a href="module-twgl_framebuffers.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></li></ul></li><li><a href="module-twgl_m4.html">twgl/m4</a><ul class='methods'><li data-type='method'><a href="module-twgl_m4.html#.axisRotate">axisRotate</a></li><li data-type='method'><a href="module-twgl_m4.html#.axisRotation">axisRotation</a></li><li data-type='method'><a href="module-twgl_m4.html#.copy">copy</a></li><li data-type='method'><a href="module-twgl_m4.html#.frustum">frustum</a></li><li data-type='method'><a href="module-twgl_m4.html#.getAxis">getAxis</a></li><li data-type='method'><a href="module-twgl_m4.html#.getTranslation">getTranslation</a></li><li data-type='method'><a href="module-twgl_m4.html#.identity">identity</a></li><li data-type='method'><a href="module-twgl_m4.html#.inverse">inverse</a></li><li data-type='method'><a href="module-twgl_m4.html#.lookAt">lookAt</a></li><li data-type='method'><a href="module-twgl_m4.html#.multiply">multiply</a></li><li data-type='method'><a href="module-twgl_m4.html#.negate">negate</a></li><li data-type='method'><a href="module-twgl_m4.html#.ortho">ortho</a></li><li data-type='method'><a href="module-twgl_m4.html#.perspective">perspective</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotateX">rotateX</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotateY">rotateY</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotateZ">rotateZ</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotationX">rotationX</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotationY">rotationY</a></li><li data-type='method'><a href="module-twgl_m4.html#.rotationZ">rotationZ</a></li><li data-type='method'><a href="module-twgl_m4.html#.scale">scale</a></li><li data-type='method'><a href="module-twgl_m4.html#.scaling">scaling</a></li><li data-type='method'><a href="module-twgl_m4.html#.setAxis">setAxis</a></li><li data-type='method'><a href="module-twgl_m4.html#.setTranslation">setTranslation</a></li><li data-type='method'><a href="module-twgl_m4.html#.transformDirection">transformDirection</a></li><li data-type='method'><a href="module-twgl_m4.html#.transformNormal">transformNormal</a></li><li data-type='method'><a href="module-twgl_m4.html#.transformPoint">transformPoint</a></li><li data-type='method'><a href="module-twgl_m4.html#.translate">translate</a></li><li data-type='method'><a href="module-twgl_m4.html#.translation">translation</a></li><li data-type='method'><a href="module-twgl_m4.html#.transpose">transpose</a></li></ul></li><li><a href="module-twgl_primitives.html">twgl/primitives</a><ul class='methods'><li data-type='method'><a href="module-twgl_primitives.html#.concatVertices">concatVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.create3DFBufferInfo">create3DFBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.create3DFBuffers">create3DFBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.create3DFVertices">create3DFVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createAugmentedTypedArray">createAugmentedTypedArray</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCresentBufferInfo">createCresentBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCresentVertices">createCresentVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCubeBufferInfo">createCubeBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCubeBuffers">createCubeBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCubeVertices">createCubeVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCylinderBufferInfo">createCylinderBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCylinderBuffers">createCylinderBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createCylinderVertices">createCylinderVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createDiscBufferInfo">createDiscBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createDiscBuffers">createDiscBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createDiscVertices">createDiscVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createPlaneBufferInfo">createPlaneBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createPlaneBuffers">createPlaneBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createPlaneVertices">createPlaneVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createSphereBufferInfo">createSphereBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createSphereBuffers">createSphereBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createSphereVertices">createSphereVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTorusBufferInfo">createTorusBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTorusBuffers">createTorusBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTorusVertices">createTorusVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTruncatedConeBufferInfo">createTruncatedConeBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTruncatedConeBuffers">createTruncatedConeBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createTruncatedConeVertices">createTruncatedConeVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createXYQuadBufferInfo">createXYQuadBufferInfo</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createXYQuadBuffers">createXYQuadBuffers</a></li><li data-type='method'><a href="module-twgl_primitives.html#.createXYQuadVertices">createXYQuadVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.deindexVertices">deindexVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.duplicateVertices">duplicateVertices</a></li><li data-type='method'><a href="module-twgl_primitives.html#.flattenNormals">flattenNormals</a></li><li data-type='method'><a href="module-twgl_primitives.html#.makeRandomVertexColors">makeRandomVertexColors</a></li><li data-type='method'><a href="module-twgl_primitives.html#.reorientDirections">reorientDirections</a></li><li data-type='method'><a href="module-twgl_primitives.html#.reorientNormals">reorientNormals</a></li><li data-type='method'><a href="module-twgl_primitives.html#.reorientPositions">reorientPositions</a></li><li data-type='method'><a href="module-twgl_primitives.html#.reorientVertices">reorientVertices</a></li></ul></li><li><a href="module-twgl_programs.html">twgl/programs</a><ul class='methods'><li data-type='method'><a href="module-twgl_programs.html#.bindUniformBlock">bindUniformBlock</a></li><li data-type='method'><a href="module-twgl_programs.html#.createAttributeSetters">createAttributeSetters</a></li><li data-type='method'><a href="module-twgl_programs.html#.createProgram">createProgram</a></li><li data-type='method'><a href="module-twgl_programs.html#.createProgramFromScripts">createProgramFromScripts</a></li><li data-type='method'><a href="module-twgl_programs.html#.createProgramFromSources">createProgramFromSources</a></li><li data-type='method'><a href="module-twgl_programs.html#.createProgramInfo">createProgramInfo</a></li><li data-type='method'><a href="module-twgl_programs.html#.createProgramInfoFromProgram">createProgramInfoFromProgram</a></li><li data-type='method'><a href="module-twgl_programs.html#.createUniformBlockInfo">createUniformBlockInfo</a></li><li data-type='method'><a href="module-twgl_programs.html#.createUniformBlockInfoFromProgram">createUniformBlockInfoFromProgram</a></li><li data-type='method'><a href="module-twgl_programs.html#.createUniformBlockSpecFromProgram">createUniformBlockSpecFromProgram</a></li><li data-type='method'><a href="module-twgl_programs.html#.createUniformSetters">createUniformSetters</a></li><li data-type='method'><a href="module-twgl_programs.html#.setAttributes">setAttributes</a></li><li data-type='method'><a href="module-twgl_programs.html#.setBlockUniforms">setBlockUniforms</a></li><li data-type='method'><a href="module-twgl_programs.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></li><li data-type='method'><a href="module-twgl_programs.html#.setUniformBlock">setUniformBlock</a></li><li data-type='method'><a href="module-twgl_programs.html#.setUniforms">setUniforms</a></li></ul></li><li><a href="module-twgl_textures.html">twgl/textures</a><ul class='methods'><li data-type='method'><a href="module-twgl_textures.html#.createTexture">createTexture</a></li><li data-type='method'><a href="module-twgl_textures.html#.createTextures">createTextures</a></li><li data-type='method'><a href="module-twgl_textures.html#.getNumComponentsForFormat">getNumComponentsForFormat</a></li><li data-type='method'><a href="module-twgl_textures.html#.loadCubemapFromUrls">loadCubemapFromUrls</a></li><li data-type='method'><a href="module-twgl_textures.html#.loadTextureFromUrl">loadTextureFromUrl</a></li><li data-type='method'><a href="module-twgl_textures.html#.resizeTexture">resizeTexture</a></li><li data-type='method'><a href="module-twgl_textures.html#.setDefaultTextureColor">setDefaultTextureColor</a></li><li data-type='method'><a href="module-twgl_textures.html#.setEmptyTexture">setEmptyTexture</a></li><li data-type='method'><a href="module-twgl_textures.html#.setTextureFilteringForSize">setTextureFilteringForSize</a></li><li data-type='method'><a href="module-twgl_textures.html#.setTextureFromArray">setTextureFromArray</a></li><li data-type='method'><a href="module-twgl_textures.html#.setTextureFromElement">setTextureFromElement</a></li><li data-type='method'><a href="module-twgl_textures.html#.setTextureParameters">setTextureParameters</a></li><li data-type='method'><a href="module-twgl_textures.html#.setTextureTo1PixelColor">setTextureTo1PixelColor</a></li></ul></li><li><a href="module-twgl_typedArray.html">twgl/typedArray</a><ul class='methods'><li data-type='method'><a href="module-twgl_typedArray.html#.getGLTypeForTypedArray">getGLTypeForTypedArray</a></li><li data-type='method'><a href="module-twgl_typedArray.html#.getTypedArrayTypeForGLType">getTypedArrayTypeForGLType</a></li></ul></li><li><a href="module-twgl_v3.html">twgl/v3</a><ul class='methods'><li data-type='method'><a href="module-twgl_v3.html#.add">add</a></li><li data-type='method'><a href="module-twgl_v3.html#.copy">copy</a></li><li data-type='method'><a href="module-twgl_v3.html#.create">create</a></li><li data-type='method'><a href="module-twgl_v3.html#.cross">cross</a></li><li data-type='method'><a href="module-twgl_v3.html#.divide">divide</a></li><li data-type='method'><a href="module-twgl_v3.html#.divScalar">divScalar</a></li><li data-type='method'><a href="module-twgl_v3.html#.dot">dot</a></li><li data-type='method'><a href="module-twgl_v3.html#.length">length</a></li><li data-type='method'><a href="module-twgl_v3.html#.lengthSq">lengthSq</a></li><li data-type='method'><a href="module-twgl_v3.html#.lerp">lerp</a></li><li data-type='method'><a href="module-twgl_v3.html#.mulScalar">mulScalar</a></li><li data-type='method'><a href="module-twgl_v3.html#.multiply">multiply</a></li><li data-type='method'><a href="module-twgl_v3.html#.negate">negate</a></li><li data-type='method'><a href="module-twgl_v3.html#.normalize">normalize</a></li><li data-type='method'><a href="module-twgl_v3.html#.subtract">subtract</a></li></ul></li></ul>
</nav>
<div id="main">
<h1 class="page-title">twgl</h1>
<section>
<header>
</header>
<article>
<div class="container-overview">
<div class="description"><p>The main TWGL module.</p>
<p>For most use cases you shouldn't need anything outside this module.<br>Exceptions between the stuff added to twgl-full (v3, m4, primitives)</p></div>
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id=".bindFramebufferInfo"><span class="type-signature">(static) </span>bindFramebufferInfo<span class="signature">(gl, framebufferInfo<span class="signature-attributes">opt</span>, target<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Binds a framebuffer</p>
<p>This function pretty much soley exists because I spent hours<br>trying to figure out why something I wrote wasn't working only<br>to realize I forget to set the viewport dimensions.<br>My hope is this function will fix that.</p>
<p>It is effectively the same as</p>
<pre class="prettyprint source"><code>gl.bindFramebuffer(gl.FRAMEBUFFER, someFramebufferInfo.framebuffer);
gl.viewport(0, 0, someFramebufferInfo.width, someFramebufferInfo.height);</code></pre>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>framebufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>a framebufferInfo as returned from <code>module:twgl.createFramebuffer</code>.<br> If not passed will bind the canvas.</p></td>
</tr>
<tr>
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The target. If not passed <code>gl.FRAMEBUFFER</code> will be used.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<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>
<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">WebGL2RenderingContext</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"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
|
<span class="param-type"><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></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"><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></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>
<dl class="details">
</dl>
<h5>Returns:</h5>
<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>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">bool</span>
</dd>
</dl>
<h4 class="name" id=".createBufferInfoFromArrays"><span class="type-signature">(static) </span>createBufferInfoFromArrays<span class="signature">(gl, arrays)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>
<div class="description">
<p>Creates a BufferInfo from an object of arrays.</p>
<p>This can be passed to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a> and to<br><code>module:twgl:drawBufferInfo</code>.</p>
<p>Given an object like</p>
<pre class="prettyprint source"><code>var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
normal: { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], },
indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
};</code></pre><p> Creates an BufferInfo like this</p>
<pre class="prettyprint source"><code>bufferInfo = {
numElements: 4, // or whatever the number of elements is
indices: WebGLBuffer, // this property will not exist if there are no indices
attribs: {
a_position: { buffer: WebGLBuffer, numComponents: 3, },
a_normal: { buffer: WebGLBuffer, numComponents: 3, },
a_texcoord: { buffer: WebGLBuffer, numComponents: 2, },
},
};</code></pre><p> The properties of arrays can be JavaScript arrays in which case the number of components<br> will be guessed.</p>
<pre class="prettyprint source"><code>var arrays = {
position: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0],
texcoord: [0, 0, 0, 1, 1, 0, 1, 1],
normal: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
indices: [0, 1, 2, 1, 2, 3],
};</code></pre><p> They can also by TypedArrays</p>
<pre class="prettyprint source"><code>var arrays = {
position: new Float32Array([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]),
texcoord: new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]),
normal: new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]),
indices: new Uint16Array([0, 1, 2, 1, 2, 3]),
};</code></pre><p> Or augmentedTypedArrays</p>
<pre class="prettyprint source"><code>var positions = createAugmentedTypedArray(3, 4);
var texcoords = createAugmentedTypedArray(2, 4);
var normals = createAugmentedTypedArray(3, 4);
var indices = createAugmentedTypedArray(3, 2, Uint16Array);
positions.push([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]);
texcoords.push([0, 0, 0, 1, 1, 0, 1, 1]);
normals.push([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
indices.push([0, 1, 2, 1, 2, 3]);
var arrays = {
position: positions,
texcoord: texcoords,
normal: normals,
indices: indices,
};</code></pre><p>For the last example it is equivalent to</p>
<pre class="prettyprint source"><code>var bufferInfo = {
attribs: {
a_position: { numComponents: 3, buffer: gl.createBuffer(), },
a_texcoods: { numComponents: 2, buffer: gl.createBuffer(), },
a_normals: { numComponents: 3, buffer: gl.createBuffer(), },
},
indices: gl.createBuffer(),
numElements: 6,
};
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_position.buffer);
gl.bufferData(gl.ARRAY_BUFFER, arrays.position, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_texcoord.buffer);
gl.bufferData(gl.ARRAY_BUFFER, arrays.texcoord, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, bufferInfo.attribs.a_normal.buffer);
gl.bufferData(gl.ARRAY_BUFFER, arrays.normal, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferInfo.indices);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, arrays.indices, gl.STATIC_DRAW);</code></pre>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="description last"><p>A WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>arrays</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.Arrays">module:twgl.Arrays</a></span>
</td>
<td class="description last"><p>Your data</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A BufferInfo</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></span>
</dd>
</dl>
<h4 class="name" id=".createFramebufferInfo"><span class="type-signature">(static) </span>createFramebufferInfo<span class="signature">(gl, attachments<span class="signature-attributes">opt</span>, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a>}</span></h4>
<div class="description">
<p>Creates a framebuffer and attachments.</p>
<p>This returns a <a href="module-twgl.html#.FramebufferInfo"><code>module:twgl.FramebufferInfo</code></a> because it needs to return the attachments as well as the framebuffer.</p>
<p>The simplest usage</p>
<pre class="prettyprint source"><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
var fbi = twgl.createFramebuffer(gl);</code></pre><p>More complex usage</p>
<pre class="prettyprint source"><code>// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
var attachments = [
{ format: RGB565, mag: NEAREST },
{ format: STENCIL_INDEX8 },
]
var fbi = twgl.createFramebuffer(gl, attachments);</code></pre><p>Passing in a specific size</p>
<pre class="prettyprint source"><code>var width = 256;
var height = 256;
var fbi = twgl.createFramebuffer(gl, attachments, width, height);</code></pre><p><strong>Note!!</strong> It is up to you to check if the framebuffer is renderable by calling <code>gl.checkFramebufferStatus</code>.<br><a href="https://www.khronos.org/registry/webgl/specs/latest/1.0/#6.6">WebGL only guarantees 3 combinations of attachments work</a>.</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>attachments</code></td>
<td class="type">
<span class="param-type">Array.&lt;<a href="module-twgl.html#.AttachmentOptions">module:twgl.AttachmentOptions</a>></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>which attachments to create. If not provided the default is a framebuffer with an<br> <code>RGBA</code>, <code>UNSIGNED_BYTE</code> texture <code>COLOR_ATTACHMENT0</code> and a <code>DEPTH_STENCIL</code> renderbuffer <code>DEPTH_STENCIL_ATTACHMENT</code>.</p></td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the width for the attachments. Default = size of drawingBuffer</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the height for the attachments. Defautt = size of drawingBuffer</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the framebuffer and attachments.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></span>
</dd>
</dl>
<h4 class="name" id=".createProgramInfo"><span class="type-signature">(static) </span>createProgramInfo<span class="signature">(gl, shaderSourcess, opt_attribs<span class="signature-attributes">opt</span>, opt_locations<span class="signature-attributes">opt</span>, opt_errorCallback)</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 3 signatures for this function</p>
<pre class="prettyprint source"><code>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>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The WebGLRenderingContext<br> to use.</p></td>
</tr>
<tr>
<td class="name"><code>shaderSourcess</code></td>
<td class="type">
<span class="param-type">Array.&lt;string></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">Array.&lt;string></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An array of attribs names. 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">Array.&lt;number></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The locations for the attributes. A parallel array to opt_attribs letting you assign locations.</p></td>
</tr>
<tr>
<td class="name"><code>opt_errorCallback</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.ErrorCallback">module:twgl.ErrorCallback</a></span>
</td>
<td class="attributes">
</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>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created ProgramInfo or null if it failed to link or compile</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
</dd>
</dl>
<h4 class="name" id=".createTexture"><span class="type-signature">(static) </span>createTexture<span class="signature">(gl, options<span class="signature-attributes">opt</span>, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {WebGLTexture}</span></h4>
<div class="description">
<p>Creates a texture based on the options passed in.</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A TextureOptions object with whatever parameters you want set.</p></td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureReadyCallback">module:twgl.TextureReadyCallback</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A callback called when an image has been downloaded and uploaded to the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the created texture.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLTexture</span>
</dd>
</dl>
<h4 class="name" id=".createTextures"><span class="type-signature">(static) </span>createTextures<span class="signature">(gl, options, callback<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLTexture>}</span></h4>
<div class="description">
<p>Creates a bunch of textures based on the passed in options.</p>
<p>Example:</p>
<pre class="prettyprint source"><code>var textures = twgl.createTextures(gl, {
// a power of 2 image
hftIcon: { src: &quot;images/hft-icon-16.png&quot;, mag: gl.NEAREST },
// a non-power of 2 image
clover: { src: &quot;images/clover.jpg&quot; },
// From a canvas
fromCanvas: { src: ctx.canvas },
// A cubemap from 6 images
yokohama: {
target: gl.TEXTURE_CUBE_MAP,
src: [
'images/yokohama/posx.jpg',
'images/yokohama/negx.jpg',
'images/yokohama/posy.jpg',
'images/yokohama/negy.jpg',
'images/yokohama/posz.jpg',
'images/yokohama/negz.jpg',
],
},
// A cubemap from 1 image (can be 1x6, 2x3, 3x2, 6x1)
goldengate: {
target: gl.TEXTURE_CUBE_MAP,
src: 'images/goldengate.jpg',
},
// A 2x2 pixel texture from a JavaScript array
checker: {
mag: gl.NEAREST,
min: gl.LINEAR,
src: [
255,255,255,255,
192,192,192,255,
192,192,192,255,
255,255,255,255,
],
},
// a 1x2 pixel texture from a typed array.
stripe: {
mag: gl.NEAREST,
min: gl.LINEAR,
format: gl.LUMINANCE,
src: new Uint8Array([
255,
128,
255,
128,
255,
128,
255,
128,
]),
width: 1,
},
});</code></pre><p>Now</p>
<ul>
<li><code>textures.hftIcon</code> will be a 2d texture</li>
<li><code>textures.clover</code> will be a 2d texture</li>
<li><code>textures.fromCanvas</code> will be a 2d texture</li>
<li><code>textures.yohohama</code> will be a cubemap texture</li>
<li><code>textures.goldengate</code> will be a cubemap texture</li>
<li><code>textures.checker</code> will be a 2d texture</li>
<li><code>textures.stripe</code> will be a 2d texture</li>
</ul>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a>></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A object of TextureOptions one per texture.</p></td>
</tr>
<tr>
<td class="name"><code>callback</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TexturesReadyCallback">module:twgl.TexturesReadyCallback</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A callback called when all textures have been downloaded.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the created textures by name</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLTexture></span>
</dd>
</dl>
<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>
<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">WebGL2RenderingContext</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"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></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">string</span>
</td>
<td class="description last"><p>The name of the block.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created UniformBlockInfo</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></span>
</dd>
</dl>
<h4 class="name" id=".createVertexArrayInfo"><span class="type-signature">(static) </span>createVertexArrayInfo<span class="signature">(gl, programInfo)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a>}</span></h4>
<div class="description">
<p>Creates a BufferInfo from an object of arrays.</p>
<p>This can be passed to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a> and to<br><code>module:twgl:drawBufferInfo</code>.</p>
<blockquote>
<p><strong>IMPORTANT:</strong> Vertex Array Objects are <strong>not</strong> a direct analog for a BufferInfo. Vertex Array Objects<br> assign buffers to specific attributes at creation time. That means they can only be used with programs<br> who's attributes use the same attribute locations for the same purposes.</p>
<p>Bind your attribute locations by passing an array of attribute names to <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a><br> or use WebGL 2's GLSL ES 3's <code>layout(location = &lt;num&gt;)</code> to make sure locations match.</p>
</blockquote>
<p>also</p>
<blockquote>
<p><strong>IMPORTANT:</strong> After calling twgl.setBuffersAndAttribute with a BufferInfo that uses a Vertex Array Object<br> that Vertex Array Object will be bound. That means <strong>ANY MANIPULATION OF ELEMENT_ARRAY_BUFFER or ATTRIBUTES</strong><br> will affect the Vertex Array Object state.</p>
<p>Call <code>gl.bindVertexArray(null)</code> to get back manipulating the global attributes and ELEMENT_ARRAY_BUFFER.</p>
</blockquote>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="description last"><p>A WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>programInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
|
<span class="param-type">Array.&lt;<a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a>></span>
</td>
<td class="description last"><p>a programInfo or array of programInfos</p>
<p> You need to make sure every attribute that will be used is bound. So for example assume shader 1<br> uses attributes A, B, C and shader 2 uses attributes A, B, D. If you only pass in the programInfo<br> for shader 1 then only attributes A, B, and C will have their attributes set because TWGL doesn't<br> now attribute D's location.</p>
<p> So, you can pass in both shader 1 and shader 2's programInfo</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created VertexArrayInfo</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></span>
</dd>
</dl>
<h4 class="name" id=".drawBufferInfo"><span class="type-signature">(static) </span>drawBufferInfo<span class="signature">(gl, bufferInfo, type<span class="signature-attributes">opt</span>, count<span class="signature-attributes">opt</span>, offset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Calls <code>gl.drawElements</code> or <code>gl.drawArrays</code>, whichever is appropriate</p>
<p>normally you'd call <code>gl.drawElements</code> or <code>gl.drawArrays</code> yourself<br>but calling this means if you switch from indexed data to non-indexed<br>data you don't have to remember to update your draw call.</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>bufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></span>
|
<span class="param-type"><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A BufferInfo as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a> or<br> a VertexArrayInfo as returned from <a href="module-twgl.html#.createVertexArrayInfo"><code>module:twgl.createVertexArrayInfo</code></a></p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">enum</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>eg (gl.TRIANGLES, gl.LINES, gl.POINTS, gl.TRIANGLE_STRIP, ...). Defaults to <code>gl.TRIANGLES</code></p></td>
</tr>
<tr>
<td class="name"><code>count</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An optional count. Defaults to bufferInfo.numElements</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An optional offset. Defaults to 0.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".drawObjectList"><span class="type-signature">(static) </span>drawObjectList<span class="signature">(objectsToDraw)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Draws a list of objects</p>
</div>
<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>objectsToDraw</code></td>
<td class="type">
<span class="param-type">Array.&lt;DrawObject></span>
</td>
<td class="description last"><p>an array of objects to draw.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".getContext"><span class="type-signature">(static) </span>getContext<span class="signature">(canvas, opt_attribs<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {WebGLRenderingContext}</span></h4>
<div class="description">
<p>Gets a WebGL context. Will create a WebGL2 context if possible.</p>
<p>You can check if it's WebGL2 with</p>
<p> function isWebGL2(gl) {<br> return gl.getParameter(gl.VERSION).indexOf(&quot;WebGL 2.0 &quot;) == 0;<br> }</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">HTMLCanvasElement</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>a canvas element.</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">WebGLContextCreationAttirbutes</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>optional webgl context creation attributes</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created context.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLRenderingContext</span>
</dd>
</dl>
<h4 class="name" id=".getWebGLContext"><span class="type-signature">(static) </span>getWebGLContext<span class="signature">(canvas, opt_attribs<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Gets a WebGL context.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">HTMLCanvasElement</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>a canvas element.</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">WebGLContextCreationAttirbutes</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>optional webgl context creation attributes</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".resizeCanvasToDisplaySize"><span class="type-signature">(static) </span>resizeCanvasToDisplaySize<span class="signature">(canvas, multiplier<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
<div class="description">
<p>Resize a canvas to match the size it's displayed.</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>canvas</code></td>
<td class="type">
<span class="param-type">HTMLCanvasElement</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The canvas to resize.</p></td>
</tr>
<tr>
<td class="name"><code>multiplier</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>So you can pass in <code>window.devicePixelRatio</code> if you want to.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>true if the canvas was resized.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
<h4 class="name" id=".resizeFramebufferInfo"><span class="type-signature">(static) </span>resizeFramebufferInfo<span class="signature">(gl, framebufferInfo, attachments<span class="signature-attributes">opt</span>, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Resizes the attachments of a framebuffer.</p>
<p>You need to pass in the same <code>attachments</code> as you passed in <code>module:twgl.createFramebuffer</code><br>because TWGL has no idea the format/type of each attachment.</p>
<p>The simplest usage</p>
<pre class="prettyprint source"><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
var fbi = twgl.createFramebuffer(gl);
...
function render() {
if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
// resize the attachments
twgl.resizeFramebufferInfo(gl, fbi);
}</code></pre><p>More complex usage</p>
<pre class="prettyprint source"><code>// create an RGB565 renderbuffer and a STENCIL_INDEX8 renderbuffer
var attachments = [
{ format: RGB565, mag: NEAREST },
{ format: STENCIL_INDEX8 },
]
var fbi = twgl.createFramebuffer(gl, attachments);
...
function render() {
if (twgl.resizeCanvasToDisplaySize(gl.canvas)) {
// resize the attachments to match
twgl.resizeFramebufferInfo(gl, fbi, attachments);
}</code></pre>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>framebufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.FramebufferInfo">module:twgl.FramebufferInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>a framebufferInfo as returned from <code>module:twgl.createFramebuffer</code>.</p></td>
</tr>
<tr>
<td class="name"><code>attachments</code></td>
<td class="type">
<span class="param-type">Array.&lt;<a href="module-twgl.html#.AttachmentOptions">module:twgl.AttachmentOptions</a>></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the same attachments options as passed to <code>module:twgl.createFramebuffer</code>.</p></td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the width for the attachments. Default = size of drawingBuffer</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the height for the attachments. Defautt = size of drawingBuffer</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".resizeTexture"><span class="type-signature">(static) </span>resizeTexture<span class="signature">(gl, tex, options, width<span class="signature-attributes">opt</span>, height<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Resizes a texture based on the options passed in.</p>
<p>Note: This is not a generic resize anything function.<br>It's mostly used by <a href="module-twgl.html#.resizeFramebufferInfo"><code>module:twgl.resizeFramebufferInfo</code></a><br>It will use <code>options.src</code> if it exists to try to determine a <code>type</code><br>otherwise it will assume <code>gl.UNSIGNED_BYTE</code>. No data is provided<br>for the texture. Texture parameters will be set accordingly</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>tex</code></td>
<td class="type">
<span class="param-type">WebGLTexture</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the texture to resize</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A TextureOptions object with whatever parameters you want set.</p></td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the new width. If not passed in will use <code>options.width</code></p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the new height. If not passed in will use <code>options.height</code></p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".setAttribInfoBufferFromArray"><span class="type-signature">(static) </span>setAttribInfoBufferFromArray<span class="signature">(gl, attribInfo, array, offset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets the contents of a buffer attached to an attribInfo</p>
<p>This is helper function to dynamically update a buffer.</p>
<p>Let's say you make a bufferInfo</p>
<pre class="prettyprint source"><code>var arrays = {
position: new Float32Array([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]),
texcoord: new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]),
normal: new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]),
indices: new Uint16Array([0, 1, 2, 1, 2, 3]),
};
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);</code></pre><p> And you want to dynamically upate the positions. You could do this</p>
<pre class="prettyprint source"><code>// assuming arrays.position has already been updated with new data.
twgl.setAttribInfoBufferFromArray(gl, bufferInfo.attribs.position, arrays.position);</code></pre>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>attribInfo</code></td>
<td class="type">
<span class="param-type">AttribInfo</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The attribInfo who's buffer contents to set. NOTE: If you have an attribute prefix<br> the name of the attribute will include the prefix.</p></td>
</tr>
<tr>
<td class="name"><code>array</code></td>
<td class="type">
<span class="param-type">ArraySpec</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Note: it is arguably ineffient to pass in anything but a typed array because anything<br> else will have to be converted to a typed array before it can be used by WebGL. During init time that<br> inefficiency is usually not important but if you're updating data dynamically best to be efficient.</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>an optional offset into the buffer. This is only an offset into the WebGL buffer<br> not the array. To pass in an offset into the array itself use a typed array and create an <code>ArrayBufferView</code><br> for the portion of the array you want to use.</p>
<pre class="prettyprint source"><code> var someArray = new Float32Array(1000); // an array with 1000 floats
var someSubArray = new Float32Array(someArray.buffer, offsetInBytes, sizeInUnits); // a view into someArray</code></pre><p> Now you can pass <code>someSubArray</code> into setAttribInfoBufferFromArray`</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<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>
<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"><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></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">Object.&lt;string, ?></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>
<dl class="details">
</dl>
<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>var programInfo = createProgramInfo(
gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);
var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
};
var bufferInfo = createBufferInfoFromArrays(gl, arrays);
gl.useProgram(programInfo.program);</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>
<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">WebGLRenderingContext</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"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
|
<span class="param-type">Object.&lt;string, function()></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"><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></span>
|
<span class="param-type">module:twgl.vertexArrayInfo</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 <a href="module-twgl.html#.createVertexArrayInfo"><code>module:twgl.createVertexArrayInfo</code></a></p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".setDefaults"><span class="type-signature">(static) </span>setDefaults<span class="signature">(newDefaults)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets various defaults for twgl.</p>
<p>In the interest of terseness which is kind of the point<br>of twgl I've integrated a few of the older functions here</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>newDefaults</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.Defaults">module:twgl.Defaults</a></span>
</td>
<td class="description last"><p>The default settings.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".setTextureFromArray"><span class="type-signature">(static) </span>setTextureFromArray<span class="signature">(gl, tex, src, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Sets a texture from an array or typed array. If the width or height is not provided will attempt to<br>guess the size. See <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>tex</code></td>
<td class="type">
<span class="param-type">WebGLTexture</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the WebGLTexture to set parameters for</p></td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
|
<span class="param-type">ArrayBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>An array or typed arry with texture data.</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A TextureOptions object with whatever parameters you want set.<br> This is often the same options you passed in when you created the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<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>
<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">WebGL2RenderingContext</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"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
|
<span class="param-type"><a href="module-twgl.html#.UniformBlockSpec">module:twgl.UniformBlockSpec</a></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"><a href="module-twgl.html#.UniformBlockInfo">module:twgl.UniformBlockInfo</a></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>
<dl class="details">
</dl>
<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>var programInfo = createProgramInfo(
gl, [&quot;some-vs&quot;, &quot;some-fs&quot;]);
var tex1 = gl.createTexture();
var tex2 = gl.createTexture();
... assume we setup the textures with data ...
var uniforms = {
u_someSampler: tex1,
u_someOtherSampler: tex2,
u_someColor: [1,0,0,1],
u_somePosition: [0,1,1],
u_someMatrix: [
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,0,
],
};
gl.useProgram(program);</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>var uniforms = {
u_someSampler: tex1,
u_someOtherSampler: tex2,
};
var moreUniforms {
u_someColor: [1,0,0,1],
u_somePosition: [0,1,1],
u_someMatrix: [
1,0,0,0,
0,1,0,0,
0,0,1,0,
0,0,0,0,
],
};
twgl.setUniforms(programInfo, uniforms);
twgl.setUniforms(programInfo, moreUniforms);</code></pre>
</div>
<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"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
|
<span class="param-type">Object.&lt;string, function()></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">Object.&lt;string, ?></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>var sharedUniforms = {
u_fogNear: 10,
u_projection: ...
...
};
var 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>
<dl class="details">
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<h4 class="name" id=".Arrays">Arrays</h4>
<div class="description">
<p>This is a JavaScript object of arrays by name. The names should match your shader's attributes. If your<br>attributes have a common prefix you can specify it by calling <code>module:twgl.setAttributePrefix</code>.</p>
<pre class="prettyprint source"><code>Bare JavaScript Arrays
var arrays = {
position: [-1, 1, 0],
normal: [0, 1, 0],
...
}
Bare TypedArrays
var arrays = {
position: new Float32Array([-1, 1, 0]),
color: new Uint8Array([255, 128, 64, 255]),
...
}</code></pre><ul>
<li><p>Will guess at <code>numComponents</code> if not specified based on name.</p>
<p>If <code>coord</code> is in the name assumes <code>numComponents = 2</code></p>
<p>If <code>color</code> is in the name assumes <code>numComponents = 4</code></p>
<p>otherwise assumes <code>numComponents = 3</code></p>
</li>
</ul>
<p>Objects with various fields. See <a href="module-twgl.html#.FullArraySpec"><code>module:twgl.FullArraySpec</code></a>.</p>
<pre class="prettyprint source"><code>var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
normal: { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], },
indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
};</code></pre>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#.ArraySpec">module:twgl.ArraySpec</a>></span>
</li>
</ul>
<dl class="details">
</dl>
<h4 class="name" id=".ArraySpec">ArraySpec</h4>
<div class="description">
<p>An individual array in <a href="module-twgl.html#.Arrays"><code>module:twgl.Arrays</code></a></p>
<p>When passed to <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a> if an ArraySpec is <code>number[]</code> or <code>ArrayBuffer</code><br>the types will be guessed based on the name. <code>indices</code> will be <code>Uint16Array</code>, everything else will<br>be <code>Float32Array</code></p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Array.&lt;number></span>
|
<span class="param-type">ArrayBuffer</span>
|
<span class="param-type"><a href="module-twgl.html#.FullArraySpec">module:twgl.FullArraySpec</a></span>
</li>
</ul>
<dl class="details">
</dl>
<h4 class="name" id=".AttachmentOptions">AttachmentOptions</h4>
<div class="description">
<p>The options for a framebuffer attachment.</p>
<p>Note: For a <code>format</code> that is a texture include all the texture<br>options from <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a> for example<br><code>min</code>, <code>mag</code>, <code>clamp</code>, etc... Note that unlike <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a><br><code>auto</code> defaults to <code>false</code> for attachment textures but <code>min</code> and <code>mag</code> default<br>to <code>gl.LINEAR</code> and <code>wrap</code> defaults to <code>CLAMP_TO_EDGE</code></p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<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>attach</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The attachment point. Defaults<br> to <code>gl.COLOR_ATTACTMENT0 + ndx</code> unless type is a depth or stencil type<br> then it's gl.DEPTH_ATTACHMENT or <code>gl.DEPTH_STENCIL_ATTACHMENT</code> depending<br> on the format or attachment type.</p></td>
</tr>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The format. If one of <code>gl.RGBA4</code>,<br> <code>gl.RGB565</code>, <code>gl.RGB5_A1</code>, <code>gl.DEPTH_COMPONENT16</code>,<br> <code>gl.STENCIL_INDEX8</code> or <code>gl.DEPTH_STENCIL</code> then will create a<br> renderbuffer. Otherwise will create a texture. Default = <code>gl.RGBA</code></p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The type. Used for texture. Default = <code>gl.UNSIGNED_BYTE</code>.</p></td>
</tr>
<tr>
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The texture target for <code>gl.framebufferTexture2D</code>.<br> Defaults to <code>gl.TEXTURE_2D</code>. Set to appropriate face for cube maps.</p></td>
</tr>
<tr>
<td class="name"><code>level</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>level for <code>gl.framebufferTexture2D</code>. Defaults to 0.</p></td>
</tr>
<tr>
<td class="name"><code>attachment</code></td>
<td class="type">
<span class="param-type">WebGLObject</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An existing renderbuffer or texture.<br> If provided will attach this Object. This allows you to share<br> attachemnts across framebuffers.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".AttribInfo">AttribInfo</h4>
<div class="description">
<p>The info for an attribute. This is effectively just the arguments to <code>gl.vertexAttribPointer</code> plus the WebGLBuffer<br>for the attribute.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<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>numComponents</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the number of components for this attribute.</p></td>
</tr>
<tr>
<td class="name"><code>size</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>synonym for <code>numComponents</code>.</p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the type of the attribute (eg. <code>gl.FLOAT</code>, <code>gl.UNSIGNED_BYTE</code>, etc...) Default = <code>gl.FLOAT</code></p></td>
</tr>
<tr>
<td class="name"><code>normalized</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>whether or not to normalize the data. Default = false</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>offset into buffer in bytes. Default = 0</p></td>
</tr>
<tr>
<td class="name"><code>stride</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the stride in bytes per element. Default = 0</p></td>
</tr>
<tr>
<td class="name"><code>buffer</code></td>
<td class="type">
<span class="param-type">WebGLBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>the buffer that contains the data for this attribute</p></td>
</tr>
<tr>
<td class="name"><code>drawType</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the draw type passed to gl.bufferData. Default = gl.STATIC_DRAW</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".BlockSpec">BlockSpec</h4>
<div class="description">
<p>The specification for one UniformBlockObject</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>index</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The index of the block.</p></td>
</tr>
<tr>
<td class="name"><code>size</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The size in bytes needed for the block</p></td>
</tr>
<tr>
<td class="name"><code>uniformIndices</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
</td>
<td class="description last"><p>The indices of the uniforms used by the block. These indices<br> correspond to entries in a UniformData array in the <a href="module-twgl.html#.UniformBlockSpec"><code>module:twgl.UniformBlockSpec</code></a>.</p></td>
</tr>
<tr>
<td class="name"><code>usedByVertexShader</code></td>
<td class="type">
<span class="param-type">bool</span>
</td>
<td class="description last"><p>Self explanitory</p></td>
</tr>
<tr>
<td class="name"><code>usedByFragmentShader</code></td>
<td class="type">
<span class="param-type">bool</span>
</td>
<td class="description last"><p>Self explanitory</p></td>
</tr>
<tr>
<td class="name"><code>used</code></td>
<td class="type">
<span class="param-type">bool</span>
</td>
<td class="description last"><p>Self explanitory</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".BufferInfo">BufferInfo</h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>numElements</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of elements to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>.</p></td>
</tr>
<tr>
<td class="name"><code>elementType</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The type of indices <code>UNSIGNED_BYTE</code>, <code>UNSIGNED_SHORT</code> etc..</p></td>
</tr>
<tr>
<td class="name"><code>indices</code></td>
<td class="type">
<span class="param-type">WebGLBuffer</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The indices <code>ELEMENT_ARRAY_BUFFER</code> if any indices exist.</p></td>
</tr>
<tr>
<td class="name"><code>attribs</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#.AttribInfo">module:twgl.AttribInfo</a>></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The attribs approriate to call <code>setAttributes</code></p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".CubemapReadyCallback"><span class="type-signature"></span>CubemapReadyCallback<span class="signature">(err, tex, imgs)</span><span class="type-signature"></span></h4>
<div class="description">
<p>A callback for when an image finished downloading and been uploaded into a texture</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>err</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"><p>If truthy there was an error.</p></td>
</tr>
<tr>
<td class="name"><code>tex</code></td>
<td class="type">
<span class="param-type">WebGLTexture</span>
</td>
<td class="description last"><p>the texture.</p></td>
</tr>
<tr>
<td class="name"><code>imgs</code></td>
<td class="type">
<span class="param-type">Array.&lt;HTMLImageElement></span>
</td>
<td class="description last"><p>the images for each face.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".Defaults">Defaults</h4>
<div class="description">
<p>Various default settings for twgl.</p>
<p>Note: You can call this any number of times. Example:</p>
<pre class="prettyprint source"><code>twgl.setDefaults({ textureColor: [1, 0, 0, 1] });
twgl.setDefaults({ attribPrefix: 'a_' });</code></pre><p>is equivalent to</p>
<pre class="prettyprint source"><code>twgl.setDefaults({
textureColor: [1, 0, 0, 1],
attribPrefix: 'a_',
});</code></pre>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attribPrefix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The prefix to stick on attributes</p>
<p> When writing shaders I prefer to name attributes with <code>a_</code>, uniforms with <code>u_</code> and varyings with <code>v_</code><br> as it makes it clear where they came from. But, when building geometry I prefer using unprefixed names.</p>
<p> In otherwords I'll create arrays of geometry like this</p>
<pre class="prettyprint source"><code> var arrays = {
position: ...
normal: ...
texcoord: ...
};</code></pre><p> But need those mapped to attributes and my attributes start with <code>a_</code>.</p>
<p> Default: <code>&quot;&quot;</code></p></td>
</tr>
<tr>
<td class="name"><code>textureColor</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
</td>
<td class="description last"><p>Array of 4 values in the range 0 to 1</p>
<p> The default texture color is used when loading textures from<br> urls. Because the URL will be loaded async we'd like to be<br> able to use the texture immediately. By putting a 1x1 pixel<br> color in the texture we can start using the texture before<br> the URL has loaded.</p>
<p> Default: <code>[0.5, 0.75, 1, 1]</code></p></td>
</tr>
<tr>
<td class="name"><code>crossOrigin</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>If not undefined sets the crossOrigin attribute on images<br> that twgl creates when downloading images for textures.</p>
<p> Also see <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p></td>
</tr>
<tr>
<td class="name"><code>enableVertexArrayObjects</code></td>
<td class="type">
<span class="param-type">bool</span>
</td>
<td class="description last"><p>If true then in WebGL 1.0 will attempt to get the <code>OES_vertex_array_object</code> extension.<br> If successful it will copy create/bind/delete/isVertexArrayOES from the extension to<br> the WebGLRenderingContext removing the OES at the end which is the standard entry point<br> for WebGL 2.</p>
<p> Note: According to webglstats.com 90% of devices support <code>OES_vertex_array_object</code>.<br> If you just want to count on support I suggest using <a href="https://github.com/KhronosGroup/WebGL/blob/master/sdk/demos/google/resources/OESVertexArrayObject.js">this polyfill</a><br> or ignoring devices that don't support them.</p>
<p> Default: <code>true</code></p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".DrawObject">DrawObject</h4>
<div class="description">
<p>A DrawObject is useful for putting objects in to an array and passing them to <a href="module-twgl.html#.drawObjectList"><code>module:twgl.drawObjectList</code></a>.</p>
<p>You need either a <code>BufferInfo</code> or a <code>VertexArrayInfo</code>.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>active</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>whether or not to draw. Default = <code>true</code> (must be <code>false</code> to be not true). In otherwords <code>undefined</code> = <code>true</code></p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>type to draw eg. <code>gl.TRIANGLES</code>, <code>gl.LINES</code>, etc...</p></td>
</tr>
<tr>
<td class="name"><code>programInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.ProgramInfo">module:twgl.ProgramInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A ProgramInfo as returned from <a href="module-twgl.html#.createProgramInfo"><code>module:twgl.createProgramInfo</code></a></p></td>
</tr>
<tr>
<td class="name"><code>bufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A BufferInfo as returned from <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a></p></td>
</tr>
<tr>
<td class="name"><code>vertexArrayInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.VertexArrayInfo">module:twgl.VertexArrayInfo</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A VertexArrayInfo as returned from <a href="module-twgl.html#.createVertexArrayInfo"><code>module:twgl.createVertexArrayInfo</code></a></p></td>
</tr>
<tr>
<td class="name"><code>uniforms</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, ?></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The values for the uniforms.<br> You can pass multiple objects by putting them in an array. For example</p>
<pre class="prettyprint source"><code>var sharedUniforms = {
u_fogNear: 10,
u_projection: ...
...
};
var localUniforms = {
u_world: ...
u_diffuseColor: ...
};
var drawObj = {
...
uniforms: [sharedUniforms, localUniforms],
};</code></pre></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the offset to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>. Defaults to 0.</p></td>
</tr>
<tr>
<td class="name"><code>count</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the count to pass to <code>gl.drawArrays</code> or <code>gl.drawElemnts</code>. Defaults to bufferInfo.numElements.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".ErrorCallback"><span class="type-signature"></span>ErrorCallback<span class="signature">(msg, lineOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
<div class="description">
<p>Error Callback</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>msg</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>error message.</p></td>
</tr>
<tr>
<td class="name"><code>lineOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>amount to add to line number</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".FramebufferInfo">FramebufferInfo</h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>framebuffer</code></td>
<td class="type">
<span class="param-type">WebGLFramebuffer</span>
</td>
<td class="description last"><p>The WebGLFramebuffer for this framebufferInfo</p></td>
</tr>
<tr>
<td class="name"><code>attachments</code></td>
<td class="type">
<span class="param-type">Array.&lt;WebGLObject></span>
</td>
<td class="description last"><p>The created attachments in the same order as passed in to <a href="module-twgl.html#.createFramebufferInfo"><code>module:twgl.createFramebufferInfo</code></a>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".FullArraySpec">FullArraySpec</h4>
<div class="description">
<p>Use this type of array spec when TWGL can't guess the type or number of compoments of an array</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<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>data</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
|
<span class="param-type">ArrayBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The data of the array.</p></td>
</tr>
<tr>
<td class="name"><code>numComponents</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>number of components for <code>vertexAttribPointer</code>. Default is based on the name of the array.<br> If <code>coord</code> is in the name assumes <code>numComponents = 2</code>.<br> If <code>color</code> is in the name assumes <code>numComponents = 4</code>.<br> otherwise assumes <code>numComponents = 3</code></p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">constructor</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The type. This is only used if <code>data</code> is a JavaScript array. It is the constructor for the typedarray. (eg. <code>Uint8Array</code>).<br>For example if you want colors in a <code>Uint8Array</code> you might have a <code>FullArraySpec</code> like <code>{ type: Uint8Array, data: [255,0,255,255, ...], }</code>.</p></td>
</tr>
<tr>
<td class="name"><code>size</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>synonym for <code>numComponents</code>.</p></td>
</tr>
<tr>
<td class="name"><code>normalize</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>normalize for <code>vertexAttribPointer</code>. Default is true if type is <code>Int8Array</code> or <code>Uint8Array</code> otherwise false.</p></td>
</tr>
<tr>
<td class="name"><code>stride</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>stride for <code>vertexAttribPointer</code>. Default = 0</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>offset for <code>vertexAttribPointer</code>. Default = 0</p></td>
</tr>
<tr>
<td class="name"><code>attrib</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>name of attribute this array maps to. Defaults to same name as array prefixed by the default attribPrefix.</p></td>
</tr>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>synonym for <code>attrib</code>.</p></td>
</tr>
<tr>
<td class="name"><code>attribName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>synonym for <code>attrib</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".ProgramInfo">ProgramInfo</h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>program</code></td>
<td class="type">
<span class="param-type">WebGLProgram</span>
</td>
<td class="description last"><p>A shader program</p></td>
</tr>
<tr>
<td class="name"><code>uniformSetters</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, function()></span>
</td>
<td class="description last"><p>object of setters as returned from createUniformSetters,</p></td>
</tr>
<tr>
<td class="name"><code>attribSetters</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, function()></span>
</td>
<td class="description last"><p>object of setters as returned from createAttribSetters,</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".TextureFunc"><span class="type-signature"></span>TextureFunc<span class="signature">(gl, options)</span><span class="type-signature"> &rarr; {*}</span></h4>
<div class="description">
<p>A function to generate the source for a texture.</p>
</div>
<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">WebGLRenderingContext</span>
</td>
<td class="description last"><p>A WebGLRenderingContext</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureOptions">module:twgl.TextureOptions</a></span>
</td>
<td class="description last"><p>the texture options</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>Returns any of the things documentented for <code>src</code> for <a href="module-twgl.html#.TextureOptions"><code>module:twgl.TextureOptions</code></a>.</p>
</div>
<dl class="param-type">
<dt>
Type
</dt>
<dd>
<span class="param-type">*</span>
</dd>
</dl>
<h4 class="name" id=".TextureOptions">TextureOptions</h4>
<div class="description">
<p>Texture options passed to most texture functions. Each function will use whatever options<br>are appropriate for its needs. This lets you pass the same options to all functions.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>target</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the type of texture <code>gl.TEXTURE_2D</code> or <code>gl.TEXTURE_CUBE_MAP</code>. Defaults to <code>gl.TEXTURE_2D</code>.</p></td>
</tr>
<tr>
<td class="name"><code>width</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the width of the texture. Only used if src is an array or typed array or null.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the height of a texture. Only used if src is an array or typed array or null.</p></td>
</tr>
<tr>
<td class="name"><code>depth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the depth of a texture. Only used if src is an array or type array or null and target is <code>TEXTURE_3D</code> .</p></td>
</tr>
<tr>
<td class="name"><code>min</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the min filter setting (eg. <code>gl.LINEAR</code>). Defaults to <code>gl.NEAREST_MIPMAP_LINEAR</code><br> or if texture is not a power of 2 on both dimensions then defaults to <code>gl.LINEAR</code>.</p></td>
</tr>
<tr>
<td class="name"><code>mag</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the mag filter setting (eg. <code>gl.LINEAR</code>). Defaults to <code>gl.LINEAR</code></p></td>
</tr>
<tr>
<td class="name"><code>internalFormat</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>internal format for texture. Defaults to <code>gl.RGBA</code></p></td>
</tr>
<tr>
<td class="name"><code>format</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>format for texture. Defaults to <code>gl.RGBA</code>.</p></td>
</tr>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>type for texture. Defaults to <code>gl.UNSIGNED_BYTE</code> unless <code>src</code> is ArrayBuffer. If <code>src</code><br> is ArrayBuffer defaults to type that matches ArrayBuffer type.</p></td>
</tr>
<tr>
<td class="name"><code>wrap</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Texture wrapping for both S and T (and R if TEXTURE_3D). Defaults to <code>gl.REPEAT</code> for 2D unless src is WebGL1 and src not npot and <code>gl.CLAMP_TO_EDGE</code> for cube</p></td>
</tr>
<tr>
<td class="name"><code>wrapS</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Texture wrapping for S. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
</tr>
<tr>
<td class="name"><code>wrapT</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Texture wrapping for T. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
</tr>
<tr>
<td class="name"><code>wrapR</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Texture wrapping for R. Defaults to <code>gl.REPEAT</code> and <code>gl.CLAMP_TO_EDGE</code> for cube. If set takes precedence over <code>wrap</code>.</p></td>
</tr>
<tr>
<td class="name"><code>minLod</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>TEXTURE_MIN_LOD setting</p></td>
</tr>
<tr>
<td class="name"><code>maxLod</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>TEXTURE_MAX_LOD setting</p></td>
</tr>
<tr>
<td class="name"><code>baseLevel</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>TEXTURE_BASE_LEVEL setting</p></td>
</tr>
<tr>
<td class="name"><code>maxLevel</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>TEXTURE_MAX_LEVEL setting</p></td>
</tr>
<tr>
<td class="name"><code>unpackAlignment</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The <code>gl.UNPACK_ALIGNMENT</code> used when uploading an array. Defaults to 1.</p></td>
</tr>
<tr>
<td class="name"><code>premultiplyAlpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Whether or not to premultiply alpha. Defaults to whatever the current setting is.<br> This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br> the current setting for specific textures.</p></td>
</tr>
<tr>
<td class="name"><code>flipY</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Whether or not to flip the texture vertically on upload. Defaults to whatever the current setting is.<br> This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br> the current setting for specific textures.</p></td>
</tr>
<tr>
<td class="name"><code>colorspaceConversion</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Whether or not to let the browser do colorspace conversion of the texture on upload. Defaults to whatever the current setting is.<br> This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override<br> the current setting for specific textures.</p></td>
</tr>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
|
<span class="param-type">ArrayBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>color used as temporary 1x1 pixel color for textures loaded async when src is a string.<br> If it's a JavaScript array assumes color is 0 to 1 like most GL colors as in <code>[1, 0, 0, 1] = red=1, green=0, blue=0, alpha=0</code>.<br> Defaults to <code>[0.5, 0.75, 1, 1]</code>. See <code>module:twgl.setDefaultTextureColor</code>. If <code>false</code> texture is set. Can be used to re-load a texture</p></td>
</tr>
<tr>
<td class="name"><code>auto</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>If not <code>false</code> then texture working filtering is set automatically for non-power of 2 images and<br> mips are generated for power of 2 images.</p></td>
</tr>
<tr>
<td class="name"><code>cubeFaceOrder</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The order that cube faces are pulled out of an img or set of images. The default is</p>
<pre class="prettyprint source"><code>[gl.TEXTURE_CUBE_MAP_POSITIVE_X,
gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]</code></pre></td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">Array.&lt;number></span>
|
<span class="param-type">ArrayBuffer</span>
|
<span class="param-type">HTMLCanvasElement</span>
|
<span class="param-type">HTMLImageElement</span>
|
<span class="param-type">HTMLVideoElement</span>
|
<span class="param-type">string</span>
|
<span class="param-type">Array.&lt;string></span>
|
<span class="param-type"><a href="module-twgl.html#.TextureFunc">module:twgl.TextureFunc</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>source for texture</p>
<p> If <code>string</code> then it's assumed to be a URL to an image. The image will be downloaded async. A usable<br> 1x1 pixel texture will be returned immediatley. The texture will be updated once the image has downloaded.<br> If <code>target</code> is <code>gl.TEXTURE_CUBE_MAP</code> will attempt to divide image into 6 square pieces. 1x6, 6x1, 3x2, 2x3.<br> The pieces will be uploaded in <code>cubeFaceOrder</code></p>
<p> If <code>string[]</code> then it must have 6 entries, one for each face of a cube map. Target must be <code>gl.TEXTURE_CUBE_MAP</code>.</p>
<p> If <code>HTMLElement</code> then it wil be used immediately to create the contents of the texture. Examples <code>HTMLImageElement</code>,<br> <code>HTMLCanvasElement</code>, <code>HTMLVideoElement</code>.</p>
<p> If <code>number[]</code> or <code>ArrayBuffer</code> it's assumed to be data for a texture. If <code>width</code> or <code>height</code> is<br> not specified it is guessed as follows. First the number of elements is computed by <code>src.length / numComponets</code><br> where <code>numComponents</code> is derived from <code>format</code>. If <code>target</code> is <code>gl.TEXTURE_CUBE_MAP</code> then <code>numElements</code> is divided<br> by 6. Then</p>
<ul>
<li><p>If neither <code>width</code> nor <code>height</code> are specified and <code>sqrt(numElements)</code> is an integer then width and height<br>are set to <code>sqrt(numElements)</code>. Otherwise <code>width = numElements</code> and <code>height = 1</code>.</p>
</li>
<li><p>If only one of <code>width</code> or <code>height</code> is specified then the other equals <code>numElements / specifiedDimension</code>.</p>
</li>
</ul>
<p>If <code>number[]</code> will be converted to <code>type</code>.</p>
<p>If <code>src</code> is a function it will be called with a <code>WebGLRenderingContext</code> and these options.<br>Whatever it returns is subject to these rules. So it can return a string url, an <code>HTMLElement</code><br>an array etc...</p>
<p>If <code>src</code> is undefined then an empty texture will be created of size <code>width</code> by <code>height</code>.</p></td>
</tr>
<tr>
<td class="name"><code>crossOrigin</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>What to set the crossOrigin property of images when they are downloaded.<br> default: undefined. Also see <a href="module-twgl.html#.setDefaults"><code>module:twgl.setDefaults</code></a>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".TextureReadyCallback"><span class="type-signature"></span>TextureReadyCallback<span class="signature">(err, texture, souce)</span><span class="type-signature"></span></h4>
<div class="description">
<p>A callback for when an image finished downloading and been uploaded into a texture</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>err</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"><p>If truthy there was an error.</p></td>
</tr>
<tr>
<td class="name"><code>texture</code></td>
<td class="type">
<span class="param-type">WebGLTexture</span>
</td>
<td class="description last"><p>the texture.</p></td>
</tr>
<tr>
<td class="name"><code>souce</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#.TextureSrc">module:twgl.TextureSrc</a></span>
</td>
<td class="description last"><p>image(s) used to as the src for the texture</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".TextureSrc">TextureSrc</h4>
<div class="description">
<p>The src image(s) used to create a texture.</p>
<p>When you call <a href="module-twgl.html#.createTexture"><code>module:twgl.createTexture</code></a> or <a href="module-twgl.html#.createTextures"><code>module:twgl.createTextures</code></a><br>you can pass in urls for images to load into the textures. If it's a single url<br>then this will be a single HTMLImageElement. If it's an array of urls used for a cubemap<br>this will be a corresponding array of images for the cubemap.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">HTMLImageElement</span>
|
<span class="param-type">Array.&lt;HTMLImageElement></span>
</li>
</ul>
<dl class="details">
</dl>
<h4 class="name" id=".TexturesReadyCallback"><span class="type-signature"></span>TexturesReadyCallback<span class="signature">(err, textures, sources)</span><span class="type-signature"></span></h4>
<div class="description">
<p>A callback for when all images have finished downloading and been uploaded into their respective textures</p>
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>err</code></td>
<td class="type">
<span class="param-type">*</span>
</td>
<td class="description last"><p>If truthy there was an error.</p></td>
</tr>
<tr>
<td class="name"><code>textures</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, WebGLTexture></span>
</td>
<td class="description last"><p>the created textures by name. Same as returned by <a href="module-twgl.html#.createTextures"><code>module:twgl.createTextures</code></a>.</p></td>
</tr>
<tr>
<td class="name"><code>sources</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#.TextureSrc">module:twgl.TextureSrc</a>></span>
</td>
<td class="description last"><p>the image(s) used for the texture by name.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".UniformBlockInfo">UniformBlockInfo</h4>
<div class="description">
<p>Represents a UniformBlockObject including an ArrayBuffer with all the uniform values<br>and a corresponding WebGLBuffer to hold those values on the GPU</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The name of the block</p></td>
</tr>
<tr>
<td class="name"><code>array</code></td>
<td class="type">
<span class="param-type">ArrayBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The array buffer that contains the uniform values</p></td>
</tr>
<tr>
<td class="name"><code>asFloat</code></td>
<td class="type">
<span class="param-type">Float32Array</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A float view on the array buffer. This is useful<br> inspecting the contents of the buffer in the debugger.</p></td>
</tr>
<tr>
<td class="name"><code>buffer</code></td>
<td class="type">
<span class="param-type">WebGLBuffer</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A WebGL buffer that will hold a copy of the uniform values for rendering.</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>offset into buffer</p></td>
</tr>
<tr>
<td class="name"><code>uniforms</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, ArrayBufferView></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A uniform name to ArrayBufferView map.<br> each Uniform has a correctly typed <code>ArrayBufferView</code> into array at the correct offset<br> and length of that uniform. So for example a float uniform would have a 1 float <code>Float32Array</code><br> view. A single mat4 would have a 16 element <code>Float32Array</code> view. An ivec2 would have an<br> <code>Int32Array</code> view, etc.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".UniformBlockSpec">UniformBlockSpec</h4>
<div class="description">
<p>A <code>UniformBlockSpec</code> represents the data needed to create and bind<br>UniformBlockObjects for a given program</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>{Object.<string,</code></td>
<td class="type">
</td>
<td class="description last"><p>module:twgl.BlockSpec&gt; blockSpecs The BlockSpec for each block by block name</p></td>
</tr>
<tr>
<td class="name"><code>uniformData</code></td>
<td class="type">
<span class="param-type">Array.&lt;UniformData></span>
</td>
<td class="description last"><p>An array of data for each uniform by uniform index.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".UniformData">UniformData</h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>type</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The WebGL type enum for this uniform</p></td>
</tr>
<tr>
<td class="name"><code>size</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The number of elements for this uniform</p></td>
</tr>
<tr>
<td class="name"><code>blockNdx</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The block index this uniform appears in</p></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The byte offset in the block for this uniform's value</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h4 class="name" id=".VertexArrayInfo">VertexArrayInfo</h4>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<h5 class="subsection-title">Properties:</h5>
<table class="props">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Attributes</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>numElements</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of elements to pass to <code>gl.drawArrays</code> or <code>gl.drawElements</code>.</p></td>
</tr>
<tr>
<td class="name"><code>elementType</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The type of indices <code>UNSIGNED_BYTE</code>, <code>UNSIGNED_SHORT</code> etc..</p></td>
</tr>
<tr>
<td class="name"><code>{WebGLVertexArrayObject></code></td>
<td class="type">
</td>
<td class="attributes">
</td>
<td class="description last"><p>[vertexArrayObject] a vertex array object</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</article>
</section>
</div>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.4.0</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