@openglobus/og 0.11.5 → 0.12.0

package/src/og/quadTree/Node.js

@@ -7,7 +7,6 @@ import { Vec3 } from "../math/Vec3.js";
 import { MAX_LAT } from "../mercator.js";
 import { EPSG3857 } from "../proj/EPSG3857.js";
 import { EPSG4326 } from "../proj/EPSG4326.js";
-import { MAX_NORMAL_ZOOM } from "../segment/Segment.js";
 import { getMatrixSubArray, getMatrixSubArrayBoundsExt } from "../utils/shared.js";
 import {
     COMSIDE,
@@ -30,8 +29,6 @@ import {
     WALKTHROUGH
 } from "./quadTree.js";
 
-const VISIBLE_HEIGHT = 1400000.0;
-
 let _tempHigh = new Vec3(),
     _tempLow = new Vec3();
 
@@ -67,6 +64,7 @@ class Node {
 
     constructor(SegmentPrototype, planet, partId, parent, id, tileZoom, extent) {
         this.SegmentPrototype = SegmentPrototype;
+        planet._createdNodesCount++;
         this.planet = planet;
         this.parentNode = parent;
         this.partId = partId;
@@ -84,7 +82,6 @@ class Node {
         this._cameraInside = false;
         this.inFrustum = 0;
         this.createBounds();
-        this.planet._createdNodesCount++;
     }
 
     createChildrenNodes() {
@@ -102,45 +99,10 @@ class Node {
         var c = new LonLat(sw.lon + size_x, sw.lat + size_y);
         var nd = this.nodes;
 
-        nd[NW] = new Node(
-            this.SegmentPrototype,
-            p,
-            NW,
-            this,
-            id,
-            z,
-            new Extent(new LonLat(sw.lon, sw.lat + size_y), new LonLat(sw.lon + size_x, ne.lat))
-        );
-
-        nd[NE] = new Node(
-            this.SegmentPrototype,
-            p,
-            NE,
-            this,
-            id,
-            z,
-            new Extent(c, new LonLat(ne.lon, ne.lat))
-        );
-
-        nd[SW] = new Node(
-            this.SegmentPrototype,
-            p,
-            SW,
-            this,
-            id,
-            z,
-            new Extent(new LonLat(sw.lon, sw.lat), c)
-        );
-
-        nd[SE] = new Node(
-            this.SegmentPrototype,
-            p,
-            SE,
-            this,
-            id,
-            z,
-            new Extent(new LonLat(sw.lon + size_x, sw.lat), new LonLat(ne.lon, sw.lat + size_y))
-        );
+        nd[NW] = new Node(this.SegmentPrototype, p, NW, this, id, z, new Extent(new LonLat(sw.lon, sw.lat + size_y), new LonLat(sw.lon + size_x, ne.lat)));
+        nd[NE] = new Node(this.SegmentPrototype, p, NE, this, id, z, new Extent(c, new LonLat(ne.lon, ne.lat)));
+        nd[SW] = new Node(this.SegmentPrototype, p, SW, this, id, z, new Extent(new LonLat(sw.lon, sw.lat), c));
+        nd[SE] = new Node(this.SegmentPrototype, p, SE, this, id, z, new Extent(new LonLat(sw.lon + size_x, sw.lat), new LonLat(ne.lon, sw.lat + size_y)));
     }
 
     createBounds() {
@@ -153,6 +115,15 @@ class Node {
         } else {
             seg.createBoundsByParent();
         }
+
+        let x = seg.bsphere.center.x,
+            y = seg.bsphere.center.y,
+            z = seg.bsphere.center.z;
+
+        let length = 1.0 / Math.sqrt(x * x + y * y + z * z);
+        seg.centerNormal.x = x * length;
+        seg.centerNormal.y = y * length;
+        seg.centerNormal.z = z * length;
     }
 
     getState() {
@@ -204,15 +175,10 @@ class Node {
     }
 
     renderTree(cam, maxZoom, terrainReadySegment, stopLoading) {
-        if (
-            this.planet._renderedNodes.length >= MAX_RENDERED_NODES ||
-            this.planet._nodeCounterError_ > 2000
-        ) {
+        if (this.planet._renderedNodes.length >= MAX_RENDERED_NODES) {
             return;
         }
 
-        this.planet._nodeCounterError_++;
-
         this.state = WALKTHROUGH;
 
         this.neighbors[0] = null;
@@ -279,30 +245,52 @@ class Node {
             }
         }
 
-    if (this.inFrustum || this._cameraInside || seg.tileZoom < 3) {
-        let h = cam._lonLat.height;
+        if (this.inFrustum || this._cameraInside || seg.tileZoom < 3) {
+            let h = cam._lonLat.height;
 
-            let altVis =
-                cam.eye.distance(seg.bsphere.center) - seg.bsphere.radius <
-                VISIBLE_DISTANCE * Math.sqrt(h) ||
+            let eye = cam.eye;
+            let horizonDist = eye.length2() - this.planet.ellipsoid._b2;
+
+            let altVis = seg.tileZoom > 19 ||
                 (seg.tileZoom < 4 && !seg.terrainReady) ||
                 seg.tileZoom < 2;
 
+            if (h > 21000) {
+                altVis = altVis || eye.distance2(seg._sw) < horizonDist
+                    || eye.distance2(seg._nw) < horizonDist
+                    || eye.distance2(seg._ne) < horizonDist
+                    || eye.distance2(seg._se) < horizonDist;
+            } else {
+                altVis = altVis || cam.eye.distance(seg.bsphere.center) - seg.bsphere.radius < VISIBLE_DISTANCE * Math.sqrt(h);
+            }
+
             if ((this.inFrustum && (altVis || h > 10000.0)) || this._cameraInside) {
                 seg._collectVisibleNodes();
             }
 
             if (seg.tileZoom < 2 && seg.normalMapReady) {
                 this.traverseNodes(cam, maxZoom, terrainReadySegment, stopLoading);
-            } else if ((!maxZoom && seg.acceptForRendering(cam)) || seg.tileZoom === maxZoom) {
-                this.prepareForRendering(cam, altVis, this.inFrustum, terrainReadySegment, stopLoading);
-            } else if (seg.tileZoom < planet.terrain._maxNodeZoom && seg.terrainReady) {
-                // Deleting terrainReady here, you have to remove
-                // this.appliedTerrainNodeId !== pn.nodeId in whileTerrainLoading,
-                // also have to fix createBoundsByParent(*)
+            } else if (seg.terrainReady && (
+                !maxZoom && cam.projectedSize(seg.bsphere.center, seg._plainRadius) < planet._lodSize ||
+                maxZoom && ((seg.tileZoom === maxZoom) || !altVis))) {
+
+                if (altVis) {
+                    seg.loadTile = true;
+                    this.renderNode(this.inFrustum, !this.inFrustum, terrainReadySegment, stopLoading);
+                } else {
+                    this.state = NOTRENDERING;
+                }
+
+            } else if (
+                seg.terrainReady &&
+                seg.tileZoom < planet.terrain._maxNodeZoom &&
+                (!maxZoom || maxZoom && cam.projectedSize(seg.bsphere.center, seg.bsphere.radius) > this.planet._maxLodSize)) {
                 this.traverseNodes(cam, maxZoom, seg, stopLoading);
+            } else if (altVis) {
+                seg.loadTile = false;
+                this.renderNode(this.inFrustum, !this.inFrustum, terrainReadySegment, stopLoading);
             } else {
-                this.prepareForRendering(cam, altVis, this.inFrustum, terrainReadySegment, stopLoading);
+                this.state = NOTRENDERING;
             }
         } else {
             this.state = NOTRENDERING;
@@ -322,39 +310,6 @@ class Node {
         n[3].renderTree(cam, maxZoom, terrainReadySegment, stopLoading);
     }
 
-    prepareForRendering(
-        cam,
-        altVis,
-        inFrustum,
-        terrainReadySegment,
-        stopLoading
-    ) {
-        let seg = this.segment;
-
-        if (cam._lonLat.height < VISIBLE_HEIGHT) {
-            if (altVis) {
-                this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
-            } else {
-                this.state = NOTRENDERING;
-            }
-        } else {
-            if (seg.tileZoom < 2) {
-                this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
-            } else if (seg.tileZoom > MAX_NORMAL_ZOOM) {
-                this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
-            } else if (
-                seg._swNorm.dot(cam._n) > 0.0 ||
-                seg._nwNorm.dot(cam._n) > 0.0 ||
-                seg._neNorm.dot(cam._n) > 0.0 ||
-                seg._seNorm.dot(cam._n) > 0.0
-            ) {
-                this.renderNode(inFrustum, !inFrustum, terrainReadySegment, stopLoading);
-            } else {
-                this.state = NOTRENDERING;
-            }
-        }
-    }
-
     renderNode(inFrustum, onlyTerrain, terrainReadySegment, stopLoading) {
         var seg = this.segment;
 
@@ -376,7 +331,7 @@ class Node {
         }
 
         // Create normal map texture
-        if (seg.planet.lightEnabled && !seg.normalMapReady && !seg.parentNormalMapReady) {
+        if (seg.planet.lightEnabled && !seg.normalMapReady /*&& !seg.parentNormalMapReady*/) {
             this.whileNormalMapCreating();
         }
 

package/src/og/quadTree/quadTree.js

@@ -1,7 +1,7 @@
 "use strict";
 
 export const VISIBLE_DISTANCE = 3570.0;
-export const MAX_RENDERED_NODES = 700;
+export const MAX_RENDERED_NODES = 1000;
 
 export const NW = 0;
 export const NE = 1;

package/src/og/renderer/Renderer.js

@@ -16,6 +16,7 @@ import { TextureAtlas } from "../utils/TextureAtlas.js";
 import * as arial from "../arial.js";
 import { depth } from "../shaders/depth.js";
 import { ARIAL_FONT_B64 } from "../res/images.js";
+import { LabelWorker } from "../entity/LabelWorker.js";
 
 let __pickingCallbackCounter__ = 0;
 
@@ -55,7 +56,6 @@ let __depthCallbackCounter__ = 0;
  * @fires og.RendererEvents#touchenter
  */
 class Renderer {
-
     constructor(handler, params) {
         params = params || {};
 
@@ -73,9 +73,9 @@ class Renderer {
          */
         this.handler = handler;
 
-        this.exposure = 4;
+        this.exposure = 3.01;
 
-        this.gamma = 0.5;
+        this.gamma = 0.47;
 
         this.whitepoint = 1.0;
 
@@ -159,13 +159,11 @@ class Renderer {
 
         this.depthFramebuffer = null;
 
-        this._msaa = params.msaa || 8;
+        this._msaa = params.msaa || 4;
         this._internalFormat = "RGBA16F";
         this._format = "RGBA";
         this._type = "FLOAT";
 
-        this._screenScale = params.screenScale || 1.0;
-
         this.sceneFramebuffer = null;
 
         this.blitFramebuffer = null;
@@ -184,8 +182,7 @@ class Renderer {
          * @private
          * @type {Array.<number>} - (exactly 3 entries)
          */
-        this._prevPickingColor = [0, 0, 0];
-
+        this._prevPickingColor = new Uint8Array(4);
         this._tempPickingColor_ = new Uint8Array(4);
 
         this._initialized = false;
@@ -212,6 +209,8 @@ class Renderer {
         }
 
         this._currentOutput = "screen";
+
+        this.labelWorker = new LabelWorker();
     }
 
     /**
@@ -222,11 +221,6 @@ class Renderer {
         this.events.active = activity;
     }
 
-    setScreenScale(scale) {
-        this._screenScale = scale;
-        this._resize();
-    }
-
     addDepthCallback(sender, callback) {
         var id = __depthCallbackCounter__++;
         this._depthCallbacks.push({
@@ -331,7 +325,7 @@ class Renderer {
      * @returns {number} -
      */
     getWidth() {
-        return this.handler.canvas.width;
+        return this.handler.canvas.clientWidth;
     }
 
     /**
@@ -340,7 +334,7 @@ class Renderer {
      * @returns {number} -
      */
     getHeight() {
-        return this.handler.canvas.height;
+        return this.handler.canvas.clientHeight;
     }
 
     /**
@@ -350,7 +344,7 @@ class Renderer {
      */
     getCenter() {
         var cnv = this.handler.canvas;
-        return new Vec2(Math.round(cnv.width * 0.5), Math.round(cnv.height * 0.5));
+        return new Vec2(Math.round(cnv.clientWidth * 0.5), Math.round(cnv.clientHeight * 0.5));
     }
 
     /**
@@ -429,20 +423,10 @@ class Renderer {
             useDepth: false
         }).init();
 
-        //this.depthFramebuffer = new Framebuffer(this.handler, {
-        //    size: 2,
-        //    internalFormat: ["RGBA", "RGBA"],
-        //    format: ["RGBA", "RGBA"],
-        //    type: ["UNSIGNED_BYTE", "UNSIGNED_BYTE"],
-        //    attachment: ["COLOR_ATTACHMENT", "COLOR_ATTACHMENT"],
-        //    useDepth: true
-        //}).init();
         this.screenDepthFramebuffer = new Framebuffer(this.handler, {
             useDepth: false
         }).init();
 
-        this.readPixels = () => { };
-
         if (this.handler.gl.type === "webgl") {
             this.sceneFramebuffer = new Framebuffer(this.handler);
             this.sceneFramebuffer.init();
@@ -477,7 +461,7 @@ class Renderer {
                 internalFormat: this._internalFormat,
                 format: this._format,
                 type: this._type,
-                filter: "LINEAR"
+                filter: "NEAREST"
             }).init();
 
             this.toneMappingFramebuffer = new Framebuffer(this.handler, {
@@ -495,8 +479,8 @@ class Renderer {
         }
 
         this.handler.onCanvasResize = () => {
+            this.resize();
             this.events.dispatch(this.events.resize, this.handler.canvas);
-            this._resize();
         };
 
         this._screenFrameCornersBuffer = this.handler.createArrayBuffer(
@@ -523,24 +507,22 @@ class Renderer {
         }
     }
 
-    _resize() {
-        let obj = this.handler.canvas;
-        this.activeCamera.setAspectRatio(obj.clientWidth / obj.clientHeight);
-        this.sceneFramebuffer.setSize(
-            obj.clientWidth * this._screenScale,
-            obj.clientHeight * this._screenScale
-        );
+    resize() {
+        let c = this.handler.canvas;
+        this.activeCamera.setAspectRatio(c.width / c.height);
+        this.sceneFramebuffer.setSize(c.width, c.height);
+
         this.blitFramebuffer &&
-            this.blitFramebuffer.setSize(
-                obj.clientWidth * this._screenScale,
-                obj.clientHeight * this._screenScale,
-                true
-            );
+            this.blitFramebuffer.setSize(c.width, c.height, true);
+
         this.toneMappingFramebuffer &&
-            this.toneMappingFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
-        this.depthFramebuffer && this.depthFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.toneMappingFramebuffer.setSize(c.width, c.height, true);
+
+        this.depthFramebuffer &&
+            this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
+
         this.screenDepthFramebuffer &&
-            this.screenDepthFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
 
         if (this.handler.gl.type === "webgl") {
             this.screenTexture.screen = this.sceneFramebuffer.textures[0];
@@ -610,7 +592,11 @@ class Renderer {
 
     getMaxMSAA(internalFormat) {
         var gl = this.handler.gl;
-        let samples = gl.getInternalformatParameter(gl.RENDERBUFFER, gl[internalFormat], gl.SAMPLES);
+        let samples = gl.getInternalformatParameter(
+            gl.RENDERBUFFER,
+            gl[internalFormat],
+            gl.SAMPLES
+        );
         return samples[0];
     }
 
@@ -671,6 +657,12 @@ class Renderer {
                 ec[i]._fadingOpacity && ec[i].labelHandler.draw();
             }
 
+            //geoObject
+            i = ec.length;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].geoObjectHandler.draw();
+            }
+
             // rays
             i = ec.length;
             while (i--) {
@@ -735,7 +727,12 @@ class Renderer {
 
         let h = this.handler;
 
-        h.gl.clearColor(this.backgroundColor.x, this.backgroundColor.y, this.backgroundColor.z, 1.0);
+        h.gl.clearColor(
+            this.backgroundColor.x,
+            this.backgroundColor.y,
+            this.backgroundColor.z,
+            1.0
+        );
         h.gl.clear(h.gl.COLOR_BUFFER_BIT | h.gl.DEPTH_BUFFER_BIT);
 
         e.dispatch(e.draw, this);
@@ -745,6 +742,8 @@ class Renderer {
 
         let frustums = this.activeCamera.frustums;
 
+        let anyEvent = this.events.mouseState.anyEvent();
+
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
@@ -757,17 +756,19 @@ class Renderer {
             }
             this._drawEntityCollections();
 
-            this._drawDepthBuffer(k);
-
-            // Rendering picking callbacks and refresh pickingColor
-            this._drawPickingBuffer(k);
+            if (anyEvent) {
+                this._drawPickingBuffer(k);
+            }
         }
 
         sfb.deactivate();
 
         this.blitFramebuffer && sfb.blitTo(this.blitFramebuffer);
 
-        if (e.mouseState.anyEvent()) {
+        if (anyEvent) {
+            // It works ONLY for 0 (closest) frustum
+            this._drawDepthBuffer();
+
             this._readPickingColor();
         }
 
@@ -838,99 +839,81 @@ class Renderer {
         gl.enable(gl.DEPTH_TEST);
     }
 
-    /**
-     * Returns picking object by screen coordinates
-     * @param {number} x - X position
-     * @param {number} y - Y position
-     * @return {Object} -
-     */
-    getPickingObject(x, y) {
-        let cnv = this.renderer.handler.canvas,
-            c = new Uint8Array(3);
-        this.readPixels(c, x / cnv.width, (cnv.height - y) / cnv.height, 1);
-        return this.colorObjects[c[0] + "_" + c[1] + "_" + c[2]];
-    }
-
     /**
      * Draw picking objects framebuffer.
      * @private
      */
     _drawPickingBuffer(frustumIndex) {
-        if (this.events.mouseState.anyEvent()) {
-            this.pickingFramebuffer.activate();
-
-            var h = this.handler;
-            var gl = h.gl;
+        this.pickingFramebuffer.activate();
 
-            if (frustumIndex === this.activeCamera.FARTHEST_FRUSTUM_INDEX) {
-                gl.clearColor(0.0, 0.0, 0.0, 1.0);
-                gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-            } else {
-                gl.clear(gl.DEPTH_BUFFER_BIT);
-            }
+        var h = this.handler;
+        var gl = h.gl;
 
-            gl.disable(h.gl.BLEND);
+        if (frustumIndex === this.activeCamera.FARTHEST_FRUSTUM_INDEX) {
+            gl.clearColor(0.0, 0.0, 0.0, 1.0);
+            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        } else {
+            gl.clear(gl.DEPTH_BUFFER_BIT);
+        }
 
-            var dp = this._pickingCallbacks;
-            var i = dp.length;
-            while (i--) {
-                /**
-                 * This callback renders picking frame.
-                 * @callback og.Renderer~pickingCallback
-                 */
-                dp[i].callback.call(dp[i].sender);
-            }
+        gl.disable(h.gl.BLEND);
 
-            this.pickingFramebuffer.deactivate();
+        var dp = this._pickingCallbacks;
+        var i = dp.length;
+        while (i--) {
+            /**
+             * This callback renders picking frame.
+             * @callback og.Renderer~pickingCallback
+             */
+            dp[i].callback.call(dp[i].sender);
         }
-    }
 
-    _drawDepthBuffer(frustumIndex) {
-        if (frustumIndex === 0) {
-            this.depthFramebuffer.activate();
+        this.pickingFramebuffer.deactivate();
+    }
 
-            var h = this.handler;
-            var gl = h.gl;
+    _drawDepthBuffer() {
+        this.depthFramebuffer.activate();
 
-            gl.clearColor(0.0, 0.0, 0.0, 1.0);
-            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+        var h = this.handler;
+        var gl = h.gl;
 
-            gl.enable(gl.DEPTH_TEST);
+        gl.clearColor(0.0, 0.0, 0.0, 1.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
-            var dp = this._depthCallbacks;
-            var i = dp.length;
-            while (i--) {
-                /**
-                 * This callback renders depth frame.
-                 * @callback og.Renderer~depthCallback
-                 */
-                dp[i].callback.call(dp[i].sender);
-            }
+        gl.enable(gl.DEPTH_TEST);
 
-            this.depthFramebuffer.deactivate();
+        var dp = this._depthCallbacks;
+        var i = dp.length;
+        while (i--) {
+            /**
+             * This callback renders depth frame.
+             * @callback og.Renderer~depthCallback
+             */
+            dp[i].callback.call(dp[i].sender);
+        }
 
-            //
-            // PASS to depth visualization
-            var sh = h.programs.depth,
-                p = sh._program;
+        this.depthFramebuffer.deactivate();
 
-            gl = h.gl;
+        //
+        // PASS to depth visualization
+        this.screenDepthFramebuffer.activate();
+        var sh = h.programs.depth,
+            p = sh._program;
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
-            gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
+        gl = h.gl;
 
-            this.screenDepthFramebuffer.activate();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
+        gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
-            sh.activate();
+        sh.activate();
 
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
-            gl.uniform1i(p.uniforms.depthTexture, 1);
+        gl.activeTexture(gl.TEXTURE0);
+        gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
+        gl.uniform1i(p.uniforms.depthTexture, 0);
 
-            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-            this.screenDepthFramebuffer.deactivate();
-        }
+        this.screenDepthFramebuffer.deactivate();
     }
 
     _readPickingColor() {
@@ -944,15 +927,13 @@ class Renderer {
 
             var pc = this._currPickingColor;
             if (ts.x || ts.y) {
+                this.pickingFramebuffer.activate();
                 this.pickingFramebuffer.readPixels(pc, ts.nx, 1.0 - ts.ny);
-                if (!(pc[0] || pc[1] || pc[2])) {
-                    this.readPixels(pc, ts.nx, 1.0 - ts.ny, 1);
-                }
+                this.pickingFramebuffer.deactivate();
             } else {
+                this.pickingFramebuffer.activate();
                 this.pickingFramebuffer.readPixels(pc, ms.nx, 1.0 - ms.ny);
-                if (!(pc[0] || pc[1] || pc[2])) {
-                    this.readPixels(pc, ms.nx, 1.0 - ms.ny, 1);
-                }
+                this.pickingFramebuffer.deactivate();
             }
         }
     }
@@ -964,7 +945,6 @@ class Renderer {
     start() {
         this.handler.start();
     }
-
 }
 
 export { Renderer };