@openglobus/og 0.11.2 → 0.11.7

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;
 
@@ -24,7 +25,7 @@ let __depthCallbackCounter__ = 0;
 /**
  * Represents high level WebGL context interface that starts WebGL handler working in real time.
  * @class
- * @param {og.webgl.Handler} handler - WebGL handler context.
+ * @param {Handler} handler - WebGL handler context.
  * @param {Object} [params] - Renderer parameters:
  * @fires og.RendererEvents#draw
  * @fires og.RendererEvents#resize
@@ -55,7 +56,6 @@ let __depthCallbackCounter__ = 0;
  * @fires og.RendererEvents#touchenter
  */
 class Renderer {
-
     constructor(handler, params) {
         params = params || {};
 
@@ -69,13 +69,13 @@ class Renderer {
         /**
          * WebGL handler context.
          * @public
-         * @type {og.webgl.Handler}
+         * @type {Handler}
          */
         this.handler = handler;
 
-        this.exposure = 4;
+        this.exposure = 3.01;
 
-        this.gamma = 0.5;
+        this.gamma = 0.47;
 
         this.whitepoint = 1.0;
 
@@ -86,7 +86,7 @@ class Renderer {
         /**
          * Render nodes drawing queue.
          * @private
-         * @type {Array.<og.scene.RenderNode>}
+         * @type {Array.<scene.RenderNode>}
          */
         this._renderNodesArr = [];
 
@@ -100,14 +100,14 @@ class Renderer {
         /**
          * Current active camera.
          * @public
-         * @type {og.Camera}
+         * @type {Camera}
          */
         this.activeCamera = null;
 
         /**
          * Renderer events. Represents interface for setting events like mousemove, draw, keypress etc.
          * @public
-         * @type {og.RendererEvents}
+         * @type {RendererEvents}
          */
         this.events = new RendererEvents(this);
 
@@ -140,32 +140,30 @@ class Renderer {
 
         /**
          * Color picking objects rendering queue.
-         * @type {Array.<og.Renderer~pickingCallback>}
+         * @type {Array.<Renderer~pickingCallback>}
          */
         this._pickingCallbacks = [];
 
         /**
          * Picking objects(labels and billboards) framebuffer.
          * @public
-         * @type {og.webgl.Framebuffer}
+         * @type {Framebuffer}
          */
         this.pickingFramebuffer = null;
 
         /**
          * Depth objects rendering queue.
-         * @type {Array.<og.Renderer~depthCallback>}
+         * @type {Array.<Renderer~depthCallback>}
          */
         this._depthCallbacks = [];
 
         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;
@@ -193,14 +191,14 @@ class Renderer {
         /**
          * Texture atlas for the billboards images. One atlas per node.
          * @protected
-         * @type {og.utils.TextureAtlas}
+         * @type {utils.TextureAtlas}
          */
         this.billboardsTextureAtlas = new TextureAtlas();
 
         /**
          * Texture font atlas for the font families and styles. One atlas per node.
          * @public
-         * @type {og.utils.FontAtlas}
+         * @type {utils.FontAtlas}
          */
         this.fontAtlas = new FontAtlas();
 
@@ -212,6 +210,8 @@ class Renderer {
         }
 
         this._currentOutput = "screen";
+
+        this.labelWorker = new LabelWorker();
     }
 
     /**
@@ -222,11 +222,6 @@ class Renderer {
         this.events.active = activity;
     }
 
-    setScreenScale(scale) {
-        this._screenScale = scale;
-        this._resize();
-    }
-
     addDepthCallback(sender, callback) {
         var id = __depthCallbackCounter__++;
         this._depthCallbacks.push({
@@ -249,7 +244,7 @@ class Renderer {
     /**
      * Adds picking rendering callback function.
      * @param {object} sender - Callback context.
-     * @param {og.Renderer~pickingCallback} callback - Rendering callback.
+     * @param {Renderer~pickingCallback} callback - Rendering callback.
      * @returns {Number} Handler id
      */
     addPickingCallback(sender, callback) {
@@ -331,7 +326,7 @@ class Renderer {
      * @returns {number} -
      */
     getWidth() {
-        return this.handler.canvas.width;
+        return this.handler.canvas.clientWidth;
     }
 
     /**
@@ -340,22 +335,22 @@ class Renderer {
      * @returns {number} -
      */
     getHeight() {
-        return this.handler.canvas.height;
+        return this.handler.canvas.clientHeight;
     }
 
     /**
      * Get center of the screen
      * @public
-     * @returns {og.math.Vec2} -
+     * @returns {math.Vec2} -
      */
     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));
     }
 
     /**
      * Add the given control to the renderer.
-     * @param {og.control.Control} control - Control.
+     * @param {control.Control} control - Control.
      */
     addControl(control) {
         control.addTo(this);
@@ -363,7 +358,7 @@ class Renderer {
 
     /**
      * Add the given controls array to the planet node.
-     * @param {Array.<og.control.Control>} cArr - Control array.
+     * @param {Array.<control.Control>} cArr - Control array.
      */
     addControls(cArr) {
         for (var i = 0; i < cArr.length; i++) {
@@ -373,7 +368,7 @@ class Renderer {
 
     /**
      * Remove control from the renderer.
-     * @param {og.control.Control} control  - Control.
+     * @param {control.Control} control  - Control.
      */
     removeControl(control) {
         control.remove();
@@ -441,7 +436,7 @@ class Renderer {
             useDepth: false
         }).init();
 
-        this.readPixels = () => { };
+        this.readPixels = () => {};
 
         if (this.handler.gl.type === "webgl") {
             this.sceneFramebuffer = new Framebuffer(this.handler);
@@ -477,7 +472,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 +519,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.width, c.height, true);
+
         this.screenDepthFramebuffer &&
-            this.screenDepthFramebuffer.setSize(obj.clientWidth, obj.clientHeight, true);
+            this.screenDepthFramebuffer.setSize(c.width, c.height, true);
 
         if (this.handler.gl.type === "webgl") {
             this.screenTexture.screen = this.sceneFramebuffer.textures[0];
@@ -564,7 +557,7 @@ class Renderer {
     /**
      * Adds render node to the renderer.
      * @public
-     * @param {og.scene.RenderNode} renderNode - Render node.
+     * @param {RenderNode} renderNode - Render node.
      */
     addNode(renderNode) {
         if (!this.renderNodes[renderNode.name]) {
@@ -579,7 +572,7 @@ class Renderer {
     /**
      * Adds render node to the renderer before specific node.
      * @public
-     * @param {og.scene.RenderNode} renderNode - Render node.
+     * @param {RenderNode} renderNode - Render node.
      */
     addNodeBefore(renderNode, renderNodeBefore) {
         if (!this.renderNodes[renderNode.name]) {
@@ -600,7 +593,7 @@ class Renderer {
     /**
      * Adds render nodes array to the renderer.
      * @public
-     * @param {Array.<og.scene.RenderNode>} nodesArr - Render nodes array.
+     * @param {Array.<scene.RenderNode>} nodesArr - Render nodes array.
      */
     addNodes(nodesArr) {
         for (var i = 0; i < nodesArr.length; i++) {
@@ -610,7 +603,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 +668,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 +738,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);
@@ -847,7 +855,7 @@ class Renderer {
     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);
+        this.readPixels(c, x / cnv.clientWidth, (cnv.clientHeight - y) / cnv.clientHeight, 1);
         return this.colorObjects[c[0] + "_" + c[1] + "_" + c[2]];
     }
 
@@ -964,7 +972,6 @@ class Renderer {
     start() {
         this.handler.start();
     }
-
 }
 
 export { Renderer };

package/src/og/renderer/RendererEvents.js

@@ -19,7 +19,7 @@ const MB_M = 0b0100;
 /**
  * Renderer events handler.
  * @class
- * @param {og.Renderer} renderer - Renderer object, events that works for.
+ * @param {Renderer} renderer - Renderer object, events that works for.
  */
 class RendererEvents extends Events {
     constructor(renderer) {
@@ -28,28 +28,28 @@ class RendererEvents extends Events {
         /**
          * Assigned renderer.
          * @public
-         * @type {og.Renderer}
+         * @type {Renderer}
          */
         this.renderer = renderer;
 
         /**
          * Low level touch events handler.
          * @private
-         * @type {og.input.TouchHandler}
+         * @type {input.TouchHandler}
          */
         this._touchHandler = new TouchHandler(renderer.handler.canvas);
 
         /**
          * Low level mouse events handler.
          * @private
-         * @type {og.input.MouseHandler}
+         * @type {input.MouseHandler}
          */
         this._mouseHandler = new MouseHandler(renderer.handler.canvas);
 
         /**
          * Low level keyboard events handler.
          * @private
-         * @type {og.input.KeyboardHandler}
+         * @type {input.KeyboardHandler}
          */
         this._keyboardHandler = new KeyboardHandler();
 
@@ -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,
@@ -190,6 +194,9 @@ class RendererEvents extends Events {
         this._dblTchCoords = new Vec2();
         this._oneTouchStart = false;
         this._dblTchBegins = 0;
+        /**
+         * @type {number}
+         */
         this._mousestopThread = null;
         this._ldblClkBegins = 0;
         this._rdblClkBegins = 0;
@@ -332,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,
@@ -354,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;
 
@@ -489,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;
@@ -548,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;

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
@@ -22,7 +21,7 @@ class BaseNode {
         /**
          * Top scene tree node pointer.
          * @public
-         * @type {og.RenderNode}
+         * @type {RenderNode}
          */
         this.topNode = this;
 
@@ -32,14 +31,14 @@ class BaseNode {
         /**
          * Children nodes.
          * @public
-         * @type {Array.<og.RenderNode>}
+         * @type {Array.<RenderNode>}
          */
         this.childNodes = [];
 
         /**
          * Parent node pointer.
          * @public
-         * @type {og.RenderNode}
+         * @type {RenderNode}
          */
         this.parentNode = null;
 
@@ -60,7 +59,7 @@ class BaseNode {
     /**
      * Adds node to the current hierarchy.
      * @public
-     * @type {og.BaseNode}
+     * @type {BaseNode}
      */
     addNode(node) {
         if (this.parentNode == null) {
@@ -89,7 +88,7 @@ class BaseNode {
      * Gets node by name in the current.
      * @public
      * @param {string} name - Node name.
-     * @return {og.RenderNode} Node object in the current node.
+     * @return {RenderNode} Node object in the current node.
      */
     getNodeByName(name) {
         return this._dictionary[name];
@@ -111,4 +110,4 @@ class BaseNode {
     }
 }
 
-export { BaseNode };
+export { BaseNode };