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:

(constant) canvas :HTMLCanvasElement

Canvas element and its tooltip.

Canvas is used for drawing the globe and its tooltip is used for displaying the GCS coordinates (longitude and latitude) on the globe when pointer is moved upon.

Canvas is a bitmap element that can be used to draw graphics on the fly via scripting (usually JavaScript). It is a part of the HTML5 specification and is supported by all modern browsers.

Tooltip is a small pop-up box that appears when the user hovers over an element. It is used to provide additional information about the element, such as its coordinates.

Both canvas and tooltip are used to provide a better user experience by allowing the user to interact with the globe and see its coordinates.

Type:
  • HTMLCanvasElement
Source:

(constant) canvastip :HTMLElement

Tooltip element for displaying GCS coordinates on the globe.

Tooltip is a small pop-up box that appears when the user hovers over an element. It is used to provide additional information about the element, such as its coordinates.

Tooltip is used to provide a better user experience by allowing the user to interact with the globe and see its coordinates.

Type:
  • HTMLElement
Source:

(constant) cities :Object

Array of city names, that is, the gpsCoordinates keys.
Type:
  • Object
Properties:
Name Type Description
byLongitude Array.<String> city names ordered by longitude.
byDate Array.<String> city names ordered by date.
current Array.<String> current city names.
Source:

colorBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
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) currentMeridian :GCS

Current meridian onto globe.
Type:
Source:

cursorPosition :Object.<{x:Number, y:Number}>

Current cursor position onto globe.
Type:
  • Object.<{x:Number, y:Number}>
Source:

(constant) element :Object

HTML elements in the interface.
Type:
  • Object
Properties:
Name Type Description
mesh HTMLInputElement checkbox
axes HTMLInputElement radio
equator HTMLInputElement checkbox
hws HTMLInputElement checkbox
fix_uv HTMLInputElement checkbox
merc HTMLInputElement checkbox
cull HTMLInputElement checkbox
texture HTMLInputElement checkbox
textures HTMLSelectElement select
models HTMLSelectElement select
textimg HTMLImageElement img
tooltip HTMLInputElement checkbox
tip HTMLInputElement checkbox
php HTMLInputElement checkbox
closest HTMLButtonElement button
animation HTMLButtonElement button
byDate HTMLInputElement checkbox
locations HTMLInputElement checkbox
timeline HTMLInputElement range
lblTimeline HTMLLabelElement label
steplist HTMLDataListElement list
Source:
See:

(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:

gpsCoordinates :Object.<location:String, attributes:Object>

A set of world locations given by their GPS coordinates.

These locations are read from a json file.
Type:
  • Object.<location:String, attributes:Object>
Properties:
Name Type Description
location String name of the site, e.g., "Paris".
attributes Object
Properties
Name Type Description
country String country of the site.
remarkable String site's historical figure.
longitude Number site's longitude.
latitude Number site's latitude.
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:

isMap :Boolean

Whether the texture represents a map.
Type:
  • Boolean
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:

locationsBuffer :WebGLBuffer

Handle to a buffer on the GPU.
Type:
  • WebGLBuffer
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) phongHighlight :vec2

Phong highlight position on screen.
Type:
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'.

Since php runs on the server, and javascript on the browser, a php script is invoked asynchronously via ajax, because Javascript doesn't have access to the filesystem.

The JavaScript Fetch API provides a modern, promise-based interface for making network requests, such as fetching data from an API. It is designed to replace older methods like XMLHttpRequest and offers a more streamlined way to handle asynchronous operations.

The Response object provides methods to parse the response body in various formats, such as json(), text(), blob(), arrayBuffer(), and formData().
Type:
  • Promise.<Array.<String>>
Source:
See:

(constant) rotMatrix :Object

Rotation matrix for the three axes.

The rotation matrices are created at compile (loading) time, so that they can be reused in each frame without recalculating them. The rotation matrices are used to rotate the model around the x, y, or z axis, depending on the axis chosen. The rotation is done by multiplying the model matrix with the rotation matrix, either on the left (extrinsic rotation) or on the right (intrinsic rotation).
Type:
  • Object
Properties:
Name Type Description
x mat4 rotation matrix around the x-axis.
y mat4 rotation matrix around the y-axis.
z mat4 rotation matrix around the z-axis.
Source:

rotator :SimpleRotator

Arcball.
Type:
Source:

(constant) selector :Object

Turn display status of the model on/off.
Type:
  • Object
