@openglobus/og 0.14.10 → 0.15.0

package/src/og/math/Vec3.js

@@ -39,38 +39,47 @@ export class Vec3 {
     static get UP() {
         return new Vec3(0, 1, 0);
     }
+
     /** @const */
     static get DOWN() {
         return new Vec3(0, -1, 0);
     }
+
     /** @const */
     static get RIGHT() {
         return new Vec3(1, 0, 0);
     }
+
     /** @const */
     static get LEFT() {
         return new Vec3(-1, 0, 0);
     }
+
     /** @const */
     static get FORWARD() {
         return new Vec3(0, 0, -1);
     }
+
     /** @const */
     static get BACKWARD() {
         return new Vec3(0, 0, 1);
     }
+
     /** @const */
     static get ZERO() {
         return new Vec3();
     }
+
     /** @const */
     static get UNIT_X() {
         return new Vec3(1, 0, 0);
     }
+
     /** @const */
     static get UNIT_Y() {
         return new Vec3(0, 1, 0);
     }
+
     /** @const */
     static get UNIT_Z() {
         return new Vec3(0, 0, 1);
@@ -231,9 +240,7 @@ export class Vec3 {
      * @returns {Vec3} -
      */
     static scale(a, scale) {
-        var res = new Vec3(a.x, a.y, a.z);
-        res.scale(scale);
-        return res;
+        return a.scaleTo(scale);
     }
 
     /**
@@ -314,6 +321,18 @@ export class Vec3 {
         return res;
     }
 
+    static length2(a) {
+        return a.length2();
+    }
+
+    static length(a) {
+        return a.length();
+    }
+
+    static dot(a, b) {
+        return a.dot(b);
+    }
+
     /**
      * Converts to 4d vector, Fourth value is 1.0.
      * @public
@@ -372,13 +391,13 @@ export class Vec3 {
 
     /**
      * Copy input vector's values.
-     * @param {Vec3} point3 - Vector to copy.
+     * @param {Vec3} p - Vector to copy.
      * @returns {Vec3} -
      */
-    copy(point3) {
-        this.x = point3.x;
-        this.y = point3.y;
-        this.z = point3.z;
+    copy(p) {
+        this.x = p.x;
+        this.y = p.y;
+        this.z = p.z;
         return this;
     }
 
@@ -412,47 +431,47 @@ export class Vec3 {
     /**
      * Adds vector to the current.
      * @public
-     * @param {Vec3} point3 - Point to add.
+     * @param {Vec3} p - Point to add.
      * @returns {Vec3} -
      */
-    addA(point3) {
-        this.x += point3.x;
-        this.y += point3.y;
-        this.z += point3.z;
+    addA(p) {
+        this.x += p.x;
+        this.y += p.y;
+        this.z += p.z;
         return this;
     }
 
     /**
      * Gets two vectors summarization.
      * @public
-     * @param {Vec3} point3 - Vector to add.
+     * @param {Vec3} p - Vector to add.
      * @returns {Vec3} Returns a sum vector.
      */
-    add(point3) {
-        return new Vec3(this.x + point3.x, this.y + point3.y, this.z + point3.z);
+    add(p) {
+        return new Vec3(this.x + p.x, this.y + p.y, this.z + p.z);
     }
 
     /**
      * Subtract vector from the current.
      * @public
-     * @param {Vec3} point3 - Subtract vector.
+     * @param {Vec3} p - Subtract vector.
      * @returns {Vec3} -
      */
-    subA(point3) {
-        this.x -= point3.x;
-        this.y -= point3.y;
-        this.z -= point3.z;
+    subA(p) {
+        this.x -= p.x;
+        this.y -= p.y;
+        this.z -= p.z;
         return this;
     }
 
     /**
      * Gets vector subtraction.
      * @public
-     * @param {Vec3} point3 - Subtract vector.
+     * @param {Vec3} p - Subtract vector.
      * @return {Vec3} Returns new instance of a subtraction
      */
-    sub(point3) {
-        return new Vec3(this.x - point3.x, this.y - point3.y, this.z - point3.z);
+    sub(p) {
+        return new Vec3(this.x - p.x, this.y - p.y, this.z - p.z);
     }
 
     /**
@@ -527,11 +546,11 @@ export class Vec3 {
     /**
      * Gets vectors dot production.
      * @public
-     * @param {Vec3} point3 - Another vector.
+     * @param {Vec3} a - Another vector.
      * @returns {number} -
      */
-    dot(point3) {
-        return point3.x * this.x + point3.y * this.y + point3.z * this.z;
+    dot(a) {
+        return a.x * this.x + a.y * this.y + a.z * this.z;
     }
 
     /**
@@ -696,26 +715,26 @@ export class Vec3 {
     /**
      * Gets distance to point.
      * @public
-     * @param {Vec3} point3 - Distant point.
+     * @param {Vec3} p - Distant point.
      * @returns {number} -
      */
-    distance(point3) {
-        let dx = this.x - point3.x,
-            dy = this.y - point3.y,
-            dz = this.z - point3.z;
+    distance(p) {
+        let dx = this.x - p.x,
+            dy = this.y - p.y,
+            dz = this.z - p.z;
         return Math.sqrt(dx * dx + dy * dy + dz * dz);
     }
 
     /**
      * Gets square distance to point.
      * @public
-     * @param {Vec3} point3 - Distant point.
+     * @param {Vec3} p - Distant point.
      * @returns {number} -
      */
-    distance2(point3) {
-        let dx = this.x - point3.x,
-            dy = this.y - point3.y,
-            dz = this.z - point3.z;
+    distance2(p) {
+        let dx = this.x - p.x,
+            dy = this.y - p.y,
+            dz = this.z - p.z;
         return dx * dx + dy * dy + dz * dz;
     }
 

package/src/og/math/Vec4.js

@@ -106,9 +106,8 @@ export class Vec4 {
      * Converts vector to a number array.
      * @public
      * @returns {Array.<number>} - (exactly 4 entries)
-     * @deprecated
      */
-    toVec() {
+    toArray() {
         return [this.x, this.y, this.z, this.w];
     }
 
@@ -117,8 +116,8 @@ export class Vec4 {
      * @public
      * @returns {Array.<number>} - (exactly 4 entries)
      */
-    toArray() {
-        return [this.x, this.y, this.z, this.w];
+    toArray3() {
+        return [this.x, this.y, this.z];
     }
 
     /**

package/src/og/math.js

@@ -49,26 +49,26 @@ export const DEGREES_TO_HOURS = 1.0 / 15.0;
 /** @const */
 export const SQRT_HALF = Math.sqrt(0.5);
 
-export const EPSILON1 = 0.1;
-export const EPSILON2 = 0.01;
-export const EPSILON3 = 0.001;
-export const EPSILON4 = 0.0001;
-export const EPSILON5 = 0.00001;
-export const EPSILON6 = 0.000001;
-export const EPSILON7 = 1e-7;
-export const EPSILON8 = 1e-8;
-export const EPSILON9 = 1e-9;
-export const EPSILON10 = 1e-10;
-export const EPSILON11 = 1e-11;
-export const EPSILON12 = 1e-12;
-export const EPSILON13 = 1e-13;
-export const EPSILON14 = 1e-14;
-export const EPSILON15 = 1e-15;
-export const EPSILON16 = 1e-16;
-export const EPSILON17 = 1e-17;
-export const EPSILON18 = 1e-18;
-export const EPSILON19 = 1e-19;
-export const EPSILON20 = 1e-20;
+export const EPS1 = 0.1;
+export const EPS2 = 0.01;
+export const EPS3 = 0.001;
+export const EPS4 = 0.0001;
+export const EPS5 = 0.00001;
+export const EPS6 = 0.000001;
+export const EPS7 = 1e-7;
+export const EPS8 = 1e-8;
+export const EPS9 = 1e-9;
+export const EPS10 = 1e-10;
+export const EPS11 = 1e-11;
+export const EPS12 = 1e-12;
+export const EPS13 = 1e-13;
+export const EPS14 = 1e-14;
+export const EPS15 = 1e-15;
+export const EPS16 = 1e-16;
+export const EPS17 = 1e-17;
+export const EPS18 = 1e-18;
+export const EPS19 = 1e-19;
+export const EPS20 = 1e-20;
 
 /**
  * The log function returns the power to which the base value has to be raised to produce n.
@@ -201,7 +201,7 @@ export function mod(m, n) {
  */
 export function zeroTwoPI(a) {
     const res = mod(a, TWO_PI);
-    if (Math.abs(res) < EPSILON14 && Math.abs(a) > EPSILON14) {
+    if (Math.abs(res) < EPS14 && Math.abs(a) > EPS14) {
         return TWO_PI;
     }
     return res;

package/src/og/quadTree/Node.js

@@ -230,12 +230,12 @@ class Node {
         }
 
         if (this.inFrustum || this._cameraInside || seg.tileZoom < 3) {
-            let h = cam._lonLat.height;
+            let h = Math.abs(cam._lonLat.height);
 
             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;
+            let altVis = seg.tileZoom > 19 || (seg.tileZoom < 5 && !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;
@@ -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);
@@ -786,4 +787,4 @@ class Node {
     }
 }
 
-export { Node };
+export { Node };

package/src/og/quadTree/index.js

@@ -0,0 +1,12 @@
+import { EarthQuadTreeStrategy } from "./EarthQuadTreeStrategy.js";
+import { MarsQuadTreeStrategy } from "./MarsQuadTreeStrategy.js";
+import { Wgs84QuadTreeStrategy } from "./Wgs84QuadTreeStrategy.js";
+import { QuadTreeStrategy } from "./QuadTreeStrategy.js";
+
+const quadTreeStrategyType = {
+    earth: EarthQuadTreeStrategy,
+    mars: MarsQuadTreeStrategy,
+    wgs84: Wgs84QuadTreeStrategy
+}
+
+export { quadTreeStrategyType, QuadTreeStrategy,  Wgs84QuadTreeStrategy, MarsQuadTreeStrategy, EarthQuadTreeStrategy };

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
@@ -54,6 +58,9 @@ let __depthCallbackCounter__ = 0;
  * @fires og.RendererEvents#touchleave
  * @fires og.RendererEvents#touchenter
  */
+
+let __resizeTimeout;
+
 class Renderer {
     constructor(handler, params) {
         params = params || {};
@@ -80,8 +87,6 @@ class Renderer {
 
         this.brightThreshold = 0.9;
 
-        this.backgroundColor = params.backgroundColor || new Vec3(115 / 255, 203 / 255, 249 / 255);
-
         /**
          * Render nodes drawing queue.
          * @private
@@ -192,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.
@@ -209,6 +221,8 @@ class Renderer {
 
         this._currentOutput = "screen";
 
+        this._fnScreenFrame = null;
+
         this.labelWorker = new LabelWorker(4);
     }
 
@@ -386,6 +400,7 @@ class Renderer {
         var that = this;
 
         this.billboardsTextureAtlas.assignHandler(this.handler);
+        this.geoObjectsTextureAtlas.assignHandler(this.handler);
 
         this.fontAtlas.assignHandler(this.handler);
 
@@ -456,6 +471,7 @@ class Renderer {
             }).init();
 
             this.blitFramebuffer = new Framebuffer(this.handler, {
+                size: 1,
                 useDepth: false,
                 internalFormat: this._internalFormat,
                 format: this._format,
@@ -478,11 +494,16 @@ class Renderer {
         }
 
         this.handler.ONCANVASRESIZE = () => {
-            this.resize();
+            this._resizeStart();
             this.events.dispatch(this.events.resize, this.handler.canvas);
+            clearTimeout(__resizeTimeout);
+            __resizeTimeout = setTimeout(() => {
+                this._resizeEnd();
+                this.events.dispatch(this.events.resizeend, this.handler.canvas);
+            }, 320);
         };
 
-        this._screenFrameCornersBuffer = this.handler.createArrayBuffer(
+        this.screenFramePositionBuffer = this.handler.createArrayBuffer(
             new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]),
             2,
             4
@@ -499,6 +520,10 @@ class Renderer {
         this.fontAtlas.initFont("arial", arial.data, arial.image);
     }
 
+    resize() {
+        this._resizeEnd();
+    }
+
     setCurrentScreen(screenName) {
         this._currentOutput = screenName;
         if (this.screenTexture[screenName]) {
@@ -506,22 +531,24 @@ class Renderer {
         }
     }
 
-    resize() {
+    _resizeStart() {
         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.activeCamera.setAspectRatio(c.width / c.height);
+        this.sceneFramebuffer.setSize(c.width * 0.5, c.height * 0.5);
+        this.blitFramebuffer && this.blitFramebuffer.setSize(c.width * 0.5, c.height * 0.5, true);
+    }
 
-        this.toneMappingFramebuffer &&
-        this.toneMappingFramebuffer.setSize(c.width, c.height, true);
+    _resizeEnd() {
+        let c = this.handler.canvas;
 
-        this.depthFramebuffer &&
-        this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
+        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.screenDepthFramebuffer &&
-        this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, 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];
@@ -714,35 +741,35 @@ class Renderer {
         let e = this.events;
         e.handleEvents();
 
-        let sfb = this.sceneFramebuffer;
-        sfb.activate();
+        let sceneFramebuffer = this.sceneFramebuffer;
+        sceneFramebuffer.activate();
 
-        let h = this.handler;
+        let h = this.handler,
+            gl = h.gl;
 
-        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);
+        gl.blendEquation(gl.FUNC_ADD);
+        gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+        gl.enable(gl.BLEND);
+        gl.clearColor(0.0, 0.0, 0.0, 0.0);
+        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         e.dispatch(e.draw, this);
 
         let frustums = this.activeCamera.frustums;
 
-        let pointerEvent = e.pointerEvent() || this.activeCamera.isMoved;
+        let pointerEvent = e.pointerEvent() || this.activeCamera.isMoving;
 
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
         while (k--) {
             this.activeCamera.setCurrentFrustum(k);
-            h.gl.clear(h.gl.DEPTH_BUFFER_BIT);
+            gl.clear(gl.DEPTH_BUFFER_BIT);
             let i = rn.length;
             while (i--) {
                 rn[i].drawNode();
             }
+
             this._drawEntityCollections();
 
             if (pointerEvent) {
@@ -750,16 +777,15 @@ 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
             if (h.isWebGl2()) {
                 this._drawDepthBuffer();
             }
-
             this._readPickingColor();
         }
 
@@ -783,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();
@@ -802,10 +828,10 @@ class Renderer {
 
         this.toneMappingFramebuffer.deactivate();
 
+        // SCREEN PASS
         sh = h.programs.screenFrame;
         p = sh._program;
         gl = h.gl;
-
         sh.activate();
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
@@ -816,6 +842,7 @@ class Renderer {
     }
 
     _screenFrameNoMSAA() {
+
         var h = this.handler;
         var sh = h.programs.screenFrame,
             p = sh._program,
@@ -826,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);
@@ -842,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 {
@@ -851,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.
@@ -895,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();