@openglobus/og 0.19.3 → 0.20.0

package/lib/js/Extent.js

@@ -74,8 +74,8 @@ export class Extent {
      * @returns {Extent} -
      */
     static fromTile(x, y, z, width = mercator.POLE_DOUBLE, height = mercator.POLE_DOUBLE) {
-        const H = Math.pow(2, z);
-        const W = Math.pow(2, z);
+        const H = 1 << z; //Math.pow(2, z);
+        const W = H; //Math.pow(2, z);
         const lnSize = width / W;
         const ltSize = height / H;
         const left = -width * 0.5 + x * lnSize, top = height * 0.5 - y * ltSize, bottom = top - ltSize, right = left + lnSize;

package/lib/js/Globe.d.ts

@@ -9,7 +9,7 @@ import { Sun } from "./control/Sun";
 import { HTMLDivElementExt, Renderer } from "./renderer/Renderer";
 import { RenderNode } from "./scene/RenderNode";
 import { Extent } from "./Extent";
-interface IGlobeParams {
+export interface IGlobeParams {
     attributionContainer?: HTMLElement;
     target?: string | HTMLElement;
     skybox?: RenderNode;

package/lib/js/Object3d.d.ts

@@ -1,5 +1,5 @@
 import { TypedArray } from './utils/shared';
-import { NumberArray3 } from './math/Vec3';
+import { NumberArray3, Vec3 } from './math/Vec3';
 interface IObject3dParams {
     name?: string;
     vertices?: number[];
@@ -41,6 +41,21 @@ declare class Object3d {
     static getNormals(vertices: number[]): number[];
     static createSphere(lonBands?: number, latBands?: number, radius?: number, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
     static createDisc(radius?: number, height?: number, radialSegments?: number, isTop?: boolean, startIndex?: number, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param verticalAngle
+     */
+    static getFrustumScaleByCameraAngles(length: number, horizontalAngle: number, verticalAngle: number): Vec3;
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param aspectRatio
+     */
+    static getFrustumScaleByCameraAspectRatio(length: number, horizontalAngle: number, aspectRatio: number): Vec3;
+    static createFrustum(length?: number, width?: number, height?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;
     static createCylinder(radiusTop?: number, radiusBottom?: number, height?: number, radialSegments?: number, heightSegments?: number, isTop?: boolean, isBottom?: boolean, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
     static createCube(length?: number, height?: number, depth?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;
     static createArrow(back?: number, height?: number, front?: number): Object3d;

package/lib/js/Object3d.js

@@ -1,6 +1,6 @@
 import { htmlColorToFloat32Array } from './utils/shared';
 import { Vec3 } from './math/Vec3';
-import { MAX, MIN } from './math';
+import { DEGREES_DOUBLE, MAX, MIN, RADIANS_HALF } from './math';
 import { transformLeftToRightCoordinateSystem, objParser } from "./utils/objParser";
 function getColor(color) {
     if (color instanceof Array) {
@@ -219,6 +219,71 @@ class Object3d {
             'vertices': vertices, 'normals': normals, 'indices': indices
         });
     }
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param verticalAngle
+     */
+    static getFrustumScaleByCameraAngles(length, horizontalAngle, verticalAngle) {
+        return new Vec3(2.0 * length * Math.tan(RADIANS_HALF * horizontalAngle), 2.0 * length * Math.tan(RADIANS_HALF * verticalAngle), length);
+    }
+    /**
+     * Returns scale parameters for a frustum geoObject created with only Object3d.createFrustum();
+     * @param length
+     * @param horizontalAngle
+     * @param aspectRatio
+     */
+    static getFrustumScaleByCameraAspectRatio(length, horizontalAngle, aspectRatio) {
+        let vAngle = DEGREES_DOUBLE * Math.atan(Math.tan(RADIANS_HALF * horizontalAngle) / aspectRatio);
+        return Object3d.getFrustumScaleByCameraAngles(length, horizontalAngle, vAngle);
+    }
+    static createFrustum(length = 1, width = 1, height = 1, xOffset = 0, yOffset = 0, zOffset = 0) {
+        width *= 0.5;
+        height *= 0.5;
+        return new Object3d({
+            vertices: [
+                //
+                //inside
+                //
+                //top
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                -1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                //bottop
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                -1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                //right
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                //left
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                -1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                -1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                //
+                // outside
+                //
+                //top
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                -1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                //bottop
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                -1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                //right
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset,
+                1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                //left
+                0 + xOffset, 0 + yOffset, 0 + zOffset,
+                -1 * width + xOffset, 1 * height + yOffset, -1 * length + zOffset,
+                -1 * width + xOffset, -1 * height + yOffset, -1 * length + zOffset
+            ]
+        });
+    }
     static createCylinder(radiusTop = 1.0, radiusBottom = 1.0, height = 1.0, radialSegments = 32, heightSegments = 1.0, isTop = true, isBottom = true, offsetX = 0, offsetY = 0, offsetZ = 0) {
         let vertices = [], indices = [], normals = [];
         let thetaStart = 0.0, thetaLength = Math.PI * 2;

package/lib/js/astro/jd.js

@@ -385,32 +385,32 @@ function __ls(jd, leapSeconds) {
     };
 }
 const leapSecondsTable = [
-    __ls(2441317.5, 10.0),
-    __ls(2441499.5, 11.0),
-    __ls(2441683.5, 12.0),
-    __ls(2442048.5, 13.0),
-    __ls(2442413.5, 14.0),
-    __ls(2442778.5, 15.0),
-    __ls(2443144.5, 16.0),
-    __ls(2443509.5, 17.0),
-    __ls(2443874.5, 18.0),
-    __ls(2444239.5, 19.0),
-    __ls(2444786.5, 20.0),
-    __ls(2445151.5, 21.0),
-    __ls(2445516.5, 22.0),
-    __ls(2446247.5, 23.0),
-    __ls(2447161.5, 24.0),
-    __ls(2447892.5, 25.0),
-    __ls(2448257.5, 26.0),
-    __ls(2448804.5, 27.0),
-    __ls(2449169.5, 28.0),
-    __ls(2449534.5, 29.0),
-    __ls(2450083.5, 30.0),
-    __ls(2450630.5, 31.0),
-    __ls(2451179.5, 32.0),
-    __ls(2453736.5, 33.0),
-    __ls(2454832.5, 34.0),
-    __ls(2456109.5, 35.0),
+    __ls(2441317.5, 10.0), // 1972-01-01T00:00:00.000Z
+    __ls(2441499.5, 11.0), // 1972-07-01T00:00:00.000Z
+    __ls(2441683.5, 12.0), // 1973-01-01T00:00:00.000Z
+    __ls(2442048.5, 13.0), // 1974-01-01T00:00:00.000Z
+    __ls(2442413.5, 14.0), // 1975-01-01T00:00:00.000Z
+    __ls(2442778.5, 15.0), // 1976-01-01T00:00:00.000Z
+    __ls(2443144.5, 16.0), // 1977-01-01T00:00:00.000Z
+    __ls(2443509.5, 17.0), // 1978-01-01T00:00:00.000Z
+    __ls(2443874.5, 18.0), // 1979-01-01T00:00:00.000Z
+    __ls(2444239.5, 19.0), // 1980-01-01T00:00:00.000Z
+    __ls(2444786.5, 20.0), // 1981-07-01T00:00:00.000Z
+    __ls(2445151.5, 21.0), // 1982-07-01T00:00:00.000Z
+    __ls(2445516.5, 22.0), // 1983-01-01T00:00:00.000Z
+    __ls(2446247.5, 23.0), // 1985-07-01T00:00:00.000Z
+    __ls(2447161.5, 24.0), // 1988-01-01T00:00:00.000Z
+    __ls(2447892.5, 25.0), // 1990-01-01T00:00:00.000Z
+    __ls(2448257.5, 26.0), // 1991-01-01T00:00:00.000Z
+    __ls(2448804.5, 27.0), // 1992-07-01T00:00:00.000Z
+    __ls(2449169.5, 28.0), // 1993-07-01T00:00:00.000Z
+    __ls(2449534.5, 29.0), // 1994-07-01T00:00:00.000Z
+    __ls(2450083.5, 30.0), // 1996-01-01T00:00:00.000Z
+    __ls(2450630.5, 31.0), // 1997-07-01T00:00:00.000Z
+    __ls(2451179.5, 32.0), // 1999-01-01T00:00:00.000Z
+    __ls(2453736.5, 33.0), // 2006-01-01T00:00:00.000Z
+    __ls(2454832.5, 34.0), // 2009-01-01T00:00:00.000Z
+    __ls(2456109.5, 35.0), // 2012-07-01T00:00:00.000Z
     __ls(2457204.5, 36.0) // 2015-07-01T00:00:00.000Z
 ];
 export const J2000TAI = UTCtoTAI(J2000);

package/lib/js/camera/Frustum.d.ts

@@ -87,7 +87,7 @@ declare class Frustum {
      * Sets up camera projection matrix.
      * @public
      * @param {number} angle - Camera's view angle.
-     * @param {number} aspect - Screen aspect ration.
+     * @param {number} aspect - Screen aspect ratio.
      * @param {number} near - Near camera distance.
      * @param {number} far - Far camera distance.
      */

package/lib/js/camera/Frustum.js

@@ -1,4 +1,5 @@
 import { Mat4 } from "../math/Mat4";
+import { RADIANS_HALF } from "../math";
 function planeNormalize(plane) {
     let t = 1.0 / Math.sqrt(plane[0] * plane[0] + plane[1] * plane[1] + plane[2] * plane[2]);
     plane[0] *= t;
@@ -59,12 +60,12 @@ class Frustum {
      * Sets up camera projection matrix.
      * @public
      * @param {number} angle - Camera's view angle.
-     * @param {number} aspect - Screen aspect ration.
+     * @param {number} aspect - Screen aspect ratio.
      * @param {number} near - Near camera distance.
      * @param {number} far - Far camera distance.
      */
     setProjectionMatrix(angle, aspect, near, far) {
-        this.top = near * Math.tan((angle * Math.PI) / 360);
+        this.top = near * Math.tan(angle * RADIANS_HALF);
         this.bottom = -this.top;
         this.right = this.top * aspect;
         this.left = -this.right;

package/lib/js/control/DebugInfo.js

@@ -96,27 +96,28 @@ export class DebugInfo extends Control {
                 ctx.strokeStyle = 'black';
                 ctx.stroke();
                 let size;
-                if (material.segment.isPole) {
-                    let ext = material.segment.getExtentLonLat();
-                    ctx.fillStyle = 'black';
-                    ctx.font = 'normal ' + 29 + 'px Verdana';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
-                    ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
+                // if (material.segment.isPole) {
+                //     let ext = material.segment.getExtentLonLat();
+                //
+                //     ctx.fillStyle = 'black';
+                //     ctx.font = 'normal ' + 29 + 'px Verdana';
+                //
+                //     ctx.textAlign = 'center';
+                //     ctx.fillText(`${ext.northEast.lon.toFixed(3)} ${ext.northEast.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 + 20);
+                //     ctx.fillText(`${ext.southWest.lon.toFixed(3)} ${ext.southWest.lat.toFixed(3)}`, cnv.width / 2, cnv.height / 2 - 20);
+                // } else {
+                //Draw text
+                if (material.segment.tileZoom > 14) {
+                    size = "26";
                 }
                 else {
-                    //Draw text
-                    if (material.segment.tileZoom > 14) {
-                        size = "26";
-                    }
-                    else {
-                        size = "32";
-                    }
-                    ctx.fillStyle = 'black';
-                    ctx.font = 'normal ' + size + 'px Verdana';
-                    ctx.textAlign = 'center';
-                    ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
+                    size = "32";
                 }
+                ctx.fillStyle = 'black';
+                ctx.font = 'normal ' + size + 'px Verdana';
+                ctx.textAlign = 'center';
+                ctx.fillText(material.segment.tileX + "," + material.segment.tileY + "," + material.segment.tileZoom, cnv.width / 2, cnv.height / 2);
+                //}
                 //Draw canvas tile
                 applyCanvas(cnv);
             }

package/lib/js/control/Lighting.d.ts

@@ -4,6 +4,7 @@ import { Layer } from "../layer/Layer";
 import { Slider } from "../ui/Slider";
 import { ToggleButton } from "../ui/ToggleButton";
 import { View } from '../ui/View';
+import { Color } from "../ui/Color";
 interface ILightingParams extends IControlParams {
 }
 /**
@@ -16,6 +17,8 @@ export declare class Lighting extends Control {
     protected _panel: View<null>;
     protected _atmosphereMaxOpacity: Slider;
     protected _atmosphereMinOpacity: Slider;
+    protected _simpleSkyBackgroundColorOne: Color;
+    protected _simpleSkyBackgroundColorTwo: Color;
     protected _gamma: Slider;
     protected _exposure: Slider;
     protected _night: Slider;
@@ -38,6 +41,7 @@ export declare class Lighting extends Control {
     $ambient: HTMLElement | null;
     $specular: HTMLElement | null;
     $atmosphereOpacity: HTMLElement | null;
+    $simpleSkyBackground: HTMLElement | null;
     constructor(options?: ILightingParams);
     bindLayer(layer: Layer): void;
     oninit(): void;

package/lib/js/control/Lighting.js

@@ -3,6 +3,7 @@ import { Dialog } from '../ui/Dialog';
 import { Slider } from "../ui/Slider";
 import { ToggleButton } from "../ui/ToggleButton";
 import { View } from '../ui/View';
+import { Color } from "../ui/Color";
 const SUN_STOP_SVG_ICON = `<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 70.41" style="enable-background:new 0 0 122.88 70.41" xml:space="preserve"><g><path d="M60.91,19.12c6.95,0,13.24,2.95,17.8,7.72c4.55,4.77,7.37,11.37,7.37,18.64c0,1.94-0.2,3.83-0.58,5.65h31.61 c2.1,0,2.62,1.16,2.62,2.59c0,1.43-0.52,2.59-2.62,2.59H7.09c-2.1,0-2.62-1.16-2.62-2.59c0-1.43,0.52-2.59,2.62-2.59h29.23 c-0.38-1.82-0.58-3.71-0.58-5.65c0-7.28,2.82-13.87,7.37-18.64C47.67,22.08,53.96,19.12,60.91,19.12L60.91,19.12L60.91,19.12z M63.4,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h56.86c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59H63.4 L63.4,70.41z M2.62,70.41c-2.1,0-2.62-1.16-2.62-2.59s0.52-2.59,2.62-2.59h29.51c2.1,0,2.62,1.16,2.62,2.59s-0.52,2.59-2.62,2.59 H2.62L2.62,70.41z M38.39,9.46c-0.78-1.35-0.32-3.07,1.03-3.85c1.35-0.78,3.07-0.32,3.85,1.03l3.62,6.27 c0.78,1.35,0.32,3.07-1.03,3.85c-1.35,0.78-3.07,0.32-3.85-1.03L38.39,9.46L38.39,9.46L38.39,9.46z M58.67,2.83 c0-1.56,1.27-2.83,2.83-2.83c1.56,0,2.83,1.27,2.83,2.83v7.24c0,1.56-1.27,2.83-2.83,2.83c-1.56,0-2.83-1.26-2.83-2.83V2.83 L58.67,2.83L58.67,2.83z M79.56,7.23c0.77-1.35,2.49-1.81,3.84-1.04c1.35,0.77,1.81,2.49,1.04,3.84l-3.62,6.27 c-0.77,1.35-2.49,1.81-3.84,1.04c-1.35-0.77-1.81-2.49-1.04-3.84L79.56,7.23L79.56,7.23L79.56,7.23z M95.45,21.48 c1.35-0.78,3.07-0.32,3.85,1.03c0.78,1.35,0.32,3.07-1.03,3.85L92,29.98c-1.35,0.78-3.07,0.32-3.85-1.03 c-0.78-1.35-0.32-3.07,1.03-3.85L95.45,21.48L95.45,21.48L95.45,21.48z M102.08,41.76c1.56,0,2.83,1.27,2.83,2.83 c0,1.56-1.27,2.83-2.83,2.83h-7.24c-1.56,0-2.83-1.26-2.83-2.83s1.26-2.83,2.83-2.83H102.08L102.08,41.76L102.08,41.76z M19.74,46.25c-1.56,0-2.83-1.27-2.83-2.83c0-1.56,1.27-2.83,2.83-2.83h7.24c1.56,0,2.83,1.26,2.83,2.83s-1.27,2.83-2.83,2.83 H19.74L19.74,46.25L19.74,46.25z M24.14,25.35c-1.35-0.77-1.81-2.49-1.04-3.84c0.77-1.35,2.49-1.81,3.84-1.04l6.27,3.62 c1.35,0.77,1.81,2.49,1.04,3.84c-0.77,1.35-2.49,1.81-3.84,1.04L24.14,25.35L24.14,25.35L24.14,25.35z"/></g></svg>`;
 const SUN_ACTIVE_SVG_ICON = `<?xml version="1.0"?>
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
@@ -36,6 +37,9 @@ const TEMPLATE = `<div class="og-lighing">
          <div class="og-option og-atmosphere-opacity">
          </div>
          
+         <div class="og-option og-simpleskybackground">
+         </div>
+         
         <div class="og-lighting-emptyline"></div>
 
          <div class="og-option og-gamma"></div>         
@@ -118,6 +122,7 @@ export class Lighting extends Control {
         this.$ambient = null;
         this.$specular = null;
         this.$atmosphereOpacity = null;
+        this.$simpleSkyBackground = null;
         this._atmosphereMaxOpacity = new Slider({
             label: "Max.opacity",
             max: 5
@@ -126,6 +131,12 @@ export class Lighting extends Control {
             label: "Min.opacity",
             max: 5
         });
+        this._simpleSkyBackgroundColorOne = new Color({
+            label: "Color One"
+        });
+        this._simpleSkyBackgroundColorTwo = new Color({
+            label: "Color Two"
+        });
         this._gamma = new Slider({
             label: "Gamma",
             max: 5
@@ -203,6 +214,7 @@ export class Lighting extends Control {
         this._panel.appendTo(this._dialog.container);
         if (this._panel.el) {
             this.$atmosphereOpacity = this._panel.el.querySelector(".og-atmosphere-opacity");
+            this.$simpleSkyBackground = this._panel.el.querySelector(".og-simpleskybackground");
             this.$gamma = this._panel.el.querySelector(".og-option.og-gamma");
             this.$exposure = this._panel.el.querySelector(".og-option.og-exposure");
             this.$opacity = this._panel.el.querySelector(".og-option.og-opacity");
@@ -266,21 +278,27 @@ export class Lighting extends Control {
         atmosphereEnabledBtn.appendTo($suncontrol);
         if (this.planet.atmosphereEnabled) {
             this.$atmosphereOpacity.style.display = "block";
+            this.$simpleSkyBackground.style.display = "none";
         }
         else {
             this.$atmosphereOpacity.style.display = "none";
+            this.$simpleSkyBackground.style.display = "flex";
         }
         atmosphereEnabledBtn.events.on("change", (isActive) => {
             this.planet.atmosphereEnabled = isActive;
             if (this.planet.atmosphereEnabled) {
                 this.$atmosphereOpacity.style.display = "block";
+                this.$simpleSkyBackground.style.display = "none";
             }
             else {
                 this.$atmosphereOpacity.style.display = "none";
+                this.$simpleSkyBackground.style.display = "flex";
             }
         });
         this._atmosphereMaxOpacity.appendTo(this.$atmosphereOpacity);
         this._atmosphereMinOpacity.appendTo(this.$atmosphereOpacity);
+        this._simpleSkyBackgroundColorOne.appendTo(this.$simpleSkyBackground);
+        this._simpleSkyBackgroundColorTwo.appendTo(this.$simpleSkyBackground);
         this._gamma.appendTo(this.$gamma);
         this._exposure.appendTo(this.$exposure);
         this._night.appendTo(this.$night);
@@ -295,19 +313,23 @@ export class Lighting extends Control {
         this._specular_g.appendTo(this.$specular);
         this._specular_b.appendTo(this.$specular);
         this._shininess.appendTo(this.$specular);
-        this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
-        this._atmosphereMinOpacity.events.on("change", (val) => {
-            this.planet.atmosphereMinOpacity = val;
-        });
+        //
+        // Screen options
+        //
         this._gamma.value = this.planet.renderer.gamma;
         this._gamma.events.on("change", (val) => {
             this.planet.renderer.gamma = val;
         });
-        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
-            const l = this.planet.getLayerByName(e.target.value);
-            if (l) {
-                this.bindLayer(l);
-            }
+        this._exposure.value = this.planet.renderer.exposure;
+        this._exposure.events.on("change", (val) => {
+            this.planet.renderer.exposure = val;
+        });
+        //
+        // Atmosphere parameters
+        //
+        this._atmosphereMinOpacity.value = this.planet.atmosphereMinOpacity;
+        this._atmosphereMinOpacity.events.on("change", (val) => {
+            this.planet.atmosphereMinOpacity = val;
         });
         this._atmosphereMaxOpacity.value = this.planet.atmosphereMaxOpacity;
         this._atmosphereMaxOpacity.events.on("change", (val) => {
@@ -315,9 +337,26 @@ export class Lighting extends Control {
             let atmos = this.planet.renderer.controls.Atmosphere;
             atmos.opacity = val;
         });
-        this._exposure.value = this.planet.renderer.exposure;
-        this._exposure.events.on("change", (val) => {
-            this.planet.renderer.exposure = val;
+        //
+        // Simple Sky Background parameters
+        //
+        let simpleSkyBackgroundControl = this.planet.renderer.controls.SimpleSkyBackground;
+        this._simpleSkyBackgroundColorOne.value = simpleSkyBackgroundControl.colorOne;
+        this._simpleSkyBackgroundColorOne.events.on("input", (val) => {
+            simpleSkyBackgroundControl.colorOne = val;
+        });
+        this._simpleSkyBackgroundColorTwo.value = simpleSkyBackgroundControl.colorTwo;
+        this._simpleSkyBackgroundColorTwo.events.on("input", (val) => {
+            simpleSkyBackgroundControl.colorTwo = val;
+        });
+        //
+        // Planet options
+        //
+        this._panel.el.querySelector("#layers").addEventListener("change", (e) => {
+            const l = this.planet.getLayerByName(e.target.value);
+            if (l) {
+                this.bindLayer(l);
+            }
         });
         this._night.events.on("change", (val) => {
             if (this._selectedLayer) {

package/lib/js/control/SimpleSkyBackground.d.ts

@@ -5,6 +5,8 @@ export declare class SimpleSkyBackground extends Control {
     protected _colorOne: Float32Array;
     protected _colorTwo: Float32Array;
     constructor(options?: ISimpleSkyBackgroundParams);
+    get colorOne(): string;
+    get colorTwo(): string;
     set colorOne(htmlColor: string);
     set colorTwo(htmlColor: string);
     oninit(): void;

package/lib/js/control/SimpleSkyBackground.js

@@ -1,5 +1,5 @@
 import { Control } from "./Control";
-import { htmlColorToRgb } from "../utils/shared";
+import { htmlColorToRgb, rgbToStringHTML } from "../utils/shared";
 import { Program } from '../webgl/Program';
 export class SimpleSkyBackground extends Control {
     constructor(options = {}) {
@@ -7,8 +7,18 @@ export class SimpleSkyBackground extends Control {
             name: "SimpleSkyBackground",
             ...options
         });
-        this._colorOne = new Float32Array([1.0, 1.0, 1.0]);
-        this._colorTwo = new Float32Array([0.0, 153.0 / 255.0, 221.0 / 255.0]);
+        this._colorOne = new Float32Array([128 / 255, 223 / 255, 255 / 255]);
+        this._colorTwo = new Float32Array([10 / 255, 15 / 255, 56 / 255]);
+    }
+    get colorOne() {
+        let c = this._colorOne;
+        let arr = [Math.round(c[0] * 255), Math.round(c[1] * 255), Math.round(c[2] * 255)];
+        return rgbToStringHTML(arr);
+    }
+    get colorTwo() {
+        let c = this._colorTwo;
+        let arr = [Math.round(c[0] * 255), Math.round(c[1] * 255), Math.round(c[2] * 255)];
+        return rgbToStringHTML(arr);
     }
     set colorOne(htmlColor) {
         let rgb = htmlColorToRgb(htmlColor);

package/lib/js/control/drawing/PolygonDrawingScene.js

@@ -39,7 +39,7 @@ class PolygonDrawingScene extends RenderNode {
         super(options.name);
         this._cornerDblClick = false;
         this._onChange = (e) => {
-            if (e.geometryType === "Polygon") {
+            if (e.geometryType === "POLYGON") {
                 let coords = this.getCoordinates();
                 let entity = new Entity({
                     'geometry': {
@@ -179,7 +179,7 @@ class PolygonDrawingScene extends RenderNode {
         this._insertCornerIndex = -1;
     }
     get geometryType() {
-        return "Polygon";
+        return "POLYGON";
     }
     getCoordinates() {
         let corners = this._cornerLayer.getEntities();

package/lib/js/control/timeline/timelineUtils.js

@@ -55,38 +55,38 @@ export const SCALES = [
     [10.0, 10],
     [15.0, 15],
     [30.0, 6],
-    [60.0, 12],
-    [120.0, 12],
-    [300.0, 5],
-    [600.0, 10],
-    [900.0, 15],
-    [1800.0, 6],
-    [3600.0, 12],
-    [7200.0, 10],
-    [14400.0, 4],
-    [21600.0, 6],
-    [43200.0, 12],
-    [86400.0, 24],
-    [172800.0, 2],
-    [345600.0, 4],
-    [604800.0, 7],
-    [1296000.0, 15],
-    [2592000.0, 5],
-    [5184000.0, 6],
-    [7776000.0, 9],
-    [15552000.0, 18],
-    [31536000.0, 12],
-    [63072000.0, 2],
-    [126144000.0, 4],
-    [157680000.0, 5],
-    [315360000.0, 10],
-    [630720000.0, 2],
-    [1261440000.0, 4],
-    [1576800000.0, 5],
-    [3153600000.0, 10],
-    [6307200000.0, 2],
-    [12614400000.0, 4],
-    [15768000000.0, 5],
+    [60.0, 12], // 1min
+    [120.0, 12], // 2min
+    [300.0, 5], // 5min
+    [600.0, 10], // 10min
+    [900.0, 15], // 15min
+    [1800.0, 6], // 30min
+    [3600.0, 12], // 1hr
+    [7200.0, 10], // 2hr
+    [14400.0, 4], // 4hr
+    [21600.0, 6], // 6hr
+    [43200.0, 12], // 12hr
+    [86400.0, 24], // 24hr
+    [172800.0, 2], // 2days
+    [345600.0, 4], // 4days
+    [604800.0, 7], // 7days
+    [1296000.0, 15], // 15days
+    [2592000.0, 5], // 30days
+    [5184000.0, 6], // 60days
+    [7776000.0, 9], // 90days
+    [15552000.0, 18], // 180days
+    [31536000.0, 12], // 365days
+    [63072000.0, 2], // 2years
+    [126144000.0, 4], // 4years
+    [157680000.0, 5], // 5years
+    [315360000.0, 10], // 10years
+    [630720000.0, 2], // 20years
+    [1261440000.0, 4], // 40years
+    [1576800000.0, 5], // 50years
+    [3153600000.0, 10], // 100years
+    [6307200000.0, 2], // 200years
+    [12614400000.0, 4], // 400years
+    [15768000000.0, 5], // 500years
     [31536000000.0, 10], // 1000years
 ];
 export function getScale(seconds) {

package/lib/js/control/visibleExtent/drawnode.js

@@ -54,7 +54,7 @@ export function drawnode_screen_nl() {
                 mat4 viewMatrixRTE = viewMatrix;
                 viewMatrixRTE[3] = vec4(0.0, 0.0, 0.0, 1.0);
 
-                gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff + lowDiff, 1.0);
+                gl_Position = projectionMatrix * viewMatrixRTE * vec4(highDiff * step(1.0, length(highDiff)) + lowDiff, 1.0);
             }`,
         fragmentShader: `precision highp float;
             uniform vec4 tileOffsetArr[5];

package/lib/js/entity/GeoObject.d.ts

@@ -1,19 +1,21 @@
 import { Entity } from "./Entity";
 import { Quat, Vec3, Vec4 } from "../math/index";
-import { InstanceData } from "./GeoObjectHandler";
+import { GeoObjectHandler, InstanceData } from "./GeoObjectHandler";
 import { NumberArray3 } from "../math/Vec3";
 import { NumberArray4 } from "../math/Vec4";
 import { Object3d } from "../Object3d";
-import { GeoObjectHandler } from "./GeoObjectHandler";
 export interface IGeoObjectParams {
-    object3d: Object3d;
+    object3d?: Object3d;
+    objSrc?: string;
+    textureSrc?: string;
     tag?: string;
     position?: Vec3 | NumberArray3;
     pitch?: number;
     yaw?: number;
     roll?: number;
-    scale?: number;
+    scale?: number | Vec3;
     color?: Vec4 | NumberArray4 | string;
+    visibility?: boolean;
 }
 /**
  * @class
@@ -43,7 +45,7 @@ declare class GeoObject {
     protected _pitch: number;
     protected _yaw: number;
     protected _roll: number;
-    protected _scale: number;
+    protected _scale: Vec3;
     /**
      * RGBA color.
      * @public
@@ -58,6 +60,8 @@ declare class GeoObject {
     protected _object3d: Object3d;
     protected _visibility: boolean;
     protected _qNorthFrame: Quat;
+    private _textureSrc?;
+    _objectSrc?: string;
     constructor(options: IGeoObjectParams);
     get tag(): string;
     getPosition(): Vec3;
@@ -118,10 +122,20 @@ declare class GeoObject {
      */
     setPosition3v(position: Vec3): void;
     setYaw(yaw: number): void;
+    setObject(object: Object3d): void;
+    setObjectSrc(src: string): void;
+    setTextureSrc(src: string): void;
+    setColorHTML(color: string): void;
+    /**
+     *
+     * @param {number} pitch - Pitch in radians
+     */
     setPitch(pitch: number): void;
     setRoll(roll: number): void;
+    setPitchYawRoll(pitch: number, yaw: number, roll: number): void;
     setScale(scale: number): void;
-    getScale(): number;
+    setScale3v(scale: Vec3): void;
+    getScale(): Vec3;
     /**
      * Removes geo object from handler.
      * @public