docs/module-twgl_primitives.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>twgl/primitives - 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/primitives</h1>
    

<section>

<header>
    
        
</header>

<article>
    <div class="container-overview">
    
        
            <div class="description"><p>Various functions to make simple primitives</p>
<p>note: Most primitive functions come in 3 styles</p>
<ul>
<li>
<p><code>createSomeShapeBufferInfo</code></p>
<p>These functions are almost always the functions you want to call. They<br>
create vertices then make WebGLBuffers and create <a href="module-twgl.html#.AttribInfo"><code>module:twgl.AttribInfo</code></a>s<br>
returning a <a href="module-twgl.html#.BufferInfo"><code>module:twgl.BufferInfo</code></a> you can pass to <a href="module-twgl.html#.setBuffersAndAttributes"><code>module:twgl.setBuffersAndAttributes</code></a><br>
and <a href="module-twgl.html#.drawBufferInfo"><code>module:twgl.drawBufferInfo</code></a> etc...</p>
</li>
<li>
<p><code>createSomeShapeBuffers</code></p>
<p>These create WebGLBuffers and put your data in them but nothing else.<br>
It's a shortcut to doing it yourself if you don't want to use<br>
the higher level functions.</p>
</li>
<li>
<p><code>createSomeShapeVertices</code></p>
<p>These just create vertices, no buffers. This allows you to manipulate the vertices<br>
or add more data before generating a <a href="module-twgl.html#.BufferInfo"><code>module:twgl.BufferInfo</code></a>. Once you're finished<br>
manipulating the vertices call <a href="module-twgl.html#.createBufferInfoFromArrays"><code>module:twgl.createBufferInfoFromArrays</code></a>.</p>
<p>example:</p>
<pre><code>const arrays = twgl.primitives.createPlaneVertices(1);
twgl.primitives.reorientVertices(arrays, m4.rotationX(Math.PI * 0.5));
const bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);</code></pre>
</li>
</ul></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=".concatVertices"><span class="type-signature">(static) </span>concatVertices<span class="signature">(arrays)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.Arrays">module:twgl.Arrays</a>}</span></h4>

    
<div class="description">
    <p>Concatenates sets of vertices</p>
<p>Assumes the vertices match in composition. For example<br>
if one set of vertices has positions, normals, and indices<br>
all sets of vertices must have positions, normals, and indices<br>
and of the same type.</p>
<p>Example:</p>
<pre><code> const cubeVertices = twgl.primitives.createCubeVertices(2);
 const sphereVertices = twgl.primitives.createSphereVertices(1, 10, 10);
 // move the sphere 2 units up
 twgl.primitives.reorientVertices(
     sphereVertices, twgl.m4.translation([0, 2, 0]));
 // merge the sphere with the cube
 const cubeSphereVertices = twgl.primitives.concatVertices(
     [cubeVertices, sphereVertices]);
 // turn them into WebGL buffers and attrib data
 const bufferInfo = twgl.createBufferInfoFromArrays(gl, cubeSphereVertices);</code></pre>
</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>arrays</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;<a href="module-twgl.html#.Arrays">module:twgl.Arrays</a>></code></span>


            </td>

            
            <td class="description last">
                <p>Array of arrays of vertices</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.html#.Arrays">module:twgl.Arrays</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The concatenated vertices.</p>
</div>

    
</div>


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

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

    
<div class="description">
    <p>Creates 3D 'F' BufferInfo.<br>
An 'F' is useful because you can easily tell which way it is oriented.<br>
The created 'F' has position, normal, texcoord, and color buffers.</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>gl</code></td>
            

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


            </td>

            
            <td class="description last">
                <p>The WebGLRenderingContext.</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.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".create3DFBuffers"><span class="type-signature">(static) </span>create3DFBuffers<span class="signature">(gl)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates 3D 'F' buffers.<br>
