docs/module-twgl_m4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>twgl/m4 - Documentation</title>

    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav>
    <li class="nav-link nav-home-link"><a href="index.html">Home</a></li><li class="nav-heading">Modules</li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl.html">twgl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.addExtensionsToContext">addExtensionsToContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindTransformFeedbackInfo">bindTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedback">createTransformFeedback</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createTransformFeedbackInfo">createTransformFeedbackInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.getContext">getContext</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.glEnumToString">glEnumToString</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL1">isWebGL1</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.isWebGL2">isWebGL2</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeCanvasToDisplaySize">resizeCanvasToDisplaySize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setDefaults">setDefaults</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl.html#~createContext">createContext</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_attributes.html">twgl/attributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createAttribsFromArrays">createAttribsFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromArray">createBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferFromTypedArray">createBufferFromTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBufferInfoFromArrays">createBufferInfoFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.createBuffersFromArrays">createBuffersFromArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttribInfoBufferFromArray">setAttribInfoBufferFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_attributes.html#.setAttributePrefix">setAttributePrefix</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_draw.html">twgl/draw</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawBufferInfo">drawBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_draw.html#.drawObjectList">drawObjectList</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html">twgl/framebuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.bindFramebufferInfo">bindFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.createFramebufferInfo">createFramebufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_framebuffers.html#.resizeFramebufferInfo">resizeFramebufferInfo</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_m4.html">twgl/m4</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotate">axisRotate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.axisRotation">axisRotation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.create">create</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.frustum">frustum</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getAxis">getAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.getTranslation">getTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.identity">identity</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.inverse">inverse</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.lookAt">lookAt</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.ortho">ortho</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.perspective">perspective</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateX">rotateX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateY">rotateY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotateZ">rotateZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationX">rotationX</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationY">rotationY</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.rotationZ">rotationZ</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scale">scale</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.scaling">scaling</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setAxis">setAxis</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.setTranslation">setTranslation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformDirection">transformDirection</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformNormal">transformNormal</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transformPoint">transformPoint</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translate">translate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.translation">translation</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_m4.html#.transpose">transpose</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_primitives.html">twgl/primitives</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.concatVertices">concatVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBufferInfo">create3DFBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFBuffers">create3DFBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.create3DFVertices">create3DFVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createAugmentedTypedArray">createAugmentedTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBufferInfo">createCrescentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentBuffers">createCrescentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCrescentVertices">createCrescentVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBufferInfo">createCresentBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCresentBuffers">createCresentBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBufferInfo">createCubeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeBuffers">createCubeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCubeVertices">createCubeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBufferInfo">createCylinderBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderBuffers">createCylinderBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createCylinderVertices">createCylinderVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBufferInfo">createDiscBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscBuffers">createDiscBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createDiscVertices">createDiscVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBufferInfo">createPlaneBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneBuffers">createPlaneBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createPlaneVertices">createPlaneVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBufferInfo">createSphereBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereBuffers">createSphereBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createSphereVertices">createSphereVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBufferInfo">createTorusBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusBuffers">createTorusBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTorusVertices">createTorusVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBufferInfo">createTruncatedConeBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeBuffers">createTruncatedConeBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createTruncatedConeVertices">createTruncatedConeVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBufferInfo">createXYQuadBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadBuffers">createXYQuadBuffers</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.createXYQuadVertices">createXYQuadVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.deindexVertices">deindexVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.duplicateVertices">duplicateVertices</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.flattenNormals">flattenNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.makeRandomVertexColors">makeRandomVertexColors</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientDirections">reorientDirections</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientNormals">reorientNormals</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientPositions">reorientPositions</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_primitives.html#.reorientVertices">reorientVertices</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_programs.html">twgl/programs</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.bindUniformBlock">bindUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createAttributeSetters">createAttributeSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgram">createProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramAsync">createProgramAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromScripts">createProgramFromScripts</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramFromSources">createProgramFromSources</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfo">createProgramInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfoAsync">createProgramInfoAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createProgramInfoFromProgram">createProgramInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfo">createUniformBlockInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockInfoFromProgram">createUniformBlockInfoFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformBlockSpecFromProgram">createUniformBlockSpecFromProgram</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.createUniformSetters">createUniformSetters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBlockUniforms">setBlockUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setBuffersAndAttributes">setBuffersAndAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformBlock">setUniformBlock</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniforms">setUniforms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#.setUniformsAndBindTextures">setUniformsAndBindTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramInfos">createProgramInfos</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramInfosAsync">createProgramInfosAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createPrograms">createPrograms</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_programs.html#~createProgramsAsync">createProgramsAsync</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_textures.html">twgl/textures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canFilter">canFilter</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.canGenerateMipmap">canGenerateMipmap</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTexture">createTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.createTextures">createTextures</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getBytesPerElementForInternalFormat">getBytesPerElementForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getFormatAndTypeForInternalFormat">getFormatAndTypeForInternalFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.getNumComponentsForFormat">getNumComponentsForFormat</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.loadTextureFromUrl">loadTextureFromUrl</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.resizeTexture">resizeTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setDefaultTextureColor">setDefaultTextureColor</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setEmptyTexture">setEmptyTexture</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setSamplerParameters">setSamplerParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFilteringForSize">setTextureFilteringForSize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromArray">setTextureFromArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureFromElement">setTextureFromElement</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#.setTextureParameters">setTextureParameters</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~copyOptionsAndApplyPackState">copyOptionsAndApplyPackState</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~createTextureAsync">createTextureAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~createTexturesAsync">createTexturesAsync</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_textures.html#~getPackStateOption">getPackStateOption</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_typedArray.html">twgl/typedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArray">getGLTypeForTypedArray</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getGLTypeForTypedArrayType">getGLTypeForTypedArrayType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_typedArray.html#.getTypedArrayTypeForGLType">getTypedArrayTypeForGLType</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_v3.html">twgl/v3</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.add">add</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.copy">copy</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.create">create</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.cross">cross</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distance">distance</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.distanceSq">distanceSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divide">divide</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.divScalar">divScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.dot">dot</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.length">length</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lengthSq">lengthSq</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerp">lerp</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.lerpV">lerpV</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.max">max</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.min">min</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.mulScalar">mulScalar</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.multiply">multiply</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.negate">negate</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.normalize">normalize</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.setDefaultType">setDefaultType</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_v3.html#.subtract">subtract</a></span></li><li class="nav-heading"><span class="nav-item-type type-module">M</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html">twgl/vertexArrays</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOAndSetAttributes">createVAOAndSetAttributes</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVAOFromBufferInfo">createVAOFromBufferInfo</a></span></li><li class="nav-item"><span class="nav-item-type type-function">F</span><span class="nav-item-name"><a href="module-twgl_vertexArrays.html#.createVertexArrayInfo">createVertexArrayInfo</a></span></li>
