@openglobus/og 0.11.6 → 0.11.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.11.6",
+  "version": "0.11.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.",
   "directories": {
     "example": "./sandbox"
@@ -17,7 +17,7 @@
     "test": "jest --env=jsdom",
     "test_watch": "jest --env=jsdom --watch",
     "lint": "eslint src/og",
-    "generate_types": "rm -rf types; tsc src/**/*.js --declaration --allowJs --emitDeclarationOnly --outDir types; exit 0",
+    "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/"
   },
   "repository": {
@@ -43,24 +43,24 @@
     "./css/og.css": "./css/og.css"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
     "@rollup/plugin-json": "^4.1.0",
-    "@types/jest": "^27.0.2",
-    "eslint": "^8.2.0",
+    "@types/jest": "^27.0.3",
+    "eslint": "^8.3.0",
     "jaguarjs-jsdoc": "^1.1.0",
     "jest": "^27.3.1",
     "jest-canvas-mock": "^2.3.1",
     "jest-webgl-canvas-mock": "^0.2.3",
     "jsdoc": "^3.6.7",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^12.1.2",
     "local-web-server": "^5.1.1",
     "msdf-bmfont-xml": "^2.5.4",
-    "postcss": "^8.3.11",
-    "prettier": "^2.4.1",
-    "rollup": "^2.60.0",
-    "rollup-plugin-postcss": "^4.0.1",
+    "postcss": "^8.4.1",
+    "prettier": "^2.5.0",
+    "rollup": "^2.60.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.2"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/og/Globe.js

@@ -16,7 +16,7 @@ import { Renderer } from "./renderer/Renderer.js";
 import { Planet } from "./scene/Planet.js";
 import { EmptyTerrain } from "./terrain/EmptyTerrain.js";
 import { isEmpty } from "./utils/shared.js";
-import { Handler } from "./webgl/Handler.js";
+import { Handler } from "./webgl/Handler.js";
 
 /** @const {string} */
 const CANVAS_ID_PREFIX = "globus_viewport_";
@@ -60,8 +60,10 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @param {DOMElement} [options.attributionContainer] - Container for attribution list.
  * @param {Number} [options.maxGridSize] = Maximal segment grid size. 128 is default
  * @param {boolean} [options.useSpecularTexture] - use specular water mask
- * @param {boolean} [options.useNightTexture] - show night cities
- * @param {Number} [options.maxEqualZoomAltitude=850000.0] - Maximal altitude since segments on the screen bacame the same zoom level
+ * @param {boolean} [options.useNightTexture] - show night cities
+ * @param {Number} [options.maxAltitude=15000000.0] - Maximal camera altitude above terrain
+ * @param {Number} [options.minAltitude=1.0] - Minimal camera altitude above terrain
+ * @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
  */
@@ -117,7 +119,8 @@ class Globe {
          * @type {Renderer}
          */
         this.renderer = new Renderer(
-            new Handler(_canvasId, {
+            new Handler(_canvasId, {
+                pixelRatio: window.devicePixelRatio,
                 context: {
                     alpha: false,
                     antialias: false,
@@ -165,7 +168,7 @@ class Globe {
                 useNightTexture: options.useNightTexture,
                 useSpecularTexture: options.useSpecularTexture,
                 minAltitude: options.minAltitude,
-                maxAltitude: options.maxAltitude,
+                maxAltitude: options.maxAltitude || 15000000,
                 maxEqualZoomAltitude: options.maxEqualZoomAltitude,
                 minEqualZoomAltitude: options.minEqualZoomAltitude,
                 minEqualZoomCameraSlope: options.minEqualZoomCameraSlope

package/src/og/Popup.js

@@ -74,11 +74,12 @@ class Popup {
 
     setScreen(p) {
         if (this._planet) {
+            let r = this._planet.renderer.handler.pixelRatio;
             this.el.style.transform =
                 "translate(" +
-                (p.x - this.clientWidth * 0.5) +
+                (p.x / r - this.clientWidth * 0.5) +
                 "px, " +
-                (p.y - this._planet.renderer.handler.canvas.height - this._tipEl.clientHeight) +
+                (p.y / r - this._planet.renderer.handler.canvas.clientHeight - this._tipEl.clientHeight) +
                 "px)";
         }
     }

package/src/og/camera/PlanetCamera.js

@@ -41,7 +41,7 @@ class PlanetCamera extends Camera {
             Object.assign(
                 {},
                 {
-                    frustums: /*[[100, 10000000]]*/ [
+                    frustums: /*[[100, 10000000]]*/[
                         [1, 100 + 0.075],
                         [100, 1000 + 0.075],
                         [1000, 1e6 + 10000],
@@ -636,15 +636,20 @@ class PlanetCamera extends Camera {
     getHeading() {
         let u = this.eye.normal();
         let f = Vec3.proj_b_to_plane(
-                this.slope >= 0.97 ? this.getUp() : this.getForward(),
-                u
-            ).normalize(),
+            this.slope >= 0.97 ? this.getUp() : this.getForward(),
+            u
+        ).normalize(),
             n = Vec3.proj_b_to_plane(Vec3.UP, u).normalize();
         let res = Math.sign(u.dot(f.cross(n))) * Math.acos(f.dot(n)) * math.DEGREES;
         if (res < 0.0) {
             return 360.0 + res;
         }
         return res;
+    }
+
+    isVisible(poi) {
+        let e = this.eye.length();
+        return this.eye.distance(poi) < Math.sqrt(e * e - this.planet.ellipsoid._a2);
     }
 }
 

package/src/og/control/Lighting.js

@@ -10,6 +10,11 @@ import { parseHTML } from "../utils/shared.js";
 const TEMPLATE = `<div class="og-lighing">
 
        <div class="og-screen-options">
+
+         <div class="og-option">
+          <div class="og-caption">Lighting enabled<input type="checkbox" id="lighting" name="light"/></div>
+         </div>
+
          <div class="og-option">
             <div class="og-caption">Gamma</div>
             <div class="og-slider">
@@ -32,6 +37,14 @@ const TEMPLATE = `<div class="og-lighing">
        </div>
       
        <div class="og-color-options">
+         <div class="og-caption">Opacity</div>
+         <div class="og-option">
+            <div class="og-label">A</div>
+            <div class="og-slider">
+                <input type="range" id="opacity" name="opacity" value="0.0" min="0.0" max="2.0" step="0.01" />
+            </div>
+            <div class="og-value opacity"></div>
+         </div>
          <div class="og-caption">Ambient</div>
          <div class="og-option">
             <div class="og-label">R</div>
@@ -128,6 +141,8 @@ class Lighting extends Control {
     bindLayer(layer) {
         this._selectedLayer = layer;
 
+        document.getElementById("opacity").value = layer.opacity;
+
         document.getElementById("ambient-r").value = layer.ambient.x;
         document.getElementById("ambient-g").value = layer.ambient.y;
         document.getElementById("ambient-b").value = layer.ambient.z;
@@ -142,6 +157,8 @@ class Lighting extends Control {
 
         document.getElementById("shininess").value = layer.shininess;
 
+        document.querySelector(".og-value.opacity").innerHTML = layer.opacity.toString();
+
         document.querySelector(".og-value.ambient-r").innerHTML = layer.ambient.x.toString();
         document.querySelector(".og-value.ambient-g").innerHTML = layer.ambient.y.toString();
         document.querySelector(".og-value.ambient-b").innerHTML = layer.ambient.z.toString();
@@ -163,8 +180,15 @@ class Lighting extends Control {
 
         var _this = this;
 
+        document.getElementById("lighting").checked = this.planet.lightEnabled;
+
+        document.getElementById("lighting").addEventListener("change", (e) => {
+            _this.planet.lightEnabled = e.target.checked;
+        });
+
         document.getElementById("layers").addEventListener("change", (e) => {
-            this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            //this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            this.bindLayer(_this.planet.getLayerByName(e.target.value));
         });
 
         document.getElementById("gamma").addEventListener("input", function (e) {
@@ -183,6 +207,13 @@ class Lighting extends Control {
         document.getElementById("gamma").value = this.planet.renderer.gamma;
         document.getElementById("exposure").value = this.planet.renderer.exposure;
 
+        document.getElementById("opacity").addEventListener("input", function (e) {
+            if (_this._selectedLayer) {
+                _this._selectedLayer.opacity = Number(this.value);
+            }
+            document.querySelector(".og-value.opacity").innerHTML = this.value;
+        });
+
         document.getElementById("ambient-r").addEventListener("input", function (e) {
             if (_this._selectedLayer) {
                 _this._selectedLayer.ambient.x = Number(this.value);
@@ -272,7 +303,7 @@ class Lighting extends Control {
         document.getElementById("layers").value = e.name;
     }
 
-    _onLayerRemove(e) {}
+    _onLayerRemove(e) { }
 }
 
 export function lighting(options) {

package/src/og/ellipsoid/Ellipsoid.js

@@ -562,7 +562,7 @@ class Ellipsoid {
             // qw >= 0.0.  Looking outward or tangent.
             return null;
         }
-    }
+    }
 }
 
 export { Ellipsoid };

package/src/og/entity/BaseBillboard.js

@@ -6,6 +6,7 @@
 
 import * as utils from "../utils/shared.js";
 import { Vec3 } from "../math/Vec3.js";
+import { LOCK_FREE, LOCK_UPDATE } from "./LabelWorker.js";
 
 /**
  * Base prototype for billboard and label classes.
@@ -97,16 +98,16 @@ class BaseBillboard {
          * @protected
          * @type {number}
          */
-        this._handlerIndex = -1;
-
-        /**
-         * An indication that the object is ready to draw
-         * @protected
-         * @type {number}
-         */
-        this._isReady = false;
-
-        this._lockId = -1;
+        this._handlerIndex = -1;
+
+        /**
+         * An indication that the object is ready to draw
+         * @protected
+         * @type {number}
+         */
+        this._isReady = false;
+
+        this._lockId = LOCK_FREE;
     }
 
     static get _staticCounter() {
@@ -132,10 +133,10 @@ class BaseBillboard {
         this._position.y = y;
         this._position.z = z;
         Vec3.doubleToTwoFloats(this._position, this._positionHigh, this._positionLow);
-        if (this._isReady) {
-            this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -149,10 +150,10 @@ class BaseBillboard {
         this._position.y = position.y;
         this._position.z = position.z;
         Vec3.doubleToTwoFloats(position, this._positionHigh, this._positionLow);
-        if (this._isReady) {
-            this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setPositionArr(this._handlerIndex, this._positionHigh, this._positionLow);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -176,10 +177,10 @@ class BaseBillboard {
         this._offset.x = x;
         this._offset.y = y;
         z != undefined && (this._offset.z = z);
-        if (this._isReady) {
-            this._handler.setOffsetArr(this._handlerIndex, this._offset);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setOffsetArr(this._handlerIndex, this._offset);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -189,14 +190,7 @@ class BaseBillboard {
      * @param {Vec2} offset - Offset size.
      */
     setOffset3v(offset) {
-        this._offset.x = offset.x;
-        this._offset.y = offset.y;
-        offset.z != undefined && (this._offset.z = offset.z);
-        if (this._isReady) {
-            this._handler.setOffsetArr(this._handlerIndex, offset);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
-        }
+        this.setOffset(offset.x, offset.y, offset.z);
     }
 
     /**
@@ -214,11 +208,13 @@ class BaseBillboard {
      * @param {number} rotation - Screen space rotation in radians.
      */
     setRotation(rotation) {
-        this._rotation = rotation;
-        if (this._isReady) {
-            this._handler.setRotationArr(this._handlerIndex, rotation);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (rotation !== this._rotation) {
+            this._rotation = rotation;
+            if (this._isReady) {
+                this._handler.setRotationArr(this._handlerIndex, rotation);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -237,8 +233,14 @@ class BaseBillboard {
      * @param {number} a - Billboard opacity.
      */
     setOpacity(a) {
-        this._color.w = a;
-        this.setColor(this._color.x, this._color.y, this._color.z, a);
+        if (a !== this._color.w) {
+            a != undefined && (this._color.w = a);
+            if (this._isReady) {
+                this._handler.setRgbaArr(this._handlerIndex, this._color);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
+        }
     }
 
     /**
@@ -250,14 +252,16 @@ class BaseBillboard {
      * @param {number} a - Alpha.
      */
     setColor(r, g, b, a) {
-        this._color.x = r;
-        this._color.y = g;
-        this._color.z = b;
-        a != undefined && (this._color.w = a);
-        if (this._isReady) {
-            this._handler.setRgbaArr(this._handlerIndex, this._color);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (a !== this._color.w || r !== this._color.x || g !== this._color.y || this._color.z !== b) {
+            this._color.x = r;
+            this._color.y = g;
+            this._color.z = b;
+            a != undefined && (this._color.w = a);
+            if (this._isReady) {
+                this._handler.setRgbaArr(this._handlerIndex, this._color);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -267,15 +271,7 @@ class BaseBillboard {
      * @param {Vec4} color - RGBA vector.
      */
     setColor4v(color) {
-        this._color.x = color.x;
-        this._color.y = color.y;
-        this._color.z = color.z;
-        color.w != undefined && (this._color.w = color.w);
-        if (this._isReady) {
-            this._handler.setRgbaArr(this._handlerIndex, color);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
-        }
+        this.setColor(color.x, color.y, color.z, color.w);
     }
 
     /**
@@ -302,11 +298,13 @@ class BaseBillboard {
      * @param {boolean} visibility - Visibility flag.
      */
     setVisibility(visibility) {
-        this._visibility = visibility;
-        if (this._isReady) {
-            this._handler.setVisibility(this._handlerIndex, visibility);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (visibility !== this._visibility) {
+            this._visibility = visibility;
+            if (this._isReady) {
+                this._handler.setVisibility(this._handlerIndex, visibility);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
         }
     }
 
@@ -330,10 +328,10 @@ class BaseBillboard {
         this._alignedAxis.x = x;
         this._alignedAxis.y = y;
         this._alignedAxis.z = z;
-        if (this._isReady) {
-            this._handler.setAlignedAxisArr(this._handlerIndex, this._alignedAxis);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setAlignedAxisArr(this._handlerIndex, this._alignedAxis);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
@@ -343,14 +341,7 @@ class BaseBillboard {
      * @param {math.Vecto3} alignedAxis - Vector to align.
      */
     setAlignedAxis3v(alignedAxis) {
-        this._alignedAxis.x = alignedAxis.x;
-        this._alignedAxis.y = alignedAxis.y;
-        this._alignedAxis.z = alignedAxis.z;
-        if (this._isReady) {
-            this._handler.setAlignedAxisArr(this._handlerIndex, alignedAxis);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
-        }
+        this.setAlignedAxis(alignedAxis.x, alignedAxis.y, alignedAxis.z);
     }
 
     /**
@@ -377,12 +368,12 @@ class BaseBillboard {
      * @param {Vec3} color - Picking color.
      */
     setPickingColor3v(color) {
-        if (this._isReady) {
-            this._handler.setPickingColorArr(this._handlerIndex, color);
-        } else if (this._lockId !== -1) {
-            this._lockId = -2;
+        if (this._isReady) {
+            this._handler.setPickingColorArr(this._handlerIndex, color);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 }
 
-export { BaseBillboard };
+export { BaseBillboard };

package/src/og/entity/BillboardHandler.js

@@ -6,6 +6,7 @@
 
 import * as shaders from "../shaders/billboard.js";
 import { concatTypedArrays, spliceTypedArray } from "../utils/shared.js";
+import { LOCK_UPDATE, LOCK_FREE } from "./LabelWorker.js";
 
 const PICKINGCOLOR_BUFFER = 0;
 const POSITION_BUFFER = 1;
@@ -80,6 +81,10 @@ class BillboardHandler {
         this.__staticId = BillboardHandler._staticCounter++;
     }
 
+    isEqual(handler) {
+        return handler && (handler.__staticId === this.__staticId);
+    }
+
     static get _staticCounter() {
         if (!this._counter && this._counter !== 0) {
             this._counter = 0;
@@ -126,9 +131,9 @@ class BillboardHandler {
         while (i--) {
             var bi = this._billboards[i];
             bi._handlerIndex = -1;
-            bi._handler = null;
-            bi._isReady = false;
-            bi._lockId = -1;
+            bi._handler = null;
+            bi._isReady = false;
+            bi._lockId = LOCK_FREE;
         }
         this._billboards.length = 0;
         this._billboards = [];
@@ -202,7 +207,7 @@ class BillboardHandler {
     }
 
     add(billboard) {
-        if (billboard._handlerIndex == -1) {
+        if (billboard._handlerIndex == -1) {
             billboard._isReady = true;
             billboard._handler = this;
             billboard._handlerIndex = this._billboards.length;
@@ -625,14 +630,16 @@ class BillboardHandler {
         this.refresh();
 
         billboard._handlerIndex = -1;
-        billboard._handler = null;
-        billboard._isReady = false;
-        billboard._lockId = -1;
+        billboard._handler = null;
+        billboard._isReady = false;
+        billboard._lockId = LOCK_FREE;
     }
 
     remove(billboard) {
         if (billboard._isReady && this.__staticId == billboard._handler.__staticId) {
             this._removeBillboard(billboard);
+        } else {
+            billboard._handler = null;
         }
     }
 
@@ -1042,4 +1049,4 @@ class BillboardHandler {
     }
 }
 
-export { BillboardHandler };
+export { BillboardHandler };