@openglobus/og 0.11.1 → 0.11.6

package/src/og/webgl/Handler.js

@@ -27,10 +27,9 @@ const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
  * @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 +39,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 +82,7 @@ class Handler {
         /**
          * Current active shader program controller.
          * @public
-         * @type {og.webgl.ProgramController}
+         * @type {ProgramController}
          */
         this.activeProgram = null;
 
@@ -100,7 +99,7 @@ class Handler {
         }
         this._params.width = w || 256;
 
-        var h = this._params.height;
+        let h = this._params.height;
         if (h > MAX_SIZE) {
             h = MAX_SIZE;
         }
@@ -150,7 +149,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 +167,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 +198,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 +219,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);
 
@@ -315,8 +295,8 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     createEmptyTexture_n(width, height) {
-        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);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
@@ -336,8 +316,8 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     createEmptyTexture_l(width, height) {
-        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);
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
@@ -350,15 +330,35 @@ 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) {
-        var gl = this.gl;
+    static createTexture_n(handler, image) {
+        var gl = handler.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 LINEAR filter texture.
+     * @public
+     * @param {Object} image - Image or Canvas object.
+     * @returns {Object} - WebGL texture object.
+     */
+    static createTexture_l(handler, image) {
+        let gl = handler.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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -374,9 +374,9 @@ 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();
+    static createTexture_mm(handler, image) {
+        let gl = handler.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);
@@ -394,9 +394,9 @@ class Handler {
      * @param {Object} image - Image or Canvas object.
      * @returns {Object} - WebGL texture object.
      */
-    createTexture_a(image) {
-        var gl = this.gl;
-        var texture = gl.createTexture();
+    static createTexture_a(handler, image) {
+        let gl = handler.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);
@@ -404,8 +404,8 @@ class Handler {
         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
+            handler.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT,
+            handler._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);
@@ -420,7 +420,23 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     createTexture(image) {
-        return this.createTexture_a(image);
+        return Handler.createTexture_a(this, image);
+    }
+
+    createTexture_n(image) {
+        return Handler.createTexture_n(this, image);
+    }
+
+    createTexture_l(image) {
+        return Handler.createTexture_l(this, image);
+    }
+
+    createTexture_mm(image) {
+        return Handler.createTexture_mm(this, image);
+    }
+
+    createTexture_a(image) {
+        return Handler.createTexture_a(this, image);
     }
 
     /**
@@ -436,15 +452,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 +469,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 +499,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 +531,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 +542,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 +563,7 @@ class Handler {
      * @private
      */
     _initPrograms() {
-        for (var p in this.programs) {
+        for (let p in this.programs) {
             this._initProgramController(this.programs[p]);
         }
     }
@@ -561,7 +577,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 +594,6 @@ class Handler {
      * @public
      */
     initialize() {
-
         if (this._id) {
             this.canvas = document.getElementById(this._id);
         } else {
@@ -603,7 +618,7 @@ 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);
         }
@@ -631,7 +646,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 +710,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 +750,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 +759,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 +788,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,7 +804,6 @@ class Handler {
      * @param {number} h - Canvas height.
      */
     setSize(w, h) {
-
         if (w > MAX_SIZE) {
             w = MAX_SIZE;
         }
@@ -822,7 +855,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,18 +866,18 @@ 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;
+        let canvas = this.canvas;
         if (canvas.clientWidth !== canvas.width || canvas.clientHeight !== canvas.height) {
             this.setSize(canvas.clientWidth, canvas.clientHeight);
         }
@@ -858,7 +891,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 +933,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 = Handler.createTexture_n(this, 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;
@@ -920,7 +953,7 @@ class Handler {
         } else {
             imgCnv = new ImageCanvas(2, 2);
             imgCnv.fillColor("#C5C5C5");
-            texture = this.createTexture_n(imgCnv._canvas);
+            texture = Handler.createTexture_n(this, imgCnv._canvas);
             texture.default = true;
             success(texture);
         }
@@ -930,11 +963,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 +984,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 +994,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 +1032,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;
@@ -1019,4 +1052,11 @@ class Handler {
     }
 }
 
+export const createTexture = {
+    NEAREST: Handler.createTexture_n,
+    LINEAR: Handler.createTexture_l,
+    MIPMAP: Handler.createTexture_mm,
+    ANISOTROPIC: Handler.createTexture_a
+};
+
 export { Handler };