twgl.js/docs/primitives.html
2015-04-13 15:14:36 +09:00

4114 lines
60 KiB
HTML

<!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 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 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="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 and uv streams.</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="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="createCubeVertices"><span class="type-signature"> </span>createCubeVertices<span class="signature">(size)</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. The
cube will be 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 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="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 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="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. The created cylinder has position, normal and uv streams.</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="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 a disc. 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="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.
The created plane has position, normal and uv streams.</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="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.
The created sphere has position, normal and uv streams.</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 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="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="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. The created cone has position, normal
and uv streams.</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 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="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>