Global

Members

(constant) animate

Define an animation loop.

Step 0.5° ⇒ 60 fps = 30°/s ⇒ 360° in 12s
Source:
See:

axis :String

Rotation axis.
Type:
  • String
Source:

axisBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

axisColorBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) axisColors :Float32Array

Colors for creating the axes.
Type:
  • Float32Array
Source:

(constant) axisVertices :Float32Array

Vertex coordinates for creating the axes.
Type:
  • Float32Array
Source:

colorShader :WebGLShader

Handle to the compiled shader program on the GPU.
Type:
  • WebGLShader
Source:

culling :Boolean

Toggle back face culling on/off.
Type:
  • Boolean
Source:
See:

currentLocation :String

Name of the current city location.
Type:
  • String
Source:

(constant) eye :vec3

Camera position.
Type:
Source:

fixuv :Boolean

Whether uv spherical coordinates should be "fixed", when converted from cartesian (seamless).
Type:
  • Boolean
Source:
See:

gl :WebGL2RenderingContext

The OpenGL context.
Type:
  • WebGL2RenderingContext
Source:

(constant) gpsCoordinates :Object.<String:Object.<{latitude:Number, longitude:Number}>>

GPS coordinates of the city location to be drawn.
Type:
  • Object.<String:Object.<{latitude:Number, longitude:Number}>>
Source:

image :HTMLImageElement

Texture image.
Type:
  • HTMLImageElement
Source:
See:

(constant) imageFilename :Array.<String>

Array holding image file names to create textures from.
Type:
  • Array.<String>
Source:

indexBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) lightPosition :Array.<Number>

Light Position.

Phong illumination model will highlight the projection of this position on the current model.

In the case of a sphere, it will trace the equator, if no other rotation is applied by the user.

Type:
  • Array.<Number>
Source:

(constant) lightPropElements :Object.<String:Float32Array>

Light properties.

Ambient, diffuse and specular.

Remember this is column major.

Type:
  • Object.<String:Float32Array>
Source:

lightingShader :WebGLShader

Handle to the compiled shader program on the GPU.
Type:
  • WebGLShader
Source:

lineBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

lines :Float32Array

Array with edges end points.
Type:
  • Float32Array
Source:

mat3 :glMatrix.mat3

3x3 Matrix
Type:
  • glMatrix.mat3
Source:
See:

mat4 :glMatrix.mat4

4x4 Matrix
Type:
  • glMatrix.mat4
Source:
See:

(constant) matPropElements :Object.<String:Float32Array>

Material properties.

Ambient, diffuse and specular.

Remember this is column major.

Type:
  • Object.<String:Float32Array>
Source:
See:

maxSubdivisions :Number

Maximum Number of subdivisions to turn a polyhedron into a sphere.
Type:
  • Number
Source:

mercator :Boolean

Whether to use a Mercator projection.
Type:
  • Boolean
Source:
See:

meridianBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

modelMatrix :mat4

Model matrix.
Type:
Source:

mscale :Number

Scale applied to a model to make its size adequate for rendering.
Type:
  • Number
Source:

noTexture :Boolean

Indicates whether not use the texture from the model.
Type:
  • Boolean
Source:

normal :Float32Array

Array with normal end points.
Type:
  • Float32Array
Source:

normalBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

numSubdivisions :Number

Number of subdivisions to turn a polyhedron into a sphere.
Type:
  • Number
Source:

parallelBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) projection :mat4

Projection matrix.
Type:
Source:

(constant) readFileNames :Promise.<Array.<String>>

Promise for returning an array with all file names in directory './textures'.

Calls a php script via ajax, since Javascript doesn't have access to the filesystem.

Please, note that php runs on the server, and javascript on the browser.
Type:
  • Promise.<Array.<String>>
Source:
See:

rotator :SimpleRotator

Arcball.
Type:
Source:

(constant) selector :Object.<{lines:Boolean, texture:Boolean, axes:Boolean, paused:Boolean, intrinsic:Boolean, equator:Boolean, hws:Boolean}>

Display status of the model mesh, texture, axes and paused animation: on/off.
Type:
  • Object.<{lines:Boolean, texture:Boolean, axes:Boolean, paused:Boolean, intrinsic:Boolean, equator:Boolean, hws:Boolean}>
