@openglobus/og 0.15.4 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.15.4",
+  "version": "0.16.0",
   "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,7 +9,7 @@
   "style": "./css/og.css",
   "types": "./types/index.d.ts",
   "scripts": {
-    "api": "jsdoc -r ./src/ -c ./jsdoc.conf.json -d ./api",
+    "docs": "jsdoc -r ./src/ -c ./jsdoc.conf.json -d ./docs",
     "serve": "ws",
     "build": "rollup -c --bundleConfigAsCjs",
     "webgl": "rollup -c --environment entry:webgl",
@@ -44,25 +44,24 @@
     "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.21.5",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@types/jest": "^29.4.0",
-    "eslint": "^8.35.0",
-    "jaguarjs-jsdoc": "^1.1.0",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@types/jest": "^29.5.1",
+    "clean-jsdoc-theme": "^4.2.7",
+    "eslint": "^8.39.0",
     "jest": "^29.5.0",
-    "jest-canvas-mock": "^2.4.0",
+    "jest-canvas-mock": "^2.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "jest-webgl-canvas-mock": "^0.2.3",
     "jsdoc": "^4.0.2",
-    "lint-staged": "^13.1.2",
+    "lint-staged": "^13.2.2",
     "local-web-server": "^5.3.0",
-    "postcss": "^8.4.21",
-    "prettier": "^2.8.4",
-    "rollup": "^3.18.0",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "rollup": "^3.21.3",
     "rollup-plugin-postcss": "^4.0.2",
-    "taffydb": "^2.7.3",
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Globe.js

@@ -71,6 +71,8 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @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.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
+ * @param {Number} [options.msaa] - MSAA antialiasing parameter: 2,4,8,16. Default is 4.
+ * @param {Number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
  */
 
 class Globe {
@@ -127,7 +129,7 @@ class Globe {
          */
         this.renderer = new Renderer(
             new Handler(_canvasId, {
-                pixelRatio: window.devicePixelRatio + 0.15,
+                pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
                 context: {
                     alpha: false,
                     antialias: false,
@@ -135,7 +137,8 @@ class Globe {
                 }
             }), {
                 autoActivate: false,
-                backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255))
+                backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255)),
+                msaa: options.msaa
             }
         );
         this.renderer.initialize();

package/src/og/LonLat.js

@@ -1,193 +1,224 @@
-/**
- * @module og/LonLat
- */
-
-"use strict";
-
-import * as mercator from "./mercator.js";
-
-const HALF_PI = Math.PI * 0.5;
-const INV_PI_BY_180 = 180.0 / Math.PI;
-const INV_PI_BY_360 = INV_PI_BY_180 * 2.0;
-const PI_BY_360 = Math.PI / 360.0;
-const INV_PI_BY_180_HALF_PI = INV_PI_BY_180 * HALF_PI;
-
-/**
- * Represents a geographical point with a certain latitude, longitude and height.
- * @class
- * @param {number} [lon] - Longitude.
- * @param {number} [lat] - Latitude.
- * @param {number} [height] - Height over the surface.
- */
-export class LonLat {
-    /**
-     * @param {number} [lon] - Longitude.
-     * @param {number} [lat] - Latitude.
-     * @param {number} [height] - Height over the surface.
-     */
-    constructor(lon = 0 , lat = 0, height = 0) {
-        /**
-         * Longitude.
-         * @public
-         * @type {number}
-         */
-        this.lon = lon;
-
-        /**
-         * Latitude.
-         * @public
-         * @type {number}
-         */
-        this.lat = lat;
-
-        /**
-         * Height.
-         * @public
-         * @type {number}
-         */
-        this.height = height;
-    }
-
-    isZero() {
-        return this.lon === 0.0 && this.lat === 0.0 && this.height === 0.0;
-    }
-
-    /**
-     * Creates coordinates array.
-     * @static
-     * @param{Array.<Array<number>>} arr - Coordinates array data. (exactly 3 entries)
-     * @return{Array.<LonLat>} the same coordinates array but each element is LonLat instance.
-     */
-    static join(arr) {
-        var res = [];
-        for (var i = 0; i < arr.length; i++) {
-            var ai = arr[i];
-            res[i] = new LonLat(ai[0], ai[1], ai[2]);
-        }
-        return res;
-    }
-
-    /**
-     * Creates an object by coordinate array.
-     * @static
-     * @param {Array.<number>} arr - Coordiante array, where first is longitude, second is latitude and third is a height. (exactly 3 entries)
-     * @returns {LonLat} -
-     */
-    static createFromArray(arr) {
-        return new LonLat(arr[0], arr[1], arr[2]);
-    }
-
-    /**
-     * Converts degrees to mercator coordinates.
-     * @static
-     * @param {number} lon - Degrees longitude.
-     * @param {number} lat - Degrees latitude.
-     * @param {number} [height] - Height.
-     * @returns {LonLat} -
-     */
-    static forwardMercator(lon, lat, height) {
-        return new LonLat(
-            lon * mercator.POLE_BY_180,
-            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI,
-            height
-        );
-    }
-
-    /**
-     * Converts mercator to degrees coordinates.
-     * @static
-     * @param {number} x - Mercator longitude.
-     * @param {number} y - Mercator latitude.
-     * @param {number} [height] - Height.
-     * @returns {LonLat} -
-     */
-    static inverseMercator(x, y, height = 0) {
-        return new LonLat(
-            x * mercator.INV_POLE_BY_180,
-            INV_PI_BY_360 * Math.atan(Math.exp(y * mercator.PI_BY_POLE)) - INV_PI_BY_180_HALF_PI,
-            height
-        );
-    }
-
-    /**
-     * Sets coordinates.
-     * @public
-     * @param {number} [lon] - Longitude.
-     * @param {number} [lat] - Latitude.
-     * @param {number} [height] - Height.
-     * @returns {LonLat} -
-     */
-    set(lon = 0, lat = 0, height = 0) {
-        this.lon = lon;
-        this.lat = lat;
-        this.height = height;
-        return this;
-    }
-
-    /**
-     * Copy coordinates.
-     * @public
-     * @param {LonLat} [lonLat] - Coordinates to copy.
-     * @returns {LonLat} -
-     */
-    copy(lonLat) {
-        this.lon = lonLat.lon;
-        this.lat = lonLat.lat;
-        this.height = lonLat.height;
-        return this;
-    }
-
-    /**
-     * Clone the coordiante.
-     * @public
-     * @returns {LonLat} -
-     */
-    clone() {
-        return new LonLat(this.lon, this.lat, this.height);
-    }
-
-    /**
-     * Converts to mercator coordinates.
-     * @public
-     * @returns {LonLat} -
-     */
-    forwardMercator() {
-        return LonLat.forwardMercator(this.lon, this.lat, this.height);
-    }
-
-    forwardMercatorEPS01() {
-        var lat = this.lat;
-        if (lat > 89.9) {
-            lat = 89.9;
-        } else if (lat < -89.9) {
-            lat = -89.9;
-        }
-        return new LonLat(
-            this.lon * mercator.POLE_BY_180,
-            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI
-        );
-    }
-
-    /**
-     * Converts from mercator coordinates.
-     * @public
-     * @returns {LonLat} -
-     */
-    inverseMercator() {
-        return LonLat.inverseMercator(this.lon, this.lat, this.height);
-    }
-
-    /**
-     * Compares coordinates.
-     * @public
-     * @param {LonLat} b - Coordinate to compare with.
-     * @returns {boolean} -
-     */
-    equal(b) {
-        if (b.height) {
-            return this.lon === b.lon && this.lat === b.lat && this.height === b.height;
-        } else {
-            return this.lon === b.lon && this.lat === b.lat;
-        }
-    }
-}
+/**
+ * @module og/LonLat
+ */
+
+"use strict";
+
+import * as mercator from "./mercator.js";
+
+const HALF_PI = Math.PI * 0.5;
+const INV_PI_BY_180 = 180.0 / Math.PI;
+const INV_PI_BY_360 = INV_PI_BY_180 * 2.0;
+const PI_BY_360 = Math.PI / 360.0;
+const INV_PI_BY_180_HALF_PI = INV_PI_BY_180 * HALF_PI;
+
+/**
+ * Represents a geographical point with a certain latitude, longitude and height.
+ * @class
+ * @param {number} [lon] - Longitude.
+ * @param {number} [lat] - Latitude.
+ * @param {number} [height] - Height over the surface.
+ */
+export class LonLat {
+    /**
+     * @param {number} [lon] - Longitude.
+     * @param {number} [lat] - Latitude.
+     * @param {number} [height] - Height over the surface.
+     */
+    constructor(lon = 0, lat = 0, height = 0) {
+        /**
+         * Longitude.
+         * @public
+         * @type {number}
+         */
+        this.lon = lon;
+
+        /**
+         * Latitude.
+         * @public
+         * @type {number}
+         */
+        this.lat = lat;
+
+        /**
+         * Height.
+         * @public
+         * @type {number}
+         */
+        this.height = height;
+    }
+
+    isZero() {
+        return this.lon === 0.0 && this.lat === 0.0 && this.height === 0.0;
+    }
+
+    /**
+     * Creates coordinates array.
+     * @static
+     * @param{Array.<Array<number>>} arr - Coordinates array data. (exactly 3 entries)
+     * @return{Array.<LonLat>} the same coordinates array but each element is LonLat instance.
+     */
+    static join(arr) {
+        var res = [];
+        for (var i = 0; i < arr.length; i++) {
+            var ai = arr[i];
+            res[i] = new LonLat(ai[0], ai[1], ai[2]);
+        }
+        return res;
+    }
+
+    /**
+     * Creates an object by coordinate array.
+     * @static
+     * @param {Array.<number>} arr - Coordiante array, where first is longitude, second is latitude and third is a height. (exactly 3 entries)
+     * @returns {LonLat} -
+     */
+    static createFromArray(arr) {
+        return new LonLat(arr[0], arr[1], arr[2]);
+    }
+
+    /**
+     *  Create array from lonlat
+     * @param lonLat
+     * @returns {number[]}
+     */
+    static toArray(lonLat) {
+        return [lonLat.lon, lonLat.lat, lonLat.height]
+    }
+
+    /**
+     *  Create array from lonlat
+     * @returns {number[]}
+     */
+    toArray() {
+        return LonLat.toArray(this)
+    }
+
+    /**
+     * Converts degrees to mercator coordinates.
+     * @static
+     * @param {number} lon - Degrees longitude.
+     * @param {number} lat - Degrees latitude.
+     * @param {number} [height] - Height.
+     * @returns {LonLat} -
+     */
+    static forwardMercator(lon, lat, height) {
+        return new LonLat(
+            lon * mercator.POLE_BY_180,
+            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI,
+            height
+        );
+    }
+
+    /**
+     * Converts degrees to mercator coordinates.
+     * @static
+     * @param {LonLat} lonLat - Input geodetic degree coordinates
+     * @param {LonLat} res - Output mercator coordinates
+     * @returns {LonLat} - Output mercator coordinates
+     */
+    static forwardMercatorRes(lonLat, res) {
+        res.lon = lonLat.lon * mercator.POLE_BY_180;
+        res.lat = Math.log(Math.tan((90.0 + lonLat.lat) * PI_BY_360)) * mercator.POLE_BY_PI,
+            res.height = lonLat.height;
+        return res;
+    }
+
+    /**
+     * Converts mercator to degrees coordinates.
+     * @static
+     * @param {number} x - Mercator longitude.
+     * @param {number} y - Mercator latitude.
+     * @param {number} [height] - Height.
+     * @returns {LonLat} -
+     */
+    static inverseMercator(x, y, height = 0) {
+        return new LonLat(
+            x * mercator.INV_POLE_BY_180,
+            INV_PI_BY_360 * Math.atan(Math.exp(y * mercator.PI_BY_POLE)) - INV_PI_BY_180_HALF_PI,
+            height
+        );
+    }
+
+    /**
+     * Sets coordinates.
+     * @public
+     * @param {number} [lon] - Longitude.
+     * @param {number} [lat] - Latitude.
+     * @param {number} [height] - Height.
+     * @returns {LonLat} -
+     */
+    set(lon = 0, lat = 0, height = 0) {
+        this.lon = lon;
+        this.lat = lat;
+        this.height = height;
+        return this;
+    }
+
+    /**
+     * Copy coordinates.
+     * @public
+     * @param {LonLat} [lonLat] - Coordinates to copy.
+     * @returns {LonLat} -
+     */
+    copy(lonLat) {
+        this.lon = lonLat.lon;
+        this.lat = lonLat.lat;
+        this.height = lonLat.height;
+        return this;
+    }
+
+    /**
+     * Clone the coordinates.
+     * @public
+     * @returns {LonLat} -
+     */
+    clone() {
+        return new LonLat(this.lon, this.lat, this.height);
+    }
+
+    /**
+     * Converts to mercator coordinates.
+     * @public
+     * @returns {LonLat} -
+     */
+    forwardMercator() {
+        return LonLat.forwardMercator(this.lon, this.lat, this.height);
+    }
+
+    forwardMercatorEPS01() {
+        var lat = this.lat;
+        if (lat > 89.9) {
+            lat = 89.9;
+        } else if (lat < -89.9) {
+            lat = -89.9;
+        }
+        return new LonLat(
+            this.lon * mercator.POLE_BY_180,
+            Math.log(Math.tan((90.0 + lat) * PI_BY_360)) * mercator.POLE_BY_PI
+        );
+    }
+
+    /**
+     * Converts from mercator coordinates.
+     * @public
+     * @returns {LonLat} -
+     */
+    inverseMercator() {
+        return LonLat.inverseMercator(this.lon, this.lat, this.height);
+    }
+
+    /**
+     * Compares coordinates.
+     * @public
+     * @param {LonLat} b - Coordinate to compare with.
+     * @returns {boolean} -
+     */
+    equal(b) {
+        if (b.height) {
+            return this.lon === b.lon && this.lat === b.lat && this.height === b.height;
+        } else {
+            return this.lon === b.lon && this.lat === b.lat;
+        }
+    }
+}

package/src/og/Object3d.js

@@ -3,7 +3,8 @@
 
 import { htmlColorToFloat32Array } from './utils/shared.js';
 import { Vec3 } from './math/Vec3.js';
-import { MIN, MAX } from './math.js';
+import { MAX, MIN } from './math.js';
+import { transformLeftToRightCoordinateSystem, objParser } from "./utils/objParser.js";
 
 function getColor(color) {
     if (color instanceof Array) {
@@ -44,7 +45,7 @@ class Object3d {
             this._normals = data.normals || [];
         } else {
             this._normals = Object3d.getNormals(this._vertices);
-            this._indices = new Array(this._vertices.length/ 3);
+            this._indices = new Array(this._vertices.length / 3);
             for (let i = 0, len = this._indices.length; i < len; i++) {
                 this._indices[i] = i;
             }
@@ -78,6 +79,10 @@ class Object3d {
         return this._src;
     }
 
+    set src(src) {
+        this._src = src;
+    }
+
     get name() {
         return this._name;
     }
@@ -371,6 +376,20 @@ class Object3d {
                 -7, 0, 6, 0, 0, front, 0, 0, back, 0, 0, back, 0, 0, front, 7, 0, 6]
         });
     }
+
+
+    static async loadObj(src) {
+        const obj = await fetch(src)
+            .then((response) => response.text())
+            .then((data) => transformLeftToRightCoordinateSystem(objParser(data)))
+            .catch(() => []);
+
+        return obj.geometries.map(({ data: { vertices, normals, textures } }) => new Object3d({
+            vertices,
+            normals,
+            texCoords: textures
+        }));
+    }
 }
 
 export { Object3d };

package/src/og/bv/index.js

@@ -1,4 +1,4 @@
-import { Box } from './Box';
-import { Sphere } from './Sphere';
+import { Box } from './Box.js';
+import { Sphere } from './Sphere.js';
 
 export { Box, Sphere };

package/src/og/camera/Camera.js

@@ -255,22 +255,10 @@ class Camera {
         Vec3.doubleToTwoFloat32Array(eye, this.eyeHigh, this.eyeLow);
 
         this._viewMatrix.set([
-            u.x,
-            v.x,
-            n.x,
-            0.0,
-            u.y,
-            v.y,
-            n.y,
-            0.0,
-            u.z,
-            v.z,
-            n.z,
-            0.0,
-            -eye.dot(u),
-            -eye.dot(v),
-            -eye.dot(n),
-            1.0
+            u.x, v.x, n.x, 0.0,
+            u.y, v.y, n.y, 0.0,
+            u.z, v.z, n.z, 0.0,
+            -eye.dot(u), -eye.dot(v), -eye.dot(n), 1.0
         ]);
 
         // do not cleanup, someday it will be using