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 0fe29dc07e update docs
2015-10-09 18:14:43 +03:00

10195 lines
163 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TWGL Module: twgl</title>
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="index.html">TWGL</a>
<ul class="nav">
<li class="dropdown">
<a href="modules.list.html" class="dropdown-toggle" data-toggle="dropdown">Modules<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="module-twgl.html">twgl</a>
</li>
<li>
<a href="m4.html">twgl/m4</a>
</li>
<li>
<a href="primitives.html">twgl/primitives</a>
</li>
<li>
<a href="v3.html">twgl/v3</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<h1 class="page-title">Module: twgl</h1>
<section>
<header>
<h2>
twgl
</h2>
</header>
<article>
<div class="container-overview">
<div class="description"><p>The main TWGL module.</p></div>
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="createAttribsFromArrays"><span class="type-signature"> </span>createAttribsFromArrays<span class="signature">(gl, arrays)</span><span class="type-signature"> &rarr; {Object.&lt;string, <a href="module-twgl.html#AttribInfo">AttribInfo</a>>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a set of attribute data and WebGLBuffers from set of arrays</p>
<p>Given</p>
<pre><code> var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
normal: { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], },
color: { numComponents: 4, data: [255, 255, 255, 255, 255, 0, 0, 255, 0, 0, 255, 255], type: Uint8Array, },
indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
};</code></pre>
<p>returns something like</p>
<pre><code> var attribs = {
position: { numComponents: 3, type: gl.FLOAT, normalize: false, buffer: WebGLBuffer, },
texcoord: { numComponents: 2, type: gl.FLOAT, normalize: false, buffer: WebGLBuffer, },
normal: { numComponents: 3, type: gl.FLOAT, normalize: false, buffer: WebGLBuffer, },
color: { numComponents: 4, type: gl.UNSIGNED_BYTE, normalize: true, buffer: WebGLBuffer, },
};</code></pre>
<p>notes:</p>
<ul>
<li><p>Arrays can take various forms</p>
<p>Bare JavaScript Arrays</p>
<pre><code>var arrays = {
position: [-1, 1, 0],
normal: [0, 1, 0],
...
}</code></pre>
<p>Bare TypedArrays</p>
<pre><code>var arrays = {
position: new Float32Array([-1, 1, 0]),
color: new Uint8Array([255, 128, 64, 255]),
...
}</code></pre>
</li>
<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>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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>The webgl rendering context.</p></td>
</tr>
<tr>
<td class="name"><code>arrays</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#Arrays">Arrays</a></span>
</td>
<td class="description last"><p>The arrays</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the attribs</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#AttribInfo">AttribInfo</a>></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createAttributeSetters"><span class="type-signature"> </span>createAttributeSetters<span class="signature">(program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates setter functions for all attributes of a shader
program. You can pass this to <a href="module-twgl.html#setBuffersAndAttributes"><code>setBuffersAndAttributes</code></a> to set all your buffers and attributes.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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>the program to create setters for.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-twgl.html#setAttributes"><code>setAttributes</code></a> for example</li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>an object with a setter for each attribute by name.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, function()></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createAugmentedTypedArray"><span class="type-signature"> </span>createAugmentedTypedArray<span class="signature">(numComponents, numElements, opt_type)</span><span class="type-signature"> &rarr; {ArrayBuffer}</span></h4>
</dt>
<dd>
<div class="description">
<p>creates a typed array with a <code>push</code> function attached
so that you can easily <em>push</em> values.</p>
<p><code>push</code> can take multiple arguments. If an argument is an array each element
of the array will be added to the typed array.</p>
<p>Example:</p>
<pre><code>var array = createAugmentedTypedArray(3, 2); // creates a Float32Array with 6 values
array.push(1, 2, 3);
array.push([4, 5, 6]);
// array now contains [1, 2, 3, 4, 5, 6]</code></pre>
<p>Also has <code>numComponents</code> and <code>numElements</code> properties.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</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="description last"><p>number of components</p></td>
</tr>
<tr>
<td class="name"><code>numElements</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>number of elements. The total size of the array will be <code>numComponents * numElements</code>.</p></td>
</tr>
<tr>
<td class="name"><code>opt_type</code></td>
<td class="type">
<span class="param-type">constructor</span>
</td>
<td class="description last"><p>A constructor for the type. Default = <code>Float32Array</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A typed array.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">ArrayBuffer</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createBufferInfoFromArrays"><span class="type-signature"> </span>createBufferInfoFromArrays<span class="signature">(gl, arrays)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<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>setBuffersAndAttributes</code></a> and to
<code>module:twgl:drawBufferInfo</code>.</p>
<p>Given an object like</p>
<pre><code>var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
normal: { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], },
indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
};</code></pre>
<p> Creates an BufferInfo like this</p>
<pre><code>bufferInfo = {
numElements: 4, // or whatever the number of elements is
indices: WebGLBuffer, // this property will not exist if there are no indices
attribs: {
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
will be guessed.</p>
<pre><code>var arrays = {
position: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0],
texcoord: [0, 0, 0, 1, 1, 0, 1, 1],
normal: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1],
indices: [0, 1, 2, 1, 2, 3],
};</code></pre>
<p> They can also by TypedArrays</p>
<pre><code>var arrays = {
position: new Float32Array([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]),
texcoord: new Float32Array([0, 0, 0, 1, 1, 0, 1, 1]),
normal: new Float32Array([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]),
indices: new Uint16Array([0, 1, 2, 1, 2, 3]),
};</code></pre>
<p> Or augmentedTypedArrays</p>
<pre><code>var positions = createAugmentedTypedArray(3, 4);
var texcoords = createAugmentedTypedArray(2, 4);
var normals = createAugmentedTypedArray(3, 4);
var indices = createAugmentedTypedArray(3, 2, Uint16Array);
positions.push([0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0]);
texcoords.push([0, 0, 0, 1, 1, 0, 1, 1]);
normals.push([0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]);
indices.push([0, 1, 2, 1, 2, 3]);
var arrays = {
position: positions,
texcoord: texcoords,
normal: normals,
indices: indices,
};</code></pre>
<p>For the last example it is equivalent to</p>
<pre><code>var bufferInfo = {
attribs: {
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 table table-striped">
<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">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>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#BufferInfo">BufferInfo</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createBuffersFromArrays"><span class="type-signature"> </span>createBuffersFromArrays<span class="signature">({WebGLRenderingContext), arrays)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates buffers from typed arrays</p>
<p>Given something like this</p>
<pre><code>var arrays = {
positions: [1, 2, 3],
normals: [0, 0, 1],
}</code></pre>
<p>returns something like</p>
<pre><code>buffers = {
positions: WebGLBuffer,
normals: WebGLBuffer,
}</code></pre>
<p>If the buffer is named 'indices' it will be made an ELEMENT_ARRAY_BUFFER.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>{WebGLRenderingContext)</code></td>
<td class="type">
</td>
<td class="description last"><p>gl 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">Arrays</a></span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>returns an object with one WebGLBuffer per array</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createFramebufferInfo"><span class="type-signature"> </span>createFramebufferInfo<span class="signature">(gl, <span class="optional">attachments</span>, <span class="optional">width</span>, <span class="optional">height</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#FramebufferInfo">FramebufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a framebuffer and attachments.</p>
<p>This returns a <a href="module-twgl.html#FramebufferInfo"><code>FramebufferInfo</code></a> because it needs to return the attachments as well as the framebuffer.</p>
<p>The simplest usage</p>
<pre><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
var fbi = twgl.createFramebuffer(gl);</code></pre>
<p>More complex usage</p>
<pre><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><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>.
<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 table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">AttachmentOptions[]</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
<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>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#FramebufferInfo">FramebufferInfo</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createProgram"><span class="type-signature"> </span>createProgram<span class="signature">(shaders, <span class="optional">opt_attribs</span>, <span class="optional">opt_locations</span>, <span class="optional">opt_errorCallback</span>)</span><span class="type-signature"> &rarr; {WebGLProgram}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a program, attaches shaders, binds attrib locations, links the
program and calls useProgram.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>shaders</code></td>
<td class="type">
<span class="param-type">WebGLShader[]</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The shaders to attach</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">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">number[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The locations for the. A parallel array to opt_attribs letting you assign locations.</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">ErrorCallback</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>callback for errors. By default it just prints an error to the console
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 program or null if error.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLProgram</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createProgramFromScripts"><span class="type-signature"> </span>createProgramFromScripts<span class="signature">(gl, shaderScriptIds, <span class="optional">opt_attribs</span>, <span class="optional">opt_locations</span>, opt_errorCallback)</span><span class="type-signature"> &rarr; {WebGLProgram}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a program from 2 script tags.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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
to use.</p></td>
</tr>
<tr>
<td class="name"><code>shaderScriptIds</code></td>
<td class="type">
<span class="param-type">string[]</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Array of ids of the script
tags for the shaders. The first is assumed to be the
vertex shader, the second the fragment shader.</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">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">number[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The locations for the. A parallel array to opt_attribs letting you assign locations.</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">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
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 program.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLProgram</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createProgramFromSources"><span class="type-signature"> </span>createProgramFromSources<span class="signature">(gl, shaderSourcess, <span class="optional">opt_attribs</span>, <span class="optional">opt_locations</span>, opt_errorCallback)</span><span class="type-signature"> &rarr; {WebGLProgram}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a program from 2 sources.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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
to use.</p></td>
</tr>
<tr>
<td class="name"><code>shaderSourcess</code></td>
<td class="type">
<span class="param-type">string[]</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Array of sources for the
shaders. The first is assumed to be the vertex shader,
the second the fragment shader.</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">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">number[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The locations for the. A parallel array to opt_attribs letting you assign locations.</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">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
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 program.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLProgram</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createProgramInfo"><span class="type-signature"> </span>createProgramInfo<span class="signature">(gl, shaderSourcess, <span class="optional">opt_attribs</span>, <span class="optional">opt_locations</span>, opt_errorCallback)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#ProgramInfo">ProgramInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a ProgramInfo from 2 sources.</p>
<p>A ProgramInfo contains</p>
<pre><code>programInfo = {
program: WebGLProgram,
uniformSetters: object of setters as returned from createUniformSetters,
attribSetters: object of setters as returned from createAttribSetters,
}</code></pre>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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
to use.</p></td>
</tr>
<tr>
<td class="name"><code>shaderSourcess</code></td>
<td class="type">
<span class="param-type">string[]</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Array of sources for the
shaders or ids. The first is assumed to be the vertex shader,
the second the fragment shader.</p></td>
</tr>
<tr>
<td class="name"><code>opt_attribs</code></td>
<td class="type">
<span class="param-type">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">number[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The locations for the. A parallel array to opt_attribs letting you assign locations.</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">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
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 program.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type"><a href="module-twgl.html#ProgramInfo">ProgramInfo</a></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTexture"><span class="type-signature"> </span>createTexture<span class="signature">(gl, <span class="optional">options</span>, <span class="optional">callback</span>)</span><span class="type-signature"> &rarr; {WebGLTexture}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a texture based on the options passed in.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">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">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>
<dt>
Type
</dt>
<dd>
<span class="param-type">WebGLTexture</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTextures"><span class="type-signature"> </span>createTextures<span class="signature">(gl, options, <span class="optional">callback</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a bunch of textures based on the passed in options.</p>
<p>Example:</p>
<pre><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 table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">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">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>{Object.<string,WebGLTexture>) the created textures by name</p>
</div>
</dd>
<dt>
<h4 class="name" id="createUniformSetters"><span class="type-signature"> </span>createUniformSetters<span class="signature">(program)</span><span class="type-signature"> &rarr; {Object.&lt;string, function()>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates setter functions for all uniforms of a shader
program.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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>the program to create setters for.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-see">See:</dt>
<dd class="tag-see">
<ul>
<li><a href="module-twgl.html#setUniforms"><code>setUniforms</code></a></li>
</ul>
</dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>an object with a setter by name for each uniform</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, function()></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="drawBufferInfo"><span class="type-signature"> </span>drawBufferInfo<span class="signature">(gl, type, bufferInfo, <span class="optional">count</span>, <span class="optional">offset</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<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
but calling this means if you switch from indexed data to non-indexed
data you don't have to remember to update your draw call.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>type</code></td>
<td class="type">
<span class="param-type">enum</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>eg (gl.TRIANGLES, gl.LINES, gl.POINTS, gl.TRIANGLE_STRIP, ...)</p></td>
</tr>
<tr>
<td class="name"><code>bufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#BufferInfo">BufferInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>as returned from createBufferInfoFromArrays</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>
</dd>
<dt>
<h4 class="name" id="drawObjectList"><span class="type-signature"> </span>drawObjectList<span class="signature">(objectsToDraw)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Draws a list of objects</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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">DrawObject[]</span>
</td>
<td class="description last"><p>an array of objects to draw.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="getWebGLContext"><span class="type-signature"> </span>getWebGLContext<span class="signature">(canvas, <span class="optional">opt_attribs</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Gets a WebGL context.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>
</dd>
<dt>
<h4 class="name" id="loadCubemapFromUrls"><span class="type-signature"> </span>loadCubemapFromUrls<span class="signature">(gl, tex, options, <span class="optional">callback</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Loads a cubemap from 6 urls as specified in <code>options.src</code>. Will set the cubemap to a 1x1 pixel color
so that it is usable immediately unless <code>option.color === false</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">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>callback</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#CubemapReadyCallback">CubemapReadyCallback</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A function to be called when all the images have finished loading. err will
be non null if there was an error.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="loadTextureFromUrl"><span class="type-signature"> </span>loadTextureFromUrl<span class="signature">(gl, tex, <span class="optional">options</span>, <span class="optional">callback</span>)</span><span class="type-signature"> &rarr; {HTMLImageElement}</span></h4>
</dt>
<dd>
<div class="description">
<p>Loads a texture from an image from a Url as specified in <code>options.src</code>
If <code>options.color !== false</code> will set the texture to a 1x1 pixel color so that the texture is
immediately useable. It will be updated with the contents of the image once the image has finished
downloading. Filtering options will be set as approriate for image unless <code>options.auto === false</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">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">TextureReadyCallback</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A function to be called when the image has finished loading. err will
be non null if there was an error.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the image being downloaded.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">HTMLImageElement</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="resizeCanvasToDisplaySize"><span class="type-signature"> </span>resizeCanvasToDisplaySize<span class="signature">(canvas, <span class="optional">a</span>)</span><span class="type-signature"> &rarr; {boolean}</span></h4>
</dt>
<dd>
<div class="description">
<p>Resize a canvas to match the size it's displayed.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>multiplier. 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>
<dt>
Type
</dt>
<dd>
<span class="param-type">boolean</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="resizeFramebufferInfo"><span class="type-signature"> </span>resizeFramebufferInfo<span class="signature">(gl, framebufferInfo, <span class="optional">attachments</span>, <span class="optional">width</span>, <span class="optional">height</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<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>createFramebuffer</code>
because TWGL has no idea the format/type of each attachment.</p>
<p>The simplest usage</p>
<pre><code>// create an RGBA/UNSIGNED_BYTE texture and DEPTH_STENCIL renderbuffer
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><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 table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">FramebufferInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>a framebufferInfo as returned from <code>createFramebuffer</code>.</p></td>
</tr>
<tr>
<td class="name"><code>attachments</code></td>
<td class="type">
<span class="param-type">AttachmentOptions[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>the same attachments options as passed to <code>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>
</dd>
<dt>
<h4 class="name" id="resizeTexture"><span class="type-signature"> </span>resizeTexture<span class="signature">(gl, tex, options, <span class="optional">width</span>, <span class="optional">height</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Resizes a texture based on the options passed in.</p>
<p>Note: This is not a generic resize anything function.
It's mostly used by <a href="module-twgl.html#resizeFramebufferInfo"><code>resizeFramebufferInfo</code></a>
It will use <code>options.src</code> if it exists to try to determine a <code>type</code>
otherwise it will assume <code>gl.UNSIGNED_BYTE</code>. No data is provided
for the texture. Texture parameters will be set accordingly</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">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>
</dd>
<dt>
<h4 class="name" id="setAttributePrefix"><span class="type-signature"> </span>setAttributePrefix<span class="signature">(prefix)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets the default attrib prefix</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>
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><code>var arrays = {
position: ...
normal: ...
texcoord: ...
};</code></pre>
<p>But need those mapped to attributes and my attributes start with <code>a_</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>prefix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>prefix for attribs</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setAttributes"><span class="type-signature"> </span>setAttributes<span class="signature">(setters, buffers)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets attributes and binds buffers (deprecated... use <a href="module-twgl.html#setBuffersAndAttributes"><code>setBuffersAndAttributes</code></a>)</p>
<p>Example:</p>
<pre><code>var program = createProgramFromScripts(
gl, [&quot;some-vs&quot;, &quot;some-fs&quot;);
var attribSetters = createAttributeSetters(program);
var positionBuffer = gl.createBuffer();
var texcoordBuffer = gl.createBuffer();
var attribs = {
a_position: {buffer: positionBuffer, numComponents: 3},
a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
};
gl.useProgram(program);</code></pre>
<p>This will automatically bind the buffers AND set the
attributes.</p>
<pre><code>setAttributes(attribSetters, attribs);</code></pre>
<p>Properties of attribs. For each attrib you can add
properties:</p>
<ul>
<li>type: the type of data in the buffer. Default = gl.FLOAT</li>
<li>normalize: whether or not to normalize the data. Default = false</li>
<li>stride: the stride. Default = 0</li>
<li>offset: offset into the buffer. Default = 0</li>
</ul>
<p>For example if you had 3 value float positions, 2 value
float texcoord and 4 value uint8 colors you'd setup your
attribs like this</p>
<pre><code>var attribs = {
a_position: {buffer: positionBuffer, numComponents: 3},
a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
a_color: {
buffer: colorBuffer,
numComponents: 4,
type: gl.UNSIGNED_BYTE,
normalize: true,
},
};</code></pre>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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">Object.&lt;string, function()></span>
</td>
<td class="description last"><p>Attribute setters as returned from createAttributeSetters</p></td>
</tr>
<tr>
<td class="name"><code>buffers</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#AttribInfo">AttribInfo</a>></span>
</td>
<td class="description last"><p>AttribInfos mapped by attribute name.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="important tag-deprecated">Deprecated:</dt>
<dd>
<ul class="dummy">
<li>use <a href="module-twgl.html#setBuffersAndAttributes"><code>setBuffersAndAttributes</code></a></li>
</ul>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="setBuffersAndAttributes"><span class="type-signature"> </span>setBuffersAndAttributes<span class="signature">(gl, setters, buffers)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets attributes and buffers including the <code>ELEMENT_ARRAY_BUFFER</code> if appropriate</p>
<p>Example:</p>
<pre><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
attributes.</p>
<pre><code>setBuffersAndAttributes(gl, programInfo, bufferInfo);</code></pre>
<p>For the example above it is equivilent to</p>
<pre><code>gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(a_positionLocation);
gl.vertexAttribPointer(a_positionLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
gl.enableVertexAttribArray(a_texcoordLocation);
gl.vertexAttribPointer(a_texcoordLocation, 4, gl.FLOAT, false, 0, 0);</code></pre>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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">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>createProgrmaInfo</code> Attribute setters as returned from <code>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">BufferInfo</a></span>
</td>
<td class="description last"><p>a BufferInfo as returned from <code>createBufferInfoFromArrays</code>.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setDefaultTextureColor"><span class="type-signature"> </span>setDefaultTextureColor<span class="signature">(color)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets the default texture color.</p>
<p>The default texture color is used when loading textures from
urls. Because the URL will be loaded async we'd like to be
able to use the texture immediately. By putting a 1x1 pixel
color in the texture we can start using the texture before
the URL has loaded.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number[]</span>
</td>
<td class="description last"><p>Array of 4 values in the range 0 to 1</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setEmptyTexture"><span class="type-signature"> </span>setEmptyTexture<span class="signature">(gl, tex, options)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets a texture with no contents of a certain size. In other words calls <code>gl.texImage2D</code> with <code>null</code>.
You must set <code>options.width</code> and <code>options.height</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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>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="description last"><p>the WebGLTexture to set parameters for</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">TextureOptions</a></span>
</td>
<td class="description last"><p>A TextureOptions object with whatever parameters you want set.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setTextureFilteringForSize"><span class="type-signature"> </span>setTextureFilteringForSize<span class="signature">(gl, tex, <span class="optional">options</span>, <span class="optional">width</span>, <span class="optional">height</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets filtering or generates mips for texture based on width or height
If width or height is not passed in uses <code>options.width</code> and//or <code>options.height</code></p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">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.
This is often the same options you passed in when you created the texture.</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>width of texture</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>height of texture</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setTextureFromArray"><span class="type-signature"> </span>setTextureFromArray<span class="signature">(gl, tex, src, <span class="optional">options</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets a texture from an array or typed array. If the width or height is not provided will attempt to
guess the size. See <a href="module-twgl.html#TextureOptions"><code>TextureOptions</code></a>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">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.
This is often the same options you passed in when you created the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setTextureFromElement"><span class="type-signature"> </span>setTextureFromElement<span class="signature">(gl, tex, element, <span class="optional">options</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Set a texture from the contents of an element. Will also set
texture filtering or generate mips based on the dimensions of the element
unless <code>options.auto === false</code>. If <code>target === gl.TEXTURE_CUBE_MAP</code> will
attempt to slice image into 1x6, 2x3, 3x2, or 6x1 images, one for each face.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>element</code></td>
<td class="type">
<span class="param-type">HTMLElement</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>a canvas, img, or video element.</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">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.
This is often the same options you passed in when you created the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setTextureParameters"><span class="type-signature"> </span>setTextureParameters<span class="signature">(gl, tex, options)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets the texture parameters of a texture.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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>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="description last"><p>the WebGLTexture to set parameters for</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">TextureOptions</a></span>
</td>
<td class="description last"><p>A TextureOptions object with whatever parameters you want set.
This is often the same options you passed in when you created the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setTextureTo1PixelColor"><span class="type-signature"> </span>setTextureTo1PixelColor<span class="signature">(gl, tex, <span class="optional">options</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Sets a texture to a 1x1 pixel color. If <code>options.color === false</code> is nothing happens. If it's not set
the default texture color is used which can be set by calling <code>setDefaultTextureColor</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>options</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#TextureOptions">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.
This is often the same options you passed in when you created the texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="setUniforms"><span class="type-signature"> </span>setUniforms<span class="signature">(setters, values)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Set uniforms and binds related textures.</p>
<p>example:</p>
<pre><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
uniforms.</p>
<pre><code>setUniforms(programInfo, uniforms);</code></pre>
<p>For the example above it is equivalent to</p>
<pre><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><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,
],
};
setUniforms(programInfo, uniforms);
setUniforms(programInfo, moreUniforms);</code></pre>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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">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
<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
uniforms.
You can pass multiple objects by putting them in an array or by calling with more arguments.For example</p>
<pre><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>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<dt class="name" id="Arrays">
<h4>Arrays</h4>
</dt>
<dd>
<div class="description">
<p>This is a JavaScript object of arrays by name. The names should match your shader's attributes. If your
attributes have a common prefix you can specify it by calling <a href="module-twgl.html#setAttributePrefix"><code>setAttributePrefix</code></a>.</p>
<pre><code>Bare JavaScript Arrays
var arrays = {
position: [-1, 1, 0],
normal: [0, 1, 0],
...
}
Bare TypedArrays
var arrays = {
position: new Float32Array([-1, 1, 0]),
color: new Uint8Array([255, 128, 64, 255]),
...
}</code></pre>
<ul>
<li><p>Will guess at <code>numComponents</code> if not specified based on name.</p>
<p>If <code>coord</code> is in the name assumes <code>numComponents = 2</code></p>
<p>If <code>color</code> is in the name assumes <code>numComponents = 4</code></p>
<p>otherwise assumes <code>numComponents = 3</code></p>
</li>
</ul>
<p>Objects with various fields. See <a href="module-twgl.html#FullArraySpec"><code>FullArraySpec</code></a>.</p>
<pre><code>var arrays = {
position: { numComponents: 3, data: [0, 0, 0, 10, 0, 0, 0, 10, 0, 10, 10, 0], },
texcoord: { numComponents: 2, data: [0, 0, 0, 1, 1, 0, 1, 1], },
normal: { numComponents: 3, data: [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1], },
indices: { numComponents: 3, data: [0, 1, 2, 1, 2, 3], },
};</code></pre>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#ArraySpec">ArraySpec</a>></span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<dt class="name" id="ArraySpec">
<h4>ArraySpec</h4>
</dt>
<dd>
<div class="description">
<p>An individual array in <a href="module-twgl.html#Arrays"><code>Arrays</code></a></p>
<p>When passed to <a href="module-twgl.html#createBufferInfoFromArrays"><code>createBufferInfoFromArrays</code></a> if an ArraySpec is <code>number[]</code> or <code>ArrayBuffer</code>
the types will be guessed based on the name. <code>indices</code> will be <code>Uint16Array</code>, everything else will
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">FullArraySpec</a></span>
</li>
</ul>
<dl class="details">
</dl>
</dd>
<dt class="name" id="AttachmentOptions">
<h4>AttachmentOptions</h4>
</dt>
<dd>
<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
options from <a href="module-twgl.html#TextureOptions"><code>TextureOptions</code></a> for example
<code>min</code>, <code>mag</code>, <code>clamp</code>, etc... Note that unlike <a href="module-twgl.html#TextureOptions"><code>TextureOptions</code></a>
<code>auto</code> defaults to <code>false</code> for attachment textures</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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
to <code>gl.COLOR_ATTACTMENT0 + ndx</code> unless type is a depth or stencil type
then it's gl.DEPTH_ATTACHMENT or <code>gl.DEPTH_STENCIL_ATTACHMENT</code> depending
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>,
<code>gl.RGB565</code>, <code>gl.RGB5_A1</code>, <code>gl.DEPTH_COMPONENT16</code>,
<code>gl.STENCIL_INDEX8</code> or <code>gl.DEPTH_STENCIL</code> then will create a
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>.
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.
If provided will attach this Object. This allows you to share
attachemnts across framebuffers.</p></td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<dt class="name" id="AttribInfo">
<h4>AttribInfo</h4>
</dt>
<dd>
<div class="description">
<p>The info for an attribute. This is effectively just the arguments to <code>gl.vertexAttribPointer</code> plus the WebGLBuffer
for the attribute.</p>
</div>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>
</dl>
</dd>
<dt class="name" id="BufferInfo">
<h4>BufferInfo</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>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">AttribInfo</a>></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The attribs approriate to call <code>setAttributes</code></p></td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<dt>
<h4 class="name" id="CubemapReadyCallback"><span class="type-signature"></span>CubemapReadyCallback<span class="signature">(err, tex, imgs)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<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 table table-striped">
<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">HTMLImageElement[]</span>
</td>
<td class="description last"><p>the images for each face.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt class="name" id="DrawObject">
<h4>DrawObject</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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">ProgramInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A ProgramInfo as returned from createProgramInfo</p></td>
</tr>
<tr>
<td class="name"><code>bufferInfo</code></td>
<td class="type">
<span class="param-type"><a href="module-twgl.html#BufferInfo">BufferInfo</a></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>A BufferInfo as returned from createBufferInfoFromArrays</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.
You can pass multiple objects by putting them in an array. For example</p>
<pre><code>var sharedUniforms = {
u_fogNear: 10,
u_projection: ...
...
};
var localUniforms = {
u_world: ...
u_diffuseColor: ...
};
var drawObj = {
...
uniforms: [sharedUniforms, localUniforms],
};</code></pre></td>
</tr>
<tr>
<td class="name"><code>offset</code></td>
<td class="type">
<span class="param-type">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>
</dl>
</dd>
<dt>
<h4 class="name" id="ErrorCallback"><span class="type-signature"></span>ErrorCallback<span class="signature">(msg)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Error Callback</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</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="description last"><p>error message.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt class="name" id="FramebufferInfo">
<h4>FramebufferInfo</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<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">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>createFramebufferInfo</code></a>.</p></td>
</tr>
</tbody>
</table>
</dl>
</dl>
</dd>
<dt class="name" id="FullArraySpec">
<h4>FullArraySpec</h4>
</dt>
<dd>
<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>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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.
If <code>coord</code> is in the name assumes <code>numComponents = 2</code>.
If <code>color</code> is in the name assumes <code>numComponents = 4</code>.
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>).
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 defaultAttribPrefix.</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>
</dl>
</dd>
<dt class="name" id="ProgramInfo">
<h4>ProgramInfo</h4>
</dt>
<dd>
<h5>Type:</h5>
<ul>
<li>
<span class="param-type">Object</span>
</li>
</ul>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<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>
</dl>
</dd>
<dt>
<h4 class="name" id="TextureFunc"><span class="type-signature"></span>TextureFunc<span class="signature">(gl, options)</span><span class="type-signature"> &rarr; {*}</span></h4>
</dt>
<dd>
<div class="description">
<p>A function to generate the source for a texture.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<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">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>TextureOptions</code></a>.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">*</span>
</dd>
</dl>
</dd>
<dt class="name" id="TextureOptions">
<h4>TextureOptions</h4>
</dt>
<dd>
<div class="description">
<p>Texture options passed to most texture functions. Each function will use whatever options
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>
<dl class="details">
<h5 class="subsection-title">Properties:</h5>
<dl>
<table class="props table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</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>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>
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>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>
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. Defaults to <code>gl.REPEAT</code> for 2D 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 'gl.REPEAT<code>and</code>gl.CLAMP_TO_EDGE<code>for cube. If set takes precedence over</code>wrap`.</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.
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override
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.
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override
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.
This lets you set it once before calling <code>twgl.createTexture</code> or <code>twgl.createTextures</code> and only override
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.
If it's a JavaScript array assumes color is 0 to 1 like most GL colors as in [1, 0, 0, 1] = red=1, green=0, blue=0, alpha=0.
Defaults to [0.5, 0.75, 1, 1]. See <a href="module-twgl.html#setDefaultTextureColor"><code>setDefaultTextureColor</code></a>. 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
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">number[]</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The order that cube faces are pull out of an img or set of images. The default is</p>
<pre><code>[gl.TEXTURE_CUBE_MAP_POSITIVE_X,
gl.TEXTURE_CUBE_MAP_NEGATIVE_X,
gl.TEXTURE_CUBE_MAP_POSITIVE_Y,
gl.TEXTURE_CUBE_MAP_NEGATIVE_Y,
gl.TEXTURE_CUBE_MAP_POSITIVE_Z,
gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]</code></pre></td>
</tr>
<tr>
<td class="name"><code>src</code></td>
<td class="type">
<span class="param-type">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">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
1x1 pixel texture will be returned immediatley. The texture will be updated once the image has downloaded.
If <code>target</code> is <code>gl.TEXTURE_CUBE_MAP</code> will attempt to divide image into 6 square pieces. 1x6, 6x1, 3x2, 2x3.
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>,
<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
not specified it is guessed as follows. First the number of elements is computed by <code>src.length / numComponets</code>
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
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 width and height
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.
Whatever it returns is subject to these rules. So it can return a string url, an <code>HTMLElement</code>
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>
</tbody>
</table>
</dl>
</dl>
</dd>
<dt>
<h4 class="name" id="TextureReadyCallback"><span class="type-signature"></span>TextureReadyCallback<span class="signature">(err, tex, img)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<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 table table-striped">
<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>img</code></td>
<td class="type">
<span class="param-type">HTMLImageElement</span>
</td>
<td class="description last"><p>the image element.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
<dt>
<h4 class="name" id="TexturesReadyCallback"><span class="type-signature"></span>TexturesReadyCallback<span class="signature">(err, tex, options)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<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 table table-striped">
<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>options</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, <a href="module-twgl.html#TextureOptions">TextureOptions</a>></span>
</td>
<td class="description last"><p>A object of TextureOptions one per texture.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/docstrap.lib.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script>
$( function () {
$( "[id*='$']" ).each( function () {
var $this = $( this );
$this.attr( "id", $this.attr( "id" ).replace( "$", "__" ) );
} );
$(".dropdown-menu a").each(function() {
var text = $(this).text();
$(this).text(text.replace(/\//g, '.'));
});
$( "#toc" ).toc( {
showAndHide : false,
scrollTo : "100px"
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
$( '.dropdown-toggle' ).dropdown();
$( ".tutorial-section pre, .readme-section pre" ).each( function () {
var $this = $( this );
var example = $this.find( "code" );
exampleText = example.html();
var lang = /{@lang (.*?)}/.exec( exampleText );
if ( lang && lang[1] ) {
exampleText = exampleText.replace( lang[0], "" );
example.html( exampleText );
lang = lang[1];
} else {
lang = "javascript";
}
if ( lang ) {
$this
.addClass( "prettyprint" )
.html( example.html() );
}
} );
$('pre>code')
.unwrap()
.replaceWith(function() {
return $('<pre class="prettyprint showlinemods">' + this.innerHTML + '</pre>')
});
prettyPrint();
} );
</script>
<!--Navigation and Symbol Display-->
<!--Google Analytics-->
<script>
(function ( i, s, o, g, r, a, m ) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push( arguments )
}, i[r].l = 1 * new Date();
a = s.createElement( o ),
m = s.getElementsByTagName( o )[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore( a, m )
})( window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga' );
ga( 'create', 'UA-61260681-1', 'auto' );
ga( 'send', 'pageview' );
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink