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/primitives.html
Gregg Tavares 1d5a9960ec update docs
2015-06-04 23:22:19 +09:00

10258 lines
154 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TWGL Module: twgl.primitives</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.primitives</h1>
<section>
<header>
<h2>
twgl/primitives
</h2>
</header>
<article>
<div class="container-overview">
<div class="description"><p>Various functions to make simple primitives</p>
<p>note: Most primitive functions come in 3 styles</p>
<ul>
<li><p><code>createSomeShapeBufferInfo</code></p>
<p>These functions are almost always the functions you want to call. They
create vertices then make WebGLBuffers and create <a href="module-twgl.html#AttribInfo"><code>AttribInfo</code></a>s
returing a <a href="module-twgl.html#BufferInfo"><code>BufferInfo</code></a> you can pass to <a href="module-twgl.html#setBuffersAndAttributes"><code>setBuffersAndAttributes</code></a>
and <a href="module-twgl.html#drawBufferInfo"><code>drawBufferInfo</code></a> etc...</p>
</li>
<li><p><code>createSomeShapeBuffers</code></p>
<p>These create WebGLBuffers and put your data in them but nothing else.
It's a shortcut to doing it yourself if you don't want to use
the higher level functions.</p>
</li>
<li><p><code>createSomeShapeVertices</code></p>
<p>These just create vertices, no buffers. This allows you to manipulate the vertices
or add more data before generating a <a href="module-twgl.html#BufferInfo"><code>BufferInfo</code></a>. Once you're finished
manipulating the vertices call <a href="module-twgl.html#createBufferInfoFromArrays"><code>createBufferInfoFromArrays</code></a>.</p>
<p>example:</p>
<pre><code>var arrays = twgl.primitives.createPlaneArrays(1);
twgl.primitives.reorientVertices(arrays, m4.rotationX(Math.PI * 0.5));
var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);</code></pre>
</li>
</ul></div>
<dl class="details">
</dl>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="create3DFBufferInfo"><span class="type-signature"> </span>create3DFBufferInfo<span class="signature">(gl)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates 3D 'F' BufferInfo.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color buffers.</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>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="create3DFBuffers"><span class="type-signature"> </span>create3DFBuffers<span class="signature">(gl)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates 3D 'F' buffers.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color buffers.</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>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="create3DFVertices"><span class="type-signature"> </span>create3DFVertices<span class="signature">()</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates 3D 'F' vertices.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color arrays.</p>
</div>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCresentBufferInfo"><span class="type-signature"> </span>createCresentBufferInfo<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, <span class="optional">startOffset</span>, <span class="optional">endOffset</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cresent BufferInfo.</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>verticalRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The vertical radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>outerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The outer radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The inner radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The thickness of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDown</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsThick</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>startOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to start arc. Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>endOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end arg. Default 1.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="createCresentBuffers"><span class="type-signature"> </span>createCresentBuffers<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, <span class="optional">startOffset</span>, <span class="optional">endOffset</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cresent buffers.</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>verticalRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The vertical radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>outerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The outer radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The inner radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The thickness of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDown</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsThick</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>startOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to start arc. Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>endOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end arg. Default 1.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCresentVertices"><span class="type-signature"> </span>createCresentVertices<span class="signature">(verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, <span class="optional">startOffset</span>, <span class="optional">endOffset</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cresent vertices.</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>verticalRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The vertical radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>outerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The outer radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The inner radius of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The thickness of the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDown</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsThick</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the cresent.</p></td>
</tr>
<tr>
<td class="name"><code>startOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to start arc. Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>endOffset</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end arg. Default 1.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCubeBufferInfo"><span class="type-signature"> </span>createCubeBufferInfo<span class="signature">(gl, <span class="optional">size</span>)</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 for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</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>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>width, height and depth of the cube.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="createCubeBuffers"><span class="type-signature"> </span>createCubeBuffers<span class="signature">(gl, <span class="optional">size</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates the buffers and indices for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</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>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>width, height and depth of the cube.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCubeVertices"><span class="type-signature"> </span>createCubeVertices<span class="signature">(<span class="optional">size</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates the vertices and indices for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</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>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>width, height and depth of the cube.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCylinderBufferInfo"><span class="type-signature"> </span>createCylinderBufferInfo<span class="signature">(gl, radius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">topCap</span>, <span class="optional">bottomCap</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cylinder BufferInfo. The cylinder will be created around the origin
along the y-axis.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="createCylinderBuffers"><span class="type-signature"> </span>createCylinderBuffers<span class="signature">(gl, radius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">topCap</span>, <span class="optional">bottomCap</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cylinder buffers. The cylinder will be created around the origin
along the y-axis.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createCylinderVertices"><span class="type-signature"> </span>createCylinderVertices<span class="signature">(radius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">topCap</span>, <span class="optional">bottomCap</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates cylinder vertices. The cylinder will be created around the origin
along the y-axis.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the cylinder.</p></td>
</tr>
<tr>
<td class="name"><code>topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createDiscBufferInfo"><span class="type-signature"> </span>createDiscBufferInfo<span class="signature">(gl, radius, divisions, <span class="optional">stacks</span>, <span class="optional">innerRadius</span>, <span class="optional">stackPower</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates a disc BufferInfo. The disc will be in the xz plane, centered at
the origin. When creating, at least 3 divisions, or pie
pieces, need to be specified, otherwise the triangles making
up the disc will be degenerate. You can also specify the
number of radial pieces <code>stacks</code>. A value of 1 for
stacks will give you a simple disc of pie pieces. If you
want to create an annulus you can set <code>innerRadius</code> to a
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths
increase or decrease as you move away from the center. This
is particularly useful when using the disc as a ground plane
with a fixed camera such that you don't need the resolution
of small triangles near the perimeter. For example, a value
of 2 will produce stacks whose ouside radius increases with
the square of the stack index. A value of 1 will give uniform
stacks.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of the ground plane.</p></td>
</tr>
<tr>
<td class="name"><code>divisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Number of triangles in the ground plane (at least 3).</p></td>
</tr>
<tr>
<td class="name"><code>stacks</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 radial divisions (default=1).</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>stackPower</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Power to raise stack size to for decreasing width.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="createDiscBuffers"><span class="type-signature"> </span>createDiscBuffers<span class="signature">(gl, radius, divisions, <span class="optional">stacks</span>, <span class="optional">innerRadius</span>, <span class="optional">stackPower</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates disc buffers. The disc will be in the xz plane, centered at
the origin. When creating, at least 3 divisions, or pie
pieces, need to be specified, otherwise the triangles making
up the disc will be degenerate. You can also specify the
number of radial pieces <code>stacks</code>. A value of 1 for
stacks will give you a simple disc of pie pieces. If you
want to create an annulus you can set <code>innerRadius</code> to a
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths
increase or decrease as you move away from the center. This
is particularly useful when using the disc as a ground plane
with a fixed camera such that you don't need the resolution
of small triangles near the perimeter. For example, a value
of 2 will produce stacks whose ouside radius increases with
the square of the stack index. A value of 1 will give uniform
stacks.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of the ground plane.</p></td>
</tr>
<tr>
<td class="name"><code>divisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Number of triangles in the ground plane (at least 3).</p></td>
</tr>
<tr>
<td class="name"><code>stacks</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 radial divisions (default=1).</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>stackPower</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Power to raise stack size to for decreasing width.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createDiscVertices"><span class="type-signature"> </span>createDiscVertices<span class="signature">(radius, divisions, <span class="optional">stacks</span>, <span class="optional">innerRadius</span>, <span class="optional">stackPower</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates disc vertices. The disc will be in the xz plane, centered at
the origin. When creating, at least 3 divisions, or pie
pieces, need to be specified, otherwise the triangles making
up the disc will be degenerate. You can also specify the
number of radial pieces <code>stacks</code>. A value of 1 for
stacks will give you a simple disc of pie pieces. If you
want to create an annulus you can set <code>innerRadius</code> to a
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths
increase or decrease as you move away from the center. This
is particularly useful when using the disc as a ground plane
with a fixed camera such that you don't need the resolution
of small triangles near the perimeter. For example, a value
of 2 will produce stacks whose ouside radius increases with
the square of the stack index. A value of 1 will give uniform
stacks.</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Radius of the ground plane.</p></td>
</tr>
<tr>
<td class="name"><code>divisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Number of triangles in the ground plane (at least 3).</p></td>
</tr>
<tr>
<td class="name"><code>stacks</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 radial divisions (default=1).</p></td>
</tr>
<tr>
<td class="name"><code>innerRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Default 0.</p></td>
</tr>
<tr>
<td class="name"><code>stackPower</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Power to raise stack size to for decreasing width.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createPlaneBufferInfo"><span class="type-signature"> </span>createPlaneBufferInfo<span class="signature">(gl, <span class="optional">width</span>, <span class="optional">depth</span>, <span class="optional">subdivisionsWidth</span>, <span class="optional">subdivisionsDepth</span>, <span class="optional">matrix</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XZ plane BufferInfo.</p>
<p>The created plane has position, normal, and texcoord data</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>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 the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>depth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Depth of the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsWidth</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 steps across the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDepth</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 steps down the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix4</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A matrix by which to multiply all the vertices.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>{@BufferInfo} The created plane BufferInfo.</p>
</div>
</dd>
<dt>
<h4 class="name" id="createPlaneBuffers"><span class="type-signature"> </span>createPlaneBuffers<span class="signature">(gl, <span class="optional">width</span>, <span class="optional">depth</span>, <span class="optional">subdivisionsWidth</span>, <span class="optional">subdivisionsDepth</span>, <span class="optional">matrix</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XZ plane buffers.</p>
<p>The created plane has position, normal, and texcoord data</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>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 the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>depth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Depth of the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsWidth</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 steps across the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDepth</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 steps down the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix4</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A matrix by which to multiply all the vertices.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created plane buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createPlaneVertices"><span class="type-signature"> </span>createPlaneVertices<span class="signature">(<span class="optional">width</span>, <span class="optional">depth</span>, <span class="optional">subdivisionsWidth</span>, <span class="optional">subdivisionsDepth</span>, <span class="optional">matrix</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XZ plane vertices.</p>
<p>The created plane has position, normal, and texcoord data</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>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 the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>depth</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Depth of the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsWidth</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 steps across the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsDepth</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 steps down the plane. Default = 1</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix4</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A matrix by which to multiply all the vertices.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created plane vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createSphereBufferInfo"><span class="type-signature"> </span>createSphereBufferInfo<span class="signature">(gl, radius, subdivisionsAxis, subdivisionsHeight, <span class="optional">opt_startLatitudeInRadians</span>, <span class="optional">opt_endLatitudeInRadians</span>, <span class="optional">opt_startLongitudeInRadians</span>, <span class="optional">opt_endLongitudeInRadians</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates sphere BufferInfo.</p>
<p>The created sphere has position, normal, and texcoord data</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsAxis</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start the
top of the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end the
bottom of the sphere. Default = Math.PI.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start
wrapping the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to end
wrapping the sphere. Default = 2 * Math.PI.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created sphere 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="createSphereBuffers"><span class="type-signature"> </span>createSphereBuffers<span class="signature">(gl, radius, subdivisionsAxis, subdivisionsHeight, <span class="optional">opt_startLatitudeInRadians</span>, <span class="optional">opt_endLatitudeInRadians</span>, <span class="optional">opt_startLongitudeInRadians</span>, <span class="optional">opt_endLongitudeInRadians</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates sphere buffers.</p>
<p>The created sphere has position, normal, and texcoord data</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsAxis</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start the
top of the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end the
bottom of the sphere. Default = Math.PI.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start
wrapping the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to end
wrapping the sphere. Default = 2 * Math.PI.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created sphere buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createSphereVertices"><span class="type-signature"> </span>createSphereVertices<span class="signature">(radius, subdivisionsAxis, subdivisionsHeight, <span class="optional">opt_startLatitudeInRadians</span>, <span class="optional">opt_endLatitudeInRadians</span>, <span class="optional">opt_startLongitudeInRadians</span>, <span class="optional">opt_endLongitudeInRadians</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates sphere vertices.</p>
<p>The created sphere has position, normal, and texcoord data</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsAxis</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of steps around the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>subdivisionsHeight</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>number of vertically on the sphere.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start the
top of the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLatitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Where to end the
bottom of the sphere. Default = Math.PI.</p></td>
</tr>
<tr>
<td class="name"><code>opt_startLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to start
wrapping the sphere. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>opt_endLongitudeInRadians</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>where to end
wrapping the sphere. Default = 2 * Math.PI.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created sphere vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTorusBufferInfo"><span class="type-signature"> </span>createTorusBufferInfo<span class="signature">(gl, radius, thickness, radialSubdivisions, bodySubdivisions, <span class="optional">startAngle</span>, <span class="optional">endAngle</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates BufferInfo for a torus</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of center of torus circle.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of torus ring.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the torus.</p></td>
</tr>
<tr>
<td class="name"><code>bodySubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the body torus.</p></td>
</tr>
<tr>
<td class="name"><code>startAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>start angle in radians. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>endAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>end angle in radians. Default = Math.PI * 2.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created 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="createTorusBuffers"><span class="type-signature"> </span>createTorusBuffers<span class="signature">(gl, radius, thickness, radialSubdivisions, bodySubdivisions, <span class="optional">startAngle</span>, <span class="optional">endAngle</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates buffers for a torus</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of center of torus circle.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of torus ring.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the torus.</p></td>
</tr>
<tr>
<td class="name"><code>bodySubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the body torus.</p></td>
</tr>
<tr>
<td class="name"><code>startAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>start angle in radians. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>endAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>end angle in radians. Default = Math.PI * 2.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTorusVertices"><span class="type-signature"> </span>createTorusVertices<span class="signature">(radius, thickness, radialSubdivisions, bodySubdivisions, <span class="optional">startAngle</span>, <span class="optional">endAngle</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates vertices for a torus</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>radius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of center of torus circle.</p></td>
</tr>
<tr>
<td class="name"><code>thickness</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>radius of torus ring.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the torus.</p></td>
</tr>
<tr>
<td class="name"><code>bodySubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the body torus.</p></td>
</tr>
<tr>
<td class="name"><code>startAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>start angle in radians. Default = 0.</p></td>
</tr>
<tr>
<td class="name"><code>endAngle</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>end angle in radians. Default = Math.PI * 2.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTruncatedConeBufferInfo"><span class="type-signature"> </span>createTruncatedConeBufferInfo<span class="signature">(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">opt_topCap</span>, <span class="optional">opt_bottomCap</span>)</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 for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis.</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>bottomRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Bottom radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>topRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Top radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>opt_topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>opt_bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created cone 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="createTruncatedConeBuffers"><span class="type-signature"> </span>createTruncatedConeBuffers<span class="signature">(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">opt_topCap</span>, <span class="optional">opt_bottomCap</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates buffers for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis.</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>bottomRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Bottom radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>topRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Top radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>opt_topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>opt_bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created cone buffers.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createTruncatedConeVertices"><span class="type-signature"> </span>createTruncatedConeVertices<span class="signature">(bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, <span class="optional">opt_topCap</span>, <span class="optional">opt_bottomCap</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates vertices for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis. .</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>bottomRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Bottom radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>topRadius</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Top radius of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>height</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Height of truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>radialSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions around the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>verticalSubdivisions</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The number of subdivisions down the
truncated cone.</p></td>
</tr>
<tr>
<td class="name"><code>opt_topCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create top cap. Default = true.</p></td>
</tr>
<tr>
<td class="name"><code>opt_bottomCap</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Create bottom cap. Default = true.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The created cone vertices.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createXYQuadBufferInfo"><span class="type-signature"> </span>createXYQuadBufferInfo<span class="signature">(gl, <span class="optional">size</span>, <span class="optional">xOffset</span>, <span class="optional">yOffset</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XY quad BufferInfo</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);</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>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>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p></td>
</tr>
<tr>
<td class="name"><code>xOffset</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 amount to offset the quad in X</p></td>
</tr>
<tr>
<td class="name"><code>yOffset</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 amount to offset the quad in Y</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the created XY Quad BufferInfo</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, WebGLBuffer></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="createXYQuadBuffers"><span class="type-signature"> </span>createXYQuadBuffers<span class="signature">(gl, <span class="optional">size</span>, <span class="optional">xOffset</span>, <span class="optional">yOffset</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#BufferInfo">BufferInfo</a>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XY quad Buffers</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);</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>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>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p></td>
</tr>
<tr>
<td class="name"><code>xOffset</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 amount to offset the quad in X</p></td>
</tr>
<tr>
<td class="name"><code>yOffset</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 amount to offset the quad in Y</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the created XY Quad buffers</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="createXYQuadVertices"><span class="type-signature"> </span>createXYQuadVertices<span class="signature">(<span class="optional">size</span>, <span class="optional">xOffset</span>, <span class="optional">yOffset</span>)</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>Creates XY quad vertices</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadVertices(1, 0.5, 0.5);</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadVertices(1, 0, 0.5);</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>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>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p></td>
</tr>
<tr>
<td class="name"><code>xOffset</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 amount to offset the quad in X</p></td>
</tr>
<tr>
<td class="name"><code>yOffset</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 amount to offset the quad in Y</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>{Object.<string, TypedArray> the created XY Quad vertices</p>
</div>
</dd>
<dt>
<h4 class="name" id="deindexVertices"><span class="type-signature"> </span>deindexVertices<span class="signature">(vertices)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given indexed vertices creates a new set of vertices unindexed by expanding the indexed vertices.</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>vertices</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, TypedArray></span>
</td>
<td class="description last"><p>The indexed vertices to deindex</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The deindexed vertices</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="flattenNormals"><span class="type-signature"> </span>flattenNormals<span class="signature">(vertices)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>flattens the normals of deindexed vertices in place.</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>vertices</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, TypedArray></span>
</td>
<td class="description last"><p>The deindexed vertices who's normals to flatten</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The flattened vertices (same as was passed in)</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, TypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="makeRandomVertexColors"><span class="type-signature"> </span>makeRandomVertexColors<span class="signature">(vertices, <span class="optional">options</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, augmentedTypedArray>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Creates an augmentedTypedArray of random vertex colors.
If the vertices are indexed (have an indices array) then will
just make random colors. Otherwise assumes they are triangless
and makes one random color for every 3 vertices.</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>vertices</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, augmentedTypedArray></span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>Vertices as returned from one of the createXXXVertices functions.</p></td>
</tr>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type"><a href="primitives.html#RandomVerticesOptions">RandomVerticesOptions</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>options.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>same vertices as passed in with <code>color</code> added.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, augmentedTypedArray></span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="reorientDirections"><span class="type-signature"> </span>reorientDirections<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>
</dt>
<dd>
<div class="description">
<p>Reorients directions by the given matrix..</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>array</code></td>
<td class="type">
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</td>
<td class="description last"><p>The array. Assumes value floats per element.</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix</span>
</td>
<td class="description last"><p>A matrix to multiply by.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the same array that was passed in</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="reorientNormals"><span class="type-signature"> </span>reorientNormals<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>
</dt>
<dd>
<div class="description">
<p>Reorients normals by the inverse-transpose of the given
matrix..</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>array</code></td>
<td class="type">
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</td>
<td class="description last"><p>The array. Assumes value floats per element.</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix</span>
</td>
<td class="description last"><p>A matrix to multiply by.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the same array that was passed in</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="reorientPositions"><span class="type-signature"> </span>reorientPositions<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>
</dt>
<dd>
<div class="description">
<p>Reorients positions by the given matrix. In other words, it
multiplies each vertex by the given matrix.</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>array</code></td>
<td class="type">
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</td>
<td class="description last"><p>The array. Assumes value floats per element.</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix</span>
</td>
<td class="description last"><p>A matrix to multiply by.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>the same array that was passed in</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Array.&lt;number>|</span>
<span class="param-type">TypedArray</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="reorientVertices"><span class="type-signature"> </span>reorientVertices<span class="signature">(arrays, matrix)</span><span class="type-signature"> &rarr; {Object.&lt;string, (Array.&lt;number>|TypedArray)>}</span></h4>
</dt>
<dd>
<div class="description">
<p>Reorients arrays by the given matrix. Assumes arrays have
names that contains 'pos' could be reoriented as positions,
'binorm' or 'tan' as directions, and 'norm' as normals.</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>arrays</code></td>
<td class="type">
<span class="param-type">Object.&lt;string, (Array.&lt;number>|TypedArray)></span>
</td>
<td class="description last"><p>The vertices to reorient</p></td>
</tr>
<tr>
<td class="name"><code>matrix</code></td>
<td class="type">
<span class="param-type">Matrix</span>
</td>
<td class="description last"><p>matrix to reorient by.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>same arrays that were passed in.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object.&lt;string, (Array.&lt;number>|TypedArray)></span>
</dd>
</dl>
</dd>
</dl>
<h3 class="subsection-title">Type Definitions</h3>
<dl>
<dt>
<h4 class="name" id="RandomColorFunc"><span class="type-signature"></span>RandomColorFunc<span class="signature">(ndx, channel)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Used to supply random colors</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>ndx</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>index of triangle/quad if unindexed or index of vertex if indexed</p></td>
</tr>
<tr>
<td class="name"><code>channel</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>0 = red, 1 = green, 2 = blue, 3 = alpha</p></td>
</tr>
</tbody>
</table>
<dl class="details">
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>a number from 0 to 255</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt class="name" id="RandomVerticesOptions">
<h4>RandomVerticesOptions</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>vertsPerColor</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>Defaults to 3 for non-indexed vertices</p></td>
</tr>
<tr>
<td class="name"><code>rand</code></td>
<td class="type">
<span class="param-type"><a href="primitives.html#RandomColorFunc">RandomColorFunc</a></span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>A function to generate random numbers</p></td>
</tr>
</tbody>
</table>
</dl>
</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