An 'F' is useful because you can easily tell which way it is oriented.<br>
The created 'F' has position, normal, texcoord, and color buffers.</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>gl</code></td>
            

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


            </td>

            
            <td class="description last">
                <p>The WebGLRenderingContext.</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>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".create3DFVertices"><span class="type-signature">(static) </span>create3DFVertices<span class="signature">()</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates 3D 'F' vertices.<br>
An 'F' is useful because you can easily tell which way it is oriented.<br>
The created 'F' has position, normal, texcoord, and color arrays.</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createAugmentedTypedArray"><span class="type-signature">(static) </span>createAugmentedTypedArray<span class="signature">(numComponents, numElements, opt_type)</span><span class="type-signature"> &rarr; {ArrayBufferView}</span></h4>

    
<div class="description">
    <p>creates a typed array with a <code>push</code> function attached<br>
so that you can easily <em>push</em> values.</p>
<p><code>push</code> can take multiple arguments. If an argument is an array each element<br>
of the array will be added to the typed array.</p>
<p>Example:</p>
<pre><code>const array = createAugmentedTypedArray(3, 2);  // creates a Float32Array with 6 values
array.push(1, 2, 3);
array.push([4, 5, 6]);
// array now contains [1, 2, 3, 4, 5, 6]
</code></pre>
<p>Also has <code>numComponents</code> and <code>numElements</code> properties.</p>
</div>


