docs/module-webgl-3d-math.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>WebGL Fundamentals Module: webgl-3d-math</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">WebGL Fundamentals</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-primitives.html">primitives</a>
						</li>
						
						<li>
							<a href="module-webgl-2d-math.html">webgl-2d-math</a>
						</li>
						
						<li>
							<a href="module-webgl-3d-math.html">webgl-3d-math</a>
						</li>
						
						<li>
							<a href="module-webgl-utils.html">webgl-utils</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					

	<h1 class="page-title">Module: webgl-3d-math</h1>
<section>

<header>
    <h2>
    webgl-3d-math
    </h2>
    
</header>

<article>
    <div class="container-overview">
    

            <div class="description"><p>Various 3d math functions.</p></div>
        

<dl class="details">
	

</dl>


    </div>

    
        <h3 class="subsection-title">Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="cross"><span class="type-signature"> </span>cross<span class="signature">(a, b, dst)</span><span class="type-signature"> &rarr; {Vector3}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Computes the cross product of 2 vectors3s</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>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>a</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>b</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>optional vector3 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector3 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector3</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeAxisRotation"><span class="type-signature"> </span>makeAxisRotation<span class="signature">(axis, angleInRadians, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes an rotation matrix around an arbitrary 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>axis</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>axis to rotate around</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>amount to rotate</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeFrustum"><span class="type-signature"> </span>makeFrustum<span class="signature">(left, right, bottom, top, near, far, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Computes a 4-by-4 perspective transformation matrix given the left, right,
top, bottom, near and far clipping planes. The arguments define a frustum
extending in the negative z direction. The arguments near and far are the
distances to the near and far clipping planes. Note that near and far are not
z coordinates, but rather they are distances along the negative z-axis. The
matrix generated sends the viewing frustum to the unit box. We assume a unit
box extending from -1 to 1 in the x and y dimensions and from -1 to 1 in the z
dimension.</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>left</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The x coordinate of the left plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>right</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The x coordinate of the right plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>bottom</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The y coordinate of the bottom plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>top</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The y coordinate of the right plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>near</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The negative z coordinate of the near plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>far</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The negative z coordinate of the far plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeIdentity"><span class="type-signature"> </span>makeIdentity<span class="signature">(<span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes an identity matrix.</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>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeInverse"><span class="type-signature"> </span>makeInverse<span class="signature">(m, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Computes the inverse of a matrix.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>matrix to compute inverse of</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeLookAt"><span class="type-signature"> </span>makeLookAt<span class="signature">(cameraPosition, target, up, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Creates a lookAt matrix.
This is a world matrix for a camera. In other words it will transform
from the origin to a place and orientation in the world. For a view
matrix take the inverse of this.</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>cameraPosition</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>position of the camera</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>position of the target</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>up</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>direction</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeOrthographic"><span class="type-signature"> </span>makeOrthographic<span class="signature">(left, right, bottom, top, near, far, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Computes a 4-by-4 orthographic projection matrix given the coordinates of the
planes defining the axis-aligned, box-shaped viewing volume.  The matrix
generated sends that box to the unit box.  Note that although left and right
are x coordinates and bottom and top are y coordinates, near and far
are not z coordinates, but rather they are distances along the negative
z-axis.  We assume a unit box extending from -1 to 1 in the x and y
dimensions and from -1 to 1 in the z dimension.</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>left</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The x coordinate of the left plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>right</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The x coordinate of the right plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>bottom</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The y coordinate of the bottom plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>top</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The y coordinate of the right plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>near</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The negative z coordinate of the near plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>far</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The negative z coordinate of the far plane of the box.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makePerspective"><span class="type-signature"> </span>makePerspective<span class="signature">(fieldOfViewInRadians, aspect, near, far, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Computes a 4-by-4 perspective transformation matrix given the angular height
of the frustum, the aspect ratio, and the near and far clipping planes.  The
arguments define a frustum extending in the negative z direction.  The given
angle is the vertical angle of the frustum, and the horizontal angle is
determined to produce the given aspect ratio.  The arguments near and far are
the distances to the near and far clipping planes.  Note that near and far
are not z coordinates, but rather they are distances along the negative
z-axis.  The matrix generated sends the viewing frustum to the unit box.
We assume a unit box extending from -1 to 1 in the x and y dimensions and
from -1 to 1 in the z dimension.</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>fieldOfViewInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>field of view in y axis.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>aspect</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>aspect of viewport (width / height)</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>near</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>near Z clipping plane</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>far</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>far Z clipping plane</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeScale"><span class="type-signature"> </span>makeScale<span class="signature">(sx, sy, sz, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes a scale matrix</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>sx</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>x scale.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>sy</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>y scale.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>sz</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>z scale.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeTranslation"><span class="type-signature"> </span>makeTranslation<span class="signature">(tx, ty, tz, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes a translation matrix</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>tx</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>x translation.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>ty</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>y translation.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>tz</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>z translation.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeTranspose"><span class="type-signature"> </span>makeTranspose<span class="signature">(m, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Transposes a matrix.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>matrix to transpose.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeXRotation"><span class="type-signature"> </span>makeXRotation<span class="signature">(angleInRadians, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes an x rotation matrix</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>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>amount to rotate</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeYRotation"><span class="type-signature"> </span>makeYRotation<span class="signature">(angleInRadians, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes an y rotation matrix</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>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>amount to rotate</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="makeZRotation"><span class="type-signature"> </span>makeZRotation<span class="signature">(angleInRadians, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Matrix4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Makes an z rotation matrix</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>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>amount to rotate</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>optional matrix to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or a new matrix of none provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Matrix4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="matrixVectorMultiply"><span class="type-signature"> </span>matrixVectorMultiply<span class="signature">(m, v, dst)</span><span class="type-signature"> &rarr; {Vector4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Takes a  matrix and a vector with 4 entries, transforms that vector by
the matrix, and returns the result as a vector with 4 entries.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
            <td class="description last"><p>The matrix.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector4</span>

            
            </td>

            
            <td class="description last"><p>The point in homogenous coordinates.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector4</span>

            
            </td>

            
            <td class="description last"><p>optional vector4 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector4 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="normalize"><span class="type-signature"> </span>normalize<span class="signature">(v, dst)</span><span class="type-signature"> &rarr; {Vector3}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>normalizes a vector.</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>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>vector to normalzie</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>optional vector3 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector3 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector3</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="subtractVectors"><span class="type-signature"> </span>subtractVectors<span class="signature">(a, b, dst)</span><span class="type-signature"> &rarr; {Vector3}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>subtracts 2 vectors3s</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>a</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>a</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>b</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>optional vector3 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector3 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector3</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="transformDirection"><span class="type-signature"> </span>transformDirection<span class="signature">(m, v, dst)</span><span class="type-signature"> &rarr; {Vector4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Takes a 4-by-4 matrix and a vector with 3 entries, interprets the vector as a
direction, transforms that direction by the matrix, and returns the result;
assumes the transformation of 3-dimensional space represented by the matrix
is parallel-preserving, i.e. any combination of rotation, scaling and
translation, but not a perspective distortion. Returns a vector with 3
entries.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
            <td class="description last"><p>The matrix.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>The direction.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector4</span>

            
            </td>

            
            <td class="description last"><p>optional vector4 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector4 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector4</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="transformNormal"><span class="type-signature"> </span>transformNormal<span class="signature">(m, v, <span class="optional">dst</span>)</span><span class="type-signature"> &rarr; {Vector3}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Takes a 4-by-4 matrix m and a vector v with 3 entries, interprets the vector
as a normal to a surface, and computes a vector which is normal upon
transforming that surface by the matrix. The effect of this function is the
same as transforming v (as a direction) by the inverse-transpose of m.  This
function assumes the transformation of 3-dimensional space represented by the
matrix is parallel-preserving, i.e. any combination of rotation, scaling and
translation, but not a perspective distortion.  Returns a vector with 3
entries.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The matrix.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The normal.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>The direction.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>The transformed direction.</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector3</span>

	</dd>
</dl>


</dd>

        
<dt>
    <h4 class="name" id="transformPoint"><span class="type-signature"> </span>transformPoint<span class="signature">(m, v, dst)</span><span class="type-signature"> &rarr; {Vector4}</span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Takes a 4-by-4 matrix and a vector with 3 entries,
interprets the vector as a point, transforms that point by the matrix, and
returns the result as a vector with 3 entries.</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>m</code></td>
            

            <td class="type">
            
                
<span class="param-type">Matrix4</span>

            
            </td>

            
            <td class="description last"><p>The matrix.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector3</span>

            
            </td>

            
            <td class="description last"><p>The point.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type">Vector4</span>

            
            </td>

            
            <td class="description last"><p>optional vector4 to store result</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
	

</dl>

    
    <h5>Returns:</h5>
    
            
<div class="param-desc">
    <p>dst or new Vector4 if not provided</p>
</div>


<dl>
	<dt>
		Type
	</dt>
	<dd>
		
<span class="param-type">Vector4</span>

	</dd>
</dl>


</dd>

        </dl>
    

        <h3 class="subsection-title">Type Definitions</h3>

        <dl>
                
<dt class="name" id="Matrix4">
    <h4>Matrix4</h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>An array or typed array with 16 values.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">Array.&lt;number>|</span>

<span class="param-type">TypedArray</span>

            </li>
        </ul>
    

<dl class="details">
	

</dl>


</dd>

            
<dt class="name" id="Vector3">
    <h4>Vector3</h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>An array or typed array with 3 values.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">Array.&lt;number>|</span>

<span class="param-type">TypedArray</span>

            </li>
        </ul>
    

<dl class="details">
	

</dl>


</dd>

            
<dt class="name" id="Vector4">
    <h4>Vector4</h4>

    
</dt>
<dd>
    
    <div class="description">
        <p>An array or typed array with 4 values.</p>
    </div>
    

        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">Array.&lt;number>|</span>

<span class="param-type">TypedArray</span>

            </li>
        </ul>
    

<dl class="details">
	

</dl>


</dd>

            </dl>
    

</article>

</section>


				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		copyright Gregg Tavares
		</span>
					<br />
					
				</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-59804936-1', 'auto' );
		ga( 'send', 'pageview' );
	</script>
	

</body>
</html>