@openglobus/og 0.18.5 → 0.19.0

package/lib/js/scene/Planet.js

@@ -58,6 +58,53 @@ const HORIZON_TANGENT = 0.81;
 export class Planet extends RenderNode {
     constructor(options = {}) {
         super(options.name);
+        this._renderingFadingNodes = (nodes, sh, currentNode, sl, sliceIndex, outTransparentSegments) => {
+            let isFirstPass = sliceIndex === 0;
+            let isEq = this.terrain.equalizeVertices;
+            for (let j = 0, len = currentNode._fadingNodes.length; j < len; j++) {
+                let f = currentNode._fadingNodes[j].segment;
+                if (this._fadingNodes.has(currentNode._fadingNodes[0].nodeId) && !nodes.has(f.node.nodeId)) {
+                    nodes.set(f.node.nodeId, true);
+                    if (f._transitionOpacity < 1.0) {
+                        outTransparentSegments.push(f);
+                    }
+                    else {
+                        if (isFirstPass) {
+                            isEq && f.equalize();
+                            f.readyToEngage && f.engage();
+                            f.screenRendering(sh, sl, sliceIndex);
+                        }
+                        else {
+                            f.screenRendering(sh, sl, sliceIndex, this.transparentTexture, true);
+                        }
+                    }
+                }
+            }
+        };
+        this._renderingFadingNodesNoDepth = (nodes, sh, currentNode, sl, sliceIndex) => {
+            let isFirstPass = sliceIndex === 0;
+            let isEq = this.terrain.equalizeVertices;
+            let gl = sh.gl;
+            gl.disable(gl.DEPTH_TEST);
+            for (let j = 0, len = currentNode._fadingNodes.length; j < len; j++) {
+                let f = currentNode._fadingNodes[j].segment;
+                if (this._fadingNodes.has(currentNode._fadingNodes[0].nodeId) && !nodes.has(f.node.nodeId)) {
+                    nodes.set(f.node.nodeId, true);
+                    if (isFirstPass) {
+                        isEq && f.equalize();
+                        f.readyToEngage && f.engage();
+                        f.screenRendering(sh, sl, sliceIndex);
+                    }
+                    else {
+                        f.screenRendering(sh, sl, sliceIndex, this.transparentTexture, true);
+                    }
+                }
+            }
+            gl.enable(gl.DEPTH_TEST);
+        };
+        this._prevNodes = new Map();
+        this._currNodes = new Map();
+        this.transitionTime = 580;
         this.ellipsoid = options.ellipsoid || wgs84;
         this.lightEnabled = true;
         this._planetRadius2 = this.ellipsoid.getPolarSize() * this.ellipsoid.getPolarSize();
@@ -92,6 +139,8 @@ export class Planet extends RenderNode {
         this._createdNodesCount = 0;
         this._renderedNodes = [];
         this._renderedNodesInFrustum = [];
+        this._fadingNodes = new Map;
+        this._fadingNodesInFrustum = [];
         this._visibleNodes = {};
         this._visibleNodesNorth = {};
         this._visibleNodesSouth = {};
@@ -142,12 +191,14 @@ export class Planet extends RenderNode {
         this._collectRenderNodesIsActive = true;
         this.nightTextureCoefficient = 2.0;
         this._renderScreenNodesPASS = this._renderScreenNodesPASSNoAtmos;
+        this._renderScreenNodesWithHeightPASS = this._renderScreenNodesWithHeightPASSNoAtmos;
         this._atmosphereEnabled = options.atmosphereEnabled || false;
         this._atmosphereMaxMinOpacity = new Float32Array([1.0, 0.41]);
         this.solidTextureOne = null;
         this.solidTextureTwo = null;
         this._nightTextureSrc = options.nightTextureSrc || null;
         this._specularTextureSrc = options.specularTextureSrc || null;
+        this._transitionOpacityEnabled = options.transitionOpacityEnabled != undefined ? options.transitionOpacityEnabled : true;
     }
     /**
      * Returns true if current terrain data set is loaded
@@ -378,6 +429,7 @@ export class Planet extends RenderNode {
         h.removeProgram("drawnode_screen_wl");
         if (this._atmosphereEnabled) {
             this._renderScreenNodesPASS = this._renderScreenNodesPASSAtmos;
+            this._renderScreenNodesWithHeightPASS = this._renderScreenNodesWithHeightPASSAtmos;
             if (h.isWebGl2()) {
                 h.addProgram(shaders.drawnode_screen_wl_webgl2Atmos(), true);
             }
@@ -396,6 +448,7 @@ export class Planet extends RenderNode {
         }
         else {
             this._renderScreenNodesPASS = this._renderScreenNodesPASSNoAtmos;
+            this._renderScreenNodesWithHeightPASS = this._renderScreenNodesWithHeightPASSNoAtmos;
             if (this.renderer.controls.Atmosphere) {
                 this.renderer.controls.Atmosphere.deactivate();
             }
@@ -462,6 +515,9 @@ export class Planet extends RenderNode {
             this._renderCompletedActivated = false;
             this._terrainCompletedActivated = false;
         });
+        this.renderer.events.on("drawtransparent", () => {
+            this._renderScreenNodesWithHeightPASS();
+        });
         // Initialize texture coordinates buffer pool
         this._textureCoordsBufferCache = [];
         let texCoordCache = segmentHelper.getInstance().initTextureCoordsTable(TABLESIZE + 1);
@@ -679,25 +735,7 @@ export class Planet extends RenderNode {
             this._renderedNodesInFrustum[i] = [];
         }
     }
-    /**
-     * Collects visible quad nodes.
-     * @protected
-     */
-    _collectRenderNodes() {
-        let cam = this.camera;
-        this._lodSize = math.lerp(cam.slope < 0.0 ? 0.0 : cam.slope, this._curLodSize, this._minLodSize);
-        cam._insideSegment = null;
-        // clear first
-        this._clearRenderedNodeList();
-        this._clearRenderNodesInFrustum();
-        this._viewExtent.southWest.set(180, 180);
-        this._viewExtent.northEast.set(-180, -180);
-        this._visibleNodes = {};
-        this._visibleNodesNorth = {};
-        this._visibleNodesSouth = {};
-        this.minCurrZoom = math.MAX;
-        this.maxCurrZoom = math.MIN;
-        this.quadTreeStrategy.collectRenderNodes();
+    _collectRenderedNodesMaxZoom(cam) {
         if (cam.slope > this.minEqualZoomCameraSlope && cam._lonLat.height < this.maxEqualZoomAltitude && cam._lonLat.height > this.minEqualZoomAltitude) {
             this.minCurrZoom = this.maxCurrZoom;
             let temp = this._renderedNodes, rf = this._renderedNodesInFrustum, temp2 = [];
@@ -722,10 +760,92 @@ export class Planet extends RenderNode {
                 }
             }
             for (let i = 0, len = temp2.length; i < len; i++) {
-                temp2[i].renderTree(cam, this.maxCurrZoom, null);
+                temp2[i].renderTree(cam, this.maxCurrZoom, null, false, temp2[i]);
+            }
+        }
+    }
+    set transitionOpacityEnabled(isEnabled) {
+        this._transitionOpacityEnabled = isEnabled;
+        //@todo: set render nodes transition opacity to one
+    }
+    get transitionOpacityEnabled() {
+        return this._transitionOpacityEnabled;
+    }
+    /**
+     * Collects visible quad nodes.
+     * @protected
+     */
+    _collectRenderNodes(cam) {
+        this._lodSize = math.lerp(cam.slope < 0.0 ? 0.0 : cam.slope, this._curLodSize, this._minLodSize);
+        cam._insideSegment = null;
+        // clear first
+        this._clearRenderedNodeList();
+        this._clearRenderNodesInFrustum();
+        this._viewExtent.southWest.set(180, 180);
+        this._viewExtent.northEast.set(-180, -180);
+        // todo: replace to camera
+        this._visibleNodes = {};
+        this._visibleNodesNorth = {};
+        this._visibleNodesSouth = {};
+        // todo: replace to camera
+        this.minCurrZoom = math.MAX;
+        this.maxCurrZoom = math.MIN;
+        this.quadTreeStrategy.collectRenderNodes();
+        this._collectRenderedNodesMaxZoom(cam);
+        // main camera effect
+        this._fadingNodes.clear();
+        if (this._transitionOpacityEnabled) {
+            let opaqueNodes = [];
+            for (let i = 0; i < this._renderedNodes.length; i++) {
+                let ri = this._renderedNodes[i];
+                // it's not impossible to move the code into Node.addToRender, because
+                // we can't know actual state before _collectRenderedNodesMaxZoom pass
+                ri._collectFadingNodes();
+                ri._refreshTransitionOpacity();
+                if (ri.segment._transitionOpacity >= 1.0) {
+                    ri.getRenderedNodesNeighbors(opaqueNodes);
+                    opaqueNodes.push(ri);
+                }
+                else {
+                    for (let j = 0; j < ri._fadingNodes.length; j++) {
+                        let rij = ri._fadingNodes[j];
+                        if (rij.segment && rij.segment._transitionOpacity >= 1.0) {
+                            rij.getRenderedNodesNeighbors(opaqueNodes);
+                            opaqueNodes.push(rij);
+                        }
+                    }
+                }
             }
         }
     }
+    _renderScreenNodesPASSNoAtmos() {
+        let cam = this.renderer.activeCamera;
+        let sh = this._setUniformsNoAtmos(cam);
+        //
+        // PASS 0: rendering base slice of layers, which is often zero height
+        this._renderingScreenNodes(sh, cam, this._renderedNodesInFrustum[cam.currentFrustumIndex]);
+    }
+    _renderScreenNodesPASSAtmos() {
+        let cam = this.renderer.activeCamera;
+        let sh = this._setUniformsAtmos(cam);
+        //
+        // PASS 0: rendering base slice of layers, which is often zero height
+        this._renderingScreenNodes(sh, cam, this._renderedNodesInFrustum[cam.currentFrustumIndex]);
+    }
+    _renderScreenNodesWithHeightPASSNoAtmos() {
+        let cam = this.renderer.activeCamera;
+        let sh = this._setUniformsNoAtmos(cam);
+        //
+        // PASS 1: rendering slices, and layers with heights, without transition opacity effect
+        this._renderingScreenNodesWithHeight(sh, cam, this._renderedNodesInFrustum[cam.currentFrustumIndex]);
+    }
+    _renderScreenNodesWithHeightPASSAtmos() {
+        let cam = this.renderer.activeCamera;
+        let sh = this._setUniformsAtmos(cam);
+        //
+        // PASS 1: rendering slices, and layers with heights, without transition opacity effect
+        this._renderingScreenNodesWithHeight(sh, cam, this._renderedNodesInFrustum[cam.currentFrustumIndex]);
+    }
     _globalPreDraw() {
         let cam = this.camera;
         // Might be it's better to replace it in setTerrain,
@@ -755,7 +875,7 @@ export class Planet extends RenderNode {
         if (this.camera.isFirstPass) {
             this.camera.update();
             if (this._skipPreRender && this._collectRenderNodesIsActive) {
-                this._collectRenderNodes();
+                this._collectRenderNodes(this.camera);
             }
             this._skipPreRender = true;
             this.transformLights();
@@ -777,6 +897,7 @@ export class Planet extends RenderNode {
     }
     /**
      * Render node callback.
+     * Frame function is called for each renderer activrCamera frustum.
      * @public
      * @override
      */
@@ -813,14 +934,11 @@ export class Planet extends RenderNode {
         this._collectRenderNodesIsActive = true;
         this.camera.setTerrainCollisionActivity(true);
     }
-    _renderScreenNodesPASSNoAtmos() {
+    _setUniformsNoAtmos(cam) {
         let sh, shu;
         let renderer = this.renderer;
         let h = renderer.handler;
         let gl = h.gl;
-        let cam = renderer.activeCamera;
-        let firstPass = cam.isFirstPass;
-        let frustumIndex = cam.currentFrustumIndex;
         gl.enable(gl.CULL_FACE);
         renderer.enableBlendOneSrcAlpha();
         if (this.lightEnabled) {
@@ -862,54 +980,13 @@ export class Planet extends RenderNode {
         }
         gl.uniform3fv(shu.eyePositionHigh, cam.eyeHigh);
         gl.uniform3fv(shu.eyePositionLow, cam.eyeLow);
-        //
-        // drawing planet nodes
-        //
-        let rn = this._renderedNodesInFrustum[frustumIndex], sl = this._visibleTileLayerSlices;
-        if (sl.length) {
-            let sli = sl[0];
-            for (let i = sli.length - 1; i >= 0; --i) {
-                let li = sli[i];
-                if (li._fading && firstPass && li._refreshFadingOpacity()) {
-                    sli.splice(i, 1);
-                }
-            }
-        }
-        let isEq = this.terrain.equalizeVertices;
-        let i = rn.length;
-        while (i--) {
-            let s = rn[i].segment;
-            isEq && s.equalize();
-            s.readyToEngage && s.engage();
-            s.screenRendering(sh, sl[0], 0);
-        }
-        gl.enable(gl.POLYGON_OFFSET_FILL);
-        //gl.disable(gl.CULL_FACE);
-        for (let j = 1, len = sl.length; j < len; j++) {
-            let slj = sl[j];
-            for (i = slj.length - 1; i >= 0; --i) {
-                let li = slj[i];
-                if (li._fading && firstPass && li._refreshFadingOpacity()) {
-                    slj.splice(i, 1);
-                }
-            }
-            gl.polygonOffset(0, -j);
-            i = rn.length;
-            while (i--) {
-                rn[i].segment.screenRendering(sh, sl[j], j, this.transparentTexture, true);
-            }
-        }
-        //gl.enable(gl.CULL_FACE);
-        gl.disable(gl.POLYGON_OFFSET_FILL);
+        return sh;
     }
-    _renderScreenNodesPASSAtmos() {
+    _setUniformsAtmos(cam) {
         let sh, shu;
         let renderer = this.renderer;
         let h = renderer.handler;
         let gl = h.gl;
-        let cam = renderer.activeCamera;
-        let firstPass = cam.isFirstPass;
-        let frustumIndex = cam.currentFrustumIndex;
         gl.enable(gl.CULL_FACE);
         renderer.enableBlendOneSrcAlpha();
         if (this.lightEnabled) {
@@ -961,10 +1038,14 @@ export class Planet extends RenderNode {
         }
         gl.uniform3fv(shu.eyePositionHigh, cam.eyeHigh);
         gl.uniform3fv(shu.eyePositionLow, cam.eyeLow);
-        //
-        // drawing planet nodes
-        //
-        let rn = this._renderedNodesInFrustum[frustumIndex], sl = this._visibleTileLayerSlices;
+        return sh;
+    }
+    /**
+     * Drawing nodes
+     */
+    _renderingScreenNodes(sh, cam, renderedNodes) {
+        let firstPass = cam.isFirstPass;
+        let sl = this._visibleTileLayerSlices;
         if (sl.length) {
             let sli = sl[0];
             for (let i = sli.length - 1; i >= 0; --i) {
@@ -974,30 +1055,65 @@ export class Planet extends RenderNode {
                 }
             }
         }
+        let nodes = new Map;
+        let transparentSegments = [];
         let isEq = this.terrain.equalizeVertices;
-        let i = rn.length;
+        let i = renderedNodes.length;
+        let _renderingFadingNodes = this._renderingFadingNodes;
+        if (cam.slope > 0.78 || cam.getAltitude() > 10000) {
+            _renderingFadingNodes = this._renderingFadingNodesNoDepth;
+        }
         while (i--) {
-            let s = rn[i].segment;
-            isEq && s.equalize();
-            s.readyToEngage && s.engage();
-            s.screenRendering(sh, sl[0], 0);
+            let ri = renderedNodes[i];
+            let s = ri.segment;
+            _renderingFadingNodes(nodes, sh, ri, sl[0], 0, transparentSegments);
+            if (s._transitionOpacity < 1) {
+                transparentSegments.push(s);
+            }
+            else {
+                isEq && s.equalize();
+                s.readyToEngage && s.engage();
+                s.screenRendering(sh, sl[0], 0);
+            }
+        }
+        for (let j = 0; j < transparentSegments.length; j++) {
+            let tj = transparentSegments[j];
+            isEq && tj.equalize();
+            tj.readyToEngage && tj.engage();
+            tj.screenRendering(sh, sl[0], 0);
         }
+    }
+    _renderingScreenNodesWithHeight(sh, cam, renderedNodes) {
+        let gl = this.renderer.handler.gl;
+        let firstPass = cam.isFirstPass;
+        let sl = this._visibleTileLayerSlices;
         gl.enable(gl.POLYGON_OFFSET_FILL);
+        gl.disable(gl.CULL_FACE);
+        let nodes = new Map;
+        let transparentSegments = [];
         for (let j = 1, len = sl.length; j < len; j++) {
             let slj = sl[j];
-            for (i = slj.length - 1; i >= 0; --i) {
+            for (let i = slj.length - 1; i >= 0; --i) {
                 let li = slj[i];
                 if (li._fading && firstPass && li._refreshFadingOpacity()) {
                     slj.splice(i, 1);
                 }
             }
             gl.polygonOffset(0, -j);
-            i = rn.length;
+            let i = renderedNodes.length;
             while (i--) {
-                rn[i].segment.screenRendering(sh, sl[j], j, this.transparentTexture, true);
+                let ri = renderedNodes[i];
+                this._renderingFadingNodes(nodes, sh, ri, sl[j], j, transparentSegments);
+                if (ri.segment._transitionOpacity < 1) {
+                    ri.segment.initSlice(j);
+                }
+                else {
+                    ri.segment.screenRendering(sh, sl[j], j, this.transparentTexture, true);
+                }
             }
         }
         gl.disable(gl.POLYGON_OFFSET_FILL);
+        gl.enable(gl.CULL_FACE);
     }
     _renderDistanceFramebufferPASS() {
         if (!this.terrain.isEmpty) {
@@ -1031,10 +1147,6 @@ export class Planet extends RenderNode {
         sh = h.programs.drawnode_colorPicking._program;
         let shu = sh.uniforms;
         let cam = renderer.activeCamera;
-        // Special blend
-        // gl.enable(gl.BLEND);
-        // gl.blendEquation(gl.FUNC_ADD);
-        // gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
         gl.enable(gl.CULL_FACE);
         gl.uniformMatrix4fv(shu.viewMatrix, false, cam.getViewMatrix());
         gl.uniformMatrix4fv(shu.projectionMatrix, false, cam.getProjectionMatrix());
@@ -1047,6 +1159,8 @@ export class Planet extends RenderNode {
         while (i--) {
             rn[i].segment.colorPickingRendering(sh, sl[0], 0);
         }
+        // Here is set blending for transparent overlays
+        renderer.enableBlendDefault();
         gl.enable(gl.POLYGON_OFFSET_FILL);
         for (let j = 1, len = sl.length; j < len; j++) {
             i = rn.length;

package/lib/js/segment/Segment.d.ts

@@ -169,6 +169,8 @@ declare class Segment {
     readyToEngage: boolean;
     plainProcessing: boolean;
     normalMapTexturePtr: WebGLTextureExt | null;
+    _transitionOpacity: number;
+    _transitionTimestamp: number;
     constructor(node: Node, planet: Planet, tileZoom: number, extent: Extent);
     checkZoom(): boolean;
     /**
@@ -220,6 +222,7 @@ declare class Segment {
     deleteMaterials(): void;
     deleteElevations(): void;
     clearSegment(): void;
+    childrenInitialized(): boolean;
     destroySegment(): void;
     /**
      * @todo: looks like it could be simplified in Segment contructor
@@ -255,8 +258,11 @@ declare class Segment {
      *
      */
     protected _getLayerExtentOffset(layer: Layer): [number, number, number, number];
-    screenRendering(sh: Program, layerSlice: Layer[], sliceIndex: number, defaultTexture?: WebGLTextureExt | null, isOverlay?: boolean): void;
+    initSlice(sliceIndex: number): Slice;
+    screenRendering(sh: Program, layerSlice: Layer[], sliceIndex: number, defaultTexture?: WebGLTextureExt | null, isOverlay?: boolean, forcedOpacity?: number): void;
     heightPickingRendering(sh: Program, layerSlice: Layer[]): void;
+    increaseTransitionOpacity(): void;
+    fadingTransitionOpacity(): void;
     colorPickingRendering(sh: Program, layerSlice: Layer[], sliceIndex: number, defaultTexture?: WebGLTextureExt | null, isOverlay?: boolean): void;
     depthRendering(sh: Program, layerSlice: Layer[]): void;
     protected _getIndexBuffer(): WebGLBufferExt;

package/lib/js/segment/Segment.js

@@ -106,6 +106,8 @@ class Segment {
         this.readyToEngage = false;
         this.plainProcessing = false;
         this.normalMapTexturePtr = null;
+        this._transitionOpacity = 1.0;
+        this._transitionTimestamp = 0;
     }
     checkZoom() {
         return this.tileZoom < this.planet.terrain._maxNodeZoom;
@@ -277,7 +279,7 @@ class Segment {
         }
     }
     _checkEqualization(neighborSide, neigborNode) {
-        return neigborNode && this.tileZoom >= neigborNode.segment.tileZoom &&
+        return neigborNode && neigborNode.segment && this.tileZoom >= neigborNode.segment.tileZoom &&
             this.node.equalizedSideWithNodeId[neighborSide] !== neigborNode.equalizedSideWithNodeId[OPSIDE[neighborSide]];
     }
     equalize() {
@@ -430,10 +432,11 @@ class Segment {
     }
     _normalMapEdgeEqualize(side) {
         let nn = this.node.neighbors;
-        let n = nn[side][0];
+        let nns = nn[side];
+        let n = nns && nns[0];
         let maxZ = this.planet.terrain.maxZoom;
         if (this.tileZoom === maxZ) {
-            if (!(nn[0].length || nn[1].length || nn[2].length || nn[3].length)) {
+            if (nns && !(nn[0].length || nn[1].length || nn[2].length || nn[3].length)) {
                 n = this.node.getEqualNeighbor(side);
             }
         }
@@ -556,6 +559,10 @@ class Segment {
         this.deleteMaterials();
         this.deleteElevations();
     }
+    childrenInitialized() {
+        let n = this.node.nodes;
+        return n.length === 4 && n[0].segment.initialized && n[1].segment.initialized && n[2].segment.initialized && n[3].segment.initialized;
+    }
     destroySegment() {
         this.clearSegment();
         let i = this._slices.length;
@@ -913,7 +920,18 @@ class Segment {
         const dSize_y = (v0t.northEast.lat - v0t.southWest.lat) / sSize_y;
         return [dV0s_x, dV0s_y, dSize_x, dSize_y];
     }
-    screenRendering(sh, layerSlice, sliceIndex, defaultTexture, isOverlay = false) {
+    initSlice(sliceIndex) {
+        let slice = this._slices[sliceIndex];
+        if (!slice) {
+            slice = this._slices[sliceIndex] = new Slice(this);
+        }
+        else {
+            //TODO: optimization!!!
+            slice.layers = [];
+        }
+        return slice;
+    }
+    screenRendering(sh, layerSlice, sliceIndex, defaultTexture, isOverlay = false, forcedOpacity) {
         const gl = this.handler.gl;
         const sha = sh.attributes;
         const shu = sh.uniforms;
@@ -933,14 +951,7 @@ class Segment {
         gl.uniform1i(shu.defaultTexture, p.SLICE_SIZE + 2);
         let n = 0, i = 0;
         let notEmpty = false;
-        let slice = this._slices[sliceIndex];
-        if (!slice) {
-            slice = this._slices[sliceIndex] = new Slice(this);
-        }
-        else {
-            //TODO: optimization!!!
-            slice.layers = [];
-        }
+        let slice = this.initSlice(sliceIndex);
         this._indexBuffer = this._getIndexBuffer();
         while (li) {
             if (this.layerOverlap(li) &&
@@ -965,6 +976,7 @@ class Segment {
             li = layerSlice[i];
         }
         if (notEmpty || !isOverlay) {
+            gl.uniform1f(shu.transitionOpacity, forcedOpacity || this._transitionOpacity > 1.0 ? 1.0 : this._transitionOpacity);
             gl.uniform1i(shu.samplerCount, n);
             gl.uniform1f(shu.height, currHeight);
             gl.uniform1iv(shu.samplerArr, p._samplerArr);
@@ -1012,6 +1024,22 @@ class Segment {
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
         gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer.numItems, gl.UNSIGNED_INT, 0);
     }
+    increaseTransitionOpacity() {
+        //this._transitionOpacity += 0.01;
+        this._transitionOpacity += (window.performance.now() - this._transitionTimestamp) / this.planet.transitionTime;
+        this._transitionTimestamp = window.performance.now();
+        if (this._transitionOpacity > 1.0) {
+            this._transitionOpacity = 1.0;
+        }
+    }
+    fadingTransitionOpacity() {
+        //this._transitionOpacity -= 0.01;
+        this._transitionOpacity -= (window.performance.now() - this._transitionTimestamp) / this.planet.transitionTime;
+        this._transitionTimestamp = window.performance.now();
+        if (this._transitionOpacity < 0.0) {
+            this._transitionOpacity = 0;
+        }
+    }
     colorPickingRendering(sh, layerSlice, sliceIndex, defaultTexture, isOverlay = false) {
         const gl = this.handler.gl;
         const sha = sh.attributes;

package/lib/js/shaders/drawnode.js

@@ -299,7 +299,8 @@ export function drawnode_screen_wl_webgl2NoAtmos() {
             ambient: "vec3",
             specular: "vec4",
             camHeight: "float",
-            nightTextureCoefficient: "float"
+            nightTextureCoefficient: "float",
+            transitionOpacity: "float"
         }, attributes: {
             aVertexPositionHigh: "vec3",
             aVertexPositionLow: "vec3",
@@ -373,6 +374,8 @@ export function drawnode_screen_wl_webgl2NoAtmos() {
 
             uniform int samplerCount;
             uniform float nightTextureCoefficient;
+            
+            uniform float transitionOpacity;
                 
             uniform float camHeight;
 
@@ -424,8 +427,10 @@ export function drawnode_screen_wl_webgl2NoAtmos() {
                 vec4 lightWeighting = vec4(ambient + diffuse * diffuseLightWeighting + night, 1.0);
                 
                 diffuseColor = texture( defaultTexture, vTextureCoord.xy );
+                
                 if( samplerCount == 0 ) {
                     diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
@@ -434,29 +439,34 @@ export function drawnode_screen_wl_webgl2NoAtmos() {
                 blend(diffuseColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
                 if( samplerCount == 1 ) {                
                     diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
                 if( samplerCount == 2 ) {
                     diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
                 if( samplerCount == 3 ) {
                     diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
                 if( samplerCount == 4 ) {
                     diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
                 diffuseColor = diffuseColor * lightWeighting + vec4(spec, 0.0);
+                diffuseColor *= transitionOpacity;
             }`
     });
 }
@@ -486,7 +496,8 @@ export function drawnode_screen_wl_webgl2Atmos() {
             scatteringTexture: "sampler2D",
             camHeight: "float",
             nightTextureCoefficient: "float",
-            maxMinOpacity: "vec2"
+            maxMinOpacity: "vec2",
+            transitionOpacity: "float"
         }, attributes: {
             aVertexPositionHigh: "vec3",
             aVertexPositionLow: "vec3",
@@ -566,6 +577,8 @@ export function drawnode_screen_wl_webgl2Atmos() {
             
             uniform vec2 maxMinOpacity;                
             uniform float camHeight;
+            
+            uniform float transitionOpacity;
 
             in vec4 vTextureCoord;
             in vec3 v_vertex;
@@ -749,6 +762,7 @@ export function drawnode_screen_wl_webgl2Atmos() {
                 diffuseColor = texture( defaultTexture, vTextureCoord.xy );
                 if( samplerCount == 0 ) {
                     diffuseColor = mix(diffuseColor * lightWeighting, atmosColor, fadingOpacity) + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
@@ -757,29 +771,34 @@ export function drawnode_screen_wl_webgl2Atmos() {
                 blend(diffuseColor, samplerArr[0], tileOffsetArr[0], layerOpacityArr[0]);
                 if( samplerCount == 1 ) {                
                     diffuseColor = mix(diffuseColor * lightWeighting, atmosColor * diffuseColor.a, fadingOpacity) + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[1], tileOffsetArr[1], layerOpacityArr[1]);
                 if( samplerCount == 2 ) {
                     diffuseColor = mix(diffuseColor * lightWeighting, atmosColor * diffuseColor.a, fadingOpacity) + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[2], tileOffsetArr[2], layerOpacityArr[2]);
                 if( samplerCount == 3 ) {
                     diffuseColor = mix(diffuseColor * lightWeighting, atmosColor * diffuseColor.a, fadingOpacity) + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[3], tileOffsetArr[3], layerOpacityArr[3]);
                 if( samplerCount == 4 ) {
                     diffuseColor = mix(diffuseColor * lightWeighting, atmosColor * diffuseColor.a, fadingOpacity) + vec4(spec, 0.0);
+                    diffuseColor *= transitionOpacity;
                     return;
                 }
 
                 blend(diffuseColor, samplerArr[4], tileOffsetArr[4], layerOpacityArr[4]);
                 diffuseColor = mix(diffuseColor * lightWeighting, atmosColor * diffuseColor.a, fadingOpacity) + vec4(spec, 0.0);
+                diffuseColor *= transitionOpacity;
             }`
     });
 }