@openglobus/og 0.17.2 → 0.18.1

package/lib/js/Extent.js

@@ -0,0 +1,278 @@
+import * as math from "./math";
+import * as mercator from "./mercator";
+import { LonLat } from "./LonLat";
+/**
+ * Represents geographical coordinates extent.
+ * @class
+ * @param {LonLat} [sw] - South West extent corner coordinates.
+ * @param {LonLat} [ne] - North East extent corner coordinates.
+ */
+export class Extent {
+    constructor(sw = new LonLat(), ne = new LonLat()) {
+        this.southWest = sw;
+        this.northEast = ne;
+    }
+    /**
+     * Creates extent instance from values in array.
+     * @static
+     * @param {Array.<number>} arr - South west and north-east longitude and latitudes packed in array. (exactly 4 entries)
+     * @return {Extent} Extent object.
+     */
+    static createFromArray(arr) {
+        return new Extent(new LonLat(arr[0], arr[1]), new LonLat(arr[2], arr[3]));
+    }
+    /**
+     * Creates bound extent instance by coordinate array.
+     * @static
+     * @param {Array.<LonLat>} arr - Coordinate array.
+     * @return {Extent} Extent object.
+     */
+    static createByCoordinates(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN, latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi.lon < lonmin)
+                lonmin = vi.lon;
+            if (vi.lon > lonmax)
+                lonmax = vi.lon;
+            if (vi.lat < latmin)
+                latmin = vi.lat;
+            if (vi.lat > latmax)
+                latmax = vi.lat;
+        }
+        return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
+    }
+    /**
+     * Creates bound extent instance by coordinates array.
+     * @static
+     * @param {Array.<Array<number>>} arr - Coordinate array. (exactly 2 entries)
+     * @return {Extent} Extent object.
+     */
+    static createByCoordinatesArr(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN, latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi[0] < lonmin)
+                lonmin = vi[0];
+            if (vi[0] > lonmax)
+                lonmax = vi[0];
+            if (vi[1] < latmin)
+                latmin = vi[1];
+            if (vi[1] > latmax)
+                latmax = vi[1];
+        }
+        return new Extent(new LonLat(lonmin, latmin), new LonLat(lonmax, latmax));
+    }
+    /**
+     * Creates extent by merсator grid tile coordinates.
+     * @static
+     * @param {number} x -
+     * @param {number} y -
+     * @param {number} z -
+     * @param {number} width -
+     * @param {number} height -
+     * @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 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;
+        return new Extent(new LonLat(left, bottom), new LonLat(right, top));
+    }
+    /**
+     * Sets current bounding extent object by coordinate array.
+     * @public
+     * @param {Array.<LonLat>} arr - Coordinate array.
+     * @return {Extent} Current extent.
+     */
+    setByCoordinates(arr) {
+        let lonmin = math.MAX, lonmax = math.MIN, latmin = math.MAX, latmax = math.MIN;
+        for (let i = 0; i < arr.length; i++) {
+            const vi = arr[i];
+            if (vi.lon < lonmin)
+                lonmin = vi.lon;
+            if (vi.lon > lonmax)
+                lonmax = vi.lon;
+            if (vi.lat < latmin)
+                latmin = vi.lat;
+            if (vi.lat > latmax)
+                latmax = vi.lat;
+        }
+        this.southWest.lon = lonmin;
+        this.southWest.lat = latmin;
+        this.northEast.lon = lonmax;
+        this.northEast.lat = latmax;
+        return this;
+    }
+    /**
+     * Determines if point inside extent.
+     * @public
+     * @param {LonLat} lonlat - Coordinate point.
+     * @return {boolean} Returns true if point inside extent.
+     */
+    isInside(lonlat) {
+        const sw = this.southWest;
+        const ne = this.northEast;
+        return (lonlat.lon >= sw.lon && lonlat.lon <= ne.lon &&
+            lonlat.lat >= sw.lat && lonlat.lat <= ne.lat);
+    }
+    /**
+     * Returns true if two extent overlap each other.
+     * @public
+     * @param {Extent} e - Another extent.
+     * @return {boolean} -
+     */
+    overlaps(e) {
+        const sw = this.southWest;
+        const ne = this.northEast;
+        return (sw.lon <= e.northEast.lon &&
+            ne.lon >= e.southWest.lon &&
+            sw.lat <= e.northEast.lat &&
+            ne.lat >= e.southWest.lat);
+    }
+    /**
+     * Gets extent width.
+     * @public
+     * @return {number} Extent width.
+     */
+    getWidth() {
+        return this.northEast.lon - this.southWest.lon;
+    }
+    /**
+     * Gets extent height.
+     * @public
+     * @return {number} Extent height.
+     */
+    getHeight() {
+        return this.northEast.lat - this.southWest.lat;
+    }
+    /**
+     * Creates clone instance of the current extent.
+     * @public
+     * @return {Extent} Extent clone.
+     */
+    clone() {
+        return new Extent(this.southWest.clone(), this.northEast.clone());
+    }
+    /**
+     * Gets the center coordinate of the extent.
+     * @public
+     * @return {number} Center coordinate.
+     */
+    getCenter() {
+        const sw = this.southWest;
+        const ne = this.northEast;
+        return new LonLat(sw.lon + (ne.lon - sw.lon) * 0.5, sw.lat + (ne.lat - sw.lat) * 0.5);
+    }
+    /**
+     * @public
+     */
+    getNorthWest() {
+        return new LonLat(this.southWest.lon, this.northEast.lat);
+    }
+    /**
+     * @public
+     */
+    getNorthEast() {
+        return new LonLat(this.northEast.lon, this.northEast.lat);
+    }
+    /**
+     * @public
+     */
+    getSouthWest() {
+        return new LonLat(this.southWest.lon, this.southWest.lat);
+    }
+    /**
+     * @public
+     */
+    getSouthEast() {
+        return new LonLat(this.northEast.lon, this.southWest.lat);
+    }
+    /**
+     * @public
+     */
+    getNorth() {
+        return this.northEast.lat;
+    }
+    getEast() {
+        return this.northEast.lon;
+    }
+    /**
+     * @public
+     */
+    getWest() {
+        return this.southWest.lon;
+    }
+    /**
+     * @public
+     */
+    getSouth() {
+        return this.southWest.lat;
+    }
+    /**
+     * Returns extents are equals.
+     * @param {Extent} extent - Extent.
+     * @returns {boolean} -
+     */
+    equals(extent) {
+        return (this.southWest.lon === extent.southWest.lon &&
+            this.southWest.lat === extent.southWest.lat &&
+            this.northEast.lon === extent.northEast.lon &&
+            this.northEast.lat === extent.northEast.lat);
+    }
+    /**
+     * Converts extent coordinates to mercator projection coordinates.
+     * @public
+     * @return {Extent} New instance of the current extent.
+     */
+    forwardMercator() {
+        return new Extent(this.southWest.forwardMercator(), this.northEast.forwardMercator());
+    }
+    /**
+     * Converts extent coordinates from mercator projection to degrees.
+     * @public
+     * @return {Extent} New instance of the current extent.
+     */
+    inverseMercator() {
+        return new Extent(this.southWest.inverseMercator(), this.northEast.inverseMercator());
+    }
+    /**
+     * Gets cartesian bounding bounds of the current ellipsoid.
+     * @public
+     * @param {Ellipsoid} ellipsoid - Ellipsoid.
+     * @return {Array.<number>} Cartesian 3d coordinate array. (exactly 6 entries)
+     */
+    getCartesianBounds(ellipsoid) {
+        let xmin = math.MAX, xmax = math.MIN, ymin = math.MAX, ymax = math.MIN, zmin = math.MAX, zmax = math.MIN;
+        const v = [
+            new LonLat(this.southWest.lon, this.southWest.lat),
+            new LonLat(this.southWest.lon, this.northEast.lat),
+            new LonLat(this.northEast.lon, this.northEast.lat),
+            new LonLat(this.northEast.lon, this.southWest.lat)
+        ];
+        for (let i = 0; i < v.length; i++) {
+            const coord = ellipsoid.lonLatToCartesian(v[i]);
+            const x = coord.x;
+            const y = coord.y;
+            const z = coord.z;
+            if (x < xmin)
+                xmin = x;
+            if (x > xmax)
+                xmax = x;
+            if (y < ymin)
+                ymin = y;
+            if (y > ymax)
+                ymax = y;
+            if (z < zmin)
+                zmin = z;
+            if (z > zmax)
+                zmax = z;
+        }
+        return [xmin, ymin, zmin, xmax, ymax, zmax];
+    }
+    toString() {
+        return (`[${this.southWest.lon.toFixed(5)}, ${this.southWest.lat.toFixed(5)}, ${this.northEast.lon.toFixed(5)}, ${this.northEast.lat.toFixed(5)}]`);
+    }
+}

