@openglobus/og 0.18.5 → 0.19.0

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

@@ -640,17 +640,8 @@ class Renderer {
         let ec = this._entityCollections;
         if (ec.length) {
             this.enableBlendDefault();
-            //geoObject
-            let i = ec.length;
-            while (i--) {
-                let eci = ec[i];
-                if (ec[i]._fadingOpacity) {
-                    eci.events.dispatch(eci.events.draw, eci);
-                    ec[i].geoObjectHandler.draw();
-                }
-            }
             // pointClouds pass
-            i = ec.length;
+            let i = ec.length;
             while (i--) {
                 ec[i]._fadingOpacity && ec[i].pointCloudHandler.draw();
             }
@@ -665,10 +656,19 @@ class Renderer {
         if (ec.length) {
             let gl = this.handler.gl;
             this.enableBlendDefault();
+            // GeoObjects
+            let i = ec.length;
+            while (i--) {
+                let eci = ec[i];
+                if (ec[i]._fadingOpacity) {
+                    eci.events.dispatch(eci.events.draw, eci);
+                    ec[i].geoObjectHandler.draw();
+                }
+            }
             // billboards pass
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, this.billboardsTextureAtlas.texture);
-            let i = ec.length;
+            i = ec.length;
             while (i--) {
                 let eci = ec[i];
                 eci._fadingOpacity && eci.billboardHandler.draw();
@@ -717,6 +717,7 @@ class Renderer {
         let h = this.handler, gl = h.gl;
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        this.enableBlendDefault();
         e.dispatch(e.draw, this);
         let frustums = this.activeCamera.frustums;
         let pointerEvent = e.pointerEvent() || this.activeCamera.isMoving;
@@ -738,6 +739,7 @@ class Renderer {
             }
             this._drawTransparentEntityCollections();
             this._clearEntityCollectionQueue();
+            e.dispatch(e.drawtransparent, this);
             if (pointerEvent) {
                 this._drawPickingBuffer();
                 this.__useDistanceFramebuffer__ && this._drawDistanceBuffer();
@@ -816,18 +818,19 @@ class Renderer {
         else {
             gl.clear(gl.DEPTH_BUFFER_BIT);
         }
-        //
-        // draw picking scenes
-        //
-        gl.disable(gl.BLEND);
         let dp = this._pickingCallbacks;
         for (let i = 0, len = dp.length; i < len; i++) {
+            //
+            // draw picking scenes, usually we don't need blending,
+            // but sometimes set it manually in the callbacks
+            //
+            gl.disable(gl.BLEND);
             /**
              * This callback renders picking frame.
              */
             dp[i].callback.call(dp[i].sender);
+            gl.enable(gl.BLEND);
         }
-        gl.enable(gl.BLEND);
         this.pickingFramebuffer.deactivate();
     }
     /**

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

@@ -9,6 +9,7 @@ export type RendererEventsHandler = RendererEvents & EventsHandler<RendererEvent
 export declare function createRendererEvents(renderer: Renderer): RendererEvents;
 export type RendererEventsType = [
     "draw",
+    "drawtransparent",
     "postdraw",
     "resize",
     "resizeend",

package/lib/js/renderer/RendererEvents.js

@@ -710,6 +710,11 @@ const RENDERER_EVENTS = [
      * @event og.RendererEvents#draw
      */
     "draw",
+    /**
+     * Triggered after all transparent object are drawn
+     * @event og.RendererEvents#drawtransparent
+     */
+    "drawtransparent",
     /**
      * Triggered after scene frame is rendered(after render nodes).
      * @event og.RendererEvents#postdraw

package/lib/js/scene/Planet.d.ts

@@ -23,6 +23,8 @@ import { TerrainWorker } from "../utils/TerrainWorker";
 import { Vec2, Vec3, NumberArray2, NumberArray3, NumberArray4 } from "../math/index";
 import { VectorTileCreator } from "../utils/VectorTileCreator";
 import { WebGLBufferExt, WebGLTextureExt, IDefaultTextureParams } from "../webgl/Handler";
+import { Program } from "../webgl/Program";
+import { Segment } from "../segment/Segment";
 export interface IPlanetParams {
     name?: string;
     ellipsoid?: Ellipsoid;
@@ -42,6 +44,7 @@ export interface IPlanetParams {
     maxGridSize?: number;
     maxLoadingRequests?: number;
     atmosphereEnabled?: boolean;
+    transitionOpacityEnabled?: boolean;
 }
 export type PlanetEventsList = [
     "draw",
@@ -176,6 +179,8 @@ export declare class Planet extends RenderNode {
      */
     _renderedNodes: Node[];
     _renderedNodesInFrustum: Node[][];
+    _fadingNodes: Map<number, Node>;
+    _fadingNodesInFrustum: Node[][];
     /**
      * Current visible mercator segments tree nodes array.
      * @public
@@ -306,7 +311,8 @@ export declare class Planet extends RenderNode {
      * @type {number}
      */
     nightTextureCoefficient: number;
-    protected _renderScreenNodesPASS: Function;
+    protected _renderScreenNodesPASS: () => void;
+    protected _renderScreenNodesWithHeightPASS: () => void;
     protected _atmosphereEnabled: boolean;
     protected _atmosphereMaxMinOpacity: Float32Array;
     solidTextureOne: WebGLTextureExt | null;
@@ -314,6 +320,10 @@ export declare class Planet extends RenderNode {
     protected _skipPreRender: boolean;
     protected _nightTextureSrc: string | null;
     protected _specularTextureSrc: string | null;
+    transitionTime: number;
+    _prevNodes: Map<number, Node>;
+    _currNodes: Map<number, Node>;
+    protected _transitionOpacityEnabled: boolean;
     constructor(options?: IPlanetParams);
     /**
      * Returns true if current terrain data set is loaded
@@ -447,11 +457,18 @@ export declare class Planet extends RenderNode {
     protected _sortLayers(): void;
     protected _clearRenderedNodeList(): void;
     protected _clearRenderNodesInFrustum(): void;
+    protected _collectRenderedNodesMaxZoom(cam: PlanetCamera): void;
+    set transitionOpacityEnabled(isEnabled: boolean);
+    get transitionOpacityEnabled(): boolean;
     /**
      * Collects visible quad nodes.
      * @protected
      */
-    protected _collectRenderNodes(): void;
+    protected _collectRenderNodes(cam: PlanetCamera): void;
+    protected _renderScreenNodesPASSNoAtmos(): void;
+    protected _renderScreenNodesPASSAtmos(): void;
+    protected _renderScreenNodesWithHeightPASSNoAtmos(): void;
+    protected _renderScreenNodesWithHeightPASSAtmos(): void;
     protected _globalPreDraw(): void;
     /**
      * Render node callback.
@@ -460,6 +477,7 @@ export declare class Planet extends RenderNode {
     preFrame(): void;
     /**
      * Render node callback.
+     * Frame function is called for each renderer activrCamera frustum.
      * @public
      * @override
      */
@@ -467,8 +485,15 @@ export declare class Planet extends RenderNode {
     protected _checkRendercompleted(): void;
     lockQuadTree(): void;
     unlockQuadTree(): void;
-    protected _renderScreenNodesPASSNoAtmos(): void;
-    protected _renderScreenNodesPASSAtmos(): void;
+    protected _setUniformsNoAtmos(cam: PlanetCamera): Program;
+    protected _setUniformsAtmos(cam: PlanetCamera): Program;
+    protected _renderingFadingNodes: (nodes: Map<number, boolean>, sh: Program, currentNode: Node, sl: Layer[], sliceIndex: number, outTransparentSegments?: Segment[]) => void;
+    protected _renderingFadingNodesNoDepth: (nodes: Map<number, boolean>, sh: Program, currentNode: Node, sl: Layer[], sliceIndex: number) => void;
+    /**
+     * Drawing nodes
+     */
+    protected _renderingScreenNodes(sh: Program, cam: PlanetCamera, renderedNodes: Node[]): void;
+    protected _renderingScreenNodesWithHeight(sh: Program, cam: PlanetCamera, renderedNodes: Node[]): void;
     protected _renderDistanceFramebufferPASS(): void;
     protected _renderColorPickingFramebufferPASS(): void;
     protected _renderDepthFramebufferPASS(): void;