,
36 | index: number,
37 | size: number,
38 | offset: number,
39 | out: number[] = []
40 | ): number[] {
41 | const startI = offset + index * size;
42 | for (let i = 0; i < size; i++) {
43 | out[i] = positions[startI + i];
44 | }
45 | return out;
46 | }
47 |
--------------------------------------------------------------------------------
/modules/dggs-geohash/test/geohash.spec.ts:
--------------------------------------------------------------------------------
1 | import test from 'tape-promise/tape';
2 | import {getGeohashBounds, getGeohashBoundaryFlat} from '@math.gl/dggs-geohash';
3 |
4 | const TEST_DATA = [
5 | {
6 | geohash: '9',
7 | expectedBounds: [0, -135, 45, -90]
8 | },
9 | {
10 | geohash: '9q8yybj',
11 | expectedBounds: [37.7490234375, -122.39181518554688, 37.750396728515625, -122.39044189453125]
12 | },
13 | {
14 | geohash: '9q8yy',
15 | expectedBounds: [37.7490234375, -122.431640625, 37.79296875, -122.3876953125]
16 | }
17 | ];
18 |
19 | // TODO - restore test
20 | test.skip('geohash#getGeohashBounds', (t) => {
21 | for (const {geohash} of TEST_DATA) {
22 | const polygon = getGeohashBounds(geohash);
23 | t.ok(polygon instanceof Array, 'polygon is flat array');
24 | t.is(polygon.length / 2 - 1, 4, 'polygon has 4 sides');
25 | t.deepEqual(polygon.slice(0, 2), polygon.slice(-2), 'polygon is closed');
26 | }
27 |
28 | t.end();
29 | });
30 |
31 | // TODO - restore test
32 | test.skip('geohash#getGeohashBoundaryFlat', (t) => {
33 | for (const {geohash, expectedBounds} of TEST_DATA) {
34 | const bounds = getGeohashBoundaryFlat(geohash);
35 | t.deepEquals(bounds, expectedBounds, 'Geohash bounds calculated');
36 | }
37 |
38 | t.end();
39 | });
40 |
--------------------------------------------------------------------------------
/website/src/utils/worker-utils.js:
--------------------------------------------------------------------------------
1 | /* global Worker */
2 |
3 | const workers = {};
4 |
5 | export function StreamParser(workerUrl, callback) {
6 | let parsedLength = 0;
7 |
8 | if (workers[workerUrl]) {
9 | workers[workerUrl].terminate();
10 | }
11 |
12 | const workerInstance = new Worker(workerUrl);
13 | workers[workerUrl] = workerInstance;
14 | let streamedData = [];
15 |
16 | workerInstance.onmessage = e => {
17 | const {action, data, meta} = e.data;
18 | if (action === 'end') {
19 | workerInstance.terminate();
20 | } else if (action === 'add' && data && data.length) {
21 | streamedData = streamedData.concat(data);
22 | callback(streamedData, meta); // eslint-disable-line callback-return
23 | }
24 | };
25 |
26 | this.onProgress = e => {
27 | const {responseText} = e.target;
28 | const lineBreak = responseText.lastIndexOf('\n') + 1;
29 |
30 | workerInstance.postMessage({
31 | event: 'progress',
32 | text: responseText.slice(parsedLength, lineBreak)
33 | });
34 |
35 | parsedLength = lineBreak;
36 | };
37 |
38 | this.onLoad = target => {
39 | const {responseText} = target;
40 | workerInstance.postMessage({
41 | event: 'load',
42 | text: responseText.slice(parsedLength)
43 | });
44 | };
45 | }
46 |
--------------------------------------------------------------------------------
/modules/polygon/test/data/earcut/expected.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | triangles: {
3 | building: 13,
4 | dude: 106,
5 | water: 2482,
6 | water2: 1212,
7 | water3: 197,
8 | water3b: 25,
9 | water4: 705,
10 | 'water-huge': 5177,
11 | 'water-huge2': 4462,
12 | degenerate: 0,
13 | 'bad-hole': 42,
14 | 'empty-square': 0,
15 | issue16: 12,
16 | issue17: 11,
17 | steiner: 9,
18 | issue29: 40,
19 | issue34: 139,
20 | issue35: 844,
21 | 'self-touching': 124,
22 | 'outside-ring': 64,
23 | 'simplified-us-border': 120,
24 | 'touching-holes': 57,
25 | 'hole-touching-outer': 77,
26 | hilbert: 1024,
27 | issue45: 10,
28 | 'eberly-3': 73,
29 | 'eberly-6': 1429,
30 | issue52: 109,
31 | 'shared-points': 4,
32 | 'bad-diagonals': 7,
33 | issue83: 0,
34 | issue107: 0,
35 | issue111: 19,
36 | boxy: 57,
37 | 'collinear-diagonal': 14,
38 | issue119: 18,
39 | hourglass: 2,
40 | touching2: 8,
41 | touching3: 15,
42 | touching4: 20,
43 | rain: 2681,
44 | issue131: 12
45 | },
46 | errors: {
47 | dude: 2e-15,
48 | water: 0.0008,
49 | 'water-huge': 0.0011,
50 | 'water-huge2': 0.0028,
51 | 'bad-hole': 0.019,
52 | issue17: 2e-16,
53 | issue29: 2e-15,
54 | 'self-touching': 2e-13,
55 | 'eberly-6': 2e-14
56 | }
57 | };
58 |
--------------------------------------------------------------------------------
/website/ocular-docusaurus-plugin/index.js:
--------------------------------------------------------------------------------
1 | const util = require('util');
2 | const path = require('path');
3 |
4 | /* Print full webpack error;
5 | edit node_modules/react-dev-utils/formatWebpackMessages.js
6 |
7 | ```
8 | } else if ('message' in message) {
9 | return message.message;
10 | ```
11 | */
12 |
13 | module.exports = function(context, opts = {
14 | resolve: {modules: [], alias: {}},
15 | debug: false,
16 | module: {},
17 | plugins: []
18 | }) {
19 | return {
20 | name: 'ocular-docusaurus-plugin',
21 | configureWebpack(_config, isServer, utils) {
22 | const {resolve, debug, module, plugins} = opts;
23 |
24 | // Custom merging
25 | if (resolve) {
26 | if (resolve.modules) {
27 | _config.resolve.modules = resolve.modules;
28 | }
29 | Object.assign(_config.resolve.alias, resolve.alias);
30 | }
31 |
32 | // Uncomment to inspect config
33 | // console.log(util.inspect(_config.module, {depth: null}));
34 |
35 | // Symlink docs crash otherwise, see https://github.com/facebook/docusaurus/issues/6257
36 | _config.resolve.symlinks = false;
37 |
38 | if (isServer) {
39 | return {
40 | devtool: debug ? 'eval' : false,
41 | module,
42 | plugins,
43 | node: {__dirname: true}
44 | }
45 | }
46 | return {module, plugins};
47 | },
48 | };
49 | }
--------------------------------------------------------------------------------
/test/utils/tape-assertions.ts:
--------------------------------------------------------------------------------
1 | // math.gl, MIT license
2 |
3 | import type {Test} from 'tape-promise/tape';
4 | import {equals, withEpsilon} from '@math.gl/core';
5 |
6 | function isEqual(a: any, b: any): boolean {
7 | if (a && a.equals) {
8 | return a.equals(b);
9 | }
10 | if (b && b.equals) {
11 | return b.equals(a);
12 | }
13 | return equals(a, b);
14 | }
15 |
16 | // FOR TAPE TESTING
17 | // Use tape assert to compares using a.equals(b)
18 | // Usage test(..., t => { tapeEquals(t, a, b, ...); });
19 | export function tapeEquals(t: Test, a: any, b: any, msg?: string, extra?: any): void {
20 | // @ts-ignore Untyped method
21 | t._assert(isEqual(a, b), {
22 | message: msg || 'should be equal',
23 | operator: 'equal',
24 | actual: a,
25 | expected: b,
26 | extra
27 | });
28 | }
29 |
30 | export function tapeNotEquals(t: Test, a: any, b: any, msg?: string, extra?: any): void {
31 | // @ts-ignore Untyped method
32 | t._assert(!isEqual(a, b), {
33 | message: msg || 'should not be equal',
34 | operator: 'notEqual',
35 | actual: a,
36 | expected: b,
37 | extra
38 | });
39 | }
40 |
41 | // eslint-disable-next-line max-params
42 | export function tapeEqualsEpsilon(
43 | t: Test,
44 | a: any,
45 | b: any,
46 | epsilon: number,
47 | msg?: string,
48 | extra?: any
49 | ): void {
50 | return withEpsilon(epsilon, () => tapeEquals(t, a, b, msg, extra));
51 | }
52 |
--------------------------------------------------------------------------------
/website/src/components/spinner.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import styled from 'styled-components';
3 |
4 | const SpinnerContainer = styled.div`
5 | height: 18px;
6 | line-height: 18px;
7 | font-size: 10px;
8 |
9 | >div {
10 | white-space: nowrap;
11 | left: 0;
12 | bottom: 0;
13 | position: absolute;
14 | height: 18px;
15 | padding-left: 20px;
16 | transition: width 0.5s;
17 | }
18 | .spinner--fill {
19 | background: $primary;
20 | color: $white;
21 | overflow: hidden;
22 | }
23 | .spinner--text {
24 | color: $black-40;
25 | }
26 |
27 | &.done {
28 | height: 0 !important;
29 | line-height: 0;
30 | font-size: 0;
31 | transition: height 0.5s 1s;
32 |
33 | >div {
34 | height: 0 !important;
35 | transition: height 0.5s 1s;
36 | }
37 | }
38 | `;
39 |
40 | export default function Spinner({meta}) {
41 | if (!Number.isFinite(meta.progress) && !Number.isFinite(meta.progressAlt)) {
42 | return null;
43 | }
44 |
45 | const progress = (meta.progress || 0) + (meta.progressAlt || 0);
46 | const percentage = Math.round(progress * 1000) / 10;
47 | const text = `Loading... ${percentage}%`;
48 |
49 | return (
50 | = 1 ? 'done' : ''}>
51 | {text}
52 |
53 | {text}
54 |
55 |
56 | );
57 | }
58 |
--------------------------------------------------------------------------------
/docs/developer-guide/math/coordinate-systems.md:
--------------------------------------------------------------------------------
1 | # 3D Coordinate Systems
2 |
3 | > This article is a work in progress.
4 |
5 | There are many possible ways to represent points in space using coordinates, e.g. rectangular, elliptical, polar/spherical, etc. Which coordinate system is the best depends entirely on the problem at hand. When working with specific geometrical problems, it is often the case that the required mathematical operations become more simple in a certain coordinate system which means that it is worth being familiar both with a few different coordinate system and also how to convert between them.
6 |
7 | math.gl provides support for a couple of 3D coordinate systems:
8 |
9 | - Rectilinear (`Vector3`) - Typically used to represent standard Cartesian space
10 | - Spherical (`SpericalCoordinates`) - Two angles representing point on sphere and a distance from center
11 | - Projective/Homogeneous (`Vector4`) - These are coordinates in "projective" 3-space. The purpose of these is explained in [link](./homogeneous-coordinates)
12 |
13 | ## Converting between Coordinate Systems
14 |
15 | Note that each coordinate system ultimately specifies the same point
16 |
17 | ## Converting within Coordinate Systems
18 |
19 | ## Remarks
20 |
21 | - Note that a similar situation applies for [rotations](./rotations), where different representations are possible (e.g. Euler angles, Quaternions, Axis/angle, 4x4 matrices) and the choice of a "best" representation often depends on the problem at hand.
22 |
--------------------------------------------------------------------------------
/modules/culling/src/lib/bounding-volumes/bounding-volume.ts:
--------------------------------------------------------------------------------
1 | // import {INTERSECTION} from '../../constants';
2 | import {Plane} from '../plane';
3 |
4 | /**
5 | * Common interface for BoundingVolumes
6 | * including BoundingSphere, AxisAlignedBoundingBox and OrientedBoundingBox
7 | */
8 | export interface BoundingVolume {
9 | /**
10 | * Applies a 4x4 affine transformation matrix to a bounding sphere.
11 | * @param sphere The bounding sphere to apply the transformation to.
12 | * @param transform The transformation matrix to apply to the bounding sphere.
13 | * @returns itself, i.e. the modified BoundingVolume.
14 | */
15 | transform(transform: readonly number[]): this;
16 |
17 | /** Computes the estimated distance squared from the closest point on a bounding sphere to a point. */
18 | distanceSquaredTo(point: readonly number[]): number;
19 | /** Computes the estimated distance from the closest point on a bounding sphere to a point. */
20 | distanceTo(point: readonly number[]): number;
21 |
22 | /**
23 | * Determines which side of a plane the oriented bounding box is located.
24 | *
25 | * @param plane The plane to test against.
26 | * @returns
27 | * - `INTERSECTION.INSIDE` if the entire box is on the side of the plane the normal is pointing.
28 | * - `INTERSECTION.OUTSIDE` if the entire box is on the opposite side.
29 | * - `INTERSECTION.INTERSECTING` if the box intersects the plane.
30 | */
31 | intersectPlane(plane: Plane): number;
32 | }
33 |
--------------------------------------------------------------------------------
/modules/polygon/test/data/earcut/fixtures/simplified-us-border.json:
--------------------------------------------------------------------------------
1 | [[[1130,1713],[1131,1710],[1137,1731],[1133,1752],[1125,1753],[1118,1742],[1110,1717],[1105,1718],[1108,1704],[1096,1691],[1077,1694],[1067,1683],[1019,1687],[1031,1689],[1031,1704],[1022,1696],[1022,1702],[1010,1700],[1003,1692],[998,1696],[980,1690],[970,1698],[966,1694],[966,1702],[938,1718],[943,1742],[920,1736],[916,1721],[894,1693],[884,1691],[872,1703],[837,1667],[785,1672],[743,1654],[715,1656],[699,1636],[676,1628],[654,1587],[656,1583],[660,1588],[657,1579],[649,1580],[633,1547],[637,1529],[631,1507],[638,1454],[647,1454],[637,1452],[639,1441],[635,1442],[629,1417],[651,1421],[647,1434],[655,1428],[650,1440],[656,1434],[654,1423],[651,1420],[653,1419],[651,1407],[965,1407],[966,1400],[972,1411],[1008,1423],[1043,1419],[1083,1442],[1086,1450],[1091,1448],[1109,1468],[1114,1496],[1102,1520],[1107,1525],[1149,1508],[1147,1498],[1152,1495],[1174,1495],[1195,1474],[1242,1470],[1260,1433],[1277,1440],[1277,1462],[1286,1476],[1274,1484],[1265,1480],[1243,1503],[1240,1516],[1252,1526],[1238,1529],[1236,1523],[1234,1530],[1218,1531],[1206,1540],[1205,1554],[1195,1567],[1188,1556],[1194,1574],[1185,1590],[1187,1581],[1179,1567],[1185,1557],[1176,1562],[1180,1579],[1179,1585],[1170,1577],[1180,1593],[1169,1590],[1183,1596],[1186,1607],[1175,1605],[1183,1613],[1182,1618],[1171,1615],[1179,1624],[1167,1626],[1145,1650],[1132,1659],[1128,1656],[1121,1675],[1131,1708],[1129,1710],[1130,1713]],[[654,1419],[653,1419],[654,1423],[656,1425],[654,1419]]]
2 |
--------------------------------------------------------------------------------
/modules/polygon/test/data/earcut/fixtures/issue34.json:
--------------------------------------------------------------------------------
1 | [
2 | [[1500,0],[0,0],[0,1000],[1500,1000],[1500,0]],
3 | [[804,642],[814,644],[818,676],[850,690],[838,728],[806,728],[772,752],[748,746],[764,724],[728,726],[710,708],[738,656],[764,668],[784,700],[806,702],[792,666],[804,642]],
4 | [[1176,214],[1254,216],[1292,242],[1324,242],[1332,268],[1352,278],[1352,298],[1290,348],[1290,358],[1312,350],[1314,362],[1266,416],[1240,474],[1182,500],[1200,510],[1200,520],[1186,520],[1200,544],[1186,580],[1160,584],[1162,606],[1146,620],[1162,650],[1136,672],[1124,658],[1076,668],[1022,658],[1036,698],[1066,706],[1118,688],[1144,708],[1132,746],[1064,748],[1004,740],[990,668],[966,670],[946,648],[948,632],[962,628],[992,650],[1016,648],[1054,622],[1044,592],[1054,584],[1078,606],[1076,576],[1052,570],[1056,540],[1038,568],[1004,570],[976,526],[996,502],[958,496],[948,454],[962,454],[952,436],[964,390],[986,382],[974,368],[1004,376],[1018,420],[1052,434],[1060,482],[1078,490],[1062,472],[1062,442],[1104,450],[1104,436],[1142,422],[1154,402],[1110,424],[1046,416],[1022,388],[1022,344],[1002,344],[1018,318],[1060,308],[1076,272],[1104,288],[1122,246],[1140,230],[1168,234],[1176,214]],
5 | [[974,698],[986,738],[964,740],[952,714],[974,698]],
6 | [[842,596],[860,626],[848,622],[842,596]],
7 | [[798,572],[792,606],[768,614],[740,580],[758,586],[798,572]],
8 | [[892,584],[894,594],[882,588],[892,584]],
9 | [[870,500],[912,538],[922,586],[908,590],[894,568],[864,564],[854,550],[868,538],[846,520],[854,500],[870,500]]
10 | ]
11 |
--------------------------------------------------------------------------------
/website/src/components/example/examples-index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // Note: this is internal API and may change in a future release
3 | // https://github.com/facebook/docusaurus/discussions/7457
4 | import {useDocsSidebar} from "@docusaurus/theme-common/internal";
5 | import useBaseUrl from '@docusaurus/useBaseUrl';
6 |
7 | import {
8 | MainExamples,
9 | ExamplesGroup,
10 | ExampleCard,
11 | ExampleHeader,
12 | ExampleTitle
13 | } from './styled';
14 |
15 | function renderItem(item, getThumbnail) {
16 | const imageUrl = useBaseUrl(getThumbnail(item));
17 | const {label, href} = item;
18 |
19 | return (
20 |
21 | 
22 |
23 | {label}
24 |
25 |
26 | );
27 | }
28 |
29 | function renderCategory({label, items}, getThumbnail) {
30 | return [
31 | {label},
32 |
33 | {items.map(item => renderItem(item, getThumbnail))}
34 |
35 | ];
36 | }
37 |
38 | export default function ExamplesIndex({getThumbnail}) {
39 | const sidebar = useDocsSidebar();
40 |
41 | return
42 | {sidebar.items.map(item => {
43 | if (item.type === 'category') {
44 | return renderCategory(item, getThumbnail);
45 | }
46 | return null;
47 | })}
48 | ;
49 | }
50 |
--------------------------------------------------------------------------------
/modules/culling/test/lib/algorithms/bounding-box-from-points.spec.ts:
--------------------------------------------------------------------------------
1 | import test from 'tape-promise/tape';
2 | import {
3 | makeOrientedBoundingBoxFromPoints,
4 | makeAxisAlignedBoundingBoxFromPoints
5 | } from '@math.gl/culling';
6 | import {Vector3, equals} from '@math.gl/core';
7 |
8 | const testPoints = [
9 | [1, 0, 0],
10 | [2, 0, 0],
11 | [0, 0, 0],
12 | [1, 1, 2]
13 | ];
14 |
15 | test('makeOrientedBoundingBoxFromPoints#empty', (t) => {
16 | const boundingBox = makeOrientedBoundingBoxFromPoints([]);
17 | t.ok(equals(boundingBox.center, Vector3.ZERO));
18 | t.ok(equals(boundingBox.halfSize, Vector3.ZERO));
19 | t.end();
20 | });
21 |
22 | test('makeOrientedBoundingBoxFromPoints#one point', (t) => {
23 | const point = [1, 2, 3];
24 | const boundingBox = makeOrientedBoundingBoxFromPoints([point]);
25 | t.ok(equals(boundingBox.center, point));
26 | t.ok(equals(boundingBox.halfSize, Vector3.ZERO));
27 | t.end();
28 | });
29 |
30 | test('makeOrientedBoundingBoxFromPoints', (t) => {
31 | const boundingBox = makeOrientedBoundingBoxFromPoints(testPoints);
32 | for (const point of testPoints) {
33 | t.ok(equals(boundingBox.distanceTo(point), 0), 'point is inside the bounding box');
34 | }
35 | t.end();
36 | });
37 |
38 | test('makeAxisAlignedBoundingBoxFromPoints', (t) => {
39 | const boundingBox = makeAxisAlignedBoundingBoxFromPoints(testPoints);
40 | t.ok(equals(boundingBox.center, [1, 0.5, 1]));
41 | t.ok(equals(boundingBox.halfDiagonal, [1, 0.5, 1]));
42 | t.end();
43 | });
44 |
--------------------------------------------------------------------------------
/modules/dggs-s2/test/s2-utils.spec.ts:
--------------------------------------------------------------------------------
1 | // loaders.gl, MIT license
2 | import test from 'tape-promise/tape';
3 |
4 | import {getS2BoundaryFlat} from '@math.gl/dggs-s2';
5 |
6 | // import Long from 'long';
7 |
8 | // TODO - restore test
9 | // test('Utils -> getS2LngLat', (t) => {
10 | // const s2Token = '8085873c';
11 | // t.deepEqual(getS2LngLat(s2Token), [-122.4637079795235, 37.78228912269449]);
12 | // t.end();
13 | // });
14 |
15 | test('getS2BoundaryFlat', (t) => {
16 | const TEST_TOKENS = [
17 | '80858004', // face 4
18 | '1c', // face 0
19 | '2c', // face 1
20 | '5b', // face 2
21 | '6b', // face 3
22 | 'ab', // face 5
23 | '4/001003',
24 | '54', // antimeridian
25 | '5c' // antimeridian
26 | // new Long(0, -2138636288, false),
27 | // new Long(0, 1832910848, false)
28 | ];
29 |
30 | for (const token of TEST_TOKENS) {
31 | const polygon = getS2BoundaryFlat(token);
32 | t.ok(polygon instanceof Float64Array, 'polygon is flat array');
33 | t.is((polygon.length / 2 - 1) % 4, 0, 'polygon has 4 sides');
34 | t.deepEqual(polygon.slice(0, 2), polygon.slice(-2), 'polygon is closed');
35 |
36 | let minLng = 180;
37 | let maxLng = -180;
38 | for (let i = 0; i < polygon.length; i += 2) {
39 | minLng = Math.min(minLng, polygon[i]);
40 | maxLng = Math.max(maxLng, polygon[i]);
41 | }
42 | // TODO - restore test
43 | // t.ok(maxLng - minLng < 180, 'longitude is adjusted cross the antimeridian');
44 | }
45 |
46 | t.end();
47 | });
48 |
--------------------------------------------------------------------------------
/website/src/doc-demos/mesh-layers.js:
--------------------------------------------------------------------------------
1 | import {
2 | ScenegraphLayer, SimpleMeshLayer
3 | } from '@deck.gl/mesh-layers';
4 | import {OBJLoader} from '@loaders.gl/obj';
5 |
6 | import {makeLayerDemo} from './demo-base';
7 | import {DATA_URI} from '../constants/defaults';
8 |
9 | export const ScenegraphLayerDemo = makeLayerDemo({
10 | Layer: ScenegraphLayer,
11 | getTooltip: '({object}) => object && `${object.name}\n${object.address}`',
12 | props: `{
13 | data: '${DATA_URI}/bart-stations.json',
14 | pickable: true,
15 | scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
16 | getPosition: d => d.coordinates,
17 | getOrientation: d => [0, Math.random() * 180, 90],
18 | _animations: {
19 | '*': {speed: 5}
20 | },
21 | sizeScale: 500,
22 | _lighting: 'pbr'
23 | }`
24 | });
25 |
26 | export const SimpleMeshLayerDemo = makeLayerDemo({
27 | Layer: SimpleMeshLayer,
28 | dependencies: ['https://unpkg.com/@loaders.gl/obj@beta/dist/dist.min.js'],
29 | imports: {OBJLoader},
30 | getTooltip: '({object}) => object && `${object.name}\n${object.address}`',
31 | props: `{
32 | data: '${DATA_URI}/bart-stations.json',
33 | pickable: true,
34 | mesh: '${DATA_URI}/humanoid_quad.obj',
35 | getPosition: d => d.coordinates,
36 | getColor: d => [Math.sqrt(d.exits), 140, 0],
37 | getOrientation: d => [0, Math.random() * 180, 0],
38 | sizeScale: 30,
39 | loaders: [OBJLoader]
40 | }`
41 | });
42 |
--------------------------------------------------------------------------------
/dev-docs/RFCs/README.md:
--------------------------------------------------------------------------------
1 | # RFCs and Roadmaps (math.gl)
2 |
3 | Implementation of non-trivial new features should typically be started off with the creation of an RFC (Request for Comments). For more details see [RFC Guidelines](../RFC-GUIDELINES.md) .
4 |
5 | ## Roadmaps
6 |
7 | Writeups of directions in major areas of interest
8 |
9 | | Roadmap | Description |
10 | | ------- | ----------- |
11 | | N/A | TBD |
12 |
13 | ## v3.0 RFCs
14 |
15 | | RFC | Author | Status | Description |
16 | | ------------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------------------------- |
17 | | [**Monorepo Module Structure**](./math-monorepo-rfc.md) | @ibgreen | **Draft** | Proposes a module structure for math.gl to group similar math functionality into sub-libraries. |
18 | | [**New Geometry Module**](./geometry-module-rfc.md) | @ibgreen | **Drafr** | New loaders.gl submodule collecting framework-agnostic geometry utilities |
19 | | [**New Geospatial Module**](./geometry-module-rfc.md) | @ibgreen | **Drafr** | New loaders.gl submodule collecting framework-agnostic geospatial utilities |
20 | | [**New Culling Module**](./geometry-module-rfc.md) | @ibgreen | **Drafr** | New loaders.gl submodule collecting framework-agnostic culling utilities |
21 |
--------------------------------------------------------------------------------
/modules/core/test/gl-matrix/wip/jasmine.yml:
--------------------------------------------------------------------------------
1 | # src_files
2 | #
3 | # Return an array of filepaths relative to src_dir to include before jasmine specs.
4 | # Default: []
5 | #
6 | # EXAMPLE:
7 | #
8 | # src_files:
9 | # - lib/source1.js
10 | # - lib/source2.js
11 | # - dist/**/*.js
12 | #
13 | src_files:
14 | - src/index.js
15 | - src/common.js
16 |
17 | # stylesheets
18 | #
19 | # Return an array of stylesheet filepaths relative to src_dir to include before jasmine specs.
20 | # Default: []
21 | #
22 | # EXAMPLE:
23 | #
24 | # stylesheets:
25 | # - css/style.css
26 | # - stylesheets/*.css
27 | #
28 | stylesheets:
29 |
30 | # helpers
31 | #
32 | # Return an array of filepaths relative to spec_dir to include before jasmine specs.
33 | # Default: ["helpers/**/*.js"]
34 | #
35 | # EXAMPLE:
36 | #
37 | # helpers:
38 | # - helpers/**/*.js
39 | #
40 | helpers:
41 |
42 | # spec_files
43 | #
44 | # Return an array of filepaths relative to spec_dir to include.
45 | # Default: ["**/*[sS]pec.js"]
46 | #
47 | # EXAMPLE:
48 | #
49 | # spec_files:
50 | # - **/*[sS]pec.js
51 | #
52 | spec_files:
53 |
54 | # src_dir
55 | #
56 | # Source directory path. Your src_files must be returned relative to this path. Will use root if left blank.
57 | # Default: project root
58 | #
59 | # EXAMPLE:
60 | #
61 | # src_dir: public
62 | #
63 | src_dir:
64 |
65 | # spec_dir
66 | #
67 | # Spec directory path. Your spec_files must be returned relative to this path.
68 | # Default: spec/javascripts
69 | #
70 | # EXAMPLE:
71 | #
72 | # spec_dir: spec/javascripts
73 | #
74 | spec_dir: spec
75 |
--------------------------------------------------------------------------------
/website/src/styles.css:
--------------------------------------------------------------------------------
1 | /**
2 | * Any CSS included here will be global. The classic template
3 | * bundles Infima by default. Infima is a CSS framework designed to
4 | * work well for content-centric websites.
5 | */
6 |
7 | /* You can override the default Infima variables here. */
8 | :root {
9 | --ifm-color-primary: #00ade6;
10 | --ifm-color-primary-dark: #009ccf;
11 | --ifm-color-primary-darker: #0093c4;
12 | --ifm-color-primary-darkest: #0079a1;
13 | --ifm-color-primary-light: #00befd;
14 | --ifm-color-primary-lighter: #0ac2ff;
15 | --ifm-color-primary-lightest: #2ccbff;
16 | --ifm-color-white: #FFFFFF;
17 | --ifm-color-gray-200: #F7FAFC;
18 | --ifm-color-gray-300: #ECF2F7;
19 | --ifm-color-gray-400: #E1E8F0;
20 | --ifm-color-gray-500: #CAD5E0;
21 | --ifm-color-gray-600: #9EAEC0;
22 | --ifm-color-gray-700: #6F8196;
23 | --ifm-color-gray-800: #485668;
24 | --ifm-color-gray-900: #2B3848;
25 | --ifm-color-black: #19202C
26 | --code-font-size: 95%;
27 | }
28 | main .container {
29 | position: relative;
30 | min-height: calc(100vh - var(--ifm-navbar-height));
31 | }
32 | .markdown {
33 | position: relative;
34 | }
35 | .menu__link {
36 | line-height: 1.5;
37 | }
38 | .menu__list {
39 | padding-bottom: 0.5rem;
40 | }
41 |
42 | .docusaurus-highlight-code-line {
43 | background-color: rgba(0, 0, 0, 0.1);
44 | display: block;
45 | margin: 0 calc(-1 * var(--pre-padding));
46 | padding: 0 var(--pre-padding);
47 | }
48 |
49 | html[data-theme='dark'] .docusaurus-highlight-code-line {
50 | background-color: rgba(0, 0, 0, 0.3);
51 | }
52 |
--------------------------------------------------------------------------------
/modules/polygon/test/data/earcut/fixtures/issue29.json:
--------------------------------------------------------------------------------
1 | [
2 | [[200.95000055654114,69.90565782485673],[201.73186418809928,76.50881049432792],[204.05247248713854,82.73234962527638],[207.79442497901618,88.23839184455574],[212.7323883100471,92.70045673093409],[218.58296075442922,95.86217257360113],[225.00460918453172,97.53918036725955],[231.66534446463922,97.66082593216561],[238.15796607054654,96.21973398409901],[244.1176358256489,93.27806596420706],[249.2188404462824,88.99822680730722],[253.15628113771672,83.64108043884043],[255.70631344406866,77.51111824424007],[256.73126424155197,70.93641692795792],[256.19351709797047,64.30797780468129],[254.1057433114911,57.996416078653425],[250.56431880965246,52.346517799043795],[245.8112865351897,47.719993951247304],[240.07834375849924,44.33761266223155],[233.71343464441597,42.419284673407674],[227.06488359675492,42.055728640102465],[220.51757991796475,43.257153422775446],[214.45449861431845,45.97523169373744],[209.20995664413203,50.053084840223896],[205.06721924245355,55.271000209450726],[202.29122001552022,61.30178454495035],[201.02451470680535,67.8368895214051]],
3 | [[242.34999892718187,69.90549289577612],[240.7584948063828,76.30057721128688],[236.31611852571368,81.17358751371503],[230.07699953842675,83.34595728587593],[223.55761859836056,82.33733346881347],[218.2910646148026,78.34856240227819],[215.5668820463121,72.34290095195175],[215.9904494531453,65.75019118711353],[219.47497291108593,60.1536534355022],[225.2189893186092,56.88651757836341],[231.8100271829404,56.72041164720431],[237.70269737243652,59.67713584899902],[241.47838292121884,65.0856644153595]]
4 | ]
5 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/cut-polyline-by-mercator-bounds.md:
--------------------------------------------------------------------------------
1 | # cutPolylineByMercatorBounds
2 |
3 |
4 | 
5 |
6 |
7 | Splits a geospatial polyline at the [180th meridian](https://en.wikipedia.org/wiki/180th_meridian).
8 |
9 | ```js
10 | import {cutPolylineByMercatorBounds} from '@math.gl/polygon';
11 |
12 | cutPolylineByMercatorBounds([-10, -10, 10, 10, 30, -10], {size: 2, gridResolution: 10});
13 | // returns [-10, -10, 0, 0, 10, 10, 20, 0, 30, -10]
14 | ```
15 |
16 | ## Usage
17 |
18 | ```js
19 | cutPolylineByMercatorBounds(positions, [options]);
20 | ```
21 |
22 | Arguments:
23 |
24 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polyline. `x` is longitude in degrees, and `y` is latitude in degrees.
25 | - `options` (Object, optional)
26 | - `size` (Number) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
27 | - `startIndex` (Number, optional) - the index in `positions` to start reading vertices. Default `0`.
28 | - `endIndex` (Number, optional) - the index in `positions` to stop reading vertices. Default `positions.length`.
29 | - `normalize` (Boolean) - make sure the output longitudes are within `[-180, 180]`. Default `true`.
30 |
31 | Returns:
32 |
33 | An array of polylines. Each polyline is represented by a positions array that uses the same vertex size as the input.
34 |
--------------------------------------------------------------------------------
/modules/dggs-quadkey/src/quadkey.ts:
--------------------------------------------------------------------------------
1 | // @math.gl, MIT license
2 |
3 | import {worldToLngLat} from '@math.gl/web-mercator';
4 |
5 | const TILE_SIZE = 512;
6 |
7 | export function getQuadkeyLngLat(quadkey: string): number[] {
8 | const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
9 | const [w, n] = worldToLngLat(topLeft);
10 | const [e, s] = worldToLngLat(bottomRight);
11 | return [(e + w) / 2, (s + n) / 2];
12 | }
13 |
14 | export function getQuadkeyBoundary(quadkey: string): number[][] {
15 | const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
16 | const [w, n] = worldToLngLat(topLeft);
17 | const [e, s] = worldToLngLat(bottomRight);
18 | return [
19 | [e, n],
20 | [e, s],
21 | [w, s],
22 | [w, n],
23 | [e, n]
24 | ];
25 | }
26 |
27 | export function getQuadkeyBoundaryFlat(quadkey: string): number[] {
28 | const [topLeft, bottomRight] = quadkeyToWorldBounds(quadkey);
29 | const [w, n] = worldToLngLat(topLeft);
30 | const [e, s] = worldToLngLat(bottomRight);
31 | return [e, n, e, s, w, s, w, n, e, n];
32 | }
33 |
34 | export function quadkeyToWorldBounds(quadkey: string): [number[], number[]] {
35 | let x = 0;
36 | let y = 0;
37 | let mask = 1 << quadkey.length;
38 | const scale = mask / TILE_SIZE;
39 |
40 | for (let i = 0; i < quadkey.length; i++) {
41 | mask >>= 1;
42 | const q = parseInt(quadkey[i], 10);
43 | if (q % 2) x |= mask;
44 | if (q > 1) y |= mask;
45 | }
46 | return [
47 | [x / scale, TILE_SIZE - y / scale],
48 | [(x + 0.99) / scale, TILE_SIZE - (y + 0.99) / scale]
49 | ];
50 | }
51 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/clip-polygon.md:
--------------------------------------------------------------------------------
1 | # clipPolygon
2 |
3 |
4 |
5 |
6 |
7 | Clips a polygon with a bounding box.
8 |
9 | ```js
10 | import {clipPolygon} from '@math.gl/polygon';
11 |
12 | clipPolyline([-10, -10, 10, 10, 30, -10, -10, -10], [0, 0, 20, 20], {size: 2});
13 | // returns [0, 0, 10, 10, 20, 0, 0, 0]
14 | ```
15 |
16 | The clipping bounds are defined as an orthoganal rectangle on the XY plane. If a 3D polygon is supplied, it is clipped by the extuded volume from the bounding box.
17 |
18 | ## Usage
19 |
20 | ```js
21 | clipPolygon(positions, bbox, [options]);
22 | ```
23 |
24 | Arguments:
25 |
26 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polygon.
27 | - `bbox` (Array) - the bounding box, in `[minX, minY, maxX, maxY]`
28 | - `options` (Object, optional)
29 | - `size` (Number) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
30 | - `startIndex` (Number, optional) - the index in `positions` to start reading vertices. Default `0`.
31 | - `endIndex` (Number, optional) - the index in `positions` to stop reading vertices. Default `positions.length`.
32 |
33 | Returns:
34 |
35 | A positions array that describes the intersection of the original polygon and the bounding box. Uses the same vertex size as the input.
36 |
37 | If the input polygon does not overlap with the bounding box, an empty array will be returned.
38 |
--------------------------------------------------------------------------------
/modules/polygon/test/data/earcut/fixtures/issue83.json:
--------------------------------------------------------------------------------
1 | [
2 | [[0,0],[4000,0],[4000,4000],[0,4000]],
3 | [[0,0],[4000,0],[4000,4000],[0,4000]],
4 | [[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1],[-1,-1]]
5 | ]
6 |
--------------------------------------------------------------------------------
/website/scripts/validate-token.js:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2015 - 2018 Uber Technologies, Inc.
2 | //
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy
4 | // of this software and associated documentation files (the "Software"), to deal
5 | // in the Software without restriction, including without limitation the rights
6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | // copies of the Software, and to permit persons to whom the Software is
8 | // furnished to do so, subject to the following conditions:
9 | //
10 | // The above copyright notice and this permission notice shall be included in
11 | // all copies or substantial portions of the Software.
12 | //
13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | // THE SOFTWARE.
20 |
21 | // Enables ES2015 import/export in Node.js
22 |
23 | const console = require('console');
24 | const process = require('process');
25 |
26 | // function checkToken(key) {
27 | // // eslint-disable-next-line
28 | // if (!process.env[key]) {
29 | // console.log('\x1b[31m%s\x1b[0m', `Missing ${key}!`);
30 | // process.exit(1); //eslint-disable-line
31 | // }
32 | // }
33 |
34 | // checkToken('MapboxAccessToken');
35 | // checkToken('GoogleMapsAPIKey');
36 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/clip-polyline.md:
--------------------------------------------------------------------------------
1 | # clipPolyline
2 |
3 |
4 |
5 |
6 |
7 | Clips a polyline with a bounding box.
8 |
9 | ```js
10 | import {clipPolyline} from '@math.gl/polygon';
11 |
12 | clipPolyline([-10, -10, 10, 10, 30, -10], [0, 0, 20, 20], {size: 2});
13 | // returns [[0, 0, 10, 10, 20, 0]]
14 | ```
15 |
16 | The clipping bounds are defined as an orthoganal rectangle on the XY plane. If a 3D polyline is supplied, it is clipped by the extuded volume from the bounding box.
17 |
18 | ## Usage
19 |
20 | ```js
21 | clipPolyline(positions, bbox, [options]);
22 | ```
23 |
24 | Arguments:
25 |
26 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polyline.
27 | - `bbox` (Array) - the bounding box, in `[minX, minY, maxX, maxY]`
28 | - `options` (Object, optional)
29 | - `size` (Number) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
30 | - `startIndex` (Number, optional) - the index in `positions` to start reading vertices. Default `0`.
31 | - `endIndex` (Number, optional) - the index in `positions` to stop reading vertices. Default `positions.length`.
32 |
33 | Returns:
34 |
35 | An array of polylines that are parts of the original polyline and contained by the given bounding box. Each polyline is represented by a positions array that uses the same vertex size as the input.
36 |
37 | If the input polyline is entirely outside of the bounding box, an empty array will be returned.
38 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/earcut.md:
--------------------------------------------------------------------------------
1 | # earcut
2 |
3 |
4 | 
5 |
6 |
7 | Computes a triangulation of a polygon using the [earcut library](https://github.com/mapbox/earcut).
8 |
9 | ```js
10 | import {earcut} from '@math.gl/polygon';
11 |
12 | earcut([10, 0, 0, 50, 60, 60, 70, 10]);
13 | // returns [1, 0, 3, 3, 2, 1]
14 |
15 | // Polygon with a hole starting at vertex 4
16 | earcut([0, 0, 100, 0, 100, 100, 0, 100, 20, 20, 80, 20, 80, 80, 20, 80], [4]);
17 | // returns [3, 0, 4, 5, 4, 0, 3, 4, 7, 5, 0, 1, 2, 3, 7, 6, 5, 1, 2, 7, 6, 6, 1, 2]
18 | ```
19 |
20 | ## Usage
21 |
22 | ```js
23 | earcut(positions[, holeIndices, size = 2, areas, plane]);
24 | ```
25 |
26 | Arguments:
27 |
28 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polygon.
29 | - `holeIndices` (Array, optional) - is an array of hole indices if any (e.g. [5, 8] for a 12-vertex input would mean one hole with vertices 5–7 and another with 8–11).
30 | - `size` (Number, optional) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
31 | - `areas` (Array, optional) - areas of outer polygon and holes as computed by `getPolygonSignedArea()`. Can be optionally supplied to speed up triangulation
32 | - `plane` (String, optional) - the 2D projection plane on which to tesselate a 3D polygon on. One of `xy`, `yz`, `xz`. Default to `xy`
33 |
34 | Returns:
35 |
36 | An array of indices into the `positions` array that describes the triangulation of the polygon
37 |
--------------------------------------------------------------------------------
/docs/modules/dggs-s2/api-reference/s2.md:
--------------------------------------------------------------------------------
1 | # S2 API
2 |
3 |
4 | 
5 |
6 |
7 | :::caution
8 | This module is still experimental. It may have issues and functionality may change in minor releases.
9 | :::
10 |
11 | ## Overview
12 |
13 | S2 is a discrete global grid system built on the Hilbert curve.
14 | See [s2geometry.io](https://s2geometry.io/) for more information.
15 |
16 | > The S2 functions in math.gl are currently focused on **decoding** S2 encoded data, not encoding it.
17 |
18 | ## API Notes
19 |
20 | The API provided by this module mainly works with S2 token strings,
21 | as those are typically found in data files.
22 |
23 | But note that S2 cells have multiple representations. They can be represented as:
24 | - S2 token strings (stringified versions of the indexes)
25 | - S2 indexes which are 64 bit numbers represented by the `Long` type.
26 | - Hilbert QuadKey strings.
27 | - S2 Cells which are tuples of numbers.
28 |
29 | Information on the the Long data type can be found here: TBA
30 |
31 | ## Core Functions
32 |
33 | #### `getIndexFromS2Token(s2Token: string): Long`
34 |
35 | Decodes a string into the 64 bit token.
36 |
37 | #### `getS2TokenFromIndex(s2Index: Long): string`
38 |
39 | Encodes the 64 bit token into a string.
40 |
41 | #### `getS2ChildIndex(s2Index: Long, index: number): Long`
42 |
43 | Returns the specific index of a child cell.
44 |
45 | #### `getS2Center(s2Token: string): number[]`
46 |
47 | Returns the center lng, lat of the S2 cell
48 |
49 | #### `getS2Boundary(s2Token: string): Float64Array`
50 |
51 | Returns the boundary as a list of lng, lat of the S2 cell
52 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | 
4 |
5 |
6 | 
7 |
8 | 
9 |
10 |
11 | math.gl | Docs
12 |
13 | # math.gl
14 |
15 | > This page is a brief summary only. Please refer to the extensive online [documentation](https://visgl.github.io/math.gl).
16 |
17 | math.gl is JavaScript math library focused on geospatial and 3D use cases.
18 |
19 | It is highly modular and composable, providing a core module with classic vector and matrix classes, and a suite of optional modules implementing various aspects of geospatial or 3D math.
20 |
21 | In spite of its name, math.gl has no actual WebGL dependencies (e.g. it does not use WebGL or GPU to perform calculations), however its API is optimized for use with WebGL applications and GPU compute.
22 |
23 | ## Attribution
24 |
25 | math.gl was inspired by, and includes code, documentation and ideas from some of the most proven open source JavaScript math libraries, including [`gl-matrix`](http://glmatrix.net/) and the THREE.js math library.
26 |
27 | The generous open source licenses of those libraries encouraged reuse which enabled math.gl to be built.
28 |
29 | ## License
30 |
31 | MIT license. All code that math.gl has forked is also licensed under MIT or an MIT compatible permissive licenses.
32 |
--------------------------------------------------------------------------------
/examples/benchmarks/webpack.config.js:
--------------------------------------------------------------------------------
1 | const COMMON_CONFIG = {
2 | mode: 'development',
3 |
4 | entry: {
5 | app: './app.js'
6 | },
7 |
8 | output: {
9 | library: 'App'
10 | },
11 |
12 | module: {
13 | rules: [
14 | {
15 | test: /\.js$/,
16 | loader: 'babel-loader',
17 | exclude: [/node_modules/],
18 | options: {
19 | presets: [
20 | '@babel/preset-react',
21 | [
22 | '@babel/preset-env',
23 | {
24 | // Transpiling classes kills object creation performance
25 | exclude: ['@babel/plugin-transform-classes']
26 | }
27 | ]
28 | ],
29 | plugins: [
30 | // Kills object creation performance
31 | // ['transform-builtin-extend', {globals: ['Array']}]
32 | ]
33 | }
34 | },
35 | {
36 | test: /\.css$/,
37 | use: ['style-loader', 'css-loader']
38 | }
39 | ]
40 | }
41 | };
42 |
43 | function addDevConfig(config, env) {
44 | config = require('../webpack.config.local')(config)(env);
45 | return config;
46 | }
47 |
48 | function addProdConfig(config) {
49 | config.plugins = config.plugins || [];
50 |
51 | return Object.assign(config, {
52 | mode: 'production'
53 | });
54 | }
55 |
56 | module.exports = (env) => {
57 | env = env || {};
58 |
59 | let config = COMMON_CONFIG;
60 |
61 | if (env.local) {
62 | config = addDevConfig(config, env);
63 | }
64 |
65 | if (env.prod) {
66 | config = addProdConfig(config);
67 | }
68 |
69 | // Enable to debug config
70 | // console.warn(JSON.stringify(config, null, 2));
71 |
72 | return config;
73 | };
74 |
--------------------------------------------------------------------------------
/modules/core/test/classes/vectors.spec.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2017 Uber Technologies, Inc.
2 | // MIT License
3 |
4 | /* eslint-disable max-statements */
5 | import test, {Test} from 'tape-promise/tape';
6 | import {Vector2, Vector3, Vector4} from '@math.gl/core';
7 |
8 | // FOR TAPE TESTING
9 | // Use tape assert to compares using a.equals(b)
10 | // Usage test(..., t => { tapeEquals(t, a, b, ...); });
11 | export function tapeEquals(t: Test, a, b, msg, extra) {
12 | /* eslint-disable no-invalid-this */
13 | t._assert(a.equals(b), {
14 | message: msg || 'should be equal',
15 | operator: 'equal',
16 | actual: a,
17 | expected: b,
18 | extra
19 | });
20 | }
21 |
22 | test('Math#types', (t) => {
23 | t.equals(typeof Vector2, 'function');
24 | t.equals(typeof Vector3, 'function');
25 | t.equals(typeof Vector4, 'function');
26 | t.end();
27 | });
28 |
29 | test('Math#construct and Array.isArray check', (t) => {
30 | t.ok(Array.isArray(new Vector2()));
31 | t.ok(Array.isArray(new Vector3()));
32 | t.ok(Array.isArray(new Vector4()));
33 | t.end();
34 | });
35 |
36 | // ['add', 'cross'];
37 | const VECTOR_METHODS = ['clone'];
38 |
39 | test('Vector2#members and methods', (t) => {
40 | const v = new Vector2();
41 | t.equals(v.x, 0);
42 | t.equals(v.y, 0);
43 |
44 | for (const method of VECTOR_METHODS) {
45 | t.equals(typeof v[method], 'function');
46 | }
47 | t.end();
48 | });
49 |
50 | test('Vector4#members and methods', (t) => {
51 | const v = new Vector4();
52 | t.equals(v.x, 0);
53 | t.equals(v.y, 0);
54 | t.equals(v.z, 0);
55 | t.equals(v.w, 0);
56 |
57 | for (const method of VECTOR_METHODS) {
58 | t.equals(typeof v[method], 'function');
59 | }
60 | t.end();
61 | });
62 |
--------------------------------------------------------------------------------
/test/utils/expect-assertions.ts:
--------------------------------------------------------------------------------
1 | // math.gl, MIT license
2 |
3 | import test, {Test} from 'tape-promise/tape';
4 | import {tapeEquals, tapeNotEquals, tapeEqualsEpsilon} from './tape-assertions';
5 |
6 | // Maps `expect` style tests to `tape assert` style tests
7 |
8 | class TestCase {
9 | _t: Test;
10 | _result: any;
11 | _not: boolean;
12 |
13 | constructor(t: Test, result: any) {
14 | this._t = t;
15 | this._result = result;
16 | this._not = false;
17 | }
18 |
19 | toBe(value: any): void {
20 | if (this._not) {
21 | this._t.notEquals(this._result, value);
22 | } else {
23 | this._t.equals(this._result, value);
24 | }
25 | }
26 |
27 | toEqual(value: any): void {
28 | if (this._not) {
29 | tapeNotEquals(this._t, this._result, value);
30 | } else {
31 | tapeEquals(this._t, this._result, value);
32 | }
33 | }
34 |
35 | toEqualEpsilon(value: number, epsilon: number): void {
36 | tapeEqualsEpsilon(this._t, this._result, value, epsilon);
37 | }
38 |
39 | toThrow(): void {
40 | this._t.throws(() => this._result());
41 | }
42 |
43 | get not(): this {
44 | this._not = !this._not;
45 | return this;
46 | }
47 | }
48 |
49 | let currentTest: Test;
50 |
51 | let currentBeforeFunc: Function;
52 |
53 | export function beforeEach(beforeFunc: Function) {
54 | currentBeforeFunc = beforeFunc;
55 | }
56 |
57 | export function it(message: string, testfunc: Function) {
58 | if (currentBeforeFunc) {
59 | currentBeforeFunc();
60 | }
61 |
62 | test(message, (t) => {
63 | currentTest = t;
64 | testfunc();
65 | t.end();
66 | });
67 | }
68 |
69 | export function expect(value: unknown) {
70 | return new TestCase(currentTest, value);
71 | }
72 |
--------------------------------------------------------------------------------
/docs/modules/web-mercator/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 |
3 |
4 | 
5 |
6 |
7 | > The `@math.gl/web-mercator` module is the new home for the now archived[`viewport-mercator-project`](https://github.com/uber-common/viewport-mercator-project/blob/master/docs/whats-new.md) repository, as of Oct 1, 2019.
8 |
9 | The `@math.gl/web-mercator` module offers projection and camera utilities supporting the spherical Web Mercator Projection. At its core, this is a utility for converting to and from map coordinates (i.e. latitude, longitude) to screen coordinates and back.
10 |
11 | ## Who is this for?
12 |
13 | Specifically built for use with [deck.gl](https://github.com/uber/deck.gl) and [react-map-gl](https://github.com/uber/react-map-gl), but potentially useful for any web mapping application that wants to support perspective enabled Web Mercator Projections with floating point zoom levels.
14 |
15 | ## Example Usage
16 |
17 | The `WebMercatorViewport` class offers the equivalent of a 3D matrix "camera" class of the type you would find in any 3D/WebGL/OpenGL library.
18 |
19 | ```
20 | npm install @math.gl/web-mercator --save
21 | ```
22 |
23 | ```js
24 | import WebMercatorViewport from '@math.gl/web-mercator';
25 |
26 | // A viewport looking at San Francisco city area
27 | const viewport = new WebMercatorViewport({
28 | width: 800,
29 | height: 600,
30 | longitude: -122.45,
31 | latitude: 37.78,
32 | zoom: 12,
33 | pitch: 60,
34 | bearing: 30
35 | });
36 |
37 | viewport.project([-122.45, 37.78]);
38 | // returns pixel coordinates [400, 300]
39 | viewport.unproject([400, 300]);
40 | // returns map coordinates [-122.45, 37.78]
41 | ```
42 |
--------------------------------------------------------------------------------
/modules/types/src/bigint.ts:
--------------------------------------------------------------------------------
1 | // BigInt compatibility layer
2 | // Inspired by ArrowJS (under Apache2 license)
3 | // https://github.com/apache/arrow/blob/master/js/src/util/compat.ts
4 | // Requires tsconfig.json: target=esnext or (lib: esnext.bigint)
5 | // Requires eslint: env: {es2020: true}
6 |
7 | const ERR_BIGINT_UNAVAILABLE = 'BigInt is not available in this environment';
8 |
9 | function BigIntUnavailable() {
10 | throw new Error(ERR_BIGINT_UNAVAILABLE);
11 | }
12 | BigIntUnavailable.asIntN = () => {
13 | throw new Error(ERR_BIGINT_UNAVAILABLE);
14 | };
15 | BigIntUnavailable.asUintN = () => {
16 | throw new Error(ERR_BIGINT_UNAVAILABLE);
17 | };
18 |
19 | class BigInt64ArrayUnavailable {
20 | static get BYTES_PER_ELEMENT() {
21 | return 8;
22 | }
23 | static of() {
24 | throw new Error(ERR_BIGINT_UNAVAILABLE);
25 | }
26 | static from() {
27 | throw new Error(ERR_BIGINT_UNAVAILABLE);
28 | }
29 | constructor() {
30 | throw new Error(ERR_BIGINT_UNAVAILABLE);
31 | }
32 | }
33 |
34 | export const BigIntAvailable = typeof BigInt !== 'undefined';
35 | export const BigInt64ArrayAvailable = typeof BigInt64Array !== 'undefined';
36 | export const BigUint64ArrayAvailable = typeof BigUint64Array !== 'undefined';
37 |
38 | const BigIntCtor = (() => {
39 | return BigIntAvailable ? BigInt : BigIntUnavailable;
40 | })();
41 |
42 | const BigInt64ArrayCtor = (() => {
43 | return BigInt64ArrayAvailable ? BigInt64Array : BigInt64ArrayUnavailable;
44 | })();
45 |
46 | const BigUint64ArrayCtor = (() => {
47 | return BigUint64ArrayAvailable ? [BigUint64Array] : [BigInt64ArrayUnavailable];
48 | })();
49 |
50 | export {BigIntCtor as BigInt};
51 | export {BigInt64ArrayCtor as BigInt64Array};
52 | export {BigUint64ArrayCtor as BigUint64Array};
53 |
--------------------------------------------------------------------------------
/modules/web-mercator/src/normalize-viewport-props.ts:
--------------------------------------------------------------------------------
1 | import {worldToLngLat} from './web-mercator-utils';
2 | import {mod, log2} from './math-utils';
3 |
4 | // defined by mapbox-gl
5 | const TILE_SIZE = 512;
6 |
7 | /** Description of viewport */
8 | export type ViewportProps = {
9 | width: number;
10 | height: number;
11 | longitude: number;
12 | latitude: number;
13 | zoom: number;
14 | pitch?: number;
15 | bearing?: number;
16 | };
17 |
18 | /**
19 | * Apply mathematical constraints to viewport props
20 | * @param props
21 | */
22 | // eslint-disable-next-line complexity
23 | export function normalizeViewportProps(props: ViewportProps): ViewportProps {
24 | const {width, height, pitch = 0} = props;
25 | let {longitude, latitude, zoom, bearing = 0} = props;
26 |
27 | // Normalize degrees
28 | if (longitude < -180 || longitude > 180) {
29 | longitude = mod(longitude + 180, 360) - 180;
30 | }
31 | if (bearing < -180 || bearing > 180) {
32 | bearing = mod(bearing + 180, 360) - 180;
33 | }
34 |
35 | // Constrain zoom and shift center at low zoom levels
36 | const minZoom = log2(height / TILE_SIZE);
37 | if (zoom <= minZoom) {
38 | zoom = minZoom;
39 | latitude = 0;
40 | } else {
41 | // Eliminate white space above and below the map
42 | const halfHeightPixels = height / 2 / Math.pow(2, zoom);
43 | const minLatitude = worldToLngLat([0, halfHeightPixels])[1];
44 | if (latitude < minLatitude) {
45 | latitude = minLatitude;
46 | } else {
47 | const maxLatitude = worldToLngLat([0, TILE_SIZE - halfHeightPixels])[1];
48 | if (latitude > maxLatitude) {
49 | latitude = maxLatitude;
50 | }
51 | }
52 | }
53 |
54 | return {width, height, longitude, latitude, zoom, pitch, bearing};
55 | }
56 |
--------------------------------------------------------------------------------
/docs/modules/proj4/api-reference/proj4-projection.md:
--------------------------------------------------------------------------------
1 | # Proj4Projection
2 |
3 |
4 | 
5 |
6 |
7 | ## Usage
8 |
9 | Reproject WGS84 coordinates to another CRS
10 |
11 | ```js
12 | import {Proj4Projection} from '@math.gl/proj4';
13 |
14 | const nad83Proj =
15 | '+title=NAD83 (long/lat) +proj=longlat +a=6378137.0 +b=6356752.31414036 +ellps=GRS80 +datum=NAD83 +units=degrees';
16 | const projection = new Proj4Projection({from: 'WGS84', to: nad83Proj});
17 |
18 | const wgs84Position = [21, 78, 5000];
19 | const reprojectedPosition = projection.project(wgs84Position);
20 | ```
21 |
22 | Define Projection Aliases
23 |
24 | ```js
25 | import {Proj4Projection} from '@math.gl/proj4';
26 |
27 | Proj4Projection.defineProjectionAliases({
28 | 'EPSG:4326': '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees',
29 | 'EPSG:4269':
30 | '+title=NAD83 (long/lat) +proj=longlat +a=6378137.0 +b=6356752.31414036 +ellps=GRS80 +datum=NAD83 +units=degrees'
31 | });
32 | const projection = new Proj4Projection({from: 'EPSG:4326', to: 'EPSG:4269'});
33 | ```
34 |
35 | ## Static Fields
36 |
37 | ### `Proj4Projection.defineProjectionAliases(projections: {[alias: string]: string})`
38 |
39 | Defines projection aliases
40 |
41 | ## Methods
42 |
43 | ### `constructor(options: {from?: string, to?: string})`
44 |
45 | Create a new `Proj4Projection` instance that can convert between the specified coordinate systems.
46 |
47 | ### `project(coord: number[]): number[]`
48 |
49 | Project a coordinate project from first to second coordinate system
50 |
51 | ### `unproject(coord: number[]): number[]`
52 |
53 | Project a coordinate project from second to first coordinate system
54 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/cut-polyline-by-grid.md:
--------------------------------------------------------------------------------
1 | # cutPolylineByGrid
2 |
3 |
4 |
5 |
6 |
7 | Subdivides a polyline by intersecting with a uniform grid.
8 |
9 | ```js
10 | import {cutPolylineByGrid} from '@math.gl/polygon';
11 |
12 | cutPolylineByGrid([-10, -10, 10, 10, 30, -10], {size: 2, gridResolution: 10});
13 | // returns [-10, -10, 0, 0, 10, 10, 20, 0, 30, -10]
14 | ```
15 |
16 | ## Usage
17 |
18 | ```js
19 | cutPolylineByGrid(positions, [options]);
20 | ```
21 |
22 | Arguments:
23 |
24 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polyline.
25 | - `options` (Object, optional)
26 | - `size` (Number) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
27 | - `startIndex` (Number, optional) - the index in `positions` to start reading vertices. Default `0`.
28 | - `endIndex` (Number, optional) - the index in `positions` to stop reading vertices. Default `positions.length`.
29 | - `gridResolution` (Number, optional) - the grid size. Default `10`.
30 | - `gridOffset` (Array, optional) - the grid offset in `[x, y]`. Default `[0, 0]` i.e. the grid starts from the coordinate origin.
31 | - `broken` (Boolean, optional) - if `true`, the polyline is broken into multiple polylines at the subdivision points. If `false`, subdivision points are inserted into the original polyline. Default `false`.
32 |
33 | Returns:
34 |
35 | A polyline or an array of polylines, depending on the `broken` option. Each polyline is represented by a positions array that uses the same vertex size as the input.
36 |
--------------------------------------------------------------------------------
/modules/core/src/gl-matrix/common.js:
--------------------------------------------------------------------------------
1 | // @eslint-disable
2 | // @ts-nocheck
3 |
4 | /**
5 | * Common utilities
6 | * @module glMatrix
7 | */
8 |
9 | // Configuration Constants
10 | export const EPSILON = 0.000001;
11 | export let ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
12 | export const RANDOM = Math.random;
13 | export const ANGLE_ORDER = 'zyx';
14 |
15 | /**
16 | * Symmetric round
17 | * see https://www.npmjs.com/package/round-half-up-symmetric#user-content-detailed-background
18 | *
19 | * @param {Number} a value to round
20 | */
21 | export function round(a) {
22 | if (a >= 0) return Math.round(a);
23 |
24 | return a % 0.5 === 0 ? Math.floor(a) : Math.round(a);
25 | }
26 |
27 | /**
28 | * Sets the type of array used when creating new vectors and matrices
29 | *
30 | * @param {Float32ArrayConstructor | ArrayConstructor} type Array type, such as Float32Array or Array
31 | */
32 | export function setMatrixArrayType(type) {
33 | ARRAY_TYPE = type;
34 | }
35 |
36 | const degree = Math.PI / 180;
37 |
38 | /**
39 | * Convert Degree To Radian
40 | *
41 | * @param {Number} a Angle in Degrees
42 | */
43 | export function toRadian(a) {
44 | return a * degree;
45 | }
46 |
47 | /**
48 | * Tests whether or not the arguments have approximately the same value, within an absolute
49 | * or relative tolerance of glMatrix.EPSILON (an absolute tolerance is used for values less
50 | * than or equal to 1.0, and a relative tolerance is used for larger values)
51 | *
52 | * @param {Number} a The first number to test.
53 | * @param {Number} b The second number to test.
54 | * @returns {Boolean} True if the numbers are approximately equal, false otherwise.
55 | */
56 | export function equals(a, b) {
57 | return Math.abs(a - b) <= EPSILON * Math.max(1.0, Math.abs(a), Math.abs(b));
58 | }
59 |
--------------------------------------------------------------------------------
/website/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "project-website",
3 | "version": "0.0.0",
4 | "private": true,
5 | "description": "Website for vis.gl project",
6 | "scripts": {
7 | "docusaurus": "docusaurus",
8 | "start": "docusaurus start",
9 | "build": "./scripts/build.sh prod",
10 | "build-staging": "./scripts/build.sh staging",
11 | "swizzle": "docusaurus swizzle",
12 | "clear": "docusaurus clear",
13 | "serve": "docusaurus serve",
14 | "write-heading-ids": "ts-node scripts/write-heading-ids.ts",
15 | "deploy": "docusaurus deploy"
16 | },
17 | "dependencies": {
18 | "@algolia/autocomplete-js": "^1.8.3",
19 | "@docusaurus/core": "^3.0.0",
20 | "@docusaurus/preset-classic": "^3.0.0",
21 | "@loaders.gl/i3s": "^3.3.1",
22 | "@loaders.gl/las": "^3.3.1",
23 | "@loaders.gl/obj": "^3.3.1",
24 | "@loaders.gl/ply": "^3.3.1",
25 | "@material-ui/core": "^4.10.2",
26 | "@material-ui/icons": "^4.9.1",
27 | "@material-ui/lab": "^4.0.0-alpha.57",
28 | "@mdx-js/react": "^3.0.0",
29 | "docusaurus-mdx-checker": "^3.0.0",
30 | "d3-color": "^3.1.0",
31 | "d3-request": "^1.0.6",
32 | "mapbox-gl": "^2.0.0",
33 | "maplibre-gl": "^2.4.0",
34 | "react": "^18.2.0",
35 | "react-dom": "^18.2.0",
36 | "react-map-gl": "^7.0.0",
37 | "styled-components": "^5.3.3"
38 | },
39 | "devDependencies": {
40 | "@cmfcmf/docusaurus-search-local": "^1.0.0",
41 | "@docusaurus/module-type-aliases": "^3.0.0",
42 | "@docusaurus/plugin-client-redirects": "^3.0.0",
43 | "@docusaurus/plugin-content-docs": "^3.0.0",
44 | "babel-plugin-styled-components": "^2.0.0",
45 | "prism-react-renderer": "^2.1.0",
46 | "ts-node": "~10.9.1"
47 | },
48 | "browserslist": [
49 | ">0.2% and supports async-functions",
50 | "not dead"
51 | ]
52 | }
53 |
--------------------------------------------------------------------------------
/docs/modules/geoid/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 |
3 |
4 | 
5 |
6 |
7 | The `@math.gl/geoid` module provides support for irregular Earth models defined by earth gravity model files.
8 |
9 | 
10 |
11 | A view of the Earth's geoid, as provided by EGM96 (Earth Gravitational Model 1996).
12 | Attribution: From wikipedia, Public Domain.
13 |
14 | ## Background
15 |
16 | While spherical and ellipsoidal models of the earth can be very useful, the Earth is ultimately an irregular object, with lumps of higher density etc. This irregular model of the earth is usually referred to as a "geoid" (essentially, an irregular "ellipsoid").
17 |
18 | Earth gravity models can be used to describe this geoid. The models implemented by `@math.gl/geoid` use a superposition of spherical harmonics to approximate measured gravity.
19 |
20 | Calculates difference between mean see level height and WGS84 ellipsoid height
21 |
22 | ## Earth Gravity Model Data Files
23 |
24 | Gravity Height Model data files tend to be stored in PGM format.
25 |
26 | - Calculates difference between mean see level height and WGS84 ellipsoid height
27 | - Input data have to be loaded from "Earth Gravity Model" \*.pgm file with "PGMLoader"
28 | - A particular model file can be loaded on https://geographiclib.sourceforge.io/html/geoid.html
29 |
30 | ## Attribution
31 |
32 | This implementation is a JavaScript port of selected code from [GeographicLib-1.50.1](https://geographiclib.sourceforge.io/html/index.html), listed as Copyright Charles Karney charles@karney.com, under the MIT license.
33 |
--------------------------------------------------------------------------------
/docs/developer-guide/debugging.md:
--------------------------------------------------------------------------------
1 | # Debugging
2 |
3 | > This article is a work in progress.
4 |
5 | ## About Validation and Debug Support
6 |
7 | TBA:
8 |
9 | - Turning on an off
10 | - performance implications
11 |
12 | ## About "Printing"
13 |
14 | Generating a string representation of a math.gl object with desired precision and formatting.
15 |
16 | Every math.gl object has a `formatString({...opts})` method that allows you to stringify an object with special options set. Each object also defines the built-in JavaScript function `toString()` to call `formatString()` with the global printing options in the math.gl `config` object.
17 |
18 | - `toString` and `formatString` methods print with controllable precision
19 |
20 | | Print Parameter | Default | Description |
21 | | ---------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
22 | | `printPrecision` | `4` | Number of significant digits |
23 | | `printTypes` | `false` | Prints the name of the math.gl type (e.g. `Vector3[...]` instead of `[...]` |
24 | | `printDegrees` | `false` | Prints degrees instead of radians (e.g. for `Euler` and `SphericalCoordinates`) |
25 | | `printRowMajor` | `true` | Prints matrices as row major which makes them look more familiar instead of as column major (which is how they are stored internally for WebGL compatibility). |
26 |
--------------------------------------------------------------------------------
/modules/types/test/is-array.spec.ts:
--------------------------------------------------------------------------------
1 | // math.gl, MIT license
2 |
3 | import test from 'tape-promise/tape';
4 | import {isTypedArray, isNumericArray} from '@math.gl/types';
5 |
6 | const TEST_CASES: {value: unknown; isTypedArray: boolean; isNumericArray: boolean}[] = [
7 | {value: new Float32Array(1), isTypedArray: true, isNumericArray: true},
8 | {value: new Uint8Array(2), isTypedArray: true, isNumericArray: true},
9 | {value: [], isTypedArray: false, isNumericArray: true},
10 | {value: [100, 100], isTypedArray: false, isNumericArray: true},
11 | {value: ['a'], isTypedArray: false, isNumericArray: false},
12 | {value: new ArrayBuffer(4), isTypedArray: false, isNumericArray: false},
13 | {value: new DataView(new ArrayBuffer(16)), isTypedArray: false, isNumericArray: false},
14 | {value: undefined, isTypedArray: false, isNumericArray: false},
15 | {value: null, isTypedArray: false, isNumericArray: false},
16 | {value: {}, isTypedArray: false, isNumericArray: false},
17 | {value: {length: 0}, isTypedArray: false, isNumericArray: false},
18 | {value: 1, isTypedArray: false, isNumericArray: false},
19 | {value: NaN, isTypedArray: false, isNumericArray: false},
20 | {value: 'NaN', isTypedArray: false, isNumericArray: false},
21 | {value: '', isTypedArray: false, isNumericArray: false}
22 | ];
23 |
24 | test('math.gl#isTypedArray', (t) => {
25 | for (const tc of TEST_CASES) {
26 | t.equal(
27 | Boolean(isTypedArray(tc.value)),
28 | tc.isTypedArray,
29 | `isTypedArray(${JSON.stringify(tc.value)}) => ${tc.isTypedArray}`
30 | );
31 | }
32 | t.end();
33 | });
34 |
35 | test('math.gl#isNumericArray', (t) => {
36 | for (const tc of TEST_CASES) {
37 | t.equal(
38 | Boolean(isNumericArray(tc.value)),
39 | tc.isNumericArray,
40 | `isNumericArray(${JSON.stringify(tc.value)}) => ${tc.isNumericArray}`
41 | );
42 | }
43 | t.end();
44 | });
45 |
--------------------------------------------------------------------------------
/test/bench/browser.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2015 - 2017 Uber Technologies, Inc.
2 | //
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy
4 | // of this software and associated documentation files (the "Software"), to deal
5 | // in the Software without restriction, including without limitation the rights
6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | // copies of the Software, and to permit persons to whom the Software is
8 | // furnished to do so, subject to the following conditions:
9 | //
10 | // The above copyright notice and this permission notice shall be included in
11 | // all copies or substantial portions of the Software.
12 | //
13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | // THE SOFTWARE.
20 |
21 | import {Bench} from '@probe.gl/bench';
22 | import addBenchmarks from './modules.bench';
23 |
24 | const addReferenceBenchmarks = false;
25 |
26 | const suite = new Bench();
27 |
28 | addBenchmarks(suite, addReferenceBenchmarks);
29 |
30 | suite
31 | // Calibrate performance
32 | .calibrate()
33 | .run()
34 | // when running in browser, notify test the driver that it's done
35 | .then(() => {
36 | // @ts-ignore TS2339: Property 'browserTestDriver_finish' does not exist
37 | if (typeof window !== 'undefined' && window.browserTestDriver_finish) {
38 | // @ts-ignore TS2339: Property 'browserTestDriver_finish' does not exist
39 | window.browserTestDriver_finish();
40 | }
41 | });
42 |
--------------------------------------------------------------------------------
/docs/modules/culling/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 |
3 | The `@math.gl/culling` module provides primitives for implementing frustum culling:
4 |
5 | - Bounding boxes and intersection logic
6 | - Fully "transformable" primitives (i.e. oriented bounding boxes as opposed to just axis-aligned bounding boxes).
7 |
8 | The culling module does not attempt to be a general "physics-based" collision detection library (e.g. it does not handle time-interpolated intersections like a physics library would).
9 |
10 | ## Classes
11 |
12 | | Class | Description |
13 | | --------------------- | ----------- |
14 | | `CullingVolume` | |
15 | | `BoundingSphere` | |
16 | | `OrientedBoundingBox` | |
17 | | `Plane` | |
18 |
19 | ## Example Usage
20 |
21 | - Create bounding volumes for your objects/geometries, and create `BoundingSphere` or `OrientedBoundingBox` instances.
22 | - Extract your camera view frustum parameters and create a `PerspectiveFrustum` instance.
23 | - You can now test your bounding volumes to see if the intersect the view frustum.
24 |
25 | ## Framework Independence
26 |
27 | Like all non-core math.gl modules, this library can be used without the math.gl core classes.
28 |
29 | - Any input vectors can be supplied as length 3 JavaScript `Array` instances.
30 | - Any result vectors can be treated as length 3 JavaScript `Array` instances (they may be math.gl `Vector3`).
31 | - The core math.gl classes inherit from JavaScript `Array` and can be used directly as input.
32 |
33 | ## History
34 |
35 | This library was initially developed as a fork of the Cesium math library as part of a collaboration between Cesium and Uber to provide framework-independent, portable support for the 3D tiles specification.
36 |
37 | ## Attribution
38 |
39 | This code in was initially forked from [Cesium](https://github.com/AnalyticalGraphicsInc/cesium) under the Apache 2 License.
40 |
--------------------------------------------------------------------------------
/website/src/components/example/styled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import {isMobile} from '../common';
3 |
4 | export const ExampleHeader = styled.div`
5 | font: bold 20px/28px var(--ifm-font-family-base);
6 | color: var(--ifm-color-gray-800);
7 | margin: 0 20px;
8 | border-bottom: 1px solid 20px;
9 | display: inline-block;
10 | padding: 20px 20px 4px 0;
11 | `;
12 |
13 | export const MainExamples = styled.main`
14 | padding: 16px 0;
15 | `;
16 |
17 | export const ExamplesGroup = styled.main`
18 | display: flex;
19 | flex-wrap: wrap;
20 | padding: 16px;
21 | `;
22 |
23 | export const ExampleCard = styled.a`
24 | cursor: pointer;
25 | text-decoration: none;
26 | width: 50%;
27 | max-width: 240px;
28 | line-height: 0;
29 | outline: none;
30 | padding: 4px;
31 | position: relative;
32 | img {
33 | transition-property: filter;
34 | transition-duration: var(--ifm-transition-slow);
35 | transition-timing-function: var(--ifm-transition-timing-default);
36 | }
37 | &:hover {
38 | box-shadow: var(--ifm-global-shadow-md);
39 | }
40 | &:hover img {
41 | filter: contrast(0.2);
42 | }
43 | ${isMobile} {
44 | width: 33%;
45 | min-width: 200px;
46 | }
47 | @media screen and (max-width: 632px) {
48 | width: 50%;
49 | }
50 | `;
51 |
52 | export const ExampleTitle = styled.div`
53 | position: absolute;
54 | display: flex;
55 | justify-content: center;
56 | flex-direction: column;
57 | color: var(--ifm-color-white);
58 | font-size: 1.5em;
59 | text-align: center;
60 | line-height: initial;
61 | width: 90%;
62 | height: 90%;
63 | top: 5%;
64 | left: 5%;
65 | border: solid 1px var(--ifm-color-white);
66 | opacity: 0;
67 | transition-property: opacity;
68 | transition-duration: var(--ifm-transition-slow);
69 | transition-timing-function: var(--ifm-transition-timing-default);
70 | &:hover {
71 | opacity: 1;
72 | }
73 | `;
74 |
--------------------------------------------------------------------------------
/modules/core/src/index.ts:
--------------------------------------------------------------------------------
1 | // luma.gl, MIT license
2 |
3 | // types
4 | export type {TypedArray, NumericArray} from '@math.gl/types';
5 |
6 | export type {isTypedArray, isNumericArray} from '@math.gl/types';
7 |
8 | // classes
9 | export {Vector2} from './classes/vector2';
10 | export {Vector3} from './classes/vector3';
11 | export {Vector4} from './classes/vector4';
12 | export {Matrix3} from './classes/matrix3';
13 | export {Matrix4} from './classes/matrix4';
14 | export {Quaternion} from './classes/quaternion';
15 |
16 | // experimental
17 | export {SphericalCoordinates} from './classes/spherical-coordinates';
18 | export {Pose} from './classes/pose';
19 | export {Euler} from './classes/euler';
20 |
21 | export * as _MathUtils from './lib/math-utils';
22 |
23 | // lib
24 | export {assert} from './lib/assert';
25 |
26 | export {
27 | // math.gl global utility methods
28 | config,
29 | configure,
30 | formatValue,
31 | isArray,
32 | clone,
33 | equals,
34 | exactEquals,
35 | toRadians,
36 | toDegrees,
37 | // math.gl "GLSL"-style functions
38 | radians,
39 | degrees,
40 | sin,
41 | cos,
42 | tan,
43 | asin,
44 | acos,
45 | atan,
46 | clamp,
47 | lerp,
48 | withEpsilon
49 | } from './lib/common';
50 |
51 | // DEPRECATED
52 | export {SphericalCoordinates as _SphericalCoordinates} from './classes/spherical-coordinates';
53 | export {Pose as _Pose} from './classes/pose';
54 | export {Euler as _Euler} from './classes/euler';
55 |
56 | /** @deprecated Use Matrix3 */
57 | export * as mat3 from './gl-matrix/mat3';
58 | /** @deprecated Use Matrix4 */
59 | export * as mat4 from './gl-matrix/mat4';
60 | /** @deprecated Use Quaterinion */
61 | export * as quat from './gl-matrix/quat';
62 | /** @deprecated UseVector */
63 | export * as vec2 from './gl-matrix/vec2';
64 | /** @deprecated Use Vector3 */
65 | export * as vec3 from './gl-matrix/vec3';
66 | /** @deprecated Use Vector4 */
67 | export * as vec4 from './gl-matrix/vec4';
68 |
--------------------------------------------------------------------------------
/website/src/utils/format-utils.js:
--------------------------------------------------------------------------------
1 | import {rgb} from 'd3-color';
2 |
3 | export const normalizeParam = p => {
4 | if (p.type === 'function') {
5 | let displayValue = String(p.value);
6 | if (Array.isArray(p.value)) {
7 | displayValue = `[${displayValue}]`;
8 | }
9 | if (typeof p.value === 'function') {
10 | // pretty print function code:
11 | // convert `function funcName(d) {...}` to `d => {...}`
12 | displayValue = displayValue.replace(/^function (\w+)?\((\w*?)\)/, '$2 =>');
13 | // convert `function funcName(d, i) {...}` to `(d, i) => {...}`
14 | displayValue = displayValue.replace(/^function (\w+)?(\(.*?\))/, '$2 =>');
15 | // convert `d => {return 1}` to `d => 1`
16 | displayValue = displayValue.replace(/\{\s*return\s*(.*?);?\s*\}$/, '$1');
17 | return {...p, displayValue};
18 | }
19 | if (p.altType) {
20 | p.type = p.altType;
21 | } else {
22 | return {...p, displayValue};
23 | }
24 | }
25 | if (p.type === 'json') {
26 | return {...p, displayValue: JSON.stringify(p.value)};
27 | }
28 | if (p.type === 'color') {
29 | const value = colorToRGBArray(p.value);
30 | return {...p, value, displayValue: rgbToHex(value)};
31 | }
32 | return {...p, displayValue: String(p.value)};
33 | };
34 |
35 | export const readableInteger = x => {
36 | if (!x) {
37 | return 0;
38 | }
39 | if (x < 1000) {
40 | return x.toString();
41 | }
42 | x /= 1000;
43 | if (x < 1000) {
44 | return `${x.toFixed(1)}K`;
45 | }
46 | x /= 1000;
47 | return `${x.toFixed(1)}M`;
48 | };
49 |
50 | export function rgbToHex(rgbArr) {
51 | return rgbArr.slice(0, 3).reduce((acc, v) => `${acc}${v < 16 ? '0' : ''}${v.toString(16)}`, '#');
52 | }
53 |
54 | export function colorToRGBArray(color) {
55 | if (!color) {
56 | return [255, 255, 255, 0];
57 | }
58 | if (Array.isArray(color)) {
59 | return color.slice(0, 4);
60 | }
61 | const c = rgb(color);
62 | return [c.r, c.g, c.b, 255];
63 | }
64 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/polygon.md:
--------------------------------------------------------------------------------
1 | # Polygon
2 |
3 | Allows an array of points (whether closed or non-closed) to be treated as a Polygon.
4 |
5 | Implements the [Shoelace formula](https://en.wikipedia.org/wiki/Shoelace_formula) for determining the area and winding direction of an arbitrary polygon.
6 |
7 | ## Usage
8 |
9 | ```js
10 | import {Polygon} from '@math.gl/polygon';
11 | ```
12 |
13 | ## Methods
14 |
15 | ### constructor
16 |
17 | Creates a new Polygon object.
18 |
19 | > The polygon object will reference the provided points, assuming them to not be modified for the lifetime of the Polygon object.
20 |
21 | ### getSignedArea
22 |
23 | Returns the area with a sign indicating the winding direction.
24 |
25 | `polygon.getSignedArea()`
26 |
27 | ### getArea
28 |
29 | `polygon.getArea()`
30 |
31 | Note:
32 |
33 | - A convenience method that returns `Math.abs(polygon.getSignedArea())`.
34 |
35 | ### getWindingDirection
36 |
37 | Returns the direction of the polygon path.
38 |
39 | `polygon.getWindingDirection()`
40 |
41 | - A positive number is clockwise.
42 | - A negative number is counter clockwise.
43 |
44 | Note:
45 |
46 | - A convenience method that returns `Math.sign(polygon.getSignedArea())`
47 |
48 | ### forEachSegment
49 |
50 | Lets the application iterate over each segment.
51 |
52 | `polygon.forEachSegment((p1, p2) => ...);`
53 |
54 | ### modifyWindingDirection
55 |
56 | Checks winding direction of the polygon and reverses the polygon in case if opposite winding direction. Note: points of the polygon are modified in-place.
57 |
58 | - A positive number is clockwise.
59 | - A negative number is counter clockwise.
60 |
61 | `polygon.modifyWindingDirection(direction);`
62 |
63 | Returns:
64 |
65 | Returns true if the winding direction was changed.
66 |
67 | ## Remarks
68 |
69 | - To avoid having to copy a non-closed path to be able to treat it as a polygon (by adding a copy of the first vertex to then end of the path),
70 | instead we define a `forEachSegment` iteration method that makes sure the last segment is iterated over.
71 |
--------------------------------------------------------------------------------
/modules/geoid/test/geoid.spec.ts:
--------------------------------------------------------------------------------
1 | import test from 'tape-promise/tape';
2 | import {Geoid} from '@math.gl/geoid';
3 | import {openFile} from './utils/file-utils';
4 |
5 | const PGM_FILE_PATH = 'modules/geoid/test/data/egm84-30.pgm';
6 |
7 | test('geoid - exports', (t) => {
8 | t.assert(Geoid, 'Geoid is defined');
9 | t.end();
10 | });
11 |
12 | test('geoid - get height model info', async (t) => {
13 | const data = await openFile(PGM_FILE_PATH);
14 |
15 | // If data is null - now ways to open the file
16 | if (data === null) {
17 | t.fail(`Can't open file: ${PGM_FILE_PATH}`);
18 | return;
19 | }
20 |
21 | const geoid = new Geoid({
22 | cubic: false,
23 | _width: 720,
24 | _height: 361,
25 | _rlonres: 2,
26 | _rlatres: 2,
27 | _offset: -108,
28 | _scale: 0.003,
29 | _swidth: 720,
30 | _datastart: 416,
31 | _maxerror: 1.546,
32 | _rmserror: 0.07,
33 | _description: 'WGS84 EGM84, 30-minute grid',
34 | _datetime: '2009-08-29 18:45:02',
35 | data
36 | });
37 |
38 | const center = [8.67694237417622, 50.109450651843204, 172.017822265625];
39 | t.equal(geoid.getHeight(center[1], center[0]), 48.093804428091886);
40 | t.end();
41 | });
42 |
43 | test('geoid - cubic approximation', async (t) => {
44 | const data = await openFile(PGM_FILE_PATH);
45 |
46 | // If data is null - now ways to open the file
47 | if (data === null) {
48 | t.fail(`Can't open file: ${PGM_FILE_PATH}`);
49 | return;
50 | }
51 |
52 | const geoid = new Geoid({
53 | cubic: true,
54 | _width: 720,
55 | _height: 361,
56 | _rlonres: 2,
57 | _rlatres: 2,
58 | _offset: -108,
59 | _scale: 0.003,
60 | _swidth: 720,
61 | _datastart: 416,
62 | _maxerror: 1.546,
63 | _rmserror: 0.07,
64 | _description: 'WGS84 EGM84, 30-minute grid',
65 | _datetime: '2009-08-29 18:45:02',
66 | data
67 | });
68 |
69 | const center = [8.67694237417622, 50.109450651843204, 172.017822265625];
70 | t.equal(geoid.getHeight(center[1], center[0]), 48.09178497292629);
71 | t.end();
72 | });
73 |
--------------------------------------------------------------------------------
/modules/core/test/bench.ts:
--------------------------------------------------------------------------------
1 | // Copyright (c) 2015 - 2017 Uber Technologies, Inc.
2 | //
3 | // Permission is hereby granted, free of charge, to any person obtaining a copy
4 | // of this software and associated documentation files (the "Software"), to deal
5 | // in the Software without restriction, including without limitation the rights
6 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | // copies of the Software, and to permit persons to whom the Software is
8 | // furnished to do so, subject to the following conditions:
9 | //
10 | // The above copyright notice and this permission notice shall be included in
11 | // all copies or substantial portions of the Software.
12 | //
13 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | // THE SOFTWARE.
20 |
21 | import javascriptBench from './lib/javascript.bench';
22 | import commonBench from './lib/common.bench';
23 |
24 | // import classesBench from './classes/classes.bench';
25 | import vector2Bench from './classes/vector2.bench';
26 | import vector3Bench from './classes/vector3.bench';
27 | import vector4Bench from './classes/vector4.bench';
28 | import matrix4Bench from './classes/matrix4.bench';
29 |
30 | export function coreBench(suite, addReferenceBenchmarks) {
31 | // classesBench(suite, addReferenceBenchmarks);
32 | commonBench(suite, addReferenceBenchmarks);
33 | javascriptBench(suite, addReferenceBenchmarks);
34 |
35 | matrix4Bench(suite, addReferenceBenchmarks);
36 |
37 | vector2Bench(suite, addReferenceBenchmarks);
38 | vector3Bench(suite, addReferenceBenchmarks);
39 | vector4Bench(suite, addReferenceBenchmarks);
40 |
41 | return suite;
42 | }
43 |
--------------------------------------------------------------------------------
/modules/core/test/threejs-tests/constants.ts:
--------------------------------------------------------------------------------
1 | // The MIT License
2 | //
3 | // Copyright © 2010-2018 three.js authors
4 | //
5 | // Permission is hereby granted, free of charge, to any person obtaining a copy
6 | // of this software and associated documentation files (the "Software"), to deal
7 | // in the Software without restriction, including without limitation the rights
8 | // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | // copies of the Software, and to permit persons to whom the Software is
10 | // furnished to do so, subject to the following conditions:
11 |
12 | // The above copyright notice and this permission notice shall be included in
13 | // all copies or substantial portions of the Software.
14 |
15 | // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | // THE SOFTWARE.
22 |
23 | // @author bhouston / http://exocortex.com
24 |
25 | import {Vector2, Vector3} from '@math.gl/core';
26 |
27 | export const x = 2;
28 | export const y = 3;
29 | export const z = 4;
30 | export const w = 5;
31 |
32 | export const negInf2 = new Vector2(Number.MIN_VALUE, Number.MIN_VALUE);
33 | export const posInf2 = new Vector2(Number.MAX_VALUE, Number.MAX_VALUE);
34 |
35 | export const zero2 = new Vector2();
36 | export const one2 = new Vector2(1, 1);
37 | export const two2 = new Vector2(2, 2);
38 |
39 | export const negInf3 = new Vector3(Number.MIN_VALUE, Number.MIN_VALUE, Number.MIN_VALUE);
40 | export const posInf3 = new Vector3(Number.MAX_VALUE, Number.MAX_VALUE, Number.MAX_VALUE);
41 |
42 | export const zero3 = new Vector3();
43 | export const one3 = new Vector3(1, 1, 1);
44 | export const two3 = new Vector3(2, 2, 2);
45 |
46 | export const eps = 0.0001;
47 |
--------------------------------------------------------------------------------
/docs/modules/polygon/api-reference/cut-polygon-by-grid.md:
--------------------------------------------------------------------------------
1 | # cutPolygonByGrid
2 |
3 |
4 |
5 |
6 |
7 | Subdivides a polygon by intersecting with a uniform grid.
8 |
9 | ```js
10 | import {cutPolygonByGrid} from '@math.gl/polygon';
11 |
12 | cutPolygonByGrid([0, 15, 15, 0, 0, -15, 0, 15], {size: 2, gridResolution: 20});
13 | // returns [
14 | // [15, 0, 0, -15, 0, 0, 15, 0],
15 | // [15, 0, 0, 0, 0, 15, 15, 0]
16 | // ]
17 | ]
18 | ```
19 |
20 | ## Usage
21 |
22 | ```js
23 | cutPolygonByGrid(positions, holeIndices, [options]);
24 | ```
25 |
26 | Arguments:
27 |
28 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polygon's rings.
29 | - `holeIndices` (Array|TypedArray|null) - the indices in `positions` where each hole starts. If `null`, the polygon has no holes.
30 | - `options` (Object, optional)
31 | - `size` (Number) - the number of elements in each vertex. Size `2` will interpret `positions` as `[x0, y0, x1, y1, ...]` and size `3` will interpret `positions` as `[x0, y0, z0, x1, y1, z1, ...]`. Default `2`.
32 | - `gridResolution` (Number, optional) - the grid size. Default `10`.
33 | - `gridOffset` (Array, optional) - the grid offset in `[x, y]`. Default `[0, 0]` i.e. the grid starts from the coordinate origin.
34 | - `edgeTypes` (Boolean) - if `true`, returns an additional array for each polygon that describes the nature of each vertex. See "returns" below.
35 |
36 | Returns:
37 |
38 | An array of polygons. Each polygons is represented by an object with the following fields:
39 |
40 | - `positions` (Array|TypedArray) - a flat array of the vertex positions that define the polygon's rings.
41 | - `holeIndices` (Array|TypedArray) - the indices in `positions` where each hole starts. Not present if the polygon has no holes.
42 | - `edgeTypes` (Array) - describes the nature of each vertex in `positions`:
43 |
44 | - `0` - the segment connecting this vertex to the next is inside the original polygon
45 | - `1` - the segment connecting this vertex to the next is on the border of the original polygon
46 |
--------------------------------------------------------------------------------
/docs/modules/core/api-reference/math-array.md:
--------------------------------------------------------------------------------
1 | # MathArray
2 |
3 | ```js
4 | class MathArray extends Array
5 | ```
6 |
7 | ## Usage
8 |
9 | `MathArray` is a base class, and should not be instantiated directly.
10 |
11 | Cloning an object
12 |
13 | ```js
14 | const clone = vector.clone();
15 | ```
16 |
17 | Scaling with constants
18 |
19 | ```js
20 | const u = v.scale(-1); // Reverse direction vector
21 | ```
22 |
23 | Scaling with vectors is very flexible, you can e.g. set a component to zero, or flip a component's sign.
24 |
25 | ```js
26 | const u = v.scale([1, 1, 0]); // Set z component to zero
27 | const w = v.scale([1, -1, 1]); // Flip y component
28 | ```
29 |
30 | ## Methods
31 |
32 | ### clone
33 |
34 | `array.clone()`
35 |
36 | ### copy
37 |
38 | `array.copy(array)`
39 |
40 | ### set
41 |
42 | `array.set(...args)`
43 |
44 | ### fromArray
45 |
46 | `array.fromArray(array, offset = 0)`
47 |
48 | ### toString
49 |
50 | Calls `formatString` with the global math.gl config.
51 |
52 | `array.toString()`
53 |
54 | ### formatString
55 |
56 | `array.formatString(config)`
57 |
58 | ### toArray
59 |
60 | `array.toArray(array = [], offset = 0)`
61 |
62 | ### toFloat32Array
63 |
64 | `array.toFloat32Array()`
65 |
66 | ### equals
67 |
68 | `array.equals(array)`
69 |
70 | ### exactEquals
71 |
72 | `array.exactEquals(array)`
73 |
74 | ### length
75 |
76 | `array.length()`
77 |
78 | ### lengthSquared
79 |
80 | `array.lengthSquared()`
81 |
82 | ### distance
83 |
84 | `array.distance(mathArray)`
85 |
86 | ### distanceSquared
87 |
88 | `array.distanceSquared(mathArray)`
89 |
90 | ### normalize
91 |
92 | `array.normalize()`
93 |
94 | ### validate
95 |
96 | Checks if a `MathArray` contains valid values.
97 |
98 | `array.validate(array = this)`
99 |
100 | Returns `false` if any value fails `Number.isFinite` test.
101 |
102 | ### check
103 |
104 | If `config.debug` is true, validates the `MathArray` and throws an error if it does not contains valid values.
105 |
106 | `array.check(array = this)`
107 |
108 | Mote: This method is called by all mutating methods.
109 |
--------------------------------------------------------------------------------
/modules/core/src/lib/gl-matrix-extras.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable camelcase */
2 | import {NumericArray} from '@math.gl/types';
3 | // vec2 additions
4 |
5 | export function vec2_transformMat4AsVector(
6 | out: T,
7 | a: Readonly,
8 | m: Readonly
9 | ): T {
10 | const x = a[0];
11 | const y = a[1];
12 | const w = m[3] * x + m[7] * y || 1.0;
13 | out[0] = (m[0] * x + m[4] * y) / w;
14 | out[1] = (m[1] * x + m[5] * y) / w;
15 | return out;
16 | }
17 |
18 | // vec3 additions
19 |
20 | // Transform as vector, only uses 3x3 minor matrix
21 | export function vec3_transformMat4AsVector(
22 | out: T,
23 | a: Readonly,
24 | m: Readonly
25 | ): T {
26 | const x = a[0];
27 | const y = a[1];
28 | const z = a[2];
29 | const w = m[3] * x + m[7] * y + m[11] * z || 1.0;
30 | out[0] = (m[0] * x + m[4] * y + m[8] * z) / w;
31 | out[1] = (m[1] * x + m[5] * y + m[9] * z) / w;
32 | out[2] = (m[2] * x + m[6] * y + m[10] * z) / w;
33 | return out;
34 | }
35 |
36 | export function vec3_transformMat2(
37 | out: T,
38 | a: Readonly,
39 | m: Readonly
40 | ): T {
41 | const x = a[0];
42 | const y = a[1];
43 | out[0] = m[0] * x + m[2] * y;
44 | out[1] = m[1] * x + m[3] * y;
45 | out[2] = a[2];
46 | return out;
47 | }
48 |
49 | // vec4 additions
50 |
51 | export function vec4_transformMat2(
52 | out: T,
53 | a: Readonly,
54 | m: Readonly
55 | ): T {
56 | const x = a[0];
57 | const y = a[1];
58 | out[0] = m[0] * x + m[2] * y;
59 | out[1] = m[1] * x + m[3] * y;
60 | out[2] = a[2];
61 | out[3] = a[3];
62 | return out;
63 | }
64 |
65 | export function vec4_transformMat3(
66 | out: T,
67 | a: Readonly,
68 | m: Readonly
69 | ): T {
70 | const x = a[0];
71 | const y = a[1];
72 | const z = a[2];
73 | out[0] = m[0] * x + m[3] * y + m[6] * z;
74 | out[1] = m[1] * x + m[4] * y + m[7] * z;
75 | out[2] = m[2] * x + m[5] * y + m[8] * z;
76 | out[3] = a[3];
77 | return out;
78 | }
79 |
--------------------------------------------------------------------------------
/modules/dggs-s2/src/s2-token-functions.ts:
--------------------------------------------------------------------------------
1 | // loaders.gl, MIT license
2 |
3 | // s2-geometry is a pure JavaScript port of Google/Niantic's S2 Geometry library
4 | // which is perfect since it works in the browser.
5 |
6 | import Long from 'long';
7 |
8 | // const MAXIMUM_TOKEN_LENGTH = 16;
9 |
10 | // INDEX CALCULATIONS
11 |
12 | /**
13 | * Given an S2 token (String) this function convert the token to 64 bit id (Index)
14 | * 'X' is the empty cell
15 | * https://github.com/google/s2-geometry-library-java/blob/c04b68bf3197a9c34082327eeb3aec7ab7c85da1/src/com/google/common/geometry/S2CellId.java#L439
16 | */
17 | export function getS2IndexFromToken(token: string): Long {
18 | if (token === 'X') {
19 | token = '';
20 | }
21 | // pad token with zeros to make the length 16
22 | const paddedToken = token.padEnd(16, '0');
23 | return Long.fromString(paddedToken, true, 16);
24 | }
25 |
26 | /**
27 | * Convert a 64 bit number to a string token
28 | * 'X' is the empty cell
29 | */
30 | export function getS2TokenFromIndex(cellId: Long): string {
31 | if (cellId.isZero()) {
32 | return 'X';
33 | }
34 | let numZeroDigits = cellId.countTrailingZeros();
35 |
36 | const remainder = numZeroDigits % 4;
37 | numZeroDigits = (numZeroDigits - remainder) / 4;
38 | const trailingZeroHexChars = numZeroDigits;
39 | numZeroDigits *= 4;
40 |
41 | const x = cellId.shiftRightUnsigned(numZeroDigits);
42 | const hexString = x.toString(16).replace(/0+$/, '');
43 | const zeroString = Array(17 - trailingZeroHexChars - hexString.length).join('0');
44 | return zeroString + hexString;
45 | }
46 |
47 | export function getS2ChildIndex(s2Index: Long, index: number): Long {
48 | // Shift sentinel bit 2 positions to the right.
49 | const newLsb = lsb(s2Index).shiftRightUnsigned(2);
50 | // Insert child index before the sentinel bit.
51 | const childCellId: Long = s2Index.add(Long.fromNumber(2 * index + 1 - 4).multiply(newLsb));
52 | return childCellId;
53 | }
54 |
55 | /**
56 | * Return the lowest-numbered bit that is on for this cell id
57 | * @private
58 | */
59 | function lsb(cellId: Long): Long {
60 | return cellId.and(cellId.not().add(1)); // eslint-disable-line
61 | }
62 |
--------------------------------------------------------------------------------
/website/src/components/home/styled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import {isMobile} from '../common';
3 |
4 | export const Banner = styled.section`
5 | position: relative;
6 | height: 30rem;
7 | background: var(--ifm-color-gray-400);
8 | color: var(--ifm-color-gray-900);
9 | z-index: 0;
10 | ${isMobile} {
11 | height: 80vh;
12 | }
13 | `;
14 |
15 | export const Container = styled.div`
16 | position: relative;
17 | padding: 2rem;
18 | max-width: 80rem;
19 | width: 100%;
20 | height: 100%;
21 | margin: 0;
22 | `;
23 |
24 | export const BannerContainer = styled(Container)`
25 | position: absolute;
26 | bottom: 0;
27 | height: auto;
28 | padding-left: 4rem;
29 | z-index: 0;
30 | pointer-events: none;
31 | `;
32 |
33 | export const HeroExampleContainer = styled.div`
34 | position: absolute;
35 | top: 0;
36 | left: 0;
37 | right: 0;
38 | bottom: 0;
39 | z-index: -1;
40 | `;
41 |
42 | export const Section = styled.section`
43 | &:nth-child(2n + 1) {
44 | background: var(--ifm-color-gray-300);
45 | }
46 | `;
47 |
48 | export const ProjectName = styled.h1`
49 | font-size: 5em;
50 | line-height: 1;
51 | text-transform: uppercase;
52 | letter-spacing: 4px;
53 | font-weight: 700;
54 | margin: 0;
55 | margin-bottom: 16px;
56 | `;
57 |
58 | export const GetStartedLink = styled.a`
59 | pointer-events: all;
60 | font-size: 12px;
61 | line-height: 44px;
62 | letter-spacing: 2px;
63 | font-weight: bold;
64 | margin: 24px 0;
65 | padding: 0 4rem;
66 | pointer-events: all;
67 | display: inline-block;
68 | text-decoration: none;
69 | transition: background-color 250ms ease-in, color 250ms ease-in;
70 | border: solid 2px var(--ifm-color-primary);
71 | color: var(--ifm-color-gray-900);
72 | border-image: linear-gradient(
73 | to right,
74 | var(--ifm-color-gray-700) 0%,
75 | var(--ifm-color-gray-400) 100%
76 | );
77 | border-image-slice: 2;
78 | &:visited {
79 | color: var(--ifm-color-gray-900);
80 | }
81 | &:active {
82 | color: var(--ifm-color-white);
83 | }
84 | &:hover {
85 | color: var(--ifm-color-white);
86 | background-color: var(--ifm-color-primary);
87 | }
88 | `;
89 |
--------------------------------------------------------------------------------
/docs/modules/core/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 |
3 | Basic 3D math classes (vectors, matrices, quaternions etc) for JavaScript.
4 |
5 | ## Installation
6 |
7 | ```bash
8 | npm install @math.gl/core
9 | ```
10 |
11 | ## Classes
12 |
13 | | Class | Description |
14 | | ---------------------- | ----------------------------------------------------- |
15 | | `Vector2` | Two element vector, inherits from `Array` |
16 | | `Vector3` | Three element vector, inherits from `Array` |
17 | | `Vector4` | Four element vector, inherits from `Array` |
18 | | `Matrix3` | 3x3 matrix, inherits from `Array` |
19 | | `Matrix4` | 4x4 matrix, inherits from `Array` |
20 | | `Quaternion` | Quaternion in `[x,y,z,w]` form, inherits from `Array` |
21 | | `Euler` | 3 Euler angles and rotation order |
22 | | `SphericalCoordinates` | 2 rotations and a radius |
23 |
24 | ## Usage
25 |
26 | ```js
27 | import {Vector2} from '@math.gl/core';
28 | const vector = new Vector2(1, 2);
29 | const x = vector[0];
30 | const y = vector[1];
31 | ```
32 |
33 | ## Design Goals
34 |
35 | Some of the design goals for the math.gl core library
36 |
37 | - **Performance** - The core math.gl classes are built on top of `gl-matrix`. `gl-matrix` has a reputation for being the most performant and battle-tested JavaScript math library around.
38 |
39 | - **Array-Based** - math.gl classes (like `Vector3`, `Matrix4`) are subclasses of the built-in JavaScript `Array` which enables applications to use them interchangeably with plain (or typed) arrays.
40 |
41 | - **Debug Friendly** - math.gl offers **optional** error checking after every math operation which makes quick work of locating coding errors and bad input data. Printing support for objects (`toString`) also simplifies debugging.
42 |
43 | - **Size Conscious** - math.gl is published as multiple modules to let applications cherry-pick required functionality, and is optimizes dependencies for tree-shaking to make sure you only pay for (bundle) what you use.
44 |
--------------------------------------------------------------------------------
5 | 