package/lib/js/Globe.d.ts

@@ -0,0 +1,132 @@
+import { Control } from "./control/Control";
+import { Ellipsoid } from "./ellipsoid/Ellipsoid";
+import { EmptyTerrain } from "./terrain/EmptyTerrain";
+import { Layer } from "./layer/Layer";
+import { NumberArray2 } from "./math/Vec2";
+import { NumberArray4 } from "./math/Vec4";
+import { Planet } from "./scene/Planet";
+import { Sun } from "./control/Sun";
+import { HTMLDivElementExt, Renderer } from "./renderer/Renderer";
+import { RenderNode } from "./scene/RenderNode";
+import { Extent } from "./Extent";
+interface IGlobeParams {
+    attributionContainer?: HTMLElement;
+    target?: string | HTMLElement;
+    skybox?: RenderNode;
+    dpi?: number;
+    msaa?: number;
+    name?: string;
+    frustums?: NumberArray2[];
+    ellipsoid?: Ellipsoid;
+    maxGridSize?: number;
+    nightTextureSrc?: string | null;
+    specularTextureSrc?: string | null;
+    minAltitude?: number;
+    maxAltitude?: number;
+    maxEqualZoomAltitude?: number;
+    minEqualZoomAltitude?: number;
+    minEqualZoomCameraSlope?: number;
+    quadTreeStrategyPrototype?: any;
+    maxLoadingRequests?: number;
+    atmosphereEnabled?: boolean;
+    terrain?: EmptyTerrain;
+    controls?: Control[];
+    useEarthNavigation?: boolean;
+    minSlope?: number;
+    sun?: {
+        active?: boolean;
+        stopped?: boolean;
+    };
+    layers?: Layer[];
+    viewExtent?: Extent | NumberArray4;
+    autoActivate?: boolean;
+    fontsSrc?: string;
+    resourcesSrc?: string;
+}
+/**
+ * Creates a WebGL context with globe.
+ * @class
+ *
+ * @example <caption>Basic initialization</caption>
+ * globus = new Globe({
+ *     'atmosphere': false,
+ *     'target': 'globus',
+ *     'name': 'Earth',
+ *     'controls': [
+ *          new control.MouseNavigation({ autoActivate: true }),
+ *          new control.KeyboardNavigation({ autoActivate: true }),
+ *          new control.EarthCoordinates({ autoActivate: true, center: false }),
+ *          new control.LayerSwitcher({ autoActivate: true }),
+ *          new control.ZoomControl({ autoActivate: true }),
+ *          new control.TouchNavigation({ autoActivate: true }),
+ *          new control.Sun({ autoActivate: true })
+ *      ],
+ *     'terrain': new GlobusTerrain(),
+ *     'layers': [
+ *          new XYZ("OpenStreetMap", { isBaseLayer: true, url: "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png", visibility: true, attribution: 'Data @ <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL</a>' })
+ *      ],
+ *     'autoActivate': true
+ * });
+ *
+ * @param {IGlobeParams} options - Options:
+ * @param {string|HTMLElement} options.target - HTML element id where planet canvas have to be created.
+ * @param {string} [options.name] - Planet name. Default is uniq identifier.
+ * @param {EmptyTerrain} [options.terrain] - Terrain provider. Default no terrain - og.terrain.EmptyTerrain.
+ * @param {Array.<Control>} [options.controls] - Renderer controls array.
+ * @param {Array.<Layer>} [options.layers] - Planet layers.
+ * @param {Extent| [[number, number],[number, number]]} [options.viewExtent] - Viewable starting extent.
+ * @param {boolean} [options.autoActivate=true] - Globe rendering auto activation flag. True is default.
+ * @param {HTMLElement} [options.attributionContainer] - Container for attribution list.
+ * @param {number} [options.maxGridSize=128] = Maximal segment grid size. 128 is default
+ * @param {string} [options.fontsSrc] -  Fonts collection url.
+ * @param {string} [options.resourcesSrc] - Resources root src.
+ * @param {string} [options.nightTextureSrc] - Night glowing image sources
+ * @param {string} [options.specularTextureSrc] - Specular water mask image sourcr
+ * @param {number} [options.maxAltitude=15000000.0] - Maximal camera altitude above terrain
+ * @param {number} [options.minAltitude=1.0] - Minimal camera altitude above terrain
+ * @param {number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen became the same zoom level
+ * @param {number} [options.loadingBatchSize=12] -
+ * @param {number} [options.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
+ * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
+ * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
+ * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ */
+declare class Globe {
+    static __counter__: number;
+    $target: HTMLElement | null;
+    protected _instanceID: string;
+    protected _canvas: HTMLCanvasElement;
+    $inner: HTMLDivElementExt;
+    /**
+     * Interface for the renderer context(events, input states, renderer nodes etc.)
+     * @public
+     * @type {Renderer}
+     */
+    renderer: Renderer;
+    /**
+     * Planet node name. Access with this.renderer.<name>
+     * @private
+     * @type {String}
+     */
+    protected _planetName: string;
+    planet: Planet;
+    sun: Sun;
+    constructor(options: IGlobeParams);
+    start(): void;
+    /**
+     * Starts screen brightness fading in effect by the duration time.
+     * @public
+     */
+    fadeIn(): void;
+    /**
+     * Starts screen brightness fading out effect by the duration time.
+     * @public
+     */
+    fadeOut(): void;
+    attachTo(target: HTMLElement | string): void;
+    detach(): void;
+    destroy(): void;
+}
+export { Globe };

