@openglobus/og 0.11.2 → 0.11.7

package/src/og/layer/CanvasTiles.js

@@ -30,7 +30,7 @@ const EVENT_NAMES = [
 /**
  * Layer used to rendering each tile as a separate canvas object.
  * @class
- * @extends {og.Layer}
+ * @extends {Layer}
  * //TODO: make asynchronous handler.
  * @param {String} [name="noname"] - Layer name.
  * @param {Object} options:
@@ -41,7 +41,7 @@ const EVENT_NAMES = [
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - Base layer flag.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {og.layer.CanvasTiles~drawTileCallback} [options.drawTile] - Draw tile callback.
+ * @param {layer.CanvasTiles~drawTileCallback} [options.drawTile] - Draw tile callback.
  * @fires og.layer.CanvasTiles#load
  * @fires og.layer.CanvasTiles#loadend
  */
@@ -63,13 +63,13 @@ class CanvasTiles extends Layer {
         /**
          * Tile pending queue that waiting for create.
          * @protected
-         * @type {Array.<og.planetSegment.Material>}
+         * @type {Array.<planetSegment.Material>}
          */
         this._pendingsQueue = []; // new og.QueueArray();
 
         /**
          * Draw tile callback.
-         * @type {og.layer.CanvasTiles~drawTileCallback}
+         * @type {layer.CanvasTiles~drawTileCallback}
          * @public
          */
         this.drawTile = options.drawTile || null;
@@ -116,7 +116,7 @@ class CanvasTiles extends Layer {
      * Start to load tile material.
      * @public
      * @virtual
-     * @param {og.planetSegment.Material} material -
+     * @param {Material} material -
      */
     loadMaterial(material) {
         var seg = material.segment;
@@ -143,7 +143,7 @@ class CanvasTiles extends Layer {
     /**
      * Loads material image and apply it to the planet segment.
      * @protected
-     * @param {og.planetSegment.Material} material - Loads material image.
+     * @param {Material} material - Loads material image.
      */
     _exec(material) {
         CanvasTiles.__requestsCounter++;
@@ -153,31 +153,31 @@ class CanvasTiles extends Layer {
             /**
              * Tile custom draw function.
              * @callback og.layer.CanvasTiles~drawTileCallback
-             * @param {og.planetSegment.Material} material
+             * @param {Material} material
              * @param {applyCanvasCallback} applyCanvasCallback
              */
             var e = that.events.load;
             if (e.handlers.length) {
                 that.events.dispatch(e, material);
             }
-            that.drawTile(
-                material,
-                /**
-                 * Apply canvas.
-                 * @callback applyCanvasCallback
-                 * @param {Object} canvas -
-                 */
-                function (canvas) {
-                    that._counter--;
-                    CanvasTiles.__requestsCounter--;
-                    if (material.isLoading) {
-                        requestAnimationFrame(() => {
+            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._dequeueRequest();
-                }
-            );
+                );
+            });
         } else {
             material.textureNotExists();
         }
@@ -186,7 +186,7 @@ class CanvasTiles extends Layer {
     /**
      * Abort exact material loading.
      * @public
-     * @param {og.planetSegment.Material} material - Segment material.
+     * @param {Material} material - Segment material.
      */
     abortMaterialLoading(material) {
         if (material.isLoading && material.image) {

package/src/og/layer/GeoImage.js

@@ -2,14 +2,14 @@
  * @module og/layer/GeoImage
  */
 
-'use strict';
+"use strict";
 
-import { BaseGeoImage } from './BaseGeoImage.js';
+import { BaseGeoImage } from "./BaseGeoImage.js";
 
 /**
  * Used to load and display a single image over specific corner coordinates on the globe, implements og.layer.BaseGeoImage interface.
  * @class
- * @extends {og.layer.BaseGeoImage}
+ * @extends {BaseGeoImage}
  */
 class GeoImage extends BaseGeoImage {
     constructor(name, options) {
@@ -84,7 +84,7 @@ class GeoImage extends BaseGeoImage {
      * Loads planet segment material. In this case - GeoImage source image.
      * @virtual
      * @public
-     * @param {og.planetSegment.Material} material - GeoImage planet material.
+     * @param {Material} material - GeoImage planet material.
      */
     loadMaterial(material) {
         material.isLoading = true;
@@ -95,14 +95,14 @@ class GeoImage extends BaseGeoImage {
                     this._onLoad(this._image);
                 } else if (this._image.src) {
                     let that = this;
-                    this._image.addEventListener('load', function (e) {
+                    this._image.addEventListener("load", function (e) {
                         that._onLoad(this);
                     });
                 }
             } else {
                 let that = this;
                 this._image = new Image();
-                this._image.addEventListener('load', function (e) {
+                this._image.addEventListener("load", function (e) {
                     that._onLoad(this);
                 });
                 this._image.src = this._src;
@@ -114,10 +114,10 @@ class GeoImage extends BaseGeoImage {
 
     /**
      * @virtual
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     abortMaterialLoading(material) {
-        this._image && (this._image.src = '');
+        this._image && (this._image.src = "");
         this._creationProceeding = false;
         material.isLoading = false;
         material.isReady = false;
@@ -220,4 +220,4 @@ class GeoImage extends BaseGeoImage {
     }
 }
 
-export { GeoImage };
+export { GeoImage };

package/src/og/layer/GeoVideo.js

@@ -9,7 +9,7 @@ import { BaseGeoImage } from "./BaseGeoImage.js";
 /**
  * Used to load and display a video stream by specific corners coordinates on the globe, implements og.layer.BaseGeoImage interface.
  * @class
- * @extends {og.layer.BaseGeoImage}
+ * @extends {BaseGeoImage}
  */
 class GeoVideo extends BaseGeoImage {
     constructor(name, options) {
@@ -139,7 +139,7 @@ class GeoVideo extends BaseGeoImage {
      * Loads planet segment material. In this case - GeoImage source video.
      * @virtual
      * @public
-     * @param {og.planetSegment.Material} material - GeoImage planet material.
+     * @param {Material} material - GeoImage planet material.
      */
     loadMaterial(material) {
         material.isLoading = true;
@@ -177,7 +177,7 @@ class GeoVideo extends BaseGeoImage {
 
     /**
      * @virtual
-     * @param {og.planetSegment.Material} material - GeoImage material.
+     * @param {Material} material - GeoImage material.
      */
     abortMaterialLoading(material) {
         this._video && (this._video.src = "");

package/src/og/layer/KML.js

@@ -2,41 +2,51 @@
  * @module og/layer/KML
  */
 
-'use strict';
-import { Entity } from '../entity/Entity.js';
-import { Extent } from '../Extent.js';
-import { LonLat } from '../LonLat.js';
-import { Vector } from './Vector.js';
+"use strict";
+import { Entity } from "../entity/Entity.js";
+import { Extent } from "../Extent.js";
+import { LonLat } from "../LonLat.js";
+import { Vector } from "./Vector.js";
 
 /**
  * Layer to render KMLs files
  * @class
- * @extends {og.Vector}
+ * @extends {Vector}
  */
 export class KML extends Vector {
-
     /**
-     * 
-     * @param {string} name 
+     *
+     * @param {string} name
      * @param {*} [options]
      */
     constructor(name, options = {}) {
         super(name, options);
         this._extent = null;
-        this._billboard = options.billboard || { src: 'https://openglobus.org/examples/billboards/carrot.png' };
-        this._color = options.color || '#6689db';
+        this._billboard = options.billboard || {
+            src: "https://openglobus.org/examples/billboards/carrot.png"
+        };
+        /**
+         * @type {string}
+         */
+        this._color = options.color || "#6689db";
     }
 
     get instanceName() {
-        return 'KML';
+        return "KML";
     }
 
     /**
      * @private
      */
     _extractCoordonatesFromKml(xmlDoc) {
-        const raw = Array.from(xmlDoc.getElementsByTagName('coordinates'));
-        const coordinates = raw.map(item => item.textContent.trim().replace(/\n/g, ' ').split(' ').map(co => co.split(',').map(parseFloat)));
+        const raw = Array.from(xmlDoc.getElementsByTagName("coordinates"));
+        const coordinates = raw.map((item) =>
+            item.textContent
+                .trim()
+                .replace(/\n/g, " ")
+                .split(" ")
+                .map((co) => co.split(",").map(parseFloat))
+        );
         return coordinates;
     }
 
@@ -44,32 +54,35 @@ export class KML extends Vector {
      * Creates billboards or polylines from array of lonlat.
      * @private
      * @param {Array} coordonates
-     * @param {string} color 
-     * @returns {Array<og.Entity>}
+     * @param {string} color
+     * @returns {Array<Entity>}
      */
     _convertCoordonatesIntoEntities(coordinates, color, billboard) {
         const extent = new Extent(new LonLat(180.0, 90.0), new LonLat(-180.0, -90.0));
         const addToExtent = (c) => {
-            const lon = c[0], lat = c[1];
+            const lon = c[0],
+                lat = c[1];
             if (lon < extent.southWest.lon) extent.southWest.lon = lon;
             if (lat < extent.southWest.lat) extent.southWest.lat = lat;
             if (lon > extent.northEast.lon) extent.northEast.lon = lon;
             if (lat > extent.northEast.lat) extent.northEast.lat = lat;
         };
         const _pathes = [];
-        coordinates.forEach(kmlFile => kmlFile.forEach(p => _pathes.push(p)));
-        const entities = _pathes.map(path => {
+        coordinates.forEach((kmlFile) => kmlFile.forEach((p) => _pathes.push(p)));
+        const entities = _pathes.map((path) => {
             if (path.length === 1) {
                 const lonlat = path[0];
                 const _entity = new Entity({ lonlat, billboard });
                 addToExtent(lonlat);
                 return _entity;
             } else if (path.length > 1) {
-                const pathLonLat = path.map(item => {
+                const pathLonLat = path.map((item) => {
                     addToExtent(item);
                     return new LonLat(item[0], item[1], item[2]);
                 });
-                const _entity = new Entity({ polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false } });
+                const _entity = new Entity({
+                    polyline: { pathLonLat: [pathLonLat], thickness: 3, color, isClosed: false }
+                });
                 return _entity;
             }
         });
@@ -78,11 +91,13 @@ export class KML extends Vector {
 
     /**
      * @private
+     * @returns {Document}
      */
     _getXmlContent(file) {
-        return new Promise(resolve => {
+        return new Promise((resolve) => {
             const fileReader = new FileReader();
-            fileReader.onload = async i => resolve((new DOMParser()).parseFromString(i.target.result, 'text/xml'));
+            fileReader.onload = async (i) =>
+                resolve(new DOMParser().parseFromString(i.target.result, "text/xml"));
             fileReader.readAsText(file);
         });
     }
@@ -92,29 +107,37 @@ export class KML extends Vector {
      */
     _expandExtents(extent1, extent2) {
         if (!extent1) return extent2;
-        if (extent2.southWest.lon < extent1.southWest.lon) extent1.southWest.lon = extent2.southWest.lon;
-        if (extent2.southWest.lat < extent1.southWest.lat) extent1.southWest.lat = extent2.southWest.lat;
-        if (extent2.northEast.lon > extent1.northEast.lon) extent1.northEast.lon = extent2.northEast.lon;
-        if (extent2.northEast.lat > extent1.northEast.lat) extent1.northEast.lat = extent2.northEast.lat;
+        if (extent2.southWest.lon < extent1.southWest.lon)
+            extent1.southWest.lon = extent2.southWest.lon;
+        if (extent2.southWest.lat < extent1.southWest.lat)
+            extent1.southWest.lat = extent2.southWest.lat;
+        if (extent2.northEast.lon > extent1.northEast.lon)
+            extent1.northEast.lon = extent2.northEast.lon;
+        if (extent2.northEast.lat > extent1.northEast.lat)
+            extent1.northEast.lat = extent2.northEast.lat;
         return extent1;
     }
 
     /**
      * @public
      * @param {File[]} kmls
-     * @returns {Promise}
+     * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromFiles(kmls) {
         const kmlObjs = await Promise.all(kmls.map(this._getXmlContent));
         const coordonates = kmlObjs.map(this._extractCoordonatesFromKml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities(coordonates, this._color, this._billboard);
+        const { entities, extent } = this._convertCoordonatesIntoEntities(
+            coordonates,
+            this._color,
+            this._billboard
+        );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
         return { entities, extent };
     }
 
     /**
-     * @param {string} color 
+     * @param {string} color
      * @public
      */
     setColor(color) {
@@ -128,14 +151,14 @@ export class KML extends Vector {
     _getKmlFromUrl(url) {
         return new Promise((resolve, reject) => {
             const request = new XMLHttpRequest();
-            request.open('GET', url, true);
-            request.responseType = 'document';
-            request.overrideMimeType('text/xml');
+            request.open("GET", url, true);
+            request.responseType = "document";
+            request.overrideMimeType("text/xml");
             request.onload = () => {
                 if (request.readyState === request.DONE && request.status === 200) {
                     resolve(request.responseXML);
                 } else {
-                    reject(new Error('no valid kml file'));
+                    reject(new Error("no valid kml file"));
                 }
             };
             request.send();
@@ -145,15 +168,18 @@ export class KML extends Vector {
     /**
      * @public
      * @param {string} url - Url of the KML to display. './myFile.kml' or 'http://mySite/myFile.kml' for example.
-     * @returns {Promise}
+     * @returns {Promise<{entities: Entity[], extent: Extent}>}
      */
     async addKmlFromUrl(url) {
         const kml = await this._getKmlFromUrl(url);
         const coordonates = this._extractCoordonatesFromKml(kml);
-        const { entities, extent } = this._convertCoordonatesIntoEntities([coordonates], this._color, this._billboard);
+        const { entities, extent } = this._convertCoordonatesIntoEntities(
+            [coordonates],
+            this._color,
+            this._billboard
+        );
         this._extent = this._expandExtents(this._extent, extent);
         entities.forEach(this.add.bind(this));
         return { entities, extent };
     }
-
 }

package/src/og/layer/Layer.js

@@ -28,10 +28,12 @@ export const FADING_FACTOR = 0.29;
  * @param {string} [options.attribution] - Layer attribution that displayed in the attribution area on the screen.
  * @param {boolean} [options.isBaseLayer=false] - This is a base layer.
  * @param {boolean} [options.visibility=true] - Layer visibility.
- * @param {og.Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
- * @param {og.Vec3} [options.ambient=[0.1, 0.1, 0.21]] - Ambient RGB color.
- * @param {og.Vec3} [options.diffuse=[1.0, 1.0, 1.0]] - Diffuse RGB color.
- * @param {og.Vec3} [options.specular=[0.00025, 0.00015, 0.0001]] - Specular RGB color.
+ * @param {boolean} [options.isSRGB=false] - Layer image webgl nternal format.
+ * @param {Extent} [options.extent=[[-180.0, -90.0], [180.0, 90.0]]] - Visible extent.
+ * @param {Vec3} [options.ambient=[0.1, 0.1, 0.1]] - Ambient RGB color.
+ * @param {Vec3} [options.diffuse=[0.9, 0.9, 0.9]] - Diffuse RGB color.
+ * @param {Vec3} [options.specular=[0.00025, 0.00015, 0.0001]] - Specular RGB color.
+ * @param {string} [options.textureFilter="anisotropic"] - Image texture filter. Available values: "nearest", "linear", "mipmap" and "anisotropic".
  * @param {Number} [options.shininess=100] - Shininess.
  *
  * @fires og.Layer#visibilitychange
@@ -110,15 +112,15 @@ class Layer {
          * @public
          * @type {Object}
          */
-        this.ambient = utils.createColorRGB(options.ambient, new Vec3(0.1, 0.1, 0.21));
-        this.diffuse = utils.createColorRGB(options.diffuse, new Vec3(0.5, 0.5, 0.35));
-        this.specular = utils.createColorRGB(options.specular, new Vec3(0.0003, 0.00012, 0.00001));
+        this.ambient = utils.createColorRGB(options.ambient, new Vec3(0.2, 0.2, 0.2));
+        this.diffuse = utils.createColorRGB(options.diffuse, new Vec3(0.8, 0.8, 0.8));
+        this.specular = utils.createColorRGB(options.specular, new Vec3(0.0003, 0.0003, 0.0003));
         this.shininess = options.shininess || 20.0;
 
         /**
          * Planet node.
          * @protected
-         * @type {og.scene.Planet}
+         * @type {Planet}
          */
         this._planet = null;
 
@@ -179,14 +181,22 @@ class Layer {
         /**
          * Visible degrees extent.
          * @protected
-         * @type {og.Extent}
+         * @type {Extent}
          */
         this._extent = null;
 
+        this.createTexture = null;
+
+        this._textureFilter = options.textureFilter ? options.textureFilter.trim().toUpperCase() : "MIPMAP";
+
+        this._isSRGB = options.isSRGB != undefined ? options.isSRGB : false;
+
+        this._internalFormat = null;
+
         /**
          * Visible mercator extent.
          * @protected
-         * @type {og.Extent}
+         * @type {Extent}
          */
         this._extentMerc = null;
 
@@ -201,7 +211,7 @@ class Layer {
         /**
          * Layer picking color. Assign when added to the planet.
          * @protected
-         * @type {og.Vec3}
+         * @type {Vec3}
          */
         this._pickingColor = new Vec3();
 
@@ -210,7 +220,7 @@ class Layer {
         /**
          * Events handler.
          * @public
-         * @type {og.Events}
+         * @type {Events}
          */
         this.events = new Events(EVENT_NAMES, this);
     }
@@ -310,7 +320,7 @@ class Layer {
     /**
      * Compares layers instances.
      * @public
-     * @param {og.Layer} layer - Layer instance to compare.
+     * @param {Layer} layer - Layer instance to compare.
      * @returns {boolean} - Returns true if the layers is the same instance of the input.
      */
     isEqual(layer) {
@@ -321,9 +331,18 @@ class Layer {
      * Assign the planet.
      * @protected
      * @virtual
-     * @param {og.scene.Planet} planet - Planet render node.
-     */
-    _assignPlanet(planet) {
+     * @param {Planet} planet - Planet render node.
+     */
+    _assignPlanet(planet) {
+        // TODO: webgl1
+        if (this._isSRGB) {
+            this._internalFormat = planet.renderer.handler.gl.SRGB8_ALPHA8;
+        } else {
+            this._internalFormat = planet.renderer.handler.gl.RGBA8;
+        }
+
+        this.createTexture = planet.renderer.handler.createTexture[this._textureFilter];
+
         planet.layers.push(this);
         this._planet = planet;
         this.events.on("visibilitychange", planet._onLayerVisibilityChanged, planet);
@@ -348,7 +367,7 @@ class Layer {
     /**
      * Adds layer to the planet.
      * @public
-     * @param {og.scene.Planet} planet - Adds layer to the planet.
+     * @param {Planet} planet - Adds layer to the planet.
      */
     addTo(planet) {
         if (!this._planet) {
@@ -360,7 +379,7 @@ class Layer {
     /**
      * Removes from planet.
      * @public
-     * @returns {og.Layer} -This layer.
+     * @returns {Layer} -This layer.
      */
     remove() {
         var p = this._planet;
@@ -386,7 +405,11 @@ class Layer {
      * @virtual
      */
     clear() {
-        this._planet && this._planet._clearLayerMaterial(this);
+        if (this._planet) {
+            this._planet._clearLayerMaterial(this);
+            this._internalFormat = null;
+            this.createTexture = null;
+        }
     }
 
     /**
@@ -514,7 +537,7 @@ class Layer {
     /**
      * Sets visible geographical extent.
      * @public
-     * @param {og.Extent} extent - Layer visible geographical extent.
+     * @param {Extent} extent - Layer visible geographical extent.
      */
     setExtent(extent) {
         var sw = extent.southWest.clone(),
@@ -533,7 +556,7 @@ class Layer {
     /**
      * Gets layer extent.
      * @public
-     * @return {og.Extent} - Layer geodetic extent.
+     * @return {Extent} - Layer geodetic extent.
      */
     getExtent() {
         return this._extent;

package/src/og/layer/Material.js

@@ -2,14 +2,13 @@
  * @module og/layer/Material
  */
 
-'use strict';
+"use strict";
 
 class Material {
-
     /**
-     * 
-     * @param {*} segment 
-     * @param {*} layer 
+     *
+     * @param {*} segment
+     * @param {*} layer
      */
     constructor(segment, layer) {
         this.segment = segment;
@@ -30,29 +29,33 @@ class Material {
         this.pickingReady = false;
     }
 
-    /**
-     * @param {*} layer 
-     */
-    assignLayer(layer) {
-        this.layer = layer;
-    }
+    ///**
+    // * @param {*} layer
+    // */
+    //assignLayer(layer) {
+    //    this.layer = layer;
+    //}
 
     /**
-     * 
+     *
      */
     abortLoading() {
         this.layer.abortMaterialLoading(this);
     }
 
+    _createTexture(img) {
+        return this.layer.createTexture(img, this.layer._internalFormat);
+    }
+
     /**
-     * 
-     * @param {*} img 
+     *
+     * @param {*} img
      */
     applyImage(img) {
         if (this.segment.initialized) {
             this._updateTexture = null;
             //this.image = img;
-            this.texture = this.segment.handler.createTexture(img);
+            this.texture = this._createTexture(img);
             this.appliedNodeId = this.segment.node.nodeId;
             this.isReady = true;
             this.pickingReady = true;
@@ -63,9 +66,9 @@ class Material {
     }
 
     /**
-     * 
-     * @param {*} texture 
-     * @param {*} pickingMask 
+     *
+     * @param {*} texture
+     * @param {*} pickingMask
      */
     applyTexture(texture, pickingMask) {
         if (this.segment.initialized) {
@@ -83,7 +86,7 @@ class Material {
     }
 
     /**
-     * 
+     *
      */
     textureNotExists() {
         if (this.segment.initialized) {
@@ -95,7 +98,7 @@ class Material {
     }
 
     /**
-     * 
+     *
      */
     clear() {
         this.loadingAttempts = 0;