@openglobus/og 0.11.4 → 0.11.8

package/src/og/control/Lighting.js

@@ -10,6 +10,11 @@ import { parseHTML } from "../utils/shared.js";
 const TEMPLATE = `<div class="og-lighing">
 
        <div class="og-screen-options">
+
+         <div class="og-option">
+          <div class="og-caption">Lighting enabled<input type="checkbox" id="lighting" name="light"/></div>
+         </div>
+
          <div class="og-option">
             <div class="og-caption">Gamma</div>
             <div class="og-slider">
@@ -24,12 +29,7 @@ const TEMPLATE = `<div class="og-lighing">
             </div>
             <div class="og-value exposure"></div>
          </div>
-       </div>
-       
-       <div class="og-layers">
-         <div class="og-caption">Select layer:</div>
-         <select id="layers"></select>
-       </div>
+       </div>      
       
        <div class="og-color-options">
          <div class="og-caption">Ambient</div>
@@ -110,6 +110,21 @@ const TEMPLATE = `<div class="og-lighing">
             <div class="og-value shininess"></div>
          </div>
        </div>
+
+       <div class="og-layers">
+         <div class="og-caption">Select layer:</div>
+         <select id="layers"></select>
+       </div>
+
+        <div class="og-caption">Opacity</div>
+            <div class="og-option">
+            <div class="og-label">A</div>
+            <div class="og-slider">
+                <input type="range" id="opacity" name="opacity" value="0.0" min="0.0" max="2.0" step="0.01" />
+            </div>
+            <div class="og-value opacity"></div>
+        </div>
+
     </div>`;
 
 /**
@@ -128,33 +143,8 @@ class Lighting extends Control {
     bindLayer(layer) {
         this._selectedLayer = layer;
 
-        document.getElementById("ambient-r").value = layer.ambient.x;
-        document.getElementById("ambient-g").value = layer.ambient.y;
-        document.getElementById("ambient-b").value = layer.ambient.z;
-
-        document.getElementById("diffuse-r").value = layer.diffuse.x;
-        document.getElementById("diffuse-g").value = layer.diffuse.y;
-        document.getElementById("diffuse-b").value = layer.diffuse.z;
-
-        document.getElementById("specular-r").value = layer.specular.x;
-        document.getElementById("specular-g").value = layer.specular.y;
-        document.getElementById("specular-b").value = layer.specular.z;
-
-        document.getElementById("shininess").value = layer.shininess;
-
-        document.querySelector(".og-value.ambient-r").innerHTML = layer.ambient.x.toString();
-        document.querySelector(".og-value.ambient-g").innerHTML = layer.ambient.y.toString();
-        document.querySelector(".og-value.ambient-b").innerHTML = layer.ambient.z.toString();
-
-        document.querySelector(".og-value.diffuse-r").innerHTML = layer.diffuse.x.toString();
-        document.querySelector(".og-value.diffuse-g").innerHTML = layer.diffuse.y.toString();
-        document.querySelector(".og-value.diffuse-b").innerHTML = layer.diffuse.z.toString();
-
-        document.querySelector(".og-value.specular-r").innerHTML = layer.specular.x.toString();
-        document.querySelector(".og-value.specular-g").innerHTML = layer.specular.y.toString();
-        document.querySelector(".og-value.specular-b").innerHTML = layer.specular.z.toString();
-
-        document.querySelector(".og-value.shininess").innerHTML = layer.shininess.toString();
+        document.getElementById("opacity").value = layer.opacity;
+        document.querySelector(".og-value.opacity").innerHTML = layer.opacity.toString();
     }
 
     oninit() {
@@ -163,8 +153,15 @@ class Lighting extends Control {
 
         var _this = this;
 
+        document.getElementById("lighting").checked = this.planet.lightEnabled;
+
+        document.getElementById("lighting").addEventListener("change", (e) => {
+            _this.planet.lightEnabled = e.target.checked;
+        });
+
         document.getElementById("layers").addEventListener("change", (e) => {
-            this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            //this._selectedLayer = _this.planet.getLayerByName(e.target.value);
+            this.bindLayer(_this.planet.getLayerByName(e.target.value));
         });
 
         document.getElementById("gamma").addEventListener("input", function (e) {
@@ -183,73 +180,86 @@ class Lighting extends Control {
         document.getElementById("gamma").value = this.planet.renderer.gamma;
         document.getElementById("exposure").value = this.planet.renderer.exposure;
 
-        document.getElementById("ambient-r").addEventListener("input", function (e) {
+        document.getElementById("opacity").addEventListener("input", function (e) {
             if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.x = Number(this.value);
+                _this._selectedLayer.opacity = Number(this.value);
             }
+            document.querySelector(".og-value.opacity").innerHTML = this.value;
+        });
+
+        document.getElementById("ambient-r").addEventListener("input", function (e) {
+            _this.planet._ambient[0] = Number(this.value);
             document.querySelector(".og-value.ambient-r").innerHTML = this.value;
         });
         document.getElementById("ambient-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.y = Number(this.value);
-            }
+            _this.planet._ambient[1] = Number(this.value);
             document.querySelector(".og-value.ambient-g").innerHTML = this.value;
         });
         document.getElementById("ambient-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.ambient.z = Number(this.value);
-            }
+            _this.planet._ambient[2] = Number(this.value);
             document.querySelector(".og-value.ambient-b").innerHTML = this.value;
         });
 
         document.getElementById("diffuse-r").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.x = Number(this.value);
-            }
+            _this.planet._diffuse[0] = Number(this.value);
             document.querySelector(".og-value.diffuse-r").innerHTML = this.value;
         });
         document.getElementById("diffuse-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.y = Number(this.value);
-            }
+            _this.planet._diffuse[1] = Number(this.value);
             document.querySelector(".og-value.diffuse-g").innerHTML = this.value;
         });
         document.getElementById("diffuse-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.diffuse.z = Number(this.value);
-            }
+            _this.planet._diffuse[2] = Number(this.value);
             document.querySelector(".og-value.diffuse-b").innerHTML = this.value;
         });
 
         document.getElementById("specular-r").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.x = Number(this.value);
-            }
+            _this.planet._specular[0] = Number(this.value);
             document.querySelector(".og-value.specular-r").innerHTML = this.value;
         });
         document.getElementById("specular-g").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.y = Number(this.value);
-            }
+            _this.planet._specular[1] = Number(this.value);
             document.querySelector(".og-value.specular-g").innerHTML = this.value;
         });
         document.getElementById("specular-b").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.specular.z = Number(this.value);
-            }
+            _this.planet._specular[2] = Number(this.value);
             document.querySelector(".og-value.specular-b").innerHTML = this.value;
         });
 
         document.getElementById("shininess").addEventListener("input", function (e) {
-            if (_this._selectedLayer) {
-                _this._selectedLayer.shininess = Number(this.value);
-            }
+            _this.planet._specular[3] = Number(this.value);
             document.querySelector(".og-value.shininess").innerHTML = this.value;
         });
 
         if (this.planet) {
             this.planet.events.on("layeradd", this._onLayerAdd, this);
             this.planet.events.on("layerremove", this._onLayerRemove, this);
+
+            document.getElementById("ambient-r").value = this.planet._ambient[0];
+            document.getElementById("ambient-g").value = this.planet._ambient[1];
+            document.getElementById("ambient-b").value = this.planet._ambient[2];
+
+            document.getElementById("diffuse-r").value = this.planet._diffuse[0];
+            document.getElementById("diffuse-g").value = this.planet._diffuse[1];
+            document.getElementById("diffuse-b").value = this.planet._diffuse[2];
+
+            document.getElementById("specular-r").value = this.planet._specular[0];
+            document.getElementById("specular-g").value = this.planet._specular[1];
+            document.getElementById("specular-b").value = this.planet._specular[2];
+            document.getElementById("shininess").value = this.planet._specular[3];
+
+            document.querySelector(".og-value.ambient-r").innerHTML = this.planet._ambient[0].toString();
+            document.querySelector(".og-value.ambient-g").innerHTML = this.planet._ambient[1].toString();
+            document.querySelector(".og-value.ambient-b").innerHTML = this.planet._ambient[2].toString();
+
+            document.querySelector(".og-value.diffuse-r").innerHTML = this.planet._diffuse[0].toString();
+            document.querySelector(".og-value.diffuse-g").innerHTML = this.planet._diffuse[1].toString();
+            document.querySelector(".og-value.diffuse-b").innerHTML = this.planet._diffuse[2].toString();
+
+            document.querySelector(".og-value.specular-r").innerHTML = this.planet._specular[0].toString();
+            document.querySelector(".og-value.specular-g").innerHTML = this.planet._specular[1].toString();
+            document.querySelector(".og-value.specular-b").innerHTML = this.planet._specular[2].toString();
+            document.querySelector(".og-value.shininess").innerHTML = this.planet._specular[3].toString();
         }
 
         this._fetchLayers();
@@ -272,7 +282,7 @@ class Lighting extends Control {
         document.getElementById("layers").value = e.name;
     }
 
-    _onLayerRemove(e) {}
+    _onLayerRemove(e) { }
 }
 
 export function lighting(options) {

package/src/og/control/MouseNavigation.js

@@ -46,7 +46,9 @@ class MouseNavigation extends Control {
 
         this._lmbDoubleClickActive = true;
 
-        this.minSlope = options.minSlope || 0.1;
+        this.minSlope = options.minSlope || 0.1;
+
+        this._wheelDirection = +1;
 
         this._keyLock = new Key();
     }
@@ -73,7 +75,7 @@ class MouseNavigation extends Control {
             var d = a ? (delta * cam.eye.distance(a)) / stepsCount : 1000;
 
             if (forward) {
-                d = -d;
+                d = -1.25*d;
             } else {
                 d *= 2;
             }
@@ -224,7 +226,10 @@ class MouseNavigation extends Control {
             ms,
             event.wheelDelta > 0,
             ms.direction
-        );
+        );
+
+        this._wheelDirection = event.wheelDelta;
+
         if (this.stepsForward) {
             this.stepIndex = this.stepsCount;
         }
@@ -240,7 +245,7 @@ class MouseNavigation extends Control {
     onMouseLeftButtonDoubleClick() {
         this.planet.stopFlying();
         this.stopRotation();
-        var p = this.planet.getCartesianFromPixelTerrain(this.renderer.events.mouseState, true);
+        var p = this.planet.getCartesianFromPixelTerrain(this.renderer.events.mouseState);
         if (p) {
             var g = this.planet.ellipsoid.cartesianToLonLat(p);
             if (this.renderer.events.isKeyPressed(input.KEY_ALT)) {
@@ -258,8 +263,9 @@ class MouseNavigation extends Control {
     onMouseLeftButtonClick() {
         if (this._active) {
             this.renderer.handler.canvas.classList.add("ogGrabbingPoiner");
-            this.grabbedPoint = this.planet.getCartesianFromMouseTerrain(true);
-            if (this.grabbedPoint) {
+            this.grabbedPoint = this.planet.getCartesianFromMouseTerrain();
+            if (this.grabbedPoint) {
+                this.renderer.isActiveBackBuffers = false;
                 this._eye0.copy(this.renderer.activeCamera.eye);
                 this.grabbedSpheroid.radius = this.grabbedPoint.length();
                 this.stopRotation();
@@ -274,7 +280,8 @@ class MouseNavigation extends Control {
         this.planet._normalMapCreator.free(this._keyLock);
     }
 
-    onMouseLeftButtonUp(e) {
+    onMouseLeftButtonUp(e) {
+        this.renderer.isActiveBackBuffers = true;
         this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
         if (e.x === e.prev_x && e.y === e.prev_y) {
             this.scaleRot = 0.0;
@@ -331,20 +338,14 @@ class MouseNavigation extends Control {
     onMouseRightButtonClick(e) {
         this.stopRotation();
         this.planet.stopFlying();
-        this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(
-            {
-                x: e.x,
-                y: e.y
-            },
-            true
-        );
+        this.pointOnEarth = this.planet.getCartesianFromPixelTerrain(e);
         if (this.pointOnEarth) {
             this.earthUp = this.pointOnEarth.normal();
         }
     }
 
     onMouseRightButtonDown(e) {
-        var cam = this.renderer.activeCamera;
+        var cam = this.renderer.activeCamera;
 
         if (this.pointOnEarth && this.renderer.events.mouseState.moving) {
             this.renderer.controlsBag.scaleRot = 1.0;
@@ -385,9 +386,11 @@ class MouseNavigation extends Control {
                 r.controlsBag.scaleRot = 1.0;
                 var sf = this.stepsForward[this.stepsCount - this.stepIndex--];
 
-                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._a;
-
-                if (sf.eye.length() > maxAlt) {
+                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._b;
+                let minAlt = cam.minAltitude + this.planet.ellipsoid._b;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt && this._wheelDirection > 0) {
+                    this._wheelDirection = +1;
                     return;
                 }
 

package/src/og/control/MouseWheelZoomControl.js

@@ -0,0 +1,257 @@
+/**
+ * @module og/control/MouseWheelZoomControl
+ */
+
+"use strict";
+
+import { Control } from "./Control.js";
+import { Key } from "../Lock.js";
+import { Quat } from "../math/Quat.js";
+import { Sphere } from "../bv/Sphere.js";
+import { Vec3 } from "../math/Vec3.js";
+import { MouseNavigation } from "./MouseNavigation.js";
+
+/**
+ * Planet zoom buttons control.
+ * @class
+ * @extends {Control}
+ * @params {Object} [options] - Control options.
+ */
+class MouseWheelZoomControl extends Control {
+    constructor(options) {
+        super(options);
+
+        this._name = "MouseWheelZoomControl";
+
+        options = options || {};
+
+        this.grabbedPoint = new Vec3();
+        this._eye0 = new Vec3();
+        this.pointOnEarth = new Vec3();
+        this.earthUp = new Vec3();
+        this.inertia = 0.007;
+        this.grabbedSpheroid = new Sphere();
+        this.planet = null;
+        this.qRot = new Quat();
+        this.scaleRot = 0.0;
+
+        this.distDiff = 0.3;
+        this.stepsCount = 8;
+        this.stepsForward = null;
+        this.stepIndex = 0;
+
+        this._lmbDoubleClickActive = true;
+
+        this.minSlope = options.minSlope || 0.1;
+
+        this._keyLock = new Key();
+    }
+
+    oninit() {
+        var zoomDiv = document.createElement("div"),
+            btnZoomIn = document.createElement("button"),
+            btnZoomOut = document.createElement("button");
+
+        zoomDiv.className = "ogZoomControl";
+        btnZoomIn.className = "ogZoomButton ogZoomIn";
+        btnZoomOut.className = "ogZoomButton ogZoomOut";
+
+        zoomDiv.appendChild(btnZoomIn);
+        zoomDiv.appendChild(btnZoomOut);
+
+        this.renderer.div.appendChild(zoomDiv);
+
+        btnZoomIn.addEventListener("mousedown", (e) => this.zoomIn());
+        btnZoomIn.addEventListener("mouseup", (e) => this.stopZoom());
+
+        btnZoomOut.addEventListener("mousedown", (e) => this.zoomOut());
+        btnZoomOut.addEventListener("mouseup", (e) => this.stopZoom());
+
+        btnZoomIn.addEventListener("touchstart", (e) => {
+            e.preventDefault();
+            this.zoomIn();
+        });
+        btnZoomIn.addEventListener("touchend", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomIn.addEventListener("touchcancel", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        btnZoomOut.addEventListener("touchstart", (e) => {
+            e.preventDefault();
+            this.zoomOut();
+        });
+        btnZoomOut.addEventListener("touchend", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+        btnZoomOut.addEventListener("touchcancel", (e) => {
+            e.preventDefault();
+            this.stopZoom();
+        });
+
+        this.renderer.events.on("draw", this._draw, this);
+    }
+
+    /**
+     * Planet zoom in.
+     * @public
+     */
+    zoomIn() {
+        if (this.stepIndex) {
+            return;
+        }
+
+        this.planet.stopFlying();
+
+        this.stopRotation();
+
+        this._deactivate = true;
+
+        this.planet.layerLock.lock(this._keyLock);
+        this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+
+        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(
+            this.renderer.activeCamera,
+            this.planet,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer.getCenter(),
+            true,
+           null
+        );
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    /**
+     * Planet zoom out.
+     * @public
+     */
+    zoomOut() {
+        if (this.stepIndex) {
+            return;
+        }
+
+        this.planet.stopFlying();
+
+        this.stopRotation();
+
+        this._deactivate = true;
+
+        this.planet.layerLock.lock(this._keyLock);
+        this.planet.terrainLock.lock(this._keyLock);
+        this.planet._normalMapCreator.lock(this._keyLock);
+        
+        this.stepsForward = MouseNavigation.getMovePointsFromPixelTerrain(
+            this.renderer.activeCamera,
+            this.planet,
+            this.stepsCount,
+            this.distDiff,
+            this.renderer.getCenter(),
+            false,
+           null
+        );
+        if (this.stepsForward) {
+            this.stepIndex = this.stepsCount;
+        }
+    }
+
+    stopRotation() {
+        this.qRot.clear();
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
+
+    stopZoom() {
+        this._move = 0;
+
+        this.planet.layerLock.free(this._keyLock);
+        this.planet.terrainLock.free(this._keyLock);
+        this.planet._normalMapCreator.free(this._keyLock);
+    }
+
+    _draw(e) {
+        if (this._active) {
+            var r = this.renderer;
+            var cam = r.activeCamera;
+            var prevEye = cam.eye.clone();
+
+            if (this.stepIndex) {
+                r.controlsBag.scaleRot = 1.0;
+                var sf = this.stepsForward[this.stepsCount - this.stepIndex--];
+
+                let maxAlt = cam.maxAltitude + this.planet.ellipsoid._a;
+                let minAlt = cam.minAltitude + this.planet.ellipsoid._a;
+                const camAlt = sf.eye.length();
+                if (camAlt > maxAlt || camAlt < minAlt) {
+                    return;
+                }
+
+                cam.eye = sf.eye;
+                cam._v = sf.v;
+                cam._u = sf.u;
+                cam._n = sf.n;
+
+                cam.checkTerrainCollision();
+
+                cam.update();
+            } else {
+                if (this._deactivate) {
+                    this._deactivate = false;
+
+                    this.planet.layerLock.free(this._keyLock);
+                    this.planet.terrainLock.free(this._keyLock);
+                    this.planet._normalMapCreator.free(this._keyLock);
+                }
+            }
+
+            if (r.events.mouseState.leftButtonDown || !this.scaleRot) {
+                return;
+            }
+
+            this.scaleRot -= this.inertia;
+            if (this.scaleRot <= 0.0) {
+                this.scaleRot = 0.0;
+            } else {
+                r.controlsBag.scaleRot = this.scaleRot;
+                var rot = this.qRot
+                    .slerp(Quat.IDENTITY, 1.0 - this.scaleRot * this.scaleRot * this.scaleRot)
+                    .normalize();
+                if (!(rot.x || rot.y || rot.z)) {
+                    this.scaleRot = 0.0;
+                }
+                cam.eye = rot.mulVec3(cam.eye);
+                cam._v = rot.mulVec3(cam._v);
+                cam._u = rot.mulVec3(cam._u);
+                cam._n = rot.mulVec3(cam._n);
+
+                cam.checkTerrainCollision();
+
+                cam.update();
+            }
+
+            if (cam.eye.distance(prevEye) / cam._terrainAltitude > 0.01) {
+                this.planet.layerLock.lock(this._keyLock);
+                this.planet.terrainLock.lock(this._keyLock);
+                this.planet._normalMapCreator.lock(this._keyLock);
+            } else {
+                this.planet.layerLock.free(this._keyLock);
+                this.planet.terrainLock.free(this._keyLock);
+                this.planet._normalMapCreator.free(this._keyLock);
+            }
+        }
+    }
+}
+
+export function mouseWheelZoomControl(options) {
+    return new MouseWheelZoomControl(options);
+}
+
+export { MouseWheelZoomControl };

package/src/og/control/SegmentBoundVisualization.js

@@ -1,8 +1,8 @@
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
-import { EntityCollection } from '../entity/EntityCollection.js';
-import { Entity } from '../entity/Entity.js';
+import { Control } from "./Control.js";
+import { EntityCollection } from "../entity/EntityCollection.js";
+import { Entity } from "../entity/Entity.js";
 
 /**
  * Frame per second(FPS) display control.
@@ -18,7 +18,6 @@ class SegmentBoundVisualization extends Control {
     }
 
     oninit() {
-
         this.planet.addEntityCollection(this._boundingSphereCollection);
 
         this.renderer.events.on("draw", this._predraw, this);
@@ -28,7 +27,7 @@ class SegmentBoundVisualization extends Control {
     _predraw() {
         this._boundingSphereCollection.clear();
     }
-    
+
     _draw() {
         for (let i = 0; i < this.planet._renderedNodes.length; i++) {
             let si = this.planet._renderedNodes[i].segment;

package/src/og/control/ShowFps.js

@@ -2,10 +2,10 @@
  * @module og/control/ShowFps
  */
 
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
-import { print2d } from '../utils/shared.js';
+import { Control } from "./Control.js";
+import { print2d } from "../utils/shared.js";
 
 /**
  * Frame per second(FPS) display control.
@@ -19,15 +19,20 @@ class ShowFps extends Control {
     }
 
     oninit() {
-        var d = document.createElement('div');
-        d.className = 'defaultText ';
+        var d = document.createElement("div");
+        d.className = "defaultText ";
         d.id = "ogShowFpsControl";
         document.body.appendChild(d);
         this.renderer.events.on("draw", this._draw, this);
     }
-    
+
     _draw() {
-        print2d("ogShowFpsControl", (1000.0 / this.renderer.handler.deltaTime).toFixed(1), this.renderer.handler.canvas.clientWidth - 60, 0);
+        print2d(
+            "ogShowFpsControl",
+            (1000.0 / this.renderer.handler.deltaTime).toFixed(1),
+            this.renderer.handler.canvas.clientWidth - 60,
+            0
+        );
     }
 }
 

package/src/og/control/SimpleNavigation.js

@@ -1,7 +1,7 @@
-'use strict';
+"use strict";
 
-import { Control } from './Control.js';
-import { input } from '../input/input.js';
+import { Control } from "./Control.js";
+import { input } from "../input/input.js";
 
 /**
  * Simple keyboard camera navigation with W,S,A,D and shift keys to fly around the scene.
@@ -18,11 +18,9 @@ class SimpleNavigation extends Control {
         this.speed = options.speed || 1.0;
     }
 
-    onactivate() {
-    }
+    onactivate() {}
 
-    ondeactivate() {
-    }
+    ondeactivate() {}
 
     oninit() {
         this.camera = this.renderer.activeCamera;