@openglobus/og 0.17.2 → 0.18.0

package/src/{og/segment/Segment.js → segment/Segment.ts}

@@ -1,25 +1,33 @@
-"use strict";
-
-import { Box } from "../bv/Box.js";
-import { Sphere } from "../bv/Sphere.js";
-import { Extent } from "../Extent.js";
-import { Layer } from "../layer/Layer.js";
-import { LonLat } from "../LonLat.js";
-import { Ray } from "../math/Ray.js";
-import { Vec3 } from "../math/Vec3.js";
-import * as mercator from "../mercator.js";
-import { EPSG3857 } from "../proj/EPSG3857.js";
-import { E, N, NOTRENDERING, OPSIDE, S, W } from "../quadTree/quadTree.js";
-import * as segmentHelper from "../segment/segmentHelper.js";
-import { getMatrixSubArray } from "../utils/shared.js";
-import { Slice } from "./Slice.js";
+import * as mercator from "../mercator";
+import * as segmentHelper from "../segment/segmentHelper";
+import {Box} from "../bv/Box";
+import {Extent} from "../Extent";
+import {Entity} from "../entity/Entity";
+import {EPSG3857} from "../proj/EPSG3857";
+import {E, N, NOTRENDERING, OPSIDE, S, W} from "../quadTree/quadTree";
+import {getMatrixSubArray64, TypedArray} from "../utils/shared";
+import {Handler, WebGLBufferExt, WebGLTextureExt} from "../webgl/Handler";
+import {ITerrainWorkerData} from "../utils/TerrainWorker";
+import {Layer} from "../layer/Layer";
+import {LonLat} from "../LonLat";
+import {Material} from "../layer/Material";
+import {Node} from "../quadTree/Node";
+import {Planet} from "../scene/Planet";
+import {PlanetCamera} from "../camera/PlanetCamera";
+import {Program} from "../webgl/Program";
+import {Proj} from "../proj/Proj";
+import {NumberArray6, Sphere} from "../bv/Sphere";
+import {Slice} from "./Slice";
+import {Ray} from "../math/Ray";
+import {Vec3} from "../math/Vec3";
+import {IPlainSegmentWorkerData} from "../utils/PlainSegmentWorker";
 
 export const TILEGROUP_COMMON = 0;
 export const TILEGROUP_NORTH = 1;
 export const TILEGROUP_SOUTH = 2;
 
-var _tempHigh = new Vec3();
-var _tempLow = new Vec3();
+let _tempHigh = new Vec3();
+let _tempLow = new Vec3();
 
 let _v0 = new Vec3(),
     _v1 = new Vec3(),
@@ -29,8 +37,6 @@ let _v0 = new Vec3(),
 let _ray = new Ray(),
     _rayEx = new Ray();
 
-window.ELLNORM = false;
-
 const _S = new Array(4);
 _S[N] = 0;
 _S[E] = 1;
