twgl/primitives

Various functions to make simple primitives

note: Most primitive functions come in 3 styles

  • createSomeShapeBufferInfo

    These functions are almost always the functions you want to call. They
    create vertices then make WebGLBuffers and create module:twgl.AttribInfos
    returing a module:twgl.BufferInfo you can pass to module:twgl.setBuffersAndAttributes
    and module:twgl.drawBufferInfo etc...

  • createSomeShapeBuffers

    These create WebGLBuffers and put your data in them but nothing else.
    It's a shortcut to doing it yourself if you don't want to use
    the higher level functions.

  • createSomeShapeVertices

    These just create vertices, no buffers. This allows you to manipulate the vertices
    or add more data before generating a module:twgl.BufferInfo. Once you're finished
    manipulating the vertices call module:twgl.createBufferInfoFromArrays.

    example:

    var arrays = twgl.primitives.createPlaneArrays(1);
    twgl.primitives.reorientVertices(arrays, m4.rotationX(Math.PI * 0.5));
    var bufferInfo = twgl.createBufferInfoFromArrays(gl, arrays);

Methods

(static) concatVertices(arrays) → {module:twgl.Arrays}

Concatinates sets of vertices

Assumes the vertices match in composition. For example
if one set of vertices has positions, normals, and indices
all sets of vertices must have positions, normals, and indices
and of the same type.

Example:

 var cubeVertices = twgl.primtiives.createCubeVertices(2);
 var 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
 var cubeSphereVertices = twgl.primitives.concatVertices(
     [cubeVertices, sphereVertices]);
 // turn them into WebGL buffers and attrib data
 var bufferInfo = twgl.createBufferInfoFromArrays(gl, cubeSphereVertices);
Parameters:
Name Type Description
arrays Array.<module:twgl.Arrays>

Array of arrays of vertices

Returns:

The concatinated vertices.

Type
module:twgl.Arrays

(static) create3DFBufferInfo(gl) → {module:twgl.BufferInfo}

Creates 3D 'F' BufferInfo.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color buffers.

Parameters:
Name Type Description
gl WebGLRenderingContext

The WebGLRenderingContext.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) create3DFBuffers(gl) → {Object.<string, WebGLBuffer>}

Creates 3D 'F' buffers.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color buffers.

Parameters:
Name Type Description
gl WebGLRenderingContext

The WebGLRenderingContext.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) create3DFVertices() → {Object.<string, TypedArray>}

Creates 3D 'F' vertices.
An 'F' is useful because you can easily tell which way it is oriented.
The created 'F' has position, normal, texcoord, and color arrays.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createAugmentedTypedArray(numComponents, numElements, opt_type) → {ArrayBuffer}

creates a typed array with a push function attached
so that you can easily push values.

push can take multiple arguments. If an argument is an array each element
of the array will be added to the typed array.

Example:

var 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]

Also has numComponents and numElements properties.

Parameters:
Name Type Description
numComponents number

number of components

numElements number

number of elements. The total size of the array will be numComponents * numElements.

opt_type constructor

A constructor for the type. Default = Float32Array.

Returns:

A typed array.

Type
ArrayBuffer

(static) createCresentBufferInfo(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, startOffsetopt, endOffsetopt) → {module:twgl.BufferInfo}

Creates cresent BufferInfo.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

verticalRadius number

The vertical radius of the cresent.

outerRadius number

The outer radius of the cresent.

innerRadius number

The inner radius of the cresent.

thickness number

The thickness of the cresent.

subdivisionsDown number

number of steps around the cresent.

subdivisionsThick number

number of vertically on the cresent.

startOffset number <optional>

Where to start arc. Default 0.

endOffset number <optional>

Where to end arg. Default 1.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) createCresentBuffers(gl, verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, startOffsetopt, endOffsetopt) → {Object.<string, WebGLBuffer>}

Creates cresent buffers.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

verticalRadius number

The vertical radius of the cresent.

