@openglobus/og 0.14.10 → 0.15.0

package/src/og/entity/Polyline.js

@@ -1995,14 +1995,6 @@ class Polyline {
 
             sh.activate();
 
-            gl.enable(gl.BLEND);
-            gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-            gl.blendFuncSeparate(
-                gl.SRC_ALPHA,
-                gl.ONE_MINUS_SRC_ALPHA,
-                gl.ONE,
-                gl.ONE_MINUS_SRC_ALPHA
-            );
             gl.disable(gl.CULL_FACE);
 
             gl.uniform1f(shu.depthOffset, ec.polygonOffsetUnits + window.POLYLINE_DEPTH_OFFSET);
@@ -2058,14 +2050,6 @@ class Polyline {
 
             sh.activate();
 
-            gl.enable(gl.BLEND);
-            gl.blendEquationSeparate(gl.FUNC_ADD, gl.FUNC_ADD);
-            gl.blendFuncSeparate(
-                gl.SRC_ALPHA,
-                gl.ONE_MINUS_SRC_ALPHA,
-                gl.ONE,
-                gl.ONE_MINUS_SRC_ALPHA
-            );
             gl.disable(gl.CULL_FACE);
 
             gl.uniform1f(shu.depthOffset, this._handler._entityCollection.polygonOffsetUnits + window.POLYLINE_DEPTH_OFFSET);

package/src/og/entity/Ray.js

@@ -34,11 +34,6 @@ class Ray {
         // Thickenss
         this._thickness = options.thickness || 2.0;
 
-        // RTE length
-        this._length = options.length || 0.0;
-        this._lengthHighLow = new Float32Array(2);
-        doubleToTwoFloats2(this._length, this._lengthHighLow);
-
         // RTE start position
         this._startPosition = utils.createVector3(options.startPosition);
         this._startPositionHigh = new Vec3();
@@ -172,11 +167,6 @@ class Ray {
             );
     }
 
-    setLength(length) {
-        this._length = length;
-        this._handler && this._handler.setLengthArr(this._handlerIndex, length);
-    }
-
     setThickness(thickness) {
         this._thickness = thickness;
         this._handler && this._handler.setThicknessArr(this._handlerIndex, thickness);

package/src/og/entity/RayHandler.js

@@ -6,10 +6,9 @@ import { concatArrays, makeArrayTyped, spliceArray } from "../utils/shared.js";
 const PICKINGCOLOR_BUFFER = 0;
 const START_POSITION_BUFFER = 1;
 const END_POSITION_BUFFER = 2;
-const LENGTH_BUFFER = 3;
-const RGBA_BUFFER = 4;
-const THICKNESS_BUFFER = 5;
-const VERTEX_BUFFER = 6;
+const RGBA_BUFFER = 3;
+const THICKNESS_BUFFER = 4;
+const VERTEX_BUFFER = 5;
 
 /*
  * og.RayHandler
@@ -36,7 +35,6 @@ class RayHandler {
         this._startPositionLowBuffer = null;
         this._endPositionHighBuffer = null;
         this._endPositionLowBuffer = null;
-        this._lengthBuffer = null;
         this._thicknessBuffer = null;
         this._rgbaBuffer = null;
 
@@ -45,7 +43,6 @@ class RayHandler {
         this._startPositionLowArr = [];
         this._endPositionHighArr = [];
         this._endPositionLowArr = [];
-        this._lengthArr = [];
         this._thicknessArr = [];
         this._rgbaArr = [];
 
@@ -56,7 +53,6 @@ class RayHandler {
         this._buffersUpdateCallbacks[VERTEX_BUFFER] = this.createVertexBuffer;
         this._buffersUpdateCallbacks[START_POSITION_BUFFER] = this.createStartPositionBuffer;
         this._buffersUpdateCallbacks[END_POSITION_BUFFER] = this.createEndPositionBuffer;
-        this._buffersUpdateCallbacks[LENGTH_BUFFER] = this.createLengthBuffer;
         this._buffersUpdateCallbacks[THICKNESS_BUFFER] = this.createThicknessBuffer;
         this._buffersUpdateCallbacks[RGBA_BUFFER] = this.createRgbaBuffer;
         this._buffersUpdateCallbacks[PICKINGCOLOR_BUFFER] = this.createPickingColorBuffer;
@@ -124,7 +120,6 @@ class RayHandler {
         this._startPositionLowArr = null;
         this._endPositionHighArr = null;
         this._endPositionLowArr = null;
-        this._lengthArr = null;
         this._thicknessArr = null;
         this._rgbaArr = null;
 
@@ -133,7 +128,6 @@ class RayHandler {
         this._startPositionLowArr = new Float32Array();
         this._endPositionHighArr = new Float32Array();
         this._endPositionLowArr = new Float32Array();
-        this._lengthArr = new Float32Array();
         this._thicknessArr = new Float32Array();
         this._rgbaArr = new Float32Array();
 
@@ -150,7 +144,6 @@ class RayHandler {
             gl.deleteBuffer(this._startPositionLowBuffer);
             gl.deleteBuffer(this._endPositionHighBuffer);
             gl.deleteBuffer(this._endPositionLowBuffer);
-            gl.deleteBuffer(this._lengthBuffer);
             gl.deleteBuffer(this._thicknessBuffer);
             gl.deleteBuffer(this._rgbaBuffer);
             gl.deleteBuffer(this._vertexBuffer);
@@ -159,7 +152,6 @@ class RayHandler {
             this._startPositionLowBuffer = null;
             this._endPositionHighBuffer = null;
             this._endPositionLowBuffer = null;
-            this._lengthBuffer = null;
             this._thicknessBuffer = null;
             this._rgbaBuffer = null;
             this._vertexBuffer = null;
@@ -300,9 +292,6 @@ class RayHandler {
         x = ray._thickness;
         this._thicknessArr = concatArrays(this._thicknessArr, [x, x, x, x, x, x]);
 
-        x = ray._length;
-        this._lengthArr = concatArrays(this._lengthArr, [x, x, x, x, x, x]);
-
         let r0 = ray._startColor.x,
             g0 = ray._startColor.y,
             b0 = ray._startColor.z,
@@ -439,9 +428,6 @@ class RayHandler {
             0
         );
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._lengthBuffer);
-        gl.vertexAttribPointer(sha.a_length, this._lengthBuffer.itemSize, gl.FLOAT, false, 0, 0);
-
         gl.bindBuffer(gl.ARRAY_BUFFER, this._vertexBuffer);
         gl.vertexAttribPointer(sha.a_vertices, this._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
@@ -492,7 +478,6 @@ class RayHandler {
 
         i = ri * 6;
         this._thicknessArr = spliceArray(this._thicknessArr, i, 6);
-        this._lengthArr = spliceArray(this._lengthArr, i, 6);
 
         this.reindexRaysArray(ri);
         this.refresh();
@@ -732,20 +717,6 @@ class RayHandler {
         this._changedBuffers[THICKNESS_BUFFER] = true;
     }
 
-    setLengthArr(index, length) {
-        var i = index * 6;
-        var a = this._lengthArr;
-
-        a[i] = length;
-        a[i + 1] = length;
-        a[i + 2] = length;
-        a[i + 3] = length;
-        a[i + 4] = length;
-        a[i + 5] = length;
-
-        this._changedBuffers[LENGTH_BUFFER] = true;
-    }
-
     setVisibility(index, visibility) {
         var vArr;
         if (visibility) {
@@ -839,18 +810,6 @@ class RayHandler {
         );
     }
 
-    createLengthBuffer() {
-        var h = this._renderer.handler;
-        h.gl.deleteBuffer(this._lengthBuffer);
-        this._lengthArr = makeArrayTyped(this._lengthArr);
-        this._lengthBuffer = h.createArrayBuffer(
-            this._lengthArr,
-            1,
-            this._lengthArr.length,
-            h.gl.DYNAMIC_DRAW
-        );
-    }
-
     createVertexBuffer() {
         var h = this._renderer.handler;
         h.gl.deleteBuffer(this._vertexBuffer);

package/src/og/entity/Strip.js

@@ -203,9 +203,6 @@ class Strip {
                 shu = p.uniforms;
 
             gl.disable(gl.CULL_FACE);
-            gl.blendEquation(gl.FUNC_ADD);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            gl.enable(gl.BLEND);
             sh.activate();
 
             gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera.getViewMatrix());
@@ -257,9 +254,7 @@ class Strip {
                 shu = p.uniforms;
 
             gl.disable(gl.CULL_FACE);
-            gl.blendEquation(gl.FUNC_ADD);
-            gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-            gl.enable(gl.BLEND);
+
             sh.activate();
 
             gl.uniformMatrix4fv(shu.viewMatrix, false, r.activeCamera.getViewMatrix());

package/src/og/index.js

@@ -37,16 +37,18 @@ import { RenderNode } from './scene/RenderNode.js';
 
 import { Popup } from './Popup.js';
 
-import { QuadTreeStrategy } from './quadTree/QuadTreeStrategy.js';
-import { MarsQuadTreeStrategy } from './quadTree/MarsQuadTreeStrategy.js';
-import { EarthQuadTreeStrategy } from './quadTree/EarthQuadTreeStrategy.js';
-import { Wgs84QuadTreeStrategy } from './quadTree/Wgs84QuadTreeStrategy.js';
-import { quadTreeStrategyType } from './utils/quadTreeType.js';
+import {
+    EarthQuadTreeStrategy,
+    MarsQuadTreeStrategy,
+    QuadTreeStrategy,
+    quadTreeStrategyType,
+    Wgs84QuadTreeStrategy
+} from './quadTree/index.js';
 
 import pkg from "../../package.json";
 
 const { Handler } = webgl, { Control } = control;
-const { Layer } = layer;
+const { Layer, Vector, XYZ} = layer;
 const {
     EntityCollection,
     Entity
@@ -65,6 +67,8 @@ export {
     utils,
     input,
     Layer,
+    XYZ,
+    Vector,
     layer,
     terrain,
     Control,

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

@@ -11,6 +11,7 @@ import { Extent } from "../Extent.js";
 import { LonLat } from "../LonLat.js";
 import { Material } from "./Material.js";
 import { Vec3 } from "../math/Vec3.js";
+import { createColorRGB } from "../utils/shared.js";
 
 const FADING_RATIO = 15.8;
 
@@ -208,6 +209,65 @@ class Layer {
          * @type {Events}
          */
         this.events = new Events(options.events ? [...EVENT_NAMES, ...options.events] : EVENT_NAMES, this);
+
+        this._ambient = null;
+        this._diffuse = null;
+        this._specular = null;
+
+        if (options.ambient) {
+            let a = utils.createColorRGB(options.ambient, new Vec3(0.2, 0.2, 0.2));
+            this._ambient = new Float32Array([a.x, a.y, a.z]);
+        }
+
+        if (options.diffuse) {
+            let d = utils.createColorRGB(options.diffuse, new Vec3(0.8, 0.8, 0.8));
+            this._diffuse = new Float32Array([d.x, d.y, d.z]);
+        }
+
+        if (options.specular) {
+            let s = utils.createColorRGB(options.specular, new Vec3(0.0003, 0.0003, 0.0003));
+            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) {
+        if (rgb) {
+            let vec = createColorRGB(rgb);
+            this._diffuse = new Float32Array(vec.toArray());
+        } else {
+            this._diffuse = null;
+        }
+    }
+
+    set ambient(rgb) {
+        if (rgb) {
+            let vec = createColorRGB(rgb);
+            this._ambient = new Float32Array(vec.toArray());
+        } else {
+            this._ambient = null;
+        }
+    }
+
+    set specular(rgb) {
+        if (rgb) {
+            let vec = createColorRGB(rgb);
+            this._specular = new Float32Array([vec.x, vec.y, vec.y, this._specular[3]]);
+        } else {
+            this._specular = null;
+        }
+    }
+
+    set shininess(v) {
+        if (this._specular) {
+            this._specular[3] = v;
+        }
+    }
+
+    get normalMapCreator() {
+        return this._normalMapCreator;
     }
 
     static getTMS(x, y, z) {
@@ -655,24 +715,24 @@ class Layer {
     redraw() {
         if (this._planet) {
             this._planet._quadTree.traverseTree((n) => {
-                if (n.segment.materials[this._id]) {
-                    n.segment.materials[this._id].clear();
+                    if (n.segment.materials[this._id]) {
+                        n.segment.materials[this._id].clear();
+                    }
                 }
-            }
             );
 
             this._planet._quadTreeNorth.traverseTree((n) => {
-                if (n.segment.materials[this._id]) {
-                    n.segment.materials[this._id].clear();
+                    if (n.segment.materials[this._id]) {
+                        n.segment.materials[this._id].clear();
+                    }
                 }
-            }
             );
 
             this._planet._quadTreeSouth.traverseTree((n) => {
-                if (n.segment.materials[this._id]) {
-                    n.segment.materials[this._id].clear();
+                    if (n.segment.materials[this._id]) {
+                        n.segment.materials[this._id].clear();
+                    }
                 }
-            }
             );
         }
     }

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/layer/WMS.js

@@ -27,6 +27,7 @@ import { XYZ } from "./XYZ.js";
  * @param {number} [options.height=256] - Tile height.
  * @param {string} options.layers - WMS layers string.
  * @param {string} [options.version="1.1.1"] - WMS version.
+ * @param {Object} extra  - Extra parameters (by WMS rreference or by WMS service vendors) to pass to WMS service.
  * @example:
  * new og.layer.WMS("USA States", {
  *     isBaseLayer: false,
@@ -36,16 +37,23 @@ import { XYZ } from "./XYZ.js";
  *     zIndex: 50,
  *     attribution: 'USA states - geoserver WMS example',
  *     version: "1.1.1",
- *     visibility: false }
+ *     visibility: false }, {
+ *     transparent: true,
+ *     sld: "style.sld"}	   
  * );
  *
  * @fires og.layer.XYZ#load
  * @fires og.layer.XYZ#loadend
  */
 class WMS extends XYZ {
-    constructor(name, options) {
+
+
+    constructor(name, options, extra) {
         super(name, options);
 
+        this._extra = new URLSearchParams(extra).toString();
+
+
         if (!options.extent) {
             this.setExtent(new Extent(new LonLat(-180.0, -90), new LonLat(180.0, 90)));
         }
@@ -85,10 +93,12 @@ class WMS extends XYZ {
         srs,
         bbox,
         width = 256,
-        height = 256
+        height = 256,
+        extra
+
     ) {
         return `${url}/wms?LAYERS=${layers}&FORMAT=${format}&SERVICE=WMS&VERSION=${version}&REQUEST=${request}
-        &SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}`;
+        &SRS=${srs}&BBOX=${bbox}&WIDTH=${width}&HEIGHT=${height}&` + extra;
     }
 
     static get_bbox_v1_1_1(extent) {
@@ -133,7 +143,8 @@ class WMS extends XYZ {
             segment._projection.code,
             this._getBbox(segment.getExtent()),
             this.imageWidth,
-            this.imageHeight
+            this.imageHeight,
+            this._extra
         );
     }
 

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;