Source:

(constant) shininess :Array.<Number>

Specular term exponent used in the Phong reflection model.

One entry for each material property.
Type:
  • Array.<Number>
Source:

(constant) teapotModel :modelData

An IFS of the famous teapot, about 20 units big.
Type:
Source:

texCoordBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

textureCnt :Number

Current texture index.
Type:
  • Number
Source:

textureHandle :WebGLTexture

Handle to the texture object on the GPU.
Type:
  • WebGLTexture
Source:
See:

theModel :modelData

Current model data.
Type:
Source:

vec3 :glMatrix.vec3

gl-matrix 3 Dimensional Vector.
Type:
  • glMatrix.vec3
Source:

vec4 :glMatrix.vec4

gl-matrix 4 Dimensional Vector.
Type:
  • glMatrix.vec4
Source:

vertexBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

vertexNormalBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
Source:

(constant) viewMatrix :mat4

View matrix.
Type:
Source:
See:

yNorth :Boolean

Sets the North to be the y-axis, so the z-axis points outside the screen.
Type:
  • Boolean
Source:

Methods

createEvent(key) → {KeyboardEvent}

Returns a new keyboard event that can be passed to handleKeyPress.
Parameters:
Name Type Description
key String char code.
Source:
Returns:
a keyboard event.
Type
KeyboardEvent

createModel(model) → {modelData|module:polyhedron~polyData}

Sets up all buffers for the given (triangulated) model (shape).

Uses the webgl vertex buffer, normal buffer, texture buffer and index buffer, created in startForReal.
Then, binds each one of them as an array buffer and copies the corresponding shape array data to them.

Also, the Euler characteristic for the model is:

  • χ = 2 − 2g − b
for a surface with g handles and b boundaries.

The number of triangles must be even for a valid triangulation of the sphere:

Parameters:
Name Type Description
model Object model descriptor.
Properties:
Name Type Default Description
model.shape modelData a BREP model given as an IFS.
model.name String "" model name.
model.chi Number | null 2 model Euler Characteristic.
model.poly Number 0 initial polyhedron for subdivision:
0 - dodecahedron,
1 - icosahedron,
2 - octahedron,
3 - tetrahedron.
model.fix_uv Boolean false whether to change uv texture coordinates.
Source:
See:
Returns:
shape.
Type
modelData | module:polyhedron~polyData

createProgram(gl, vshader, fshader) → {WebGLProgram}

Create the linked program object
Parameters:
Name Type Description
gl WebGLRenderingContext GL context.
vshader String a vertex shader program.
fshader String a fragment shader program.
Source:
See:
Returns:
created program object, or null if the creation has failed.
Type
WebGLProgram

cube(side) → {modelData}

Create a model of a cube, centered at the origin.

This is not a particularly good format for a cube, since an IFS representation has a lot of redundancy.
Parameters:
Name Type Description
side Number the length of a side of the cube. If not given, the value will be 1.
Source:
Returns:
Type
modelData

draw()

Code to actually render our geometry. Draws axes, applies texture, then draws lines.
Source:

drawAxes()

Draws the axes.

Uses the colorShader.
Source:

drawLines()

Draws the lines: mesh + normals.

Uses the colorShader.

This code takes too long on mobile - too many API calls.

 // draw edges
 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
 gl.vertexAttribPointer(positionIndex, 3, gl.FLOAT, false, 0, 0);
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
 for (let i = 0; i < theModel.indices.length; i += 3) {
     // offset - two bytes per index (UNSIGNED_SHORT)
     gl.drawElements(gl.LINE_LOOP, 3, gl.UNSIGNED_SHORT, i * 2);
 }
The solution is having a single buffer with all lines, which was set in createModel.
Source:
See:

drawParallel()

Draws a parallel.

Uses the colorShader.
Source:

drawTexture()

Texture render the current model.

Uses the lightingShader.

If the attribute "a_TexCoord" is not defined in the vertex shader, texture coordinates will be calculated pixel by pixel in the fragment shader.

We can also set a uniform attribute (u_mercator) in the shader, for using a Mercator projection instead of an equirectangular projection.