outerRadius number

The outer radius of the cresent.

innerRadius number

The inner radius of the cresent.

thickness number

The thickness of the cresent.

subdivisionsDown number

number of steps around the cresent.

subdivisionsThick number

number of vertically on the cresent.

startOffset number <optional>

Where to start arc. Default 0.

endOffset number <optional>

Where to end arg. Default 1.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) createCresentVertices(verticalRadius, outerRadius, innerRadius, thickness, subdivisionsDown, subdivisionsThick, startOffsetopt, endOffsetopt) → {Object.<string, TypedArray>}

Creates cresent vertices.

Parameters:
Name Type Attributes Description
verticalRadius number

The vertical radius of the cresent.

outerRadius number

The outer radius of the cresent.

innerRadius number

The inner radius of the cresent.

thickness number

The thickness of the cresent.

subdivisionsDown number

number of steps around the cresent.

subdivisionsThick number

number of vertically on the cresent.

startOffset number <optional>

Where to start arc. Default 0.

endOffset number <optional>

Where to end arg. Default 1.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createCubeBufferInfo(gl, sizeopt) → {module:twgl.BufferInfo}

Creates a BufferInfo for a cube.

The cube is created around the origin. (-size / 2, size / 2).

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

size number <optional>

width, height and depth of the cube.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) createCubeBuffers(gl, sizeopt) → {Object.<string, WebGLBuffer>}

Creates the buffers and indices for a cube.

The cube is created around the origin. (-size / 2, size / 2).

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

size number <optional>

width, height and depth of the cube.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) createCubeVertices(sizeopt) → {Object.<string, TypedArray>}

Creates the vertices and indices for a cube.

The cube is created around the origin. (-size / 2, size / 2).

Parameters:
Name Type Attributes Description
size number <optional>

width, height and depth of the cube.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createCylinderBufferInfo(gl, radius, height, radialSubdivisions, verticalSubdivisions, topCapopt, bottomCapopt) → {module:twgl.BufferInfo}

Creates cylinder BufferInfo. The cylinder will be created around the origin
along the y-axis.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

Radius of cylinder.

height number

Height of cylinder.

radialSubdivisions number

The number of subdivisions around the cylinder.

verticalSubdivisions number

The number of subdivisions down the cylinder.

topCap boolean <optional>

Create top cap. Default = true.

bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) createCylinderBuffers(gl, radius, height, radialSubdivisions, verticalSubdivisions, topCapopt, bottomCapopt) → {Object.<string, WebGLBuffer>}

Creates cylinder buffers. The cylinder will be created around the origin
along the y-axis.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

Radius of cylinder.

height number

Height of cylinder.

radialSubdivisions number

The number of subdivisions around the cylinder.

verticalSubdivisions number

The number of subdivisions down the cylinder.

topCap boolean <optional>

Create top cap. Default = true.

bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) createCylinderVertices(radius, height, radialSubdivisions, verticalSubdivisions, topCapopt, bottomCapopt) → {Object.<string, TypedArray>}

Creates cylinder vertices. The cylinder will be created around the origin
along the y-axis.

Parameters:
Name Type Attributes Description
radius number

Radius of cylinder.

height number

Height of cylinder.

radialSubdivisions number

The number of subdivisions around the cylinder.

verticalSubdivisions number

The number of subdivisions down the cylinder.

topCap boolean <optional>

Create top cap. Default = true.

bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createDiscBufferInfo(gl, radius, divisions, stacksopt, innerRadiusopt, stackPoweropt) → {module:twgl.BufferInfo}

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

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

Radius of the ground plane.

divisions number

Number of triangles in the ground plane (at least 3).

stacks number <optional>

Number of radial divisions (default=1).

innerRadius number <optional>

Default 0.

stackPower number <optional>

Power to raise stack size to for decreasing width.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) createDiscBuffers(gl, radius, divisions, stacksopt, innerRadiusopt, stackPoweropt) → {Object.<string, WebGLBuffer>}

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

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

