@openglobus/og 0.11.5 → 0.12.0

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 {
@@ -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;
                 }
@@ -219,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);
 
@@ -245,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
@@ -294,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);
@@ -315,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);
@@ -335,12 +290,12 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    static createTexture_n(handler, image) {
-        var gl = handler.gl;
+    createTexture_n_webgl1(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.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);
@@ -355,11 +310,13 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    static createTexture_l(handler, image) {
-        var gl = handler.gl;
-        var texture = gl.createTexture();
+    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, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
+
+        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.
      */
-    static createTexture_mm(handler, image) {
-        var gl = handler.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,17 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    static createTexture_a(handler, image) {
-        var gl = handler.gl;
-        var texture = gl.createTexture();
+    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, 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.texParameterf(
-            gl.TEXTURE_2D,
-            handler.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
-            handler._params.anisotropy
-        );
+        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,29 +371,95 @@ class Handler {
     }
 
     /**
-     * Creates DEFAULT filter texture, ANISOTROPY is default.
+     * Creates NEAREST filter texture.
      * @public
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture(image) {
-        return Handler.createTexture_a(this, image);
-    }
+    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.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);
 
-    createTexture_n(image) {
-        return Handler.createTexture_n(this, 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;
     }
 
-    createTexture_l(image) {
-        return Handler.createTexture_l(this, image);
+    /**
+     * 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;
     }
 
-    createTexture_mm(image) {
-        return Handler.createTexture_mm(this, image);
+    /**
+     * 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.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;
     }
 
-    createTexture_a(image) {
-        return Handler.createTexture_a(this, image);
+    /**
+     * Creates ANISOTROPY filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    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;
     }
 
     /**
@@ -452,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],
@@ -469,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];
@@ -505,7 +528,7 @@ class Handler {
      */
     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) {
@@ -534,7 +557,7 @@ class Handler {
      * @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]);
         }
     }
@@ -563,7 +586,7 @@ class Handler {
      * @private
      */
     _initPrograms() {
-        for (var p in this.programs) {
+        for (let p in this.programs) {
             this._initProgramController(this.programs[p]);
         }
     }
@@ -577,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) {
@@ -618,13 +641,32 @@ 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);
         }
 
+        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 {
+            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*/
@@ -646,7 +688,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;
         });
@@ -710,7 +752,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,
@@ -750,7 +792,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);
@@ -759,6 +801,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
@@ -769,7 +830,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);
@@ -785,24 +846,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
@@ -836,7 +899,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));
     }
 
@@ -847,19 +910,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 (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
             this.setSize(canvas.clientWidth, canvas.clientHeight);
         }
 
@@ -872,7 +936,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);
     }
@@ -914,17 +978,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 = Handler.createTexture_n(this, imgCnv._canvas);
+            texture = this.createTexture_n_webgl2(imgCnv._canvas);
             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;
@@ -934,7 +998,7 @@ class Handler {
         } else {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor("#C5C5C5");
-            texture = Handler.createTexture_n(this, imgCnv._canvas);
+            texture = this.createTexture_n_webgl2(imgCnv._canvas);
             texture.default = true;
             success(texture);
         }
@@ -944,11 +1008,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);
         }
 
@@ -965,8 +1029,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);
@@ -975,7 +1039,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);
@@ -1013,15 +1077,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;
@@ -1033,11 +1097,4 @@ class Handler {
     }
 }
 
-export const createTexture = {
-    NEAREST: Handler.createTexture_n,
-    LINEAR: Handler.createTexture_l,
-    MIPMAP: Handler.createTexture_mm,
-    ANISOTROPHIC: Handler.createTexture_a
-};
-
 export { Handler };