package/lib/js/Globe.js

@@ -0,0 +1,265 @@
+// #StandWithUkraine
+import { CompassButton } from "./control/CompassButton";
+import { EarthCoordinates } from "./control/EarthCoordinates";
+import { EarthNavigation } from "./control/EarthNavigation";
+import { EmptyTerrain } from "./terrain/EmptyTerrain";
+import { Handler } from "./webgl/Handler";
+import { isEmpty } from "./utils/shared";
+import { MouseNavigation } from "./control/MouseNavigation";
+import { Planet } from "./scene/Planet";
+import { ScaleControl } from "./control/ScaleControl";
+import { Sun } from "./control/Sun";
+import { TouchNavigation } from "./control/TouchNavigation";
+import { Renderer } from "./renderer/Renderer";
+import { ZoomControl } from "./control/ZoomControl";
+const DEFAULT_NIGHT_SRC = `/night.png`;
+const DEFAULT_SPEC_SRC = `/spec.png`;
+const DEFAULT_RESOURCES_SRC = '/res';
+/** @const {string} */
+const PLANET_NAME_PREFIX = "globus_planet_";
+/**
+ * Creates a WebGL context with globe.
+ * @class
+ *
+ * @example <caption>Basic initialization</caption>
+ * globus = new Globe({
+ *     'atmosphere': false,
+ *     'target': 'globus',
+ *     'name': 'Earth',
+ *     'controls': [
+ *          new control.MouseNavigation({ autoActivate: true }),
+ *          new control.KeyboardNavigation({ autoActivate: true }),
+ *          new control.EarthCoordinates({ autoActivate: true, center: false }),
+ *          new control.LayerSwitcher({ autoActivate: true }),
+ *          new control.ZoomControl({ autoActivate: true }),
+ *          new control.TouchNavigation({ autoActivate: true }),
+ *          new control.Sun({ autoActivate: true })
+ *      ],
+ *     'terrain': new GlobusTerrain(),
+ *     'layers': [
+ *          new XYZ("OpenStreetMap", { isBaseLayer: true, url: "http://b.tile.openstreetmap.org/{z}/{x}/{y}.png", visibility: true, attribution: 'Data @ <a href="http://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="http://www.openstreetmap.org/copyright">ODbL</a>' })
+ *      ],
+ *     'autoActivate': true
+ * });
+ *
+ * @param {IGlobeParams} options - Options:
+ * @param {string|HTMLElement} options.target - HTML element id where planet canvas have to be created.
+ * @param {string} [options.name] - Planet name. Default is uniq identifier.
+ * @param {EmptyTerrain} [options.terrain] - Terrain provider. Default no terrain - og.terrain.EmptyTerrain.
+ * @param {Array.<Control>} [options.controls] - Renderer controls array.
+ * @param {Array.<Layer>} [options.layers] - Planet layers.
+ * @param {Extent| [[number, number],[number, number]]} [options.viewExtent] - Viewable starting extent.
+ * @param {boolean} [options.autoActivate=true] - Globe rendering auto activation flag. True is default.
+ * @param {HTMLElement} [options.attributionContainer] - Container for attribution list.
+ * @param {number} [options.maxGridSize=128] = Maximal segment grid size. 128 is default
+ * @param {string} [options.fontsSrc] -  Fonts collection url.
+ * @param {string} [options.resourcesSrc] - Resources root src.
+ * @param {string} [options.nightTextureSrc] - Night glowing image sources
+ * @param {string} [options.specularTextureSrc] - Specular water mask image sourcr
+ * @param {number} [options.maxAltitude=15000000.0] - Maximal camera altitude above terrain
+ * @param {number} [options.minAltitude=1.0] - Minimal camera altitude above terrain
+ * @param {number} [options.maxEqualZoomAltitude=15000000.0] - Maximal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomAltitude=10000.0] - Minimal altitude since segments on the screen became the same zoom level
+ * @param {number} [options.minEqualZoomCameraSlope=0.8] - Minimal camera slope above te globe where segments on the screen became the same zoom level
+ * @param {number} [options.loadingBatchSize=12] -
+ * @param {number} [options.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
+ * @param {number} [options.msaa=0] - MSAA antialiasing parameter: 2,4,8,16. Default is 0.
+ * @param {number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
+ * @param {boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
+ */
+class Globe {
+    constructor(options) {
+        this.$target = null;
+        this._instanceID = `__globus${Globe.__counter__++ ? Globe.__counter__ : ""}__`;
+        window[this._instanceID] = this;
+        //
+        // Canvas creation
+        //
+        this._canvas = document.createElement("canvas");
+        this._canvas.id = `canvas${this._instanceID}`;
+        this._canvas.style.width = "100%";
+        this._canvas.style.height = "100%";
+        this._canvas.style.display = "block";
+        this._canvas.style.opacity = "0.0";
+        this._canvas.style.transition = "opacity 150ms";
+        /**
+         * Dom element where WebGL canvas creates
+         * @public
+         * @type {Element}
+         */
+        this.$inner = document.createElement('div');
+        this.$inner.classList.add("og-inner");
+        this.$inner.appendChild(this._canvas);
+        this.$inner.attributions = document.createElement('div');
+        if (options.attributionContainer) {
+            options.attributionContainer.appendChild(this.$inner.attributions);
+        }
+        else {
+            this.$inner.attributions.classList.add("og-attribution");
+            this.$inner.appendChild(this.$inner.attributions);
+        }
+        if (options.target) {
+            this.attachTo(options.target);
+        }
+        const _disableWheel = (e) => {
+            e.preventDefault();
+        };
+        this._canvas.onmouseenter = function () {
+            document.addEventListener("mousewheel", _disableWheel, {
+                capture: false,
+                passive: false
+            });
+        };
+        this._canvas.onmouseleave = function () {
+            document.removeEventListener("mousewheel", _disableWheel);
+        };
+        this.renderer = new Renderer(new Handler(this._canvas, {
+            autoActivate: false,
+            pixelRatio: options.dpi || (window.devicePixelRatio + 0.15),
+            context: {
+                alpha: false,
+                antialias: false,
+                premultipliedAlpha: false
+            }
+        }), {
+            autoActivate: false,
+            msaa: options.msaa,
+            fontsSrc: options.fontsSrc
+        });
+        this.renderer.div = this.$inner;
+        // Skybox
+        if (options.skybox) {
+            this.renderer.addNode(options.skybox);
+        }
+        this._planetName = options.name ? options.name : PLANET_NAME_PREFIX + Globe.__counter__;
+        this.planet = new Planet({
+            name: this._planetName,
+            frustums: options.frustums,
+            ellipsoid: options.ellipsoid,
+            maxGridSize: options.maxGridSize,
+            nightTextureSrc: options.nightTextureSrc === null ? null : `${options.resourcesSrc || DEFAULT_RESOURCES_SRC}${DEFAULT_NIGHT_SRC}`,
+            specularTextureSrc: options.specularTextureSrc === null ? null : `${options.resourcesSrc || DEFAULT_RESOURCES_SRC}${DEFAULT_SPEC_SRC}`,
+            minAltitude: options.minAltitude,
+            maxAltitude: options.maxAltitude || 15000000,
+            maxEqualZoomAltitude: options.maxEqualZoomAltitude,
+            minEqualZoomAltitude: options.minEqualZoomAltitude,
+            minEqualZoomCameraSlope: options.minEqualZoomCameraSlope,
+            quadTreeStrategyPrototype: options.quadTreeStrategyPrototype,
+            maxLoadingRequests: options.maxLoadingRequests,
+            atmosphereEnabled: options.atmosphereEnabled
+        });
+        // Attach terrain provider (can be one object or array)
+        if (options.terrain) {
+            //@todo: refactoring
+            if (Array.isArray(options.terrain)) {
+                this.planet.setTerrain(options.terrain[0]); // If array get the terrain from 1st element
+            }
+            else {
+                this.planet.setTerrain(options.terrain);
+            }
+        }
+        else {
+            this.planet.setTerrain(new EmptyTerrain());
+        }
+        this.renderer.addNode(this.planet);
+        // Add controls
+        if (options.controls) {
+            this.planet.addControls(options.controls);
+        }
+        else {
+            this.planet.addControls([
+                new ZoomControl(),
+                options.useEarthNavigation ? new EarthNavigation() : new MouseNavigation({ minSlope: options.minSlope }),
+                new TouchNavigation(),
+                new EarthCoordinates(),
+                new ScaleControl(),
+                new CompassButton()
+            ]);
+        }
+        const _controls = this.renderer.controls;
+        let sun;
+        for (let i in _controls) {
+            if (_controls[i] instanceof Sun) {
+                sun = _controls[i];
+                break;
+            }
+        }
+        if (!sun) {
+            this.sun = new Sun();
+            this.planet.addControl(this.sun);
+        }
+        else {
+            this.sun = sun;
+        }
+        if (options.sun) {
+            if (options.sun.active !== undefined && !options.sun.active) {
+                this.sun.deactivate();
+            }
+            if (options.sun.stopped === true) {
+                this.sun.stop();
+            }
+        }
+        if (options.layers) {
+            this.planet.addLayers(options.layers);
+        }
+        // TODO: view center, altitude, extent
+        let ve = options.viewExtent;
+        if (ve) {
+            if (ve instanceof Array) {
+                this.planet.viewExtentArr(ve);
+            }
+            else {
+                this.planet.viewExtent(ve);
+            }
+        }
+        // Run!
+        if (options.autoActivate || isEmpty(options.autoActivate)) {
+            this.start();
+        }
+    }
+    start() {
+        this.renderer.start();
+        this.fadeIn();
+    }
+    /**
+     * Starts screen brightness fading in effect by the duration time.
+     * @public
+     */
+    fadeIn() {
+        this._canvas.style.opacity = "1.0";
+    }
+    /**
+     * Starts screen brightness fading out effect by the duration time.
+     * @public
+     */
+    fadeOut() {
+        this._canvas.style.opacity = "0";
+    }
+    attachTo(target) {
+        this.detach();
+        let t;
+        if (target instanceof HTMLElement) {
+            t = target;
+        }
+        else {
+            t = document.getElementById(target) || document.querySelector(target);
+        }
+        if (t) {
+            this.$target = t;
+            t.appendChild(this.$inner);
+        }
+    }
+    detach() {
+        if (this.$target) {
+            // Remember that when container is zero
+            // sized(display none etc.) renderer frame will be stopped
+            this.$target.removeChild(this.$inner);
+        }
+    }
+    destroy() {
+        this.detach();
+        this.renderer.destroy();
+    }
+}
+Globe.__counter__ = 0;
+export { Globe };