Radius of the ground plane.

divisions number

Number of triangles in the ground plane (at least 3).

stacks number <optional>

Number of radial divisions (default=1).

innerRadius number <optional>

Default 0.

stackPower number <optional>

Power to raise stack size to for decreasing width.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) createDiscVertices(radius, divisions, stacksopt, innerRadiusopt, stackPoweropt) → {Object.<string, TypedArray>}

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

Parameters:
Name Type Attributes Description
radius number

Radius of the ground plane.

divisions number

Number of triangles in the ground plane (at least 3).

stacks number <optional>

Number of radial divisions (default=1).

innerRadius number <optional>

Default 0.

stackPower number <optional>

Power to raise stack size to for decreasing width.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createPlaneBufferInfo(gl, widthopt, depthopt, subdivisionsWidthopt, subdivisionsDepthopt, matrixopt)

Creates XZ plane BufferInfo.

The created plane has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

width number <optional>

Width of the plane. Default = 1

depth number <optional>

Depth of the plane. Default = 1

subdivisionsWidth number <optional>

Number of steps across the plane. Default = 1

subdivisionsDepth number <optional>

Number of steps down the plane. Default = 1

matrix Matrix4 <optional>

A matrix by which to multiply all the vertices.

Returns:

[email protected]:twgl.BufferInfo} The created plane BufferInfo.

(static) createPlaneBuffers(gl, widthopt, depthopt, subdivisionsWidthopt, subdivisionsDepthopt, matrixopt) → {Object.<string, WebGLBuffer>}

Creates XZ plane buffers.

The created plane has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

width number <optional>

Width of the plane. Default = 1

depth number <optional>

Depth of the plane. Default = 1

subdivisionsWidth number <optional>

Number of steps across the plane. Default = 1

subdivisionsDepth number <optional>

Number of steps down the plane. Default = 1

matrix Matrix4 <optional>

A matrix by which to multiply all the vertices.

Returns:

The created plane buffers.

Type
Object.<string, WebGLBuffer>

(static) createPlaneVertices(widthopt, depthopt, subdivisionsWidthopt, subdivisionsDepthopt, matrixopt) → {Object.<string, TypedArray>}

Creates XZ plane vertices.

The created plane has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
width number <optional>

Width of the plane. Default = 1

depth number <optional>

Depth of the plane. Default = 1

subdivisionsWidth number <optional>

Number of steps across the plane. Default = 1

subdivisionsDepth number <optional>

Number of steps down the plane. Default = 1

matrix Matrix4 <optional>

A matrix by which to multiply all the vertices.

Returns:

The created plane vertices.

Type
Object.<string, TypedArray>

(static) createSphereBufferInfo(gl, radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadiansopt, opt_endLatitudeInRadiansopt, opt_startLongitudeInRadiansopt, opt_endLongitudeInRadiansopt) → {module:twgl.BufferInfo}

Creates sphere BufferInfo.

The created sphere has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

radius of the sphere.

subdivisionsAxis number

number of steps around the sphere.

subdivisionsHeight number

number of vertically on the sphere.

opt_startLatitudeInRadians number <optional>

where to start the
top of the sphere. Default = 0.

opt_endLatitudeInRadians number <optional>

Where to end the
bottom of the sphere. Default = Math.PI.

opt_startLongitudeInRadians number <optional>

where to start
wrapping the sphere. Default = 0.

opt_endLongitudeInRadians number <optional>

where to end
wrapping the sphere. Default = 2 * Math.PI.

Returns:

The created sphere BufferInfo.

Type
module:twgl.BufferInfo

(static) createSphereBuffers(gl, radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadiansopt, opt_endLatitudeInRadiansopt, opt_startLongitudeInRadiansopt, opt_endLongitudeInRadiansopt) → {Object.<string, WebGLBuffer>}

Creates sphere buffers.

The created sphere has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

radius of the sphere.