Source:

getChar(event) → {String|null}

Translate keydown events to strings.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
See:
Returns:
Type
String | null

getModelData(geom) → {modelData}

Given an instance of
  • THREE.BufferGeometry
returns an object containing raw data for vertices, normal vectors, texture coordinates, and indices.

Polyhedra have no index.

Parameters:
Name Type Description
geom external:THREE.BufferGeometry THREE.BoxGeometry
THREE.CapsuleGeometry,
THREE.ConeGeometry,
THREE.CylinderGeometry,
THREE.PlaneGeometry,
THREE.RingGeometry,
THREE.SphereGeometry,
THREE.TorusGeometry,
THREE.TorusKnotGeometry,
THREE.DodecahedronGeometry,
THREE.IcosahedronGeometry,
THREE.OctahedronGeometry,
THREE.TetrahedronGeometry,
THREE.TeapotGeometry.
Source:
Returns:
Type
modelData

getModelMatrix() → {mat4}

Returns a new scale model matrix, which applies mscale.
Source:
Returns:
model matrix.
Type
mat4

getTextures(optionNames)

Get texture file names from an html <select> element identified by "textures".
Parameters:
Name Type Description
optionNames Array.<String> array of texture file names.
Source:

getWebGLContext(canvas, opt_debug) → {WebGL2RenderingContext}

Initialize and get the rendering context for WebGL. This will make any GL errors show up in your browser JavaScript console.
Parameters:
Name Type Description
canvas HTMLCanvasElement <canvas> element.
opt_debug Boolean flag to initialize the context for debugging.
Deprecated:
  • since WebGL2
Source:
See:
Returns:
the rendering context for WebGL.
Type
WebGL2RenderingContext

handleKeyPress(event) → {key_event}

Closure for keydown events.

Chooses a model and which axis to rotate around.
The subdivision level is limited for a chosen subdivision polyhedron.
When a new texture is selected, triggers callback image load event.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
Returns:
callback for handling a keyboard event.
Type
key_event

initShaders(GL, vshader, fshader) → {Boolean}

Create a program object and make it current.
Parameters:
Name Type Description
GL WebGLRenderingContext context.
vshader String a vertex shader program.
fshader String a fragment shader program.
Source:
Returns:
true, if the program object was created and successfully made current.
Type
Boolean

isPowerOf2(value) → {Boolean}

Returns whether a given value is a power of two.
Parameters:
Name Type Description
value Number number to check.
Source:
Returns:
true if value is a power of two: value = 2n
Type
Boolean

loadShader(gl, type, source) → {WebGLShader}

Create a shader object
Parameters:
Name Type Description
gl WebGLRenderingContext GL context.
type gl.VERTEX_SHADER | gl.FRAGMENT_SHADER the type of the shader object to be created,
source DOMString shader program.
Source:
See:
Returns:
created shader object, or null if the creation has failed.
Type
WebGLShader

makeNormalMatrixElements(model, view) → {mat3}

Matrix for taking normals into eye space.

Return a matrix to transform normals, so they stay perpendicular to surfaces after a linear transformation.
Parameters:
Name Type Description
model mat4 model matrix.
view mat4 view matrix.
Source:
See:
Returns:
(𝑀–1)𝑇 - 3x3 normal matrix (transpose inverse) from the 4x4 modelview matrix.
Type
mat3

newTexture(image)

Creates a new texture from an image.

Uses the lightingShader.
Parameters:
Name Type Description
image HTMLImageElement texture.
Source:
See:

nextLevel()

Select next subdivision level and creates an event "m" for it.
Source:

nextTexture()

Select next texture and creates an event "n" for it.
Source:

previousLevel()

Select previous subdivision level and creates an event "M" for it.
Source:

previousTexture()

Select previous texture and creates an event "N" for it.
Source:

ring(innerRadius, outerRadius, slices) → {modelData}

Creates a model of an annulus or disk lying in the xy plane, centered at the origin.

