@openglobus/og 0.13.12 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openglobus/og",
-  "version": "0.13.12",
+  "version": "0.14.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"
@@ -81,4 +81,4 @@
     "globe",
     "og"
   ]
-}
+}

package/src/og/Globe.js

@@ -20,6 +20,7 @@ import { isEmpty } from "./utils/shared.js";
 import { Handler } from "./webgl/Handler.js";
 import { createColorRGB } from "./utils/shared.js";
 import { Vec3 } from "./math/Vec3.js";
+import { SimpleSkyBackground } from "./control/SimpleSkyBackground.js";
 
 /** @const {string} */
 const CANVAS_ID_PREFIX = "globus_viewport_";
@@ -70,6 +71,7 @@ const PLANET_NAME_PREFIX = "globus_planet_";
  * @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] -
+ * @param {Number} [options.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
  */
 
 class Globe {
@@ -128,8 +130,7 @@ class Globe {
                 context: {
                     alpha: false,
                     antialias: false,
-                    powerPreference: "high-performance",
-                    premultipliedAlpha: true
+                    premultipliedAlpha: false
                 }
             }), {
                 autoActivate: false,
@@ -158,6 +159,13 @@ class Globe {
          */
         this._planetName = options.name ? options.name : PLANET_NAME_PREFIX + Globe._staticCounter;
 
+        /**
+         * quad tree type.
+         * @private
+         * @type {Number}
+         */
+        this._quadTreeType = options.quadTreeType;
+
         if (options.atmosphere) {
             /**
              * Render node renders a planet.
@@ -178,7 +186,8 @@ class Globe {
                 maxEqualZoomAltitude: options.maxEqualZoomAltitude,
                 minEqualZoomAltitude: options.minEqualZoomAltitude,
                 minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
-                loadingBatchSize: options.loadingBatchSize
+                quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
+                maxLoadingRequests: options.maxLoadingRequests
             });
         }
 
@@ -212,7 +221,8 @@ class Globe {
                 new TouchNavigation(),
                 new EarthCoordinates(),
                 new ScaleControl(),
-                new CompassButton(options)
+                new CompassButton(options),
+                new SimpleSkyBackground()
             ]);
         }
 

package/src/og/camera/Camera.js

@@ -15,7 +15,7 @@ import { Mat4 } from "../math/Mat4.js";
  * @param {Renderer} [renderer] - Renderer uses the camera instance.
  * @param {Object} [options] - Camera options:
  * @param {Object} [options.name] - Camera name.
- * @param {number} [options.viewAngle=38] - Camera angle of view. Default is 30.0
+ * @param {number} [options.viewAngle=47] - Camera angle of view. Default is 47.0
  * @param {number} [options.near=1] - Camera near plane distance. Default is 1.0
  * @param {number} [options.far=og.math.MAX] - Camera far plane distance. Deafult is og.math.MAX
  * @param {Vec3} [options.eye=[0,0,0]] - Camera eye position. Default (0,0,0)
@@ -77,7 +77,7 @@ class Camera {
          * @protected
          * @type {Number}
          */
-        this._viewAngle = options.viewAngle || 38.0;
+        this._viewAngle = options.viewAngle || 47.0;
 
         /**
          * Camera normal matrix.
@@ -119,7 +119,7 @@ class Camera {
         this._pv = this._u.clone();
         this._pn = this._b.clone();
         this._peye = this.eye.clone();
-        this.isMoved = false;
+        this.isMoving = false;
 
         this._tanViewAngle_hrad = 0.0;
         this._tanViewAngle_hradOneByHeight = 0.0;
@@ -179,12 +179,12 @@ class Camera {
             eye = this.eye;
 
         if (this._peye.equal(eye) && this._pu.equal(u) && this._pv.equal(v) && this._pn.equal(n)) {
-            if (this.isMoved) {
+            if (this.isMoving) {
                 this.events.dispatch(this.events.moveend, this);
             }
-            this.isMoved = false;
+            this.isMoving = false;
         } else {
-            this.isMoved = true;
+            this.isMoving = true;
         }
 
         this._pu.copy(u);
@@ -198,7 +198,7 @@ class Camera {
      * @public
      * @param {Renderer} renderer - OpenGlobus renderer object.
      * @param {Object} [options] - Camera options:
-     * @param {number} [options.viewAngle] - Camera angle of view. Default is 30.0
+     * @param {number} [options.viewAngle] - Camera angle of view.
      * @param {number} [options.near] - Camera near plane distance. Default is 1.0
      * @param {number} [options.far] - Camera far plane distance. Deafult is og.math.MAX
      * @param {Vec3} [options.eye] - Camera eye position. Default (0,0,0)

package/src/og/camera/PlanetCamera.js

@@ -21,7 +21,7 @@ import { Mat4 } from "../math/Mat4.js";
  * @param {RenderNode} planet - Planet render node.
  * @param {Object} [options] - Planet camera options:
  * @param {Object} [options.name] - Camera name.
- * @param {number} [options.viewAngle=37] - Camera angle of view. Default is 35.0
+ * @param {number} [options.viewAngle] - Camera angle of view.
  * @param {number} [options.near] - Camera near plane distance. Default is 1.0
  * @param {number} [options.far] - Camera far plane distance. Deafult is og.math.MAX
  * @param {number} [options.minAltitude] - Minimal altitude for the camera. Deafult is 5

package/src/og/control/LayerSwitcher.js

@@ -7,6 +7,7 @@
 import { Control } from "./Control.js";
 import { elementFactory, appendChildren, toggleText, enableElmovement } from "./UIhelpers.js";
 import { compose } from "../utils/functionComposition.js"
+
 /**
  * Advanced :) layer switcher, includes base layers, overlays, geo images etc. groups.
  * Double click for zoom, drag-and-drop to change zIndex
@@ -46,14 +47,14 @@ class LayerSwitcher extends Control {
 
     }
 
-    setupSwitcher () {
+    setupSwitcher() {
         const myData = this.getRecords(this.planet)
         const { $mainContainer } = this.buildBasicDOM()
         this.buildRecords(myData, $mainContainer, 0)
-        
+
     }
-   
-    onactivate() { 
+
+    onactivate() {
         this.setupSwitcher()
     }
 
@@ -87,9 +88,8 @@ class LayerSwitcher extends Control {
         const classifyObject = (object) => {
             let r = object.isBaseLayer()
             if (r === true || r === false) {
-                return r === true ? 'BaseLayers' : 'Overlays'
-            }
-            else {
+                return r === true ? 'Base Layers' : 'Overlays'
+            } else {
                 return 'Terrain Providers'
             }
         }
@@ -117,8 +117,10 @@ class LayerSwitcher extends Control {
     // OUTPOUT TERRAINS, BASELAYERS, OVERLAYS
     planetDataReturn(planet) {
 
-        const { collectTerrains, collectLayers, pickBaseLayers, pickOverlays,
-            sortByZIndex, serializeZIndices, normalizeOverlay } = this.planetDataBasic()
+        const {
+            collectTerrains, collectLayers, pickBaseLayers, pickOverlays,
+            sortByZIndex, serializeZIndices, normalizeOverlay
+        } = this.planetDataBasic()
 
         const terrains = collectTerrains(planet)
 
@@ -167,26 +169,25 @@ class LayerSwitcher extends Control {
     addNewLayer(layer) {
         // Put the data(layer) to the appropriate recordsStructure section and run the build function
         const $dialog = document.getElementById('og-layer-switcher-dialog')
-        if($dialog){
-        const { classifyObject } = this.planetDataBasic()
-        const targets = [...document.body.querySelectorAll('.og-layer-switcher-record.og-depth-0 > details')]
-        const type = classifyObject(layer)
-        const object = this.recordsStructure().data.filter(x => x.name == type)
-        const index = this.recordsStructure().data.findIndex(x => x.name == type)
-        object[0].data = [layer]
-        this.buildRecords(object[0], targets[index], 1, true)
+        if ($dialog) {
+            const { classifyObject } = this.planetDataBasic()
+            const targets = [...document.body.querySelectorAll('.og-layer-switcher-record.og-depth-0 > details')]
+            const type = classifyObject(layer)
+            const object = this.recordsStructure().data.filter(x => x.name == type)
+            const index = this.recordsStructure().data.findIndex(x => x.name == type)
+            object[0].data = [layer]
+            this.buildRecords(object[0], targets[index], 1, true)
         }
     }
 
     removeLayer(layer) {
-        // TODO...Haven't tested it yet 
         let id = layer.getID()
-        let el = document.body.querySelector('#' + id + ".og-layer-switcher-record.og-depth-1")
-        el.remove()
-
-        if (layer.displayInLayerSwitcher) { // check necessary, or else error with layers not in switcher - e.g rulerScene layers.
-            layer._removeCallback();
-            layer._removeCallback = null
+        let arr = document.body.querySelectorAll(`.og-layer-switcher-record.og-depth-1`)
+        for (let i = 0; i < arr.length; i++) {
+            if (arr[i].id == id) {
+                arr[i].remove();
+                break;
+            }
         }
     }
 
@@ -205,14 +206,26 @@ class LayerSwitcher extends Control {
         // Basic DOM creation
         const $menuBtn = elementFactory('div', { id: 'og-layer-switcher-menu-btn', class: 'og-menu-btn og-OFF' },
             elementFactory('div', { id: 'og-layer-switcher-menu-icon', class: 'og-icon-holder' }))
-        const $dialog = elementFactory('div', { class: 'og-layer-switcher-dialog og-dialog og-not-visible', id: 'og-layer-switcher-dialog' })
+        const $dialog = elementFactory('div', {
+            class: 'og-layer-switcher-dialog og-dialog og-not-visible',
+            id: 'og-layer-switcher-dialog'
+        })
         const $header = elementFactory('div', { class: 'og-layer-switcher-dialog-header' })
-        const $header_close = elementFactory('div', { id: 'og-layer-switcher-dialog-close-btn', class: 'og-dialog-header-btn og-OFF' },
+        const $header_close = elementFactory('div', {
+                id: 'og-layer-switcher-dialog-close-btn',
+                class: 'og-dialog-header-btn og-OFF'
+            },
             elementFactory('div', { class: 'og-icon-holder' }))
-        const $headerMinMax = elementFactory('div', { id: 'og-layer-switcher-dialog-minMax-btn', class: 'og-dialog-header-btn og-OFF' },
+        const $headerMinMax = elementFactory('div', {
+                id: 'og-layer-switcher-dialog-minMax-btn',
+                class: 'og-dialog-header-btn og-OFF'
+            },
             elementFactory('div', { class: 'og-icon-holder' }))
         const $headerTitle = elementFactory('span', { class: 'og-dialog-header-title' }, 'Layer Switcher')
-        const $headerPin = elementFactory('div', { id: 'og-layer-switcher-dialog-pin-btn', class: 'og-dialog-header-btn og-OFF' },
+        const $headerPin = elementFactory('div', {
+                id: 'og-layer-switcher-dialog-pin-btn',
+                class: 'og-dialog-header-btn og-OFF'
+            },
             elementFactory('div', { class: 'og-icon-holder' }))
         const $mainContainer = elementFactory('div', { class: 'og-layer-switcher-main-container' })
 
@@ -234,9 +247,13 @@ class LayerSwitcher extends Control {
 
         // LISTENERS
         const whereClick = (e, wrapper, menuBtn) => {
-            if (wrapper.contains(e.target)) { return 'inside' }
-            else if (menuBtn.contains(e.target)) { return 'on-btn' }
-            else { return 'outside' }
+            if (wrapper.contains(e.target)) {
+                return 'inside'
+            } else if (menuBtn.contains(e.target)) {
+                return 'on-btn'
+            } else {
+                return 'outside'
+            }
         }
 
         var whereClickHandler = null

package/src/og/control/MouseNavigation.js

@@ -356,7 +356,7 @@ class MouseNavigation extends Control {
 
         if (this.pointOnEarth && this.renderer.events.mouseState.moving) {
             this.renderer.controlsBag.scaleRot = 1.0;
-            var l = (0.5 / cam.eye.distance(this.pointOnEarth)) * cam._lonLat.height * math.RADIANS;
+            var l = (0.5 / cam.eye.distance(this.pointOnEarth)) * (cam._lonLat.height < 5.0 ? 5.0 : cam._lonLat.height) * math.RADIANS;
             if (l > 0.007) l = 0.007;
             cam.rotateHorizontal(l * (e.x - e.prev_x), false, this.pointOnEarth, this.earthUp);
 
@@ -457,4 +457,4 @@ class MouseNavigation extends Control {
     }
 }
 
-export { MouseNavigation };
+export { MouseNavigation };

package/src/og/control/ScaleControl.js

@@ -7,6 +7,7 @@
 import { Control } from "./Control.js";
 import { RADIANS } from "../math.js";
 import { binarySearch, parseHTML } from "../utils/shared.js";
+import { Vec3 } from "../math/Vec3.js";
 
 const scale = [
     1, 2, 3, 5, 10, 20, 30, 50, 100, 200, 300, 500, 1e3, 2e3, 3e3, 5e3, 10e3, 20e3, 30e3, 50e3,
@@ -38,6 +39,8 @@ class ScaleControl extends Control {
 
         this._minWidth = 100;
         this._maxWidth = 150;
+
+        this._isCenter = options.isCenter || false;
     }
 
     _renderTemplate() {
@@ -51,21 +54,38 @@ class ScaleControl extends Control {
 
         this.renderer.div.appendChild(this.el);
 
-        this.renderer.events.on("draw", (e) => {
-            if (e.events.pointerEvent()) {
-                this._draw();
-            }
-        });
+        if (this._isCenter) {
+            this.renderer.activeCamera.events.on("moveend", (e) => {
+                this._drawScreen(this.planet.renderer.handler.getCenter());
+            });
 
-        this.renderer.activeCamera.events.on("moveend", (e) => {
-            this._draw(e);
-        });
+            this.planet.terrain.events.on("loadend", (e) => {
+                this._drawScreen(this.planet.renderer.handler.getCenter());
+            });
+        } else {
+            this.renderer.events.on("mousemove", (e) => {
+                if (!e.leftButtonHold && !e.rightButtonHold) {
+                    this._drawScreen(e);
+                }
+            });
+
+            this.renderer.activeCamera.events.on("moveend", (e) => {
+                let ms = this.renderer.events.mouseState;
+                if (!ms.leftButtonHold && !ms.rightButtonHold) {
+                    this._drawScreen(ms);
+                }
+            });
+        }
     }
 
-    _draw(e) {
+    _drawScreen(px) {
         let cam = this.renderer.activeCamera;
-        let s0 = this.planet.renderer.handler.getCenter();
+        let s0 = px;
         let dist = this.planet.getDistanceFromPixel(s0);
+        if (dist === 0) {
+            s0 = cam.project(Vec3.ZERO);
+            dist = this.planet.getDistanceFromPixel(s0);
+        }
         let p0 = cam.getForward().scaleTo(dist).addA(cam.eye);
         let tempSize = dist * Math.tan(cam._viewAngle * RADIANS);
         let p1 = p0.add(cam.getRight().scaleTo(tempSize));

package/src/og/control/SimpleSkyBackground.js

@@ -0,0 +1,184 @@
+/**
+ * @module og/control/SimpleSkyBackground
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Program } from '../webgl/Program.js';
+
+/**
+ * Frame per second(FPS) display control.
+ * @class
+ * @extends {Control}
+ * @param {Object} [options] - Control options.
+ */
+class SimpleSkyBackground extends Control {
+    constructor(options) {
+        super({
+            name: "SimpleSkyBackground",
+            ...options
+        });
+    }
+
+    oninit() {
+        this.renderer.handler.addProgram(simpleSkyBackgroundShader());
+        this.planet.events.on("draw", this._drawBackground, this);
+    }
+
+    onactivate() {
+        super.onactivate();
+        this.planet.events.on("draw", this._drawBackground, this);
+    }
+
+    ondeactivate() {
+        super.ondeactivate();
+        this.planet.events.off("draw", this._drawBackground);
+    }
+
+    _drawBackground() {
+        let h = this.renderer.handler;
+        let sh = h.programs.simpleSkyBackground, p = sh._program, shu = p.uniforms, gl = h.gl;
+        let cam = this.renderer.activeCamera;
+
+        gl.disable(gl.DEPTH_TEST);
+
+        sh.activate();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.renderer._screenFrameCornersBuffer);
+        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
+
+        gl.uniform3fv(shu.camPos, [cam.eye.x, cam.eye.y, cam.eye.z]);
+        gl.uniform2fv(shu.iResolution, [h.getWidth(), h.getHeight()]);
+        gl.uniform1f(shu.fov, cam.getViewAngle());
+        gl.uniform1f(shu.earthRadius, this.planet.ellipsoid.getPolarSize() + 1);
+
+        gl.uniformMatrix4fv(shu.viewMatrix, false, cam._viewMatrix._m);
+
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+        gl.enable(gl.DEPTH_TEST);
+    }
+}
+
+export function simpleSkyBackground(options) {
+    return new SimpleSkyBackground(options);
+}
+
+function simpleSkyBackgroundShader() {
+    return new Program("simpleSkyBackground", {
+        uniforms: {
+            iResolution: "vec2", fov: "float", camPos: "vec3", earthRadius: "float", //projectionMatrix: "mat4",
+            viewMatrix: "mat4"
+        }, attributes: {
+            corners: "vec3"
+        }, vertexShader: `attribute vec2 corners;
+            
+            varying vec2 tc;
+            
+            void main(void) {
+                gl_Position = vec4(corners, 0.0, 1.0);
+                tc = corners * 0.5 + 0.5;
+            }`, fragmentShader: `precision highp float;
+            
+            #define MAX 10e10
+            #define PI 3.14159265359
+            #define rad(x) x * PI / 180.
+            #define ZERO vec3(0.0)
+           
+            const vec3 START_COLOR = vec3(1.0);
+            const vec3 END_COLOR = vec3(0.0, 153.0/255.0, 221.0/255.0);
+           
+            #define RED vec4(1.0, 0.0, 0.0, 1.0)
+            #define GREEN vec4(0.0, 1.0, 0.0, 1.0)         
+            
+            uniform vec3 camPos;            
+            uniform vec2 iResolution;
+            uniform float fov;
+            uniform float earthRadius;
+            uniform mat4 viewMatrix;
+                         
+            varying vec2 tc;
+                        
+            // compute the view ray in the camera coordinate
+            vec3 computeView(vec2 uv){
+                float w_h_ratio = iResolution.x / iResolution.y;   
+                float h = tan(rad(fov/2.));
+                return normalize(vec3(-w_h_ratio * h, -h, -1.) + vec3(uv.x * 2. * h * w_h_ratio, uv.y*2.*h, 0.));
+            }
+
+            // sphere of size ra centered at point ce
+            vec2 sphIntersect( in vec3 ro, in vec3 rd, in vec3 ce, float ra )
+            {
+                vec3 oc = ro - ce;
+                float b = dot( oc, rd );
+                float c = dot( oc, oc ) - ra * ra;
+                float h = b * b - c;
+                if( h < 0.0 ) return vec2(MAX); // no intersection
+                h = sqrt( h );
+                return vec2( -b-h, -b+h );
+            }
+            
+            mat3 transpose(mat3 matrix) {
+                vec3 row0 = matrix[0];
+                vec3 row1 = matrix[1];
+                vec3 row2 = matrix[2];
+                mat3 result = mat3(
+                    vec3(row0.x, row1.x, row2.x),
+                    vec3(row0.y, row1.y, row2.y),
+                    vec3(row0.z, row1.z, row2.z)
+                );
+                return result;
+            }
+            
+            float det(mat2 matrix) {
+                return matrix[0].x * matrix[1].y - matrix[0].y * matrix[1].x;
+            }
+            
+            mat3 inverse(mat3 matrix) {
+                vec3 row0 = matrix[0];
+                vec3 row1 = matrix[1];
+                vec3 row2 = matrix[2];
+            
+                vec3 minors0 = vec3(
+                    det(mat2(row1.y, row1.z, row2.y, row2.z)),
+                    det(mat2(row1.z, row1.x, row2.z, row2.x)),
+                    det(mat2(row1.x, row1.y, row2.x, row2.y))
+                );
+                vec3 minors1 = vec3(
+                    det(mat2(row2.y, row2.z, row0.y, row0.z)),
+                    det(mat2(row2.z, row2.x, row0.z, row0.x)),
+                    det(mat2(row2.x, row2.y, row0.x, row0.y))
+                );
+                vec3 minors2 = vec3(
+                    det(mat2(row0.y, row0.z, row1.y, row1.z)),
+                    det(mat2(row0.z, row0.x, row1.z, row1.x)),
+                    det(mat2(row0.x, row0.y, row1.x, row1.y))
+                );
+            
+                mat3 adj = transpose(mat3(minors0, minors1, minors2));
+            
+                return (1.0 / dot(row0, minors0)) * adj;
+            }
+            
+            void main(void) {
+            
+                vec3 dir = computeView(tc);
+                dir = inverse(mat3(viewMatrix)) * dir;
+                
+                vec2 ER = sphIntersect(camPos, dir, vec3(0.0), earthRadius);
+                
+                float bigRadius = earthRadius * 2.5;
+                vec3 bigCenter = normalize(camPos) * bigRadius * 1.3;                
+                               
+                vec2 BIG = sphIntersect(camPos, dir, bigCenter, bigRadius);
+                
+                float Ix = distance(camPos + dir * BIG.y, ZERO);               
+                
+                float maxI = sqrt(bigRadius * bigRadius + bigRadius * bigRadius);
+                                   
+                gl_FragColor = vec4(mix(START_COLOR, END_COLOR, Ix / maxI), 1.0);
+            }`
+    });
+}
+
+export { SimpleSkyBackground };

package/src/og/control/Sun.js

@@ -10,7 +10,6 @@ import { LightSource } from "../light/LightSource.js";
 import { Quat } from "../math/Quat.js";
 import { Vec3 } from "../math/Vec3.js";
 
-const ACTIVATION_HEIGHT = 12079000.0;
 /**
  * Real Sun geocentric position control that place the Sun on the right place by the Earth.
  * @class
@@ -39,6 +38,8 @@ class Sun extends Control {
          */
         // this._isCameraSunlight = false;
 
+        this.activationHeight = options.activationHeight || 12079000.0;
+
         this.offsetVertical = options.offsetVertical || -5000000;
 
         this.offsetHorizontal = options.offsetHorizontal || 5000000;
@@ -106,7 +107,7 @@ class Sun extends Control {
         this._currDate = this._clockPtr.currentDate;
         if (!this._stopped) {
             var cam = this.renderer.activeCamera;
-            if (cam.getHeight() < ACTIVATION_HEIGHT || !this._active) {
+            if (cam.getHeight() < this.activationHeight || !this._active) {
                 this._lightOn = true;
                 this._f = 1;
                 var n = cam.eye.normal(),