subdivisionsAxis number

number of steps around the sphere.

subdivisionsHeight number

number of vertically on the sphere.

opt_startLatitudeInRadians number <optional>

where to start the
top of the sphere. Default = 0.

opt_endLatitudeInRadians number <optional>

Where to end the
bottom of the sphere. Default = Math.PI.

opt_startLongitudeInRadians number <optional>

where to start
wrapping the sphere. Default = 0.

opt_endLongitudeInRadians number <optional>

where to end
wrapping the sphere. Default = 2 * Math.PI.

Returns:

The created sphere buffers.

Type
Object.<string, WebGLBuffer>

(static) createSphereVertices(radius, subdivisionsAxis, subdivisionsHeight, opt_startLatitudeInRadiansopt, opt_endLatitudeInRadiansopt, opt_startLongitudeInRadiansopt, opt_endLongitudeInRadiansopt) → {Object.<string, TypedArray>}

Creates sphere vertices.

The created sphere has position, normal, and texcoord data

Parameters:
Name Type Attributes Description
radius number

radius of the sphere.

subdivisionsAxis number

number of steps around the sphere.

subdivisionsHeight number

number of vertically on the sphere.

opt_startLatitudeInRadians number <optional>

where to start the
top of the sphere. Default = 0.

opt_endLatitudeInRadians number <optional>

Where to end the
bottom of the sphere. Default = Math.PI.

opt_startLongitudeInRadians number <optional>

where to start
wrapping the sphere. Default = 0.

opt_endLongitudeInRadians number <optional>

where to end
wrapping the sphere. Default = 2 * Math.PI.

Returns:

The created sphere vertices.

Type
Object.<string, TypedArray>

(static) createTorusBufferInfo(gl, radius, thickness, radialSubdivisions, bodySubdivisions, startAngleopt, endAngleopt) → {module:twgl.BufferInfo}

Creates BufferInfo for a torus

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

radius of center of torus circle.

thickness number

radius of torus ring.

radialSubdivisions number

The number of subdivisions around the torus.

bodySubdivisions number

The number of subdivisions around the body torus.

startAngle boolean <optional>

start angle in radians. Default = 0.

endAngle boolean <optional>

end angle in radians. Default = Math.PI * 2.

Returns:

The created BufferInfo.

Type
module:twgl.BufferInfo

(static) createTorusBuffers(gl, radius, thickness, radialSubdivisions, bodySubdivisions, startAngleopt, endAngleopt) → {Object.<string, WebGLBuffer>}

Creates buffers for a torus

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

radius number

radius of center of torus circle.

thickness number

radius of torus ring.

radialSubdivisions number

The number of subdivisions around the torus.

bodySubdivisions number

The number of subdivisions around the body torus.

startAngle boolean <optional>

start angle in radians. Default = 0.

endAngle boolean <optional>

end angle in radians. Default = Math.PI * 2.

Returns:

The created buffers.

Type
Object.<string, WebGLBuffer>

(static) createTorusVertices(radius, thickness, radialSubdivisions, bodySubdivisions, startAngleopt, endAngleopt) → {Object.<string, TypedArray>}

Creates vertices for a torus

Parameters:
Name Type Attributes Description
radius number

radius of center of torus circle.

thickness number

radius of torus ring.

radialSubdivisions number

The number of subdivisions around the torus.

bodySubdivisions number

The number of subdivisions around the body torus.

startAngle boolean <optional>

start angle in radians. Default = 0.

endAngle boolean <optional>

end angle in radians. Default = Math.PI * 2.

Returns:

The created vertices.

Type
Object.<string, TypedArray>

(static) createTruncatedConeBufferInfo(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCapopt, opt_bottomCapopt) → {module:twgl.BufferInfo}

Creates a BufferInfo for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

bottomRadius number

Bottom radius of truncated cone.

topRadius number

Top radius of truncated cone.

height number

Height of truncated cone.

radialSubdivisions number

