@openglobus/og 0.18.0 → 0.18.2

package/{src/webgl/Handler.ts → lib/js/webgl/Handler.js}

@@ -1,55 +1,15 @@
-import {BaseFramebuffer} from "./BaseFramebuffer";
-import {Clock} from "../Clock";
-import {cons} from "../cons";
-import {EventsHandler, createEvents} from "../Events";
-import {getUrlParam, isEmpty, TypedArray} from "../utils/shared";
-import {ImageCanvas} from "../ImageCanvas";
-import {NumberArray2, Vec2} from "../math/Vec2";
-import {ProgramController} from "./ProgramController";
-import {Program} from "./Program";
-import {Stack} from "../Stack";
-
-export type WebGLContextExt = { type: string } & WebGL2RenderingContext;
-export type WebGLBufferExt = { numItems: number; itemSize: number } & WebGLBuffer;
-export type WebGLTextureExt = { default?: boolean } & WebGLTexture;
-export type ImageSource = HTMLCanvasElement | ImageBitmap | ImageData | HTMLImageElement | HTMLVideoElement;
-type CreateTextureFunc = (image: ImageSource, internalFormat?: number, texture?: WebGLTextureExt) => WebGLTextureExt | null;
-
-export interface IHandlerParameters {
-    anisotropy?: number;
-    width?: number;
-    height?: number;
-    pixelRatio?: number;
-    context?: {
-        stencil?: boolean;
-        alpha?: boolean;
-        antialias?: boolean;
-        premultipliedAlpha?: boolean;
-    },
-    extensions?: string[];
-    autoActivate?: boolean;
-}
-
-export interface Texture3DParams {
-    nx: string,
-    px: string,
-    py: string,
-    ny: string,
-    pz: string,
-    nz: string
-}
-
-export interface IDefaultTextureParams {
-    color?: string;
-    url?: string;
-}
-
+import { Clock } from "../Clock";
+import { cons } from "../cons";
+import { createEvents } from "../Events";
+import { getUrlParam, isEmpty } from "../utils/shared";
+import { ImageCanvas } from "../ImageCanvas";
+import { Vec2 } from "../math/Vec2";
+import { ProgramController } from "./ProgramController";
+import { Stack } from "../Stack";
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 const CONTEXT_TYPE = ["webgl2", "webgl"];
-
 // Maximal mipmap levels
 const MAX_LEVELS = 2;
