@openglobus/og 0.13.7 → 0.13.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openglobus/og",
-  "version": "0.13.7",
-  "description": "[OpenGlobus](http://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
+  "version": "0.13.10",
+  "description": "[OpenGlobus](https://www.openglobus.org/) is a javascript library designed to display interactive 3d maps and planets with map tiles, imagery and vector data, markers and 3d objects. It uses the WebGL technology, open source and completely free.",
   "directories": {
     "example": "./sandbox"
   },
@@ -9,16 +9,17 @@
   "style": "./css/og.css",
   "types": "./types/index.d.ts",
   "scripts": {
-    "api": "jsdoc -t ./jsdoc -r ./src/ -c ./jsdoc/conf.json -d ./api",
+    "api": "jsdoc -r ./src/ -c ./jsdoc.conf.json -d ./api",
     "serve": "ws",
     "build": "rollup -c",
     "webgl": "rollup -c --environment entry:webgl",
     "core": "rollup -c --environment entry:core",
-    "test": "jest --env=jsdom",
+    "test": "jest --env=jsdom --runInBand --ci --coverage=false",
     "test_watch": "jest --env=jsdom --watch",
     "lint": "eslint -c ./.eslintrc.js src/og",
     "generate_types": "rm -rf types; tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types",
-    "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/"
+    "compile_js_as_ts": "tsc src/og/index.js --AllowJs --checkJs --outDir dist/@openglobus/src/",
+    "font": "node ./fonts/index.js"
   },
   "repository": {
     "type": "git",
@@ -30,7 +31,7 @@
     "url": "https://github.com/openglobus/openglobus/issues",
     "email": "mgevlich@gmail.com"
   },
-  "homepage": "http://www.openglobus.org",
+  "homepage": "https://www.openglobus.org",
   "exports": {
     ".": "./src/og/index.js",
     "./layer": "./src/og/layer/index.js",
@@ -43,24 +44,24 @@
     "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-env": "^7.18.9",
     "@rollup/plugin-json": "^4.1.0",
-    "@types/jest": "^27.4.0",
-    "eslint": "^8.7.0",
+    "@types/jest": "^28.1.6",
+    "eslint": "^8.20.0",
     "jaguarjs-jsdoc": "^1.1.0",
-    "jest": "^27.4.7",
-    "jest-canvas-mock": "^2.3.1",
+    "jest": "^28.1.3",
+    "jest-canvas-mock": "^2.4.0",
+    "jest-environment-jsdom": "^28.1.3",
     "jest-webgl-canvas-mock": "^0.2.3",
-    "jsdoc": "^3.6.10",
-    "lint-staged": "^12.3.1",
-    "local-web-server": "^5.1.1",
-    "msdf-bmfont-xml": "^2.5.4",
-    "postcss": "^8.4.5",
-    "prettier": "^2.5.1",
-    "rollup": "^2.66.1",
+    "jsdoc": "^3.6.11",
+    "lint-staged": "^13.0.3",
+    "local-web-server": "^5.2.1",
+    "postcss": "^8.4.14",
+    "prettier": "^2.7.1",
+    "rollup": "^2.77.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.5.5"
+    "typescript": "^4.7.4"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Globe.js

@@ -69,7 +69,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {Number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen bacame the same zoom level
  * @param {Number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen bacame the same zoom level
  * @param {Number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen bacame the same zoom level
- * @param {Number} [options.loadingBatchSize=12] - 
+ * @param {Number} [options.loadingBatchSize=12] -
  */
 
 class Globe {
@@ -103,15 +103,6 @@ class Globe {
         this.div.appendChild(this._canvas);
         this.div.classList.add("ogViewport");
 
-        document.addEventListener("visibilitychange", () => {
-            if (document.visibilityState === 'visible') {
-                this.renderer.handler.start();
-                this.renderer && this.renderer.resize();
-            } else {
-                this.renderer.handler.stop();
-            }
-        });
-
         function _disableWheel(e) {
             e.preventDefault();
         }
@@ -137,12 +128,13 @@ class Globe {
                 context: {
                     alpha: false,
                     antialias: false,
-                    powerPreference: "high-performance"
+                    powerPreference: "high-performance",
+                    premultipliedAlpha: true
                 }
             }), {
-            autoActivate: false,
-            backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255))
-        }
+                autoActivate: false,
+                backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255))
+            }
         );
         this.renderer.initialize();
         this.renderer.div = this.div;
@@ -190,9 +182,16 @@ class Globe {
             });
         }
 
-        // Attach terrain provider
+        // Attach terrain provider (can be one object or array)
         if (options.terrain) {
-            this.planet.setTerrain(options.terrain);
+            if (Array.isArray(options.terrain)) {
+                this.planet.setTerrain(options.terrain[0]); // If array get the terrain from 1st element
+                this.planet._terrainPool = options.terrain;
+            } else {
+                this.planet.setTerrain(options.terrain);
+                this.planet._terrainPool = [options.terrain];
+            }
+
         } else {
             this.planet.setTerrain(new EmptyTerrain());
         }

package/src/og/Object3d.js

@@ -0,0 +1,417 @@
+/* eslint-disable no-param-reassign */
+'use strict';
+
+import { htmlColorToFloat32Array } from './utils/shared.js';
+import { Vec3 } from './math/Vec3.js';
+
+function getColor(color) {
+    if (color instanceof Array) {
+        return color;
+    } else if (typeof color === 'string') {
+        return htmlColorToFloat32Array(color);
+    }
+    return [1.0, 1.0, 1.0, 1.0];
+}
+
+class Object3d {
+    constructor(data) {
+
+        this._name = data.name || "noname";
+        this._vertices = data.vertices || [];
+        this._texCoords = [];
+
+        this.color = getColor(data.color);
+
+        if (data.scale) {
+            Object3d.scale(this._vertices, data.scale);
+        }
+
+        if (data.indexes) {
+            this._indexes = data.indexes || [];
+            this._normals = data.normals || [];
+        } else {
+            this._normals = Object3d.getNormals(this._vertices);
+            this._indexes = new Array(this._vertices.length);
+            for (let i = 0, len = this._indexes.length; i < len; i++) {
+                this._indexes[i] = i;
+            }
+        }
+    }
+
+    get name() {
+        return this._name;
+    }
+
+    get vertices() {
+        return this._vertices;
+    }
+
+    get normals() {
+        return this._normals;
+    }
+
+    get indexes() {
+        return this._indexes;
+    }
+
+    static scale(vertices, s) {
+        for (let i = 0; i < vertices.length; i++) {
+            vertices[i] *= s;
+        }
+    }
+
+    static centroid(vertices) {
+        let minX = 1000.0, minY = 1000.0, minZ = 1000.0,
+            maxX = -1000.0, maxY = -1000.0, maxZ = -1000.0;
+
+        for (let i = 0; i < vertices.length; i += 3) {
+            let x = vertices[i],
+                y = vertices[i + 1],
+                z = vertices[i + 2];
+            if (x < minX) minX = x;
+            if (y < minY) minY = y;
+            if (z < minZ) minZ = z;
+            if (x > maxX) maxX = x;
+            if (y > maxY) maxY = y;
+            if (z > maxZ) maxZ = z;
+        }
+
+        return [
+            minX + (maxX - minX) * 0.5,
+            minY + (maxY - minY) * 0.5,
+            minZ + (maxZ - minZ) * 0.5
+        ];
+    }
+
+    static translate(vertices, v) {
+        for (let i = 0; i < vertices.length; i += 3) {
+            vertices[i] -= v[0];
+            vertices[i + 1] -= v[1];
+            vertices[i + 2] -= v[2];
+        }
+    }
+
+    static getNormals(vertices) {
+        let res = new Array(vertices.length);
+
+        for (var i = 0; i < vertices.length; i += 9) {
+
+            let t03 = i,
+                t13 = i + 3,
+                t23 = i + 6,
+                v0_x = vertices[t03],
+                v0_y = vertices[t03 + 1],
+                v0_z = vertices[t03 + 2],
+                v1_x = vertices[t13],
+                v1_y = vertices[t13 + 1],
+                v1_z = vertices[t13 + 2],
+                v2_x = vertices[t23],
+                v2_y = vertices[t23 + 1],
+                v2_z = vertices[t23 + 2],
+                vv0_x = v1_x - v0_x,
+                vv0_y = v1_y - v0_y,
+                vv0_z = v1_z - v0_z,
+                vv1_x = v2_x - v0_x,
+                vv1_y = v2_y - v0_y,
+                vv1_z = v2_z - v0_z,
+                n_x = vv0_y * vv1_z - vv0_z * vv1_y,
+                n_y = vv0_z * vv1_x - vv0_x * vv1_z,
+                n_z = vv0_x * vv1_y - vv0_y * vv1_x;
+
+            let l = Math.sqrt(n_x * n_x + n_y * n_y + n_z * n_z);
+
+            n_x /= l;
+            n_y /= l;
+            n_z /= l;
+
+            res[t03] = n_x;
+            res[t03 + 1] = n_y;
+            res[t03 + 2] = n_z;
+
+            res[t13] = n_x;
+            res[t13 + 1] = n_y;
+            res[t13 + 2] = n_z;
+
+            res[t23] = n_x;
+            res[t23 + 1] = n_y;
+            res[t23 + 2] = n_z;
+        }
+
+        return res;
+    }
+
+    static createSphere(lonBands = 16, latBands = 16, radius = 1.0, offsetX = 0, offsetY = 0, offsetZ = 0) {
+
+        let vertices = [],
+            indexes = [],
+            normals = [];
+
+        for (let latNumber = 0; latNumber <= latBands; latNumber++) {
+            var theta = latNumber * Math.PI / latBands;
+            var sinTheta = Math.sin(theta);
+            var cosTheta = Math.cos(theta);
+
+            for (let longNumber = 0; longNumber <= lonBands; longNumber++) {
+                var phi = longNumber * 2 * Math.PI / lonBands;
+                var sinPhi = Math.sin(phi);
+                var cosPhi = Math.cos(phi);
+                var x = cosPhi * sinTheta + offsetX;
+                var y = cosTheta + offsetY;
+                var z = sinPhi * sinTheta + offsetZ;
+                //var u = 1 - (longNumber / lonBands);
+                //var v = latNumber / latBands;
+                normals.push(x);
+                normals.push(y);
+                normals.push(z);
+                //texCoords.push(u);
+                //texCoords.push(v);
+                vertices.push(radius * x);
+                vertices.push(radius * y);
+                vertices.push(radius * z);
+            }
+        }
+
+        for (let latNumber = 0; latNumber < latBands; latNumber++) {
+            for (let longNumber = 0; longNumber < lonBands; longNumber++) {
+                var first = (latNumber * (lonBands + 1)) + longNumber;
+                var second = first + lonBands + 1;
+
+                indexes.push(first);
+                indexes.push(first + 1);
+                indexes.push(second);
+
+                indexes.push(second);
+                indexes.push(first + 1);
+                indexes.push(second + 1);
+            }
+        }
+
+        return new Object3d({
+            'vertices': vertices,
+            'normals': normals,
+            'indexes': indexes
+        });
+    }
+
+    static createDisc(radius = 1.0, height = 0.0, radialSegments = 8, isTop = true, startIndex = 0, offsetX = 0, offsetY, offsetZ = 0) {
+
+        let vertices = [],
+            indexes = [],
+            normals = [];
+
+        let thetaStart = 0.0,
+            thetaLength = Math.PI * 2;
+
+        let sign = (isTop === true) ? 1.0 : -1.0;
+
+        let centerIndexStart = startIndex;
+
+        for (let x = 1; x <= radialSegments; x++) {
+            vertices.push(0 + offsetX, height * sign + offsetY, 0 + offsetZ);
+            normals.push(0, sign, 0);
+            //texCoords.push(0.5, 0.5);
+            startIndex++;
+        }
+
+        let centerIndexEnd = startIndex;
+
+        for (let x = 0; x <= radialSegments; x++) {
+
+            let u = x / radialSegments;
+            let theta = u * thetaLength + thetaStart;
+
+            let cosTheta = Math.cos(theta);
+            let sinTheta = Math.sin(theta);
+
+            vertices.push(radius * sinTheta + offsetX, height * sign + offsetY, radius * cosTheta + offsetZ);
+            normals.push(0, sign, 0);
+            //texCoords.push((cosTheta * 0.5) + 0.5, (sinTheta * 0.5 * sign) + 0.5);
+
+            startIndex++;
+        }
+
+        for (let x = 0; x < radialSegments; x++) {
+            let c = centerIndexStart + x,
+                i = centerIndexEnd + x;
+            if (isTop === true) {
+                indexes.push(i, i + 1, c);
+            } else {
+                indexes.push(i + 1, i, c);
+            }
+        }
+
+        return new Object3d({
+            'vertices': vertices,
+            'normals': normals,
+            'indexes': indexes
+        });
+    }
+
+    static createCylinder(radiusTop = 1.0, radiusBottom = 1.0, height = 1.0, radialSegments = 32, heightSegments = 1.0, isTop = true, isBottom = true, offsetX = 0, offsetY = 0, offsetZ = 0) {
+
+        let vertices = [],
+            indexes = [],
+            normals = [];
+
+        let thetaStart = 0.0,
+            thetaLength = Math.PI * 2;
+
+        let index = 0;
+        let indexArray = [];
+
+        let normal = new Vec3();
+
+        var slope = (radiusBottom - radiusTop) / height;
+
+        for (let y = 0; y <= heightSegments; y++) {
+
+            let indexRow = [];
+
+            let v = y / heightSegments;
+
+            let radius = v * (radiusBottom - radiusTop) + radiusTop;
+
+            for (let x = 0; x <= radialSegments; x++) {
+
+                let u = x / radialSegments;
+
+                let theta = u * thetaLength + thetaStart;
+
+                let sinTheta = Math.sin(theta),
+                    cosTheta = Math.cos(theta);
+
+                vertices.push(radius * sinTheta + offsetX, -v * height + height + offsetY, radius * cosTheta + offsetZ);
+
+                normal.set(sinTheta, slope, cosTheta).normalize();
+                normals.push(normal.x, normal.y, normal.z);
+
+                //texCoords.push(u, 1 - v);
+
+                indexRow.push(index++);
+            }
+            indexArray.push(indexRow);
+        }
+
+        for (let x = 0; x < radialSegments; x++) {
+            for (let y = 0; y < heightSegments; y++) {
+
+                let a = indexArray[y][x],
+                    b = indexArray[y + 1][x],
+                    c = indexArray[y + 1][x + 1],
+                    d = indexArray[y][x + 1];
+
+                indexes.push(a, b, d);
+                indexes.push(b, c, d);
+            }
+        }
+
+        if (radiusTop !== 0.0 && isTop) {
+            let cap = Object3d.createDisc(radiusTop, height, radialSegments, true, index, offsetX, offsetY, offsetZ);
+            vertices.push(...cap.vertices);
+            normals.push(...cap.normals);
+            indexes.push(...cap.indexes);
+        }
+
+        if (radiusBottom !== 0.0 && isBottom) {
+            let cap = Object3d.createDisc(radiusBottom, 0, radialSegments, false, index + (isTop ? (1 + 2 * radialSegments) : 0), offsetX, offsetY, offsetZ);
+            vertices.push(...cap.vertices);
+            normals.push(...cap.normals);
+            indexes.push(...cap.indexes);
+        }
+
+        return new Object3d({
+            'vertices': vertices,
+            'normals': normals,
+            'indexes': indexes
+        });
+    }
+
+    static createCube(length = 1, height = 1, depth = 1, xOffset = 0, yOffset = 0, zOffset = 0) {
+        let l = length * 0.5 + xOffset,
+            h = height * 0.5 + yOffset,
+            d = depth * 0.5 + zOffset;
+
+        return new Object3d({
+            vertices: [
+                //bottom
+                -l, -h, d,
+                l, -h, -d,
+                l, -h, d,
+                -l, -h, d,
+                -l, -h, -d,
+                l, -h, -d,
+
+                //top
+                -l, h, d,
+                l, h, d,
+                l, h, -d,
+                -l, h, d,
+                l, h, -d,
+                -l, h, -d,
+
+                //front
+                -l, -h, d,
+                l, -h, d,
+                -l, h, d,
+                -l, h, d,
+                l, -h, d,
+                l, h, d,
+
+                //back
+                -l, -h, -d,
+                -l, h, -d,
+                l, -h, -d,
+                -l, h, -d,
+                l, h, -d,
+                l, -h, -d,
+
+                //left
+                l, -h, d,
+                l, -h, -d,
+                l, h, d,
+                l, h, d,
+                l, -h, -d,
+                l, h, -d,
+
+                //right
+                -l, -h, d,
+                -l, h, d,
+                -l, -h, -d,
+                -l, h, d,
+                -l, h, -d,
+                -l, -h, -d
+            ]
+        });
+    }
+
+    static createArrow(back = 0.0, height = 2.1, front = -15) {
+        return new Object3d({
+            vertices: [
+                0, height, 0,
+                7, 0, 6,
+                0, 0, front,
+
+                0, 0, back,
+                7, 0, 6,
+                0, height, 0,
+
+                -7, 0, 6,
+                0, 0, back,
+                0, height, 0,
+
+                -7, 0, 6,
+                0, height, 0,
+                0, 0, front,
+
+                -7, 0, 6,
+                0, 0, front,
+                0, 0, back,
+                0, 0, back,
+                0, 0, front,
+                7, 0, 6
+            ]
+        });
+    }
+}
+
+export { Object3d };