</nav>

<div id="main">
    
    <h1 class="page-title">twgl/m4</h1>
    

<section>

<header>
    
        
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>4x4 Matrix math math functions.</p>
<p>Almost all functions take an optional <code>dst</code> argument. If it is not passed in the<br>
functions will create a new matrix. In other words you can do this</p>
<pre><code>const mat = m4.translation([1, 2, 3]);  // Creates a new translation matrix
</code></pre>
<p>or</p>
<pre><code>const mat = m4.create();
m4.translation([1, 2, 3], mat);  // Puts translation matrix in mat.
</code></pre>
<p>The first style is often easier but depending on where it's used it generates garbage where<br>
as there is almost never allocation with the second style.</p>
<p>It is always save to pass any matrix as the destination. So for example</p>
<pre><code>const mat = m4.identity();
const trans = m4.translation([1, 2, 3]);
m4.multiply(mat, trans, mat);  // Multiplies mat * trans and puts result in mat.</code></pre></div>
        

<div class="section-method">


<dl class="details">

    
</dl>


</div>
        
    
    </div>

    
        <h3 class="subsection-title">Methods</h3>

        
<div class="section-method">

    
    <h4 class="name" id=".axisRotate"><span class="type-signature">(static) </span>axisRotate<span class="signature">(m, axis, angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Rotates the given 4-by-4 matrix around the given axis by the<br>
given angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>axis</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The axis<br>
about which to rotate.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotated matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".axisRotation"><span class="type-signature">(static) </span>axisRotation<span class="signature">(axis, angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which rotates around the given axis by the given<br>
angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>axis</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The axis<br>
about which to rotate.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>A matrix which rotates angle radians<br>
around the axis.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".copy"><span class="type-signature">(static) </span>copy<span class="signature">(m, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Copies a matrix.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>The matrix. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>A copy of m.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".create"><span class="type-signature">(static) </span>create<span class="signature">()</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a matrix.</p>
</div>


<dl class="details">

    
</dl>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>A new matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".frustum"><span class="type-signature">(static) </span>frustum<span class="signature">(left, right, bottom, top, near, far, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Computes a 4-by-4 perspective transformation matrix given the left, right,<br>
top, bottom, near and far clipping planes. The arguments define a frustum<br>
extending in the negative z direction. The arguments near and far are the<br>
distances to the near and far clipping planes. Note that near and far are not<br>
z coordinates, but rather they are distances along the negative z-axis. The<br>
matrix generated sends the viewing frustum to the unit box. We assume a unit<br>
box extending from -1 to 1 in the x and y dimensions and from 0 to 1 in the z<br>
dimension.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>left</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></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"><code>number</code></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"><code>number</code></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"><code>number</code></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"><code>number</code></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"><code>number</code></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"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>Output matrix. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The perspective projection matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".getAxis"><span class="type-signature">(static) </span>getAxis<span class="signature">(m, axis)</span><span class="type-signature"> &rarr; {<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>|<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>}</span></h4>

    
<div class="description">
    <p>Returns an axis of a 4x4 matrix as a vector with 3 entries</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>axis</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
            <td class="description last">
                <p>The axis 0 = x, 1 = y, 2 = z;</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>
<ul>
        <li>

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>[dst] vector.</p>
</div>
</li>
    
        <li>

<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The axis component of m.</p>
</div>
</li>
    </ul>
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".getTranslation"><span class="type-signature">(static) </span>getTranslation<span class="signature">(m, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>}</span></h4>

    
<div class="description">
    <p>Returns the translation component of a 4-by-4 matrix as a vector with 3<br>
entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>vector to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The translation component of m.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".identity"><span class="type-signature">(static) </span>identity<span class="signature">(dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates an n-by-n identity matrix.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>An n-by-n identity matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".inverse"><span class="type-signature">(static) </span>inverse<span class="signature">(m, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Computes the inverse of a 4-by-4 matrix.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The inverse of m.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".lookAt"><span class="type-signature">(static) </span>lookAt<span class="signature">(eye, target, up, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Computes a 4-by-4 look-at transformation.</p>
<p>This is a matrix which positions the camera itself. If you want<br>
a view matrix (a matrix which moves things in front of the camera)<br>
take the inverse of this.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>eye</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The position of the eye.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The position meant to be viewed.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>up</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A vector pointing up.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The look-at matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".multiply"><span class="type-signature">(static) </span>multiply<span class="signature">(a, b, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Multiplies two 4-by-4 matrices with a on the left and b on the right</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix on the left.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>b</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix on the right.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The matrix product of a and b.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".negate"><span class="type-signature">(static) </span>negate<span class="signature">(m, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Negates a matrix.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>-m.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".ortho"><span class="type-signature">(static) </span>ortho<span class="signature">(left, right, bottom, top, near, far, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Computes a 4-by-4 orthogonal transformation matrix given the left, right,<br>
bottom, and top dimensions of the near clipping plane as well as the<br>
near and far clipping plane distances.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>left</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Left side of the near clipping plane viewport.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>right</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Right side of the near clipping plane viewport.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>bottom</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Bottom of the near clipping plane viewport.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>top</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Top of the near clipping plane viewport.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>near</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The depth (negative z coordinate)<br>
of the near clipping plane.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>far</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The depth (negative z coordinate)<br>
of the far clipping plane.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>Output matrix. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The perspective matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".perspective"><span class="type-signature">(static) </span>perspective<span class="signature">(fieldOfViewYInRadians, aspect, zNear, zFar, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Computes a 4-by-4 perspective transformation matrix given the angular height<br>
of the frustum, the aspect ratio, and the near and far clipping planes.  The<br>
arguments define a frustum extending in the negative z direction.  The given<br>
angle is the vertical angle of the frustum, and the horizontal angle is<br>
determined to produce the given aspect ratio.  The arguments near and far are<br>
the distances to the near and far clipping planes.  Note that near and far<br>
are not z coordinates, but rather they are distances along the negative<br>
z-axis.  The matrix generated sends the viewing frustum to the unit box.<br>
We assume a unit box extending from -1 to 1 in the x and y dimensions and<br>
from 0 to 1 in the z dimension.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>fieldOfViewYInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The camera angle from top to bottom (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>aspect</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The aspect ratio width / height.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>zNear</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The depth (negative z coordinate)<br>
of the near clipping plane.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>zFar</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The depth (negative z coordinate)<br>
of the far clipping plane.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The perspective matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotateX"><span class="type-signature">(static) </span>rotateX<span class="signature">(m, angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Rotates the given 4-by-4 matrix around the x-axis by the given<br>
angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotated matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotateY"><span class="type-signature">(static) </span>rotateY<span class="signature">(m, angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Rotates the given 4-by-4 matrix around the y-axis by the given<br>
angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotated matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotateZ"><span class="type-signature">(static) </span>rotateZ<span class="signature">(m, angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Rotates the given 4-by-4 matrix around the z-axis by the given<br>
angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotated matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotationX"><span class="type-signature">(static) </span>rotationX<span class="signature">(angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which rotates around the x-axis by the given angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotation matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotationY"><span class="type-signature">(static) </span>rotationY<span class="signature">(angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which rotates around the y-axis by the given angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotation matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".rotationZ"><span class="type-signature">(static) </span>rotationZ<span class="signature">(angleInRadians, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which rotates around the z-axis by the given angle.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>angleInRadians</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The angle by which to rotate (in radians).</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The rotation matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".scale"><span class="type-signature">(static) </span>scale<span class="signature">(m, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Scales the given 4-by-4 matrix in each dimension by an amount<br>
given by the corresponding entry in the given vector; assumes the vector has<br>
three entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix to be modified.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A vector of three entries specifying the<br>
factor by which to scale in each dimension.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The scaled matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".scaling"><span class="type-signature">(static) </span>scaling<span class="signature">(v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which scales in each dimension by an amount given by<br>
the corresponding entry in the given vector; assumes the vector has three<br>
entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>A vector of<br>
three entries specifying the factor by which to scale in each dimension.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The scaling matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setAxis"><span class="type-signature">(static) </span>setAxis<span class="signature">(m, v, axis, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Sets an axis of a 4x4 matrix as a vector with 3 entries</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>the axis vector</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>axis</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>number</code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The axis  0 = x, 1 = y, 2 = z;</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>The matrix to set. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The matrix with axis set.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setDefaultType"><span class="type-signature">(static) </span>setDefaultType<span class="signature">(ctor)</span><span class="type-signature"> &rarr; {constructor}</span></h4>

    
<div class="description">
    <p>Sets the type this library creates for a Mat4</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>ctor</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>constructor</code></span>


            </td>

            
            <td class="description last">
                <p>the constructor for the type. Either <code>Float32Array</code> or <code>Array</code></p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>constructor</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>previous constructor for Mat4</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".setTranslation"><span class="type-signature">(static) </span>setTranslation<span class="signature">(a, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Sets the translation component of a 4-by-4 matrix to the given<br>
vector.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>a</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vector.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The matrix with translation set.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".transformDirection"><span class="type-signature">(static) </span>transformDirection<span class="signature">(m, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>}</span></h4>

    
<div class="description">
    <p>Takes a 4-by-4 matrix and a vector with 3 entries, interprets the vector as a<br>
direction, transforms that direction by the matrix, and returns the result;<br>
assumes the transformation of 3-dimensional space represented by the matrix<br>
is parallel-preserving, i.e. any combination of rotation, scaling and<br>
translation, but not a perspective distortion. Returns a vector with 3<br>
entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>optional Vec3 to store result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The transformed direction.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".transformNormal"><span class="type-signature">(static) </span>transformNormal<span class="signature">(m, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>}</span></h4>

    
<div class="description">
    <p>Takes a 4-by-4 matrix m and a vector v with 3 entries, interprets the vector<br>
as a normal to a surface, and computes a vector which is normal upon<br>
transforming that surface by the matrix. The effect of this function is the<br>
same as transforming v (as a direction) by the inverse-transpose of m.  This<br>
function assumes the transformation of 3-dimensional space represented by the<br>
matrix is parallel-preserving, i.e. any combination of rotation, scaling and<br>
translation, but not a perspective distortion.  Returns a vector with 3<br>
entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>The direction. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The transformed normal.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".transformPoint"><span class="type-signature">(static) </span>transformPoint<span class="signature">(m, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a>}</span></h4>

    
<div class="description">
    <p>Takes a 4-by-4 matrix and a vector with 3 entries,<br>
interprets the vector as a point, transforms that point by the matrix, and<br>
returns the result as a vector with 3 entries.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>optional vec3 to store result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The transformed point.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".translate"><span class="type-signature">(static) </span>translate<span class="signature">(m, v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Translates the given 4-by-4 matrix by the given vector v.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></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"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vector by<br>
which to translate.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The translated matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".translation"><span class="type-signature">(static) </span>translation<span class="signature">(v, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Creates a 4-by-4 matrix which translates by the given vector v.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>v</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_v3.html#.Vec3">module:twgl/v3.Vec3</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vector by<br>
which to translate.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The translation matrix.</p>
</div>

    
</div>


</div>
        
            
<div class="section-method">

    
    <h4 class="name" id=".transpose"><span class="type-signature">(static) </span>transpose<span class="signature">(m, dst<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a>}</span></h4>

    
<div class="description">
    <p>Takes the transpose of a matrix.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>m</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The matrix.</p>
                
            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>dst</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last">
                <p>matrix to hold result. If not passed a new one is created.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


<div class="section-returns">
<h5>Returns:</h5>

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code><a href="module-twgl_m4.html#.Mat4">module:twgl/m4.Mat4</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The transpose of m.</p>
</div>

    
</div>


</div>
        
    
        <h3 class="subsection-title">Type Definitions</h3>

        
<div class="section-members">
<h4 class="name" id=".Mat4">Mat4</h4>


<div class="description">
    <p>A JavaScript array with 16 values or a Float32Array with 16 values.<br>
When created by the library will create the default type which is <code>Float32Array</code><br>
but can be set by calling <a href="module-twgl_m4.html#.setDefaultType"><code>module:twgl/m4.setDefaultType</code></a>.</p>
</div>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Array.&lt;number></code></span>
|

<span class="param-type"><code>Float32Array</code></span>


        </li>
    </ul>


</div>

            
</article>

</section>


</div>

<br class="clear">

<script src="scripts/prep.js"></script>
<script>prettyPrint();</script>
<script src="scripts/linenumber.js"></script>
</body>
</html>