@openglobus/og 0.15.3 → 0.15.5

package/src/og/layer/XYZ.js

@@ -44,7 +44,7 @@ class XYZ extends Layer {
      * @param {string} name - Layer name.
      * @param {*} options
      */
-    constructor(name, options) {
+    constructor(name, options = {}) {
         super(name, options);
 
         this.events.registerNames(EVENT_NAMES);
@@ -316,7 +316,7 @@ class XYZ extends Layer {
     clearMaterial(material) {
         if (material.isReady && material.textureExists) {
             !material.texture.default &&
-                material.segment.handler.gl.deleteTexture(material.texture);
+            material.segment.handler.gl.deleteTexture(material.texture);
             material.texture = null;
 
             if (material.image) {

package/src/og/quadTree/EntityCollectionNode.js

@@ -282,9 +282,15 @@ class EntityCollectionNode {
     }
 
     alignEntityToTheGround(entity, segment) {
-        var res = new Vec3();
+        let res = new Vec3();
         segment.getEntityTerrainPoint(entity, res);
-        entity._setCartesian3vSilent(res.addA(res.normal().scale((Number(this.layer.relativeToGround) && entity._altitude) || 0.0)));
+        let alt = (Number(this.layer.relativeToGround) && entity._altitude) || 0.0;
+        if (alt) {
+            let n = this.layer._planet.ellipsoid.getSurfaceNormal3v(res);
+            entity._setCartesian3vSilent(res.addA(n.scale(alt)));
+        } else {
+            entity._setCartesian3vSilent(res);
+        }
     }
 
     isVisible() {

package/src/og/renderer/Renderer.js

@@ -61,8 +61,7 @@ let __distanceCallbackCounter__ = 0;
 let __resizeTimeout;
 
 class Renderer {
-    constructor(handler, params) {
-        params = params || {};
+    constructor(handler, params = {}) {
 
         /**
          * Div element with WebGL canvas. Assigned in Globe class.
@@ -139,7 +138,7 @@ class Renderer {
          * @public
          * @type {Object}
          */
-        this.colorObjects = {};
+        this.colorObjects = new Map();
 
         /**
          * Color picking objects rendering queue.
@@ -214,11 +213,6 @@ class Renderer {
 
         this._entityCollections = [];
 
-        if (params.autoActivate || isEmpty(params.autoActivate)) {
-            this.initialize();
-            this.start();
-        }
-
         this._currentOutput = "screen";
 
         this._fnScreenFrame = null;
@@ -226,6 +220,11 @@ class Renderer {
         this.labelWorker = new LabelWorker(4);
 
         this.__useDistanceFramebuffer__ = true;
+
+        if (params.autoActivate || isEmpty(params.autoActivate)) {
+            this.initialize();
+            this.start();
+        }
     }
 
     /**
@@ -239,9 +238,7 @@ class Renderer {
     addDepthCallback(sender, callback) {
         var id = __depthCallbackCounter__++;
         this._depthCallbacks.push({
-            id: id,
-            callback: callback,
-            sender: sender
+            id: id, callback: callback, sender: sender
         });
         return id;
     }
@@ -258,9 +255,7 @@ class Renderer {
     addDistanceCallback(sender, callback) {
         var id = __distanceCallbackCounter__++;
         this._distanceCallbacks.push({
-            id: id,
-            callback: callback,
-            sender: sender
+            id: id, callback: callback, sender: sender
         });
         return id;
     }
@@ -284,9 +279,7 @@ class Renderer {
     addPickingCallback(sender, callback) {
         var id = __pickingCallbackCounter__++;
         this._pickingCallbacks.push({
-            id: id,
-            callback: callback,
-            sender: sender
+            id: id, callback: callback, sender: sender
         });
         return id;
     }
@@ -304,8 +297,16 @@ class Renderer {
         }
     }
 
-    getPickingObjectByColor(r, g, b) {
-        return this.colorObjects[r + "_" + g + "_" + b];
+    getPickingObject(r, g, b) {
+        return this.colorObjects.get(`${r}_${g}_${b}`);
+    }
+
+    getPickingObjectArr(arr) {
+        return this.colorObjects.get(`${arr[0]}_${arr[1]}_${arr[2]}`);
+    }
+
+    getPickingObject3v(vec) {
+        return this.colorObjects.get(`${vec.x}_${vec.y}_${vec.z}`);
     }
 
     /**
@@ -317,11 +318,11 @@ class Renderer {
         if (!obj._pickingColor || obj._pickingColor.isZero()) {
             let r = 0, g = 0, b = 0;
             let str = "0_0_0";
-            while (!(r || g || b) || this.colorObjects[str]) {
+            while (!(r || g || b) || this.colorObjects.has(str)) {
                 r = randomi(1, 255);
                 g = randomi(1, 255);
                 b = randomi(1, 255);
-                str = r + "_" + g + "_" + b;
+                str = `${r}_${g}_${b}`;
             }
 
             if (!obj._pickingColor) {
@@ -332,7 +333,7 @@ class Renderer {
 
             obj._pickingColorU = new Float32Array([r / 255, g / 255, b / 255]);
 
-            this.colorObjects[str] = obj;
+            this.colorObjects.set(str, obj);
         }
     }
 
@@ -345,8 +346,7 @@ class Renderer {
         if (!obj._pickingColor.isZero()) {
             var c = obj._pickingColor;
             if (!c.isZero()) {
-                this.colorObjects[c.x + "_" + c.y + "_" + c.z] = null;
-                delete this.colorObjects[c.x + "_" + c.y + "_" + c.z];
+                this.colorObjects.delete(`${c.x}_${c.y}_${c.z}`);
                 c.x = c.y = c.z = 0;
             }
         }
@@ -417,21 +417,17 @@ class Renderer {
             this._initialized = true;
         }
 
-        var that = this;
-
         this.billboardsTextureAtlas.assignHandler(this.handler);
         this.geoObjectsTextureAtlas.assignHandler(this.handler);
 
         this.fontAtlas.assignHandler(this.handler);
 
-        this.handler.setFrameCallback(function () {
-            that.draw();
+        this.handler.setFrameCallback(() => {
+            this.draw();
         });
 
         this.activeCamera = new Camera(this, {
-            eye: new Vec3(0, 0, 0),
-            look: new Vec3(0, 0, -1),
-            up: new Vec3(0, 1, 0)
+            eye: new Vec3(0, 0, 0), look: new Vec3(0, 0, -1), up: new Vec3(0, 1, 0)
         });
 
         this.events.initialize();
@@ -444,10 +440,7 @@ class Renderer {
         this.handler.addProgram(screenFrame());
 
         this.pickingFramebuffer = new Framebuffer(this.handler, {
-            width: 640,
-            height: 480,
-            depthComponent: "DEPTH_STENCIL",
-            renderbufferTarget: "DEPTH_STENCIL_ATTACHMENT"
+            width: 640, height: 480, depthComponent: "DEPTH_STENCIL", renderbufferTarget: "DEPTH_STENCIL_ATTACHMENT"
         }).init();
 
         this._tempPickingPix_ = new Uint8Array(this.pickingFramebuffer.width * this.pickingFramebuffer.height * 4);
@@ -495,10 +488,7 @@ class Renderer {
             this.handler.addPrograms([depth()]);
 
             this.sceneFramebuffer = new Multisample(this.handler, {
-                size: 1,
-                msaa: this._msaa,
-                internalFormat: this._internalFormat,
-                filter: "LINEAR"
+                size: 1, msaa: this._msaa, internalFormat: this._internalFormat, filter: "LINEAR"
             }).init();
 
             this.blitFramebuffer = new Framebuffer(this.handler, {
@@ -537,11 +527,7 @@ class Renderer {
             }, 320);
         };
 
-        this.screenFramePositionBuffer = this.handler.createArrayBuffer(
-            new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]),
-            2,
-            4
-        );
+        this.screenFramePositionBuffer = this.handler.createArrayBuffer(new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]), 2, 4);
 
         let temp = this.controls;
         this.controls = {};
@@ -656,11 +642,7 @@ 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];
     }
 
@@ -680,7 +662,40 @@ class Renderer {
      * @public
      * @param {Array<og.EntityCollection>} ec - Entity collection array.
      */
-    _drawEntityCollections() {
+    _drawOpaqueEntityCollections() {
+        let ec = this._entityCollections;
+
+        if (ec.length) {
+            let gl = this.handler.gl;
+            gl.enable(gl.BLEND);
+            gl.blendEquation(gl.FUNC_ADD);
+            gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
+
+            //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;
+            while (i--) {
+                ec[i]._fadingOpacity && ec[i].pointCloudHandler.draw();
+            }
+        }
+    }
+
+
+    /**
+     * Draws entity collections.
+     * @public
+     * @param {Array<og.EntityCollection>} ec - Entity collection array.
+     */
+    _drawTransparentEntityCollections() {
         let ec = this._entityCollections;
 
         if (ec.length) {
@@ -694,18 +709,14 @@ class Renderer {
             gl.activeTexture(gl.TEXTURE0);
             gl.bindTexture(gl.TEXTURE_2D, this.billboardsTextureAtlas.texture);
 
-            var i = ec.length;
+            let i = ec.length;
             while (i--) {
                 var eci = ec[i];
-                if (eci._fadingOpacity) {
-                    // first begin draw event
-                    eci.events.dispatch(eci.events.draw, eci);
-                    eci.billboardHandler.draw();
-                }
+                eci._fadingOpacity && eci.billboardHandler.draw();
             }
 
             // labels pass
-            var fa = this.fontAtlas.atlasesArr;
+            let fa = this.fontAtlas.atlasesArr;
             for (i = 0; i < fa.length; i++) {
                 gl.activeTexture(gl.TEXTURE0 + i);
                 gl.bindTexture(gl.TEXTURE_2D, fa[i].texture);
@@ -716,12 +727,6 @@ 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--) {
@@ -734,29 +739,19 @@ class Renderer {
                 ec[i]._fadingOpacity && ec[i].polylineHandler.draw();
             }
 
-            // pointClouds pass
-            i = ec.length;
-            while (i--) {
-                if (ec[i]._fadingOpacity) {
-                    ec[i].pointCloudHandler.draw();
-                }
-            }
-
             // Strip pass
             i = ec.length;
             while (i--) {
-                if (ec[i]._fadingOpacity) {
-                    ec[i].stripHandler.draw();
-                    // post draw event
-                    eci.events.dispatch(eci.events.drawend, eci);
-                }
+                ec[i]._fadingOpacity && ec[i].stripHandler.draw();
             }
-
-            this._entityCollections.length = 0;
-            this._entityCollections = [];
         }
     }
 
+    _clearEntityCollectionQueue() {
+        this._entityCollections.length = 0;
+        this._entityCollections = [];
+    }
+
     /**
      * Draw nodes.
      * @public
@@ -770,8 +765,7 @@ class Renderer {
         let sceneFramebuffer = this.sceneFramebuffer;
         sceneFramebuffer.activate();
 
-        let h = this.handler,
-            gl = h.gl;
+        let h = this.handler, gl = h.gl;
 
         gl.enable(gl.BLEND);
         gl.blendEquation(gl.FUNC_ADD);
@@ -789,15 +783,25 @@ class Renderer {
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
+
         while (k--) {
             this.activeCamera.setCurrentFrustum(k);
             gl.clear(gl.DEPTH_BUFFER_BIT);
+
             let i = rn.length;
+            while (i--) {
+                rn[i].preDrawNode();
+            }
+
+            this._drawOpaqueEntityCollections();
+
+            i = rn.length;
             while (i--) {
                 rn[i].drawNode();
             }
 
-            this._drawEntityCollections();
+            this._drawTransparentEntityCollections();
+            this._clearEntityCollectionQueue();
 
             if (pointerEvent) {
                 this._drawPickingBuffer();
@@ -832,9 +836,7 @@ class Renderer {
     _screenFrameMSAA() {
         var h = this.handler;
 
-        var sh = h.programs.toneMapping,
-            p = sh._program,
-            gl = h.gl;
+        var sh = h.programs.toneMapping, p = sh._program, gl = h.gl;
 
         gl.disable(gl.DEPTH_TEST);
 
@@ -873,9 +875,7 @@ class Renderer {
     _screenFrameNoMSAA() {
 
         let h = this.handler;
-        let sh = h.programs.screenFrame,
-            p = sh._program,
-            gl = h.gl;
+        let sh = h.programs.screenFrame, p = sh._program, gl = h.gl;
 
         gl.disable(gl.DEPTH_TEST);
         sh.activate();
@@ -910,8 +910,7 @@ class Renderer {
         //
         h.programs.pickingMask.activate();
         let sh = h.programs.pickingMask._program;
-        let shu = sh.uniforms,
-            sha = sh.attributes;
+        let shu = sh.uniforms, sha = sh.attributes;
 
         let /*ts = this.events.touchState,*/
             ms = this.events.mouseState;
@@ -941,8 +940,7 @@ class Renderer {
         gl.disable(gl.BLEND);
 
         let dp = this._pickingCallbacks;
-        let i = dp.length;
-        while (i--) {
+        for (let i = 0, len = dp.length; i < len; i++) {
             /**
              * This callback renders picking frame.
              * @callback og.Renderer~pickingCallback
@@ -1017,8 +1015,7 @@ class Renderer {
         //
         // PASS to depth visualization
         this.screenDepthFramebuffer.activate();
-        var sh = h.programs.depth,
-            p = sh._program;
+        var sh = h.programs.depth, p = sh._program;
 
         gl = h.gl;
 

package/src/og/renderer/RendererEvents.js

@@ -16,12 +16,19 @@ const LB_M = 0b0001;
 const RB_M = 0b0010;
 const MB_M = 0b0100;
 
+let __skipFrames__ = 0;
+const MAX_SKIP_FRAMES_ON_BLACK = 15;
+
+const ISBLACK = (c) => !(c[0] || c[1] || c[2]);
+const NOTBLACK = (c) => c[0] || c[1] || c[2];
+
 /**
  * Stores current picking rgb color.
  * @private
  * @type {Array.<number>} - (exactly 3 entries)
  */
 let _currPickingColor = new Uint8Array(4);
+let _tempCurrPickingColor = new Uint8Array(4);
 
 /**
  * Stores previous picked rgb color.
@@ -612,34 +619,44 @@ class RendererEvents extends Events {
         if (!(ms.leftButtonHold || ms.rightButtonHold || ms.middleButtonHold)) {
 
             let r = this.renderer;
-            let o = r.colorObjects;
             let c = _currPickingColor,
-                p = _prevPickingColor;
+                p = _prevPickingColor,
+                t = _tempCurrPickingColor;
+
+            if (ts.x || ts.y) {
+                r.readPickingColor(ts.nx, 1 - ts.ny, t);
+            } else {
+                r.readPickingColor(ms.nx, 1 - ms.ny, t);
+            }
+
+            // current is black
+            if (ISBLACK(t) && __skipFrames__++ < MAX_SKIP_FRAMES_ON_BLACK) {
+                return;
+            }
+            __skipFrames__ = 0;
 
             p[0] = c[0];
             p[1] = c[1];
             p[2] = c[2];
 
-            if (ts.x || ts.y) {
-                r.readPickingColor(ts.nx, 1 - ts.ny, c);
-            } else {
-                r.readPickingColor(ms.nx, 1 - ms.ny, c);
-            }
+            c[0] = t[0];
+            c[1] = t[1];
+            c[2] = t[2];
 
             ms.pickingObject = null;
             ts.pickingObject = null;
 
-            let co = o && o[c[0] + "_" + c[1] + "_" + c[2]];
+            let co = r.getPickingObjectArr(c);
 
             ms.pickingObject = co;
             ts.pickingObject = co;
 
-            //object changed
-            if (c[0] != p[0] || c[1] != p[1] || c[2] != p[2]) {
+            //object is changed
+            if (c[0] !== p[0] || c[1] !== p[1] || c[2] !== p[2]) {
 
-                //current black
-                if (!(c[0] || c[1] || c[2])) {
-                    let po = o[p[0] + "_" + p[1] + "_" + p[2]];
+                //current is black
+                if (ISBLACK(c)) {
+                    let po = r.getPickingObjectArr(p);
                     if (po) {
                         let pe = po.rendererEvents;
                         ms.pickingObject = po;
@@ -648,11 +665,11 @@ class RendererEvents extends Events {
                         pe && pe.dispatch(pe.touchleave, ts);
                     }
                 } else {
-                    //current not black
+                    //current ia not black
 
-                    //previous not black
-                    if (p[0] || p[1] || p[2]) {
-                        let po = o[p[0] + "_" + p[1] + "_" + p[2]];
+                    //previous is not black
+                    if (NOTBLACK(p)) {
+                        let po = r.getPickingObjectArr(p);
                         if (po) {
                             let pe = po.rendererEvents;
                             ms.pickingObject = po;
@@ -844,9 +861,9 @@ class RendererEvents extends Events {
      * @private
      */
     handleTouchEvents() {
-        var ts = this.touchState;
+        let ts = this.touchState;
 
-        var tpo = ts.pickingObject,
+        let tpo = ts.pickingObject,
             tpe = null;
 
         if (ts.touchCancel) {
@@ -855,15 +872,14 @@ class RendererEvents extends Events {
         }
 
         if (ts.touchStart) {
-            var r = this.renderer;
+            let r = this.renderer;
 
             r.pickingFramebuffer.activate();
             r.pickingFramebuffer.readPixels(_currPickingColor, ts.nx, 1.0 - ts.ny, 1);
             r.pickingFramebuffer.deactivate();
 
-            var o = r.colorObjects;
-            var c = _currPickingColor;
-            var co = o[c[0] + "_" + c[1] + "_" + c[2]];
+            let c = _currPickingColor;
+            let co = r.getPickingObjectArr(c);
             tpo = ts.pickingObject = co;
             if (tpo) {
                 tpe = tpo.rendererEvents;