@openglobus/og 0.11.2 → 0.11.7

package/src/og/webgl/Handler.js

@@ -12,25 +12,20 @@ import { ProgramController } from "./ProgramController.js";
 import { Stack } from "../Stack.js";
 import { Vec2 } from "../math/Vec2.js";
 
-/**
- * Maximum texture image size.
- * @const
- * @type {number}
- */
-const MAX_SIZE = 4096;
-
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 
+// Maximal mipmap levels
+const MAX_LEVELS = 2;
+
 /**
  * A WebGL handler for accessing low-level WebGL capabilities.
  * @class
  * @param {string} id - Canvas element id that WebGL handler assing with. If it's null
  * or undefined creates hidden canvas and handler bacomes hidden.
  * @param {Object} [params] - Handler options:
- * @param {number} [params.anisotropy] - Anisitropy filter degree. 8 is default.
+ * @param {number} [params.anisotropy] - Anisotropy filter degree. 8 is default.
  * @param {number} [params.width] - Hidden handler width. 256 is default.
  * @param {number} [params.height] - Hidden handler height. 256 is default.
- * @param {Object} [param.scontext] - Native WebGL context attributes. See https://www.khronos.org/registry/webgl/specs/latest/1.0/#WEBGLCONTEXTATTRIBUTES
  * @param {Array.<string>} [params.extensions] - Additional WebGL extension list. Available by default: EXT_texture_filter_anisotropic.
  */
 class Handler {
@@ -40,14 +35,14 @@ class Handler {
         /**
          * Application default timer.
          * @public
-         * @type {og.Clock}
+         * @type {Clock}
          */
         this.defaultClock = new Clock();
 
         /**
          * Custom timers.
          * @protected
-         * @type{og.Clock[]}
+         * @type{Clock[]}
          */
         this._clocks = [];
 
@@ -83,7 +78,7 @@ class Handler {
         /**
          * Current active shader program controller.
          * @public
-         * @type {og.webgl.ProgramController}
+         * @type {ProgramController}
          */
         this.activeProgram = null;
 
@@ -93,21 +88,13 @@ class Handler {
          * @type {Object}
          */
         this._params = params || {};
-        this._params.anisotropy = this._params.anisotropy || 8;
-        let w = this._params.width;
-        if (w > MAX_SIZE) {
-            w = MAX_SIZE;
-        }
-        this._params.width = w || 256;
-
-        var h = this._params.height;
-        if (h > MAX_SIZE) {
-            h = MAX_SIZE;
-        }
-        this._params.height = h || 256;
+        this._params.anisotropy = this._params.anisotropy || 4;
+        this._params.width = this._params.width || 256;
+        this._params.height = this._params.height || 256;
+        this._params.pixelRatio = this._params.pixelRatio || 1.0;
         this._params.context = this._params.context || {};
         this._params.extensions = this._params.extensions || [];
-        this._oneByHeight = 1 / this._params.height;
+        this._oneByHeight = 1.0 / (this._params.height * this._params.pixelRatio);
 
         /**
          * Current WebGL extensions. Becomes here after context initialization.
@@ -132,12 +119,21 @@ class Handler {
          * @private
          * @type {frameCallback}
          */
-        this._frameCallback = function () {};
+        this._frameCallback = function () { };
 
         this.transparentTexture = null;
 
         this.framebufferStack = new Stack();
 
+        this.createTexture = {
+            "NEAREST": null,
+            "LINEAR": null,
+            "MIPMAP": null,
+            "ANISOTROPIC": null
+        };
+
+        this.createTextureDefault = null;
+
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
@@ -150,7 +146,7 @@ class Handler {
      * @returns {Object} -
      */
     static getExtension(gl, name) {
-        var i, ext;
+        let i, ext;
         for (i in vendorPrefixes) {
             ext = gl.getExtension(vendorPrefixes[i] + name);
             if (ext) {
@@ -168,12 +164,13 @@ class Handler {
      */
     static getContext(canvas, contextAttributes) {
         const CONTEXT_TYPE = ["webgl2", "webgl"];
-        var ctx = null;
+        let ctx = null;
 
         try {
             for (let i = 0; i < CONTEXT_TYPE.length; i++) {
                 ctx = canvas.getContext(CONTEXT_TYPE[i], contextAttributes);
                 if (ctx) {
+                    console.log(CONTEXT_TYPE[i]);
                     ctx.type = CONTEXT_TYPE[i];
                     break;
                 }
@@ -198,26 +195,6 @@ class Handler {
         callback && (this._frameCallback = callback);
     }
 
-    /**
-     * Creates NEAREST filter texture.
-     * @public
-     * @param {Object} image - Image or Canvas object.
-     * @returns {Object} - WebGL texture object.
-     */
-    createTexture_n(image) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-        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);
-        return texture;
-    }
-
     /**
      * Creates empty texture.
      * @public
@@ -239,8 +216,8 @@ class Handler {
         type = "UNSIGNED_BYTE",
         level = 0
     ) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+        let gl = this.gl;
+        let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
 
@@ -265,48 +242,6 @@ class Handler {
         return texture;
     }
 
-    ///**
-    // * Creates Empty half float texture.
-    // * @public
-    // * @param {number} width - Empty texture width.
-    // * @param {number} height - Empty texture height.
-    // * @returns {Object} - WebGL half float texture object.
-    // */
-    //createEmptyTexture_hf(width, height) {
-    //    var gl = this.gl;
-    //    var texture = gl.createTexture();
-    //    gl.bindTexture(gl.TEXTURE_2D, texture);
-    //    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    //    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.HALF_FLOAT_OES, 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);
-    //    return texture;
-    //}
-
-    ///**
-    // * Creates Empty float texture.
-    // * @public
-    // * @param {number} width - Empty texture width.
-    // * @param {number} height - Empty texture height.
-    // * @returns {Object} - WebGL float texture object.
-    // */
-    //createEmptyTexture_f(width, height) {
-    //    var gl = this.gl;
-    //    var texture = gl.createTexture();
-    //    gl.bindTexture(gl.TEXTURE_2D, texture);
-    //    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-    //    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, 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);
-    //    return texture;
-    //}
-
     /**
      * Creates Empty NEAREST filtered texture.
      * @public
@@ -314,12 +249,12 @@ class Handler {
      * @param {number} height - Empty texture height.
      * @returns {Object} - WebGL texture object.
      */
-    createEmptyTexture_n(width, height) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+    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, 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);
@@ -335,12 +270,12 @@ class Handler {
      * @param {number} height - Empty texture height.
      * @returns {Object} - WebGL texture object.
      */
-    createEmptyTexture_l(width, height) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+    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, 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);
@@ -350,16 +285,38 @@ class Handler {
     }
 
     /**
-     * Creates LINEAR filter texture.
+     * Creates NEAREST filter texture.
      * @public
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture_l(image) {
+    createTexture_n_webgl1(image, internalFormat) {
         var gl = this.gl;
         var texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+        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);
+        return texture;
+    }
+
+    /**
+     * Creates LINEAR filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    createTexture_l_webgl1(image, internalFormat) {
+        let gl = this.gl;
+        let texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
         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);
@@ -374,12 +331,14 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture_mm(image) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+    createTexture_mm_webgl1(image, 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, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
         gl.generateMipmap(gl.TEXTURE_2D);
         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);
@@ -394,19 +353,85 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture_a(image) {
+    createTexture_a_webgl1(image, 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, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        gl.generateMipmap(gl.TEXTURE_2D);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+        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);
+        return texture;
+    }
+
+    /**
+     * Creates NEAREST filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    createTexture_n_webgl2(image, internalFormat) {
         var gl = this.gl;
         var texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat || gl.RGBA8, image.width, image.height);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        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);
+        return texture;
+    }
+
+    /**
+     * Creates LINEAR filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    createTexture_l_webgl2(image, internalFormat) {
+        let gl = this.gl;
+        let texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat || gl.RGBA8, image.width, image.height);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        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);
+        return texture;
+    }
+
+    /**
+     * Creates MIPMAP filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    createTexture_mm_webgl2(image, internalFormat) {
+        let gl = this.gl;
+        let texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+        gl.texStorage2D(gl.TEXTURE_2D, MAX_LEVELS, internalFormat || gl.RGBA8, image.width, image.height);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
         gl.generateMipmap(gl.TEXTURE_2D);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
-        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);
@@ -414,13 +439,27 @@ class Handler {
     }
 
     /**
-     * Creates DEFAULT filter texture, ANISOTROPY is default.
+     * Creates ANISOTROPY filter texture.
      * @public
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture(image) {
-        return this.createTexture_a(image);
+    createTexture_a_webgl2(image, internalFormat) {
+        let gl = this.gl;
+        let texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+
+        gl.texStorage2D(gl.TEXTURE_2D, MAX_LEVELS, internalFormat || gl.RGBA8, image.width, image.height);
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        gl.generateMipmap(gl.TEXTURE_2D);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+        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);
+        return texture;
     }
 
     /**
@@ -436,15 +475,15 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     loadCubeMapTexture(params) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+        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);
 
-        var faces = [
+        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],
@@ -453,9 +492,9 @@ class Handler {
             [params.nz, gl.TEXTURE_CUBE_MAP_NEGATIVE_Z]
         ];
 
-        var imageCanvas = new ImageCanvas();
+        let imageCanvas = new ImageCanvas();
         imageCanvas.fillEmpty();
-        var emptyImage = imageCanvas.getImage();
+        let emptyImage = imageCanvas.getImage();
 
         for (let i = 0; i < faces.length; i++) {
             let face = faces[i][1];
@@ -483,13 +522,13 @@ class Handler {
     /**
      * Adds shader program to the handler.
      * @public
-     * @param {og.webgl.Program} program - Shader program.
+     * @param {Program} program - Shader program.
      * @param {boolean} [notActivate] - If it's true program will not compile.
-     * @return {og.webgl.Program} -
+     * @return {Program} -
      */
     addProgram(program, notActivate) {
         if (!this.programs[program.name]) {
-            var sc = new ProgramController(this, program);
+            let sc = new ProgramController(this, program);
             this.programs[program.name] = sc;
             this._initProgramController(sc);
             if (notActivate) {
@@ -515,10 +554,10 @@ class Handler {
     /**
      * Adds shader programs to the handler.
      * @public
-     * @param {Array.<og.webgl.Program>} programsArr - Shader program array.
+     * @param {Array.<Program>} programsArr - Shader program array.
      */
     addPrograms(programsArr) {
-        for (var i = 0; i < programsArr.length; i++) {
+        for (let i = 0; i < programsArr.length; i++) {
             this.addProgram(programsArr[i]);
         }
     }
@@ -526,7 +565,7 @@ class Handler {
     /**
      * Used in addProgram
      * @private
-     * @param {og.webgl.ProgramController} sc - Program controller
+     * @param {ProgramController} sc - Program controller
      */
     _initProgramController(sc) {
         if (this._initialized) {
@@ -547,7 +586,7 @@ class Handler {
      * @private
      */
     _initPrograms() {
-        for (var p in this.programs) {
+        for (let p in this.programs) {
             this._initProgramController(this.programs[p]);
         }
     }
@@ -561,7 +600,7 @@ class Handler {
      */
     initializeExtension(extensionStr, showLog) {
         if (!(this.extensions && this.extensions[extensionStr])) {
-            var ext = Handler.getExtension(this.gl, extensionStr);
+            let ext = Handler.getExtension(this.gl, extensionStr);
             if (ext) {
                 this.extensions[extensionStr] = ext;
             } else if (showLog) {
@@ -578,7 +617,6 @@ class Handler {
      * @public
      */
     initialize() {
-
         if (this._id) {
             this.canvas = document.getElementById(this._id);
         } else {
@@ -603,13 +641,28 @@ class Handler {
             this._params.extensions.push("OES_texture_float_linear");
         }
 
-        var i = this._params.extensions.length;
+        let i = this._params.extensions.length;
         while (i--) {
             this.initializeExtension(this._params.extensions[i], true);
         }
 
+        //
+        //TODO: webgl1 case
+        //
+        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.createTexture = this.createTexture_mm;
+            this.createTextureDefault = this.createTexture_mm;
+        } else {
+            this.createTextureDefault = this.createTexture_a;
         }
 
         /** Initilalize shaders and rendering parameters*/
@@ -631,7 +684,7 @@ class Handler {
         this.gl.cullFace(this.gl.BACK);
         this.activateFaceCulling();
         this.deactivateBlending();
-        var that = this;
+        let that = this;
         this.createDefaultTexture({ color: "rgba(0,0,0,0.0)" }, function (t) {
             that.transparentTexture = t;
         });
@@ -695,7 +748,7 @@ class Handler {
      * @return {Object} -
      */
     createStreamArrayBuffer(itemSize, numItems, usage, bites = 4) {
-        var buffer = this.gl.createBuffer();
+        let buffer = this.gl.createBuffer();
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
         this.gl.bufferData(
             this.gl.ARRAY_BUFFER,
@@ -735,7 +788,7 @@ class Handler {
      * @return {Object} -
      */
     createArrayBuffer(array, itemSize, numItems, usage) {
-        var buffer = this.gl.createBuffer();
+        let buffer = this.gl.createBuffer();
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
         this.gl.bufferData(this.gl.ARRAY_BUFFER, array, usage || this.gl.STATIC_DRAW);
         this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
@@ -744,6 +797,25 @@ class Handler {
         return buffer;
     }
 
+    /**
+     * Creates ARRAY buffer specific length.
+     * @public
+     * @param {Array.<number>} array - Input array.
+     * @param {number} itemSize - Array item size.
+     * @param {number} numItems - Items quantity.
+     * @param {number} [usage=STATIC_DRAW] - Parameter of the bufferData call can be one of STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW.
+     * @return {Object} -
+     */
+    createArrayBufferLength(size, usage) {
+        let buffer = this.gl.createBuffer();
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, buffer);
+        this.gl.bufferData(this.gl.ARRAY_BUFFER, size, usage || this.gl.STATIC_DRAW);
+        this.gl.bindBuffer(this.gl.ARRAY_BUFFER, null);
+        buffer.itemSize = 1;
+        buffer.numItems = size;
+        return buffer;
+    }
+
     /**
      * Creates ELEMENT ARRAY buffer.
      * @public
@@ -754,7 +826,7 @@ class Handler {
      * @return {Object} -
      */
     createElementArrayBuffer(array, itemSize, numItems, usage) {
-        var buffer = this.gl.createBuffer();
+        let buffer = this.gl.createBuffer();
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, buffer);
         this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, array, usage || this.gl.STATIC_DRAW);
         this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, null);
@@ -770,25 +842,26 @@ class Handler {
      * @param {number} h - Canvas height.
      */
     setSize(w, h) {
-
-        if (w > MAX_SIZE) {
-            w = MAX_SIZE;
-        }
-
-        if (h > MAX_SIZE) {
-            h = MAX_SIZE;
-        }
-
         this._params.width = w;
         this._params.height = h;
-        this.canvas.width = w;
-        this.canvas.height = h;
-        this._oneByHeight = 1 / h;
+        this.canvas.width = w * this._params.pixelRatio;
+        this.canvas.height = h * this._params.pixelRatio;
+
+        this._oneByHeight = 1.0 / this.canvas.height;
 
         this.gl && this.gl.viewport(0, 0, w, h);
         this.onCanvasResize && this.onCanvasResize(this.canvas);
     }
 
+    get pixelRatio() {
+        return this._params.pixelRatio;
+    }
+
+    set pixelRatio(pr) {
+        this._params.pixelRatio = pr;
+        this.setSize(this._params.width, this._params.height);
+    }
+
     /**
      * Returns context screen width.
      * @public
@@ -822,7 +895,7 @@ class Handler {
      * @returns {number} -
      */
     getCenter() {
-        var c = this.canvas;
+        let c = this.canvas;
         return new Vec2(Math.round(c.width * 0.5), Math.round(c.height * 0.5));
     }
 
@@ -833,19 +906,20 @@ class Handler {
      */
     drawFrame() {
         /** Calculating frame time */
-        var now = window.performance.now();
+        let now = window.performance.now();
         this.deltaTime = now - this._lastAnimationFrameTime;
         this._lastAnimationFrameTime = now;
 
         this.defaultClock._tick(this.deltaTime);
 
-        for (var i = 0; i < this._clocks.length; i++) {
+        for (let i = 0; i < this._clocks.length; i++) {
             this._clocks[i]._tick(this.deltaTime);
         }
 
         /** Canvas resize checking */
-        var canvas = this.canvas;
-        if (canvas.clientWidth !== canvas.width || canvas.clientHeight !== canvas.height) {
+        let canvas = this.canvas;
+
+        if (canvas.clientWidth * this._params.pixelRatio !== canvas.width || canvas.clientHeight * this._params.pixelRatio !== canvas.height) {
             this.setSize(canvas.clientWidth, canvas.clientHeight);
         }
 
@@ -858,7 +932,7 @@ class Handler {
      * @public
      */
     clearFrame() {
-        var gl = this.gl;
+        let gl = this.gl;
         this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
     }
@@ -900,17 +974,17 @@ class Handler {
      * @param {callback} [success] - Creation callback
      */
     createDefaultTexture(params, success) {
-        var imgCnv;
-        var texture;
+        let imgCnv;
+        let texture;
         if (params && params.color) {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor(params.color);
-            texture = this.createTexture_n(imgCnv._canvas);
+            texture = this.createTexture_n_webgl2(imgCnv._canvas, this.gl.RGBA8);
             texture.default = true;
             success(texture);
         } else if (params && params.url) {
-            var img = new Image();
-            var that = this;
+            let img = new Image();
+            let that = this;
             img.onload = function () {
                 texture = that.createTexture(this);
                 texture.default = true;
@@ -920,7 +994,7 @@ class Handler {
         } else {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor("#C5C5C5");
-            texture = this.createTexture_n(imgCnv._canvas);
+            texture = this.createTexture_n_webgl2(imgCnv._canvas, this.gl.RGBA8);
             texture.default = true;
             success(texture);
         }
@@ -930,11 +1004,11 @@ class Handler {
      * @public
      */
     destroy() {
-        var gl = this.gl;
+        let gl = this.gl;
 
         this.stop();
 
-        for (var p in this.programs) {
+        for (let p in this.programs) {
             this.removeProgram(p);
         }
 
@@ -951,8 +1025,8 @@ class Handler {
         this.canvas.height = 1;
         this.canvas = null;
 
-        var numAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
-        var tmp = gl.createBuffer();
+        let numAttribs = gl.getParameter(gl.MAX_VERTEX_ATTRIBS);
+        let tmp = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, tmp);
         for (let ii = 0; ii < numAttribs; ++ii) {
             gl.disableVertexAttribArray(ii);
@@ -961,7 +1035,7 @@ class Handler {
         }
         gl.deleteBuffer(tmp);
 
-        var numTextureUnits = gl.getParameter(gl.MAX_TEXTlURE_IMAGE_UNITS);
+        let numTextureUnits = gl.getParameter(gl.MAX_TEXTlURE_IMAGE_UNITS);
         for (let ii = 0; ii < numTextureUnits; ++ii) {
             gl.activeTexture(gl.TEXTURE0 + ii);
             gl.bindTexture(gl.TEXTURE_CUBE_MAP, null);
@@ -999,15 +1073,15 @@ class Handler {
     }
 
     addClocks(clockArr) {
-        for (var i = 0; i < clockArr.length; i++) {
+        for (let i = 0; i < clockArr.length; i++) {
             this.addClock(clockArr[i]);
         }
     }
 
     removeClock(clock) {
         if (clock.__handler) {
-            var c = this._clocks;
-            var i = c.length;
+            let c = this._clocks;
+            let i = c.length;
             while (i--) {
                 if (c[i].equal(clock)) {
                     clock.__handler = null;