@openglobus/og 0.18.4 → 0.19.0

package/lib/js/layer/GeoImage.js

@@ -32,6 +32,7 @@ class GeoImage extends BaseGeoImage {
         this._sourceReady = false;
         this._sourceCreated = false;
         this._image = new Image();
+        this._image.crossOrigin = "Anonymous";
         this._onLoad_ = this._onLoad.bind(this);
         this._image.addEventListener("load", this._onLoad_);
         this._image.src = src;
@@ -46,6 +47,7 @@ class GeoImage extends BaseGeoImage {
         this._sourceCreated = false;
         this._sourceReady = false;
         this._image = image;
+        this._image.crossOrigin = "Anonymous";
         this._src = image.src;
         if (isImageLoaded(this._image)) {
             this._applyImage(this._image);
@@ -105,6 +107,7 @@ class GeoImage extends BaseGeoImage {
             }
             else {
                 this._image = new Image();
+                this._image.crossOrigin = "Anonymous";
                 this._onLoad_ = this._onLoad.bind(this);
                 this._image.addEventListener("load", this._onLoad_);
                 this._image.src = this._src;

package/lib/js/layer/Layer.d.ts

@@ -10,7 +10,7 @@ import { IDefaultTextureParams } from "../webgl/Handler";
 export interface ILayerParams {
     properties?: any;
     labelMaxLetters?: number;
-    displayInLayerSwitcher?: boolean;
+    hideInLayerSwitcher?: boolean;
     opacity?: number;
     minZoom?: number;
     maxZoom?: number;
@@ -31,6 +31,7 @@ export interface ILayerParams {
     specular?: string | NumberArray3 | Vec3;
     shininess?: number;
     nightTextureCoefficient?: number;
+    iconSrc?: string | null;
 }
 /**
  * @class
@@ -45,11 +46,11 @@ export interface ILayerParams {
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {boolean} [options.displayInLayerSwitcher=true] - Presence of layer in dialog window of LayerSwitcher control.
+ * @param {boolean} [options.hideInLayerSwitcher=false] - Presence of layer in dialog window of LayerSwitcher control.
  * @param {boolean} [options.isSRGB=false] - Layer image webgl internal format.
  * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
  * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
- *
+ * @param {string} [options.icon] - Icon for LayerSwitcher
  * @fires EventsHandler<LayerEventsList>#visibilitychange
  * @fires EventsHandler<LayerEventsList>#add
  * @fires EventsHandler<LayerEventsList>#remove
@@ -98,7 +99,7 @@ declare class Layer {
      */
     name: string;
     properties: any;
-    displayInLayerSwitcher: boolean;
+    hideInLayerSwitcher: boolean;
     /**
      * Minimal zoom level when layer is visible.
      * @public
@@ -188,7 +189,10 @@ declare class Layer {
     _diffuse: Float32Array | null;
     _specular: Float32Array | null;
     isVector: boolean;
+    protected _iconSrc: string | null;
     constructor(name?: string | null, options?: ILayerParams);
+    get iconSrc(): string | null;
+    set iconSrc(src: string | null);
     set diffuse(rgb: string | NumberArray3 | Vec3 | null | undefined);
     set ambient(rgb: string | NumberArray3 | Vec3 | null | undefined);
     set specular(rgb: string | NumberArray3 | Vec3 | null | undefined);
@@ -354,6 +358,16 @@ declare class Layer {
      * @return {Extent} - Layer extent.
      */
     getExtentMerc(): Extent;
+    /**
+     * Fly extent.
+     * @public
+     */
+    flyExtent(): void;
+    /**
+     * View extent.
+     * @public
+     */
+    viewExtent(): void;
     /**
      * Special correction of the whole globe extent.
      * @protected

package/lib/js/layer/Layer.js

@@ -20,11 +20,11 @@ const FADING_RATIO = 15.8;
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {boolean} [options.displayInLayerSwitcher=true] - Presence of layer in dialog window of LayerSwitcher control.
+ * @param {boolean} [options.hideInLayerSwitcher=false] - Presence of layer in dialog window of LayerSwitcher control.
  * @param {boolean} [options.isSRGB=false] - Layer image webgl internal format.
  * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
  * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
- *
+ * @param {string} [options.icon] - Icon for LayerSwitcher
  * @fires EventsHandler<LayerEventsList>#visibilitychange
  * @fires EventsHandler<LayerEventsList>#add
  * @fires EventsHandler<LayerEventsList>#remove
@@ -56,11 +56,11 @@ class Layer {
     constructor(name, options = {}) {
         this.isVector = false;
         this.__id = Layer.__counter__++;
+        this._iconSrc = options.iconSrc || null;
         this.events = createEvents(LAYER_EVENTS, this);
         this.name = name || "noname";
         this.properties = options.properties || {};
-        this.displayInLayerSwitcher =
-            options.displayInLayerSwitcher !== undefined ? options.displayInLayerSwitcher : true;
+        this.hideInLayerSwitcher = options.hideInLayerSwitcher || false;
         this._hasImageryTiles = true;
         this._opacity = options.opacity || 1.0;
         this.minZoom = options.minZoom || 0;
@@ -116,6 +116,13 @@ class Layer {
         }
         this.nightTextureCoefficient = options.nightTextureCoefficient || 1.0;
     }
+    get iconSrc() {
+        return this._iconSrc;
+    }
+    set iconSrc(src) {
+        // @todo: add event
+        this._iconSrc = src;
+    }
     set diffuse(rgb) {
         if (rgb) {
             let vec = createColorRGB(rgb);
@@ -508,6 +515,20 @@ class Layer {
     getExtentMerc() {
         return this._extentMerc;
     }
+    /**
+     * Fly extent.
+     * @public
+     */
+    flyExtent() {
+        this._planet?.flyExtent(this.getExtent());
+    }
+    /**
+     * View extent.
+     * @public
+     */
+    viewExtent() {
+        this._planet?.viewExtent(this.getExtent());
+    }
     /**
      * Special correction of the whole globe extent.
      * @protected

package/lib/js/layer/XYZ.d.ts

@@ -73,7 +73,6 @@ export declare class XYZ extends Layer {
     /**
      * Rewrites imagery tile url query.
      * @private
-     * @callback og.layer.XYZ~_urlRewriteCallback
      * @param {Segment} segment - Segment to load.
      * @param {string} url - Created url.
      * @returns {string} - Url query string.

package/lib/js/quadTree/Node.d.ts

@@ -20,6 +20,7 @@ declare class Node {
     partId: number;
     nodeId: number;
     state: number | null;
+    prevState: number | null;
     appliedTerrainNodeId: number;
     sideSizeLog2: [number, number, number, number];
     ready: boolean;
@@ -29,6 +30,7 @@ declare class Node {
     segment: Segment;
     _cameraInside: boolean;
     inFrustum: number;
+    _fadingNodes: Node[];
     constructor(SegmentPrototype: typeof Segment, planet: Planet, partId: number, parent: Node | null, id: number, tileZoom: number, extent: Extent);
     createChildrenNodes(): void;
     createBounds(): void;
@@ -40,14 +42,30 @@ declare class Node {
      * @returns {Node} -
      */
     getEqualNeighbor(side: number): Node | undefined;
-    renderTree(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
-    traverseNodes(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
+    traverseNodes(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean, zoomPassNode?: Node): void;
+    renderTree(cam: PlanetCamera, maxZoom?: number | null, terrainReadySegment?: Segment | null, stopLoading?: boolean, zoomPassNode?: Node): void;
     renderNode(inFrustum: number, onlyTerrain?: boolean, terrainReadySegment?: Segment | null, stopLoading?: boolean): void;
+    childrenPrevStateEquals(state: number): boolean;
+    isFading(): boolean;
+    _collectFadingNodes(): void;
+    clearNeighbors(): void;
+    _refreshTransitionOpacity(): void;
     /**
-     * Searching for neighbours and picking up current node to render processing.
+     * Picking up current node to render processing.
      * @public
      */
     addToRender(inFrustum: number): void;
+    applyNeighbor(node: Node, side: number): void;
+    /**
+     * Searching current node for its neighbours.
+     * @public
+     */
+    getRenderedNodesNeighbors(nodes: Node[]): void;
+    /**
+     * Checking if current node has a common side with input node and return side index N, E, S or W. Otherwise returns -1.
+     * @param {Node} node - Input node
+     * @returns {number} - Node side index
+     */
     getCommonSide(node: Node): number;
     whileNormalMapCreating(): void;
     whileTerrainLoading(terrainReadySegment?: Segment | null): void;

package/lib/js/quadTree/Node.js

@@ -1,7 +1,7 @@
 import { Extent } from "../Extent";
 import { EPSG3857 } from "../proj/EPSG3857";
 import { EPSG4326 } from "../proj/EPSG4326";
-import { getMatrixSubArray32, getMatrixSubArray64, getMatrixSubArrayBoundsExt } from "../utils/shared";
+import { binaryInsert, getMatrixSubArray32, getMatrixSubArray64, getMatrixSubArrayBoundsExt } from "../utils/shared";
 import { LonLat } from "../LonLat";
 import { MAX, MIN } from "../math";
 import { MAX_LAT } from "../mercator";
@@ -39,15 +39,18 @@ class Node {
         this.partId = partId;
         this.nodeId = partId + id;
         this.state = null;
+        this.prevState = null;
         this.appliedTerrainNodeId = -1;
         this.sideSizeLog2 = [0, 0, 0, 0];
         this.ready = false;
         this.neighbors = [[], [], [], []];
         this.equalizedSideWithNodeId = [this.nodeId, this.nodeId, this.nodeId, this.nodeId];
+        // @todo: this.nodes = null;
         this.nodes = [];
         this.segment = new SegmentPrototype(this, planet, tileZoom, extent);
         this._cameraInside = false;
         this.inFrustum = 0;
+        this._fadingNodes = [];
         this.createBounds();
     }
     createChildrenNodes() {
@@ -133,23 +136,28 @@ class Node {
     // public isBrother(node: Node): boolean {
     //     return !(this.parentNode || node.parentNode) || (this.parentNode!.nodeId === node.parentNode!.nodeId);
     // }
-    renderTree(cam, maxZoom, terrainReadySegment, stopLoading) {
+    traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode) {
+        if (!this.ready) {
+            this.createChildrenNodes();
+        }
+        let n = this.nodes;
+        n[0].renderTree(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode);
+        n[1].renderTree(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode);
+        n[2].renderTree(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode);
+        n[3].renderTree(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode);
+    }
+    renderTree(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode) {
         if (this.planet._renderedNodes.length >= MAX_RENDERED_NODES) {
             return;
         }
+        if (!maxZoom || zoomPassNode && this.segment.tileZoom > zoomPassNode.segment.tileZoom) {
+            this.prevState = this.state;
+        }
         this.state = WALKTHROUGH;
-        // @ts-ignore
-        this.neighbors[0] = null;
-        // @ts-ignore
-        this.neighbors[1] = null;
-        // @ts-ignore
-        this.neighbors[2] = null;
-        // @ts-ignore
-        this.neighbors[3] = null;
-        this.neighbors[0] = [];
-        this.neighbors[1] = [];
-        this.neighbors[2] = [];
-        this.neighbors[3] = [];
+        this.clearNeighbors();
+        for (let i = 0; i < this._fadingNodes.length; i++) {
+            this._fadingNodes[i].neighbors && this._fadingNodes[i].clearNeighbors();
+        }
         let seg = this.segment, planet = this.planet;
         this._cameraInside = false;
         // Search a node which the camera is flying over.
@@ -208,7 +216,7 @@ class Node {
                 seg._collectVisibleNodes();
             }
             if (seg.tileZoom < 2) {
-                this.traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading);
+                this.traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading, zoomPassNode);
             }
             else if (seg.terrainReady && (!maxZoom && cam.projectedSize(seg.bsphere.center, seg._plainRadius) < planet.lodSize || maxZoom && ((seg.tileZoom === maxZoom) || !altVis))) {
                 if (altVis) {
@@ -220,7 +228,7 @@ class Node {
                 }
             }
             else if (seg.terrainReady && seg.checkZoom() && (!maxZoom || cam.projectedSize(seg.bsphere.center, seg.bsphere.radius) > this.planet._maxLodSize)) {
-                this.traverseNodes(cam, maxZoom, seg, stopLoading);
+                this.traverseNodes(cam, maxZoom, seg, stopLoading, zoomPassNode);
             }
             else if (altVis) {
                 seg.passReady = maxZoom ? seg.terrainReady : false;
@@ -234,16 +242,6 @@ class Node {
             this.state = NOTRENDERING;
         }
     }
-    traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading) {
-        if (!this.ready) {
-            this.createChildrenNodes();
-        }
-        let n = this.nodes;
-        n[0].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
-        n[1].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
-        n[2].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
-        n[3].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
-    }
     renderNode(inFrustum, onlyTerrain, terrainReadySegment, stopLoading) {
         let seg = this.segment;
         // Create and load terrain data
@@ -278,39 +276,119 @@ class Node {
         // Finally this node proceeds to rendering.
         this.addToRender(inFrustum);
     }
+    childrenPrevStateEquals(state) {
+        let n = this.nodes;
+        return n.length === 4 && n[0].prevState === state && n[1].prevState === state && n[2].prevState === state && n[3].prevState === state;
+    }
+    isFading() {
+        let n = this.nodes;
+        return this.state === WALKTHROUGH && this.segment._transitionOpacity > 0.0 && n.length === 4 && (n[0].state === RENDERING && n[1].state === RENDERING && n[2].state === RENDERING && n[3].state === RENDERING);
+    }
+    _collectFadingNodes() {
+        if (this.segment.tileZoom < 3) {
+            this.segment._transitionOpacity = 1.0;
+            return;
+        }
+        // Light up the node
+        if (this.prevState !== RENDERING) {
+            // means that the node is lighting up
+            this.segment._transitionOpacity = 0.0;
+            // store fading nodes, could be a parent or children nodes
+            this._fadingNodes = [];
+            let timestamp = window.performance.now();
+            this.segment._transitionTimestamp = timestamp;
+            if (this.parentNode) {
+                // Parent was visible the last frame, make the parent fading
+                if (this.parentNode.prevState === RENDERING) {
+                    let pn = this.parentNode.parentNode;
+                    while (pn) {
+                        if (pn.isFading()) {
+                            for (let i = 0; i < pn.nodes.length; i++) {
+                                pn.nodes[i].segment._transitionOpacity = 1.0;
+                                pn.nodes[i]._fadingNodes = [];
+                            }
+                            pn.segment._transitionOpacity = 0.0;
+                            break;
+                        }
+                        pn = pn.parentNode;
+                    }
+                    // not sure it's necessary here
+                    //this.parentNode.whileTerrainLoading();
+                    this._fadingNodes.push(this.parentNode);
+                    this.parentNode.segment._transitionOpacity = 2.0;
+                    this.parentNode.segment._transitionTimestamp = timestamp;
+                }
+                else {
+                    // Check if the children were visible last frame, and make them fading
+                    if (this.segment.childrenInitialized() && this.childrenPrevStateEquals(RENDERING)) {
+                        for (let i = 0; i < this.nodes.length; i++) {
+                            let ni = this.nodes[i];
+                            // not sure it's necessary here
+                            //ni.whileTerrainLoading();
+                            this._fadingNodes.push(ni);
+                            ni.segment._transitionOpacity = 2.0;
+                            ni.segment._transitionTimestamp = timestamp;
+                            ni.prevState = ni.state;
+                            ni.state = NOTRENDERING;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    clearNeighbors() {
+        //this.sideSizeLog2[0] = this.sideSizeLog2[1] = this.sideSizeLog2[2] = this.sideSizeLog2[3] = Math.log2(this.segment.gridSize);
+        // @ts-ignore
+        this.neighbors[0] = this.neighbors[1] = this.neighbors[2] = this.neighbors[3] = null;
+        this.neighbors[0] = [];
+        this.neighbors[1] = [];
+        this.neighbors[2] = [];
+        this.neighbors[3] = [];
+    }
+    _refreshTransitionOpacity() {
+        if (this._fadingNodes.length === 0) {
+            this.segment._transitionOpacity = 1.0;
+        }
+        else {
+            if (this._fadingNodes.length === 4 && !this.childrenPrevStateEquals(RENDERING)) {
+                this.segment._transitionOpacity = 1.0;
+            }
+            else {
+                this.segment.increaseTransitionOpacity();
+                for (let i = 0; i < this._fadingNodes.length; i++) {
+                    let n = this._fadingNodes[i];
+                    if (n.segment) {
+                        if (n.segment._transitionOpacity > 0 && !this.planet._fadingNodes.has(n.nodeId)) {
+                            this.planet._fadingNodes.set(n.nodeId, n);
+                            n.segment.fadingTransitionOpacity();
+                        }
+                    }
+                    else {
+                        this.segment._transitionOpacity = 1.0;
+                        break;
+                    }
+                }
+            }
+        }
+    }
     /**
-     * Searching for neighbours and picking up current node to render processing.
+     * Picking up current node to render processing.
      * @public
      */
     addToRender(inFrustum) {
         this.state = RENDERING;
         let nodes = this.planet._renderedNodes;
-        for (let i = nodes.length - 1; i >= 0; --i) {
-            const ni = nodes[i];
-            const cs = this.getCommonSide(ni);
-            if (cs !== -1) {
-                const opcs = OPSIDE[cs];
-                if (this.neighbors[cs].length === 0 || ni.neighbors[opcs].length === 0) {
-                    const ap = this.segment;
-                    const bp = ni.segment;
-                    const ld = ap.gridSize / (bp.gridSize * Math.pow(2, bp.tileZoom - ap.tileZoom));
-                    let cs_size = ap.gridSize, opcs_size = bp.gridSize;
-                    if (ld > 1) {
-                        cs_size = Math.ceil(ap.gridSize / ld);
-                        opcs_size = bp.gridSize;
-                    }
-                    else if (ld < 1) {
-                        cs_size = ap.gridSize;
-                        opcs_size = Math.ceil(bp.gridSize * ld);
-                    }
-                    this.sideSizeLog2[cs] = Math.log2(cs_size);
-                    ni.sideSizeLog2[opcs] = Math.log2(opcs_size);
-                }
-                this.neighbors[cs].push(ni);
-                ni.neighbors[opcs].push(this);
-            }
+        //@ts-ignore
+        if (!this.planet._transitionOpacityEnabled) {
+            this.getRenderedNodesNeighbors(nodes);
+            nodes.push(this);
+        }
+        else {
+            //@todo: check if it's possible to get rid of the sorting when using breadth traverse tree
+            binaryInsert(nodes, this, (a, b) => {
+                return a.segment.tileZoom - b.segment.tileZoom;
+            });
         }
-        nodes.push(this);
         if (!this.segment.terrainReady) {
             this.planet._renderCompleted = false;
             this.planet._terrainCompleted = false;
@@ -324,6 +402,46 @@ class Node {
             inFrustum >>= 1;
         }
     }
+    applyNeighbor(node, side) {
+        const opcs = OPSIDE[side];
+        if (this.neighbors[side].length === 0 || node.neighbors[opcs].length === 0) {
+            const ap = this.segment;
+            const bp = node.segment;
+            const ld = ap.gridSize / (bp.gridSize * Math.pow(2, bp.tileZoom - ap.tileZoom));
+            let cs_size = ap.gridSize, opcs_size = bp.gridSize;
+            if (ld > 1) {
+                cs_size = Math.ceil(ap.gridSize / ld);
+                opcs_size = bp.gridSize;
+            }
+            else if (ld < 1) {
+                cs_size = ap.gridSize;
+                opcs_size = Math.ceil(bp.gridSize * ld);
+            }
+            this.sideSizeLog2[side] = Math.log2(cs_size);
+            node.sideSizeLog2[opcs] = Math.log2(opcs_size);
+        }
+        //@todo: fix dupe neighbors
+        this.neighbors[side].push(node);
+        node.neighbors[opcs].push(this);
+    }
+    /**
+     * Searching current node for its neighbours.
+     * @public
+     */
+    getRenderedNodesNeighbors(nodes) {
+        for (let i = nodes.length - 1; i >= 0; --i) {
+            let ni = nodes[i];
+            let cs = this.getCommonSide(ni);
+            if (cs !== -1) {
+                this.applyNeighbor(ni, cs);
+            }
+        }
+    }
+    /**
+     * Checking if current node has a common side with input node and return side index N, E, S or W. Otherwise returns -1.
+     * @param {Node} node - Input node
+     * @returns {number} - Node side index
+     */
     getCommonSide(node) {
         const as = this.segment;
         const bs = node.segment;
@@ -574,23 +692,16 @@ class Node {
         }
     }
     destroy() {
-        this.state = NOTRENDERING;
+        this.prevState = this.state = NOTRENDERING;
         this.segment.destroySegment();
         let n = this.neighbors;
-        for (let i = 0; i < n.length; i++) {
+        for (let i = 0, len = n.length; i < len; i++) {
             let ni = n[i];
             if (ni) {
                 for (let j = 0; j < ni.length; j++) {
                     let nij = ni[j];
                     if (nij && nij.neighbors) {
-                        // @ts-ignore
-                        nij.neighbors[N] = null;
-                        // @ts-ignore
-                        nij.neighbors[E] = null;
-                        // @ts-ignore
-                        nij.neighbors[S] = null;
-                        // @ts-ignore
-                        nij.neighbors[W] = null;
+                        nij.clearNeighbors();
                     }
                 }
             }

package/lib/js/renderer/Renderer.d.ts

@@ -151,7 +151,6 @@ declare class Renderer {
     screenFramePositionBuffer: WebGLBufferExt | null;
     screenTexture: Record<string, WebGLTexture>;
     outputTexture: WebGLTexture | null;
-    protected _pickingMaskCoordinatesBuffer: WebGLBufferExt | null;
     protected _skipDistanceFrame: boolean;
     protected _distancePixelBuffer: WebGLBuffer | null;
     protected _skipPickingFrame: boolean;