@openglobus/og 0.11.6 → 0.12.1

package/css/og.css

@@ -50,7 +50,7 @@
     height: 19px;
     position: absolute;
     background-color: rgba(22, 76, 155, 1) !important;
-    z-index: 12000;
+    z-index: 35000;
 }
 
 .ogAttribution {
@@ -153,7 +153,7 @@
     right: 0px;
     width: 17em;
     background-color: rgba(22, 76, 155, 0.4);
-    z-index: 5000;
+    z-index: 25000;
     padding: 0 0 0 10px;
     font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
     border-radius: 2px;
@@ -261,6 +261,8 @@
     text-shadow: 0px 0px 3px #616161;
     padding: 10px;
     pointer-events: none;
+    transform: scale(1.0);
+    transform-origin: top left;
 }
 
     .og-debug-info .og-watch-line {
@@ -448,6 +450,7 @@
 
     .og-lighing .og-value {
         float: left;
+	width: 50px;
     }
 
     .og-lighing #layers {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.11.6",
+  "version": "0.12.1",
   "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.8",
     "@rollup/plugin-json": "^4.1.0",
-    "@types/jest": "^27.0.2",
-    "eslint": "^8.2.0",
+    "@types/jest": "^27.4.0",
+    "eslint": "^8.6.0",
     "jaguarjs-jsdoc": "^1.1.0",
-    "jest": "^27.3.1",
+    "jest": "^27.4.7",
     "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.7",
     "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.5",
+    "prettier": "^2.5.1",
+    "rollup": "^2.63.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
-    "typescript": "^4.4.4"
+    "typescript": "^4.5.4"
   },
   "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,10 +60,13 @@ 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
+ * @param {Number} [options.loadingBatchSize=12] - 
  */
 
 class Globe {
@@ -95,7 +98,16 @@ class Globe {
         }
 
         this.div.appendChild(this._canvas);
-        this.div.classList.add("ogViewport");
+        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();
@@ -117,7 +129,8 @@ class Globe {
          * @type {Renderer}
          */
         this.renderer = new Renderer(
-            new Handler(_canvasId, {
+            new Handler(_canvasId, {
+                pixelRatio: window.devicePixelRatio + 0.15,
                 context: {
                     alpha: false,
                     antialias: false,
@@ -159,16 +172,18 @@ class Globe {
             // TODO:
         } else {
             this.planet = new Planet({
-                name: this._planetName,
+                name: this._planetName,
+                frustums: options.frustums,
                 ellipsoid: options.ellipsoid,
                 maxGridSize: options.maxGridSize,
                 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
+                minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
+                loadingBatchSize: options.loadingBatchSize
             });
         }
 
@@ -190,8 +205,8 @@ class Globe {
                 options.useEarthNavigation
                     ? new EarthNavigation()
                     : new MouseNavigation({
-                          minSlope: options.minSlope
-                      }),
+                        minSlope: options.minSlope
+                    }),
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),

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

@@ -98,26 +98,26 @@ class Camera {
          * @protected
          * @type {Vec3}
          */
-        this._u = new Vec3(0.0, 1.0, 0.0); // up x n
+        this._r = new Vec3(1.0, 0.0, 0.0); // up x n
 
         /**
          * Camera up vector.
          * @protected
          * @type {Vec3}
          */
-        this._v = new Vec3(1.0, 0.0, 0.0); // n x u - UP
+        this._u = new Vec3(0.0, 1.0, 0.0); // n x u - UP
 
         /**
          * Camera forward vector.
          * @protected
          * @type {Vec3}
          */
-        this._n = new Vec3(0.0, 0.0, 1.0); // eye - look - FORWARD
+        this._b = new Vec3(0.0, 0.0, 1.0); // eye - look - FORWARD
 
         // Previous frame values
-        this._pu = this._u.clone();
-        this._pv = this._v.clone();
-        this._pn = this._n.clone();
+        this._pu = this._r.clone();
+        this._pv = this._u.clone();
+        this._pn = this._b.clone();
         this._peye = this.eye.clone();
         this.isMoved = false;
 
@@ -173,9 +173,9 @@ class Camera {
     }
 
     checkMoveEnd() {
-        var u = this._u,
-            v = this._v,
-            n = this._n,
+        var u = this._r,
+            v = this._u,
+            n = this._b,
             eye = this.eye;
 
         if (this._peye.equal(eye) && this._pu.equal(u) && this._pv.equal(v) && this._pn.equal(n)) {
@@ -216,27 +216,27 @@ class Camera {
     }
 
     getUp() {
-        return this._v.clone();
+        return this._u.clone();
     }
 
     getDown() {
-        return this._v.negateTo();
+        return this._u.negateTo();
     }
 
     getRight() {
-        return this._u.clone();
+        return this._r.clone();
     }
 
     getLeft() {
-        return this._u.negateTo();
+        return this._r.negateTo();
     }
 
     getForward() {
-        return this._n.negateTo();
+        return this._b.negateTo();
     }
 
     getBackward() {
-        return this._n.clone();
+        return this._b.clone();
     }
 
     /**
@@ -245,9 +245,9 @@ class Camera {
      * @virtual
      */
     update() {
-        var u = this._u,
-            v = this._v,
-            n = this._n,
+        var u = this._r,
+            v = this._u,
+            n = this._b,
             eye = this.eye;
 
         Vec3.doubleToTwoFloat32Array(eye, this.eyeHigh, this.eyeLow);
@@ -321,12 +321,7 @@ class Camera {
         this._tanViewAngle_hradOneByHeight =
             this._tanViewAngle_hrad * this.renderer.handler._oneByHeight;
         var c = this.renderer.handler.canvas;
-        this._projSizeConst =
-            Math.min(
-                c.clientWidth < 256 ? 256 : c.clientWidth,
-                c.clientHeight < 256 ? 256 : c.clientHeight
-            ) /
-            (angle * math.RADIANS);
+        this._projSizeConst = Math.min(c.clientWidth < 256 ? 256 : c.clientWidth, c.clientHeight < 256 ? 256 : c.clientHeight) / (angle * math.RADIANS);
         for (let i = 0, len = this.frustums.length; i < len; i++) {
             this.frustums[i].setProjectionMatrix(
                 angle,
@@ -368,15 +363,15 @@ class Camera {
         this.eye.x = eye.x;
         this.eye.y = eye.y;
         this.eye.z = eye.z;
-        look = look || this._n;
-        up = up || this._v;
-        this._n.x = eye.x - look.x;
-        this._n.y = eye.y - look.y;
-        this._n.z = eye.z - look.z;
-        this._u.copy(up.cross(this._n));
-        this._n.normalize();
-        this._u.normalize();
-        this._v.copy(this._n.cross(this._u));
+        look = look || this._b;
+        up = up || this._u;
+        this._b.x = eye.x - look.x;
+        this._b.y = eye.y - look.y;
+        this._b.z = eye.z - look.z;
+        this._r.copy(up.cross(this._b));
+        this._b.normalize();
+        this._r.normalize();
+        this._u.copy(this._b.cross(this._r));
         return this;
     }
 
@@ -384,14 +379,14 @@ class Camera {
      * Sets camera look point
      * @public
      * @param {Vec3} look - Look point
-     * @param {Vec3} [up] - Camera up vector otherwise camera current up vector(this._v)
+     * @param {Vec3} [up] - Camera up vector otherwise camera current up vector(this._u)
      */
     look(look, up) {
-        this._n.set(this.eye.x - look.x, this.eye.y - look.y, this.eye.z - look.z);
-        this._u.copy((up || this._v).cross(this._n));
-        this._n.normalize();
-        this._u.normalize();
-        this._v.copy(this._n.cross(this._u));
+        this._b.set(this.eye.x - look.x, this.eye.y - look.y, this.eye.z - look.z);
+        this._r.copy((up || this._u).cross(this._b));
+        this._b.normalize();
+        this._r.normalize();
+        this._u.copy(this._b.cross(this._r));
     }
 
     /**
@@ -402,9 +397,9 @@ class Camera {
      * @param {number} dn - delta Z
      */
     slide(du, dv, dn) {
-        this.eye.x += du * this._u.x + dv * this._v.x + dn * this._n.x;
-        this.eye.y += du * this._u.y + dv * this._v.y + dn * this._n.y;
-        this.eye.z += du * this._u.z + dv * this._v.z + dn * this._n.z;
+        this.eye.x += du * this._r.x + dv * this._u.x + dn * this._b.x;
+        this.eye.y += du * this._r.y + dv * this._u.y + dn * this._b.y;
+        this.eye.z += du * this._r.z + dv * this._u.z + dn * this._b.z;
     }
 
     /**
@@ -415,16 +410,16 @@ class Camera {
     roll(angle) {
         var cs = Math.cos(math.RADIANS * angle);
         var sn = Math.sin(math.RADIANS * angle);
-        var t = this._u.clone();
-        this._u.set(
-            cs * t.x - sn * this._v.x,
-            cs * t.y - sn * this._v.y,
-            cs * t.z - sn * this._v.z
+        var t = this._r.clone();
+        this._r.set(
+            cs * t.x - sn * this._u.x,
+            cs * t.y - sn * this._u.y,
+            cs * t.z - sn * this._u.z
         );
-        this._v.set(
-            sn * t.x + cs * this._v.x,
-            sn * t.y + cs * this._v.y,
-            sn * t.z + cs * this._v.z
+        this._u.set(
+            sn * t.x + cs * this._u.x,
+            sn * t.y + cs * this._u.y,
+            sn * t.z + cs * this._u.z
         );
     }
 
@@ -436,16 +431,16 @@ class Camera {
     pitch(angle) {
         var cs = Math.cos(math.RADIANS * angle);
         var sn = Math.sin(math.RADIANS * angle);
-        var t = this._n.clone();
-        this._n.set(
-            cs * t.x - sn * this._v.x,
-            cs * t.y - sn * this._v.y,
-            cs * t.z - sn * this._v.z
+        var t = this._b.clone();
+        this._b.set(
+            cs * t.x - sn * this._u.x,
+            cs * t.y - sn * this._u.y,
+            cs * t.z - sn * this._u.z
         );
-        this._v.set(
-            sn * t.x + cs * this._v.x,
-            sn * t.y + cs * this._v.y,
-            sn * t.z + cs * this._v.z
+        this._u.set(
+            sn * t.x + cs * this._u.x,
+            sn * t.y + cs * this._u.y,
+            sn * t.z + cs * this._u.z
         );
     }
 
@@ -457,16 +452,16 @@ class Camera {
     yaw(angle) {
         var cs = Math.cos(math.RADIANS * angle);
         var sn = Math.sin(math.RADIANS * angle);
-        var t = this._u.clone();
-        this._u.set(
-            cs * t.x - sn * this._n.x,
-            cs * t.y - sn * this._n.y,
-            cs * t.z - sn * this._n.z
+        var t = this._r.clone();
+        this._r.set(
+            cs * t.x - sn * this._b.x,
+            cs * t.y - sn * this._b.y,
+            cs * t.z - sn * this._b.z
         );
-        this._n.set(
-            sn * t.x + cs * this._n.x,
-            sn * t.y + cs * this._n.y,
-            sn * t.z + cs * this._n.z
+        this._b.set(
+            sn * t.x + cs * this._b.x,
+            sn * t.y + cs * this._b.y,
+            sn * t.z + cs * this._b.z
         );
     }
 
@@ -485,12 +480,8 @@ class Camera {
         var px = (x - w) / w,
             py = -(y - h) / h;
 
-        var world1 = this.frustums[0]._inverseProjectionViewMatrix
-                .mulVec4(new Vec4(px, py, -1.0, 1.0))
-                .affinity(),
-            world2 = this.frustums[0]._inverseProjectionViewMatrix
-                .mulVec4(new Vec4(px, py, 0.0, 1.0))
-                .affinity();
+        var world1 = this.frustums[0]._inverseProjectionViewMatrix.mulVec4(new Vec4(px, py, -1.0, 1.0)).affinity(),
+            world2 = this.frustums[0]._inverseProjectionViewMatrix.mulVec4(new Vec4(px, py, 0.0, 1.0)).affinity();
 
         return world2.subA(world1).toVec3().normalize();
     }
@@ -520,16 +511,16 @@ class Camera {
         center = center || Vec3.ZERO;
         up = up || Vec3.UP;
 
-        var rot = new Mat4().setRotation(isArc ? this._v : up, angle);
+        var rot = new Mat4().setRotation(isArc ? this._u : up, angle);
         var tr = new Mat4().setIdentity().translate(center);
         var ntr = new Mat4().setIdentity().translate(center.negateTo());
 
         var trm = tr.mul(rot).mul(ntr);
 
         this.eye = trm.mulVec3(this.eye);
-        this._v = rot.mulVec3(this._v).normalize();
         this._u = rot.mulVec3(this._u).normalize();
-        this._n = rot.mulVec3(this._n).normalize();
+        this._r = rot.mulVec3(this._r).normalize();
+        this._b = rot.mulVec3(this._b).normalize();
     }
 
     /**
@@ -551,7 +542,7 @@ class Camera {
      * @param {Vec3} center - Point that the camera rotates around.
      */
     rotateVertical(angle, center) {
-        this.rotateAround(angle, false, center, this._u);
+        this.rotateAround(angle, false, center, this._r);
     }
 
     /**

package/src/og/camera/PlanetCamera.js

@@ -36,20 +36,15 @@ class PlanetCamera extends Camera {
      * @param {Object} [options] - Planet camera options:
      */
     constructor(planet, options) {
-        super(
-            planet.renderer,
-            Object.assign(
-                {},
-                {
-                    frustums: /*[[100, 10000000]]*/ [
-                        [1, 100 + 0.075],
-                        [100, 1000 + 0.075],
-                        [1000, 1e6 + 10000],
-                        [1e6, 1e9]
-                    ] //[[1, 1e3 + 100], [1e3, 1e6 + 10000], [1e6, 1e9]]*/
-                },
-                options
-            )
+        super(planet.renderer, {
+            frustums: [
+                [1, 100 + 0.075],
+                [100, 1000 + 0.075],
+                [1000, 1e6 + 10000],
+                [1e6, 1e9]
+            ], //[[1, 1e3 + 100], [1e3, 1e6 + 10000], [1e6, 1e9]]*/
+            ...options
+        }
         );
         /**
          * Assigned camera's planet.
@@ -144,7 +139,7 @@ class PlanetCamera extends Camera {
         super.update();
         this.updateGeodeticPosition();
         this.eyeNorm = this.eye.normal();
-        this.slope = this._n.dot(this.eyeNorm);
+        this.slope = this._b.dot(this.eyeNorm);
         this.events.dispatch(this.events.viewchange, this);
     }
 
@@ -387,8 +382,8 @@ class PlanetCamera extends Camera {
         var ground_a = this.planet.ellipsoid.lonLatToCartesian(
             new LonLat(this._lonLat.lon, this._lonLat.lat)
         );
-        var v_a = this._v,
-            n_a = this._n;
+        var v_a = this._u,
+            n_a = this._b;
 
         var lonlat_b = this.planet.ellipsoid.cartesianToLonLat(cartesian);
         var up_b = up || Vec3.UP;
@@ -543,18 +538,18 @@ class PlanetCamera extends Camera {
     }
 
     rotateVertical(angle, center, minSlope = 0) {
-        var rot = new Mat4().setRotation(this._u, angle);
+        var rot = new Mat4().setRotation(this._r, angle);
         var tr = new Mat4().setIdentity().translate(center);
         var ntr = new Mat4().setIdentity().translate(center.negateTo());
         var trm = tr.mul(rot).mul(ntr);
 
         let eye = trm.mulVec3(this.eye);
-        let v = rot.mulVec3(this._v).normalize();
         let u = rot.mulVec3(this._u).normalize();
-        let n = rot.mulVec3(this._n).normalize();
+        let r = rot.mulVec3(this._r).normalize();
+        let b = rot.mulVec3(this._b).normalize();
 
         let eyeNorm = eye.normal();
-        let slope = n.dot(eyeNorm);
+        let slope = b.dot(eyeNorm);
 
         if (minSlope) {
             let dSlope = slope - this.slope;
@@ -562,20 +557,20 @@ class PlanetCamera extends Camera {
             if (slope < minSlope && dSlope < 0) return;
 
             if (
-                (slope > 0.1 && v.dot(eyeNorm) > 0) ||
+                (slope > 0.1 && u.dot(eyeNorm) > 0) ||
                 this.slope <= 0.1 ||
-                this._v.dot(this.eye.normal()) <= 0.0
+                this._u.dot(this.eye.normal()) <= 0.0
             ) {
                 this.eye = eye;
-                this._v = v;
                 this._u = u;
-                this._n = n;
+                this._r = r;
+                this._b = b;
             }
         } else {
             this.eye = eye;
-            this._v = v;
             this._u = u;
-            this._n = n;
+            this._r = r;
+            this._b = b;
         }
     }
 
@@ -592,9 +587,9 @@ class PlanetCamera extends Camera {
             this.planet._normalMapCreator.lock(this._keyLock);
 
             this.eye = this._framesArr[c].eye;
-            this._u = this._framesArr[c].u;
-            this._v = this._framesArr[c].v;
-            this._n = this._framesArr[c].n;
+            this._r = this._framesArr[c].u;
+            this._u = this._framesArr[c].v;
+            this._b = this._framesArr[c].n;
 
             if (this._frameCallback) {
                 this._frameCallback();
@@ -636,15 +631,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/DebugInfo.js

@@ -93,8 +93,8 @@ class DebugInfo extends Control {
                     frame: () => p.camera.slope.toFixed(3)
                 },
                 {
-                    label: "lodRatio",
-                    frame: () => p._lodRatio.toFixed(3)
+                    label: "lodSize",
+                    frame: () => Math.round(p.lodSize)
                 },
                 {
                     label: "deltaTime/FPS",