This is not a great representation, since all the normals are the same.
Parameters:
Name Type Description
innerRadius Number the radius of the hole in the radius; a value of zero will give a disk rather than a ring.
If ommited, the default value is 0.25.
outerRadius Number the radius of the ring, from the center to the outer edge. Must be greater than innerRadius.
If ommited, the default value is 2*innerRadius if innerRadius > 0 or 0.5 otherwise.
slices Number the number of radial subdivisions in the circular approximation of an annulus, minimum 3, default 32.
Source:
Returns:
Type
modelData

selectModel()

Selects a model from a menu and creates an event for it.
Source:
See:

selectTexture(getCnt)

Closure for selecting a texture from the menu.

Tetrahedra and octahedra may need to be reloaded for getting appropriate texture coordinates:
  • mercator x equirectangular.
Parameters:
Name Type Description
getCnt Boolean indicates the need of getting textureCnt from <select> element in html.
Source:

setNorth(vertices, normals)

Rotate the given model so the y-axis points North.

The variable yNorth must be true, otherwise this function has no effect:
  • if (yNorth) (x, y, z) → (-x, z , y)
Parameters:
Name Type Description
vertices Float32Array vertex array.
normals Float32Array normal array.
Source:

setPosition(location)

Load a new parallel and merdian into the GPU corresponding to the given location.
Parameters:
Name Type Description
location String a city name.
Source:
See:

setTextures(optionNames)

Set texture file names of an html <select> element identified by "textures".
Parameters:
Name Type Description
optionNames Array.<String> array of texture file names.
Source:

setUVfix() → {UVfix}

A closure holding the type of the model.

Tarini's method does not work for objects like polyhedra.
It was meant for objects whose texture coordinates were set by using cylindrical or spherical uv-mappings.
For instance, a cube's face texture coordinates span from 0 to 1.

Therefore, we only use it for subdivision spheres.

Source:
See:
Returns:
Type
UVfix

startForReal(image)

Creates a textured model and triggers the animation.

Basically this function does setup that "should" only have to be done once,
while draw() does things that have to be repeated each time the canvas is redrawn.
Parameters:
Name Type Description
image HTMLImageElement texture.
Source:
See:

toRadian(a) → {Number}

Convert degrees to radians.
Parameters:
Name Type Description
a Number angle in degrees.
Source:
See:
Returns:
angle in radians.
Type
Number

uvCone(radius, height, slices, stacks, noBottom) → {modelData}

Defines a model of a cone.

The axis of the cone is the z-axis, and the center is at (0,0,0).
Parameters:
Name Type Description
radius Number the radius of the cone
height Number the height of the cone. The cone extends from -height/2 to height/2 along the z-axis, with the tip at (0,0,height/2).
slices Number the number of slices, like the slices of an orange, minimum 3, default 32.
stacks Number the number of stacks, like horizontal cuts of an orange, minimum 1, default 16.
noBottom Boolean if missing or false, the cone has a bottom; if set to true, the cone does not have a bottom.
The bottom is a disk at the wide end of the cone.
Source:
See:
Returns:
Type
modelData

uvCylinder(radius, height, slices, stacks, noTop, noBottom) → {modelData}

Defines a model of a cylinder.

The axis of the cylinder is the z-axis, and the center is at (0,0,0).
Parameters:
Name Type Description
radius Number the radius of the cylinder
height Number the height of the cylinder.
The cylinder extends from -height/2 to height/2 along the z-axis.
slices Number the number of slices, like the slices of an orange, minimum 3, default 32.
stacks Number the number of stacks, like horizontal cuts of an orange, minimum 1, default 16.
noTop Boolean if missing or false, the cylinder has a top; if set to true, the cylinder does not have a top.
The top is a disk at the positive end of the cylinder.
noBottom Boolean if missing or false, the cylinder has a bottom; if set to true, the cylinder does not have a bottom.
The bottom is a disk at the negative end of the cylinder.
Source:
See:
Returns:
Type
modelData

uvSphere(radius, slices, stacks) → {modelData}

Create a model of a sphere.

The z-axis is the axis of the sphere with the north pole on the positive z-axis and the center at (0,0,0).

The number of triangles is 2 * slices * stacks, e.g., 48 * 24 * 2 = 2304.

