@openglobus/og 0.15.5 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.15.5",
+  "version": "0.16.1",
   "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,23 @@
     "./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

@@ -77,6 +77,23 @@ export class LonLat {
         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
@@ -152,7 +169,7 @@ export class LonLat {
     }
 
     /**
-     * Clone the coordiante.
+     * Clone the coordinates.
      * @public
      * @returns {LonLat} -
      */

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/PlanetCamera.js

@@ -59,7 +59,7 @@ class PlanetCamera extends Camera {
          * @public
          * @type {number}
          */
-        this.minAltitude = options.minAltitude || 5;
+        this.minAltitude = options.minAltitude || 1;
 
         /**
          * Maximal alltitude that camera can reach over the globe.
@@ -103,14 +103,6 @@ class PlanetCamera extends Camera {
          */
         this._insideSegment = null;
 
-        /**
-         * Coordinates that depends on what segment class we are fling over.
-         * It can be WGS84 or Mercator coordinates. Gets in og.quadTree.Node
-         * @protected
-         * @type {LonLat}
-         */
-        this._insideSegmentPosition = new LonLat();
-
         this.slope = 0;
 
         this._keyLock = new Key();
@@ -146,6 +138,8 @@ class PlanetCamera extends Camera {
 
         super.update();
 
+        this.updateGeodeticPosition();
+
         this.eyeNorm = this.eye.normal();
         this.slope = this._b.dot(this.eyeNorm);
 
@@ -632,7 +626,7 @@ class PlanetCamera extends Camera {
         if (this._insideSegment && this._insideSegment.planet) {
             this._terrainAltitude = this._insideSegment.getTerrainPoint(
                 this.eye,
-                this._insideSegmentPosition,
+                this._lonLatMerc,
                 this._terrainPoint
             );
             if (this._terrainAltitude < this.minAltitude && this._checkTerrainCollision) {

package/src/og/control/LayerSwitcher.js

@@ -239,17 +239,18 @@ class LayerSwitcher extends Control {
             if (
                 (nameConcat == 'TerrainProviders' && planet.terrain == object) ||
                 (nameConcat == 'BaseLayers' && planet.baseLayer == object) ||
-                (nameConcat == 'OverLays' && object.getVisibility() == true)
+                (nameConcat == 'Overlays' && object.getVisibility() == true)
             ) {
                 return true
             }
+            return false
         }
 
         const createInput = (object, depth, type, nameConcat) => {
             if (depth > 0) {
                 return elementFactory('input', {
-                    class: 'og-layer-switcher-record-input ' +
-                        nameConcat, type: type || 'checkbox',
+                    class: 'og-layer-switcher-record-input ' + nameConcat, 
+                    type: type || 'checkbox',
                     ...(visibility(object, nameConcat) ? { checked: true } : null)
                 }, '')
             }

package/src/og/control/RulerSwitcher.js

@@ -6,7 +6,7 @@
 
 import { ToggleButton } from "../ui/ToggleButton.js";
 import { Control } from "./Control.js";
-import { Ruler } from "./ruler/Ruler.js";
+import { HeightRuler } from "./heightRuler/HeightRuler.js";
 
 const ICON_BUTTON_SVG = `<?xml version="1.0" encoding="iso-8859-1"?>
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
@@ -37,7 +37,7 @@ class RulerSwitcher extends Control {
             ...options
         });
 
-        this.ruler = new Ruler({
+        this.ruler = new HeightRuler({
             ignoreTerrain: options.ignoreTerrain
         });
     }

package/src/og/control/ZoomControl.js

@@ -9,12 +9,12 @@ import { Button } from "../ui/Button.js";
 import { Control } from "./Control.js";
 
 const ICON_PLUS_SVG = '<?xml version="1.0"?>' +
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '<svg width=24 height=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
     '    <path d="M 11 5 L 11 11 L 5 11 L 5 13 L 11 13 L 11 19 L 13 19 L 13 13 L 19 13 L 19 11 L 13 11 L 13 5 L 11 5 z"/>' +
     '</svg>';
 
 const ICON_MINUS_SVG = '<?xml version="1.0"?>' +
-    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
+    '<svg width=24 height=24 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">' +
     '    <path d="M 5 11 L 5 13 L 19 13 L 19 11 L 5 11 z"/>' +
     '</svg>';
 

package/src/og/control/heightRuler/HeightRulerScene.js

@@ -51,7 +51,11 @@ class HeightRulerScene extends RulerScene {
             relativeToGround: false,
             displayInLayerSwitcher: false
         });
+    }
 
+    setVisibility(visibility) {
+        super.setVisibility(visibility);
+        this._geoRulerLayer.setVisibility(visibility);
     }
 
     get deltaLabel() {
@@ -115,7 +119,6 @@ class HeightRulerScene extends RulerScene {
     }
 
     _drawLine(startLonLat, endLonLat, startPos) {
-
         super._drawLine(startLonLat, endLonLat, startPos);
         this._updateHeightRaysAndLabels();
     }
@@ -173,7 +176,8 @@ class HeightRulerScene extends RulerScene {
                 }
             })
         ];
-        this._cornersLayer.addEntities(this._cornerEntity)
+
+        this._cornersLayer.setEntities(this._cornerEntity);
     }
 
     init() {

package/src/og/control/index.js

@@ -1,6 +1,6 @@
 import { CompassButton } from "./CompassButton.js";
 import { Control } from "./Control.js";
-import { DebugInfo } from "./DebugInfo";
+import { DebugInfo } from "./DebugInfo.js";
 import { EarthCoordinates } from "./EarthCoordinates.js";
 import { EarthNavigation } from "./EarthNavigation.js";
 import { GeoImageDragControl } from "./GeoImageDragControl.js";
@@ -22,6 +22,8 @@ import { ToggleWireframe } from "./ToggleWireframe.js";
 import { TouchNavigation } from "./TouchNavigation.js";
 import { ZoomControl } from "./ZoomControl.js";
 
+import { TimelineControl } from "./timeline/TimelineControl.js";
+
 export {
     Control,
     CompassButton,
@@ -45,5 +47,6 @@ export {
     HeightRuler,
     SimpleSkyBackground,
     Selection,
-    LayerAnimation
+    LayerAnimation,
+    TimelineControl
 };

package/src/og/control/ruler/RulerScene.js

@@ -19,6 +19,7 @@ export function distanceFormat(v) {
         return `${v.toFixed(1)} m`;
     }
 }
+
 let obj3d = Object3d.createCylinder(1.1, 0, 2.7, 20, 1, true, false, 0, 0, 0)
 
 const LABEL_OPTIONS = {
@@ -65,6 +66,7 @@ class RulerScene extends RenderNode {
             relativeToGround: true,
             displayInLayerSwitcher: false
         });
+
         this._labelLayer = new Vector("ruler-label", {
             entities: [],
             pickingEnabled: false,
@@ -118,8 +120,6 @@ class RulerScene extends RenderNode {
             'label': LABEL_OPTIONS
         });
 
-        // this._propsLabel.label.setVisibility(false);
-
         this._trackEntity = new Entity({
             polyline: {
                 path3v: [],
@@ -133,7 +133,7 @@ class RulerScene extends RenderNode {
 
         this._createCorners();
         this._trackLayer.addEntities([this._trackEntity]);
-        this._labelLayer.addEntities([ this._propsLabel]);
+        this._labelLayer.addEntities([this._propsLabel]);
         this._planet.addLayer(this._labelLayer);
         this._planet.addLayer(this._trackLayer);
         this._planet.addLayer(this._cornersLayer);
@@ -169,7 +169,7 @@ class RulerScene extends RenderNode {
         this._onCornerLup_ = this._onCornerLup.bind(this);
         this._cornersLayer.events.on("lup", this._onCornerLup, this);
 
-
+        this.setVisibility(false);
     }
 
     _deactivate() {
@@ -239,16 +239,19 @@ class RulerScene extends RenderNode {
         this._preventClick = true;
     }
 
+    setVisibility(visibility) {
+        this._cornersLayer.setVisibility(visibility);
+        this._trackLayer.setVisibility(visibility);
+        this._labelLayer.setVisibility(visibility);
+    }
+
     _onLclick(e) {
         let startLonLat = this._planet.getLonLatFromPixelTerrain(e);
         this._timeout = setTimeout(() => {
             if (!this._preventClick) {
                 if (!this._startLonLat) {
+                    this.setVisibility(true);
                     this._stopDrawing = false;
-                    this._propsLabel.setVisibility(false);
-                    this._trackEntity.polyline.setPath3v([]);
-                    this._cornerEntity[0].setVisibility(true);
-                    this._cornerEntity[1].setVisibility(true);
                     this._startLonLat = startLonLat;
                 } else {
                     this._startLonLat = null;

package/src/og/control/timeline/TimelineControl.js

@@ -26,12 +26,14 @@ class TimelineControl extends Control {
         }
         super(options);
 
-        let currentDate = new Date();
-        let startDate = addHours(currentDate, -12), endDate = addHours(currentDate, 12);
+        let currentDate = options.current || new Date();
+        let startDate = options.rangeStart || addHours(currentDate, -12);
+        let endDate = options.rangeEnd || addHours(currentDate, 12); 
 
         this._timelineView = new TimelineView({
             rangeStart: startDate,
-            rangeEnd: endDate
+            rangeEnd: endDate,
+            current: currentDate
         });
 
         this._toggleBtn = new ToggleButton({

package/src/og/control/timeline/TimelineModel.js

@@ -45,6 +45,10 @@ class TimelineModel {
         }
     }
 
+    stopped() {
+       return this._requestAnimationFrameId == 0;
+    }
+
     _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
             this._frame();

package/src/og/control/timeline/TimelineView.js

@@ -112,9 +112,7 @@ class TimelineView extends View {
         this._playBtn = new ToggleButton({
             classList: ["og-timeline-control_button"],
             icon: ICON_PLAY_SVG,
-            name: "play",
-            isActive: true,
-            preventClick: true
+            name: "play"
         });
 
         this._buttons = new ButtonGroup({
@@ -183,6 +181,15 @@ class TimelineView extends View {
         this._playBtn.appendTo(this.$controls);
         this._pauseBtn.appendTo(this.$controls);
 
+        if (this.model.stopped()) {
+            this._pauseBtn.setActive(true, true);
+            this._pauseBtn.preventClick = true;
+        }
+        else {
+            this._playBtn.setActive(true, true);
+            this._playBtn.preventClick = true;
+        }
+
         this._buttons.on("change", (btn) => {
             switch (btn.name) {
                 case "play":

package/src/og/control/visibleExtent/Segment.js

@@ -268,8 +268,8 @@ class Segment {
      * @param {Vec3} [normal] - Terrain point normal.
      * @returns {Vec3} -
      */
-    getEntityTerrainPoint(entity, res, normal) {
-        return this.getTerrainPoint(entity._cartesian, entity._lonlatMerc, res, normal);
+    getEntityTerrainPoint(entity, res) {
+        return this.getTerrainPoint(entity._cartesian, entity._lonlatMerc, res);
     }
 
     isEntityInside(e) {
@@ -285,80 +285,74 @@ class Segment {
      * @param {Vec3} [normal] - Terrain point normal.
      * @returns {number} -
      */
-    getTerrainPoint(xyz, insideSegmentPosition, res, normal) {
-        var verts = this.tempVertices;
+    getTerrainPoint(xyz, insideSegmentPosition, res) {
+        let verts = this.tempVertices;
 
-        _ray.set(xyz, xyz.negateTo());
+        if (verts && verts.length) {
+            let norm = this.planet.ellipsoid.getSurfaceNormal3v(xyz);
+            _ray.set(xyz, norm.negateTo());
 
-        if (verts) {
-            var ne = this._extent.northEast,
+            let ne = this._extent.northEast,
                 sw = this._extent.southWest,
                 size = Math.sqrt(verts.length / 3) - 1;
 
-            var xmax = ne.lon,
+            let xmax = ne.lon,
                 ymax = ne.lat,
                 xmin = sw.lon,
                 ymin = sw.lat,
                 x = insideSegmentPosition.lon,
                 y = insideSegmentPosition.lat;
 
-            var sxn = xmax - xmin,
+            let sxn = xmax - xmin,
                 syn = ymax - ymin;
 
-            var qx = sxn / size,
+            let qx = sxn / size,
                 qy = syn / size;
 
-            var xn = x - xmin,
+            let xn = x - xmin,
                 yn = y - ymin;
 
-            var indX = Math.floor(xn / qx),
+            let indX = Math.floor(xn / qx),
                 indY = Math.floor(size - yn / qy);
 
-            if (verts && verts.length) {
-                var ind_v0 = ((size + 1) * indY + indX) * 3;
-                var ind_v2 = ((size + 1) * (indY + 1) + indX) * 3;
+            let ind_v0 = ((size + 1) * indY + indX) * 3;
+            let ind_v2 = ((size + 1) * (indY + 1) + indX) * 3;
 
-                _v0.set(verts[ind_v0], verts[ind_v0 + 1], verts[ind_v0 + 2]);
-                _v1.set(verts[ind_v0 + 3], verts[ind_v0 + 4], verts[ind_v0 + 5]);
-                _v2.set(verts[ind_v2], verts[ind_v2 + 1], verts[ind_v2 + 2]);
+            _v0.set(verts[ind_v0], verts[ind_v0 + 1], verts[ind_v0 + 2]);
+            _v1.set(verts[ind_v0 + 3], verts[ind_v0 + 4], verts[ind_v0 + 5]);
+            _v2.set(verts[ind_v2], verts[ind_v2 + 1], verts[ind_v2 + 2]);
 
-                let d = _ray.hitTriangle(_v0, _v1, _v2, res, normal);
+            let d = _ray.hitTriangle(_v0, _v1, _v2, res);
 
+            if (d === Ray.INSIDE) {
+                return xyz.distance(res);
+            } else if (d === Ray.AWAY) {
+                _rayEx.set(xyz, norm);
+                let d = _rayEx.hitTriangle(_v0, _v1, _v2, res);
                 if (d === Ray.INSIDE) {
-                    return xyz.distance(res);
-                } else if (d === Ray.AWAY) {
-                    _rayEx.set(xyz, xyz);
-                    let d = _rayEx.hitTriangle(_v0, _v1, _v2, res, normal);
-                    if (d === Ray.INSIDE) {
-                        return -xyz.distance(res);
-                    }
+                    return -xyz.distance(res);
                 }
+            }
 
-                _v3.set(verts[ind_v2 + 3], verts[ind_v2 + 4], verts[ind_v2 + 5]);
+            _v3.set(verts[ind_v2 + 3], verts[ind_v2 + 4], verts[ind_v2 + 5]);
 
-                d = _ray.hitTriangle(_v1, _v3, _v2, res, normal);
+            d = _ray.hitTriangle(_v1, _v3, _v2, res);
+            if (d === Ray.INSIDE) {
+                return xyz.distance(res);
+            } else if (d === Ray.AWAY) {
+                _rayEx.set(xyz, norm);
+                let d = _rayEx.hitTriangle(_v1, _v3, _v2, res);
                 if (d === Ray.INSIDE) {
-                    return xyz.distance(res);
-                } else if (d === Ray.AWAY) {
-                    _rayEx.set(xyz, xyz);
-                    let d = _rayEx.hitTriangle(_v1, _v3, _v2, res, normal);
-                    if (d === Ray.INSIDE) {
-                        return -xyz.distance(res);
-                    }
-                }
-
-                if (d === Ray.AWAY) {
                     return -xyz.distance(res);
                 }
+            }
 
-                return xyz.distance(res);
+            if (d === Ray.AWAY) {
+                return -xyz.distance(res);
             }
 
-            res.copy(this.planet.ellipsoid.hitRay(_ray.origin, _ray.direction));
-            normal && normal.copy(xyz.normal());
             return xyz.distance(res);
         } else {
-            normal && normal.copy(xyz.normal());
             return xyz.distance(this.planet.ellipsoid.hitRay(_ray.origin, _ray.direction));
         }
     }