@@ -44,57 +50,218 @@ _V[S] = false;
 _V[W] = true;
 
 /**
- * Planet segment Web Mercator tile class that stored and rendered with quad tree.
+ * Planet segment Web Mercator tile class that stored and rendered with a quad-tree.
  * @class
- * @param {quadTree.Node} node - Segment node.
- * @param {Planet} planet - Current planet scene.
- * @param {Number} tileZoom - Zoom index.
+ * @param {Node} node - Segment node.
+ * @param {Planet} planet - Planet scene.
+ * @param {number} tileZoom - Zoom index.
  * @param {Extent} extent - Segment extent.
  */
 class Segment {
+
+    public _isNorth?: boolean;
+
+    public isPole: boolean;
+
+    public _tileGroup: number;
+
+    public _projection: Proj;
+
+    /**
+     * Quad tree node of the segment.
+     * @type {Node}
+     */
+    public node: Node;
+
+    /**
+     * Planet pointer.
+     * @type {Planet}
+     */
+    public planet: Planet;
+
+    /**
+     * WebGl handler pointer.
+     * @type {Handler}
+     */
+    public handler: Handler;
+
+    /**
+     * Segment bounding sphere
+     * @type {Sphere}
+     */
+    public bsphere: Sphere;
+
+    public _plainRadius: number;
+
+    /**
+     * Segment bounding box.
+     * @type {Box}
+     */
+    public bbox: Box;
+
+    public _sw: Vec3;
+    public _nw: Vec3;
+    public _se: Vec3;
+    public _ne: Vec3;
+
+    public centerNormal: Vec3;
+
     /**
-     * @param {quadTree.Node} node - Segment node.
-     * @param {Planet} planet - Current planet scene.
-     * @param {number} tileZoom - Zoom index.
-     * @param {Extent} extent - Segment extent.
+     * Geographical extent.
+     * @type {Extent}
      */
-    constructor(node, planet, tileZoom, extent) {
+    public _extent: Extent;
+
+    public _extentMerc: Extent;
+
+    public _extentLonLat: Extent;
+
+    /**
+     * Vertices grid size.
+     * @type {number}
+     */
+    public gridSize: number;
+
+    public fileGridSize: number;
+
+    /**
+     * Tile zoom index.
+     * @type {number}
+     */
+    public tileZoom: number;
+
+    /**
+     * Horizontal tile index.
+     * @type {number}
+     */
+    public tileX: number;
+
+    public tileXE: number;
+
+    public tileXW: number;
+
+    public tileYN: number;
+
+    public tileYS: number;
+
+    /**
+     * Vertical tile index.
+     * @type {number}
+     */
+    public tileY: number;
+
+    public tileIndex: string;
+
+    /**
+     * Texture materials array.
+     * @type {Array.<Material>}
+     *
+     * @toso: Check it should be Map<number, Material> instead of array
+     *
+     */
+    public materials: Material[];
+
+    /**
+     * Plain segment vertices was created.
+     * @type {boolean}
+     */
+    public plainReady: boolean;
+
+    /**
+     * Segment is ready to create plain vertices.
+     * @type {boolean}
+     */
+    public initialized: boolean;
+
+    /**
+     * Normal map is allready made.
+     * @type {boolean}
+     */
+    public normalMapReady: boolean;
+
+    /**
+     * Terrain is allready applied flag.
+     * @type {boolean}
+     */
+    public terrainReady: boolean;
+
+    /**
+     * Terrain is loading now flag.
+     * @type {boolean}
+     */
+    public terrainIsLoading: boolean;
+
+    /**
+     * Terrain existing flag.
+     * @type {boolean}
+     */
+    public terrainExists: boolean;
+
+    /**
+     * Means that tree passage reach the segment, and the segment terrain is ready.
+     * @type {boolean}
+     */
+    public passReady: boolean;
+
+    public plainVertices: Float64Array | null;
+    public plainVerticesHigh: Float32Array | null;
+    public plainVerticesLow: Float32Array | null;
+
+    public plainNormals: Float32Array | null;
+
+    public terrainVertices: Float64Array | null;
+    public terrainVerticesHigh: Float32Array | null;
+    public terrainVerticesLow: Float32Array | null;
+    public noDataVertices: Uint8Array | null;
+
+    public tempVertices: Float64Array | null;
+    public tempVerticesHigh: Float32Array | null;
+    public tempVerticesLow: Float32Array | null;
+
+    public normalMapTexture: WebGLTextureExt | null;
+    public normalMapTextureBias: Float32Array;
+    public normalMapVertices: Float64Array | null;
+    public normalMapVerticesHigh: Float32Array | null;
+    public normalMapVerticesLow: Float32Array | null;
+    public normalMapNormals: Float32Array | null;
+
+    public vertexNormalBuffer: WebGLBufferExt | null;
+    public vertexPositionBuffer: WebGLBufferExt | null;
+    public vertexPositionBufferHigh: WebGLBufferExt | null;
+    public vertexPositionBufferLow: WebGLBufferExt | null;
+    public vertexTextureCoordBuffer: WebGLBufferExt | null;
+
+    public _globalTextureCoordinates: Float32Array;
+    public _inTheQueue: boolean;
+    public _appliedNeighborsZoom: [number, number, number, number];
+
+    public _slices: Slice[];
+
+    public _indexBuffer: WebGLBufferExt | null;
+
+    public readyToEngage: boolean;
+
+    public plainProcessing: boolean;
+
+    public normalMapTexturePtr: WebGLTextureExt | null;
+
+    constructor(node: Node, planet: Planet, tileZoom: number, extent: Extent) {
         this.isPole = false;
 
         this._tileGroup = TILEGROUP_COMMON;
 
         this._projection = EPSG3857;
 
-        /**
-         * Quad tree node of the segment.
-         * @type {quadTree.Node}
-         */
         this.node = node;
 
-        /**
-         * Planet pointer.
-         * @type {Planet}
-         */
         this.planet = planet;
 
-        /**
-         * WebGl handler pointer.
-         * @type {Handler}
-         */
-        this.handler = planet.renderer.handler;
+        this.handler = planet.renderer!.handler;
 
-        /**
-         * Segment bounding sphere
-         * @type {Sphere}
-         */
         this.bsphere = new Sphere();
 
         this._plainRadius = 0;
 
-        /**
-         * Segment bounding box.
-         * @type {Box}
-         */
         this.bbox = new Box();
 
         this._sw = new Vec3();
@@ -104,32 +271,16 @@ class Segment {
 
         this.centerNormal = new Vec3();
 
-        /**
-         * Geographical extent.
-         * @type {Extent}
-         */
-        this._extent = extent;
+        this._extent = this._extentMerc = extent;
 
-        this._extentLonLat = null;
+        this._extentLonLat = new Extent();
 
-        /**
-         * Vertices grid size.
-         * @type {number}
-         */
-        this.gridSize = planet.terrain.gridSizeByZoom[tileZoom];
+        this.gridSize = planet.terrain!.gridSizeByZoom[tileZoom];
 
         this.fileGridSize = 0;
 
-        /**
-         * Tile zoom index.
-         * @type {number}
-         */
         this.tileZoom = tileZoom;
 
-        /**
-         * Horizontal tile index.
-         * @type {number}
-         */
         this.tileX = 0;
 
         this.tileXE = 0;
@@ -140,10 +291,6 @@ class Segment {
 
         this.tileYS = 0;
 
-        /**
-         * Vertical tile index.
-         * @type {number}
-         */
         this.tileY = 0;
 
         this.tileIndex = "";
@@ -151,51 +298,22 @@ class Segment {
         this._assignTileIndexes();
 
         /**
-         * Texture materials array.
-         * @type {Array.<planetSegment.Material>}
+         * @toso: Check it should be Map<number, Material> instead of array
          */
         this.materials = [];
 
-        /**
-         * Plain segment vertices was created.
-         * @type {boolean}
-         */
         this.plainReady = false;
 
-        /**
-         * Segment is ready to create plain vertices.
-         * @type {boolean}
-         */
         this.initialized = false;
 
-        /**
-         * Normal map is allready made.
-         * @type {boolean}
-         */
         this.normalMapReady = false;
 
-        /**
-         * Terrain is allready applied flag.
-         * @type {boolean}
-         */
         this.terrainReady = false;
 
-        /**
-         * Terrain is loading now flag.
-         * @type {boolean}
-         */
         this.terrainIsLoading = false;
 
-        /**
-         * Terrain existing flag.
-         * @type {boolean}
-         */
         this.terrainExists = false;
 
-        /**
-         * Means that tree passage reach the segment, and the segment terrain is ready.
-         * @type {boolean}
-         */
         this.passReady = false;
 
         this.plainVertices = null;
@@ -237,10 +355,12 @@ class Segment {
         this.readyToEngage = false;
 
         this.plainProcessing = false;
+
+        this.normalMapTexturePtr = null;
     }
 
-    checkZoom() {
-        return this.tileZoom < this.planet.terrain._maxNodeZoom;
+    public checkZoom(): boolean {
+        return this.tileZoom < this.planet.terrain!._maxNodeZoom;
     }
 
     /**
@@ -250,16 +370,16 @@ class Segment {
      * @param {Vec3} res - Point coordinates.
      * @returns {Vec3} -
      */
-    getEntityTerrainPoint(entity, res) {
+    public getEntityTerrainPoint(entity: Entity, res: Vec3): number {
         return this.getTerrainPoint(entity._cartesian, this.getInsideLonLat(entity), res);
     }
 
-    getInsideLonLat(obj) {
+    public getInsideLonLat(obj: Entity | PlanetCamera): LonLat {
         return obj._lonLatMerc;
     }
 
-    isEntityInside(entity) {
-        return this._extentLonLat.isInside(entity._lonLat);
+    public isEntityInside(entity: Entity): boolean {
+        return this._extentLonLat!.isInside(entity._lonLat);
     }
 
     /**
@@ -268,10 +388,9 @@ class Segment {
      * @param {Vec3} xyz - Cartesian object position.
      * @param {LonLat} insideSegmentPosition - Geodetic object position.
      * @param {Vec3} [res] - Result cartesian coordinates on the terrain.
-     * @param {Vec3} [normal] - Terrain point normal.
      * @returns {number} -
      */
-    getTerrainPoint(xyz, insideSegmentPosition, res) {
+    public getTerrainPoint(xyz: Vec3, insideSegmentPosition: LonLat, res: Vec3): number {
         let verts = this.tempVertices;
 
         if (verts && verts.length) {
@@ -339,7 +458,7 @@ class Segment {
 
             return xyz.distance(res);
         } else {
-            return xyz.distance(this.planet.ellipsoid.hitRay(_ray.origin, _ray.direction));
+            return xyz.distance(this.planet.ellipsoid.hitRay(_ray.origin, _ray.direction)!);
         }
     }
 
@@ -349,16 +468,12 @@ class Segment {
      * @param {LonLat} lonlat - Coordinates to project.
      * @returns {LonLat} -
      */
-    projectNative(lonlat) {
+    public projectNative(lonlat: LonLat): LonLat {
         return lonlat.forwardMercator();
     }
 
-    /**
-     *
-     * @param {boolean} forceLoading
-     */
-    loadTerrain(forceLoading) {
-        if (this.tileZoom < this.planet.terrain.minZoom || this.planet.terrain.isEmpty) {
+    public loadTerrain(forceLoading: boolean = false) {
+        if (this.tileZoom < this.planet.terrain!.minZoom || this.planet.terrain!.isEmpty) {
             this.terrainIsLoading = true;
 
             this.elevationsNotExists();
@@ -367,10 +482,10 @@ class Segment {
                 this.planet._normalMapCreator.queue(this);
             }
         } else {
-            if (this.tileZoom > this.planet.terrain.maxZoom) {
+            if (this.tileZoom > this.planet.terrain!.maxZoom) {
                 this.elevationsNotExists();
             } else if (!this.terrainIsLoading && !this.terrainReady) {
-                this.planet.terrain.loadTerrain(this, forceLoading);
+                this.planet.terrain!.loadTerrain(this, forceLoading);
             }
             // if (!this.terrainIsLoading && !this.terrainReady) {
             //     this.planet.terrain.loadTerrain(this, forceLoading);
@@ -382,9 +497,13 @@ class Segment {
      * Terrain obtained from server.
      * @param {Float32Array} elevations - Elevation data.
      */
-    elevationsExists(elevations) {
+    public elevationsExists(elevations: number[] | TypedArray) {
         if (this.plainReady && this.terrainIsLoading) {
-            this.planet._terrainWorker.make(this, elevations);
+
+            let _elevations = new Float32Array(elevations.length);
+            _elevations.set(elevations);
+
+            this.planet._terrainWorker.make({segment: this, elevations: _elevations});
 
             this.plainVerticesHigh = null;
             this.plainVerticesLow = null;
@@ -392,7 +511,7 @@ class Segment {
             this.normalMapVerticesHigh = null;
             this.normalMapVerticesLow = null;
 
-            if (!this.planet.terrain.equalizeVertices) {
+            if (!this.planet.terrain!.equalizeVertices) {
                 this.tempVerticesHigh = null;
                 this.tempVerticesLow = null;
             }
@@ -405,8 +524,9 @@ class Segment {
      * 'this.tileZoom <= this.planet.terrain.maxZoom' it means, that the segment is plain
      *
      */
-    elevationsNotExists() {
-        if (this.planet && this.tileZoom <= this.planet.terrain.maxNativeZoom) {
+    public elevationsNotExists() {
+        if (this.planet && this.tileZoom <= this.planet.terrain!.maxNativeZoom) {
+
             if (this.plainReady && this.terrainIsLoading) {
                 this.terrainIsLoading = false;
 
@@ -433,10 +553,11 @@ class Segment {
 
             this.noDataVertices = null;
 
-            this.fileGridSize = Math.sqrt(this.terrainVertices.length / 3) - 1;
+            this.fileGridSize = Math.sqrt(this.terrainVertices!.length / 3) - 1;
             this.gridSize = this.fileGridSize;
             this.terrainReady = true;
             this.terrainExists = false;
+
         } else {
 
             if (this.plainReady && this.terrainIsLoading) {
@@ -456,21 +577,25 @@ class Segment {
         }
     }
 
-    _checkEqualization(neighborSide, neigborNode) {
+    protected _checkEqualization(neighborSide: number, neigborNode: Node): boolean {
         return neigborNode && this.tileZoom >= neigborNode.segment.tileZoom &&
             this.node.equalizedSideWithNodeId[neighborSide] !== neigborNode.equalizedSideWithNodeId[OPSIDE[neighborSide]];
     }
 
-    equalize() {
+    public equalize() {
+
         if (this.tileZoom < 8 || this.gridSize < 2) {
             return;
         }
 
         this.readyToEngage = true;
+
         let nn = this.node.neighbors;
-        let v = this.tempVertices,
-            vHigh = this.tempVerticesHigh,
-            vLow = this.tempVerticesLow;
+
+        let v = this.tempVertices!,
+            vHigh = this.tempVerticesHigh!,
+            vLow = this.tempVerticesLow!;
+
         let gs = this.gridSize,
             gsOne = gs + 1;
 
@@ -483,9 +608,9 @@ class Segment {
 
             let offset = this.node.getOffsetOppositeNeighbourSide(n, N);
 
-            let nv = n.segment.tempVertices,
-                nvHigh = n.segment.tempVerticesHigh,
-                nvLow = n.segment.tempVerticesLow;
+            let nv = n.segment.tempVertices!,
+                nvHigh = n.segment.tempVerticesHigh!,
+                nvLow = n.segment.tempVerticesLow!;
 
             let n_gs = n.segment.gridSize,
                 n_gsOne = n_gs + 1;
@@ -523,9 +648,9 @@ class Segment {
 
             let offset = this.node.getOffsetOppositeNeighbourSide(n, E);
 
-            let nv = n.segment.tempVertices,
-                nvHigh = n.segment.tempVerticesHigh,
-                nvLow = n.segment.tempVerticesLow;
+            let nv = n.segment.tempVertices!,
+                nvHigh = n.segment.tempVerticesHigh!,
+                nvLow = n.segment.tempVerticesLow!;
 
             let n_gs = n.segment.gridSize,
                 n_gsOne = n_gs + 1;
@@ -563,9 +688,9 @@ class Segment {
 
             let offset = this.node.getOffsetOppositeNeighbourSide(n, S);
 
-            let nv = n.segment.tempVertices,
-                nvHigh = n.segment.tempVerticesHigh,
-                nvLow = n.segment.tempVerticesLow;
+            let nv = n.segment.tempVertices!,
+                nvHigh = n.segment.tempVerticesHigh!,
+                nvLow = n.segment.tempVerticesLow!;
 
             let n_gs = n.segment.gridSize; // n_gsOne = n_gs + 1;
 
@@ -602,9 +727,9 @@ class Segment {
 
             let offset = this.node.getOffsetOppositeNeighbourSide(n, W);
 
-            let nv = n.segment.tempVertices,
-                nvHigh = n.segment.tempVerticesHigh,
-                nvLow = n.segment.tempVerticesLow;
+            let nv = n.segment.tempVertices!,
+                nvHigh = n.segment.tempVerticesHigh!,
+                nvLow = n.segment.tempVerticesLow!;
 
             let n_gs = n.segment.gridSize,
                 n_gsOne = n_gs + 1;
@@ -634,12 +759,12 @@ class Segment {
         }
     }
 
-    engage() {
+    public engage() {
         this.readyToEngage = false;
-        this.createCoordsBuffers(this.tempVerticesHigh, this.tempVerticesLow, this.gridSize);
+        this.createCoordsBuffers(this.tempVerticesHigh!, this.tempVerticesLow!, this.gridSize);
     }
 
-    _terrainWorkerCallback(data) {
+    public _terrainWorkerCallback(data: ITerrainWorkerData) {
         if (this.plainReady) {
             this.readyToEngage = true;
 
@@ -675,7 +800,7 @@ class Segment {
 
             this.setBoundingVolumeArr(data.bounds);
 
-            this.gridSize = Math.sqrt(this.terrainVertices.length / 3) - 1;
+            this.gridSize = Math.sqrt(this.terrainVertices!.length / 3) - 1;
 
             let n = this.node;
             n.appliedTerrainNodeId = n.nodeId;
@@ -687,11 +812,8 @@ class Segment {
             this.terrainExists = true;
 
             if (!this.normalMapTexturePtr) {
-                var nmc = this.planet._normalMapCreator;
-                this.normalMapTexturePtr = this.planet.renderer.handler.createEmptyTexture_l(
-                    nmc._width,
-                    nmc._height
-                );
+                const nmc = this.planet._normalMapCreator;
+                this.normalMapTexturePtr = this.planet.renderer!.handler.createEmptyTexture_l(nmc.width, nmc.height);
             }
 
             if (this.planet.lightEnabled) {
@@ -700,10 +822,10 @@ class Segment {
         }
     }
 
-    _normalMapEdgeEqualize(side) {
+    public _normalMapEdgeEqualize(side: number) {
         let nn = this.node.neighbors;
-        let n = nn[side][0];
-        let maxZ = this.planet.terrain.maxZoom;
+        let n: Node | undefined = nn[side][0];
+        let maxZ = this.planet.terrain!.maxZoom;
 
         if (this.tileZoom === maxZ) {
             if (!(nn[0].length || nn[1].length || nn[2].length || nn[3].length)) {
@@ -729,8 +851,8 @@ class Segment {
 
             if (!(seg_a && seg_b)) return;
 
-            let seg_a_raw = s.normalMapNormals,
-                seg_b_raw = b.normalMapNormals;
+            let seg_a_raw = s.normalMapNormals!,
+                seg_b_raw = b.normalMapNormals!;
 
             // let seg_a_verts = s.terrainVertices,
             //     seg_b_verts = s.terrainVertices;
@@ -787,7 +909,7 @@ class Segment {
         }
     }
 
-    applyTerrain(elevations) {
+    public applyTerrain(elevations?: number[] | TypedArray | null) {
         if (elevations) {
             this.elevationsExists(elevations);
         } else {
@@ -795,15 +917,14 @@ class Segment {
         }
     }
 
-    /**
-     * Delete segment gl buffers.
-     */
-    deleteBuffers() {
-        var gl = this.handler.gl;
-        gl.deleteBuffer(this.vertexNormalBuffer);
-        gl.deleteBuffer(this.vertexPositionBuffer);
-        gl.deleteBuffer(this.vertexPositionBufferHigh);
-        gl.deleteBuffer(this.vertexPositionBufferLow);
+    public deleteBuffers() {
+
+        const gl = this.handler.gl!;
+
+        gl.deleteBuffer(this.vertexNormalBuffer!);
+        gl.deleteBuffer(this.vertexPositionBuffer!);
+        gl.deleteBuffer(this.vertexPositionBufferHigh!);
+        gl.deleteBuffer(this.vertexPositionBufferLow!);
 
         this.vertexNormalBuffer = null;
         this.vertexPositionBuffer = null;
@@ -812,13 +933,10 @@ class Segment {
         this.vertexTextureCoordBuffer = null;
     }
 
-    /**
-     * Delete materials.
-     */
-    deleteMaterials() {
-        var m = this.materials;
+    public deleteMaterials() {
+        let m = this.materials;
         for (let i = 0; i < m.length; i++) {
-            var mi = m[i];
+            let mi = m[i];
             if (mi) {
                 mi.clear();
             }
@@ -826,10 +944,7 @@ class Segment {
         this.materials.length = 0;
     }
 
-    /**
-     * Delete elevation data.
-     */
-    deleteElevations() {
+    public deleteElevations() {
         this.terrainExists = false;
         this.terrainReady = false;
         this.terrainIsLoading = false;
@@ -837,7 +952,6 @@ class Segment {
         this.normalMapVertices = null;
         this.normalMapVerticesHigh = null;
         this.normalMapVerticesLow = null;
-
         this.normalMapNormals = null;
 
         this.tempVertices = null;
@@ -852,24 +966,23 @@ class Segment {
         this.plainVertices = null;
         this.plainVerticesHigh = null;
         this.plainVerticesLow = null;
-
         this.plainNormals = null;
 
         if (this.normalMapReady) {
-            this.handler.gl.deleteTexture(this.normalMapTexture);
+            this.handler.gl!.deleteTexture(this.normalMapTexture!);
+            this.normalMapReady = false;
         }
-        this.normalMapReady = false;
+
         this._appliedNeighborsZoom = [0, 0, 0, 0];
+
         this.normalMapTextureBias[0] = 0;
         this.normalMapTextureBias[1] = 0;
         this.normalMapTextureBias[2] = 1;
+
         this._inTheQueue = false;
     }
 
-    /**
-     * Clear but not destroy segment data.
-     */
-    clearSegment() {
+    public clearSegment() {
         this.plainReady = false;
         this.initialized = false;
         this.deleteBuffers();
@@ -877,28 +990,30 @@ class Segment {
         this.deleteElevations();
     }
 
-    /**
-     * Clear and destroy all segment data.
-     */
-    destroySegment() {
+    public destroySegment() {
 
         this.clearSegment();
 
-        var i = this._slices.length;
+        let i = this._slices.length;
         while (i--) {
             this._slices[i].clear();
         }
 
+        //@ts-ignore
         this._slices = null;
-
+        //@ts-ignore
         this.node = null;
-
+        //@ts-ignore
         this.planet = null;
+        //@ts-ignore
         this.handler = null;
+        //@ts-ignore
         this.bbox = null;
+        //@ts-ignore
         this.bsphere = null;
+        //@ts-ignore
         this._extent = null;
-
+        //@ts-ignore
         this.materials = null;
 
         this.plainVertices = null;
@@ -915,8 +1030,9 @@ class Segment {
         this.tempVerticesHigh = null;
         this.tempVerticesLow = null;
 
-        this.normalMapTexture = null;
+        //@ts-ignore
         this.normalMapTextureBias = null;
+        this.normalMapTexture = null;
         this.normalMapVertices = null;
         this.normalMapVerticesHigh = null;
         this.normalMapVerticesLow = null;
@@ -928,31 +1044,34 @@ class Segment {
         this.vertexPositionBufferLow = null;
         this.vertexTextureCoordBuffer = null;
 
+        // @ts-ignore
         this._projection = null;
+        // @ts-ignore
         this._appliedNeighborsZoom = null;
-
+        // @ts-ignore
         this._globalTextureCoordinates = null;
     }
 
-    _setExtentLonLat() {
+    /**
+     * @todo: looks like it could be simplified in Segment contructor
+     */
+    public _setExtentLonLat() {
         this._extentLonLat = this._extent.inverseMercator();
     }
 
-    /**
-     * Creates bound volumes by segment geographical extent.
-     */
-    createBoundsByExtent() {
-        var ellipsoid = this.planet.ellipsoid,
-            extent = this._extentLonLat;
+    public createBoundsByExtent() {
+        const ellipsoid = this.planet.ellipsoid;
+        const extent = this._extentLonLat;
 
-        var coord_sw = ellipsoid.geodeticToCartesian(extent.southWest.lon, extent.southWest.lat);
-        var coord_ne = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.northEast.lat);
+        const coord_sw = ellipsoid.geodeticToCartesian(extent.southWest.lon, extent.southWest.lat);
+        const coord_ne = ellipsoid.geodeticToCartesian(extent.northEast.lon, extent.northEast.lat);
 
-        var coord_nw = ellipsoid.geodeticToCartesian(
+        const coord_nw = ellipsoid.geodeticToCartesian(
             extent.southWest.lon,
             extent.northEast.lat
         );
-        var coord_se = ellipsoid.geodeticToCartesian(
+
+        const coord_se = ellipsoid.geodeticToCartesian(
             extent.northEast.lon,
             extent.southWest.lat
         );
@@ -965,7 +1084,7 @@ class Segment {
         this.setBoundingVolume3v(coord_sw, coord_ne);
     }
 
-    createBoundsByParent() {
+    public createBoundsByParent() {
         let pn = this.node;
 
         while (pn.parentNode && !pn.segment.terrainReady) {
@@ -977,7 +1096,7 @@ class Segment {
         let offsetX = this.tileX - pn.segment.tileX * dZ2,
             offsetY = this.tileY - pn.segment.tileY * dZ2;
 
-        if (pn.segment.terrainReady && pn.segment.tileZoom >= this.planet.terrain.minZoom) {
+        if (pn.segment.terrainReady && pn.segment.tileZoom >= this.planet.terrain!.minZoom) {
             let gridSize = pn.segment.gridSize / dZ2;
 
             if (gridSize >= 1.0) {
@@ -999,7 +1118,7 @@ class Segment {
                     ind_ne = 3 * (i0 * pnGsOne + j0 + gridSize),
                     ind_se = 3 * ((i0 + gridSize) * pnGsOne + j0 + gridSize);
 
-                let pVerts = pn.segment.tempVertices;
+                let pVerts = pn.segment.tempVertices!;
 
                 let v_sw = new Vec3(pVerts[ind_sw], pVerts[ind_sw + 1], pVerts[ind_sw + 2]),
                     v_ne = new Vec3(pVerts[ind_ne], pVerts[ind_ne + 1], pVerts[ind_ne + 2]);
@@ -1026,9 +1145,9 @@ class Segment {
 
                 let bigOne;
                 if (pseg.gridSize === 1) {
-                    bigOne = pseg.tempVertices;
+                    bigOne = pseg.tempVertices!;
                 } else {
-                    bigOne = getMatrixSubArray(pseg.tempVertices, pseg.gridSize, i0, j0, 1);
+                    bigOne = getMatrixSubArray64(pseg.tempVertices!, pseg.gridSize, i0, j0, 1);
                 }
 
                 let v_lt = new Vec3(bigOne[0], bigOne[1], bigOne[2]),
@@ -1094,14 +1213,14 @@ class Segment {
         }
     }
 
-    setBoundingSphere(x, y, z, v) {
+    public setBoundingSphere(x: number, y: number, z: number, v: Vec3) {
         this.bsphere.center.x = x;
         this.bsphere.center.y = y;
         this.bsphere.center.z = z;
         this.bsphere.radius = this.bsphere.center.distance(v);
     }
 
-    setBoundingVolume(xmin, ymin, zmin, xmax, ymax, zmax) {
+    public setBoundingVolume(xmin: number, ymin: number, zmin: number, xmax: number, ymax: number, zmax: number) {
         this.bbox.setFromBoundsArr([xmin, ymin, zmin, xmax, ymax, zmax]);
 
         let x = xmin + (xmax - xmin) * 0.5,
@@ -1112,7 +1231,7 @@ class Segment {
         this.bsphere.radius = this.bsphere.center.distance(new Vec3(xmin, ymin, zmin));
     }
 
-    setBoundingVolume3v(vmin, vmax) {
+    public setBoundingVolume3v(vmin: Vec3, vmax: Vec3) {
         this.bbox.setFromBoundsArr([vmin.x, vmin.y, vmin.z, vmax.x, vmax.y, vmax.z]);
 
         let x = vmin.x + (vmax.x - vmin.x) * 0.5,
@@ -1123,7 +1242,7 @@ class Segment {
         this.bsphere.radius = this.bsphere.center.distance(new Vec3(vmin.x, vmin.y, vmin.z));
     }
 
-    setBoundingVolumeArr(bounds) {
+    public setBoundingVolumeArr(bounds: NumberArray6) {
         this.bbox.setFromBoundsArr(bounds);
 
         let x = bounds[0] + (bounds[3] - bounds[0]) * 0.5,
@@ -1136,20 +1255,20 @@ class Segment {
         );
     }
 
-    createCoordsBuffers(verticesHigh, verticesLow, gridSize) {
-        var gsgs = (gridSize + 1) * (gridSize + 1);
-        var h = this.handler;
+    public createCoordsBuffers(verticesHigh: Float32Array, verticesLow: Float32Array, gridSize: number) {
+        const gsgs = (gridSize + 1) * (gridSize + 1);
+        const h = this.handler;
 
         if (this.vertexPositionBufferHigh && this.vertexPositionBufferHigh.numItems === gsgs) {
-            h.setStreamArrayBuffer(this.vertexPositionBufferHigh, verticesHigh);
-            h.setStreamArrayBuffer(this.vertexPositionBufferLow, verticesLow);
+            h.setStreamArrayBuffer(this.vertexPositionBufferHigh!, verticesHigh);
+            h.setStreamArrayBuffer(this.vertexPositionBufferLow!, verticesLow);
         } else {
-            h.gl.deleteBuffer(this.vertexPositionBufferHigh);
-            h.gl.deleteBuffer(this.vertexPositionBufferLow);
+            h.gl!.deleteBuffer(this.vertexPositionBufferHigh!);
+            h.gl!.deleteBuffer(this.vertexPositionBufferLow!);
 
-            this.vertexTextureCoordBuffer =
-                this.planet._textureCoordsBufferCache[Math.log2(gridSize)];
+            this.vertexTextureCoordBuffer = this.planet._textureCoordsBufferCache[Math.log2(gridSize)];
 
+            // @todo use it!
             //this.vertexPositionBufferHigh = h.createStreamArrayBuffer(3, gsgs);
             //h.setStreamArrayBuffer(this.vertexPositionBufferHigh, verticesHigh);
             //this.vertexPositionBufferLow = h.createStreamArrayBuffer(3, gsgs);
@@ -1161,10 +1280,10 @@ class Segment {
         }
     }
 
-    _addViewExtent() {
-        var ext = this._extentLonLat;
+    public _addViewExtent() {
+        const ext = this._extentLonLat;
 
-        var viewExt = this.planet._viewExtent;
+        let viewExt = this.planet._viewExtent;
 
         if (ext.southWest.lon < viewExt.southWest.lon) {
             viewExt.southWest.lon = ext.southWest.lon;
@@ -1183,20 +1302,19 @@ class Segment {
         }
     }
 
-    _assignTileIndexes() {
+    protected _assignTileIndexes() {
 
         this._tileGroup = TILEGROUP_COMMON;
 
-        var tileZoom = this.tileZoom;
-        var extent = this._extent;
-        var pole = mercator.POLE;
-        this.tileX = Math.round(
-            Math.abs(-pole - extent.southWest.lon) / (extent.northEast.lon - extent.southWest.lon)
-        );
-        this.tileY = Math.round(
-            Math.abs(pole - extent.northEast.lat) / (extent.northEast.lat - extent.southWest.lat)
-        );
-        var p2 = Math.pow(2, tileZoom);
+        const tileZoom = this.tileZoom;
+        const extent = this._extent;
+        const pole = mercator.POLE;
+
+        this.tileX = Math.round(Math.abs(-pole - extent.southWest.lon) / (extent.northEast.lon - extent.southWest.lon));
+        this.tileY = Math.round(Math.abs(pole - extent.northEast.lat) / (extent.northEast.lat - extent.southWest.lat));
+
+        const p2 = Math.pow(2, tileZoom);
+
         this.tileXE = (this.tileX + 1) % p2;
         this.tileXW = (p2 + this.tileX - 1) % p2;
 
@@ -1206,22 +1324,17 @@ class Segment {
         this.tileIndex = Layer.getTileIndex(this.tileX, this.tileY, tileZoom);
     }
 
-    initialize() {
-        var p = this.planet;
-        var n = this.node;
+    public initialize() {
+        const p = this.planet;
+        const n = this.node;
 
-        this.gridSize =
-            p.terrain.gridSizeByZoom[this.tileZoom] || p.terrain.plainGridSize;
+        this.gridSize = p.terrain!.gridSizeByZoom[this.tileZoom] || p.terrain!.plainGridSize;
 
-        n.sideSizeLog2[0] = n.sideSizeLog2[1] = n.sideSizeLog2[2] = n.sideSizeLog2[3] =
-            Math.log2(this.gridSize);
+        n.sideSizeLog2[0] = n.sideSizeLog2[1] = n.sideSizeLog2[2] = n.sideSizeLog2[3] = Math.log2(this.gridSize);
 
-        if (this.tileZoom <= p.terrain.maxZoom) {
-            var nmc = this.planet._normalMapCreator;
-            this.normalMapTexturePtr = p.renderer.handler.createEmptyTexture_l(
-                nmc._width,
-                nmc._height
-            );
+        if (this.tileZoom <= p.terrain!.maxZoom) {
+            const nmc = this.planet._normalMapCreator;
+            this.normalMapTexturePtr = p.renderer!.handler.createEmptyTexture_l(nmc.width, nmc.height);
         }
 
         this.normalMapTexture = this.planet.transparentTexture;
@@ -1231,8 +1344,8 @@ class Segment {
         this.initialized = true;
     }
 
-    _assignGlobalTextureCoordinates() {
-        var e = this._extent;
+    protected _assignGlobalTextureCoordinates() {
+        const e = this._extent;
         this._globalTextureCoordinates[0] =
             (e.southWest.lon + mercator.POLE) * mercator.ONE_BY_POLE_DOUBLE;
         this._globalTextureCoordinates[1] =
@@ -1243,9 +1356,9 @@ class Segment {
             (mercator.POLE - e.southWest.lat) * mercator.ONE_BY_POLE_DOUBLE;
     }
 
-    createPlainSegmentAsync() {
+    public createPlainSegmentAsync() {
         let p = this.planet,
-            t = p.terrain;
+            t = p.terrain!;
 
         if (t.isReady() && !this.plainReady && this.tileZoom <= t.maxZoom) {
             this.plainProcessing = true;
@@ -1253,7 +1366,7 @@ class Segment {
         }
     }
 
-    _plainSegmentWorkerCallback(data) {
+    public _plainSegmentWorkerCallback(data: IPlainSegmentWorkerData) {
         this.plainProcessing = false;
 
         if (this.initialized && !this.terrainReady) {
@@ -1274,33 +1387,32 @@ class Segment {
             //this.terrainVerticesHigh = this.plainVerticesHigh;
             //this.terrainVerticesLow = this.plainVerticesLow;
 
-            this.fileGridSize = Math.sqrt(data.normalMapVertices.length / 3) - 1;
+            this.fileGridSize = Math.sqrt(data.normalMapVertices!.length / 3) - 1;
         }
     }
 
-    createPlainSegment() {
+    public createPlainSegment() {
         this.initialize();
         this._createPlainVertices();
         this.readyToEngage = true;
     }
 
-    _createPlainVertices() {
-        var gridSize = this.planet.terrain.gridSizeByZoom[this.tileZoom];
-
-        var e = this._extent,
-            fgs = this.planet.terrain.plainGridSize;
-        var lonSize = e.getWidth();
-        var llStep = lonSize / Math.max(fgs, gridSize);
-        var esw_lon = e.southWest.lon,
-            ene_lat = e.northEast.lat;
-        var dg = Math.max(fgs / gridSize, 1),
-            gs = Math.max(fgs, gridSize) + 1;
-        var r2 = this.planet.ellipsoid._invRadii2;
-        var ind = 0,
-            nmInd = 0;
+    protected _createPlainVertices() {
+        const gridSize = this.planet.terrain!.gridSizeByZoom[this.tileZoom];
+        const e = this._extent;
+        const fgs = this.planet.terrain!.plainGridSize;
+        const lonSize = e.getWidth();
+        const llStep = lonSize / Math.max(fgs, gridSize);
+        const esw_lon = e.southWest.lon;
+        const ene_lat = e.northEast.lat;
+        const dg = Math.max(fgs / gridSize, 1);
+        const gs = Math.max(fgs, gridSize) + 1;
+        const r2 = this.planet.ellipsoid._invRadii2;
         const gsgs = gs * gs;
+        const gridSize3 = (gridSize + 1) * (gridSize + 1) * 3;
 
-        var gridSize3 = (gridSize + 1) * (gridSize + 1) * 3;
+        let ind = 0,
+            nmInd = 0;
 
         this.plainNormals = new Float32Array(gridSize3);
         this.plainVertices = new Float64Array(gridSize3);
@@ -1312,7 +1424,7 @@ class Segment {
         this.normalMapVerticesHigh = new Float32Array(gsgs * 3);
         this.normalMapVerticesLow = new Float32Array(gsgs * 3);
 
-        var verts = this.plainVertices,
+        let verts = this.plainVertices,
             vertsHigh = this.plainVerticesHigh,
             vertsLow = this.plainVerticesLow,
             norms = this.plainNormals,
@@ -1322,17 +1434,20 @@ class Segment {
             nmNorms = this.normalMapNormals;
 
         for (let k = 0; k < gsgs; k++) {
-            var j = k % gs,
+            let j = k % gs,
                 i = ~~(k / gs);
 
-            var v = this.planet.ellipsoid.lonLatToCartesian(
+            let v = this.planet.ellipsoid.lonLatToCartesian(
                 LonLat.inverseMercator(esw_lon + j * llStep, ene_lat - i * llStep)
             );
-            var nx = v.x * r2.x,
+
+            let nx = v.x * r2.x,
                 ny = v.y * r2.y,
                 nz = v.z * r2.z;
-            var l = 1.0 / Math.sqrt(nx * nx + ny * ny + nz * nz);
-            var nxl = nx * l,
+
+            let l = 1.0 / Math.sqrt(nx * nx + ny * ny + nz * nz);
+
+            let nxl = nx * l,
                 nyl = ny * l,
                 nzl = nz * l;
 
@@ -1382,33 +1497,41 @@ class Segment {
      * Gets specific layer material.
      * @public
      * @param {Layer} layer - Layer object.
-     * @returns {planetSegment.Material} - Segment material.
+     * @returns {Material | undefined} - Segment material.
      */
-    getMaterialByLayer(layer) {
-        return this.materials[layer._id];
+    public getMaterialByLayer(layer: Layer): Material | undefined {
+        return this.materials[layer.__id];
     }
 
-    _getLayerExtentOffset(layer) {
-        var v0s = layer._extentMerc;
-        var v0t = this._extent;
-        var sSize_x = v0s.northEast.lon - v0s.southWest.lon;
-        var sSize_y = v0s.northEast.lat - v0s.southWest.lat;
-        var dV0s_x = (v0t.southWest.lon - v0s.southWest.lon) / sSize_x;
-        var dV0s_y = (v0s.northEast.lat - v0t.northEast.lat) / sSize_y;
-        var dSize_x = (v0t.northEast.lon - v0t.southWest.lon) / sSize_x;
-        var dSize_y = (v0t.northEast.lat - v0t.southWest.lat) / sSize_y;
+    /**
+     * @param layer
+     * @protected
+     *
+     * @todo siplify layer._extentMerc in this.getLayerExtent(layer)
+     *
+     */
+
+    protected _getLayerExtentOffset(layer: Layer): [number, number, number, number] {
+        const v0s = layer._extentMerc;
+        const v0t = this._extent;
+        const sSize_x = v0s.northEast.lon - v0s.southWest.lon;
+        const sSize_y = v0s.northEast.lat - v0s.southWest.lat;
+        const dV0s_x = (v0t.southWest.lon - v0s.southWest.lon) / sSize_x;
+        const dV0s_y = (v0s.northEast.lat - v0t.northEast.lat) / sSize_y;
+        const dSize_x = (v0t.northEast.lon - v0t.southWest.lon) / sSize_x;
+        const dSize_y = (v0t.northEast.lat - v0t.southWest.lat) / sSize_y;
         return [dV0s_x, dV0s_y, dSize_x, dSize_y];
     }
 
-    screenRendering(sh, layerSlice, sliceIndex, defaultTexture, isOverlay) {
-        var gl = this.handler.gl;
-        var sha = sh.attributes,
-            shu = sh.uniforms;
+    public screenRendering(sh: Program, layerSlice: Layer[], sliceIndex: number, defaultTexture?: WebGLTextureExt | null, isOverlay: boolean = false) {
+        const gl = this.handler.gl!;
+        const sha = sh.attributes;
+        const shu = sh.uniforms;
 
-        var pm = this.materials,
-            p = this.planet;
+        const pm = this.materials;
+        const p = this.planet;
 
-        var currHeight, li;
+        let currHeight, li;
         if (layerSlice && layerSlice.length) {
             li = layerSlice[0];
             currHeight = li._height;
@@ -1418,15 +1541,15 @@ class Segment {
 
         // First always draw whole planet base layer segment with solid texture.
         gl.activeTexture(gl.TEXTURE0 + p.SLICE_SIZE + 2);
-        gl.bindTexture(gl.TEXTURE_2D, defaultTexture || this.getDefaultTexture());
+        gl.bindTexture(gl.TEXTURE_2D, (defaultTexture || this.getDefaultTexture())!);
         gl.uniform1i(shu.defaultTexture, p.SLICE_SIZE + 2);
 
-        var n = 0,
+        let n = 0,
             i = 0;
 
-        var notEmpty = false;
+        let notEmpty = false;
 
-        var slice = this._slices[sliceIndex];
+        let slice = this._slices[sliceIndex];
 
         if (!slice) {
             slice = this._slices[sliceIndex] = new Slice(this);
@@ -1446,15 +1569,14 @@ class Segment {
             ) {
                 notEmpty = true;
 
-                var m = pm[li._id];
+                let m = pm[li.__id];
 
                 if (!m) {
-                    m = pm[li._id] = li.createMaterial(this);
+                    m = pm[li.__id] = li.createMaterial(this);
                 }
 
                 if (!m.isReady) {
                     this.planet._renderCompleted = false;
-                    this.planet._terrainReady = false;
                 }
 
                 slice.append(li, m);
@@ -1462,7 +1584,7 @@ class Segment {
                 p._samplerArr[n] = n;
 
                 gl.activeTexture(gl.TEXTURE0 + n);
-                gl.bindTexture(gl.TEXTURE_2D, m.texture || p.transparentTexture);
+                gl.bindTexture(gl.TEXTURE_2D, (m.texture || p.transparentTexture)!);
 
                 n++;
             }
@@ -1484,7 +1606,7 @@ class Segment {
             // bind normalmap texture
             if (p.lightEnabled) {
                 gl.activeTexture(gl.TEXTURE0 + p.SLICE_SIZE + 3);
-                gl.bindTexture(gl.TEXTURE_2D, this.normalMapTexture || p.transparentTexture);
+                gl.bindTexture(gl.TEXTURE_2D, (this.normalMapTexture || p.transparentTexture)!);
                 gl.uniform1i(shu.uNormalMap, p.SLICE_SIZE + 3);
 
                 gl.uniform3fv(shu.uNormalMapBias, this.normalMapTextureBias);
@@ -1493,12 +1615,12 @@ class Segment {
                 gl.uniform4fv(shu.uGlobalTextureCoord, this._globalTextureCoordinates);
             }
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh);
-            gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh.itemSize, gl.FLOAT, false, 0, 0);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow);
-            gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh!);
+            gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh!.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow!);
+            gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer!);
             gl.vertexAttribPointer(sha.aTextureCoord, 2, gl.UNSIGNED_SHORT, true, 0, 0);
 
             gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
@@ -1506,15 +1628,15 @@ class Segment {
         }
     }
 
-    heightPickingRendering(sh, layerSlice) {
-        var gl = this.handler.gl;
-        var sha = sh.attributes,
-            shu = sh.uniforms;
+    public heightPickingRendering(sh: Program, layerSlice: Layer[]) {
+        const gl = this.handler.gl!;
+        const sha = sh.attributes;
+        const shu = sh.uniforms;
 
-        var pm = this.materials,
-            p = this.planet;
+        // var pm = this.materials,
+        //     p = this.planet;
 
-        var currHeight;
+        let currHeight;
         if (layerSlice && layerSlice.length) {
             currHeight = layerSlice[0]._height;
         } else {
@@ -1523,55 +1645,55 @@ class Segment {
 
         gl.uniform1f(shu.height, currHeight);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh);
-        gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh.itemSize, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh!);
+        gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow);
-        gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow.itemSize, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow!);
+        gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
-        gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer.numItems, gl.UNSIGNED_INT, 0);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer!);
+        gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer!.numItems, gl.UNSIGNED_INT, 0);
     }
 
-    colorPickingRendering(sh, layerSlice, sliceIndex, defaultTexture, isOverlay) {
-        var gl = this.handler.gl;
-        var sha = sh.attributes,
-            shu = sh.uniforms;
+    public colorPickingRendering(sh: Program, layerSlice: Layer[], sliceIndex: number, defaultTexture?: WebGLTextureExt | null, isOverlay: boolean = false) {
+        const gl = this.handler.gl!;
+        const sha = sh.attributes;
+        const shu = sh.uniforms;
 
-        var pm = this.materials,
+        let pm = this.materials,
             p = this.planet;
 
-        var currHeight;
+        let currHeight;
         if (layerSlice && layerSlice.length) {
             currHeight = layerSlice[0]._height;
         } else {
             currHeight = 0;
         }
 
-        var notEmpty = false;
+        let notEmpty = false;
 
-        var slice = this._slices[sliceIndex];
+        let slice = this._slices[sliceIndex];
 
         let len = slice.layers.length;
 
         for (let n = 0; n < len; n++) {
             notEmpty = true;
 
-            var li = slice.layers[n];
-            var n4 = n * 4;
+            let li = slice.layers[n];
+            let n4 = n * 4;
 
             p._pickingColorArr[n4] = li._pickingColor.x / 255.0;
             p._pickingColorArr[n4 + 1] = li._pickingColor.y / 255.0;
             p._pickingColorArr[n4 + 2] = li._pickingColor.z / 255.0;
-            p._pickingColorArr[n4 + 3] = li._pickingEnabled;
+            p._pickingColorArr[n4 + 3] = Number(li._pickingEnabled);
 
             p._samplerArr[n] = n;
             gl.activeTexture(gl.TEXTURE0 + n);
-            gl.bindTexture(gl.TEXTURE_2D, pm[li._id].texture || this.planet.transparentTexture);
+            gl.bindTexture(gl.TEXTURE_2D, (pm[li.__id].texture || this.planet.transparentTexture)!);
 
             p._pickingMaskArr[n] = n + p.SLICE_SIZE;
             gl.activeTexture(gl.TEXTURE0 + n + p.SLICE_SIZE);
-            gl.bindTexture(gl.TEXTURE_2D, pm[li._id].pickingMask || this.planet.transparentTexture);
+            gl.bindTexture(gl.TEXTURE_2D, (pm[li.__id].pickingMask || this.planet.transparentTexture)!);
         }
 
         if (notEmpty || !isOverlay) {
@@ -1587,23 +1709,23 @@ class Segment {
             gl.uniform1fv(shu.layerOpacityArr, slice.layerOpacityArr);
             //gl.uniform4fv(shu.visibleExtentOffsetArr, slice.visibleExtentOffsetArr);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh);
-            gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh.itemSize, gl.FLOAT, false, 0, 0);
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow);
-            gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh!);
+            gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh!.itemSize, gl.FLOAT, false, 0, 0);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow!);
+            gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow!.itemSize, gl.FLOAT, false, 0, 0);
 
-            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer);
+            gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexTextureCoordBuffer!);
             gl.vertexAttribPointer(sha.aTextureCoord, 2, gl.UNSIGNED_SHORT, true, 0, 0);
 
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
-            gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer.numItems, gl.UNSIGNED_INT, 0);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer!);
+            gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer!.numItems, gl.UNSIGNED_INT, 0);
         }
     }
 
-    depthRendering(sh, layerSlice) {
-        var gl = this.handler.gl;
-        var sha = sh.attributes,
-            shu = sh.uniforms;
+    public depthRendering(sh: Program, layerSlice: Layer[]) {
+        const gl = this.handler.gl!;
+        const sha = sh.attributes;
+        const shu = sh.uniforms;
 
         var currHeight;
         if (layerSlice && layerSlice.length) {
@@ -1614,58 +1736,63 @@ class Segment {
 
         gl.uniform1f(shu.height, currHeight);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh);
-        gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh.itemSize, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferHigh!);
+        gl.vertexAttribPointer(sha.aVertexPositionHigh, this.vertexPositionBufferHigh!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow);
-        gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow.itemSize, gl.FLOAT, false, 0, 0);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexPositionBufferLow!);
+        gl.vertexAttribPointer(sha.aVertexPositionLow, this.vertexPositionBufferLow!.itemSize, gl.FLOAT, false, 0, 0);
 
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer);
-        gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer.numItems, gl.UNSIGNED_INT, 0);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this._indexBuffer!);
+        gl.drawElements(gl.TRIANGLE_STRIP, this._indexBuffer!.numItems, gl.UNSIGNED_INT, 0);
     }
 
-    _getIndexBuffer() {
-        let s = this.node.sideSizeLog2;
+    protected _getIndexBuffer(): WebGLBufferExt {
+        const s = this.node.sideSizeLog2;
         let cache = this.planet._indexesCache[Math.log2(this.gridSize)][s[0]][s[1]][s[2]][s[3]];
         if (!cache.buffer) {
             let indexes = segmentHelper.getInstance().createSegmentIndexes(Math.log2(this.gridSize), [s[0], s[1], s[2], s[3]]);
-            cache.buffer = this.planet.renderer.handler.createElementArrayBuffer(indexes, 1);
+            cache.buffer = this.planet.renderer!.handler.createElementArrayBuffer(indexes, 1);
             this.planet._indexesCacheToRemoveCounter++;
-            indexes = null;
         }
         return cache.buffer;
     }
 
-    _collectVisibleNodes() {
+    /**
+     * @todo: replace to the strategy
+     */
+    public _collectVisibleNodes() {
         this.planet._visibleNodes[this.node.nodeId] = this.node;
     }
 
-    layerOverlap(layer) {
+    public layerOverlap(layer: Layer): boolean {
         return this._extent.overlaps(layer._extentMerc);
     }
 
-    getDefaultTexture() {
+    public getDefaultTexture(): WebGLTextureExt | null {
         return this.planet.solidTextureOne;
     }
 
-    getExtentLonLat() {
+    public getExtentLonLat(): Extent {
         return this._extentLonLat;
     }
 
-    getExtentMerc() {
-        return this._extent;
+    public getExtentMerc(): Extent {
+        return this._extentMerc;
     }
 
-    getExtent() {
+    public getExtent(): Extent {
         return this._extent;
     }
 
-    getNodeState() {
-        var vn = this.planet._visibleNodes[this.node.nodeId];
+    /**
+     * @todo replace to the strategy
+     */
+    public getNodeState(): number {
+        let vn = this.planet._visibleNodes[this.node.nodeId];
         return (vn && vn.state) || NOTRENDERING;
     }
 
-    getNeighborSide(b) {
+    public getNeighborSide(b: Segment) {
         if (this.tileY === b.tileY) {
             if (this.tileX === b.tileXE) {
                 return W;
@@ -1679,9 +1806,8 @@ class Segment {
                 return S;
             }
         }
-
         return -1;
     }
 }
 
-export { Segment };
+export {Segment};