@openglobus/og 0.11.6 → 0.12.1

package/src/og/control/EarthNavigation.js

@@ -6,6 +6,7 @@ import { Quat } from "../math/Quat.js";
 import { Ray } from "../math/Ray.js";
 import { Vec3 } from "../math/Vec3.js";
 import { Control } from "./Control.js";
+import { Mat4 } from "../math/Mat4.js";
 
 class Touch {
     constructor() {
@@ -29,6 +30,7 @@ class EarthNavigation extends Control {
         super(options);
 
         this.grabbedPoint = new Vec3();
+        this.grabbedDir = new Vec3();
         this.inertia = 0.007;
         this.grabbedSpheroid = new Sphere();
         this.planet = null;
@@ -39,11 +41,11 @@ class EarthNavigation extends Control {
         this.currState = 0;
 
         this.positionState = [
-            { h: 17119745.303455353, max: 0.99, min: -0.99 },
-            { h: 6866011, max: 0.99, min: -0.99 },
-            { h: 3000000, max: 0.99, min: -0.99 },
-            { h: 1000000, max: 0.99, min: -0.99 },
-            { h: 500000, max: 0.99, min: -0.99 }
+            { h: 17119745.303455353, max: 0.98, min: -0.98 },
+            { h: 6866011, max: 0.98, min: -0.98 },
+            { h: 3000000, max: 0.98, min: -0.98 },
+            { h: 1000000, max: 0.98, min: -0.98 },
+            { h: 500000, max: 0.98, min: -0.98 }
         ];
 
         this.touches = [new Touch(), new Touch()];
@@ -163,9 +165,10 @@ class EarthNavigation extends Control {
         }
     }
 
-    onMouseLeftButtonClick() {
+    onMouseLeftButtonClick(e) {
         this.renderer.handler.gl.canvas.classList.add("ogGrabbingPoiner");
         this.grabbedPoint = this.planet.getCartesianFromMouseTerrain(true);
+        this.grabbedDir.copy(e.direction);
         if (this.grabbedPoint) {
             this.grabbedSpheroid.radius = this.grabbedPoint.length();
             this.stopRotation();
@@ -195,24 +198,30 @@ class EarthNavigation extends Control {
             var targetPoint = new Ray(cam.eye, e.direction).hitSphere(this.grabbedSpheroid);
 
             if (targetPoint) {
-                this._a =
-                    Math.acos(this.grabbedPoint.y / this.grabbedSpheroid.radius) -
+
+                this._a = Math.acos(this.grabbedPoint.y / this.grabbedSpheroid.radius) -
                     Math.acos(targetPoint.y / this.grabbedSpheroid.radius);
 
-                this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+                let rot = this._vRot = Quat.axisAngleToQuat(cam._u, this._a);
+
+                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+                //cam.update();
+
                 this._hRot = Quat.getRotationBetweenVectors(
                     new Vec3(targetPoint.x, 0.0, targetPoint.z).normal(),
                     new Vec3(this.grabbedPoint.x, 0.0, this.grabbedPoint.z).normal()
                 );
-                var rot = this._hRot.mul(this._vRot);
 
-                var state = this.positionState[this.currState];
-                var lim = rot.mulVec3(cam.eye).normal().dot(Vec3.UP);
-                if (lim > state.max || lim < state.min) {
-                    rot = Quat.yRotation(rot.getYaw());
-                }
-                cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, Vec3.UP);
-                cam.update();
+                rot = this._hRot;
+
+                //var state = this.positionState[this.currState];
+                //var lim = cam.eye.normal().dot(Vec3.UP);
+
+                //if (lim > state.max || lim < state.min) {
+                //    rot = Quat.yRotation(rot.getYaw());
+                    cam.set(rot.mulVec3(cam.eye), Vec3.ZERO, rot.mulVec3(cam.getUp()));
+                    cam.update();
+                //}
             }
         } else {
             this.scaleRot = 0;

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();
     }
@@ -55,9 +57,9 @@ class MouseNavigation extends Control {
         var steps = [];
 
         var eye = cam.eye.clone(),
-            n = cam._n.clone(),
-            u = cam._u.clone(),
-            v = cam._v.clone();
+            n = cam._b.clone(),
+            u = cam._r.clone(),
+            v = cam._u.clone();
 
         var a = planet.getCartesianFromPixelTerrain(point, true);
 
@@ -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,8 @@ 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._eye0.copy(this.renderer.activeCamera.eye);
                 this.grabbedSpheroid.radius = this.grabbedPoint.length();
                 this.stopRotation();
@@ -274,7 +279,7 @@ class MouseNavigation extends Control {
         this.planet._normalMapCreator.free(this._keyLock);
     }
 
-    onMouseLeftButtonUp(e) {
+    onMouseLeftButtonUp(e) {
         this.renderer.handler.canvas.classList.remove("ogGrabbingPoiner");
         if (e.x === e.prev_x && e.y === e.prev_y) {
             this.scaleRot = 0.0;
@@ -302,9 +307,9 @@ class MouseNavigation extends Control {
                         );
                         var rot = this.qRot;
                         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._r = rot.mulVec3(cam._r);
+                        cam._b = rot.mulVec3(cam._b);
 
                         cam.checkTerrainCollision();
 
@@ -312,7 +317,7 @@ class MouseNavigation extends Control {
                     }
                 } else {
                     var p0 = this.grabbedPoint,
-                        p1 = Vec3.add(p0, cam._u),
+                        p1 = Vec3.add(p0, cam._r),
                         p2 = Vec3.add(p0, p0.normal());
 
                     var px = new Vec3();
@@ -331,20 +336,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,16 +384,18 @@ 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;
                 }
 
                 cam.eye = sf.eye;
-                cam._v = sf.v;
-                cam._u = sf.u;
-                cam._n = sf.n;
+                cam._u = sf.v;
+                cam._r = sf.u;
+                cam._b = sf.n;
 
                 cam.checkTerrainCollision();
 
@@ -425,9 +426,9 @@ class MouseNavigation extends Control {
                     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._r = rot.mulVec3(cam._r);
+                cam._b = rot.mulVec3(cam._b);
 
                 cam.checkTerrainCollision();