Properties:
Name Type Description
lines Boolean mesh and normals.
texture Boolean lines x texture.
axes Boolean coordinate axes.
paused Boolean Arcball x rotation.
intrinsic Boolean rotation around global x local axes.
equator Boolean parallel and meridian of the current location.
hws Boolean model's trigulation algorithm source: three.js x hws.
tootip Boolean location information.
cities Boolean sequential location traversal order.
locations Boolean location points.
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:

vec2 :glMatrix.vec2

gl-matrix 2 Dimensional Vector.
Type:
  • glMatrix.vec2
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

UV2Spherical(uv) → {Array.<{Number, Number}>}

Convert from UV coordinates (s, t) to spherical coordinates.
Parameters:
Name Type Description
uv Object.<{s: Number, t:Number}> ∈ [0,1].
Source:
Returns:
spherical coordinates ∈ [0,2π] x [0,π].
Type
Array.<{Number, Number}>

addListeners()

Appends event listeners to HTML elements.

Also appends event listeners to the rot and mode input radio buttons.

Source:
See:

checkForMapTexture(filename) → {Boolean}

Checks if the given texture file name represents a map. It looks for the substrings "map", "earth", "ndvi" or "ocean" in the file name. The check is case insensitive.
Parameters:
Name Type Description
filename String texture fine name.
Source:
Returns:
whether the texture represents a map.
Type
Boolean

clamp(value, min, max) → {Number}

Clamp a value between a minimum and maximum value.
Parameters:
Name Type Description
value Number value to be clamped.
min Number minimum value.
max Number maximum value.
Source:
Returns:
clamped value.
Type
Number

cleanLocation(location) → {String}

Cleans the location name by removing the text in parentheses and the parentheses themselves.
Parameters:
Name Type Description
location String name of the location.
Source:
Returns:
cleaned location name.
Type
String

closestSite(position) → {String}

Returns the closest site to the given GCS position (latitude, longitude).
Parameters:
Name Type Description
position GCS GCS coordinates.
Source:
Returns:
closest site name.
Type
String

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

decomposeVector(v, w) → {Object.<vec3, vec3>}

Decomposes vector v into components parallel and perpendicular to w.

The projection and perpendicular component are given by:
  • proj𝑤(𝑣) = (𝑣⋅𝑤)/(𝑤⋅𝑤) 𝑤
  • perp𝑤(𝑣) = 𝑣 − proj𝑤(𝑣)
Parameters:
Name Type Description
v vec3 vector to be decomposed.
w vec3 vector to decompose upon.
Source:
See:
Returns:
{proj, perp} projection and perpendicular components of v onto w.
Type
Object.<vec3, vec3>

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:

drawLinesOnImage()

Draw the meridian and parallel lines at the currentLocation on the texture image.
Source:

drawLocations()

Draws all location points.

Uses the colorShader.
Source:

drawLocationsOnImage()

Draw the gpsCoordinates locations on the texture image.
Source:

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:

formatNumberWithSign(num, decimals) → {String}

Format a number including a plus sign for positive numbers.
Parameters:
Name Type Description
num Number number.
decimals Number number of digits to appear after the decimal point.
Source:
Returns:
a string representing the given number using fixed-point notation.
Type
String

gcs2Screen(location, mercatorProjectionopt) → {Coordinates}

Convert from GCS (longitude, latitude) to screen coordinates.

This function uses the WebGL projection to convert the geographic coordinates to screen coordinates (pixels).
  • The projection can be either spherical or Mercator.
  • The spherical projection is used for a globe, while the Mercator projection is used for a map.
Parameters:
Name Type Attributes Default Description
location GCS gcs coordinates.
mercatorProjection Boolean <optional>
 false whether to use Mercator projection.
Properties:
Name Type Description
Coordinates.screen Array.<{x:Number, y:Number}> screen coordinates.
Coordinates.cartesian vec3 cartesian coordinates.
Coordinates.uv Object.<{s:Number, t:Number}> spherical coordinates in UV space.
Coordinates.viewport Array.<Number> viewport dimensions.
Source:
Returns:
Type
Coordinates

gcs2UV(gcs) → {Object.<{s: Number, t: Number}>}

Convert from GCS (longitude, latitude) to UV coordinates.
Parameters:
Name Type Description
gcs GCS longitude ∈ [-180°,180°], latitude ∈ [-90°,90°].
Source:
Returns:
UV coordinates ∈ [0,1].
Type
Object.<{s: Number, t: Number}>

getAngleBetweenVectors(v1, v2) → {Number}