<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>numComponents</code></td>
            

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


            </td>

            
            <td class="description last">
                <p>number of components</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>number of elements. The total size of the array will be <code>numComponents * numElements</code>.</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>A constructor for the type. Default = <code>Float32Array</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>ArrayBufferView</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>A typed array.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCrescentBufferInfo"><span class="type-signature">(static) </span>createCrescentBufferInfo<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates crescent BufferInfo.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCrescentBuffers"><span class="type-signature">(static) </span>createCrescentBuffers<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates crescent buffers.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCrescentVertices"><span class="type-signature">(static) </span>createCrescentVertices<span class="signature">(verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates crescent vertices.</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>verticalRadius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCresentBufferInfo"><span class="type-signature">(static) </span>createCresentBufferInfo<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates crescent BufferInfo.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCresentBuffers"><span class="type-signature">(static) </span>createCresentBuffers<span class="signature">(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates crescent buffers.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCresentBuffers"><span class="type-signature">(static) </span>createCresentBuffers<span class="signature">(verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, startOffset<span class="signature-attributes">opt</span>, endOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates crescent vertices.</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>verticalRadius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The vertical radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The outer radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The inner radius of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The thickness of the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the crescent.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to start arc. Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end arg. Default 1.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCubeBufferInfo"><span class="type-signature">(static) </span>createCubeBufferInfo<span class="signature">(gl, size<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a BufferInfo for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</p>
</div>


<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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>width, height and depth of the cube.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCubeBuffers"><span class="type-signature">(static) </span>createCubeBuffers<span class="signature">(gl, size<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates the buffers and indices for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</p>
</div>


<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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>width, height and depth of the cube.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCubeVertices"><span class="type-signature">(static) </span>createCubeVertices<span class="signature">(size<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates the vertices and indices for a cube.</p>
<p>The cube is created around the origin. (-size / 2, size / 2).</p>
</div>


<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>size</code></td>
            

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>width, height and depth of the cube.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCylinderBufferInfo"><span class="type-signature">(static) </span>createCylinderBufferInfo<span class="signature">(gl, radius, height, radialSubdivisions, verticalSubdivisions, topCap<span class="signature-attributes">opt</span>, bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates cylinder BufferInfo. The cylinder will be created around the origin<br>
along the y-axis.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCylinderBuffers"><span class="type-signature">(static) </span>createCylinderBuffers<span class="signature">(gl, radius, height, radialSubdivisions, verticalSubdivisions, topCap<span class="signature-attributes">opt</span>, bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates cylinder buffers. The cylinder will be created around the origin<br>
along the y-axis.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createCylinderVertices"><span class="type-signature">(static) </span>createCylinderVertices<span class="signature">(radius, height, radialSubdivisions, verticalSubdivisions, topCap<span class="signature-attributes">opt</span>, bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates cylinder vertices. The cylinder will be created around the origin<br>
along the y-axis.</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>radius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the cylinder.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createDiscBufferInfo"><span class="type-signature">(static) </span>createDiscBufferInfo<span class="signature">(gl, radius, divisions, stacks<span class="signature-attributes">opt</span>, innerRadius<span class="signature-attributes">opt</span>, stackPower<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a disc BufferInfo. The disc will be in the xz plane, centered at<br>
the origin. When creating, at least 3 divisions, or pie<br>
pieces, need to be specified, otherwise the triangles making<br>
up the disc will be degenerate. You can also specify the<br>
number of radial pieces <code>stacks</code>. A value of 1 for<br>
stacks will give you a simple disc of pie pieces.  If you<br>
want to create an annulus you can set <code>innerRadius</code> to a<br>
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths<br>
increase or decrease as you move away from the center. This<br>
is particularly useful when using the disc as a ground plane<br>
with a fixed camera such that you don't need the resolution<br>
of small triangles near the perimeter. For example, a value<br>
of 2 will produce stacks whose outside radius increases with<br>
the square of the stack index. A value of 1 will give uniform<br>
stacks.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of the ground plane.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Number of triangles in the ground plane (at least 3).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of radial divisions (default=1).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Power to raise stack size to for decreasing width.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createDiscBuffers"><span class="type-signature">(static) </span>createDiscBuffers<span class="signature">(gl, radius, divisions, stacks<span class="signature-attributes">opt</span>, innerRadius<span class="signature-attributes">opt</span>, stackPower<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates disc buffers. The disc will be in the xz plane, centered at<br>
the origin. When creating, at least 3 divisions, or pie<br>
pieces, need to be specified, otherwise the triangles making<br>
up the disc will be degenerate. You can also specify the<br>
number of radial pieces <code>stacks</code>. A value of 1 for<br>
stacks will give you a simple disc of pie pieces.  If you<br>
want to create an annulus you can set <code>innerRadius</code> to a<br>
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths<br>
increase or decrease as you move away from the center. This<br>
is particularly useful when using the disc as a ground plane<br>
with a fixed camera such that you don't need the resolution<br>
of small triangles near the perimeter. For example, a value<br>
of 2 will produce stacks whose outside radius increases with<br>
the square of the stack index. A value of 1 will give uniform<br>
stacks.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of the ground plane.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Number of triangles in the ground plane (at least 3).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of radial divisions (default=1).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Power to raise stack size to for decreasing width.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createDiscVertices"><span class="type-signature">(static) </span>createDiscVertices<span class="signature">(radius, divisions, stacks<span class="signature-attributes">opt</span>, innerRadius<span class="signature-attributes">opt</span>, stackPower<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates disc vertices. The disc will be in the xz plane, centered at<br>
the origin. When creating, at least 3 divisions, or pie<br>
pieces, need to be specified, otherwise the triangles making<br>
up the disc will be degenerate. You can also specify the<br>
number of radial pieces <code>stacks</code>. A value of 1 for<br>
stacks will give you a simple disc of pie pieces.  If you<br>
want to create an annulus you can set <code>innerRadius</code> to a<br>
value &gt; 0. Finally, <code>stackPower</code> allows you to have the widths<br>
increase or decrease as you move away from the center. This<br>
is particularly useful when using the disc as a ground plane<br>
with a fixed camera such that you don't need the resolution<br>
of small triangles near the perimeter. For example, a value<br>
of 2 will produce stacks whose outside radius increases with<br>
the square of the stack index. A value of 1 will give uniform<br>
stacks.</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>radius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Radius of the ground plane.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Number of triangles in the ground plane (at least 3).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of radial divisions (default=1).</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Default 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Power to raise stack size to for decreasing width.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createPlaneBufferInfo"><span class="type-signature">(static) </span>createPlaneBufferInfo<span class="signature">(gl, width<span class="signature-attributes">opt</span>, depth<span class="signature-attributes">opt</span>, subdivisionsWidth<span class="signature-attributes">opt</span>, subdivisionsDepth<span class="signature-attributes">opt</span>, matrix<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates XZ plane BufferInfo.</p>
<p>The created plane has position, normal, and texcoord data</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Width of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Depth of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps across the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps down the plane. Default = 1</p>
                
            </td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><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>A matrix by which to multiply all the vertices.</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.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created plane BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createPlaneBuffers"><span class="type-signature">(static) </span>createPlaneBuffers<span class="signature">(gl, width<span class="signature-attributes">opt</span>, depth<span class="signature-attributes">opt</span>, subdivisionsWidth<span class="signature-attributes">opt</span>, subdivisionsDepth<span class="signature-attributes">opt</span>, matrix<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates XZ plane buffers.</p>
<p>The created plane has position, normal, and texcoord data</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Width of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Depth of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps across the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps down the plane. Default = 1</p>
                
            </td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><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>A matrix by which to multiply all the vertices.</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>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created plane buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createPlaneVertices"><span class="type-signature">(static) </span>createPlaneVertices<span class="signature">(width<span class="signature-attributes">opt</span>, depth<span class="signature-attributes">opt</span>, subdivisionsWidth<span class="signature-attributes">opt</span>, subdivisionsDepth<span class="signature-attributes">opt</span>, matrix<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates XZ plane vertices.</p>
<p>The created plane has position, normal, and texcoord data</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>width</code></td>
            

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Width of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Depth of the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps across the plane. Default = 1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Number of steps down the plane. Default = 1</p>
                
            </td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><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>A matrix by which to multiply all the vertices.</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created plane vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createSphereBufferInfo"><span class="type-signature">(static) </span>createSphereBufferInfo<span class="signature">(gl, radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadians<span class="signature-attributes">opt</span>, opt_endLatitudeInRadians<span class="signature-attributes">opt</span>, opt_startLongitudeInRadians<span class="signature-attributes">opt</span>, opt_endLongitudeInRadians<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates sphere BufferInfo.</p>
<p>The created sphere has position, normal, and texcoord data</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of vertically on the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start the<br>
top of the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end the<br>
bottom of the sphere. Default = Math.PI.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start<br>
wrapping the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to end<br>
wrapping the sphere. Default = 2 * Math.PI.</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.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created sphere BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createSphereBuffers"><span class="type-signature">(static) </span>createSphereBuffers<span class="signature">(gl, radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadians<span class="signature-attributes">opt</span>, opt_endLatitudeInRadians<span class="signature-attributes">opt</span>, opt_startLongitudeInRadians<span class="signature-attributes">opt</span>, opt_endLongitudeInRadians<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates sphere buffers.</p>
<p>The created sphere has position, normal, and texcoord data</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of vertically on the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start the<br>
top of the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end the<br>
bottom of the sphere. Default = Math.PI.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start<br>
wrapping the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to end<br>
wrapping the sphere. Default = 2 * Math.PI.</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>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created sphere buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createSphereVertices"><span class="type-signature">(static) </span>createSphereVertices<span class="signature">(radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadians<span class="signature-attributes">opt</span>, opt_endLatitudeInRadians<span class="signature-attributes">opt</span>, opt_startLongitudeInRadians<span class="signature-attributes">opt</span>, opt_endLongitudeInRadians<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates sphere vertices.</p>
<p>The created sphere has position, normal, and texcoord data</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>radius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of steps around the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>number of vertically on the sphere.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start the<br>
top of the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Where to end the<br>
bottom of the sphere. Default = Math.PI.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to start<br>
wrapping the sphere. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>where to end<br>
wrapping the sphere. Default = 2 * Math.PI.</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created sphere vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTorusBufferInfo"><span class="type-signature">(static) </span>createTorusBufferInfo<span class="signature">(gl, radius, thickness, radialSubdivisions, bodySubdivisions, startAngle<span class="signature-attributes">opt</span>, endAngle<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates BufferInfo for a torus</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of center of torus circle.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of torus ring.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the torus.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the body torus.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>start angle in radians. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>end angle in radians. Default = Math.PI * 2.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>The created BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTorusBuffers"><span class="type-signature">(static) </span>createTorusBuffers<span class="signature">(gl, radius, thickness, radialSubdivisions, bodySubdivisions, startAngle<span class="signature-attributes">opt</span>, endAngle<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates buffers for a torus</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of center of torus circle.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of torus ring.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the torus.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the body torus.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>start angle in radians. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>end angle in radians. Default = Math.PI * 2.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTorusVertices"><span class="type-signature">(static) </span>createTorusVertices<span class="signature">(radius, thickness, radialSubdivisions, bodySubdivisions, startAngle<span class="signature-attributes">opt</span>, endAngle<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates vertices for a torus</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>radius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of center of torus circle.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>radius of torus ring.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the torus.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the body torus.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>start angle in radians. Default = 0.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>end angle in radians. Default = Math.PI * 2.</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTruncatedConeBufferInfo"><span class="type-signature">(static) </span>createTruncatedConeBufferInfo<span class="signature">(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCap<span class="signature-attributes">opt</span>, opt_bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates a BufferInfo for a truncated cone, which is like a cylinder<br>
except that it has different top and bottom radii. A truncated cone<br>
can also be used to create cylinders and regular cones. The<br>
truncated cone will be created centered about the origin, with the<br>
y axis as its vertical axis.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Bottom radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Top radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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.html#.BufferInfo">module:twgl.BufferInfo</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created cone BufferInfo.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTruncatedConeBuffers"><span class="type-signature">(static) </span>createTruncatedConeBuffers<span class="signature">(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCap<span class="signature-attributes">opt</span>, opt_bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates buffers for a truncated cone, which is like a cylinder<br>
except that it has different top and bottom radii. A truncated cone<br>
can also be used to create cylinders and regular cones. The<br>
truncated cone will be created centered about the origin, with the<br>
y axis as its vertical axis.</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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Bottom radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Top radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created cone buffers.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createTruncatedConeVertices"><span class="type-signature">(static) </span>createTruncatedConeVertices<span class="signature">(bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCap<span class="signature-attributes">opt</span>, opt_bottomCap<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates vertices for a truncated cone, which is like a cylinder<br>
except that it has different top and bottom radii. A truncated cone<br>
can also be used to create cylinders and regular cones. The<br>
truncated cone will be created centered about the origin, with the<br>
y axis as its vertical axis. .</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>bottomRadius</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Bottom radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Top radius of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Height of truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions around the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>The number of subdivisions down the<br>
truncated cone.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create top cap. Default = true.</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>Create bottom cap. Default = true.</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The created cone vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createXYQuadBufferInfo"><span class="type-signature">(static) </span>createXYQuadBufferInfo<span class="signature">(gl, size<span class="signature-attributes">opt</span>, xOffset<span class="signature-attributes">opt</span>, yOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {<a href="module-twgl.html#.BufferInfo">module:twgl.BufferInfo</a>}</span></h4>

    
<div class="description">
    <p>Creates XY quad Buffers</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.<br>
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);
</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);</code></pre>
</div>


<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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in X</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in Y</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

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


    </dd>
</dl>


<div class="param-desc">
    <p>the created XY Quad buffers</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createXYQuadBuffers"><span class="type-signature">(static) </span>createXYQuadBuffers<span class="signature">(gl, size<span class="signature-attributes">opt</span>, xOffset<span class="signature-attributes">opt</span>, yOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, WebGLBuffer>}</span></h4>

    
<div class="description">
    <p>Creates XY quad BufferInfo</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.<br>
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);
</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);</code></pre>
</div>