The number of subdivisions around the
truncated cone.

verticalSubdivisions number

The number of subdivisions down the
truncated cone.

opt_topCap boolean <optional>

Create top cap. Default = true.

opt_bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created cone BufferInfo.

Type
module:twgl.BufferInfo

(static) createTruncatedConeBuffers(gl, bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCapopt, opt_bottomCapopt) → {Object.<string, WebGLBuffer>}

Creates buffers for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis.

Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

bottomRadius number

Bottom radius of truncated cone.

topRadius number

Top radius of truncated cone.

height number

Height of truncated cone.

radialSubdivisions number

The number of subdivisions around the
truncated cone.

verticalSubdivisions number

The number of subdivisions down the
truncated cone.

opt_topCap boolean <optional>

Create top cap. Default = true.

opt_bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created cone buffers.

Type
Object.<string, WebGLBuffer>

(static) createTruncatedConeVertices(bottomRadius, topRadius, height, radialSubdivisions, verticalSubdivisions, opt_topCapopt, opt_bottomCapopt) → {Object.<string, TypedArray>}

Creates vertices for a truncated cone, which is like a cylinder
except that it has different top and bottom radii. A truncated cone
can also be used to create cylinders and regular cones. The
truncated cone will be created centered about the origin, with the
y axis as its vertical axis. .

Parameters:
Name Type Attributes Description
bottomRadius number

Bottom radius of truncated cone.

topRadius number

Top radius of truncated cone.

height number

Height of truncated cone.

radialSubdivisions number

The number of subdivisions around the
truncated cone.

verticalSubdivisions number

The number of subdivisions down the
truncated cone.

opt_topCap boolean <optional>

Create top cap. Default = true.

opt_bottomCap boolean <optional>

Create bottom cap. Default = true.

Returns:

The created cone vertices.

Type
Object.<string, TypedArray>

(static) createXYQuadBufferInfo(gl, sizeopt, xOffsetopt, yOffsetopt) → {Object.<string, WebGLBuffer>}

Creates XY quad BufferInfo

The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with

twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);

If you want a unit quad centered above 0,0 you'd call it with

twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

size number <optional>

the size across the quad. Defaults to 2 which means vertices will go from -1 to +1

xOffset number <optional>

the amount to offset the quad in X

yOffset number <optional>

the amount to offset the quad in Y

Returns:

the created XY Quad BufferInfo

Type
Object.<string, WebGLBuffer>

(static) createXYQuadBuffers(gl, sizeopt, xOffsetopt, yOffsetopt) → {module:twgl.BufferInfo}

Creates XY quad Buffers

The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with

twgl.primitives.createXYQuadBufferInfo(gl, 1, 0.5, 0.5);

If you want a unit quad centered above 0,0 you'd call it with

twgl.primitives.createXYQuadBufferInfo(gl, 1, 0, 0.5);
Parameters:
Name Type Attributes Description
gl WebGLRenderingContext

The WebGLRenderingContext.

size number <optional>

the size across the quad. Defaults to 2 which means vertices will go from -1 to +1

xOffset number <optional>

the amount to offset the quad in X

yOffset number <optional>

the amount to offset the quad in Y

Returns:

the created XY Quad buffers

Type
module:twgl.BufferInfo

(static) createXYQuadVertices(sizeopt, xOffsetopt, yOffsetopt)

Creates XY quad vertices

The default with no parameters will return a 2x2 quad with values from -1 to +1.
If you want a unit quad with that goes from 0 to 1 you'd call it with

twgl.primitives.createXYQuadVertices(1, 0.5, 0.5);

If you want a unit quad centered above 0,0 you'd call it with

twgl.primitives.createXYQuadVertices(1, 0, 0.5);
Parameters:
Name Type Attributes Description
size number <optional>

the size across the quad. Defaults to 2 which means vertices will go from -1 to +1

xOffset number <optional>

the amount to offset the quad in X

yOffset number <optional>

the amount to offset the quad in Y

Returns:

{Object. the created XY Quad vertices

(static) deindexVertices(vertices) → {Object.<string, TypedArray>}

Given indexed vertices creates a new set of vertices unindexed by expanding the indexed vertices.

Parameters:
Name Type Description
vertices Object.<string, TypedArray>

The indexed vertices to deindex

Returns:

The deindexed vertices

Type
Object.<string, TypedArray>

(static) duplicateVertices(arrays) → {module:twgl.Arrays}

Creates a duplicate set of vertices

This is useful for calling reorientVertices when you
also want to keep the original available

Parameters:
Name Type Description
arrays module:twgl.Arrays

of vertices

Returns:

The dupilicated vertices.

Type
module:twgl.Arrays

(static) flattenNormals(vertices) → {Object.<string, TypedArray>}

flattens the normals of deindexed vertices in place.

Parameters:
Name Type Description
vertices Object.<string, TypedArray>

The deindexed vertices who's normals to flatten

Returns:

The flattened vertices (same as was passed in)

Type
Object.<string, TypedArray>

(static) makeRandomVertexColors(vertices, optionsopt) → {Object.<string, augmentedTypedArray>}

Creates an augmentedTypedArray of random vertex colors.
If the vertices are indexed (have an indices array) then will
just make random colors. Otherwise assumes they are triangles
and makes one random color for every 3 vertices.

Parameters:
Name Type Attributes Description
vertices Object.<string, augmentedTypedArray>

Vertices as returned from one of the createXXXVertices functions.

options module:twgl/primitives.RandomVerticesOptions <optional>

options.

Returns:

same vertices as passed in with color added.

Type
Object.<string, augmentedTypedArray>

(static) reorientDirections(array, matrix) → {Array.<number>|TypedArray}

Reorients directions by the given matrix..

Parameters:
Name Type Description
array Array.<number> | TypedArray

The array. Assumes value floats per element.

matrix Matrix

A matrix to multiply by.

Returns:

the same array that was passed in

Type
Array.<number> | TypedArray

(static) reorientNormals(array, matrix) → {Array.<number>|TypedArray}

Reorients normals by the inverse-transpose of the given
matrix..

Parameters:
Name Type Description
array Array.<number> | TypedArray

The array. Assumes value floats per element.

matrix Matrix

A matrix to multiply by.

Returns:

the same array that was passed in

Type
Array.<number> | TypedArray

(static) reorientPositions(array, matrix) → {Array.<number>|TypedArray}

Reorients positions by the given matrix. In other words, it
multiplies each vertex by the given matrix.

Parameters:
Name Type Description
array Array.<number> | TypedArray

The array. Assumes value floats per element.

matrix Matrix

A matrix to multiply by.

Returns:

the same array that was passed in

Type
Array.<number> | TypedArray

(static) reorientVertices(arrays, matrix) → {Object.<string, (Array.<number>|TypedArray)>}

Reorients arrays by the given matrix. Assumes arrays have
names that contains 'pos' could be reoriented as positions,
'binorm' or 'tan' as directions, and 'norm' as normals.

Parameters:
Name Type Description
arrays Object.<string, (Array.<number>|TypedArray)>

The vertices to reorient

matrix Matrix

matrix to reorient by.

Returns:

same arrays that were passed in.

Type
Object.<string, (Array.<number>|TypedArray)>

Type Definitions

RandomColorFunc(ndx, channel) → {number}

Used to supply random colors

Parameters:
Name Type Description
ndx number

index of triangle/quad if unindexed or index of vertex if indexed

channel number

0 = red, 1 = green, 2 = blue, 3 = alpha

Returns:

a number from 0 to 255

Type
number

RandomVerticesOptions

Type:
  • Object
Properties:
Name Type Attributes Description
vertsPerColor number <optional>

Defaults to 3 for non-indexed vertices

rand module:twgl/primitives.RandomColorFunc <optional>

A function to generate random numbers