Calculate the angle in radians between two vectors.

  • θ = atan2(||v1 × v2||, v1 • v2))
    • or
  • θ = acos((v1 • v2) / (||v1|| ||v2||))
   const dotProduct = clamp(vec3.dot(v1, v2), -1, 1)/(vec3.length(v1)*vec3.length(v2));
   const angleInRadians = Math.acos(dotProduct);
Parameters:
Name Type Description
v1 vec3 first vector.
v2 vec3 second vector.
Source:
See:
Returns:
angle in radians between v1 and v2.
Type
Number

getChar(event) → {String|null}

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

getDate(v) → {Number}

Return a location historical figure's last date mentioned.

In case it is a range of dates (first-second), it returns the first date.

I would like to return Date.parse(date). However, it does not work with BC dates (negative years).

Parameters:
Name Type Description
v String location name.
Source:
See:
Returns:
year of the date (negative for BC dates).
Type
Number

getModelData(geom) → {modelData}

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

Polyhedra have no index.

Parameters:
Name Type Description
geom 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

haversine(gcs1, gcs2) → {Number}

Calculate distances on the globe using the Haversine Formula.

Usage: 
 const distance = haversine(
       gpsCoordinates["Alexandria"],
       gpsCoordinates["Aswan"],
 );
 console.log(`Distance: ${Math.round(distance.m, 3)} m`);
 console.log(`Distance: ${Math.round(distance.km, 3)} km`);

 >> Distance: 843754 m
 >> Distance: 844 km
Parameters:
Name Type Description
gcs1 GCS first pair of gcs coordinates.
gcs2 GCS second pair of gcs coordinates.
Source:
See:
Returns:
distance between gcs1 and gcs2.
Type
Number

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

isTouchDevice() → {Boolean}

Checks if the device is a touch device.

It checks for the presence of touch events in the window object and the maximum number of touch points supported by the device. This is useful for determining if the application should use touch-specific features or fall back to mouse events.
Source:
See:
Returns:
true if the device is a touch device, false otherwise.
Type
Boolean

labelForLocation(location)

Updates the label (latitude, longitude and secant) of the given location.
Parameters:
Name Type Description
location String name of the location.
Source:

labelForTimeline(dat)

Updates the label of the timeline to the given date.
Parameters:
Name Type Description
dat Number date.
Source:

lineSphereIntersection(o, p, c, r) → {vec3|null}

Find point of intersection between a line and a sphere.

The line is defined by its origin and an end point. The sphere is defined by its center and radius.
Parameters:
Name Type Description
o vec3 ray origin.
p vec3 ray end point.
c vec3 center of the sphere.
r Number radius of the sphere.
Source:
See:
Returns:
intersection point or null, if there is no intersection.
Type
vec3 | null

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

meridianMatrix(out, meridian, increment) → {mat4}

Returns a rotation matrix around the vector perpendicular to the given meridian, by the given increment.

Ensure longitude is in [0,180) range, so that the perpendicular vector does not change direction if longitude is in the western hemisphere.
Parameters:
Name Type Description
out mat4 the receiving matrix.
meridian GCS given meridian.
increment Number angle (in radians) to rotate around.
Source:
Returns:
out.
Type
mat4

meridianPerpVec(longitude) → {vec3}

Returns a vector perpendicular to the meridian at the given longitude. The meridian is the line of longitude at the given longitude, which is the angle from the prime meridian (0° longitude). The perpendicular vector is in the xz-plane, with y = 0.
Parameters:
Name Type Description
longitude Number meridian longitude.
Source:
Returns:
vector perpendicular to the meridian at the given longitude.
Type
vec3

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:

pixelRayIntersection(x, y) → {vec3|null}

Creates a ray through the pixel at (x, y) on the canvas, unprojects it, and returns its intersection against the sphere of radius 1 centered at the origin (0, 0, 0).
Parameters:
Name Type Description
x Number pixel x coordinate.
y Number pixel y coordinate.
Source:
Returns:
intersection point in world coordinates or null if no intersection.
Type
vec3 | null

pointsOnLocations() → {Array.<Float32Array>}

Return an array with all points on gpsCoordinates.
Properties:
Name Type Description
0 Float32Array locations coordinate array.
1 Float32Array locations color array.
Source:
Returns:
locations points.
Type
Array.<Float32Array>

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:

project(out, vec, modelMatrix, viewMatrix, projectionMatrix, viewport) → {Array.<Number>}

Transforms object space coordinates into screen coordinates.

