@openglobus/og 0.17.1 → 0.18.0

package/src/{og/entity/GeoObjectHandler.js → entity/GeoObjectHandler.ts}

@@ -1,7 +1,11 @@
-"use strict";
-
-import * as shaders from "../shaders/geoObject.js";
-import { concatArrays, loadImage, makeArrayTyped, spliceArray } from "../utils/shared.js";
+import * as shaders from "../shaders/geoObject";
+import {concatArrays, loadImage, makeArrayTyped, spliceArray, TypedArray} from "../utils/shared";
+import {EntityCollection} from "./EntityCollection";
+import {GeoObject} from "./GeoObject";
+import {Planet} from "../scene/Planet";
+import {Vec3} from "../math/Vec3";
+import {Vec4} from "../math/Vec4";
+import {WebGLBufferExt, WebGLTextureExt} from "../webgl/Handler";
 
 const VERTEX_BUFFER = 0;
 const POSITION_BUFFER = 1;
@@ -15,24 +19,66 @@ const PICKINGCOLOR_BUFFER = 8;
 const VISIBLE_BUFFER = 9;
 const TEXCOORD_BUFFER = 10;
 
-const setParametersToArray = (arr = [], index = 0, length, itemSize, ...params) => {
+function setParametersToArray(arr: number[] | TypedArray, index: number = 0, length: number = 0, itemSize: number = 1, ...params: number[]): number[] | TypedArray {
     const currIndex = index * length;
     for (let i = currIndex, len = currIndex + length; i < len; i++) {
         arr[i] = params[i % itemSize];
     }
     return arr;
-};
+}
 
