@openglobus/og 0.16.2 → 0.17.0

package/package.json

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

package/src/og/Clock.js

@@ -1,7 +1,3 @@
-/**
- * @module og/Clock
- */
-
 "use strict";
 
 import * as jd from "./astro/jd.js";
@@ -14,7 +10,7 @@ import { Events } from "./Events.js";
  * @param {number} [params.startDate=0.0] - Julian start date.
  * @param {number} [params.endDate=0.0] - Julian end date.
  * @param {number} [params.currentDate] - Julian current date. Default: current date.
- * @param {number} [params.multiplier=1.0] - Time speed multiolier.
+ * @param {number} [params.multiplier=1.0] - Time speed multiplier.
  */
 class Clock {
     static get _staticCounter() {

package/src/og/Events.js

@@ -1,7 +1,3 @@
-/**
- * @module og/Events
- */
-
 "use strict";
 
 import { binaryInsert, stamp } from "./utils/shared.js";

package/src/og/Extent.js

@@ -1,7 +1,3 @@
-/**
- * @module og/Extent
- */
-
 "use strict";
 
 import { LonLat } from "./LonLat.js";
@@ -11,13 +7,13 @@ import * as mercator from "./mercator.js";
 /**
  * Represents geographical coordinates extent.
  * @class
- * @param {LonLat} [sw] - South West extent corner coordiantes.
- * @param {LonLat} [ne] - North East extent corner coordiantes.
+ * @param {LonLat} [sw] - South West extent corner coordinates.
+ * @param {LonLat} [ne] - North East extent corner coordinates.
  */
 export class Extent {
     /**
-     * @param {LonLat} [sw] - South West extent corner coordiantes.
-     * @param {LonLat} [ne] - North East extent corner coordiantes.
+     * @param {LonLat} [sw] - South West extent corner coordinates.
+     * @param {LonLat} [ne] - North East extent corner coordinates.
      */
     constructor(sw = new LonLat(), ne = new LonLat()) {
         /**
@@ -86,7 +82,7 @@ export class Extent {
     }
 
     /**
-     * Creates bound extent instance by coordinate array.
+     * Creates bound extent instance by coordinates array.
      * @static
      * @param {Array.<Array<number>>} arr - Coordinate array. (exactly 2 entries)
      * @return {Extent} Extent object.

package/src/og/Globe.js

@@ -1,4 +1,4 @@
-// StandWithUkraine
+// #StandWithUkraine
 
 /**
  * @module og/Globe
@@ -18,11 +18,9 @@ import { Vec3 } from "./math/Vec3.js";
 import { Renderer } from "./renderer/Renderer.js";
 import { Planet } from "./scene/Planet.js";
 import { EmptyTerrain } from "./terrain/EmptyTerrain.js";
-import { createColorRGB, isEmpty } from "./utils/shared.js";
+import { createColorRGB, getUrlParam, isEmpty } from "./utils/shared.js";
 import { Handler } from "./webgl/Handler.js";
 
-/** @const {string} */
-const CANVAS_ID_PREFIX = "globus_viewport_";
 /** @const {string} */
 const PLANET_NAME_PREFIX = "globus_planet_";
 
@@ -73,6 +71,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @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.
+ * @param {Boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
  */
 
 class Globe {
@@ -80,45 +79,53 @@ class Globe {
      * @param {*} options
      */
     constructor(options) {
-        window.__globus__ = this;
 
-        // Canvas creation
-        var _canvasId = CANVAS_ID_PREFIX + Globe._staticCounter++;
+        this.$target = null;
+
+        this._instanceID = `__globus${Globe.__staticCounter++ ? Globe.__staticCounter : ""}__`;
+        window[this._instanceID] = this;
 
+        //
+        // Canvas creation
+        //
         this._canvas = document.createElement("canvas");
-        this._canvas.id = _canvasId;
+        this._canvas.id = `canvas${this._instanceID}`;
         this._canvas.style.width = "100%";
         this._canvas.style.height = "100%";
         this._canvas.style.display = "block";
         this._canvas.style.opacity = "0.0";
-        this._canvas.style.transition = "opacity 1.0s";
+        this._canvas.style.transition = "opacity 150ms";
 
         /**
          * Dom element where WebGL canvas creates
          * @public
          * @type {Element}
          */
-        if (options.target instanceof HTMLElement) {
-            this.div = options.target;
+        this.$inner = document.createElement('div');
+        this.$inner.classList.add("og-inner");
+        this.$inner.appendChild(this._canvas);
+
+        this.$inner.attributions = document.createElement('div');
+        if (options.attributionContainer) {
+            options.attributionContainer.appendChild(this.$inner.attributions);
         } else {
-            this.div =
-                document.getElementById(options.target) || document.querySelector(options.target);
+            this.$inner.attributions.classList.add("og-attribution");
+            this.$inner.appendChild(this.$inner.attributions);
         }
 
-        this.div.appendChild(this._canvas);
-        this.div.classList.add("ogViewport");
+        this.attachTo(options.target);
 
-        function _disableWheel(e) {
+        const _disableWheel = (e) => {
             e.preventDefault();
         }
 
-        this.div.onmouseenter = function () {
+        this._canvas.onmouseenter = function () {
             document.addEventListener("mousewheel", _disableWheel, {
                 capture: false,
                 passive: false
             });
         };
-        this.div.onmouseleave = function () {
+        this._canvas.onmouseleave = function () {
             document.removeEventListener("mousewheel", _disableWheel);
         };
 
@@ -128,7 +135,8 @@ class Globe {
          * @type {Renderer}
          */
         this.renderer = new Renderer(
-            new Handler(_canvasId, {
+            new Handler(this._canvas, {
+                autoActivate: false,
                 pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
                 context: {
                     alpha: false,
@@ -137,19 +145,11 @@ class Globe {
                 }
             }), {
                 autoActivate: false,
-                backgroundColor: createColorRGB(options.backgroundColor, new Vec3(115 / 255, 203 / 255, 249 / 255)),
                 msaa: options.msaa
             }
         );
-        this.renderer.initialize();
-        this.renderer.div = this.div;
-        this.renderer.div.attributions = document.createElement("div");
-        if (options.attributionContainer) {
-            options.attributionContainer.appendChild(this.div.attributions);
-        } else {
-            this.div.attributions.classList.add("og-attribution");
-            this.div.appendChild(this.div.attributions);
-        }
+
+        this.renderer.div = this.$inner;
 
         // Skybox
         if (options.skybox) {
@@ -170,30 +170,22 @@ class Globe {
          */
         this._quadTreeType = options.quadTreeType;
 
-        if (options.atmosphere) {
-            /**
-             * Render node renders a planet.
-             * @public
-             * @type {Planet|og.scene.PlanetAtmosphere}
-             */
-            // TODO:
-        } else {
-            this.planet = new Planet({
-                name: this._planetName,
-                frustums: options.frustums,
-                ellipsoid: options.ellipsoid,
-                maxGridSize: options.maxGridSize,
-                useNightTexture: options.useNightTexture,
-                useSpecularTexture: options.useSpecularTexture,
-                minAltitude: options.minAltitude,
-                maxAltitude: options.maxAltitude || 15000000,
-                maxEqualZoomAltitude: options.maxEqualZoomAltitude,
-                minEqualZoomAltitude: options.minEqualZoomAltitude,
-                minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
-                quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
-                maxLoadingRequests: options.maxLoadingRequests
-            });
-        }
+        this.planet = new Planet({
+            name: this._planetName,
+            frustums: options.frustums,
+            ellipsoid: options.ellipsoid,
+            maxGridSize: options.maxGridSize,
+            useNightTexture: options.useNightTexture,
+            useSpecularTexture: options.useSpecularTexture,
+            minAltitude: options.minAltitude,
+            maxAltitude: options.maxAltitude || 15000000,
+            maxEqualZoomAltitude: options.maxEqualZoomAltitude,
+            minEqualZoomAltitude: options.minEqualZoomAltitude,
+            minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
+            quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
+            maxLoadingRequests: options.maxLoadingRequests,
+            atmosphereEnabled: options.atmosphereEnabled
+        });
 
         // Attach terrain provider (can be one object or array)
         if (options.terrain) {
@@ -268,9 +260,24 @@ class Globe {
 
         // Run!
         if (options.autoActivate || isEmpty(options.autoActivate)) {
-            this.renderer.start();
-            this.fadeIn();
+            this.start();
+        }
+    }
+
+    static get __staticCounter() {
+        if (!this.__counter && this.__counter !== 0) {
+            this.__counter = 0;
         }
+        return this.__counter;
+    }
+
+    static set __staticCounter(n) {
+        this.__counter = n;
+    }
+
+    start() {
+        this.renderer.start();
+        this.fadeIn();
     }
 
     /**
@@ -290,6 +297,36 @@ class Globe {
         this._canvas.style.opacity = 0.0;
     }
 
+    attachTo(target) {
+
+        this.detach();
+
+        let t;
+        if (target instanceof HTMLElement) {
+            t = target;
+        } else {
+            t = document.getElementById(target) || document.querySelector(target);
+        }
+
+        if (t) {
+            this.$target = t;
+            t.appendChild(this.$inner);
+        }
+    }
+
+    detach() {
+        if (this.$target) {
+            // Remember that when container is zero
+            // sized(display none etc.) renderer frame will be stopped
+            this.$target.removeChild(this.$inner);
+        }
+    }
+
+    destroy() {
+        this.detach();
+        this.renderer.destroy();
+    }
+
     static get _staticCounter() {
         if (!this._counter && this._counter !== 0) {
             this._counter = 0;

package/src/og/ImageCanvas.js

@@ -1,7 +1,3 @@
-/**
- * @module og/ImageCanvas
- */
-
 "use strict";
 
 /**
@@ -28,7 +24,9 @@ class ImageCanvas {
          * @protected
          * @type {Object}
          */
-        this._context = this._canvas.getContext("2d");
+        this._context = this._canvas.getContext("2d", {
+            willReadFrequently: true
+        });
     }
 
     /**
@@ -62,6 +60,15 @@ class ImageCanvas {
         this._context.putImageData(imgd, 0, 0);
     }
 
+    /**
+     * Fills canvas RGBA with color.
+     * @public
+     */
+    fill(c) {
+        this._context.fillStyle = color
+        this._context.fill()
+    }
+
     /**
      * Gets canvas pixels RGBA data.
      * @public

package/src/og/Lock.js

@@ -1,48 +1,44 @@
-/**
- * @module og/Lock
- */
-
-'use strict';
-
-class Lock {
-
-    constructor() {
-        this._lock = 0;
-    }
-
-    lock(key) {
-        this._lock |= (1 << key._id);
-    }
-
-    free(key) {
-        this._lock &= ~(1 << key._id);
-    }
-
-    isFree() {
-        return this._lock === 0;
-    }
-
-    isLocked() {
-        return this._lock !== 0;
-    }
-}
-
-class Key {
-
-    static get _staticCounter() {
-        if (!this._counter && this._counter !== 0) {
-            this._counter = 0;
-        }
-        return this._counter;
-    }
-
-    static set _staticCounter(n) {
-        this._counter = n;
-    }
-
-    constructor() {
-        this._id = Key._staticCounter++;
-    }
-}
-
-export { Lock, Key };
+'use strict';
+
+class Lock {
+
+    constructor() {
+        this._lock = 0;
+    }
+
+    lock(key) {
+        this._lock |= (1 << key._id);
+    }
+
+    free(key) {
+        this._lock &= ~(1 << key._id);
+    }
+
+    isFree() {
+        return this._lock === 0;
+    }
+
+    isLocked() {
+        return this._lock !== 0;
+    }
+}
+
+class Key {
+
+    static get _staticCounter() {
+        if (!this._counter && this._counter !== 0) {
+            this._counter = 0;
+        }
+        return this._counter;
+    }
+
+    static set _staticCounter(n) {
+        this._counter = n;
+    }
+
+    constructor() {
+        this._id = Key._staticCounter++;
+    }
+}
+
+export { Lock, Key };

package/src/og/LonLat.js

@@ -1,7 +1,3 @@
-/**
- * @module og/LonLat
- */
-
 "use strict";
 
 import * as mercator from "./mercator.js";

package/src/og/Object3d.js

@@ -379,7 +379,7 @@ class Object3d {
 
 
     static async loadObj(src) {
-        const obj = await fetch(src)
+        const obj = await fetch(src, { mode: "cors", })
             .then((response) => response.text())
             .then((data) => transformLeftToRightCoordinateSystem(objParser(data)))
             .catch(() => []);

package/src/og/Stack.js

@@ -1,53 +1,49 @@
-/**
- * @module og/Stack
- */
-
-"use strict";
-
-class Node {
-    constructor() {
-        this.next = null;
-        this.prev = null;
-        this.data = null;
-    }
-}
-
-class Stack {
-    /**
-     *
-     * @param {number} [size]
-     */
-    constructor(size = 256) {
-        this._current = new Node();
-        this._head = this._current;
-
-        for (var i = 0; i < size; i++) {
-            var n = new Node();
-            n.prev = this._current;
-            this._current.next = n;
-            this._current = n;
-        }
-        this._current = this._head;
-    }
-
-    current() {
-        return this._current;
-    }
-
-    push(data) {
-        this._current = this._current.next;
-        this._current.data = data;
-    }
-
-    pop(data) {
-        this._current = this._current.prev;
-        return this._current.next.data;
-    }
-
-    popPrev(data) {
-        this._current = this._current.prev;
-        return this._current.data;
-    }
-}
-
-export { Stack };
+"use strict";
+
+class Node {
+    constructor() {
+        this.next = null;
+        this.prev = null;
+        this.data = null;
+    }
+}
+
+class Stack {
+    /**
+     *
+     * @param {number} [size]
+     */
+    constructor(size = 256) {
+        this._current = new Node();
+        this._head = this._current;
+
+        for (var i = 0; i < size; i++) {
+            var n = new Node();
+            n.prev = this._current;
+            this._current.next = n;
+            this._current = n;
+        }
+        this._current = this._head;
+    }
+
+    current() {
+        return this._current;
+    }
+
+    push(data) {
+        this._current = this._current.next;
+        this._current.data = data;
+    }
+
+    pop(data) {
+        this._current = this._current.prev;
+        return this._current.next.data;
+    }
+
+    popPrev(data) {
+        this._current = this._current.prev;
+        return this._current.data;
+    }
+}
+
+export { Stack };