@openglobus/og 0.11.6 → 0.12.1

package/src/og/shaders/toneMapping.js

@@ -80,6 +80,7 @@ export function toneMapping() {
                 float oneByGamma = gamma / gamma;
                 float oneByWhitePoint = whitepoint / whitepoint;
                 vec3 mapped = ReinhardToneMapping2(hdrColor) * oneByGamma * oneByWhitePoint;
+                //vec3 mapped = ACESFilmicToneMapping(hdrColor) * oneByGamma * oneByWhitePoint;
 
                 mapped = pow(mapped, vec3(1.0 / gamma));
 

package/src/og/shapes/BaseShape.js

@@ -304,7 +304,7 @@ class BaseShape {
             var img = new Image();
             var that = this;
             img.onload = function () {
-                that.texture = renderNode.renderer.handler.createTexture(this);
+                that.texture = renderNode.renderer.handler.createTextureDefault(this);
             };
             img.src = this._src;
         }

package/src/og/terrain/EmptyTerrain.js

@@ -14,7 +14,9 @@ class EmptyTerrain {
     constructor(options = {}) {
         this.equalizeVertices = false;
 
-        this.equalizeNormals = false;
+        this.equalizeNormals = false;
+
+        this.isEmpty = true;
 
         /**
          * Provider name is "empty"
@@ -106,7 +108,6 @@ class EmptyTerrain {
 
     set geoid(geoid) {
         this._geoid = geoid;
-        //...this._planet
     }
 
     get geoid() {

package/src/og/terrain/GlobusTerrain.js

@@ -66,6 +66,8 @@ class GlobusTerrain extends EmptyTerrain {
          */
         this.events = new Events(EVENT_NAMES, this);
 
+        this.isEmpty = false;
+
         this.equalizeNormals = true;
 
         /**

package/src/og/utils/FontAtlas.js

@@ -138,10 +138,14 @@ class FontAtlas {
 
         let img = new Image();
         img.onload = () => {
-            atlas.createTexture(img);
+            this._createTexture(atlas, img);
             def.resolve(index);
         };
         img.src = ARIAL_FONT_B64;
+    }
+
+    _createTexture(atlas, img) {
+        atlas.createTexture(img);
     }
 
     loadFont(faceName, srcDir, atlasUrl) {
@@ -183,7 +187,7 @@ class FontAtlas {
 
                 let img = new Image();
                 img.onload = () => {
-                    atlas.createTexture(img);
+                    this._createTexture(atlas, img);
                     def.resolve(index);
                 };
 

package/src/og/utils/GeoImageCreator.js

@@ -151,7 +151,11 @@ export class GeoImageCreator {
                 `precision highp float;
                         uniform sampler2D sourceTexture;
                         varying vec2 v_texCoords;
-                        void main () { 
+                        void main () {
+                            if(v_texCoords.x <= 0.001 || v_texCoords.x >= 0.999 ||
+                                v_texCoords.y <= 0.001 || v_texCoords.y >= 0.999) {
+                                discard;
+                            }
                             gl_FragColor = texture2D(sourceTexture, v_texCoords);
                         }`
         }));

package/src/og/utils/Loader.js

@@ -16,7 +16,7 @@ if (window && !('createImageBitmap' in window)) {
 
 export class Loader {
 
-    constructor(maxRequests = 12) {
+    constructor(maxRequests = 24) {
 
         this.MAX_REQUESTS = maxRequests;
 

package/src/og/utils/PlainSegmentWorker.js

@@ -222,19 +222,6 @@ const _programm = `
         res.x = nc * Math.sin(lonrad);
         res.y = (N * (1.0 - E2) + h) * slt;
         res.z = nc * Math.cos(lonrad);
-
-        //let cosLat = Math.cos(lat * RADIANS)
-        //let sinLat = Math.sin(lat * RADIANS)
-
-        //let cosLong = Math.cos(lon * RADIANS)
-        //let sinLong = Math.sin(lon * RADIANS)
-
-        //let c = 1.0 / Math.sqrt(cosLat * cosLat + (1 - f) * (1 - f) * sinLat * sinLat)
-        //s = (1 - f) * (1 - f) * c
-
-        //x = (R*c + altitude) * cosLat * cosLong
-        //y = (R*c + altitude) * cosLat * sinLong
-        //z = (R*s + altitude) * sinLat
     };
 
     var lonLatToCartesianInverse = function (lon, lat, heightFactor, res){

package/src/og/utils/TextureAtlas.js

@@ -180,14 +180,14 @@ class TextureAtlas {
      * Creates atlas gl texture.
      * @public
      */
-    createTexture(img) {
+    createTexture(img, internalFormat) {
         if (this._handler) {
             this._handler.gl.deleteTexture(this.texture);
             if (img) {
                 this.canvas.resize(img.width, img.height);
                 this.canvas.drawImage(img, 0, 0, img.width, img.height);
             }
-            this.texture = this._handler.createTexture_l(this.canvas._canvas);
+            this.texture = this._handler.createTexture_l(this.canvas._canvas, internalFormat);
         }
     }
 

package/src/og/utils/VectorTileCreator.js

@@ -217,8 +217,6 @@ export class VectorTileCreator {
 
             // var prevLayerId = -1;
 
-            var extentParams = new Float32Array(4);
-
             var extentParamsHigh = new Float32Array(4);
             var extentParamsLow = new Float32Array(4);
 
@@ -245,7 +243,7 @@ export class VectorTileCreator {
 
                     f.bindOutputTexture(texture);
 
-                    gl.clearColor(1.0, 1.0, 1.0, 0.0);
+                    gl.clearColor(0.0, 0.0, 0.0, 0.0);
                     gl.clear(gl.COLOR_BUFFER_BIT);
 
                     var extent = material.segment.getExtentMerc();

package/src/og/utils/shared.js

@@ -940,4 +940,4 @@ export function cloneArray(items) {
  */
 export function isUndef(obj) {
     return obj === void 0;
-}
+}

package/src/og/webgl/Handler.js

@@ -12,15 +12,11 @@ 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
@@ -92,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;
-
-        let 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.
@@ -131,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();
         }
@@ -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) {
+    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) {
+    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) {
-        let gl = handler.gl;
+    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) {
-        let gl = handler.gl;
+    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) {
-        let gl = handler.gl;
+    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);
 
-    createTexture_n(image) {
-        return Handler.createTexture_n(this, 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;
     }
 
-    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;
     }
 
     /**
@@ -623,8 +646,27 @@ class Handler {
             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*/
@@ -804,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
@@ -878,7 +922,8 @@ class Handler {
 
         /** Canvas resize checking */
         let canvas = this.canvas;
-        if (canvas.clientWidth !== canvas.width || canvas.clientHeight !== canvas.height) {
+
+        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);
         }
 
@@ -938,7 +983,7 @@ class Handler {
         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) {
@@ -953,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);
         }
@@ -1052,11 +1097,4 @@ class Handler {
     }
 }
 
-export const createTexture = {
-    NEAREST: Handler.createTexture_n,
-    LINEAR: Handler.createTexture_l,
-    MIPMAP: Handler.createTexture_mm,
-    ANISOTROPIC: Handler.createTexture_a
-};
-
 export { Handler };