@openglobus/og 0.16.3 → 0.17.1

package/src/og/utils/NormalMapCreator.js

@@ -1,7 +1,3 @@
-/**
- * @module og/utils/NormalMapCreator
- */
-
 "use strict";
 
 import { Lock } from "../Lock.js";
@@ -19,7 +15,7 @@ export class NormalMapCreator {
         this._maxTableSize = options.maxTableSize || 8;
 
         this._planet = planet;
-        this._handler = planet.renderer.handler;
+        this._handler = null;
         this._verticesBufferArray = [];
         this._indexBufferArray = [];
         this._positionBuffer = null;
@@ -32,12 +28,15 @@ export class NormalMapCreator {
         this._queue = new QueueArray(1024);
 
         this._lock = new Lock();
-
-        this._init();
     }
 
-    _init() {
-        var isWebkit = false; //('WebkitAppearance' in document.documentElement.style) && !/^((?!chrome).)*safari/i.test(navigator.userAgent);
+    init() {
+
+        this._maxTableSize = this._planet._maxGridSize || 8;
+
+        this._handler = this._planet.renderer.handler;
+
+        let isWebkit = false; //('WebkitAppearance' in document.documentElement.style) && !/^((?!chrome).)*safari/i.test(navigator.userAgent);
 
         /*==================================================================================
          * http://www.sunsetlakesoftware.com/2013/10/21/optimizing-gaussian-blurs-mobile-gpu
@@ -123,13 +122,13 @@ export class NormalMapCreator {
         this._normalMapVerticesTexture = this._handler.createEmptyTexture_l(this._width, this._height);
 
         //create vertices hasharray for different grid size segments from 2^4(16) to 2^7(128)
-        for (var p = this._minTabelSize; p <= this._maxTableSize; p++) {
+        for (let p = this._minTabelSize; p <= this._maxTableSize; p++) {
             var gs = Math.pow(2, p);
             var gs2 = gs / 2;
             var vertices = new Float32Array((gs + 1) * (gs + 1) * 2);
 
-            for (var i = 0; i <= gs; i++) {
-                for (var j = 0; j <= gs; j++) {
+            for (let i = 0; i <= gs; i++) {
+                for (let j = 0; j <= gs; j++) {
                     let ind = (i * (gs + 1) + j) * 2;
                     vertices[ind] = -1 + j / gs2;
                     vertices[ind + 1] = -1 + i / gs2;

package/src/og/utils/PlainSegmentWorker.js

@@ -193,7 +193,7 @@ const _programm = `
         this.z = z;
     };
 
-    var lonLatToCartesian = function (lon, lat, heightFactor, res) {
+    var geodeticToCartesian = function (lon, lat, heightFactor, res) {
 
         let h = getHeightMSL(lon, lat) * heightFactor;
 
@@ -204,14 +204,14 @@ const _programm = `
 
         let N = A / Math.sqrt(1.0 - E2 * slt * slt);
         let nc = (N + h) * Math.cos(latrad);       
-        
-        res.x = nc * Math.sin(lonrad);
-        res.y = (N * (1.0 - E2) + h) * slt;
-        res.z = nc * Math.cos(lonrad);
+           
+        res.x = nc * Math.cos(lonrad);
+        res.y = nc * Math.sin(lonrad);
+        res.z = (N * (1 - E2) + h) * slt;
     };
 
-    var lonLatToCartesianInverse = function (lon, lat, heightFactor, res){
-        lonLatToCartesian(
+    var geodeticToCartesianInverse = function (lon, lat, heightFactor, res){
+        geodeticToCartesian(
             lon * INV_POLE_BY_180,
             INV_PI_BY_360 * Math.atan(Math.exp(lat * PI_BY_POLE)) - INV_PI_BY_180_HALF_PI,
             heightFactor,
@@ -279,9 +279,9 @@ const _programm = `
             let heightFactor =  msg.data.params[13];
         
             if(msg.data.params[1] === 0.0){
-                _projFunc = lonLatToCartesianInverse;
+                _projFunc = geodeticToCartesianInverse;
             }else{
-                _projFunc = lonLatToCartesian;
+                _projFunc = geodeticToCartesian;
             }
 
             let maxFgs = Math.max(fgs, gridSize);

package/src/og/utils/TerrainWorker.js

@@ -232,7 +232,7 @@ const _programm =
             normalMapVerticesHigh = new Float32Array(fileGridSize_one_x2 * 3);
             normalMapVerticesLow = new Float32Array(fileGridSize_one_x2 * 3);
 
-            for (var k = 0; k < fileGridSize_one_x2; k++) {
+            for (let k = 0; k < fileGridSize_one_x2; k++) {
 
                 var j = k % fileGridSize_one,
                     i = ~~(k / fileGridSize_one);
@@ -502,7 +502,7 @@ const _programm =
             normalMapVerticesHigh.set(terrainVerticesHigh);
             normalMapVerticesLow.set(terrainVerticesLow);
 
-            for(var k=0;k < gsgs; k++) {
+            for (let k = 0; k < gsgs; k++) {
 
                 var j = k % gs,
                     i = ~~(k / gs);

package/src/og/utils/TextureAtlas.js

@@ -168,7 +168,7 @@ class TextureAtlas {
             this.clearCanvas();
 
             var newNodes = new Map();
-            for (var i = 0; i < im.length; i++) {
+            for (let i = 0; i < im.length; i++) {
                 this._completeNode(newNodes, this._btree.insert(im[i]));
             }
             this.nodes = null;

package/src/og/utils/VectorTileCreator.js

@@ -1,7 +1,3 @@
-/**
- * @module og/utils/VectorTileCreator
- */
-
 'use strict';
 
 import { doubleToTwoFloats2 } from '../math/coder.js';
@@ -14,19 +10,17 @@ let tempArr = new Float32Array(2);
 const MAX_FRAME_TIME = 25.0;
 
 export class VectorTileCreator {
-
     constructor(planet, width = 512, height = 512) {
-
         this._width = width;
         this._height = height;
-        this._handler = planet.renderer.handler;
         this._planet = planet;
         this._framebuffer = null;
         this._queue = [];
-        this._initialize();
     }
 
-    _initialize() {
+    init() {
+
+        this._handler = this._planet.renderer.handler;
 
         //Line
         if (!this._handler.programs.vectorTileLineRasterization) {

package/src/og/utils/earcut.js

@@ -45,7 +45,7 @@ function earcut(data, holeIndices, dim) {
         minX = maxX = data[0];
         minY = maxY = data[1];
 
-        for (var i = dim; i < outerLen; i += dim) {
+        for (let i = dim; i < outerLen; i += dim) {
             x = data[i];
             y = data[i + 1];
             if (x < minX) minX = x;
@@ -610,7 +610,7 @@ function deviation(data, holeIndices, dim, triangles) {
 
     var polygonArea = Math.abs(signedArea(data, 0, outerLen, dim));
     if (hasHoles) {
-        for (var i = 0, len = holeIndices.length; i < len; i++) {
+        for (let i = 0, len = holeIndices.length; i < len; i++) {
             var start = holeIndices[i] * dim;
             var end = i < len - 1 ? holeIndices[i + 1] * dim : data.length;
             polygonArea -= Math.abs(signedArea(data, start, end, dim));
@@ -618,7 +618,7 @@ function deviation(data, holeIndices, dim, triangles) {
     }
 
     var trianglesArea = 0;
-    for (i = 0; i < triangles.length; i += 3) {
+    for (let i = 0; i < triangles.length; i += 3) {
         var a = triangles[i] * dim;
         var b = triangles[i + 1] * dim;
         var c = triangles[i + 2] * dim;
@@ -633,7 +633,7 @@ function deviation(data, holeIndices, dim, triangles) {
 
 function signedArea(data, start, end, dim) {
     var sum = 0;
-    for (var i = start, j = end - dim; i < end; i += dim) {
+    for (let i = start, j = end - dim; i < end; i += dim) {
         sum += (data[j] - data[i]) * (data[i + 1] + data[j + 1]);
         j = i;
     }
@@ -646,9 +646,9 @@ function flatten(data) {
         result = { vertices: [], holes: [], dimensions: dim },
         holeIndex = 0;
 
-    for (var i = 0; i < data.length; i++) {
-        for (var j = 0; j < data[i].length; j++) {
-            for (var d = 0; d < dim; d++) result.vertices.push(data[i][j][d]);
+    for (let i = 0; i < data.length; i++) {
+        for (let j = 0; j < data[i].length; j++) {
+            for (let d = 0; d < dim; d++) result.vertices.push(data[i][j][d]);
         }
         if (i > 0) {
             holeIndex += data[i - 1].length;
@@ -658,4 +658,4 @@ function flatten(data) {
     return result;
 }
 
-export { earcut, flatten };
+export { earcut, flatten };

package/src/og/utils/shared.js

@@ -152,7 +152,7 @@ export function parseHTML(htmlStr) {
     var p = document.createElement("div");
     p.innerHTML = htmlStr;
     var domArr = [];
-    for (var i = 0; i < p.childNodes.length; i++) {
+    for (let i = 0; i < p.childNodes.length; i++) {
         domArr.push(p.childNodes[i]);
         p.removeChild(p.childNodes[i]);
     }
@@ -419,7 +419,7 @@ export function xmlToJson(xml) {
         // do attributes
         if (xml.attributes.length > 0) {
             obj["@attributes"] = {};
-            for (var j = 0; j < xml.attributes.length; j++) {
+            for (let j = 0; j < xml.attributes.length; j++) {
                 var attribute = xml.attributes.item(j);
                 obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
             }
@@ -431,7 +431,7 @@ export function xmlToJson(xml) {
 
     // do children
     if (xml.hasChildNodes()) {
-        for (var i = 0; i < xml.childNodes.length; i++) {
+        for (let i = 0; i < xml.childNodes.length; i++) {
             var item = xml.childNodes.item(i);
             var nodeName = item.nodeName;
             if (typeof obj[nodeName] === "undefined") {
@@ -511,12 +511,12 @@ export function base64toBlob(base64Data, contentType) {
     var slicesCount = Math.ceil(bytesLength / sliceSize);
     var byteArrays = new Array(slicesCount);
 
-    for (var sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
+    for (let sliceIndex = 0; sliceIndex < slicesCount; ++sliceIndex) {
         var begin = sliceIndex * sliceSize;
         var end = Math.min(begin + sliceSize, bytesLength);
 
         var bytes = new Array(end - begin);
-        for (var offset = begin, i = 0; offset < end; ++i, ++offset) {
+        for (let offset = begin, i = 0; offset < end; ++i, ++offset) {
             bytes[i] = byteCharacters[offset].charCodeAt(0);
         }
         byteArrays[sliceIndex] = new Uint8Array(bytes);
@@ -751,7 +751,7 @@ export function concatArrays(a = [], b) {
     if (ArrayBuffer.isView(a)) {
         return concatTypedArrays(a, b);
     } else {
-        for (var i = 0; i < b.length; i++) {
+        for (let i = 0; i < b.length; i++) {
             a.push(b[i]);
         }
         return a;
@@ -858,8 +858,8 @@ export function getMatrixSubArray(sourceArr, gridSize, i0, j0, size) {
     var res = new Float64Array(size_1 * size_1 * 3);
 
     var vInd = 0;
-    for (var i = i0; i < i0size; i++) {
-        for (var j = j0; j < j0size; j++) {
+    for (let i = i0; i < i0size; i++) {
+        for (let j = j0; j < j0size; j++) {
             var ind = 3 * (i * (gridSize + 1) + j);
 
             res[vInd++] = sourceArr[ind];
@@ -902,8 +902,8 @@ export function getMatrixSubArrayBoundsExt(
     gridSize += 1;
     var vInd = 0,
         nInd = 0;
-    for (var i = i0; i < i0size; i++) {
-        for (var j = j0; j < j0size; j++) {
+    for (let i = i0; i < i0size; i++) {
+        for (let j = j0; j < j0size; j++) {
             let indBy3 = i * gridSize + j,
                 ind = 3 * indBy3;
 
@@ -956,6 +956,7 @@ export async function loadImage(url) {
             resolve(image);
         });
         image.src = url;
+        image.crossOrigin = ""
         return image;
     });
 }
@@ -967,4 +968,22 @@ export async function loadImage(url) {
  */
 export function isImageLoaded(image) {
     return image.complete && image.naturalHeight !== 0;
-}
+}
+
+export function distanceFormat(v) {
+    if (v > 1000) {
+        return `${(v / 1000).toFixed(1)} km`;
+    } else if (v > 9) {
+        return `${Math.round(v)} m`;
+    } else {
+        return `${v.toFixed(1)} m`;
+    }
+}
+
+export function getUrlParam(paramName) {
+    let urlParams = new URLSearchParams(location.search);
+    let param = urlParams.get(paramName);
+    if (param) {
+        return Number(param);
+    }
+}

package/src/og/webgl/Framebuffer.js

@@ -1,7 +1,3 @@
-/**
- * @module og/webgl/Framebuffer
- */
-
 "use strict";
 
 import { ImageCanvas } from "../ImageCanvas.js";
@@ -125,7 +121,7 @@ export class Framebuffer {
     destroy() {
         var gl = this.handler.gl;
 
-        for (var i = 0; i < this.textures.length; i++) {
+        for (let i = 0; i < this.textures.length; i++) {
             gl.deleteTexture(this.textures[i]);
         }
         this.textures = new Array(this._size);
@@ -152,7 +148,7 @@ export class Framebuffer {
 
         if (!this._isBare) {
             let attachmentArr = [];
-            for (var i = 0; i < this.textures.length; i++) {
+            for (let i = 0; i < this.textures.length; i++) {
                 let ti = this.textures[i] || this.handler.createEmptyTexture2DExt(this._width, this._height, this._filter, this._internalFormatArr[i], this._formatArr[i], this._typeArr[i]);
 
                 let att_i = gl[this._attachmentArr[i]];

package/src/og/webgl/Handler.js

@@ -1,7 +1,3 @@
-/**
- * @module og/webgl/Handler
- */
-
 "use strict";
 
 import { Clock } from "../Clock.js";
@@ -10,7 +6,7 @@ import { Events } from "../Events.js";
 import { ImageCanvas } from "../ImageCanvas.js";
 import { Vec2 } from "../math/Vec2.js";
 import { Stack } from "../Stack.js";
-import { isEmpty } from "../utils/shared.js";
+import { getUrlParam, isEmpty } from "../utils/shared.js";
 import { ProgramController } from "./ProgramController.js";
 
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
@@ -23,7 +19,7 @@ const MAX_LEVELS = 2;
 /**
  * A WebGL handler for accessing low-level WebGL capabilities.
  * @class
- * @param {string} id - Canvas element id that WebGL handler assing with. If it's null
+ * @param {string | HTMLCanvasElement} canvasTarget - Canvas element target.
  * or undefined creates hidden canvas and handler bacomes hidden.
  * @param {Object} [params] - Handler options:
  * @param {number} [params.anisotropy] - Anisotropy filter degree. 8 is default.
@@ -32,7 +28,7 @@ const MAX_LEVELS = 2;
  * @param {Array.<string>} [params.extensions] - Additional WebGL extension list. Available by default: EXT_texture_filter_anisotropic.
  */
 class Handler {
-    constructor(id, params = {}) {
+    constructor(canvasTarget, params = {}) {
 
         this.events = new Events(["visibilitychange", "resize"]);
         /**
@@ -94,7 +90,7 @@ class Handler {
         this._params.anisotropy = this._params.anisotropy || 4;
         this._params.width = this._params.width || 256;
         this._params.height = this._params.height || 256;
-        this._params.pixelRatio = this._params.pixelRatio || 1.0;
+        this._params.pixelRatio = getUrlParam('og_dpi') || this._params.pixelRatio || 1.0;
         this._params.context = this._params.context || {};
         this._params.extensions = this._params.extensions || [];
         this._oneByHeight = 1.0 / (this._params.height * this._params.pixelRatio);
@@ -109,11 +105,11 @@ class Handler {
         this.extensions = {};
 
         /**
-         * HTML Canvas object id.
+         * HTML Canvas target.
          * @private
          * @type {Object}
          */
-        this._id = id;
+        this._canvasTarget = canvasTarget;
 
         this._lastAnimationFrameTime = 0;
 
@@ -144,11 +140,31 @@ class Handler {
 
         this.ONCANVASRESIZE = null;
 
+        this._createCanvas();
+
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
     }
 
+    isInitialized() {
+        return this._initialized;
+    }
+
+    _createCanvas() {
+        if (this._canvasTarget) {
+            if (this._canvasTarget instanceof HTMLElement) {
+                this.canvas = this._canvasTarget;
+            } else {
+                this.canvas = document.getElementById(this._canvasTarget) || document.querySelector(this._canvasTarget);
+            }
+        } else {
+            this.canvas = document.createElement("canvas");
+            this.canvas.width = this._params.width;
+            this.canvas.height = this._params.height;
+        }
+    }
+
     /**
      * The return value is null if the extension is not supported, or an extension object otherwise.
      * @param {Object} gl - WebGl context pointer.
@@ -611,17 +627,12 @@ class Handler {
      * @public
      */
     initialize() {
-        if (this._id) {
-            this.canvas = document.getElementById(this._id);
-        } else {
-            this.canvas = document.createElement("canvas");
-            this.canvas.width = this._params.width;
-            this.canvas.height = this._params.height;
-        }
+
+        if (this._initialized) return;
 
         this.gl = Handler.getContext(this.canvas, this._params.context);
 
-        if(this.gl) {
+        if (this.gl) {
             this._initialized = true;
 
             /** Sets default extensions */
@@ -1017,6 +1028,9 @@ class Handler {
 
         this.stop();
 
+        //
+        // Dispose shaders
+        //
         for (let p in this.programs) {
             this.removeProgram(p);
         }
@@ -1030,6 +1044,9 @@ class Handler {
         this.framebufferStack = null;
         this.framebufferStack = new Stack();
 
+        //
+        // Destroy canvas
+        //
         if (this.canvas.parentNode) {
             this.canvas.parentNode.removeChild(this.canvas);
         }
@@ -1037,6 +1054,9 @@ class Handler {
         this.canvas.height = 1;
         this.canvas = null;
 
+        //
+        // Clear attrib pointers
+        //
         let numAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
         let tmp = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, tmp);
@@ -1047,13 +1067,19 @@ class Handler {
         }
         gl.deleteBuffer(tmp);
 
-        let numTextureUnits = gl.getParameter(gl.MAX_TEXTlURE_IMAGE_UNITS);
+        //
+        // Clear all possible textures
+        //
+        let numTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
         for (let ii = 0; ii < numTextureUnits; ++ii) {
             gl.activeTexture(gl.TEXTURE0 + ii);
             gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
             gl.bindTexture(gl.TEXTURE_2D, null);
         }
 
+        //
+        // Hard reset
+        //
         gl.activeTexture(gl.TEXTURE0);
         gl.useProgram(null);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);
@@ -1112,7 +1138,7 @@ class Handler {
     //         const data = new DataView(xhr.response);
     //         const array =
     //             new Float32Array(data.byteLength / Float32Array.BYTES_PER_ELEMENT);
-    //         for (var i = 0; i < array.length; ++i) {
+    //         for (let i = 0; i < array.length; ++i) {
     //             array[i] = data.getFloat32(i * Float32Array.BYTES_PER_ELEMENT, true);
     //         }
     //         callback(array);

package/src/og/webgl/Multisample.js

@@ -1,7 +1,3 @@
-/**
- * @module og/webgl/Multisample
- */
-
 "use strict";
 
 /**
@@ -92,7 +88,7 @@ export class Multisample {
     destroy() {
         var gl = this.handler.gl;
 
-        for (var i = 0; i < this.renderbuffers.length; i++) {
+        for (let i = 0; i < this.renderbuffers.length; i++) {
             gl.deleteRenderbuffer(this.renderbuffers[i]);
         }
         this.renderbuffers = new Array(this._size);
@@ -120,7 +116,7 @@ export class Multisample {
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
 
         let colorAttachments = [];
-        for (var i = 0; i < this.renderbuffers.length; i++) {
+        for (let i = 0; i < this.renderbuffers.length; i++) {
             let rb = gl.createRenderbuffer();
             gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
 

package/src/og/webgl/Program.js

@@ -1,7 +1,3 @@
-/**
- * @module og/webgl/Program
- */
-
 "use strict";
 
 import { cons } from "../cons.js";
@@ -158,7 +154,7 @@ class Program {
      */
     set(material) {
         this._textureID = 0;
-        for (var i in material) {
+        for (let i in material) {
             this._variables[i].value = material[i];
             this._variables[i]._callback(this, this._variables[i]);
         }
@@ -171,7 +167,7 @@ class Program {
     apply() {
         this._textureID = 0;
         var v = this._variables;
-        for (var i in v) {
+        for (let i in v) {
             v[i]._callback(this, v[i]);
         }
     }
@@ -322,7 +318,7 @@ class Program {
 
         this.use();
 
-        for (var a in this._attributes) {
+        for (let a in this._attributes) {
             //this.attributes[a]._name = a;
             this._variables[a] = this._attributes[a];
 
@@ -375,7 +371,7 @@ class Program {
             this.attributes[a] = this._p[a];
         }
 
-        for (var u in this._uniforms) {
+        for (let u in this._uniforms) {
             //this.uniforms[u]._name = u;
 
             if (typeof this._uniforms[u].type === "string") {

package/src/og/webgl/ProgramController.js

@@ -1,8 +1,8 @@
+"use strict";
+
 import { Handler } from "./Handler.js";
 import { Program } from "./Program.js";
 
-"use strict";
-
 /**
  * This is shader program controller that used by hadler object to access the shader
  * program capabilities, like switching program during the rendering.

package/types/Clock.d.ts

@@ -5,7 +5,7 @@
  * @param {number} [params.startDate=0.0] - Julian start date.
  * @param {number} [params.endDate=0.0] - Julian end date.
  * @param {number} [params.currentDate] - Julian current date. Default: current date.
- * @param {number} [params.multiplier=1.0] - Time speed multiolier.
+ * @param {number} [params.multiplier=1.0] - Time speed multiplier.
  */
 export class Clock {
     static set _staticCounter(arg: any);

package/types/Extent.d.ts

@@ -1,8 +1,8 @@
 /**
  * Represents geographical coordinates extent.
  * @class
- * @param {LonLat} [sw] - South West extent corner coordiantes.
- * @param {LonLat} [ne] - North East extent corner coordiantes.
+ * @param {LonLat} [sw] - South West extent corner coordinates.
+ * @param {LonLat} [ne] - North East extent corner coordinates.
  */
 export class Extent {
     /**
@@ -35,7 +35,7 @@ export class Extent {
      */
     static createByCoordinates(arr: Array<LonLat>): Extent;
     /**
-     * Creates bound extent instance by coordinate array.
+     * Creates bound extent instance by coordinates array.
      * @static
      * @param {Array.<Array<number>>} arr - Coordinate array. (exactly 2 entries)
      * @return {Extent} Extent object.
@@ -53,8 +53,8 @@ export class Extent {
      */
     static fromTile(x: number, y: number, z: number, width: number, height: number): Extent;
     /**
-     * @param {LonLat} [sw] - South West extent corner coordiantes.
-     * @param {LonLat} [ne] - North East extent corner coordiantes.
+     * @param {LonLat} [sw] - South West extent corner coordinates.
+     * @param {LonLat} [ne] - North East extent corner coordinates.
      */
     constructor(sw?: LonLat, ne?: LonLat);
     /**

package/types/Globe.d.ts

@@ -45,16 +45,26 @@
  * @param {Number} [options.quadTreeStrategyPrototype] - Prototype of quadTree. QuadTreeStrategy for Earth is default.
  * @param {Number} [options.msaa] - MSAA antialiasing parameter: 2,4,8,16. Default is 4.
  * @param {Number} [options.dpi] - Device pixel ratio. Default is current screen DPI.
+ * @param {Boolean} [options.atmosphereEnabled] - Enables atmosphere effect.
  */
 export class Globe {
+    static set __staticCounter(arg: any);
+    static get __staticCounter(): any;
     static set _staticCounter(arg: any);
     static get _staticCounter(): any;
     /**
      * @param {*} options
      */
     constructor(options: any);
+    $target: any;
+    _instanceID: string;
     _canvas: HTMLCanvasElement;
-    div: any;
+    /**
+     * Dom element where WebGL canvas creates
+     * @public
+     * @type {Element}
+     */
+    public $inner: Element;
     /**
      * Interface for the renderer context(events, input states, renderer nodes etc.)
      * @public
@@ -78,6 +88,7 @@ export class Globe {
     _opacityCounter: number;
     _fadeHandler: any;
     _stopHandler: any;
+    start(): void;
     /**
      * Starts screen brightness fading in effect by the duration time.
      * @public
@@ -89,6 +100,9 @@ export class Globe {
      * @param {number} duration - Fadeout duration time.
      */
     public fadeOut(): void;
+    attachTo(target: any): void;
+    detach(): void;
+    destroy(): void;
 }
 import { Renderer } from "./renderer/Renderer.js";
 import { Planet } from "./scene/Planet.js";