@openglobus/og 0.17.1 → 0.18.0

package/src/{og/renderer/Renderer.js → renderer/Renderer.ts}

@@ -1,22 +1,44 @@
-"use strict";
-
-import * as arial from "../arial.js";
-import { Camera } from "../camera/Camera.js";
-import { cons } from "../cons.js";
-import { depth } from "../shaders/depth.js";
-import { LabelWorker } from "../entity/LabelWorker.js";
-import { input } from "../input/input.js";
-import { randomi } from "../math.js";
-import { Vec2 } from "../math/Vec2.js";
-import { Vec3 } from "../math/Vec3.js";
-import { pickingMask } from "../shaders/pickingMask.js";
-import { screenFrame } from "../shaders/screenFrame.js";
-import { toneMapping } from "../shaders/toneMapping.js";
-import { FontAtlas } from "../utils/FontAtlas.js";
-import { isEmpty } from "../utils/shared.js";
-import { TextureAtlas } from "../utils/TextureAtlas.js";
-import { Framebuffer, Multisample } from "../webgl/index.js";
-import { RendererEvents } from "./RendererEvents.js";
+import {Camera} from "../camera/Camera";
+import {Control} from "../control/Control";
+import {cons} from "../cons";
+import {createRendererEvents, RendererEvents, RendererEventsHandler} from "./RendererEvents";
+import {depth} from "../shaders/depth";
+import {EntityCollection} from "../entity/EntityCollection";
+import {Framebuffer, Multisample} from "../webgl/index";
+import {FontAtlas, IFontParams} from "../utils/FontAtlas";
+import {Handler, WebGLBufferExt} from "../webgl/Handler";
+import {input} from "../input/input";
+import {isEmpty} from "../utils/shared";
+import {LabelWorker} from "../entity/LabelWorker";
+import {pickingMask} from "../shaders/pickingMask";
+import {randomi} from "../math";
+import {RenderNode} from "../scene/RenderNode";
+import {screenFrame} from "../shaders/screenFrame";
+import {toneMapping} from "../shaders/toneMapping";
+import {TextureAtlas} from "../utils/TextureAtlas";
+import {Vec2} from "../math/Vec2";
+import {NumberArray3, Vec3} from "../math/Vec3";
+import {Vec4} from "../math/Vec4";
+
+interface IRendererParams {
+    controls?: Control[];
+    msaa?: number;
+    autoActivate?: boolean;
+    fontsSrc?: string;
+}
+
+interface IPickingObject {
+    _pickingColor?: Vec3;
+    _pickingColorU?: Float32Array;
+}
+
+interface IFrameCallbackHandler {
+    id: number;
+    callback: Function;
+    sender: any;
+}
+
+const MSAA_DEFAULT = 0;
 
 let __pickingCallbackCounter__ = 0;
 
@@ -24,59 +46,210 @@ let __depthCallbackCounter__ = 0;
 
 let __distanceCallbackCounter__ = 0;
 
-const MSAA_DEFAULT = 0;
-
 /**
  * Represents high level WebGL context interface that starts WebGL handler working in real time.
  * @class
  * @param {Handler} handler - WebGL handler context.
  * @param {Object} [params] - Renderer parameters:
- * @fires og.RendererEvents#draw
- * @fires og.RendererEvents#resize
- * @fires og.RendererEvents#mousemove
- * @fires og.RendererEvents#mousestop
- * @fires og.RendererEvents#lclick
- * @fires og.RendererEvents#rclick
- * @fires og.RendererEvents#mclick
- * @fires og.RendererEvents#ldblclick
- * @fires og.RendererEvents#rdblclick
- * @fires og.RendererEvents#mdblclick
- * @fires og.RendererEvents#lup
- * @fires og.RendererEvents#rup
- * @fires og.RendererEvents#mup
- * @fires og.RendererEvents#ldown
- * @fires og.RendererEvents#rdown
- * @fires og.RendererEvents#mdown
- * @fires og.RendererEvents#lhold
- * @fires og.RendererEvents#rhold
- * @fires og.RendererEvents#mhold
- * @fires og.RendererEvents#mousewheel
- * @fires og.RendererEvents#touchstart
- * @fires og.RendererEvents#touchend
- * @fires og.RendererEvents#touchcancel
- * @fires og.RendererEvents#touchmove
- * @fires og.RendererEvents#doubletouch
- * @fires og.RendererEvents#touchleave
- * @fires og.RendererEvents#touchenter
+ * @fires EventsHandler<RendererEventsType>#draw
+ * @fires EventsHandler<RendererEventsType>#resize
+ * @fires EventsHandler<RendererEventsType>#mousemove
+ * @fires EventsHandler<RendererEventsType>#mousestop
+ * @fires EventsHandler<RendererEventsType>#lclick
+ * @fires EventsHandler<RendererEventsType>#rclick
+ * @fires EventsHandler<RendererEventsType>#mclick
+ * @fires EventsHandler<RendererEventsType>#ldblclick
+ * @fires EventsHandler<RendererEventsType>#rdblclick
+ * @fires EventsHandler<RendererEventsType>#mdblclick
+ * @fires EventsHandler<RendererEventsType>#lup
+ * @fires EventsHandler<RendererEventsType>#rup
+ * @fires EventsHandler<RendererEventsType>#mup
+ * @fires EventsHandler<RendererEventsType>#ldown
+ * @fires EventsHandler<RendererEventsType>#rdown
+ * @fires EventsHandler<RendererEventsType>#mdown
+ * @fires EventsHandler<RendererEventsType>#lhold
+ * @fires EventsHandler<RendererEventsType>#rhold
+ * @fires EventsHandler<RendererEventsType>#mhold
+ * @fires EventsHandler<RendererEventsType>#mousewheel
+ * @fires EventsHandler<RendererEventsType>#touchstart
+ * @fires EventsHandler<RendererEventsType>#touchend
+ * @fires EventsHandler<RendererEventsType>#touchcancel
+ * @fires EventsHandler<RendererEventsType>#touchmove
+ * @fires EventsHandler<RendererEventsType>#doubletouch
+ * @fires EventsHandler<RendererEventsType>#touchleave
+ * @fires EventsHandler<RendererEventsType>#touchenter
  */
 