Parameters:
Name Type Description
out Array.<Number> the receiving vector.
vec vec3 3D vector of object coordinates.
modelMatrix mat4 model matrix.
viewMatrix mat4 view matrix.
projectionMatrix mat4 projection matrix.
viewport Array.<Number> the current viewport (as from a gl.getParameter call).
Source:
See:
Returns:
out.
Type
Array.<Number>

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

rotateGlobeAroundAxis(out, angle, axis) → {mat4}

Rotate the globe around a given axis by a given angle.
Parameters:
Name Type Description
out mat4 the receiving matrix.
angle Number angle in radians.
axis vec3 rotation axis.
Source:
Returns:
out.
Type
mat4

rotateModelTowardsCamera(out, modelPosition, modelForward) → {mat4}

Rotate the model towards a given vector.
Parameters:
Name Type Description
out mat4 the receiving matrix.
modelPosition vec3 a model's vector in world coordinates.
modelForward vec3 model's forward vector in world coordinates.
Source:
Returns:
out.
Type
mat4

saveWebGLCanvasAsPNG(blob, filename)

Saves the current WebGL canvas content as a PNG image.

Ensure preserveDrawingBuffer is true if needed for capturing post-render content:
  • const gl = canvas.getContext('theCanvas', { preserveDrawingBuffer: true });
Parameters:
Name Type Description
blob Blob image blob.
filename String name of the file to save.
Source:

scalarTripleProduct(a, b, c) → {Number}

Scalar triple product of three vectors.

The absolute value of the scalar triple product represents the volume of the parallelepiped formed by the three vectors a, b, and c when originating from the same point.

The sign of the result indicates the orientation of the vectors (whether they form a right-handed or left-handed system). If the scalar triple product is zero, it means the three vectors are coplanar (lie in the same plane).

Parameters:
Name Type Description
a vec3 first vector.
b vec3 second vector.
c vec3 third vector.
Source:
See:
Returns:
a⋅(b×c)
Type
Number

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:

setRangeTicks(optionNames)

Set range tick dates of an html <range> element identified by "steplist".
Parameters:
Name Type Description
optionNames Array.<Number> array of timeline dates.
Source:

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

setYUp(out, rotationMatrix, rotationAxis) → {mat4}

Rotate the model around a given axis so that its 'north' vector aligns with the screen y axis after applying the given rotation matrix.
Parameters:
Name Type Description
out mat4 the receiving matrix.
rotationMatrix mat4 transformation matrix applied to model.
rotationAxis vec3 rotation axis.
Source:
See:
Returns:
out.
Type
mat4

sortCitiesByDate() → {Array.<Array>}

Return cities ordered by date and the timeline.
Properties:
Name Type Description
0 Array.<String> location names ordered by date.
1 Array.<Number> location corresponding dates.
Source:
See:
Returns:
Type
Array.<Array>

spherical2gcs(uv) → {Object.<{longitude: Number, latitude: Number}>}

Convert spherical coordinates to GCS (longitude, latitude).
Parameters:
Name Type Description
uv Object.<{s:Number, t:Number}> spherical coordinates ∈ [0,1]}.
Source:
Returns:
longitude ∈ [-180°,180°], latitude ∈ [-90°,90°].
Type
Object.<{longitude: Number, latitude: Number}>

startAnimation(delayopt) → {Number}

Sets up an interval to check for key presses every 2 seconds. This is useful for simulating key presses or for periodic updates. The interval will call the handleKeyPress function with a simulated event that has the key 'g' pressed, which is used to trigger the next location in the timeline. This is particularly useful for testing or for automatically cycling through locations.
Parameters:
Name Type Attributes Default Description
delay Number <optional>
 2000 The interval time in milliseconds. Defaults to 2000 milliseconds (2 seconds). This function will repeatedly call handleKeyPress with a simulated event that has the key 'g' pressed, effectively simulating a key press every 2s.
Source:
See:
Returns:
The ID of the interval that can be used to clear it later. This ID can be passed to `clearInterval()` to stop the animation.
Type
Number

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

unproject(out, vec, modelMatrix, viewMatrix, projectionMatrix, viewport) → {Array.<Number>}

Transforms screen coordinates into object space coordinates.

Parameters:
Name Type Description
out Array.<Number> the receiving vector.
vec vec3 3D vector of screen coordinates.
modelMatrix mat4 model matrix.
viewMatrix mat4 view matrix.
projectionMatrix mat4 projection matrix.
viewport Array.<Number> the current viewport (as from a gl.getParameter call).
Source:
See:
Returns:
out.
Type
Array.<Number>