However, two rows and one column of vertices have been duplicated. Without vertex duplication, the number of triangles would be 48 * 23 * 2 = 2208.
In fact, this is topologically a cylinder whose vertices on the two borders have the same coordinates of the sphere north/south poles, respectively:

  • uvSphere(radius, slices, stack) ≍ uvCylinder(r, height, slices, stack, true, true)

Parameters:
Name Type Description
radius Number the radius of the sphere, default 0.5 if not specified.
slices Number the number of lines of longitude, minimum 3, default 32
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
(This is the number of vertical slices, bounded by lines of latitude, the north pole and the south pole.)
Source:
See:
Returns:
Type
modelData

uvSphereND(radius, slices, stacks) → {modelData}

Create a model of a sphere.

The z-axis is the axis of the sphere with the north pole on the positive z-axis and the center at (0,0,0).

This version does not duplicate vertices on the seam, but it does require Tarini's method when texturing.

Parameters:
Name Type Description
radius Number the radius of the sphere, default 0.5 if not specified.
slices Number the number of lines of longitude, minimum 3, default 32
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
(This is the number of vertical slices, bounded by lines of latitude, the north pole and the south pole.)
Source:
See:
Returns:
Type
modelData

uvTorus(outerRadius, innerRadius, slices, stacks) → {modelData}

Create a model of a torus (surface of a doughnut).

The z-axis goes through the doughnut hole, and the center of the torus is at (0,0,0).
Parameters:
Name Type Description
outerRadius Number the distance from the center to the outside of the tube, 0.5 if not specified.
innerRadius Number the distance from the center to the inside of the tube, outerRadius/3 if not specified.
(This is the radius of the doughnut hole.)
slices Number the number of lines of longitude, minimum 3, default 32.
These are slices parallel to the z-axis and go around the tube the short way (through the hole).
stacks Number the number of lines of latitude plus 1, minimum 2, default 16.
These lines are perpendicular to the z-axis and go around the tube the long way (around the hole).
Source:
See:
Returns:
Type
modelData

zoomIn()

Increase zoom level and creates an event ↓ for it.
Source:

zoomOut()

Decrease zoom level and creates an event ↑ for it.
Source:

Type Definitions

ImageLoadCallback()

Callback after a new texture image is loaded.

When called for the first time, it starts the animation. Otherwise, just loads a new texture.
Source:

UVfix(subModel)

Callback to decide whether to fix UV coordinates, based on the model type (subdivision or not), and if it is a textured model or not.
Parameters:
Name Type Description
subModel Boolean true: subdivision model,
false: normal model,
undefined: not known. Use the type saved in the closure.
Source:

frame()

Callback to keep drawing frames.
Source:
See:

key_event(event)

Handler for keydown events.

Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:

modelData

An object containing raw data for vertices, normal vectors, texture coordinates, and indices.

Polyhedra have no index.

Type:
  • Object
Properties:
Name Type Description
vertexPositions Float32Array vertex coordinates.
vertexNormals Float32Array vertex normals.
vertexTextureCoords Float32Array texture coordinates.
indices Uint16Array | Uint32Array index array.
Source:

Events

changeAxescheckBox

Executed when the axes checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeCullcheckBox

Executed when the cull checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeEquatorcheckBox

Executed when the equator checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeFixUVcheckBox

Executed when the fix_uv checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeHwscheckBox

Executed when the hws checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeMercatorcheckBox

Executed when the mercator checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeMeshcheckBox

Executed when the mesh checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeModeInputRadio

Executed when the mode input radio is checked (but not when unchecked).

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeModelsSelect

Executed when the models <select> is changed.

Appends an event listener for events whose type attribute value is change.
The selectModel argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeRotInputRadio

Executed when the rot input radio is checked (but not when unchecked).

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeTextureSelect

Executed when the textures <select> is changed.

Appends an event listener for events whose type attribute value is change.
The selectTexture argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

changeTexturecheckBox

Executed when the texture checkbox is checked or unchecked.

Appends an event listener for events whose type attribute value is change.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

keydown

Appends an event listener for events whose type attribute value is keydown.
The callback argument sets the callback that will be invoked when the event is dispatched.

Source:
See:

load

Loads the texture image asynchronously and defines its load callback function.

Type:
  • function
Parameters:
Name Type Description
event Event load event.
Source:
See: