@openglobus/og 0.11.4 → 0.11.8

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,10 @@ class Renderer {
         }
 
         this._currentOutput = "screen";
+
+        this.isActiveBackbuffers = true;
+
+        this.labelWorker = new LabelWorker();
     }
 
     /**
@@ -222,11 +223,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 +327,7 @@ class Renderer {
      * @returns {number} -
      */
     getWidth() {
-        return this.handler.canvas.width;
+        return this.handler.canvas.clientWidth;
     }
 
     /**
@@ -340,7 +336,7 @@ class Renderer {
      * @returns {number} -
      */
     getHeight() {
-        return this.handler.canvas.height;
+        return this.handler.canvas.clientHeight;
     }
 
     /**
@@ -350,7 +346,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 +425,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 +463,7 @@ class Renderer {
                 internalFormat: this._internalFormat,
                 format: this._format,
                 type: this._type,
-                filter: "LINEAR"
+                filter: "NEAREST"
             }).init();
 
             this.toneMappingFramebuffer = new Framebuffer(this.handler, {
@@ -524,23 +510,21 @@ 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
-        );
+        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 +594,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 +659,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 +729,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 +744,8 @@ class Renderer {
 
         let frustums = this.activeCamera.frustums;
 
+        let anyEvent = this.events.mouseState.anyEvent() && this.isActiveBackbuffers;
+
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
@@ -757,17 +758,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 +841,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 +929,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 +947,6 @@ class Renderer {
     start() {
         this.handler.start();
     }
-
 }
 
 export { Renderer };

package/src/og/renderer/RendererEvents.js

@@ -84,10 +84,14 @@ class RendererEvents extends Events {
                     ms.moving ||
                     ms.justStopped
                 );
-            },
-            /** Current mouse X position. */
+            },
+            /** Current screen mouse X position. */
+            clientX: 0,
+            /** Current screen mouse Y position. */
+            clientY: 0,
+            /** Current viewport mouse X position. */
             x: 0,
-            /** Current mouse Y position. */
+            /** Current viewport mouse Y position. */
             y: 0,
             /** Current mouse X position from 0 to 1 */
             nx: 0,
@@ -335,7 +339,7 @@ class RendererEvents extends Events {
      */
     onMouseMove(event, sys) {
         var ms = this.mouseState;
-        this.updateButtonsStates(sys.buttons)
+        this.updateButtonsStates(sys.buttons);
         ms.sys = event;
 
         let ex = event.clientX,
@@ -357,16 +361,20 @@ class RendererEvents extends Events {
             this._mClkBegins = 0;
         }
 
-        if (ms.x === event.clientX && ms.y === event.clientY) {
+        if (ms.clientX === event.clientX && ms.clientY === event.clientY) {
             return;
-        }
+        }
 
-        ms.x = event.clientX;
-        ms.y = event.clientY;
+        ms.clientX = event.clientX;
+        ms.clientY = event.clientY;
+
+        let h = this.renderer.handler;
+
+        ms.x = event.clientX * h.pixelRatio;
+        ms.y = event.clientY * h.pixelRatio;
 
-        var cnv = this.renderer.handler.canvas;
-        ms.nx = ms.x / cnv.width;
-        ms.ny = ms.y / cnv.height;
+        ms.nx = ms.x / h.canvas.width;
+        ms.ny = ms.y / h.canvas.height;
 
         ms.moving = true;
 
@@ -492,12 +500,18 @@ class RendererEvents extends Events {
      */
     onTouchStart(event) {
         var ts = this.touchState;
-        ts.sys = event;
-        ts.x = event.touches.item(0).clientX - event.offsetLeft;
-        ts.y = event.touches.item(0).clientY - event.offsetTop;
-        var cnv = this.renderer.handler.canvas;
-        ts.nx = ts.x / cnv.width;
-        ts.ny = ts.y / cnv.height;
+        ts.sys = event;
+
+        ts.clienX = event.touches.item(0).clientX - event.offsetLeft;
+        ts.clientY = event.touches.item(0).clientY - event.offsetTop;
+
+        let h = this.renderer.handler;
+
+        ts.x = ts.clientX * h.pixelRatio;
+        ts.y = ts.clientY * h.pixelRatio;
+
+        ts.nx = ts.x / h.canvas.width;
+        ts.ny = ts.y / h.canvas.height;
         ts.prev_x = ts.x;
         ts.prev_y = ts.y;
         ts.touchStart = true;
@@ -551,11 +565,17 @@ class RendererEvents extends Events {
      */
     onTouchMove(event) {
         var ts = this.touchState;
-        ts.x = event.touches.item(0).clientX - event.offsetLeft;
-        ts.y = event.touches.item(0).clientY - event.offsetTop;
-        var cnv = this.renderer.handler.canvas;
-        ts.nx = ts.x / cnv.width;
-        ts.ny = ts.y / cnv.height;
+        ts.clientX = event.touches.item(0).clientX - event.offsetLeft;
+        ts.clientY = event.touches.item(0).clientY - event.offsetTop;
+
+        var h = this.renderer.handler;
+
+        ts.x = ts.clientX * h.pixelRatio;
+        ts.y = ts.clientY * h.pixelRatio;
+
+        ts.nx = ts.x / h.canvas.width;
+        ts.ny = ts.y / h.canvas.height;
+
         ts.sys = event;
         ts.moving = true;
         this._dblTchBegins = 0;
@@ -808,8 +828,10 @@ class RendererEvents extends Events {
 
         if (ts.touchStart) {
             var r = this.renderer;
-
+
+            r.pickingFramebuffer.activate();
             r.pickingFramebuffer.readPixels(r._currPickingColor, ts.nx, 1.0 - ts.ny, 1);
+            r.pickingFramebuffer.deactivate();
 
             var o = r.colorObjects;
             var c = r._currPickingColor;

package/src/og/scene/BaseNode.js

@@ -2,7 +2,7 @@
  * @module og/scene/BaseNode
  */
 
-'use strict';
+"use strict";
 
 /**
  * Scene node base class.
@@ -11,7 +11,6 @@
  */
 class BaseNode {
     constructor(name) {
-
         /**
          * Node name.
          * @public
@@ -111,4 +110,4 @@ class BaseNode {
     }
 }
 
-export { BaseNode };
+export { BaseNode };