updateCurrentMeridian(x, y, setCurrentMeridian)

Updates the current meridian based on the given pixel position.

It calculates the intersection of the pixel ray with the sphere and converts the intersection point to spherical coordinates. If the intersection exists, it updates the currentMeridian variable and displays the coordinates in the canvastip element.

Note that there is no cursor position on touch devices.

Parameters:
Name Type Default Description
x Number pixel x coordinate.
y Number pixel y coordinate.
setCurrentMeridian Boolean true if true, updates the currentMeridian variable.
Source:
See:

updateLocation(inc, fixopt)

Update the current location and set the position on the globe or map.
Parameters:
Name Type Attributes Default Description
inc Number increment to change the current location.
fix Boolean <optional>
 true whether call setYUp.
Source:

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

GCS

A geographic coordinate system (GCS) is a spherical or geodetic coordinate system for measuring and communicating positions directly on Earth as latitude and longitude.
Properties:
Name Type Description
longitude Number a geographic coordinate ∈ [-180°,180°] that specifies the east-west position of a point on Earth.
latitude Number a geographic coordinate ∈ [-90°,90°] that specifies a location's north-south position on Earth.
Source:
See:

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:

changeCitiescheckBox

Executed when the cities 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:

changeLocationscheckBox

Executed when the locations 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:

changeTooltipcheckBox

Executed when the tooltip 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:

clickAnimation

Executed when the animation element is clicked.

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

Source:
See:

clickClosest

Executed when the closest element is clicked.

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

Source:
See:

clickPrint

Executed when the print element is clicked.

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

Source:
See:

contextmenu

No context menu when pressing the right mouse button.
Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

dblclick

Double click as right click.
Parameters:
Name Type Description
event MouseEvent mouse event.
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 and gpsCoordinates asynchronously and defines its load callback function.

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

pointerdown-textimg

Gets the latitude and longitude on the texture image when clicked upon and draws its position on the map.

The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerdown-theCanvas

Sets moving to false and clicked to true.

The pointerdown event is fired when a pointer becomes active. For mouse, it is fired when the device transitions from no buttons pressed to at least one button pressed. For touch, it is fired when physical contact is made with the digitizer. For pen, it is fired when the stylus makes physical contact with the digitizer.

This behavior is different from mousedown events. When using a physical mouse, mousedown events fire whenever any button on a mouse is pressed down. pointerdown events fire only upon the first button press; subsequent button presses don't fire pointerdown events.

Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointermove-textimg

Displays the u and v normalized coordinates on the texture image when pointer is moved upon.

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. It's very similar to the mousemove event, but with more features.

These events happen whether or not any pointer buttons are pressed. They can fire at a very high rate, depends on how fast the user moves the pointer, how fast the machine is, what other tasks and processes are happening, etc.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointermove-theCanvas

Displays the GCS coordinates (longitude and latitude ) on the globe when pointer is moved upon.

Sets moving to true if clicked is also true.

The pointermove event is fired when a pointer changes coordinates, and the pointer has not been canceled by a browser touch-action. It's very similar to the mousemove event, but with more features.

These events happen whether or not any pointer buttons are pressed. They can fire at a very high rate, depends on how fast the user moves the pointer, how fast the machine is, what other tasks and processes are happening, etc.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerout-textimg

Remove the tooltip when pointer is outside the textimg element.

The pointerout event is fired for several reasons including:
  • pointing device is moved out of the hit test boundaries of an element;
  • firing the pointerup event for a device that does not support hover (see pointerup);
  • after firing the pointercancel event (see pointercancel);
  • when a pen stylus leaves the hover range detectable by the digitizer.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

pointerup-theCanvas

Sets clicked to false and if moving is true, sets it to false and return, because we are moving the globe.
Otherwise, gets the latitude and longitude on the globe and draws its position on the map.

The pointerup event is fired when a pointer is no longer active. This behavior is different from mouseup events. When using a physical mouse, mouseup events fire whenever any button on a mouse is released. pointerup events fire only upon the last button release; previous button releases, while other buttons are held down, don't fire pointerup events.
Parameters:
Name Type Description
event PointerEvent a pointer event.
Source:
See:

timeline

Appends an event listener for events whose type attribute value is change.

Fired when a <input type="range"> is in the Range state (by clicking or using the keyboard).

The callback argument sets the callback that will be invoked when the event is dispatched.

Executed when the slider is changed.
Parameters:
Name Type Description
event Event a generic event.
Source:
See: