@openglobus/og 0.15.4 → 0.16.0

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));
         }
     }

package/src/og/ellipsoid/Ellipsoid.js

@@ -5,7 +5,7 @@
 "use strict";
 
 import { LonLat } from "../LonLat.js";
-import { DEGREES, EPS1, EPS12, EPS15, RADIANS } from "../math.js";
+import { DEGREES, EPS1, EPS12, EPS15, RADIANS, zeroTwoPI } from "../math.js";
 import { Vec3 } from "../math/Vec3.js";
 
 /**
@@ -43,6 +43,18 @@ class Ellipsoid {
         this._invRadii2 = new Vec3(1.0 / this._a2, 1.0 / this._b2, 1.0 / this._a2);
     }
 
+    /**
+     * Returns angle between to bearin angles
+     * @param {number} a - First bearing angle
+     * @param {number} b - Second bearing angle
+     * @returns {number}
+     */
+    static getAngleBetweenTwoBearings(a, b) {
+        a = zeroTwoPI(a);
+        b = zeroTwoPI(b);
+        return ((((a - b) % 360) + 360 + 180) % 360) - 180;
+    }
+
     static getRelativeBearing(a, b) {
         let a_y = Math.cos(a),
             a_x = Math.sin(a),
@@ -283,9 +295,9 @@ class Ellipsoid {
     }
 
     /**
-     * Gets cartesian ECEF from Wgs84 geodetic coordiantes.
+     * Gets cartesian ECEF from Wgs84 geodetic coordinates.
      * @public
-     * @param {LonLat} lonlat - Degrees geodetic coordiantes.
+     * @param {LonLat} lonlat - Degrees geodetic coordinates.
      * @returns {Vec3} -
      */
     lonLatToCartesian(lonlat) {
@@ -305,9 +317,9 @@ class Ellipsoid {
     }
 
     /**
-     * Gets cartesian ECEF from Wgs84 geodetic coordiantes.
+     * Gets cartesian ECEF from Wgs84 geodetic coordinates.
      * @public
-     * @param {LonLat} lonlat - Degrees geodetic coordiantes.
+     * @param {LonLat} lonlat - Degrees geodetic coordinates.
      * @param {Vec3} res - Output result.
      * @returns {Vec3} -
      */
@@ -328,7 +340,7 @@ class Ellipsoid {
     }
 
     /**
-     * Gets cartesian ECEF from Wgs84 geodetic coordiantes.
+     * Gets cartesian ECEF from Wgs84 geodetic coordinates.
      * @public
      * @param {Number} lon - Longitude.
      * @param {Number} lat - Latitude.
@@ -352,7 +364,7 @@ class Ellipsoid {
     }
 
     /**
-     * Gets Wgs84 geodetic coordiantes from cartesian ECEF.
+     * Gets Wgs84 geodetic coordinates from cartesian ECEF.
      * @public
      * @param {Vec3} p - Cartesian coordinates.
      * @returns {LonLat} -
@@ -409,13 +421,15 @@ class Ellipsoid {
         return new Vec3(pX * m_X, pY * m_Y, pZ * m_Z);
     }
 
+    /**
+     * Converts 3d cartesian coordinates to geodetic
+     * @param {Vec3} cart - Cartesian coordinates
+     * @returns {LonLat} - Geodetic coordinates
+     */
     cartesianToLonLat(cart) {
-
         let p = this.projToSurface(cart);
-
         let n = this.getSurfaceNormal3v(p),
             h = cart.sub(p);
-
         return new LonLat(
             Math.atan2(n.x, n.z) * DEGREES,
             Math.asin(n.y) * DEGREES,
@@ -423,10 +437,26 @@ class Ellipsoid {
         );
     }
 
+    /**
+     * Converts 3d cartesian coordinates to geodetic
+     * @param {Vec3} cart - Cartesian coordinates
+     * @param {LonLat} res - Link geodetic coordinates variable
+     * @returns {LonLat} - Geodetic coordinates
+     */
+    cartesianToLonLatRes(cart, res) {
+        let p = this.projToSurface(cart);
+        let n = this.getSurfaceNormal3v(p),
+            h = cart.sub(p);
+        res.lon = Math.atan2(n.x, n.z) * DEGREES;
+        res.lat = Math.asin(n.y) * DEGREES;
+        res.height = Math.sign(h.dot(cart)) * h.length();
+        return res;
+    }
+
     /**
      * Gets ellipsoid surface normal.
      * @public
-     * @param {Vec3} coord - Spatial coordiantes.
+     * @param {Vec3} coord - Spatial coordinates.
      * @return {Vec3} -
      */
     getSurfaceNormal3v(coord) {

package/src/og/entity/Entity.js

@@ -26,7 +26,7 @@ import { Strip } from "./Strip.js";
  * @param {Object} [options] - Entity options:
  * @param {string} [options.name] - A human readable name to display to users. It does not have to be unique.
  * @param {Vec3|Array.<number>} [options.cartesian] - Spatial entities like billboard, label etc. cartesian position.
- * @param {LonLat} [options.lonlat] - Geodetic coordiantes for an entities like billboard, label etc.
+ * @param {LonLat} [options.lonlat] - Geodetic coordinates for an entities like billboard, label etc.
  * @param {boolean} [options.aground] - True for entities that have to be placed on the relief.
  * @param {boolean} [options.visibility] - Entity visibility.
  * @param {*} [options.billboard] - Billboard options(see {@link og.Billboard}).
@@ -86,7 +86,7 @@ class Entity {
         this._cartesian = utils.createVector3(options.cartesian);
 
         /**
-         * Geodetic entity coordiantes.
+         * Geodetic entity coordinates.
          * @protected
          * @type {LonLat}
          */
@@ -474,7 +474,7 @@ class Entity {
     }
 
     /**
-     * Returns carteain position.
+     * Returns cartesian position.
      * @public
      * @returns {Vec3} -
      */

package/src/og/entity/EntityCollection.js

@@ -506,7 +506,7 @@ class EntityCollection {
     }
 
     /**
-     * Updates coordiantes all lonLat entities in collection after collecction attached to the planet node.
+     * Updates coordinates all lonLat entities in collection after collecction attached to the planet node.
      * @private
      * @param {Ellipsoid} ellipsoid - Globe ellipsoid.
      */
@@ -590,7 +590,7 @@ class EntityCollection {
     }
 
     /**
-     * Removes all entities from colection and clear handlers.
+     * Removes all entities from collection and clear handlers.
      * @public
      */
     clear() {

package/src/og/entity/Label.js

@@ -32,7 +32,7 @@ const STR2ALIGN = {
  * @extends {BaseBillboard}
  * @param {Object} [options] - Label options:
  * @param {Vec3|Array.<number>} [options.position] - Billboard spatial position.
- * @param {number} [options.rotation] - Screen angle rotaion.
+ * @param {number} [options.rotation] - Screen angle rotation.
  * @param {Vec4|string|Array.<number>} [options.color] - Billboard color.
  * @param {Vec3|Array.<number>} [options.alignedAxis] - Billboard aligned vector.
  * @param {Vec3|Array.<number>} [options.offset] - Billboard center screen offset.

package/src/og/entity/Polyline.js

@@ -60,6 +60,8 @@ class Polyline {
          */
         this.thickness = options.thickness || 1.5;
 
+        this._opacity = options.opacity != undefined ? options.opacity : 1.0;
+
         /**
          * Polyline RGBA color.
          * @public
@@ -1708,7 +1710,7 @@ class Polyline {
      * @param {number} opacity - Opacity.
      */
     setOpacity(opacity) {
-        this.color.w = opacity;
+        this._opacity = opacity;
     }
 
     /**
@@ -2010,7 +2012,7 @@ class Polyline {
             ]);
             gl.uniform2fv(shu.viewport, [r.handler.canvas.width, r.handler.canvas.height]);
             gl.uniform1f(shu.thickness, this.thickness * 0.5);
-            gl.uniform1f(shu.opacity, ec._fadingOpacity);
+            gl.uniform1f(shu.opacity, this._opacity * ec._fadingOpacity);
 
             gl.bindBuffer(gl.ARRAY_BUFFER, this._colorsBuffer);
             gl.vertexAttribPointer(sha.color, this._colorsBuffer.itemSize, gl.FLOAT, false, 0, 0);

package/src/og/index.js

@@ -34,6 +34,7 @@ import { Events } from './Events.js';
 import { Extent } from './Extent.js';
 import { LonLat } from './LonLat.js';
 import { RenderNode } from './scene/RenderNode.js';
+import { Planet } from './scene/Planet.js';
 
 import { Popup } from './Popup.js';
 
@@ -45,22 +46,16 @@ import {
     Wgs84QuadTreeStrategy
 } from './quadTree/index.js';
 
-import pkg from "../../package.json";
 
 import { Object3d } from './Object3d.js';
 const { Handler } = webgl, { Control } = control;
-const { Layer, Vector, XYZ} = layer;
+const { Layer, Vector, XYZ, CanvasTiles} = layer;
 const {
     EntityCollection,
     Entity
 } = entity;
 
-const version = {
-    version: pkg.version
-};
-
 export {
-    version,
     bv,
     jd,
     math,
@@ -70,6 +65,7 @@ export {
     Layer,
     XYZ,
     Vector,
+    CanvasTiles,
     layer,
     terrain,
     Control,
@@ -78,6 +74,7 @@ export {
     wgs84,
     Camera,
     Ellipsoid,
+    Planet,
     PlanetCamera,
     Globe,
     LightSource,

package/src/og/layer/CanvasTiles.js

@@ -51,6 +51,7 @@ class CanvasTiles extends Layer {
         this.animated = options.animated || false;
 
         this.minNativeZoom = options.minNativeZoom || 0;
+        this.maxNativeZoom = options.maxNativeZoom || 100;
         /**
          * Current creating tiles couter.
          * @protected
@@ -176,19 +177,21 @@ class CanvasTiles extends Layer {
                 that.events.dispatch(e, material);
             }
             requestAnimationFrame(() => {
-                that.drawTile(material, /**
-                 * Apply canvas.
-                 * @callback applyCanvasCallback
-                 * @param {Object} canvas -
-                 */
-                function (canvas) {
-                    that._counter--;
-                    CanvasTiles.__requestsCounter--;
-                    if (material.isLoading) {
-                        material.applyImage(canvas);
-                    }
-                    that._dequeueRequest();
-                });
+                that.drawTile(
+                    material,
+                    /**
+                     * Apply canvas.
+                     * @callback applyCanvasCallback
+                     * @param {Object} canvas -
+                     */
+                    function (canvas) {
+                        that._counter--;
+                        CanvasTiles.__requestsCounter--;
+                        if (material.isLoading) {
+                            material.applyImage(canvas);
+                        }
+                        that._dequeueRequest();
+                    });
             });
         } else {
             material.textureNotExists();
@@ -239,6 +242,12 @@ class CanvasTiles extends Layer {
 
     applyMaterial(material) {
         if (material.isReady) {
+
+            // IMPORTANT!
+            // Animated doesn't work withMaxNativeZoom
+            // It could be fixed with call drawTile method only for parent
+            // material (which is rendered on the current segment material),
+            // just for one renderer frame
             if (material.layer.animated) {
                 requestAnimationFrame(() => {
                     this.drawTile(material, function (canvas) {
@@ -246,15 +255,19 @@ class CanvasTiles extends Layer {
                     });
                 });
             }
-            return [0, 0, 1, 1];
+
+            return material.texOffset;
+
         } else if (material.segment.tileZoom < this.minNativeZoom) {
             material.textureNotExists();
         } else {
 
             let segment = material.segment;
-            let pn = segment.node, notEmpty = false;
+            let pn = segment.node,
+                parentTextureExists = false;
+            let maxNativeZoom = material.layer.maxNativeZoom;
 
-            if (segment.passReady && !material.isLoading) {
+            if (segment.passReady && !material.isLoading && segment.tileZoom <= maxNativeZoom) {
                 this.loadMaterial(material);
             }
 
@@ -263,14 +276,41 @@ class CanvasTiles extends Layer {
             while (pn.parentNode) {
                 pn = pn.parentNode;
                 psegm = pn.segment.materials[mId];
-                if (psegm && psegm.isReady) {
-                    notEmpty = true;
+                if (psegm && psegm.textureExists) {
+                    parentTextureExists = true;
                     break;
                 }
             }
 
-            if (notEmpty) {
+            if (segment.passReady) {
+                if (pn.segment.tileZoom === maxNativeZoom) {
+                    if (segment.tileZoom > maxNativeZoom) {
+                        material.textureNotExists();
+                    }
+                } else if (pn.segment.tileZoom < maxNativeZoom) {
+
+                    let pn = segment.node;
+                    while (pn.segment.tileZoom > maxNativeZoom) {
+                        pn = pn.parentNode;
+                    }
+
+                    let pnm = pn.segment.materials[mId];
+                    if (pnm) {
+                        !pnm.isLoading && !pnm.isReady && this.loadMaterial(pnm);
+                    } else {
+                        pnm = pn.segment.materials[material.layer._id] = material.layer.createMaterial(
+                            pn.segment
+                        );
+                        this.loadMaterial(pnm);
+                    }
+                }
+            }
+
+            if (parentTextureExists) {
 
+                //
+                // Animated doesn't work withMaxNativeZoom
+                //
                 if (material.layer.animated) {
                     requestAnimationFrame(() => {
                         this.drawTile(material, function (canvas) {
@@ -281,20 +321,27 @@ class CanvasTiles extends Layer {
 
                 material.appliedNodeId = pn.nodeId;
                 material.texture = psegm.texture;
-
                 let dZ2 = 1.0 / (2 << (segment.tileZoom - pn.segment.tileZoom - 1));
-                return [segment.tileX * dZ2 - pn.segment.tileX, segment.tileY * dZ2 - pn.segment.tileY, dZ2, dZ2];
+                material.texOffset[0] = segment.tileX * dZ2 - pn.segment.tileX;
+                material.texOffset[1] = segment.tileY * dZ2 - pn.segment.tileY;
+                material.texOffset[2] = dZ2;
+                material.texOffset[3] = dZ2;
             } else {
                 material.texture = segment.planet.transparentTexture;
-                return [0, 0, 1, 1];
+                material.texOffset[0] = 0.0;
+                material.texOffset[1] = 0.0;
+                material.texOffset[2] = 1.0;
+                material.texOffset[3] = 1.0;
             }
         }
+
+        return material.texOffset;
     }
 
     clearMaterial(material) {
         if (material.isReady) {
             material.isReady = false;
-            if (material.texture && !material.texture.default) {
+            if (material.textureExists && material.texture && !material.texture.default) {
                 material.segment.handler.gl.deleteTexture(material.texture);
                 material.texture = null;
             }