@openglobus/og 0.14.4 → 0.15.0

package/src/og/input/input.js

@@ -42,5 +42,7 @@ export const input = {
     KEY_APOSTROPHE: 192,
     MB_LEFT: 0,
     MB_RIGHT: 2,
-    MB_MIDDLE: 1
+    MB_MIDDLE: 1,
+    KEY_BACK_SLASH: 220,
+    KEY_SINGLE_QUOTE: 222
 };

package/src/og/layer/CanvasTiles.js

@@ -13,19 +13,17 @@ import { Layer } from "./Layer.js";
  * @type {number}
  */
 
-const EVENT_NAMES = [
-    /**
-     * Triggered when current tile image has loaded before rendereing.
-     * @event og.layer.CanvasTiles#load
-     */
+const EVENT_NAMES = [/**
+ * Triggered when current tile image has loaded before rendereing.
+ * @event og.layer.CanvasTiles#load
+ */
     "load",
 
     /**
      * Triggered when all tiles have loaded or loading has stopped.
      * @event og.layer.CanvasTiles#loadend
      */
-    "loadend"
-];
+    "loadend"];
 
 /**
  * Layer used to rendering each tile as a separate canvas object.
@@ -50,6 +48,8 @@ class CanvasTiles extends Layer {
 
         this.events.registerNames(EVENT_NAMES);
 
+        this.animated = options.animated || false;
+
         this.minNativeZoom = options.minNativeZoom || 0;
         /**
          * Current creating tiles couter.
@@ -176,22 +176,19 @@ class CanvasTiles extends Layer {
                 that.events.dispatch(e, material);
             }
             requestAnimationFrame(() => {
-                that.drawTile(
-                    material,
-                    /**
-                     * Apply canvas.
-                     * @callback applyCanvasCallback
-                     * @param {Object} canvas -
-                     */
-                    function (canvas) {
-                        that._counter--;
-                        CanvasTiles.__requestsCounter--;
-                        if (material.isLoading) {
-                            material.applyImage(canvas);
-                        }
-                        that._dequeueRequest();
+                that.drawTile(material, /**
+                 * Apply canvas.
+                 * @callback applyCanvasCallback
+                 * @param {Object} canvas -
+                 */
+                function (canvas) {
+                    that._counter--;
+                    CanvasTiles.__requestsCounter--;
+                    if (material.isLoading) {
+                        material.applyImage(canvas);
                     }
-                );
+                    that._dequeueRequest();
+                });
             });
         } else {
             material.textureNotExists();
@@ -231,10 +228,7 @@ class CanvasTiles extends Layer {
         while (this._pendingsQueue.length) {
             var pmat = this._pendingsQueue.pop();
             if (pmat.segment.node) {
-                if (
-                    pmat.segment.initialized &&
-                    pmat.segment.node.getState() === quadTree.RENDERING
-                ) {
+                if (pmat.segment.initialized && pmat.segment.node.getState() === quadTree.RENDERING) {
                     return pmat;
                 }
                 pmat.isLoading = false;
@@ -245,14 +239,20 @@ class CanvasTiles extends Layer {
 
     applyMaterial(material) {
         if (material.isReady) {
+            if (material.layer.animated) {
+                requestAnimationFrame(() => {
+                    this.drawTile(material, function (canvas) {
+                        material.applyImage(canvas);
+                    });
+                });
+            }
             return [0, 0, 1, 1];
         } else if (material.segment.tileZoom < this.minNativeZoom) {
             material.textureNotExists();
         } else {
 
             let segment = material.segment;
-            let pn = segment.node,
-                notEmpty = false;
+            let pn = segment.node, notEmpty = false;
 
             if (segment.passReady && !material.isLoading) {
                 this.loadMaterial(material);
@@ -270,15 +270,20 @@ class CanvasTiles extends Layer {
             }
 
             if (notEmpty) {
+
+                if (material.layer.animated) {
+                    requestAnimationFrame(() => {
+                        this.drawTile(material, function (canvas) {
+                            material.applyImage(canvas);
+                        });
+                    });
+                }
+
                 material.appliedNodeId = pn.nodeId;
                 material.texture = psegm.texture;
+
                 let dZ2 = 1.0 / (2 << (segment.tileZoom - pn.segment.tileZoom - 1));
-                return [
-                    segment.tileX * dZ2 - pn.segment.tileX,
-                    segment.tileY * dZ2 - pn.segment.tileY,
-                    dZ2,
-                    dZ2
-                ];
+                return [segment.tileX * dZ2 - pn.segment.tileX, segment.tileY * dZ2 - pn.segment.tileY, dZ2, dZ2];
             } else {
                 material.texture = segment.planet.transparentTexture;
                 return [0, 0, 1, 1];

package/src/og/layer/Layer.js

@@ -229,6 +229,8 @@ class Layer {
             let shininess = options.shininess || 20.0;
             this._specular = new Float32Array([s.x, s.y, s.z, shininess]);
         }
+
+        this.nightTextureCoefficient = options.nightTextureCoefficient || null;
     }
 
     set diffuse(rgb) {

package/src/og/layer/Material.js

@@ -29,13 +29,6 @@ class Material {
         this.pickingReady = false;
     }
 
-    ///**
-    // * @param {*} layer
-    // */
-    //assignLayer(layer) {
-    //    this.layer = layer;
-    //}
-
     /**
      *
      */
@@ -44,7 +37,7 @@ class Material {
     }
 
     _createTexture(img) {
-        return this.layer._planet && this.layer.createTexture(img, this.layer._internalFormat);
+        return this.layer._planet && this.layer.createTexture(img, this.layer._internalFormat, this.isReady ? this.texture : null);
     }
 
     /**

package/src/og/light/LightSource.js

@@ -127,9 +127,11 @@ class LightSource {
                     this._ambient.x = rn._lightsParamsv[index] = this._tempAmbient.x;
                     this._ambient.y = rn._lightsParamsv[index + 1] = this._tempAmbient.y;
                     this._ambient.z = rn._lightsParamsv[index + 2] = this._tempAmbient.z;
+
                     this._diffuse.x = rn._lightsParamsv[index + 3] = this._tempDiffuse.x;
                     this._diffuse.y = rn._lightsParamsv[index + 4] = this._tempDiffuse.y;
                     this._diffuse.z = rn._lightsParamsv[index + 5] = this._tempDiffuse.z;
+
                     this._specular.x = rn._lightsParamsv[index + 6] = this._tempSpecular.x;
                     this._specular.y = rn._lightsParamsv[index + 7] = this._tempSpecular.y;
                     this._specular.z = rn._lightsParamsv[index + 8] = this._tempSpecular.z;

package/src/og/quadTree/Node.js

@@ -351,7 +351,8 @@ class Node {
                     var bp = ni.segment;
                     var ld = ap.gridSize / (bp.gridSize * Math.pow(2, bp.tileZoom - ap.tileZoom));
 
-                    let cs_size = ap.gridSize, opcs_size = bp.gridSize;
+                    let cs_size = ap.gridSize,
+                        opcs_size = bp.gridSize;
 
                     if (ld > 1) {
                         cs_size = Math.ceil(ap.gridSize / ld);

package/src/og/renderer/Renderer.js

@@ -21,6 +21,10 @@ let __pickingCallbackCounter__ = 0;
 
 let __depthCallbackCounter__ = 0;
 
+const DIFFUSE = 0;
+const NORMAL = 1;
+const POSITION = 2;
+
 /**
  * Represents high level WebGL context interface that starts WebGL handler working in real time.
  * @class
@@ -193,6 +197,13 @@ class Renderer {
          * @type {utils.TextureAtlas}
          */
         this.billboardsTextureAtlas = new TextureAtlas();
+        //TODO global texture atlas
+        /**
+         * Texture atlas for the billboards images. One atlas per node.
+         * @protected
+         * @type {utils.TextureAtlas}
+         */
+        this.geoObjectsTextureAtlas = new TextureAtlas();
 
         /**
          * Texture font atlas for the font families and styles. One atlas per node.
@@ -389,6 +400,7 @@ class Renderer {
         var that = this;
 
         this.billboardsTextureAtlas.assignHandler(this.handler);
+        this.geoObjectsTextureAtlas.assignHandler(this.handler);
 
         this.fontAtlas.assignHandler(this.handler);
 
@@ -459,6 +471,7 @@ class Renderer {
             }).init();
 
             this.blitFramebuffer = new Framebuffer(this.handler, {
+                size: 1,
                 useDepth: false,
                 internalFormat: this._internalFormat,
                 format: this._format,
@@ -487,10 +500,10 @@ class Renderer {
             __resizeTimeout = setTimeout(() => {
                 this._resizeEnd();
                 this.events.dispatch(this.events.resizeend, this.handler.canvas);
-            }, 500);
+            }, 320);
         };
 
-        this._screenFrameCornersBuffer = this.handler.createArrayBuffer(
+        this.screenFramePositionBuffer = this.handler.createArrayBuffer(
             new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]),
             2,
             4
@@ -552,36 +565,6 @@ class Renderer {
         this.setCurrentScreen(this._currentOutput);
     }
 
-    // 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(c.width, c.height, true);
-    //
-    //     this.toneMappingFramebuffer && this.toneMappingFramebuffer.setSize(c.width, c.height, true);
-    //
-    //     this.depthFramebuffer && this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
-    //
-    //     this.screenDepthFramebuffer && this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
-    //
-    //     if (this.handler.gl.type === "webgl") {
-    //         this.screenTexture.screen = this.sceneFramebuffer.textures[0];
-    //         this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-    //         this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
-    //         this.screenTexture.frustum = this.depthFramebuffer.textures[0];
-    //     } else {
-    //         this.screenTexture.screen = this.toneMappingFramebuffer.textures[0];
-    //         this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-    //         this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
-    //         this.screenTexture.frustum = this.depthFramebuffer.textures[0];
-    //     }
-    //
-    //     this.setCurrentScreen(this._currentOutput);
-    // }
-
     removeNode(renderNode) {
         renderNode.remove();
     }
@@ -758,8 +741,8 @@ class Renderer {
         let e = this.events;
         e.handleEvents();
 
-        let sfb = this.sceneFramebuffer;
-        sfb.activate();
+        let sceneFramebuffer = this.sceneFramebuffer;
+        sceneFramebuffer.activate();
 
         let h = this.handler,
             gl = h.gl;
@@ -786,6 +769,7 @@ class Renderer {
             while (i--) {
                 rn[i].drawNode();
             }
+
             this._drawEntityCollections();
 
             if (pointerEvent) {
@@ -793,9 +777,9 @@ class Renderer {
             }
         }
 
-        sfb.deactivate();
+        sceneFramebuffer.deactivate();
 
-        this.blitFramebuffer && sfb.blitTo(this.blitFramebuffer);
+        this.blitFramebuffer && sceneFramebuffer.blitTo(this.blitFramebuffer, 0);
 
         if (pointerEvent) {
             // It works ONLY for 0 (closest) frustum
@@ -825,7 +809,7 @@ class Renderer {
 
         gl.disable(gl.DEPTH_TEST);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
         this.toneMappingFramebuffer.activate();
@@ -869,7 +853,7 @@ class Renderer {
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
         gl.uniform1i(p.uniforms.texture, 0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         gl.enable(gl.DEPTH_TEST);
@@ -885,7 +869,7 @@ class Renderer {
         var h = this.handler;
         var gl = h.gl;
 
-        if (frustumIndex === this.activeCamera.FARTHEST_FRUSTUM_INDEX) {
+        if (this.activeCamera.isFirstPass) {
             gl.clearColor(0.0, 0.0, 0.0, 1.0);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         } else {
@@ -894,8 +878,8 @@ class Renderer {
 
         gl.disable(h.gl.BLEND);
 
-        var dp = this._pickingCallbacks;
-        var i = dp.length;
+        let dp = this._pickingCallbacks;
+        let i = dp.length;
         while (i--) {
             /**
              * This callback renders picking frame.
@@ -938,7 +922,7 @@ class Renderer {
 
         gl = h.gl;
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._screenFrameCornersBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
         sh.activate();

package/src/og/renderer/RendererEvents.js

@@ -311,22 +311,22 @@ class RendererEvents extends Events {
      * @protected
      */
     updateButtonsStates(buttons) {
-        var ms = this.mouseState;
-        if (buttons & LB_M) {
+        let ms = this.mouseState;
+        if ((buttons & LB_M) && ms.leftButtonDown) {
             ms.leftButtonDown = true;
         } else {
             ms.leftButtonHold = false;
             ms.leftButtonDown = false;
         }
 
-        if (buttons & RB_M) {
+        if ((buttons & RB_M) && ms.rightButtonDown) {
             ms.rightButtonDown = true;
         } else {
             ms.rightButtonHold = false;
             ms.rightButtonDown = false;
         }
 
-        if (buttons & MB_M) {
+        if ((buttons & MB_M) && ms.middleButtonDown) {
             ms.middleButtonDown = true;
         } else {
             ms.middleButtonHold = false;