-
 /**
  * A WebGL handler for accessing low-level WebGL capabilities.
  * @class
@@ -62,153 +22,18 @@ const MAX_LEVELS = 2;
  * @param {Array.<string>} [params.extensions] - Additional WebGL extension list. Available by default: EXT_texture_filter_anisotropic.
  */
 class Handler {
-
-    /**
-     * Events.
-     * @public
-     * @type {EventsHandler<["visibilitychange", "resize"]>}
-     */
-    public events: EventsHandler<["visibilitychange", "resize"]>;
-
-    /**
-     * Application default timer.
-     * @public
-     * @type {Clock}
-     */
-    public defaultClock: Clock;
-
-    /**
-     * Custom timers.
-     * @protected
-     * @type{Clock[]}
-     */
-    protected _clocks: Clock[];
-
-    /**
-     * Draw frame time in milliseconds.
-     * @public
-     * @type {number}
-     */
-    public deltaTime: number;
-
-    /**
-     * WebGL rendering canvas element.
-     * @public
-     * @type {HTMLCanvasElement | null}
-     */
-    public canvas: HTMLCanvasElement | null;
-
-    /**
-     * WebGL context.
-     * @public
-     * @type {WebGLContextExt | null}
-     */
-    public gl: WebGLContextExt | null;
-
-    /**
-     * Shader program controller list.
-     * @public
-     * @type {Record<string, ProgramController>}
-     */
-    public programs: Record<string, ProgramController>;
-
-    /**
-     * Current active shader program controller.
-     * @public
-     * @type {ProgramController}
-     */
-    public activeProgram: ProgramController | null;
-
-    /**
-     * Handler parameters.
-     * @private
-     * @type {Object}
-     */
-    protected _params: {
-        anisotropy: number;
-        width: number;
-        height: number;
-        pixelRatio: number;
-        context: {
-            stencil?: boolean;
-            alpha?: boolean;
-            antialias?: boolean;
-            premultipliedAlpha?: boolean;
-        };
-        extensions: string[];
-    };
-
-    public _oneByHeight: number;
-
-    /**
-     * Current WebGL extensions. Becomes here after context initialization.
-     * @public
-     * @type {Record<string, any>}
-     */
-    public extensions: Record<string, any>;
-
-    /**
-     * HTML Canvas target.
-     * @private
-     * @type {string | HTMLCanvasElement | undefined}
-     */
-    protected _canvasTarget: string | HTMLCanvasElement | undefined;
-
-    protected _lastAnimationFrameTime: number;
-
-    protected _initialized: boolean;
-
-    /**
-     * Animation frame function assigned from outside(Ex. from Renderer).
-     * @private
-     * @type {Function}
-     */
-    protected _frameCallback: Function;
-
-    protected _canvasSize: NumberArray2;
-
-    public transparentTexture: WebGLTextureExt | null;
-
-    public defaultTexture: WebGLTextureExt | null;
-
-    public framebufferStack = new Stack<BaseFramebuffer>();
-
-    public createTexture: Record<string, CreateTextureFunc>;
-
-    public createTextureDefault: CreateTextureFunc;
-
-    public ONCANVASRESIZE: Function | null;
-
-    public createTexture_n: CreateTextureFunc;
-    public createTexture_l: CreateTextureFunc;
-    public createTexture_mm: CreateTextureFunc;
-    public createTexture_a: CreateTextureFunc;
-
-    public intersectionObserver?: IntersectionObserver;
-    public resizeObserver?: ResizeObserver;
-
-    protected _requestAnimationFrameId: number = 0;
-
-    constructor(canvasTarget: string | HTMLCanvasElement | undefined, params: IHandlerParameters = {}) {
-
-        this.events = createEvents<["visibilitychange", "resize"]>(["visibilitychange", "resize"]);
-
+    constructor(canvasTarget, params = {}) {
+        this.framebufferStack = new Stack();
+        this._requestAnimationFrameId = 0;
+        this.events = createEvents(["visibilitychange", "resize"]);
         this.defaultClock = new Clock();
-
         this._clocks = [];
-
         this.deltaTime = 0;
-
         this.canvas = null;
-
         this.gl = null;
-
         this.programs = {};
-
         this.activeProgram = null;
-
         this._canvasSize = [0, 0];
-
         this._params = {
             anisotropy: params.anisotropy || 4,
             width: params.width || 256,
@@ -216,78 +41,61 @@ class Handler {
             pixelRatio: getUrlParam('og_dpi') || params.pixelRatio || 1.0,
             extensions: params.extensions || [],
             context: params.context || {}
-        }
-
+        };
         this._oneByHeight = 1.0 / (this._params.height * this._params.pixelRatio);
-
         this.extensions = {};
-
         this._canvasTarget = canvasTarget;
-
         this._lastAnimationFrameTime = 0;
-
         this._initialized = false;
-
         this._frameCallback = function () {
         };
-
         this.transparentTexture = null;
-
         this.defaultTexture = null;
-
         this.framebufferStack = new Stack();
-
         this.createTexture_n = this.createTexture_n_webgl2.bind(this);
         this.createTexture_l = this.createTexture_l_webgl2.bind(this);
         this.createTexture_mm = this.createTexture_mm_webgl2.bind(this);
         this.createTexture_a = this.createTexture_a_webgl2.bind(this);
-
         this.createTexture = {
             "NEAREST": this.createTexture_n,
             "LINEAR": this.createTexture_l,
             "MIPMAP": this.createTexture_mm,
             "ANISOTROPIC": this.createTexture_a
         };
-
         this.createTextureDefault = this.createTexture_n;
-
         this.ONCANVASRESIZE = null;
-
         this._createCanvas();
-
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
     }
-
-    public isInitialized(): boolean {
+    isInitialized() {
         return this._initialized;
     }
-
-    protected _createCanvas() {
+    _createCanvas() {
         if (this._canvasTarget) {
             if (this._canvasTarget instanceof HTMLElement) {
                 this.canvas = this._canvasTarget;
-            } else {
-                this.canvas = (document.getElementById(this._canvasTarget) || document.querySelector(this._canvasTarget)) as HTMLCanvasElement;
             }
-        } else {
+            else {
+                this.canvas = (document.getElementById(this._canvasTarget) || document.querySelector(this._canvasTarget));
+            }
+        }
+        else {
             this.canvas = document.createElement("canvas");
             this.canvas.width = this._params.width;
             this.canvas.height = this._params.height;
         }
     }
-
     /**
      * The return value is null if the extension is not supported, or an extension object otherwise.
      * @param {WebGLRenderingContext | WebGL2RenderingContext | null} gl - WebGl context pointer.
      * @param {string} name - Extension name.
      * @returns {any} -
      */
-    static getExtension(gl: WebGLRenderingContext | WebGL2RenderingContext | null, name: string): any | undefined {
-
-        if (!gl) return;
-
+    static getExtension(gl, name) {
+        if (!gl)
+            return;
         let i, ext;
         for (i in vendorPrefixes) {
             ext = gl.getExtension(vendorPrefixes[i] + name);
@@ -296,53 +104,49 @@ class Handler {
             }
         }
     }
-
     /**
      * Returns a drawing context on the canvas, or null if the context identifier is not supported.
      * @param {HTMLCanvasElement} canvas - HTML canvas object.
      * @param {any} [contextAttributes] - See canvas.getContext contextAttributes.
      * @returns {WebGLContextExt | null} -
      */
-    static getContext(canvas: HTMLCanvasElement, contextAttributes?: any): WebGLContextExt | null {
-        let ctx: WebGLContextExt | null = null;
-
+    static getContext(canvas, contextAttributes) {
+        let ctx = null;
         try {
             let urlParams = new URLSearchParams(location.search);
             let ver = urlParams.get('og_ver');
             if (ver) {
-                ctx = canvas.getContext(ver, contextAttributes) as WebGLContextExt;
+                ctx = canvas.getContext(ver, contextAttributes);
                 if (ctx) {
                     ctx.type = ver;
                 }
-            } else {
+            }
+            else {
                 for (let i = 0; i < CONTEXT_TYPE.length; i++) {
-                    ctx = canvas.getContext(CONTEXT_TYPE[i], contextAttributes) as WebGLContextExt;
+                    ctx = canvas.getContext(CONTEXT_TYPE[i], contextAttributes);
                     if (ctx) {
                         ctx.type = CONTEXT_TYPE[i];
                         break;
                     }
                 }
             }
-        } catch (ex) {
+        }
+        catch (ex) {
             cons.logErr("exception during the GL context initialization");
         }
-
         if (!ctx) {
             cons.logErr("could not initialise WebGL");
         }
-
         return ctx;
     }
-
     /**
      * Sets animation frame function.
      * @public
      * @param {Function} callback - Frame callback.
      */
-    public setFrameCallback(callback: Function) {
+    setFrameCallback(callback) {
         callback && (this._frameCallback = callback);
     }
-
     /**
      * Creates empty texture.
      * @public
@@ -355,41 +159,19 @@ class Handler {
      * @param {number} [level=0] - Specifies the level-of-detail number. Level 0 is the base image level. Level n is the nth mipmap reduction image.
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createEmptyTexture2DExt(
-        width: number = 1,
-        height: number = 1,
-        filter: string = "NEAREST",
-        internalFormat: string = "RGBA",
-        format: string = "RGBA",
-        type: string = "UNSIGNED_BYTE",
-        level: number = 0
-    ): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createEmptyTexture2DExt(width = 1, height = 1, filter = "NEAREST", internalFormat = "RGBA", format = "RGBA", type = "UNSIGNED_BYTE", level = 0) {
+        let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.texImage2D(
-            gl.TEXTURE_2D,
-            level,
-            (gl as any)[internalFormat.toUpperCase()],
-            width,
-            height,
-            0,
-            (gl as any)[format.toUpperCase()],
-            (gl as any)[type.toUpperCase()],
-            null!
-        );
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, (gl as any)[filter.toUpperCase()]);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, (gl as any)[filter.toUpperCase()]);
+        gl.texImage2D(gl.TEXTURE_2D, level, gl[internalFormat.toUpperCase()], width, height, 0, gl[format.toUpperCase()], gl[type.toUpperCase()], null);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl[filter.toUpperCase()]);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl[filter.toUpperCase()]);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates Empty NEAREST filtered texture.
      * @public
@@ -398,36 +180,19 @@ class Handler {
      * @param {number} [internalFormat]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createEmptyTexture_n(
-        width: number,
-        height: number,
-        internalFormat?: number): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createEmptyTexture_n(width, height, internalFormat) {
+        let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.texImage2D(
-            gl.TEXTURE_2D,
-            0,
-            internalFormat || gl.RGBA,
-            width,
-            height,
-            0,
-            gl.RGBA,
-            gl.UNSIGNED_BYTE,
-            null!
-        );
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates empty LINEAR filtered texture.
      * @public
@@ -436,26 +201,19 @@ class Handler {
      * @param {number} [internalFormat]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createEmptyTexture_l(
-        width: number,
-        height: number,
-        internalFormat?: number): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createEmptyTexture_l(width, height, internalFormat) {
+        let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null!);
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates NEAREST filter texture.
      * @public
@@ -464,13 +222,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture=null]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_n_webgl1(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_n_webgl1(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -479,11 +232,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates LINEAR filter texture.
      * @public
@@ -492,13 +243,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_l_webgl1(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_l_webgl1(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
@@ -506,11 +252,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates MIPMAP filter texture.
      * @public
@@ -519,13 +263,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_mm_webgl1(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_mm_webgl1(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -534,11 +273,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates ANISOTROPY filter texture.
      * @public
@@ -547,13 +284,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_a_webgl1(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_a_webgl1(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -563,11 +295,9 @@ class Handler {
         gl.texParameterf(gl.TEXTURE_2D, this.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, this._params.anisotropy);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates NEAREST filter texture.
      * @public
@@ -576,13 +306,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_n_webgl2(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_n_webgl2(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -593,11 +318,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates LINEAR filter texture.
      * @public
@@ -606,13 +329,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_l_webgl2(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_l_webgl2(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -623,11 +341,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates MIPMAP filter texture.
      * @public
@@ -636,13 +352,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_mm_webgl2(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_mm_webgl2(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
@@ -652,11 +363,9 @@ class Handler {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
-
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates ANISOTROPY filter texture.
      * @public
@@ -665,13 +374,8 @@ class Handler {
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public createTexture_a_webgl2(
-        image: ImageSource,
-        internalFormat?: number,
-        texture: WebGLTexture | null = null): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    createTexture_a_webgl2(image, internalFormat, texture = null) {
+        let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
@@ -683,10 +387,9 @@ class Handler {
         gl.texParameterf(gl.TEXTURE_2D, this.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, this._params.anisotropy);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-        gl.bindTexture(gl.TEXTURE_2D, null!);
+        gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
-
     /**
      * Creates cube texture.
      * @public
@@ -699,18 +402,15 @@ class Handler {
      * @param {string} params.nz - Negative Z or back image url.
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    public loadCubeMapTexture(params: Texture3DParams): WebGLTexture | null {
-
-        let gl = this.gl!;
-
+    loadCubeMapTexture(params) {
+        let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
         gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_CUBE_MAP, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-
-        let faces: [string, number][] = [
+        let faces = [
             [params.px, gl.TEXTURE_CUBE_MAP_POSITIVE_X],
             [params.nx, gl.TEXTURE_CUBE_MAP_NEGATIVE_X],
             [params.py, gl.TEXTURE_CUBE_MAP_POSITIVE_Y],
@@ -718,23 +418,20 @@ class Handler {
             [params.pz, gl.TEXTURE_CUBE_MAP_POSITIVE_Z],
             [params.nz, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]
         ];
-
         let imageCanvas = new ImageCanvas();
         imageCanvas.fillEmpty();
         let emptyImage = imageCanvas.getImage();
-
         for (let i = 0; i < faces.length; i++) {
             let face = faces[i][1];
             gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
             //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
             gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, emptyImage);
         }
-
         for (let i = 0; i < faces.length; i++) {
             let face = faces[i][1];
             let image = new Image();
             image.crossOrigin = "";
-            image.onload = (function (texture: WebGLTexture | null, face: number, image: HTMLImageElement) {
+            image.onload = (function (texture, face, image) {
                 return function () {
                     if (gl && texture) {
                         gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
@@ -743,12 +440,10 @@ class Handler {
                     }
                 };
             })(texture, face, image);
-
             image.src = faces[i][0];
         }
         return texture;
     }
-
     /**
      * Adds shader program to the handler.
      * @public
@@ -756,7 +451,7 @@ class Handler {
      * @param {boolean} [notActivate] - If it's true program will not compile.
      * @return {Program} -
      */
-    public addProgram(program: Program, notActivate: boolean = false): Program {
+    addProgram(program, notActivate = false) {
         if (!this.programs[program.name]) {
             let sc = new ProgramController(this, program);
             this.programs[program.name] = sc;
@@ -764,61 +459,58 @@ class Handler {
             if (notActivate) {
                 sc._activated = false;
             }
-        } else {
+        }
+        else {
             console.warn(`Shader program: "${program.name}" already exists.`);
         }
         return program;
     }
-
     /**
      * Removes shader program from handler.
      * @public
      * @param {string} name - Shader program name.
      */
-    public removeProgram(name: string) {
+    removeProgram(name) {
         this.programs[name] && this.programs[name].remove();
     }
-
     /**
      * Adds shader programs to the handler.
      * @public
      * @param {Array.<Program>} programsArr - Shader program array.
      */
-    public addPrograms(programsArr: Program[]) {
+    addPrograms(programsArr) {
         for (let i = 0; i < programsArr.length; i++) {
             this.addProgram(programsArr[i]);
         }
     }
-
     /**
      * Used in addProgram
      * @protected
      * @param {ProgramController} sc - Program controller
      */
-    protected _initProgramController(sc: ProgramController) {
+    _initProgramController(sc) {
         if (this._initialized) {
             sc.initialize();
             if (!this.activeProgram) {
                 this.activeProgram = sc;
                 sc.activate();
-            } else {
+            }
+            else {
                 sc.deactivate();
                 this.activeProgram._program.enableAttribArrays();
                 this.activeProgram._program.use();
             }
         }
     }
-
     /**
      * Used in init function.
      * @private
      */
-    protected _initPrograms() {
+    _initPrograms() {
         for (let p in this.programs) {
             this._initProgramController(this.programs[p]);
         }
     }
-
     /**
      * Initialize additional WebGL extensions.
      * @public
@@ -826,39 +518,33 @@ class Handler {
      * @param {boolean} showLog - Show logging.
      * @return {any} -
      */
-    public initializeExtension(extensionStr: string, showLog: boolean = false): any {
+    initializeExtension(extensionStr, showLog = false) {
         if (!(this.extensions && this.extensions[extensionStr])) {
             let ext = Handler.getExtension(this.gl, extensionStr);
             if (ext) {
                 this.extensions[extensionStr] = ext;
-            } else if (showLog) {
-                console.warn(
-                    "og.webgl.Handler: extension '" + extensionStr + "' doesn't initialize."
-                );
+            }
+            else if (showLog) {
+                console.warn("og.webgl.Handler: extension '" + extensionStr + "' doesn't initialize.");
             }
         }
         return this.extensions && this.extensions[extensionStr];
     }
-
     /**
      * Main function that initialize handler.
      * @public
      */
-    public initialize() {
-
-        if (this._initialized) return;
-
-        if (!this.canvas) return;
-
+    initialize() {
+        if (this._initialized)
+            return;
+        if (!this.canvas)
+            return;
         this.gl = Handler.getContext(this.canvas, this._params.context);
-
-        if (!this.gl) return;
-
+        if (!this.gl)
+            return;
         this._initialized = true;
-
         /** Sets default extensions */
         this._params.extensions.push("EXT_texture_filter_anisotropic");
-
         if (this.gl.type === "webgl") {
             this._params.extensions.push("OES_standard_derivatives");
             this._params.extensions.push("OES_element_index_uint");
@@ -866,105 +552,91 @@ class Handler {
             this._params.extensions.push("ANGLE_instanced_arrays");
             //this._params.extensions.push("WEBGL_draw_buffers");
             //this._params.extensions.push("EXT_frag_depth");
-        } else {
+        }
+        else {
             this._params.extensions.push("EXT_color_buffer_float");
             this._params.extensions.push("OES_texture_float_linear");
             //this._params.extensions.push("WEBGL_draw_buffers");
         }
-
         let i = this._params.extensions.length;
         while (i--) {
             this.initializeExtension(this._params.extensions[i], true);
         }
-
         if (this.gl.type === "webgl") {
             this.createTexture_n = this.createTexture_n_webgl1.bind(this);
             this.createTexture_l = this.createTexture_l_webgl1.bind(this);
             this.createTexture_mm = this.createTexture_mm_webgl1.bind(this);
             this.createTexture_a = this.createTexture_a_webgl1.bind(this);
-        } else {
+        }
+        else {
             this.createTexture_n = this.createTexture_n_webgl2.bind(this);
             this.createTexture_l = this.createTexture_l_webgl2.bind(this);
             this.createTexture_mm = this.createTexture_mm_webgl2.bind(this);
             this.createTexture_a = this.createTexture_a_webgl2.bind(this);
         }
-
         this.createTexture["NEAREST"] = this.createTexture_n;
         this.createTexture["LINEAR"] = this.createTexture_l;
         this.createTexture["MIPMAP"] = this.createTexture_mm;
         this.createTexture["ANISOTROPIC"] = this.createTexture_a;
-
         if (!this.extensions.EXT_texture_filter_anisotropic) {
             this.createTextureDefault = this.createTexture_mm;
-        } else {
+        }
+        else {
             this.createTextureDefault = this.createTexture_a;
         }
-
         /** Initializing shaders and rendering parameters*/
         this._initPrograms();
         this._setDefaults();
-
         this.intersectionObserver = new IntersectionObserver((entries) => {
             this._toggleVisibilityChange(entries[0].isIntersecting);
-        }, {threshold: 0});
-
+        }, { threshold: 0 });
         this.intersectionObserver.observe(this.canvas);
-
         this.resizeObserver = new ResizeObserver(entries => {
             this._toggleVisibilityChange(entries[0].contentRect.width !== 0 && entries[0].contentRect.height !== 0);
         });
-
         this.resizeObserver.observe(this.canvas);
-
         document.addEventListener("visibilitychange", () => {
             this._toggleVisibilityChange(document.visibilityState === 'visible');
         });
     }
-
-    protected _toggleVisibilityChange(visibility: boolean) {
+    _toggleVisibilityChange(visibility) {
         if (visibility) {
             this.start();
             this.ONCANVASRESIZE && this.ONCANVASRESIZE();
             this.events.dispatch(this.events.visibilitychange, true);
-        } else {
+        }
+        else {
             this.events.dispatch(this.events.visibilitychange, false);
             this.stop();
         }
     }
-
     /**
      * Sets default gl render parameters. Used in init function.
      * @protected
      */
-    protected _setDefaults() {
-
+    _setDefaults() {
         let gl = this.gl;
-
-        if (!gl) return;
-        if (!this.canvas) return;
-
+        if (!gl)
+            return;
+        if (!this.canvas)
+            return;
         gl.depthFunc(gl.LESS);
         gl.enable(gl.DEPTH_TEST);
-        this.setSize(
-            this.canvas.clientWidth || this._params.width,
-            this.canvas.clientHeight || this._params.height
-        );
+        this.setSize(this.canvas.clientWidth || this._params.width, this.canvas.clientHeight || this._params.height);
         gl.frontFace(gl.CCW);
         gl.cullFace(gl.BACK);
         gl.enable(gl.CULL_FACE);
         gl.disable(gl.BLEND);
-        this.createDefaultTexture({color: "rgba(0,0,0,0.0)"}, (t: WebGLTextureExt) => {
+        this.createDefaultTexture({ color: "rgba(0,0,0,0.0)" }, (t) => {
             this.transparentTexture = t;
         });
-        this.createDefaultTexture({color: "rgba(255, 255, 255, 1.0)"}, (t: WebGLTextureExt) => {
+        this.createDefaultTexture({ color: "rgba(255, 255, 255, 1.0)" }, (t) => {
             this.defaultTexture = t;
         });
     }
-
-    public getCanvasSize(): NumberArray2 {
+    getCanvasSize() {
         return this._canvasSize;
     }
-
     /**
      * Creates STREAM_DRAW ARRAY buffer.
      * @public
@@ -974,21 +646,16 @@ class Handler {
      * @param {number} [bytes=4] -
      * @return {WebGLBufferExt} -
      */
-    public createStreamArrayBuffer(itemSize: number, numItems: number, usage?: number, bytes: number = 4): WebGLBufferExt {
-        let gl = this.gl!;
-        let buffer: WebGLBufferExt = gl.createBuffer() as WebGLBufferExt;
+    createStreamArrayBuffer(itemSize, numItems, usage, bytes = 4) {
+        let gl = this.gl;
+        let buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
-        gl.bufferData(
-            gl.ARRAY_BUFFER,
-            numItems * itemSize * bytes,
-            usage || gl.STREAM_DRAW
-        );
-        gl.bindBuffer(gl.ARRAY_BUFFER, null!);
+        gl.bufferData(gl.ARRAY_BUFFER, numItems * itemSize * bytes, usage || gl.STREAM_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         buffer.itemSize = itemSize;
         buffer.numItems = numItems;
         return buffer;
     }
-
     /**
      * Sets stream buffer.
      * @public
@@ -997,14 +664,13 @@ class Handler {
      * @param {number} [offset=0] -
      * @return {WebGLBufferExt} -
      */
-    public setStreamArrayBuffer(buffer: WebGLBufferExt, array: TypedArray, offset: number = 0): WebGLBufferExt {
-        let gl = this.gl!;
+    setStreamArrayBuffer(buffer, array, offset = 0) {
+        let gl = this.gl;
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferSubData(gl.ARRAY_BUFFER, offset, array);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null!);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         return buffer;
     }
-
     /**
      * Creates ARRAY buffer.
      * @public
@@ -1014,17 +680,16 @@ class Handler {
      * @param {number} [usage=STATIC_DRAW] - Parameter of the bufferData call can be one of STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW.
      * @return {WebGLBufferExt} -
      */
-    public createArrayBuffer(array: TypedArray, itemSize: number, numItems: number, usage?: number): WebGLBufferExt {
-        let gl = this.gl!;
-        let buffer: WebGLBufferExt = gl.createBuffer() as WebGLBufferExt;
+    createArrayBuffer(array, itemSize, numItems, usage) {
+        let gl = this.gl;
+        let buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, array, usage || gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null!);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         buffer.itemSize = itemSize;
         buffer.numItems = numItems;
         return buffer;
     }
-
     /**
      * Creates ARRAY buffer specific length.
      * @public
@@ -1032,17 +697,16 @@ class Handler {
      * @param {number} [usage=STATIC_DRAW] - Parameter of the bufferData call can be one of STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW.
      * @return {WebGLBufferExt} -
      */
-    public createArrayBufferLength(size: number, usage?: number): WebGLBufferExt {
-        let gl = this.gl!;
-        let buffer: WebGLBufferExt = gl.createBuffer() as WebGLBufferExt;
+    createArrayBufferLength(size, usage) {
+        let gl = this.gl;
+        let buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ARRAY_BUFFER, size, usage || gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ARRAY_BUFFER, null!);
+        gl.bindBuffer(gl.ARRAY_BUFFER, null);
         buffer.itemSize = 1;
         buffer.numItems = size;
         return buffer;
     }
-
     /**
      * Creates ELEMENT ARRAY buffer.
      * @public
@@ -1052,241 +716,209 @@ class Handler {
      * @param {number} [usage=STATIC_DRAW] - Parameter of the bufferData call can be one of STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW.
      * @return {Object} -
      */
-    public createElementArrayBuffer(array: TypedArray, itemSize: number, numItems?: number, usage?: number): WebGLBufferExt {
-        let gl = this.gl!;
-        let buffer = gl.createBuffer() as WebGLBufferExt;
+    createElementArrayBuffer(array, itemSize, numItems, usage) {
+        let gl = this.gl;
+        let buffer = gl.createBuffer();
         gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
         gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, array, usage || gl.STATIC_DRAW);
-        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null!);
+        gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
         buffer.itemSize = itemSize;
         buffer.numItems = numItems || array.length;
         return buffer;
     }
-
     /**
      * Sets handler canvas size.
      * @public
      * @param {number} w - Canvas width.
      * @param {number} h - Canvas height.
      */
-    public setSize(w: number, h: number) {
+    setSize(w, h) {
         this._params.width = w;
         this._params.height = h;
         if (this.canvas) {
             this.canvas.width = w * this._params.pixelRatio;
             this.canvas.height = h * this._params.pixelRatio;
-
             this._canvasSize[0] = this.canvas.width;
             this._canvasSize[1] = this.canvas.height;
-
             this._oneByHeight = 1.0 / this.canvas.height;
-
             this.gl && this.gl.viewport(0, 0, w, h);
             this.ONCANVASRESIZE && this.ONCANVASRESIZE(this.canvas);
             this.events.dispatch(this.events.resize, this);
         }
     }
-
-    public get pixelRatio(): number {
+    get pixelRatio() {
         return this._params.pixelRatio;
     }
-
-    public set pixelRatio(pr: number) {
+    set pixelRatio(pr) {
         this._params.pixelRatio = pr;
         this.setSize(this._params.width, this._params.height);
     }
-
     /**
      * Returns context screen width.
      * @public
      * @returns {number} -
      */
-    public getWidth(): number {
+    getWidth() {
         return this.canvas ? this.canvas.width : 0;
     }
-
     /**
      * Returns context screen height.
      * @public
      * @returns {number} -
      */
-    public getHeight(): number {
+    getHeight() {
         return this.canvas ? this.canvas.height : 0;
     }
-
     /**
      * Returns canvas aspect ratio.
      * @public
      * @returns {number} -
      */
-    public getClientAspect(): number {
+    getClientAspect() {
         return this.canvas ? this.canvas.clientWidth / this.canvas.clientHeight : 0;
     }
-
     /**
      * Returns canvas center coordinates.
      * @public
      * @returns {number} -
      */
-    public getCenter(): Vec2 {
+    getCenter() {
         let c = this.canvas;
         return c ? new Vec2(Math.round(c.width * 0.5), Math.round(c.height * 0.5)) : new Vec2();
     }
-
     /**
      * Draw single frame.
      * @public
      */
-    public drawFrame() {
+    drawFrame() {
         /** Calculating frame time */
         let now = window.performance.now();
         this.deltaTime = now - this._lastAnimationFrameTime;
         this._lastAnimationFrameTime = now;
-
         this.defaultClock.tick(this.deltaTime);
-
         for (let i = 0; i < this._clocks.length; i++) {
             this._clocks[i].tick(this.deltaTime);
         }
-
         /** Canvas resize checking */
-        let canvas = this.canvas!;
-
+        let canvas = this.canvas;
         if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
             if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
                 this.stop();
-            } else if (!document.hidden) {
+            }
+            else if (!document.hidden) {
                 this.start();
                 this.setSize(canvas.clientWidth, canvas.clientHeight);
             }
         }
-
         /** Draw frame */
         this._frameCallback();
     }
-
     /**
      * Clearing gl frame.
      * @public
      */
-    public clearFrame() {
-        let gl = this.gl!;
+    clearFrame() {
+        let gl = this.gl;
         gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
-
     /**
      * Starts animation loop.
      * @public
      */
-    public start() {
+    start() {
         if (!this._requestAnimationFrameId && this._initialized) {
             this._animationFrameCallback();
         }
     }
-
-    public stop() {
+    stop() {
         if (this._requestAnimationFrameId) {
             window.cancelAnimationFrame(this._requestAnimationFrameId);
             this._requestAnimationFrameId = 0;
         }
     }
-
-    public isStopped(): boolean {
+    isStopped() {
         return !this._requestAnimationFrameId;
     }
-
     /**
      * Check is gl context type equals webgl2
      * @public
      */
-    public isWebGl2(): boolean {
+    isWebGl2() {
         return this.gl ? this.gl.type === "webgl2" : false;
     }
-
     /**
      * Make animation.
      * @protected
      */
-    protected _animationFrameCallback() {
+    _animationFrameCallback() {
         this._requestAnimationFrameId = window.requestAnimationFrame(() => {
             this.drawFrame();
             this._requestAnimationFrameId && this._animationFrameCallback();
         });
     }
-
     /**
      * Creates default texture object
      * @public
      * @param {IDefaultTextureParams | null} params - Texture parameters:
      * @param {(texture: WebGLTextureExt) => void} [success] - Creation callback
      */
-    public createDefaultTexture(params: IDefaultTextureParams | null, success: (texture: WebGLTextureExt) => void) {
-
+    createDefaultTexture(params, success) {
         let imgCnv;
         let texture;
-
         if (params && params.color) {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor(params.color);
-            texture = this.createTexture_n(imgCnv.getCanvas())!;
+            texture = this.createTexture_n(imgCnv.getCanvas());
             texture.default = true;
             success(texture);
-        } else if (params && params.url) {
+        }
+        else if (params && params.url) {
             let img = new Image();
             let that = this;
             img.onload = function () {
-                texture = that.createTextureDefault(img)!;
+                texture = that.createTextureDefault(img);
                 texture.default = true;
                 success(texture);
             };
             img.src = params.url;
-        } else {
+        }
+        else {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor("#C5C5C5");
-            texture = this.createTexture_n(imgCnv.getCanvas())!;
+            texture = this.createTexture_n(imgCnv.getCanvas());
             texture.default = true;
             success(texture);
         }
     }
-
-    public deleteTexture(texture: WebGLTextureExt | null | undefined) {
+    deleteTexture(texture) {
         if (texture && !texture.default) {
-            this.gl!.deleteTexture(texture);
+            this.gl.deleteTexture(texture);
         }
     }
-
     /**
      * @public
      */
-    public destroy() {
-
+    destroy() {
         this.resizeObserver?.disconnect();
         this.intersectionObserver?.disconnect();
-
         this.stop();
-
         //
         // Dispose shaders
         //
         for (let p in this.programs) {
             this.removeProgram(p);
         }
-
         //
         // Clear WebGL context
         //
         let gl = this.gl;
-
         if (gl) {
-            gl.deleteTexture(this.transparentTexture as WebGLTexture);
+            gl.deleteTexture(this.transparentTexture);
             this.transparentTexture = null;
-
-            gl.deleteTexture(this.defaultTexture as WebGLTexture);
+            gl.deleteTexture(this.defaultTexture);
             this.defaultTexture = null;
-
             this.framebufferStack = new Stack();
-
             //
             // Clear attrib pointers
             //
@@ -1299,26 +931,24 @@ class Handler {
                 gl.vertexAttrib1f(ii, 0);
             }
             gl.deleteBuffer(tmp);
-
             //
             // Clear all possible textures
             //
             let numTextureUnits = gl.getParameter(gl.MAX_TEXTURE_IMAGE_UNITS);
             for (let ii = 0; ii < numTextureUnits; ++ii) {
                 gl.activeTexture(gl.TEXTURE0 + ii);
-                gl.bindTexture(gl.TEXTURE_CUBE_MAP, null!);
-                gl.bindTexture(gl.TEXTURE_2D, null!);
+                gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
+                gl.bindTexture(gl.TEXTURE_2D, null);
             }
-
             //
             // Hard reset
             //
             gl.activeTexture(gl.TEXTURE0);
-            gl.useProgram(null!);
-            gl.bindBuffer(gl.ARRAY_BUFFER, null!);
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null!);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null!);
-            gl.bindRenderbuffer(gl.RENDERBUFFER, null!);
+            gl.useProgram(null);
+            gl.bindBuffer(gl.ARRAY_BUFFER, null);
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
+            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
             gl.disable(gl.BLEND);
             gl.disable(gl.CULL_FACE);
             gl.disable(gl.DEPTH_TEST);
@@ -1331,7 +961,6 @@ class Handler {
             gl.clearDepth(1);
             gl.clearStencil(-1);
         }
-
         //
         // Destroy canvas
         //
@@ -1343,26 +972,21 @@ class Handler {
             this.canvas.height = 1;
             this.canvas = null;
         }
-
         this.gl = null;
-
         this._initialized = false;
     }
-
-    public addClock(clock: Clock) {
+    addClock(clock) {
         if (!clock.__handler) {
             clock.__handler = this;
             this._clocks.push(clock);
         }
     }
-
-    public addClocks(clockArr: Clock[]) {
+    addClocks(clockArr) {
         for (let i = 0; i < clockArr.length; i++) {
             this.addClock(clockArr[i]);
         }
     }
-
-    public removeClock(clock: Clock) {
+    removeClock(clock) {
         if (clock.__handler) {
             let c = this._clocks;
             let i = c.length;
@@ -1375,40 +999,5 @@ class Handler {
             }
         }
     }
-
-    // var loadTextureData = function(textureName, callback) {
-    //     const xhr = new XMLHttpRequest();
-    //     xhr.open('GET', textureName);
-    //     xhr.responseType = 'arraybuffer';
-    //     xhr.onload = (event) => {
-    //         const data = new DataView(xhr.response);
-    //         const array =
-    //             new Float32Array(data.byteLength / Float32Array.BYTES_PER_ELEMENT);
-    //         for (let i = 0; i < array.length; ++i) {
-    //             array[i] = data.getFloat32(i * Float32Array.BYTES_PER_ELEMENT, true);
-    //         }
-    //         callback(array);
-    //     };
-    //     xhr.send();
-    // }
-
-    // loadTextureData('transmittance.dat', (data) => {
-    //
-    //     let gl = this.renderer.handler.gl;
-    //
-    //     const texture = gl.createTexture();
-    //     gl.activeTexture(gl.TEXTURE0);
-    //     gl.bindTexture(gl.TEXTURE_2D, texture);
-    //     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    //     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    //     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    //     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    //     gl.texImage2D(gl.TEXTURE_2D, 0, gl.getExtension('OES_texture_float_linear') ? gl.RGBA32F : gl.RGBA16F,
-    //         TRANSMITTANCE_TEXTURE_WIDTH, TRANSMITTANCE_TEXTURE_HEIGHT, 0, gl.RGBA,
-    //         gl.FLOAT, data);
-    //
-    //     this.transmittanceTextureBrn = texture;
-    // });
 }
-
-export {Handler};
+export { Handler };