-let __resizeTimeout;
+let __resizeTimeout: any;
+
+export interface HTMLDivElementExt extends HTMLDivElement {
+    attributions?: HTMLElement;
+}
 
 class Renderer {
-    constructor(handler, params = {}) {
 
-        /**
-         * Div element with WebGL canvas. Assigned in Globe class.
-         * @public
-         * @type {object}
-         */
+    /**
+     * Div element with WebGL canvas. Assigned in Globe class.
+     * @public
+     * @type {HTMLElement | null}
+     */
+    public div: HTMLDivElementExt | null;
+
+    /**
+     * WebGL handler context.
+     * @public
+     * @type {Handler}
+     */
+    public handler: Handler;
+    public exposure: number;
+    public gamma: number;
+    public whitepoint: number;
+    public brightThreshold: number;
+
+    /**
+     * Render nodes drawing queue.
+     * @public
+     * @type {Array.<RenderNode>}
+     */
+    public _renderNodesArr: RenderNode[];
+
+    /**
+     * Render nodes store for the comfortable access by the node name.
+     * @public
+     * @type {Object.<RenderNode>}
+     */
+    public renderNodes: Record<string, RenderNode>;
+
+    /**
+     * Current active camera.
+     * @public
+     * @type {Camera}
+     */
+    public activeCamera: Camera | null;
+
+    /**
+     * Renderer events. Represents interface for setting events like mousemove, draw, keypress etc.
+     * @public
+     * @type {RendererEvents}
+     */
+    public events: RendererEventsHandler;
+
+    /**
+     * Controls array.
+     * @public
+     * @type {Object}
+     */
+    public controls: Record<string, Control>;
+
+    /**
+     * Provides exchange between controls.
+     * @public
+     * @type {any}
+     */
+    public controlsBag: any;
+
+    /**
+     * Hash table for drawing objects.
+     * @public
+     * @type {Map<string, any>}
+     */
+    public colorObjects: Map<string, any>;
+
+    /**
+     * Color picking objects rendering queue.
+     * @type {Function[]}
+     */
+    protected _pickingCallbacks: IFrameCallbackHandler[];
+
+    /**
+     * Picking objects(labels and billboards) framebuffer.
+     * @public
+     * @type {Framebuffer}
+     */
+    public pickingFramebuffer: Framebuffer | null;
+
+    protected _tempPickingPix_: Uint8Array;
+
+    /**
+     * @public
+     * @type {Framebuffer}
+     */
+    public distanceFramebuffer: Framebuffer | null;
+
+    /**
+     * @type {Function[]}
+     */
+    protected _distanceCallbacks: IFrameCallbackHandler[];
+
+    protected _tempDistancePix_: Uint8Array;
+
+    /**
+     * Depth objects rendering queue.
+     * @type {Function[]}
+     */
+    protected _depthCallbacks: IFrameCallbackHandler[];
+
+    public depthFramebuffer: Framebuffer | null;
+
+    protected _msaa: number;
+
+    protected _internalFormat: string;
+    protected _format: string;
+    protected _type: string;
+
+    public sceneFramebuffer: Framebuffer | Multisample | null;
+
+    protected blitFramebuffer: Framebuffer | null;
+
+    protected toneMappingFramebuffer: Framebuffer | null;
+
+    protected _initialized: boolean;
+
+    /**
+     * Texture atlas for the billboards images. One atlas per node.
+     * @public
+     * @type {TextureAtlas}
+     */
+    public billboardsTextureAtlas: TextureAtlas;
+
+    /**
+     * Texture atlas for the billboards images. One atlas per node.
+     * @public
+     * @type {TextureAtlas}
+     */
+    public geoObjectsTextureAtlas: TextureAtlas;
+
+    /**
+     * Texture font atlas for the font families and styles. One atlas per node.
+     * @public
+     * @type {FontAtlas}
+     */
+    public fontAtlas: FontAtlas;
+
+    protected _entityCollections: EntityCollection[];
+
+    protected _currentOutput: string;
+
+    protected _fnScreenFrame: Function | null;
+
+    public labelWorker: LabelWorker;
+
+    public __useDistanceFramebuffer__: boolean;
+
+    public screenDepthFramebuffer: Framebuffer | null;
+
+    public screenFramePositionBuffer: WebGLBufferExt | null;
+
+    public screenTexture: Record<string, WebGLTexture>;
+
+    public outputTexture: WebGLTexture | null;
+
+    protected _pickingMaskCoordinatesBuffer: WebGLBufferExt | null;
+
+    constructor(handler: Handler, params: IRendererParams = {}) {
+
         this.div = null;
 
-        /**
-         * WebGL handler context.
-         * @public
-         * @type {Handler}
-         */
         this.handler = handler;
 
         this.exposure = 3.01;
@@ -87,39 +260,14 @@ class Renderer {
 
         this.brightThreshold = 0.9;
 
-        /**
-         * Render nodes drawing queue.
-         * @private
-         * @type {Array.<scene.RenderNode>}
-         */
         this._renderNodesArr = [];
 
-        /**
-         * Render nodes store for the comfortable access by the node name.
-         * @public
-         * @type {Object.<og.scene.RenderNode>}
-         */
         this.renderNodes = {};
 
-        /**
-         * Current active camera.
-         * @public
-         * @type {Camera}
-         */
         this.activeCamera = null;
 
-        /**
-         * Renderer events. Represents interface for setting events like mousemove, draw, keypress etc.
-         * @public
-         * @type {RendererEvents}
-         */
-        this.events = new RendererEvents(this);
+        this.events = createRendererEvents(this);
 
-        /**
-         * OpenGlobus controls array.
-         * @public
-         * @type {Object}
-         */
         this.controls = {};
 
         if (params.controls) {
@@ -128,52 +276,22 @@ class Renderer {
             }
         }
 
-        /**
-         * Provides exchange between controls.
-         * @public
-         * @type {Object}
-         */
         this.controlsBag = {};
 
-        /**
-         * Hash table for drawing objects.
-         * @public
-         * @type {Object}
-         */
-        this.colorObjects = new Map();
+        this.colorObjects = new Map<string, any>();
 
-        /**
-         * Color picking objects rendering queue.
-         * @type {Array.<Renderer~pickingCallback>}
-         */
         this._pickingCallbacks = [];
 
-        /**
-         * Picking objects(labels and billboards) framebuffer.
-         * @public
-         * @type {Framebuffer}
-         */
         this.pickingFramebuffer = null;
 
-        this._tempPickingPix_ = null;
+        this._tempPickingPix_ = new Uint8Array([]);
 
-        /**
-         * @public
-         * @type {Framebuffer}
-         */
         this.distanceFramebuffer = null;
 
-        /**
-         * @type {Array.<Renderer~distanceCallback>}
-         */
         this._distanceCallbacks = [];
 
-        this._tempDistancePix_ = null;
+        this._tempDistancePix_ = new Uint8Array([]);
 
-        /**
-         * Depth objects rendering queue.
-         * @type {Array.<Renderer~depthCallback>}
-         */
         this._depthCallbacks = [];
 
         this.depthFramebuffer = null;
@@ -200,24 +318,24 @@ class Renderer {
 
         /**
          * Texture atlas for the billboards images. One atlas per node.
-         * @protected
-         * @type {utils.TextureAtlas}
+         * @public
+         * @type {TextureAtlas}
          */
         this.billboardsTextureAtlas = new TextureAtlas();
-        //TODO global texture atlas
+
         /**
          * Texture atlas for the billboards images. One atlas per node.
-         * @protected
-         * @type {utils.TextureAtlas}
+         * @public
+         * @type {TextureAtlas}
          */
         this.geoObjectsTextureAtlas = new TextureAtlas();
 
         /**
          * Texture font atlas for the font families and styles. One atlas per node.
          * @public
-         * @type {utils.FontAtlas}
+         * @type {FontAtlas}
          */
-        this.fontAtlas = new FontAtlas();
+        this.fontAtlas = new FontAtlas(params.fontsSrc);
 
         this._entityCollections = [];
 
@@ -229,20 +347,30 @@ class Renderer {
 
         this.__useDistanceFramebuffer__ = true;
 
+        this.screenDepthFramebuffer = null;
+
+        this.screenFramePositionBuffer = null;
+
+        this.screenTexture = {};
+
+        this.outputTexture = null;
+
+        this._pickingMaskCoordinatesBuffer = null;
+
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.start();
         }
     }
 
-    enableBlendOneSrcAlpha() {
-        let gl = this.handler.gl;
+    public enableBlendOneSrcAlpha() {
+        let gl = this.handler.gl!;
         gl.enable(gl.BLEND);
         gl.blendEquation(gl.FUNC_ADD);
         gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     }
 
-    enableBlendDefault() {
-        let gl = this.handler.gl;
+    public enableBlendDefault() {
+        let gl = this.handler.gl!;
         gl.enable(gl.BLEND);
         gl.blendEquation(gl.FUNC_ADD);
         gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE);
@@ -252,19 +380,19 @@ class Renderer {
      * Sets renderer events activity.
      * @param {Boolean} activity - Events activity.
      */
-    setEventsActivity(activity) {
+    public setEventsActivity(activity: boolean) {
         this.events.active = activity;
     }
 
-    addDepthCallback(sender, callback) {
-        var id = __depthCallbackCounter__++;
+    public addDepthCallback(sender: any, callback: Function) {
+        let id = __depthCallbackCounter__++;
         this._depthCallbacks.push({
             id: id, callback: callback, sender: sender
         });
         return id;
     }
 
-    removeDepthCallback(id) {
+    public removeDepthCallback(id: number) {
         for (let i = 0; i < this._depthCallbacks.length; i++) {
             if (id === this._depthCallbacks[i].id) {
                 this._depthCallbacks.splice(i, 1);
@@ -273,15 +401,15 @@ class Renderer {
         }
     }
 
-    addDistanceCallback(sender, callback) {
-        var id = __distanceCallbackCounter__++;
+    public addDistanceCallback(sender: any, callback: Function) {
+        let id = __distanceCallbackCounter__++;
         this._distanceCallbacks.push({
             id: id, callback: callback, sender: sender
         });
         return id;
     }
 
-    removeDistanceCallback(id) {
+    public removeDistanceCallback(id: number) {
         for (let i = 0; i < this._distanceCallbacks.length; i++) {
             if (id === this._distanceCallbacks[i].id) {
                 this._distanceCallbacks.splice(i, 1);
@@ -294,11 +422,11 @@ class Renderer {
     /**
      * Adds picking rendering callback function.
      * @param {object} sender - Callback context.
-     * @param {Renderer~pickingCallback} callback - Rendering callback.
+     * @param {Function} callback - Rendering callback.
      * @returns {Number} Handler id
      */
-    addPickingCallback(sender, callback) {
-        var id = __pickingCallbackCounter__++;
+    public addPickingCallback(sender: any, callback: Function) {
+        let id = __pickingCallbackCounter__++;
         this._pickingCallbacks.push({
             id: id, callback: callback, sender: sender
         });
@@ -309,7 +437,7 @@ class Renderer {
      * Removes picking rendering callback function.
      * @param {Number} id - Handler id to remove.
      */
-    removePickingCallback(id) {
+    public removePickingCallback(id: number) {
         for (let i = 0; i < this._pickingCallbacks.length; i++) {
             if (id === this._pickingCallbacks[i].id) {
                 this._pickingCallbacks.splice(i, 1);
@@ -318,24 +446,24 @@ class Renderer {
         }
     }
 
-    getPickingObject(r, g, b) {
+    public getPickingObject<T>(r: number, g: number, b: number): T {
         return this.colorObjects.get(`${r}_${g}_${b}`);
     }
 
-    getPickingObjectArr(arr) {
+    public getPickingObjectArr<T>(arr: NumberArray3 | Uint8Array): T {
         return this.colorObjects.get(`${arr[0]}_${arr[1]}_${arr[2]}`);
     }
 
-    getPickingObject3v(vec) {
+    public getPickingObject3v<T>(vec: Vec3 | Vec4): T {
         return this.colorObjects.get(`${vec.x}_${vec.y}_${vec.z}`);
     }
 
     /**
      * Assign picking color to the object.
      * @public
-     * @param {Object} obj - Object that pressume to be picked.
+     * @param {Object} obj - Object that presume to be picked.
      */
-    assignPickingColor(obj) {
+    public assignPickingColor<T>(obj: T & IPickingObject) {
         if (!obj._pickingColor || obj._pickingColor.isZero()) {
             let r = 0, g = 0, b = 0;
             let str = "0_0_0";
@@ -363,9 +491,9 @@ class Renderer {
      * @public
      * @param {Object} obj - Object to remove picking color.
      */
-    clearPickingColor(obj) {
-        if (!obj._pickingColor.isZero()) {
-            var c = obj._pickingColor;
+    public clearPickingColor<T>(obj: T & IPickingObject) {
+        if (obj._pickingColor && !obj._pickingColor.isZero()) {
+            let c = obj._pickingColor;
             if (!c.isZero()) {
                 this.colorObjects.delete(`${c.x}_${c.y}_${c.z}`);
                 c.x = c.y = c.z = 0;
@@ -378,8 +506,8 @@ class Renderer {
      * @public
      * @returns {number} -
      */
-    getWidth() {
-        return this.handler.canvas.clientWidth;
+    public getWidth(): number {
+        return this.handler.canvas!.clientWidth;
     }
 
     /**
@@ -387,33 +515,43 @@ class Renderer {
      * @public
      * @returns {number} -
      */
-    getHeight() {
-        return this.handler.canvas.clientHeight;
+    public getHeight(): number {
+        return this.handler.canvas!.clientHeight;
+    }
+
+    /**
+     * Get center of the canvas
+     * @public
+     * @returns {Vec2} -
+     */
+    public getCenter(): Vec2 {
+        let cnv = this.handler.canvas!;
+        return new Vec2(Math.round(cnv.width * 0.5), Math.round(cnv.height * 0.5));
     }
 
     /**
-     * Get center of the screen
+     * Get center of the screen viewport
      * @public
-     * @returns {math.Vec2} -
+     * @returns {Vec2} -
      */
-    getCenter() {
-        var cnv = this.handler.canvas;
+    public getClientCenter(): Vec2 {
+        let cnv = this.handler.canvas!;
         return new Vec2(Math.round(cnv.clientWidth * 0.5), Math.round(cnv.clientHeight * 0.5));
     }
 
     /**
      * Add the given control to the renderer.
-     * @param {control.Control} control - Control.
+     * @param {Control} control - Control.
      */
-    addControl(control) {
+    public addControl(control: Control) {
         control.addTo(this);
     }
 
     /**
      * Add the given controls array to the planet node.
-     * @param {Array.<control.Control>} cArr - Control array.
+     * @param {Array.<Control>} cArr - Control array.
      */
-    addControls(cArr) {
+    public addControls(cArr: Control[]) {
         for (let i = 0; i < cArr.length; i++) {
             cArr[i].addTo(this);
         }
@@ -421,13 +559,13 @@ class Renderer {
 
     /**
      * Remove control from the renderer.
-     * @param {control.Control} control  - Control.
+     * @param {Control} control  - Control.
      */
-    removeControl(control) {
+    public removeControl(control: Control) {
         control.remove();
     }
 
-    isInitialized() {
+    public isInitialized(): boolean {
         return this._initialized;
     }
 
@@ -435,7 +573,7 @@ class Renderer {
      * Renderer initialization.
      * @public
      */
-    initialize() {
+    public initialize() {
 
         if (this._initialized) {
             return;
@@ -469,13 +607,15 @@ class Renderer {
 
         this.pickingFramebuffer = new Framebuffer(this.handler, {
             width: 640, height: 480, depthComponent: "DEPTH_STENCIL", renderbufferTarget: "DEPTH_STENCIL_ATTACHMENT"
-        }).init();
+        });
+        this.pickingFramebuffer.init();
 
         this._tempPickingPix_ = new Uint8Array(this.pickingFramebuffer.width * this.pickingFramebuffer.height * 4);
 
         this.distanceFramebuffer = new Framebuffer(this.handler, {
             width: 320, height: 240
-        }).init();
+        });
+        this.distanceFramebuffer.init();
 
         this._tempDistancePix_ = new Uint8Array(this.distanceFramebuffer.width * this.distanceFramebuffer.height * 4);
 
@@ -486,23 +626,25 @@ class Renderer {
             type: ["UNSIGNED_BYTE", "UNSIGNED_INT"],
             attachment: ["COLOR_ATTACHMENT", "DEPTH_ATTACHMENT"],
             useDepth: false
-        }).init();
+        });
+        this.depthFramebuffer.init();
 
         this.screenDepthFramebuffer = new Framebuffer(this.handler, {
             useDepth: false
-        }).init();
+        });
+        this.screenDepthFramebuffer.init();
 
-        if (this.handler.gl.type === "webgl") {
+        if (this.handler.gl!.type === "webgl") {
             this.sceneFramebuffer = new Framebuffer(this.handler);
             this.sceneFramebuffer.init();
 
             this._fnScreenFrame = this._screenFrameNoMSAA;
 
             this.screenTexture = {
-                screen: this.sceneFramebuffer.textures[0],
-                picking: this.pickingFramebuffer.textures[0],
-                distance: this.distanceFramebuffer.textures[0],
-                depth: this.screenDepthFramebuffer.textures[0]
+                screen: this.sceneFramebuffer!.textures[0],
+                picking: this.pickingFramebuffer!.textures[0],
+                distance: this.distanceFramebuffer!.textures[0],
+                depth: this.screenDepthFramebuffer!.textures[0]
             };
         } else {
             let _maxMSAA = this.getMaxMSAA(this._internalFormat);
@@ -516,8 +658,13 @@ class Renderer {
             this.handler.addPrograms([depth()]);
 
             this.sceneFramebuffer = new Multisample(this.handler, {
-                size: 1, msaa: this._msaa, internalFormat: this._internalFormat, filter: "LINEAR"
-            }).init();
+                size: 1,
+                msaa: this._msaa,
+                internalFormat: this._internalFormat,
+                filter: "LINEAR"
+            });
+
+            this.sceneFramebuffer.init();
 
             this.blitFramebuffer = new Framebuffer(this.handler, {
                 size: 1,
@@ -526,20 +673,24 @@ class Renderer {
                 format: this._format,
                 type: this._type,
                 filter: "NEAREST"
-            }).init();
+            });
+
+            this.blitFramebuffer.init();
 
             this.toneMappingFramebuffer = new Framebuffer(this.handler, {
                 useDepth: false
-            }).init();
+            });
+
+            this.toneMappingFramebuffer.init();
 
             this._fnScreenFrame = this._screenFrameMSAA;
 
             this.screenTexture = {
-                screen: this.toneMappingFramebuffer.textures[0],
-                picking: this.pickingFramebuffer.textures[0],
-                distance: this.distanceFramebuffer.textures[0],
-                depth: this.screenDepthFramebuffer.textures[0],
-                frustum: this.depthFramebuffer.textures[0]
+                screen: this.toneMappingFramebuffer!.textures[0],
+                picking: this.pickingFramebuffer!.textures[0],
+                distance: this.distanceFramebuffer!.textures[0],
+                depth: this.screenDepthFramebuffer!.textures[0],
+                frustum: this.depthFramebuffer!.textures[0]
             };
         }
 
@@ -560,8 +711,6 @@ class Renderer {
 
         this.outputTexture = this.screenTexture.screen;
 
-        this.fontAtlas.initFont("arial", arial.data, arial.image);
-
         this._pickingMaskCoordinatesBuffer = this.handler.createArrayBuffer(new Float32Array([0, 0]), 2, 1);
 
         this._initializeRenderNodes();
@@ -569,7 +718,7 @@ class Renderer {
         this._initializeControls();
     }
 
-    _initializeControls() {
+    public _initializeControls() {
         let temp = this.controls;
         this.controls = {};
         for (let i in temp) {
@@ -577,54 +726,55 @@ class Renderer {
         }
     }
 
-    resize() {
+    public resize() {
         this._resizeEnd();
     }
 
-    setCurrentScreen(screenName) {
+    public setCurrentScreen(screenName: string) {
         this._currentOutput = screenName;
         if (this.screenTexture[screenName]) {
             this.outputTexture = this.screenTexture[screenName];
         }
     }
 
-    _resizeStart() {
-        let c = this.handler.canvas;
+    public _resizeStart() {
+        let c = this.handler.canvas!;
 
-        this.activeCamera.setAspectRatio(c.width / c.height);
-        this.sceneFramebuffer.setSize(c.width * 0.5, c.height * 0.5);
+        this.activeCamera!.setAspectRatio(c.width / c.height);
+        this.sceneFramebuffer!.setSize(c.width * 0.5, c.height * 0.5);
         this.blitFramebuffer && this.blitFramebuffer.setSize(c.width * 0.5, c.height * 0.5, true);
     }
 
-    _resizeEnd() {
-        let c = this.handler.canvas;
+    public _resizeEnd() {
+        let c = this.handler.canvas!;
 
-        this.activeCamera.setAspectRatio(c.width / c.height);
-        this.sceneFramebuffer.setSize(c.width, c.height);
+        this.activeCamera!.setAspectRatio(c.width / c.height);
+        this.sceneFramebuffer!.setSize(c.width, c.height);
         this.blitFramebuffer && this.blitFramebuffer.setSize(c.width, c.height, true);
 
         this.toneMappingFramebuffer && this.toneMappingFramebuffer.setSize(c.width, c.height, true);
         this.depthFramebuffer && this.depthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
         this.screenDepthFramebuffer && this.screenDepthFramebuffer.setSize(c.clientWidth, c.clientHeight, true);
 
-        if (this.handler.gl.type === "webgl") {
-            this.screenTexture.screen = this.sceneFramebuffer.textures[0];
-            this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-            this.screenTexture.distance = this.distanceFramebuffer.textures[0];
-            this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
-            this.screenTexture.frustum = this.depthFramebuffer.textures[0];
+        if (this.handler.gl!.type === "webgl") {
+            this.screenTexture.screen = (this.sceneFramebuffer as Framebuffer)!.textures[0];
+            this.screenTexture.picking = this.pickingFramebuffer!.textures[0];
+            this.screenTexture.distance = this.distanceFramebuffer!.textures[0];
+            this.screenTexture.depth = this.screenDepthFramebuffer!.textures[0];
+            this.screenTexture.frustum = this.depthFramebuffer!.textures[0];
         } else {
-            this.screenTexture.screen = this.toneMappingFramebuffer.textures[0];
-            this.screenTexture.picking = this.pickingFramebuffer.textures[0];
-            this.screenTexture.distance = this.distanceFramebuffer.textures[0];
-            this.screenTexture.depth = this.screenDepthFramebuffer.textures[0];
-            this.screenTexture.frustum = this.depthFramebuffer.textures[0];
+            this.screenTexture.screen = this.toneMappingFramebuffer!.textures[0];
+            this.screenTexture.picking = this.pickingFramebuffer!.textures[0];
+            this.screenTexture.distance = this.distanceFramebuffer!.textures[0];
+            this.screenTexture.depth = this.screenDepthFramebuffer!.textures[0];
+            this.screenTexture.frustum = this.depthFramebuffer!.textures[0];
         }
 
         this.setCurrentScreen(this._currentOutput);
     }
 
-    removeNode(renderNode) {
+    public removeNode(renderNode: RenderNode) {
+        // TODO: replace from RenderNode to this method
         renderNode.remove();
     }
 
@@ -633,17 +783,17 @@ class Renderer {
      * @public
      * @param {RenderNode} renderNode - Render node.
      */
-    addNode(renderNode) {
+    public addNode(renderNode: RenderNode) {
         if (!this.renderNodes[renderNode.name]) {
             renderNode.assign(this);
             this._renderNodesArr.unshift(renderNode);
             this.renderNodes[renderNode.name] = renderNode;
         } else {
-            cons.logWrn("Node name " + renderNode.name + " allready exists.");
+            cons.logWrn(`Node name ${renderNode.name} already exists.`);
         }
     }
 
-    _initializeRenderNodes() {
+    protected _initializeRenderNodes() {
         for (let i = 0; i < this._renderNodesArr.length; i++) {
             this._renderNodesArr[i].initialize();
         }
@@ -653,8 +803,9 @@ class Renderer {
      * Adds render node to the renderer before specific node.
      * @public
      * @param {RenderNode} renderNode - Render node.
+     * @param {RenderNode} renderNodeBefore - Insert before the renderNodeBefore node.
      */
-    addNodeBefore(renderNode, renderNodeBefore) {
+    public addNodeBefore(renderNode: RenderNode, renderNodeBefore: RenderNode) {
         if (!this.renderNodes[renderNode.name]) {
             renderNode.assign(this);
             this.renderNodes[renderNode.name] = renderNode;
@@ -666,44 +817,43 @@ class Renderer {
             }
             this._renderNodesArr.unshift(renderNode);
         } else {
-            cons.logWrn("Node name " + renderNode.name + " allready exists.");
+            cons.logWrn(`Node name ${renderNode.name} already exists.`);
         }
     }
 
     /**
      * Adds render nodes array to the renderer.
      * @public
-     * @param {Array.<scene.RenderNode>} nodesArr - Render nodes array.
+     * @param {Array.<RenderNode>} nodesArr - Render nodes array.
      */
-    addNodes(nodesArr) {
+    public addNodes(nodesArr: RenderNode[]) {
         for (let i = 0; i < nodesArr.length; i++) {
             this.addNode(nodesArr[i]);
         }
     }
 
-    getMaxMSAA(internalFormat) {
-        var gl = this.handler.gl;
-        let samples = gl.getInternalformatParameter(gl.RENDERBUFFER, gl[internalFormat], gl.SAMPLES);
+    public getMaxMSAA(internalFormat: string) {
+        let gl = this.handler.gl!;
+        let samples = gl.getInternalformatParameter(gl.RENDERBUFFER, (gl as any)[internalFormat], gl.SAMPLES);
         return samples[0];
     }
 
-    getMSAA() {
+    public getMSAA(): number {
         return this._msaa;
     }
 
     /**
-     * TODO: replace with cahce frendly linked list by bilboardHandler, label handler etc.
+     * TODO: replace with cache friendly linked list by BillboardHandler, LabelHandler etc.
      */
-    enqueueEntityCollectionsToDraw(ecArr) {
+    public enqueueEntityCollectionsToDraw(ecArr: EntityCollection[]) {
         this._entityCollections.push.apply(this._entityCollections, ecArr);
     }
 
     /**
-     * Draws entity collections.
-     * @public
-     * @param {Array<og.EntityCollection>} ec - Entity collection array.
+     * Draws opaque items entity collections.
+     * @protected
      */
-    _drawOpaqueEntityCollections() {
+    protected _drawOpaqueEntityCollections() {
         let ec = this._entityCollections;
 
         if (ec.length) {
@@ -730,15 +880,14 @@ class Renderer {
 
 
     /**
-     * Draws entity collections.
-     * @public
-     * @param {Array<og.EntityCollection>} ec - Entity collection array.
+     * Draws transparent items entity collections.
+     * @protected
      */
-    _drawTransparentEntityCollections() {
+    protected _drawTransparentEntityCollections() {
         let ec = this._entityCollections;
 
         if (ec.length) {
-            let gl = this.handler.gl;
+            let gl = this.handler.gl!;
 
             this.enableBlendDefault();
 
@@ -748,7 +897,7 @@ class Renderer {
 
             let i = ec.length;
             while (i--) {
-                var eci = ec[i];
+                let eci = ec[i];
                 eci._fadingOpacity && eci.billboardHandler.draw();
             }
 
@@ -784,7 +933,7 @@ class Renderer {
         }
     }
 
-    _clearEntityCollectionQueue() {
+    protected _clearEntityCollectionQueue() {
         this._entityCollections.length = 0;
         this._entityCollections = [];
     }
@@ -793,32 +942,33 @@ class Renderer {
      * Draw nodes.
      * @public
      */
-    draw() {
-        this.activeCamera.checkMoveEnd();
+    public draw() {
+        this.activeCamera!.checkMoveEnd();
 
         let e = this.events;
         e.handleEvents();
 
-        let sceneFramebuffer = this.sceneFramebuffer;
+        let sceneFramebuffer = this.sceneFramebuffer!;
         sceneFramebuffer.activate();
 
-        let h = this.handler, gl = h.gl;
+        let h = this.handler,
+            gl = h.gl!;
 
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         e.dispatch(e.draw, this);
 
-        let frustums = this.activeCamera.frustums;
+        let frustums = this.activeCamera!.frustums;
 
-        let pointerEvent = e.pointerEvent() || this.activeCamera.isMoving;
+        let pointerEvent = e.pointerEvent() || this.activeCamera!.isMoving;
 
         // Rendering scene nodes and entityCollections
         let rn = this._renderNodesArr;
         let k = frustums.length;
 
         while (k--) {
-            this.activeCamera.setCurrentFrustum(k);
+            this.activeCamera!.setCurrentFrustum(k);
             gl.clear(gl.DEPTH_BUFFER_BIT);
 
             let i = rn.length;
@@ -845,7 +995,7 @@ class Renderer {
 
         sceneFramebuffer.deactivate();
 
-        this.blitFramebuffer && sceneFramebuffer.blitTo(this.blitFramebuffer, 0);
+        this.blitFramebuffer && (sceneFramebuffer as Multisample).blitTo(this.blitFramebuffer, 0);
 
         if (pointerEvent) {
             // It works ONLY for 0 (closest) frustum
@@ -857,7 +1007,7 @@ class Renderer {
         }
 
         // Tone mapping followed by rendering on the screen
-        this._fnScreenFrame();
+        this._fnScreenFrame!();
 
         e.dispatch(e.postdraw, this);
 
@@ -867,23 +1017,25 @@ class Renderer {
         e.touchState.moving = false;
     }
 
-    _screenFrameMSAA() {
-        var h = this.handler;
+    protected _screenFrameMSAA() {
+        let h = this.handler;
 
-        var sh = h.programs.toneMapping, p = sh._program, gl = h.gl;
+        let sh = h.programs.toneMapping,
+            p = sh._program,
+            gl = h.gl!;
 
         gl.disable(gl.DEPTH_TEST);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer as WebGLBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
-        this.toneMappingFramebuffer.activate();
+        this.toneMappingFramebuffer!.activate();
 
         sh.activate();
 
         // screen texture
         gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.blitFramebuffer.textures[0]);
+        gl.bindTexture(gl.TEXTURE_2D, this.blitFramebuffer!.textures[0]);
         gl.uniform1i(p.uniforms.hdrBuffer, 0);
 
         gl.uniform1f(p.uniforms.gamma, this.gamma);
@@ -891,12 +1043,11 @@ class Renderer {
         gl.uniform1f(p.uniforms.whitepoint, this.whitepoint);
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-        this.toneMappingFramebuffer.deactivate();
+        this.toneMappingFramebuffer!.deactivate();
 
         // SCREEN PASS
         sh = h.programs.screenFrame;
         p = sh._program;
-        gl = h.gl;
         sh.activate();
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
@@ -906,17 +1057,19 @@ class Renderer {
         gl.enable(gl.DEPTH_TEST);
     }
 
-    _screenFrameNoMSAA() {
+    protected _screenFrameNoMSAA() {
 
         let h = this.handler;
-        let sh = h.programs.screenFrame, p = sh._program, gl = h.gl;
+        let sh = h.programs.screenFrame,
+            p = sh._program,
+            gl = h.gl!;
 
         gl.disable(gl.DEPTH_TEST);
         sh.activate();
         gl.activeTexture(gl.TEXTURE0);
         gl.bindTexture(gl.TEXTURE_2D, this.outputTexture);
         gl.uniform1i(p.uniforms.texture, 0);
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer as WebGLBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
         gl.enable(gl.DEPTH_TEST);
@@ -926,13 +1079,13 @@ class Renderer {
      * Draw picking objects framebuffer.
      * @private
      */
-    _drawPickingBuffer() {
-        this.pickingFramebuffer.activate();
+    protected _drawPickingBuffer() {
+        this.pickingFramebuffer!.activate();
 
         let h = this.handler;
-        let gl = h.gl;
+        let gl = h.gl!;
 
-        if (this.activeCamera.isFirstPass) {
+        if (this.activeCamera!.isFirstPass) {
             gl.clearColor(0.0, 0.0, 0.0, 1.0);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
         } else {
@@ -958,9 +1111,9 @@ class Renderer {
 
         gl.uniform2f(shu.offset, (ms.nx - 0.5) * 2, (0.5 - ms.ny) * 2);
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this._pickingMaskCoordinatesBuffer);
-        gl.vertexAttribPointer(sha.coordinates, this._pickingMaskCoordinatesBuffer.itemSize, gl.FLOAT, false, 0, 0);
-        gl.drawArrays(gl.POINTS, 0, this._pickingMaskCoordinatesBuffer.numItems);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this._pickingMaskCoordinatesBuffer as WebGLBuffer);
+        gl.vertexAttribPointer(sha.coordinates, this._pickingMaskCoordinatesBuffer!.itemSize, gl.FLOAT, false, 0, 0);
+        gl.drawArrays(gl.POINTS, 0, this._pickingMaskCoordinatesBuffer!.numItems);
 
         gl.enable(gl.DEPTH_TEST);
 
@@ -986,20 +1139,20 @@ class Renderer {
 
         gl.disable(gl.STENCIL_TEST);
 
-        this.pickingFramebuffer.deactivate();
+        this.pickingFramebuffer!.deactivate();
     }
 
     /**
      * Draw picking objects framebuffer.
      * @private
      */
-    _drawDistanceBuffer() {
-        this.distanceFramebuffer.activate();
+    protected _drawDistanceBuffer() {
+        this.distanceFramebuffer!.activate();
 
         let h = this.handler;
-        let gl = h.gl;
+        let gl = h.gl!;
 
-        if (this.activeCamera.isFirstPass) {
+        if (this.activeCamera!.isFirstPass) {
             gl.clearColor(0.0, 0.0, 0.0, 1.0);
             gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         } else {
@@ -1020,22 +1173,22 @@ class Renderer {
 
         gl.enable(gl.BLEND);
 
-        this.distanceFramebuffer.deactivate();
+        this.distanceFramebuffer!.deactivate();
     }
 
-    _drawDepthBuffer() {
-        this.depthFramebuffer.activate();
+    protected _drawDepthBuffer() {
+        this.depthFramebuffer!.activate();
 
-        var h = this.handler;
-        var gl = h.gl;
+        let h = this.handler;
+        let gl = h.gl!;
 
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
         gl.enable(gl.DEPTH_TEST);
 
-        var dp = this._depthCallbacks;
-        var i = dp.length;
+        let dp = this._depthCallbacks;
+        let i = dp.length;
         while (i--) {
             /**
              * This callback renders depth frame.
@@ -1044,44 +1197,43 @@ class Renderer {
             dp[i].callback.call(dp[i].sender);
         }
 
-        this.depthFramebuffer.deactivate();
+        this.depthFramebuffer!.deactivate();
 
         //
         // PASS to depth visualization
-        this.screenDepthFramebuffer.activate();
-        var sh = h.programs.depth, p = sh._program;
+        this.screenDepthFramebuffer!.activate();
+        let sh = h.programs.depth, p = sh._program;
 
-        gl = h.gl;
 
-        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer);
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.screenFramePositionBuffer as WebGLBuffer);
         gl.vertexAttribPointer(p.attributes.corners, 2, gl.FLOAT, false, 0, 0);
 
         sh.activate();
 
         gl.activeTexture(gl.TEXTURE0);
-        gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer.textures[1]);
+        gl.bindTexture(gl.TEXTURE_2D, this.depthFramebuffer!.textures[1]);
         gl.uniform1i(p.uniforms.depthTexture, 0);
 
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 
-        this.screenDepthFramebuffer.deactivate();
+        this.screenDepthFramebuffer!.deactivate();
     }
 
-    _readPickingBuffer() {
-        this.pickingFramebuffer.activate();
-        this.pickingFramebuffer.readAllPixels(this._tempPickingPix_);
-        this.pickingFramebuffer.deactivate();
+    protected _readPickingBuffer() {
+        this.pickingFramebuffer!.activate();
+        this.pickingFramebuffer!.readAllPixels(this._tempPickingPix_);
+        this.pickingFramebuffer!.deactivate();
     }
 
-    _readDistanceBuffer() {
-        this.distanceFramebuffer.activate();
-        this.distanceFramebuffer.readAllPixels(this._tempDistancePix_);
-        this.distanceFramebuffer.deactivate();
+    protected _readDistanceBuffer() {
+        this.distanceFramebuffer!.activate();
+        this.distanceFramebuffer!.readAllPixels(this._tempDistancePix_);
+        this.distanceFramebuffer!.deactivate();
     }
 
-    readPickingColor(x, y, outColor) {
-        let w = this.pickingFramebuffer.width;
-        let h = this.pickingFramebuffer.height;
+    public readPickingColor(x: number, y: number, outColor: NumberArray3 | Uint8Array) {
+        let w = this.pickingFramebuffer!.width;
+        let h = this.pickingFramebuffer!.height;
 
         x = Math.round(x * w);
         y = Math.round(y * h);
@@ -1093,10 +1245,10 @@ class Renderer {
         outColor[2] = this._tempPickingPix_[ind + 2];
     }
 
-    readDistanceColor(x, y, outColor) {
+    public readDistanceColor(x: number, y: number, outColor: NumberArray3 | Uint8Array) {
 
-        let w = this.distanceFramebuffer.width;
-        let h = this.distanceFramebuffer.height;
+        let w = this.distanceFramebuffer!.width;
+        let h = this.distanceFramebuffer!.height;
 
         x = Math.round(x * w);
         y = Math.round(y * h);
@@ -1112,14 +1264,14 @@ class Renderer {
      * Function starts renderer
      * @public
      */
-    start() {
+    public start() {
         if (!this._initialized) {
             this.initialize();
         }
         this.handler.start();
     }
 
-    destroy() {
+    public destroy() {
         for (let i in this.controls) {
             this.controls[i].remove();
         }
@@ -1140,18 +1292,23 @@ class Renderer {
 
         this.controlsBag = {};
 
-        this.colorObjects = new Map();
+        this.colorObjects.clear();
+
+        // @ts-ignore
+        this.colorObjects = null;
 
         this._pickingCallbacks = [];
 
         this.pickingFramebuffer = null;
 
+        //@ts-ignore
         this._tempPickingPix_ = null;
 
         this.distanceFramebuffer = null;
 
         this._distanceCallbacks = [];
 
+        //@ts-ignore
         this._tempDistancePix_ = null;
 
         this._depthCallbacks = [];
@@ -1171,10 +1328,9 @@ class Renderer {
 
         this._entityCollections = [];
 
-        this.colorObjects = null;
-
         this.handler.destroy();
 
+        // @ts-ignore
         this.handler = null;
 
         this._initialized = false;
@@ -1182,4 +1338,4 @@ class Renderer {
 
 }
 
-export { Renderer };
+export {Renderer};