@openglobus/og 0.10.4 → 0.11.1

package/src/og/scene/Planet.js

@@ -100,7 +100,7 @@ const EVENT_NAMES = [
  * @fires og.scene.Planet#layervisibilitychange
  * @fires og.scene.Planet#geoimageadd
  */
-class Planet extends RenderNode {
+export class Planet extends RenderNode {
     constructor(options = {}) {
         super(options.name);
 
@@ -174,6 +174,9 @@ class Planet extends RenderNode {
          */
         this.camera = null;
 
+        this._minAltitude = options.minAltitude;
+        this._maxAltitude = options.maxAltitude;
+
         /**
          * Screen mouse pointer projected to planet cartesian position.
          * @public
@@ -672,6 +675,10 @@ class Planet extends RenderNode {
             }
         }
 
+        this.renderer.events.on("resize", () => {
+            this._renderCompletedActivated = false;
+        });
+
         // Initialize texture coordinates buffer pool
         this._textureCoordsBufferCache = [];
 
@@ -699,7 +706,9 @@ class Planet extends RenderNode {
         this.camera = this.renderer.activeCamera = new PlanetCamera(this, {
             eye: new Vec3(0, 0, 28000000),
             look: new Vec3(0, 0, 0),
-            up: new Vec3(0, 1, 0)
+            up: new Vec3(0, 1, 0),
+            minAltitude: this._minAltitude,
+            maxAltitude: this._maxAltitude
         });
 
         this.camera.update();
@@ -800,11 +809,11 @@ class Planet extends RenderNode {
         this._quadTree.renderNode();
         this._normalMapCreator.drawSingle(this._quadTree.segment);
 
-        //for (var i = 0; i < this._quadTree.nodes.length; i++) {
-        //    this._quadTree.nodes[i].segment.createPlainSegment();
-        //    this._quadTree.nodes[i].renderNode(true);
-        //    this._normalMapCreator.drawSingle(this._quadTree.nodes[i].segment);
-        //}
+        for (var i = 0; i < this._quadTree.nodes.length; i++) {
+            this._quadTree.nodes[i].segment.createPlainSegment();
+            this._quadTree.nodes[i].renderNode(true);
+            this._normalMapCreator.drawSingle(this._quadTree.nodes[i].segment);
+        }
 
         this._quadTreeNorth.createChildrenNodes();
         this._quadTreeNorth.segment.createPlainSegment();
@@ -1087,7 +1096,9 @@ class Planet extends RenderNode {
         gl.disable(gl.POLYGON_OFFSET_FILL);
 
         if (frustumIndex === cam.FARTHEST_FRUSTUM_INDEX) {
-            this._collectRenderNodes();
+            if (!this._renderCompletedActivated || this.camera._moved) {
+                this._collectRenderNodes();
+            }
 
             // Here is the planet node dispatches a draw event before
             // rendering begins and we have got render nodes.
@@ -1691,6 +1702,9 @@ class Planet extends RenderNode {
      * @param {og.Vec3} [look] - Camera "look at" point.
      * @param {og.Vec3} [up] - Camera UP vector on the end of a flying.
      * @param {Number} [ampl] - Altitude amplitude factor.
+     * @param [completeCallback]
+     * @param [startCallback]
+     * @param [frameCallback]
      */
     flyCartesian(cartesian, look, up, ampl, completeCallback, startCallback, frameCallback) {
         this.renderer.activeCamera.flyCartesian(
@@ -1711,6 +1725,9 @@ class Planet extends RenderNode {
      * @param {og.Vec3} [look] - Camera "look at" point on the end of a flying.
      * @param {og.Vec3} [up] - Camera UP vector on the end of a flying.
      * @param {Number} [ampl] - Altitude amplitude factor.
+     * @param [completeCallback]
+     * @param [startCallback]
+     * @param [frameCallback]
      */
     flyLonLat(lonlat, look, up, ampl, completeCallback, startCallback, frameCallback) {
         this.renderer.activeCamera.flyLonLat(
@@ -1761,5 +1778,3 @@ class Planet extends RenderNode {
         }
     }
 }
-
-export { Planet };

package/src/og/segment/Segment.js

@@ -12,7 +12,7 @@ import { Box } from "../bv/Box.js";
 import { Vec3 } from "../math/Vec3.js";
 import * as segmentHelper from "../segment/segmentHelper.js";
 
-export const MAX_NORMAL_ZOOM = 6;
+export const MAX_NORMAL_ZOOM = 7;
 
 var _tempHigh = new Vec3();
 var _tempLow = new Vec3();
@@ -1000,7 +1000,7 @@ Segment.prototype.createBoundsByExtent = function () {
     var coord_ne = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.northEast.lat);
 
     // check for zoom
-    if (this.tileZoom < MAX_NORMAL_ZOOM) {
+    if (this.tileZoom <= MAX_NORMAL_ZOOM) {
         var coord_nw = ellipsoid.geodeticToCartesian(extent.southWest.lon, extent.northEast.lat);
         var coord_se = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.southWest.lat);
 
@@ -1037,7 +1037,7 @@ Segment.prototype.createBoundsByParent = function () {
             this.bsphere.center.z = pn.segment.bsphere.center.z;
             this.bsphere.radius = pn.segment.bsphere.radius;
 
-            if (this.tileZoom < MAX_NORMAL_ZOOM) {
+            if (this.tileZoom <= MAX_NORMAL_ZOOM) {
                 let i0 = gridSize * offsetY;
                 let j0 = gridSize * offsetX;
 

package/src/og/segment/SegmentLonLat.js

@@ -93,6 +93,13 @@ SegmentLonLat.prototype._assignTileIndexes = function () {
         );
     }
 
+    var p2 = Math.pow(2, tileZoom);
+    this.tileXE = (this.tileX + 1) % p2;
+    this.tileXW = (p2 + this.tileX - 1) % p2;
+
+    this.tileYN = this.tileY - 1;
+    this.tileYS = this.tileY + 1;
+
     this.tileIndex = Layer.getTileIndex(this.tileX, this.tileY, tileZoom);
 };
 

package/src/og/terrain/GlobusTerrain.js

@@ -51,6 +51,10 @@ const EVENT_NAMES = [
  * @fires og.terrain.GlobusTerrain#loadend
  */
 class GlobusTerrain extends EmptyTerrain {
+    /**
+     * @param {string} [name]
+     * @param {*} [options]
+     */
     constructor(name, options) {
         super();
 

package/src/og/utils/FontAtlas.js

@@ -188,6 +188,7 @@ class FontAtlas {
                 };
 
                 img.src = `${srcDir}/${data.pages[0]}`;
+                img.crossOrigin = "Anonymous";
             })
             .catch(err => {
                 def.reject();

package/src/og/utils/GeoImageCreator.js

@@ -1,143 +1,145 @@
 'use strict';
 
+import { LonLat } from '../LonLat.js';
 import * as utils from '../utils/shared.js';
 import { Framebuffer } from '../webgl/Framebuffer.js';
-import { LonLat } from '../LonLat.js';
 import { Program } from '../webgl/Program.js';
 import { types } from '../webgl/types.js';
 
-const GeoImageCreator = function (planet, maxFrames) {
-    this._gridSize = 64;
-    this._planet = planet;
-    this._framebuffer = null;
-    this._texCoordsBuffer = null;
-    this._indexBuffer = null;
-    this.MAX_FRAMES = maxFrames || 5;
-    this._currentFrame = 0;
-    this._queue = [];
-    this._animate = [];
-    this._initialize();
-};
-
-GeoImageCreator.prototype._initialize = function () {
-    this._initShaders();
-    this._initBuffers();
-};
-
-/**
- * Creates geoImage corners coordinates grid buffer.
- * @public
- * @param{Array.<og.LonLat>} c - GeoImage corners coordinates.
- * @return{WebGLBuffer} Grid coordinates buffer.
- */
-GeoImageCreator.prototype.createGridBuffer = function (c, toMerc) {
-    var gs = this._gridSize;
-
-    var v03 = new LonLat((c[3].lon - c[0].lon) / gs, (c[3].lat - c[0].lat) / gs),
-        v12 = new LonLat((c[2].lon - c[1].lon) / gs, (c[2].lat - c[1].lat) / gs),
-        v01 = new LonLat((c[1].lon - c[0].lon) / gs, (c[1].lat - c[0].lat) / gs),
-        v32 = new LonLat((c[2].lon - c[3].lon) / gs, (c[2].lat - c[3].lat) / gs);
-
-    var grid = new Float32Array((gs + 1) * (gs + 1) * 2);
-    var k = 0;
-    for (let i = 0; i <= gs; i++) {
-        var P03i = new LonLat(c[0].lon + i * v03.lon, c[0].lat + i * v03.lat),
-            P12i = new LonLat(c[1].lon + i * v12.lon, c[1].lat + i * v12.lat);
-        for (let j = 0; j <= gs; j++) {
-            var P01j = new LonLat(c[0].lon + j * v01.lon, c[0].lat + j * v01.lat),
-                P32j = new LonLat(c[3].lon + j * v32.lon, c[3].lat + j * v32.lat);
-            var xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j);
-            grid[k++] = xx.lon;
-            grid[k++] = xx.lat;
+export class GeoImageCreator {
+
+    constructor(planet, maxFrames) {
+        this._gridSize = 64;
+        this._planet = planet;
+        this._framebuffer = null;
+        this._texCoordsBuffer = null;
+        this._indexBuffer = null;
+        this.MAX_FRAMES = maxFrames || 5;
+        this._currentFrame = 0;
+        this._queue = [];
+        this._animate = [];
+        this._initialize();
+    };
+
+    _initialize() {
+        this._initShaders();
+        this._initBuffers();
+    };
+
+    /**
+     * Creates geoImage corners coordinates grid buffer.
+     * @public
+     * @param{Array.<og.LonLat>} c - GeoImage corners coordinates.
+     * @return{WebGLBuffer} Grid coordinates buffer.
+     */
+    createGridBuffer(c, toMerc) {
+        var gs = this._gridSize;
+
+        var v03 = new LonLat((c[3].lon - c[0].lon) / gs, (c[3].lat - c[0].lat) / gs),
+            v12 = new LonLat((c[2].lon - c[1].lon) / gs, (c[2].lat - c[1].lat) / gs),
+            v01 = new LonLat((c[1].lon - c[0].lon) / gs, (c[1].lat - c[0].lat) / gs),
+            v32 = new LonLat((c[2].lon - c[3].lon) / gs, (c[2].lat - c[3].lat) / gs);
+
+        var grid = new Float32Array((gs + 1) * (gs + 1) * 2);
+        var k = 0;
+        for (let i = 0; i <= gs; i++) {
+            var P03i = new LonLat(c[0].lon + i * v03.lon, c[0].lat + i * v03.lat),
+                P12i = new LonLat(c[1].lon + i * v12.lon, c[1].lat + i * v12.lat);
+            for (let j = 0; j <= gs; j++) {
+                var P01j = new LonLat(c[0].lon + j * v01.lon, c[0].lat + j * v01.lat),
+                    P32j = new LonLat(c[3].lon + j * v32.lon, c[3].lat + j * v32.lat);
+                var xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j);
+                grid[k++] = xx.lon;
+                grid[k++] = xx.lat;
+            }
         }
-    }
 
-    if (toMerc) {
-        for (let i = 0; i < grid.length; i += 2) {
-            let c = new LonLat(grid[i], grid[i + 1]).forwardMercator();
-            grid[i] = c.lon;
-            grid[i + 1] = c.lat;
+        if (toMerc) {
+            for (let i = 0; i < grid.length; i += 2) {
+                let c = new LonLat(grid[i], grid[i + 1]).forwardMercator();
+                grid[i] = c.lon;
+                grid[i + 1] = c.lat;
+            }
         }
-    }
-    return this._planet.renderer.handler.createArrayBuffer(grid, 2, grid.length / 2);
-};
-
-GeoImageCreator.prototype.frame = function () {
-    var i = this.MAX_FRAMES;
-    while (i-- && this._queue.length) {
-        var q = this._queue.shift();
-        q._isRendering = false;
-        q.rendering();
-    }
-
-    i = this._animate.length;
-    while (i--) {
-        this._animate[i].rendering();
-    }
-};
-
-GeoImageCreator.prototype.add = function (geoImage) {
-    if (!geoImage._isRendering) {
-        geoImage._isRendering = true;
-        if (geoImage._animate) {
-            this._animate.push(geoImage);
-        } else {
-            this._queue.push(geoImage);
+        return this._planet.renderer.handler.createArrayBuffer(grid, 2, grid.length / 2);
+    };
+
+    frame() {
+        var i = this.MAX_FRAMES;
+        while (i-- && this._queue.length) {
+            var q = this._queue.shift();
+            q._isRendering = false;
+            q.rendering();
         }
-    }
-};
-
-GeoImageCreator.prototype.remove = function (geoImage) {
-    if (geoImage._isRendering) {
-        geoImage._creationProceeding = false;
-        geoImage._isRendering = false;
-        var arr;
-        if (geoImage._animate) {
-            arr = this._animate;
-        } else {
-            arr = this._queue;
+
+        i = this._animate.length;
+        while (i--) {
+            this._animate[i].rendering();
+        }
+    };
+
+    add(geoImage) {
+        if (!geoImage._isRendering) {
+            geoImage._isRendering = true;
+            if (geoImage._animate) {
+                this._animate.push(geoImage);
+            } else {
+                this._queue.push(geoImage);
+            }
         }
-        for (var i = 0; i < arr.length; i++) {
-            if (arr[i].isEqual(geoImage)) {
-                arr.splice(i, 1);
-                return;
+    };
+
+    remove(geoImage) {
+        if (geoImage._isRendering) {
+            geoImage._creationProceeding = false;
+            geoImage._isRendering = false;
+            var arr;
+            if (geoImage._animate) {
+                arr = this._animate;
+            } else {
+                arr = this._queue;
+            }
+            for (var i = 0; i < arr.length; i++) {
+                if (arr[i].isEqual(geoImage)) {
+                    arr.splice(i, 1);
+                    return;
+                }
             }
         }
-    }
-};
+    };
 
-GeoImageCreator.prototype._initBuffers = function () {
+    _initBuffers() {
 
-    let h = this._planet.renderer.handler;
+        let h = this._planet.renderer.handler;
 
-    this._framebuffer = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
-    this._framebuffer.init();
+        this._framebuffer = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
+        this._framebuffer.init();
 
-    this._framebufferMercProj = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
-    this._framebufferMercProj.init();
+        this._framebufferMercProj = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
+        this._framebufferMercProj.init();
 
-    let gs = Math.log2(this._gridSize);
+        let gs = Math.log2(this._gridSize);
 
-    this._texCoordsBuffer = this._planet._textureCoordsBufferCache[gs];
+        this._texCoordsBuffer = this._planet._textureCoordsBufferCache[gs];
 
-    this._indexBuffer = this._planet._indexesCache[gs][gs][gs][gs][gs].buffer;
+        this._indexBuffer = this._planet._indexesCache[gs][gs][gs][gs][gs].buffer;
 
-    this._quadTexCoordsBuffer = h.createArrayBuffer(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2, 4);
-    this._quadVertexBuffer = h.createArrayBuffer(new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]), 2, 4);
-};
+        this._quadTexCoordsBuffer = h.createArrayBuffer(new Float32Array([0, 1, 1, 1, 0, 0, 1, 0]), 2, 4);
+        this._quadVertexBuffer = h.createArrayBuffer(new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]), 2, 4);
+    };
 
-GeoImageCreator.prototype._initShaders = function () {
+    _initShaders() {
 
-    this._planet.renderer.handler.addProgram(new Program("geoImageTransform", {
-        uniforms: {
-            sourceTexture: { type: types.SAMPLER2D },
-            extentParams: { type: types.VEC4 }
-        },
-        attributes: {
-            corners: { type: types.VEC2, enableArray: true },
-            texCoords: { type: types.VEC2, enableArray: true }
-        },
-        vertexShader: `attribute vec2 corners; 
+        this._planet.renderer.handler.addProgram(new Program("geoImageTransform", {
+            uniforms: {
+                sourceTexture: { type: types.SAMPLER2D },
+                extentParams: { type: types.VEC4 }
+            },
+            attributes: {
+                corners: { type: types.VEC2, enableArray: true },
+                texCoords: { type: types.VEC2, enableArray: true }
+            },
+            vertexShader: `attribute vec2 corners; 
                       attribute vec2 texCoords; 
                       varying vec2 v_texCoords; 
                       uniform vec4 extentParams; 
@@ -145,14 +147,14 @@ GeoImageCreator.prototype._initShaders = function () {
                           v_texCoords = texCoords; 
                           gl_Position = vec4((-1.0 + (corners - extentParams.xy) * extentParams.zw) * vec2(1.0, -1.0), 0.0, 1.0); 
                       }`,
-        fragmentShader:
-            `precision highp float;
+            fragmentShader:
+                `precision highp float;
                         uniform sampler2D sourceTexture;
                         varying vec2 v_texCoords;
                         void main () { 
                             gl_FragColor = texture2D(sourceTexture, v_texCoords);
                         }`
-    }));
-};
+        }));
+    };
 
-export { GeoImageCreator };
+}

package/src/og/utils/Loader.js

@@ -14,99 +14,100 @@ if (window && !('createImageBitmap' in window)) {
     };
 };
 
-const Loader = function (maxRequests = 12) {
+export class Loader {
 
-    this.MAX_REQUESTS = maxRequests;
+    constructor(maxRequests = 12) {
 
-    this.events = new Events(["loadend"]);
+        this.MAX_REQUESTS = maxRequests;
 
-    this._loading = 0;
+        this.events = new Events(["loadend"]);
 
-    this._queue = [];//new QueueArray();
+        this._loading = 0;
 
-    this._promises = {
-        'json': r => r.json(),
-        'blob': r => r.blob(),
-        'arrayBuffer': r => r.arrayBuffer(),
-        'imageBitmap': r => r.blob().then(createImageBitmap),
-        'text': r => r.text()
+        this._queue = [];//new QueueArray();
+
+        this._promises = {
+            'json': r => r.json(),
+            'blob': r => r.blob(),
+            'arrayBuffer': r => r.arrayBuffer(),
+            'imageBitmap': r => r.blob().then(createImageBitmap),
+            'text': r => r.text()
+        };
     };
-};
 
-Loader.prototype.load = function (params, callback) {
-    this._queue.push({ 'params': params, 'callback': callback });
-    this._exec();
-};
+    load(params, callback) {
+        this._queue.push({ 'params': params, 'callback': callback });
+        this._exec();
+    };
 
-Loader.prototype.fetch = function (params) {
-    return fetch(
-        params.src,
-        params.options || {})
+    fetch(params) {
+        return fetch(
+            params.src,
+            params.options || {})
 
-        .then(response => {
-            if (!response.ok) {
-                throw Error(`Unable to load '${params.src}'`);
-            }
-            return this._promises[params.type || "blob"](response);
-        })
+            .then(response => {
+                if (!response.ok) {
+                    throw Error(`Unable to load '${params.src}'`);
+                }
+                return this._promises[params.type || "blob"](response);
+            })
 
-        .then(data => {
-            return { 'status': "ready", 'data': data };
+            .then(data => {
+                return { 'status': "ready", 'data': data };
 
-        })
+            })
 
-        .catch(err => {
-            return { 'status': "error", 'msg': err.toString() };
-        });
-};
+            .catch(err => {
+                return { 'status': "error", 'msg': err.toString() };
+            });
+    };
 
-Loader.prototype._exec = function () {
-
-    if (this._queue.length > 0 && this._loading < this.MAX_REQUESTS) {
-
-        let q = this._queue.pop(),
-            p = q.params;
-
-        if (!p.filter || p.filter(p)) {
-
-            this._loading++;
-
-            return fetch(p.src, p.options || {})
-                .then(response => {
-                    if (!response.ok) {
-                        throw Error(`Unable to load '${p.src}'`);
-                    }
-                    return this._promises[p.type || "blob"](response);
-                })
-                .then(data => {
-                    this._loading--;
-                    q.callback({ 'status': "ready", 'data': data });
-                    this._exec();
-                })
-                .catch(err => {
-                    this._loading--;
-                    q.callback({ 'status': "error", 'msg': err.toString() });
-                    this._exec();
-                });
-
-        } else {
-            q.callback({ 'status': "abort" });
-            this._exec();
+    _exec() {
+
+        if (this._queue.length > 0 && this._loading < this.MAX_REQUESTS) {
+
+            let q = this._queue.pop(),
+                p = q.params;
+
+            if (!p.filter || p.filter(p)) {
+
+                this._loading++;
+
+                return fetch(p.src, p.options || {})
+                    .then(response => {
+                        if (!response.ok) {
+                            throw Error(`Unable to load '${p.src}'`);
+                        }
+                        return this._promises[p.type || "blob"](response);
+                    })
+                    .then(data => {
+                        this._loading--;
+                        q.callback({ 'status': "ready", 'data': data });
+                        this._exec();
+                    })
+                    .catch(err => {
+                        this._loading--;
+                        q.callback({ 'status': "error", 'msg': err.toString() });
+                        this._exec();
+                    });
+
+            } else {
+                q.callback({ 'status': "abort" });
+                this._exec();
+            }
+        } else if (this._loading === 0) {
+            this.events.dispatch(this.events.loadend);
         }
-    } else if (this._loading === 0) {
-        this.events.dispatch(this.events.loadend);
-    }
-};
-
-Loader.prototype.abort = function () {
-    //this._queue.each(e => e.callback({ 'status': "abort" }));
-    //this._queue.clear();
+    };
 
-    for (let i = 0, len = this._queue.length; i < len; i++) {
-        this._queue[i].callback({ 'status': "abort" });
-        this._queue[i] = null;
-    }
-    this._queue = [];
-};
+    abort() {
+        //this._queue.each(e => e.callback({ 'status': "abort" }));
+        //this._queue.clear();
 
-export { Loader };
+        for (let i = 0, len = this._queue.length; i < len; i++) {
+            this._queue[i].callback({ 'status': "abort" });
+            this._queue[i] = null;
+        }
+        this._queue = [];
+    };
+}