-const setParametersToArrayArr = (arr = [], index = 0, length, itemSize, paramsArr) => {
-    const currIndex = index * length;
-    for (let i = currIndex, len = currIndex + length; i < len; i++) {
-        arr[i] = paramsArr[i % itemSize];
-    }
-    return arr;
-};
+// function setParametersToArrayArr(arr: number[] | TypedArray, index: number = 0, length: number = 0, itemSize: number = 1, paramsArr: number[]): number[] | TypedArray {
+//     const currIndex = index * length;
+//     for (let i = currIndex, len = currIndex + length; i < len; i++) {
+//         arr[i] = paramsArr[i % itemSize];
+//     }
+//     return arr;
+// }
 
 class InstanceData {
-    constructor(geoObjectHandler) {
+
+    public isFree: boolean;
+
+    public _geoObjectHandler: GeoObjectHandler;
+
+    public geoObjects: GeoObject[];
+
+    public numInstances: number;
+
+    public _texture: WebGLTextureExt | null;
+    public _textureSrc: string | null;
+
+    public _pitchRollArr: number[] | TypedArray;
+    public _sizeArr: number[] | TypedArray;
+    public _vertexArr: number[] | TypedArray;
+    public _positionHighArr: number[] | TypedArray;
+    public _positionLowArr: number[] | TypedArray;
+    public _directionArr: number[] | TypedArray;
+    public _rgbaArr: number[] | TypedArray;
+    public _normalsArr: number[] | TypedArray;
+    public _indicesArr: number[] | TypedArray;
+    public _pickingColorArr: number[] | TypedArray;
+    public _visibleArr: number[] | TypedArray;
+    public _texCoordArr: number[] | TypedArray;
+
+    public _pitchRollBuffer: WebGLBufferExt | null;
+    public _sizeBuffer: WebGLBufferExt | null;
+    public _vertexBuffer: WebGLBufferExt | null;
+    public _positionHighBuffer: WebGLBufferExt | null;
+    public _positionLowBuffer: WebGLBufferExt | null;
+    public _directionBuffer: WebGLBufferExt | null;
+    public _rgbaBuffer: WebGLBufferExt | null;
+    public _normalsBuffer: WebGLBufferExt | null;
+    public _indicesBuffer: WebGLBufferExt | null;
+    public _pickingColorBuffer: WebGLBufferExt | null;
+    public _visibleBuffer: WebGLBufferExt | null;
+    public _texCoordBuffer: WebGLBufferExt | null;
+
+    public _buffersUpdateCallbacks: Function[];
+
+    public _changedBuffers: boolean[];
+
+    constructor(geoObjectHandler: GeoObjectHandler) {
 
         this.isFree = true;
 
@@ -87,13 +133,13 @@ class InstanceData {
         this._changedBuffers = new Array(this._buffersUpdateCallbacks.length);
     }
 
-    createTexture(image) {
+    public createTexture(image: HTMLCanvasElement | ImageBitmap | ImageData | HTMLImageElement) {
         if (this._geoObjectHandler && this._geoObjectHandler._planet) {
-            this._texture = this._geoObjectHandler._planet.renderer.handler.createTextureDefault(image);
+            this._texture = this._geoObjectHandler._planet.renderer!.handler.createTextureDefault(image);
         }
     }
 
-    clear() {
+    public clear() {
 
         this.numInstances = 0;
 
@@ -115,29 +161,32 @@ class InstanceData {
         this._deleteBuffers();
 
         this.isFree = false;
-        this._geoObjectHandler = null;
+
+        //this._geoObjectHandler = null;
     }
 
-    _deleteBuffers() {
+    public _deleteBuffers() {
+
         if (this._geoObjectHandler && this._geoObjectHandler._planet && this._geoObjectHandler._planet.renderer) {
+
             let h = this._geoObjectHandler._planet.renderer.handler,
-                gl = h.gl;
+                gl = h.gl!;
 
             h.deleteTexture(this._texture);
             this._texture = null;
 
-            gl.deleteBuffer(this._pitchRollBuffer);
-            gl.deleteBuffer(this._sizeBuffer);
-            gl.deleteBuffer(this._vertexBuffer);
-            gl.deleteBuffer(this._positionHighBuffer);
-            gl.deleteBuffer(this._positionLowBuffer);
-            gl.deleteBuffer(this._directionBuffer);
-            gl.deleteBuffer(this._rgbaBuffer);
-            gl.deleteBuffer(this._normalsBuffer);
-            gl.deleteBuffer(this._indicesBuffer);
-            gl.deleteBuffer(this._pickingColorBuffer);
-            gl.deleteBuffer(this._visibleBuffer);
-            gl.deleteBuffer(this._texCoordBuffer);
+            gl.deleteBuffer(this._pitchRollBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._sizeBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._vertexBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._positionHighBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._positionLowBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._directionBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._rgbaBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._normalsBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._indicesBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._pickingColorBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._visibleBuffer as WebGLBuffer);
+            gl.deleteBuffer(this._texCoordBuffer as WebGLBuffer);
         }
 
         this._pitchRollBuffer = null;
@@ -154,65 +203,71 @@ class InstanceData {
         this._texCoordBuffer = null;
     }
 
-    createVertexBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler;
-        h.gl.deleteBuffer(this._vertexBuffer);
+    public createVertexBuffer() {
+        const h = this._geoObjectHandler._planet!.renderer!.handler;
+        h.gl!.deleteBuffer(this._vertexBuffer!);
         this._vertexArr = makeArrayTyped(this._vertexArr);
-        this._vertexBuffer = h.createArrayBuffer(this._vertexArr, 3, this._vertexArr.length / 3);
+        this._vertexBuffer = h.createArrayBuffer(this._vertexArr as Float32Array, 3, this._vertexArr.length / 3);
     }
 
-    createPitchRollBuffer() {
-        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._pitchRollArr.length / 2;
+    public createPitchRollBuffer() {
+
+        let h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._pitchRollArr.length / 2;
 
         if (!this._pitchRollBuffer || this._pitchRollBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._pitchRollBuffer);
+            h.gl!.deleteBuffer(this._pitchRollBuffer!);
             this._pitchRollBuffer = h.createStreamArrayBuffer(2, numItems);
         }
 
         this._pitchRollArr = makeArrayTyped(this._pitchRollArr);
 
-        h.setStreamArrayBuffer(this._pitchRollBuffer, this._pitchRollArr);
+        h.setStreamArrayBuffer(this._pitchRollBuffer, this._pitchRollArr as Float32Array);
     }
 
-    createVisibleBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler, numItems = this._visibleArr.length;
+    public createVisibleBuffer() {
+
+        const h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._visibleArr.length;
 
         if (!this._visibleBuffer || this._visibleBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._visibleBuffer);
+            h.gl!.deleteBuffer(this._visibleBuffer!);
             this._visibleBuffer = h.createStreamArrayBuffer(1, numItems);
         }
 
         this._visibleArr = makeArrayTyped(this._visibleArr);
 
-        h.setStreamArrayBuffer(this._visibleBuffer, this._visibleArr);
+        h.setStreamArrayBuffer(this._visibleBuffer, this._visibleArr as Uint8Array);
     }
 
-    createSizeBuffer() {
-        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._sizeArr.length;
+    public createSizeBuffer() {
+        let h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._sizeArr.length;
 
         if (!this._sizeBuffer || this._sizeBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._sizeBuffer);
+            h.gl!.deleteBuffer(this._sizeBuffer as WebGLBuffer);
             this._sizeBuffer = h.createStreamArrayBuffer(1, numItems);
         }
 
         this._sizeArr = makeArrayTyped(this._sizeArr);
 
-        h.setStreamArrayBuffer(this._sizeBuffer, this._sizeArr);
+        h.setStreamArrayBuffer(this._sizeBuffer, this._sizeArr as Float32Array);
     }
 
-    createTexCoordBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler;
-        h.gl.deleteBuffer(this._texCoordBuffer);
+    public createTexCoordBuffer() {
+        const h = this._geoObjectHandler._planet!.renderer!.handler;
+        h.gl!.deleteBuffer(this._texCoordBuffer as WebGLBuffer);
         this._texCoordArr = makeArrayTyped(this._texCoordArr);
-        this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr, 2, this._texCoordArr.length / 2);
+        this._texCoordBuffer = h.createArrayBuffer(this._texCoordArr as Uint8Array, 2, this._texCoordArr.length / 2);
     }
 
-    createPositionBuffer() {
-        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._positionHighArr.length / 3;
+    public createPositionBuffer() {
+        let h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._positionHighArr.length / 3;
 
         if (!this._positionHighBuffer || this._positionHighBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._positionHighBuffer);
-            h.gl.deleteBuffer(this._positionLowBuffer);
+            h.gl!.deleteBuffer(this._positionHighBuffer as WebGLBuffer);
+            h.gl!.deleteBuffer(this._positionLowBuffer as WebGLBuffer);
             this._positionHighBuffer = h.createStreamArrayBuffer(3, numItems);
             this._positionLowBuffer = h.createStreamArrayBuffer(3, numItems);
         }
@@ -220,65 +275,67 @@ class InstanceData {
         this._positionHighArr = makeArrayTyped(this._positionHighArr);
         this._positionLowArr = makeArrayTyped(this._positionLowArr);
 
-        h.setStreamArrayBuffer(this._positionHighBuffer, this._positionHighArr);
-        h.setStreamArrayBuffer(this._positionLowBuffer, this._positionLowArr);
+        h.setStreamArrayBuffer(this._positionHighBuffer!, this._positionHighArr as Float32Array);
+        h.setStreamArrayBuffer(this._positionLowBuffer!, this._positionLowArr as Float32Array);
     }
 
-    createRgbaBuffer() {
-        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._rgbaArr.length / 4;
+    public createRgbaBuffer() {
+        let h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._rgbaArr.length / 4;
 
         if (!this._rgbaBuffer || this._rgbaBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._rgbaBuffer);
+            h.gl!.deleteBuffer(this._rgbaBuffer as WebGLBuffer);
             this._rgbaBuffer = h.createStreamArrayBuffer(4, numItems);
         }
 
         this._rgbaArr = makeArrayTyped(this._rgbaArr);
 
-        h.setStreamArrayBuffer(this._rgbaBuffer, this._rgbaArr);
+        h.setStreamArrayBuffer(this._rgbaBuffer, this._rgbaArr as Uint8Array);
     }
 
-    createDirectionBuffer() {
-        let h = this._geoObjectHandler._planet.renderer.handler, numItems = this._directionArr.length / 3;
+    public createDirectionBuffer() {
+        let h = this._geoObjectHandler._planet!.renderer!.handler,
+            numItems = this._directionArr.length / 3;
 
         if (!this._directionBuffer || this._directionBuffer.numItems !== numItems) {
-            h.gl.deleteBuffer(this._directionBuffer);
+            h.gl!.deleteBuffer(this._directionBuffer as WebGLBuffer);
             this._directionBuffer = h.createStreamArrayBuffer(3, numItems);
         }
 
         this._directionArr = makeArrayTyped(this._directionArr);
 
-        h.setStreamArrayBuffer(this._directionBuffer, this._directionArr);
+        h.setStreamArrayBuffer(this._directionBuffer, this._directionArr as Float32Array);
     }
 
-    createNormalsBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler;
-        h.gl.deleteBuffer(this._normalsBuffer);
+    public createNormalsBuffer() {
+        const h = this._geoObjectHandler._planet!.renderer!.handler;
+        h.gl!.deleteBuffer(this._normalsBuffer as WebGLBuffer);
         this._normalsArr = makeArrayTyped(this._normalsArr);
-        this._normalsBuffer = h.createArrayBuffer(this._normalsArr, 3, this._normalsArr.length / 3);
+        this._normalsBuffer = h.createArrayBuffer(this._normalsArr as Uint8Array, 3, this._normalsArr.length / 3);
     }
 
-    createIndicesBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler;
-        h.gl.deleteBuffer(this._indicesBuffer);
+    public createIndicesBuffer() {
+        const h = this._geoObjectHandler._planet!.renderer!.handler;
+        h.gl!.deleteBuffer(this._indicesBuffer as WebGLBuffer);
         this._indicesArr = makeArrayTyped(this._indicesArr, Uint32Array);
-        this._indicesBuffer = h.createElementArrayBuffer(this._indicesArr, 1, this._indicesArr.length);
+        this._indicesBuffer = h.createElementArrayBuffer(this._indicesArr as Uint32Array, 1, this._indicesArr.length);
     }
 
-    createPickingColorBuffer() {
-        const h = this._geoObjectHandler._planet.renderer.handler;
-        h.gl.deleteBuffer(this._pickingColorBuffer);
+    public createPickingColorBuffer() {
+        const h = this._geoObjectHandler._planet!.renderer!.handler;
+        h.gl!.deleteBuffer(this._pickingColorBuffer as WebGLBuffer);
         this._pickingColorArr = makeArrayTyped(this._pickingColorArr);
-        this._pickingColorBuffer = h.createArrayBuffer(this._pickingColorArr, 3, this._pickingColorArr.length / 3);
+        this._pickingColorBuffer = h.createArrayBuffer(this._pickingColorArr as Uint8Array, 3, this._pickingColorArr.length / 3);
     }
 
-    refresh() {
+    public refresh() {
         let i = this._changedBuffers.length;
         while (i--) {
             this._changedBuffers[i] = true;
         }
     }
 
-    update() {
+    public update() {
         if (this._geoObjectHandler._planet) {
             let i = this._changedBuffers.length;
             while (i--) {
@@ -293,15 +350,31 @@ class InstanceData {
 }
 
 class GeoObjectHandler {
-    constructor(entityCollection) {
+    static __counter__ = 0;
+
+    protected __id: number;
+
+    /**
+     * Picking rendering option.
+     * @public
+     * @type {boolean}
+     */
+    public pickingEnabled: boolean;
 
-        this.__staticId = GeoObjectHandler._staticCounter++;
+    protected _entityCollection: EntityCollection;
+
+    public _planet: Planet | null;
+
+    protected _geoObjects: GeoObject[];
+
+    protected _instanceDataMap: Map<string, InstanceData>;
+    protected _instanceDataMapValues: InstanceData[];
+    protected _dataTagUpdateQueue: InstanceData[];
+
+    constructor(entityCollection: EntityCollection) {
+
+        this.__id = GeoObjectHandler.__counter__++;
 
-        /**
-         * Picking rendering option.
-         * @public
-         * @type {boolean}
-         */
         this.pickingEnabled = true;
 
         this._entityCollection = entityCollection;
@@ -310,27 +383,13 @@ class GeoObjectHandler {
 
         this._geoObjects = [];
 
-        this._instanceDataMap = new Map();
+        this._instanceDataMap = new Map<string, InstanceData>();
         this._instanceDataMapValues = [];
 
-
         this._dataTagUpdateQueue = [];
     }
 
-    //Create buffers
-
-    static get _staticCounter() {
-        if (!this._counter && this._counter !== 0) {
-            this._counter = 0;
-        }
-        return this._counter;
-    }
-
-    static set _staticCounter(n) {
-        this._counter = n;
-    }
-
-    initProgram() {
+    public initProgram() {
         if (this._planet && this._planet.renderer) {
             if (!this._planet.renderer.handler.programs.geo_object) {
                 this._planet.renderer.handler.addProgram(shaders.geo_object());
@@ -341,8 +400,10 @@ class GeoObjectHandler {
         }
     }
 
-    setRenderNode(renderNode) {
+    public setRenderNode(renderNode: Planet) {
+
         this._planet = renderNode;
+
         this.initProgram();
 
         //
@@ -358,7 +419,7 @@ class GeoObjectHandler {
         this.update();
     }
 
-    _addGeoObjectToArray(geoObject) {
+    protected _addGeoObjectToArray(geoObject: GeoObject) {
         const tag = geoObject.tag;
 
         let tagData = this._instanceDataMap.get(tag);
@@ -385,9 +446,13 @@ class GeoObjectHandler {
 
         let itemSize = 3;
 
-        tagData._visibleArr = concatArrays(tagData._visibleArr, setParametersToArray([], 0, 1, 1, geoObject._visibility ? 1 : 0));
+        tagData._visibleArr = concatArrays(tagData._visibleArr, setParametersToArray([], 0, 1, 1, geoObject.getVisibility() ? 1 : 0));
+
+        let x = geoObject._positionHigh.x,
+            y = geoObject._positionHigh.y,
+            z = geoObject._positionHigh.z,
+            w;
 
-        let x = geoObject._positionHigh.x, y = geoObject._positionHigh.y, z = geoObject._positionHigh.z, w;
         tagData._positionHighArr = concatArrays(tagData._positionHighArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
         x = geoObject._positionLow.x;
@@ -395,9 +460,9 @@ class GeoObjectHandler {
         z = geoObject._positionLow.z;
         tagData._positionLowArr = concatArrays(tagData._positionLowArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
-        x = geoObject._entity._pickingColor.x / 255;
-        y = geoObject._entity._pickingColor.y / 255;
-        z = geoObject._entity._pickingColor.z / 255;
+        x = geoObject._entity!._pickingColor.x / 255;
+        y = geoObject._entity!._pickingColor.y / 255;
+        z = geoObject._entity!._pickingColor.z / 255;
         tagData._pickingColorArr = concatArrays(tagData._pickingColorArr, setParametersToArray([], 0, itemSize, itemSize, x, y, z));
 
         x = geoObject._direction.x;
@@ -415,18 +480,23 @@ class GeoObjectHandler {
 
         itemSize = 2;
 
-        x = geoObject._pitch;
-        y = geoObject._roll;
+        x = geoObject.getPitch();
+        y = geoObject.getRoll();
         tagData._pitchRollArr = concatArrays(tagData._pitchRollArr, setParametersToArray([], 0, itemSize, itemSize, x, y));
 
         itemSize = 1;
 
-        tagData._sizeArr = concatArrays(tagData._sizeArr, setParametersToArray([], 0, itemSize, itemSize, geoObject._scale));
+        tagData._sizeArr = concatArrays(tagData._sizeArr, setParametersToArray([], 0, itemSize, itemSize, geoObject.getScale()));
     }
 
-    _displayPASS() {
-        let r = this._planet.renderer, sh = r.handler.programs.geo_object, p = sh._program, u = p.uniforms,
-            a = p.attributes, gl = r.handler.gl, ec = this._entityCollection;
+    public _displayPASS() {
+        let r = this._planet!.renderer!,
+            sh = r.handler.programs.geo_object,
+            p = sh._program,
+            u = p.uniforms,
+            a = p.attributes,
+            gl = r.handler.gl!,
+            ec = this._entityCollection;
 
         sh.activate();
 
@@ -435,15 +505,15 @@ class GeoObjectHandler {
         //
         gl.uniform3fv(u.uScaleByDistance, ec.scaleByDistance);
 
-        gl.uniform3fv(u.eyePositionHigh, r.activeCamera.eyeHigh);
-        gl.uniform3fv(u.eyePositionLow, r.activeCamera.eyeLow);
+        gl.uniform3fv(u.eyePositionHigh, r.activeCamera!.eyeHigh);
+        gl.uniform3fv(u.eyePositionLow, r.activeCamera!.eyeLow);
 
-        gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
-        gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera.getViewMatrix());
+        gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera!.getProjectionMatrix());
+        gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera!.getViewMatrix());
 
-        gl.uniform3fv(u.lightsPositions, this._planet._lightsPositions);
-        gl.uniform3fv(u.lightsParamsv, this._planet._lightsParamsv);
-        gl.uniform1fv(u.lightsParamsf, this._planet._lightsParamsf);
+        gl.uniform3fv(u.lightsPositions, this._planet!._lightsPositions);
+        gl.uniform3fv(u.lightsParamsv, this._planet!._lightsParamsv);
+        gl.uniform1fv(u.lightsParamsf, this._planet!._lightsParamsf);
 
         for (let i = 0; i < this._instanceDataMapValues.length; i++) {
             let tagData = this._instanceDataMapValues[i];
@@ -451,64 +521,64 @@ class GeoObjectHandler {
             //
             //  Instance individual data
             //
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer);
-            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer!);
+            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer);
-            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer!);
+            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer);
-            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer!);
+            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._rgbaBuffer);
-            gl.vertexAttribPointer(a.aColor, tagData._rgbaBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._rgbaBuffer!);
+            gl.vertexAttribPointer(a.aColor, tagData._rgbaBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer);
-            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer!);
+            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
             gl.uniform1f(u.uUseTexture, tagData._texture ? 1 : 0);
 
             //
             // Instance common data(could be in VAO)
             //
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer);
-            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer!);
+            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer);
-            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer!);
+            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._normalsBuffer);
-            gl.vertexAttribPointer(a.aVertexNormal, tagData._normalsBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._normalsBuffer!);
+            gl.vertexAttribPointer(a.aVertexNormal, tagData._normalsBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer);
-            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer!);
+            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
             gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, tagData._texture || r.handler.defaultTexture);
+            gl.bindTexture(gl.TEXTURE_2D, (tagData._texture || r.handler.defaultTexture)!);
             gl.uniform1i(u.uTexture, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._texCoordBuffer);
-            gl.vertexAttribPointer(a.aTexCoord, tagData._texCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._texCoordBuffer!);
+            gl.vertexAttribPointer(a.aTexCoord, tagData._texCoordBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer);
-            p.drawElementsInstanced(gl.TRIANGLES, tagData._indicesBuffer.numItems, gl.UNSIGNED_INT, 0, tagData.numInstances);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer!);
+            p.drawElementsInstanced!(gl.TRIANGLES, tagData._indicesBuffer!.numItems, gl.UNSIGNED_INT, 0, tagData.numInstances);
         }
     }
 
-    drawPicking() {
+    public drawPicking() {
         if (this._geoObjects.length && this.pickingEnabled) {
             this.update();
             this._pickingPASS();
         }
     }
 
-    _pickingPASS() {
-        let r = this._planet.renderer,
+    protected _pickingPASS() {
+        let r = this._planet!.renderer!,
             sh = r.handler.programs.geo_object_picking,
             p = sh._program,
             u = p.uniforms,
             a = p.attributes,
-            gl = r.handler.gl,
+            gl = r.handler.gl!,
             ec = this._entityCollection;
 
         sh.activate();
@@ -517,11 +587,11 @@ class GeoObjectHandler {
 
         gl.uniform1f(u.pickingScale, ec.pickingScale);
 
-        gl.uniform3fv(u.eyePositionHigh, r.activeCamera.eyeHigh);
-        gl.uniform3fv(u.eyePositionLow, r.activeCamera.eyeLow);
+        gl.uniform3fv(u.eyePositionHigh, r.activeCamera!.eyeHigh);
+        gl.uniform3fv(u.eyePositionLow, r.activeCamera!.eyeLow);
 
-        gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera.getProjectionMatrix());
-        gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera.getViewMatrix());
+        gl.uniformMatrix4fv(u.projectionMatrix, false, r.activeCamera!.getProjectionMatrix());
+        gl.uniformMatrix4fv(u.viewMatrix, false, r.activeCamera!.getViewMatrix());
 
         for (let i = 0; i < this._instanceDataMapValues.length; i++) {
             let tagData = this._instanceDataMapValues[i];
@@ -529,71 +599,71 @@ class GeoObjectHandler {
             //
             // Instance individual data
             //
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer);
-            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._directionBuffer!);
+            gl.vertexAttribPointer(a.aDirection, tagData._directionBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer);
-            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._sizeBuffer!);
+            gl.vertexAttribPointer(a.aScale, tagData._sizeBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer);
-            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pitchRollBuffer!);
+            gl.vertexAttribPointer(a.aPitchRoll, tagData._pitchRollBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pickingColorBuffer);
-            gl.vertexAttribPointer(a.aPickingColor, tagData._pickingColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._pickingColorBuffer!);
+            gl.vertexAttribPointer(a.aPickingColor, tagData._pickingColorBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer);
-            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionHighBuffer!);
+            gl.vertexAttribPointer(a.aPositionHigh, tagData._positionHighBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer);
-            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._positionLowBuffer!);
+            gl.vertexAttribPointer(a.aPositionLow, tagData._positionLowBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer);
-            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._visibleBuffer!);
+            gl.vertexAttribPointer(a.aDispose, tagData._visibleBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
             //
             // Instance common data(could be in VAO)
             //
-            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer);
-            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, tagData._vertexBuffer!);
+            gl.vertexAttribPointer(a.aVertexPosition, tagData._vertexBuffer!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer);
-            p.drawElementsInstanced(gl.TRIANGLES, tagData._indicesBuffer.numItems, gl.UNSIGNED_INT, 0, tagData.numInstances);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, tagData._indicesBuffer!);
+            p.drawElementsInstanced!(gl.TRIANGLES, tagData._indicesBuffer!.numItems, gl.UNSIGNED_INT, 0, tagData.numInstances);
         }
     }
 
-    async _loadDataTagTexture(tagData) {
+    async _loadDataTagTexture(tagData: InstanceData) {
         if (this._planet && tagData._textureSrc) {
             const image = await loadImage(tagData._textureSrc);
             tagData.createTexture(image);
         }
     }
 
-    setDirectionArr(tagData, tagDataIndex, direction) {
+    public setDirectionArr(tagData: InstanceData, tagDataIndex: number, direction: Vec3) {
         setParametersToArray(tagData._directionArr, tagDataIndex, 3, 3, direction.x, direction.y, direction.z);
         tagData._changedBuffers[DIRECTION_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    setVisibility(tagData, tagDataIndex, visibility) {
+    public setVisibility(tagData: InstanceData, tagDataIndex: number, visibility: boolean) {
         setParametersToArray(tagData._visibleArr, tagDataIndex, 1, 1, visibility ? 1 : 0);
         tagData._changedBuffers[VISIBLE_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    setPositionArr(tagData, tagDataIndex, positionHigh, positionLow) {
+    public setPositionArr(tagData: InstanceData, tagDataIndex: number, positionHigh: Vec3, positionLow: Vec3) {
         setParametersToArray(tagData._positionHighArr, tagDataIndex, 3, 3, positionHigh.x, positionHigh.y, positionHigh.z);
         setParametersToArray(tagData._positionLowArr, tagDataIndex, 3, 3, positionLow.x, positionLow.y, positionLow.z);
         tagData._changedBuffers[POSITION_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    setRgbaArr(tagData, tagDataIndex, rgba) {
+    public setRgbaArr(tagData: InstanceData, tagDataIndex: number, rgba: Vec4) {
         setParametersToArray(tagData._rgbaArr, tagDataIndex, 4, 4, rgba.x, rgba.y, rgba.z, rgba.w);
         tagData._changedBuffers[RGBA_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    setPickingColorArr(tagData, tagDataIndex, color) {
+    public setPickingColorArr(tagData: InstanceData, tagDataIndex: number, color: Vec3) {
         setParametersToArray(tagData._pickingColorArr, tagDataIndex, 3, 3, color.x / 255, color.y / 255, color.z / 255);
         tagData._changedBuffers[PICKINGCOLOR_BUFFER] = true;
         this._updateTag(tagData);
@@ -605,42 +675,42 @@ class GeoObjectHandler {
     //     this._updateTag(tagData);
     // }
 
-    setPitchRollArr(tagData, tagDataIndex, pitch, roll) {
+    public setPitchRollArr(tagData: InstanceData, tagDataIndex: number, pitch: number, roll: number) {
         setParametersToArray(tagData._pitchRollArr, tagDataIndex, 2, 2, pitch, roll);
         tagData._changedBuffers[PITCH_ROLL_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    setScaleArr(tagData, tagDataIndex, scale) {
+    public setScaleArr(tagData: InstanceData, tagDataIndex: number, scale: number) {
         setParametersToArray(tagData._sizeArr, tagDataIndex, 1, 1, scale);
         tagData._changedBuffers[SIZE_BUFFER] = true;
         this._updateTag(tagData);
     }
 
-    _updateTag(dataTag) {
+    protected _updateTag(dataTag: InstanceData) {
         if (dataTag.isFree) {
             dataTag.isFree = false;
             this._dataTagUpdateQueue.push(dataTag);
         }
     }
 
-    update() {
+    public update() {
         for (let i = 0, len = this._dataTagUpdateQueue.length; i < len; i++) {
             this._dataTagUpdateQueue[i].update();
         }
         this._dataTagUpdateQueue = [];
     }
 
-    _removeAll() {
+    public _removeAll() {
         let i = this._geoObjects.length;
         while (i--) {
             const gi = this._geoObjects[i];
 
             gi._tagDataIndex = -1;
-            gi._tagData = undefined;
+            gi._tagData = null;
 
             gi._handlerIndex = -1;
-            gi._handler = undefined;
+            gi._handler = null;
         }
         this._geoObjects.length = 0;
         this._geoObjects = [];
@@ -653,18 +723,19 @@ class GeoObjectHandler {
         this._instanceDataMapValues = [];
     }
 
-    clear() {
+    public clear() {
         this._removeAll();
     }
 
-    draw() {
+    public draw() {
         if (this._geoObjects.length) {
             this.update();
             this._displayPASS();
         }
     }
 
-    add(geoObject) {
+    public add(geoObject: GeoObject) {
+
         if (geoObject._handlerIndex === -1) {
 
             geoObject._handler = this;
@@ -673,25 +744,28 @@ class GeoObjectHandler {
             this._geoObjects.push(geoObject);
             this._addGeoObjectToArray(geoObject);
 
-            geoObject._tagData.refresh();
-            this._updateTag(geoObject._tagData);
+            geoObject.updateDirection();
+
+            geoObject._tagData!.refresh();
+
+            this._updateTag(geoObject._tagData!);
         }
     }
 
-    remove(geoObject) {
-        if (geoObject._handler && this.__staticId == geoObject._handler.__staticId) {
+    public remove(geoObject: GeoObject) {
+        if (geoObject._handler && this.__id == geoObject._handler.__id) {
             this._removeGeoObject(geoObject);
         }
     }
 
-    _clearDataTagQueue() {
+    public _clearDataTagQueue() {
         this._dataTagUpdateQueue = [];
     }
 
 
-    _removeGeoObject(geoObject) {
+    public _removeGeoObject(geoObject: GeoObject) {
 
-        let tagData = geoObject._tagData;
+        let tagData = geoObject._tagData!;
         let tag = geoObject.tag;
 
         tagData.numInstances--;
@@ -714,6 +788,7 @@ class GeoObjectHandler {
 
         let tdi = geoObject._tagDataIndex;
         tagData.geoObjects.splice(tdi, 1);
+
         for (let i = geoObject._tagDataIndex, len = tagData.geoObjects.length; i < len; i++) {
             let gi = tagData.geoObjects[i];
             gi._tagDataIndex = gi._tagDataIndex - 1;
@@ -729,10 +804,10 @@ class GeoObjectHandler {
         tagData._visibleArr = spliceArray(tagData._visibleArr, tdi, 1);
 
         geoObject._handlerIndex = -1;
-        geoObject._handler = undefined;
+        geoObject._handler = null;
 
         geoObject._tagDataIndex = -1;
-        geoObject._tagData = undefined;
+        geoObject._tagData = null;
 
         if (!isEmpty) {
             tagData.refresh();
@@ -741,4 +816,4 @@ class GeoObjectHandler {
     }
 }
 
-export { GeoObjectHandler };
+export {GeoObjectHandler, InstanceData};