<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>gl</code></td>
            

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


            </td>

            
                <td class="attributes">
                

                </td>
            

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

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in X</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in Y</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, WebGLBuffer></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created XY Quad BufferInfo</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".createXYQuadVertices"><span class="type-signature">(static) </span>createXYQuadVertices<span class="signature">(size<span class="signature-attributes">opt</span>, xOffset<span class="signature-attributes">opt</span>, yOffset<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Creates XY quad vertices</p>
<p>The default with no parameters will return a 2x2 quad with values from -1 to +1.<br>
If you want a unit quad with that goes from 0 to 1 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadVertices(1, 0.5, 0.5);
</code></pre>
<p>If you want a unit quad centered above 0,0 you'd call it with</p>
<pre><code>twgl.primitives.createXYQuadVertices(1, 0, 0.5);</code></pre>
</div>


<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>size</code></td>
            

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the size across the quad. Defaults to 2 which means vertices will go from -1 to +1</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in X</p>
                
            </td>
        </tr>

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

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


            </td>

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

                </td>
            

            <td class="description last">
                <p>the amount to offset the quad in Y</p>
                
            </td>
        </tr>

    
    </tbody>
</table>


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

        
<dl class="param-type">
    <dt>
        Type:
    </dt>
    <dd>
        
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>the created XY Quad vertices</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".deindexVertices"><span class="type-signature">(static) </span>deindexVertices<span class="signature">(vertices)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>Given indexed vertices creates a new set of vertices un-indexed by expanding the indexed vertices.</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>vertices</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


            </td>

            
            <td class="description last">
                <p>The indexed vertices to deindex</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The deindexed vertices</p>
</div>

    
</div>


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

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

    
<div class="description">
    <p>Creates a duplicate set of vertices</p>
<p>This is useful for calling reorientVertices when you<br>
also want to keep the original available</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>arrays</code></td>
            

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


            </td>

            
            <td class="description last">
                <p>of vertices</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.html#.Arrays">module:twgl.Arrays</a></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The duplicated vertices.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".flattenNormals"><span class="type-signature">(static) </span>flattenNormals<span class="signature">(vertices)</span><span class="type-signature"> &rarr; {Object.&lt;string, TypedArray>}</span></h4>

    
<div class="description">
    <p>flattens the normals of deindexed vertices in place.</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>vertices</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, TypedArray></code></span>


            </td>

            
            <td class="description last">
                <p>The deindexed vertices who's normals to flatten</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>Object.&lt;string, TypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>The flattened vertices (same as was passed in)</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".makeRandomVertexColors"><span class="type-signature">(static) </span>makeRandomVertexColors<span class="signature">(vertices, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"> &rarr; {Object.&lt;string, AugmentedTypedArray>}</span></h4>

    
<div class="description">
    <p>Creates an augmentedTypedArray of random vertex colors.<br>
If the vertices are indexed (have an indices array) then will<br>
just make random colors. Otherwise assumes they are triangles<br>
and makes one random color for every 3 vertices.</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>vertices</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, AugmentedTypedArray></code></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last">
                <p>Vertices as returned from one of the createXXXVertices functions.</p>
                
            </td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_primitives.html#.RandomVerticesOptions">module:twgl/primitives.RandomVerticesOptions</a></code></span>


            </td>

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

                </td>
            

            <td class="description last">
                <p>options.</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>Object.&lt;string, AugmentedTypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>same vertices as passed in with <code>color</code> added.</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".reorientDirections"><span class="type-signature">(static) </span>reorientDirections<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>

    
<div class="description">
    <p>Reorients directions by the given matrix..</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>array</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

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


            </td>

            
            <td class="description last">
                <p>The array. Assumes value floats per element.</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>A matrix to multiply by.</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>Array.&lt;number></code></span>
|

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


    </dd>
</dl>


<div class="param-desc">
    <p>the same array that was passed in</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".reorientNormals"><span class="type-signature">(static) </span>reorientNormals<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>

    
<div class="description">
    <p>Reorients normals by the inverse-transpose of the given<br>
matrix..</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>array</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

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


            </td>

            
            <td class="description last">
                <p>The array. Assumes value floats per element.</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>A matrix to multiply by.</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>Array.&lt;number></code></span>
|

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


    </dd>
</dl>


<div class="param-desc">
    <p>the same array that was passed in</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".reorientPositions"><span class="type-signature">(static) </span>reorientPositions<span class="signature">(array, matrix)</span><span class="type-signature"> &rarr; {Array.&lt;number>|TypedArray}</span></h4>

    
<div class="description">
    <p>Reorients positions by the given matrix. In other words, it<br>
multiplies each vertex by the given matrix.</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>array</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Array.&lt;number></code></span>
|

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


            </td>

            
            <td class="description last">
                <p>The array. Assumes value floats per element.</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>A matrix to multiply by.</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>Array.&lt;number></code></span>
|

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


    </dd>
</dl>


<div class="param-desc">
    <p>the same array that was passed in</p>
</div>

    
</div>


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

    
    <h4 class="name" id=".reorientVertices"><span class="type-signature">(static) </span>reorientVertices<span class="signature">(arrays, matrix)</span><span class="type-signature"> &rarr; {Object.&lt;string, NativeArrayOrTypedArray>}</span></h4>

    
<div class="description">
    <p>Reorients arrays by the given matrix. Assumes arrays have<br>
names that contains 'pos' could be reoriented as positions,<br>
'binorm' or 'tan' as directions, and 'norm' as normals.</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>arrays</code></td>
            

            <td class="type">
            
                
<span class="param-type"><code>Object.&lt;string, NativeArrayOrTypedArray></code></span>


            </td>

            
            <td class="description last">
                <p>The vertices to reorient</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>matrix to reorient by.</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>Object.&lt;string, NativeArrayOrTypedArray></code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>same arrays that were passed in.</p>
</div>

    
</div>


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

        
<div class="section-method">

    
    <h4 class="name" id=".RandomColorFunc"><span class="type-signature"></span>RandomColorFunc<span class="signature">(ndx, channel)</span><span class="type-signature"> &rarr; {number}</span></h4>

    
<div class="description">
    <p>Used to supply random colors</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>ndx</code></td>
            

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


            </td>

            
            <td class="description last">
                <p>index of triangle/quad if unindexed or index of vertex if indexed</p>
                
            </td>
        </tr>

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

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


            </td>

            
            <td class="description last">
                <p>0 = red, 1 = green, 2 = blue, 3 = alpha</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>number</code></span>


    </dd>
</dl>


<div class="param-desc">
    <p>a number from 0 to 255</p>
</div>

    
</div>


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


    <h5 class="subsection-title">Properties:</h5>

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

        <th>Type</th>

        
        <th>Attributes</th>
        

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

    <tbody>
    

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

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


            </td>

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

                </td>
            

            <td class="description last"><p>Defaults to 3 for non-indexed vertices</p></td>
        </tr>

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

            <td class="type">
            
                
<span class="param-type"><code><a href="module-twgl_primitives.html#.RandomColorFunc">module:twgl/primitives.RandomColorFunc</a></code></span>


            </td>

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

                </td>
            

            <td class="description last"><p>A function to generate random numbers</p></td>
        </tr>

        
    </tbody>
</table>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Object</code></span>


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id="~NativeArrayOrTypedArray">NativeArrayOrTypedArray</h4>


<dl class="details">

    
</dl>


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

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


        </li>
    </ul>


</div>

            
<div class="section-members">
<h4 class="name" id="~TypedArray">TypedArray</h4>


<dl class="details">

    
</dl>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><code>Int8Array</code></span>
|

<span class="param-type"><code>Uint8Array</code></span>
|

<span class="param-type"><code>Int16Array</code></span>
|

<span class="param-type"><code>Uint16Array</code></span>
|

<span class="param-type"><code>Int32Array</code></span>
|

<span class="param-type"><code>Uint32Array</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>