@openglobus/og 0.22.2 → 0.24.0

package/lib/js/webgl/Framebuffer.js

@@ -1,5 +1,26 @@
 import { BaseFramebuffer } from "./BaseFramebuffer";
 import { ImageCanvas } from "../ImageCanvas";
+const TypeArrayConstructor = {
+    "UNSIGNED_BYTE": Uint8Array,
+    "FLOAT": Float32Array
+};
+export function clientWaitAsync(gl, sync, flags) {
+    return new Promise((resolve, reject) => {
+        function check() {
+            const res = gl.clientWaitSync(sync, flags, 0);
+            if (res == gl.WAIT_FAILED) {
+                reject();
+            }
+            else if (res == gl.TIMEOUT_EXPIRED) {
+                requestAnimationFrame(check);
+            }
+            else {
+                resolve();
+            }
+        }
+        check();
+    });
+}
 /**
  * Class represents framebuffer.
  * @class
@@ -9,24 +30,75 @@ import { ImageCanvas } from "../ImageCanvas";
 export class Framebuffer extends BaseFramebuffer {
     constructor(handler, options = {}) {
         super(handler, options);
-        this._isBare = options.isBare || false;
-        this._internalFormatArr = options.internalFormat instanceof Array ? options.internalFormat : [options.internalFormat || "RGBA"];
-        this._formatArr = options.format instanceof Array ? options.format : [options.format || "RGBA"];
-        this._typeArr = options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
-        if (options.attachment instanceof Array) {
-            this._attachmentArr = options.attachment.map((a, i) => {
-                let res = a.toUpperCase();
-                if (res === "COLOR_ATTACHMENT") {
-                    return `${res}${i.toString()}`;
+        this.readPixelBuffersAsync = () => {
+            const gl = this.handler.gl;
+            if (this._skipFrame)
+                return;
+            this._skipFrame = true;
+            let w = this.width, h = this.height;
+            let pb = this.pixelBuffers;
+            this.activate();
+            for (let i = 0; i < pb.length; i++) {
+                let pbi = pb[i];
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbi.buffer);
+                gl.bufferData(gl.PIXEL_PACK_BUFFER, pbi.data.byteLength, gl.STREAM_READ);
+                gl.readBuffer(pbi.glAttachment);
+                gl.readPixels(0, 0, w, h, gl.RGBA, pbi.glType, 0);
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+            }
+            this.deactivate();
+            const sync = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0);
+            gl.flush();
+            clientWaitAsync(gl, sync, 0).then(() => {
+                this._skipFrame = false;
+                gl.deleteSync(sync);
+                for (let i = 0; i < pb.length; i++) {
+                    let pbi = pb[i];
+                    if (pbi.data) {
+                        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pbi.buffer);
+                        gl.getBufferSubData(gl.PIXEL_PACK_BUFFER, 0, pbi.data);
+                    }
                 }
-                return res;
+                gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
             });
-        }
-        else {
-            this._attachmentArr = [options.attachment || "COLOR_ATTACHMENT0"];
-        }
+        };
+        this._targets = Framebuffer.createTargets(options.targets);
+        this._size = this._targets.length;
         this._renderbufferTarget = options.renderbufferTarget != undefined ? options.renderbufferTarget : "DEPTH_ATTACHMENT";
         this.textures = options.textures || new Array(this._size);
+        this.pixelBuffers = [];
+        this._skipFrame = false;
+    }
+    static createTargets(targets) {
+        let attInd = 0;
+        let pbInd = 0;
+        if (targets) {
+            return targets.map((ti) => {
+                let attachment = ti.attachment || "COLOR_ATTACHMENT";
+                if (attachment === "COLOR_ATTACHMENT") {
+                    attachment = `COLOR_ATTACHMENT${attInd++}`;
+                }
+                let type = ti.type || "UNSIGNED_BYTE";
+                return {
+                    internalFormat: ti.internalFormat || "RGBA",
+                    format: ti.format || "RGBA",
+                    type,
+                    attachment,
+                    filter: ti.filter || "NEAREST",
+                    pixelBufferIndex: ti.readAsync ? pbInd++ : -1,
+                    TypeArrayConstructor: TypeArrayConstructor[type]
+                };
+            });
+        }
+        return [{
+                internalFormat: "RGBA",
+                format: "RGBA",
+                type: "UNSIGNED_BYTE",
+                attachment: "COLOR_ATTACHMENT0",
+                filter: "NEAREST",
+                pixelBufferIndex: -1,
+                TypeArrayConstructor: TypeArrayConstructor.UNSIGNED_BYTE
+            }];
     }
     // static blit(sourceFramebuffer: Framebuffer, destFramebuffer: Framebuffer, glAttachment: number, glMask: number, glFilter: number) {
     //     let gl = sourceFramebuffer.handler.gl!;
@@ -51,6 +123,11 @@ export class Framebuffer extends BaseFramebuffer {
             gl.deleteTexture(this.textures[i]);
         }
         this.textures = new Array(this._size);
+        for (let i = 0; i < this.pixelBuffers.length; i++) {
+            this.pixelBuffers[i].data = null;
+            gl.deleteBuffer(this.pixelBuffers[i].buffer);
+        }
+        this.pixelBuffers = [];
         gl.deleteFramebuffer(this._fbo);
         gl.deleteRenderbuffer(this._depthRenderbuffer);
         this._depthRenderbuffer = null;
@@ -68,21 +145,23 @@ export class Framebuffer extends BaseFramebuffer {
             return;
         this._fbo = gl.createFramebuffer();
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
-        if (!this._isBare) {
-            let attachmentArr = [];
-            for (let i = 0; i < this.textures.length; i++) {
-                let ti = this.textures[i] || this.handler.createEmptyTexture2DExt(this._width, this._height, this._filter, this._internalFormatArr[i], this._formatArr[i], this._typeArr[i]);
-                let att_i = gl[this._attachmentArr[i]];
-                if (ti) {
-                    this.bindOutputTexture(ti, att_i);
-                    this.textures[i] = ti;
-                }
-                if (this._attachmentArr[i] != "DEPTH_ATTACHMENT") {
-                    attachmentArr.push(att_i);
-                }
+        let attachmentArr = [];
+        for (let i = 0; i < this._targets.length; i++) {
+            let tr = this._targets[i];
+            let ti = this.textures[i] || this.handler.createEmptyTexture2DExt(this._width, this._height, tr.filter, tr.internalFormat, tr.format, tr.type);
+            let att_i = gl[tr.attachment];
+            if (ti) {
+                this.bindOutputTexture(ti, att_i);
+                this.textures[i] = ti;
+            }
+            if (tr.attachment !== "DEPTH_ATTACHMENT") {
+                attachmentArr.push(att_i);
+            }
+            if (tr.pixelBufferIndex !== -1) {
+                this._createPixelBuffer(tr);
             }
-            gl.drawBuffers && gl.drawBuffers(attachmentArr);
         }
+        gl.drawBuffers && gl.drawBuffers(attachmentArr);
         if (this._useDepth) {
             this._depthRenderbuffer = gl.createRenderbuffer();
             gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
@@ -92,6 +171,34 @@ export class Framebuffer extends BaseFramebuffer {
         }
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
+    getPixelBufferData(targetIndex) {
+        let pbInd = this._targets[targetIndex].pixelBufferIndex;
+        return pbInd !== -1 ? this.pixelBuffers[pbInd].data : null;
+    }
+    _createPixelBuffer(target) {
+        let gl = this.handler.gl;
+        let pbInd = target.pixelBufferIndex;
+        let pb = this.pixelBuffers[pbInd];
+        if (!pb) {
+            pb = this.pixelBuffers[pbInd] = {
+                buffer: null,
+                data: null,
+                glType: -1,
+                glAttachment: -1
+            };
+        }
+        let size = this.width * this.height * 4;
+        // clear current pixel buffer
+        pb.data = null;
+        pb.data = new target.TypeArrayConstructor(size);
+        //gl.deleteBuffer(pb.buffer);
+        pb.buffer = gl.createBuffer();
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, pb.buffer);
+        gl.bufferData(gl.PIXEL_PACK_BUFFER, size, gl.STREAM_READ);
+        gl.bindBuffer(gl.PIXEL_PACK_BUFFER, null);
+        pb.glType = gl[target.type];
+        pb.glAttachment = gl[target.attachment];
+    }
     /**
      * Bind buffer texture.
      * @public
@@ -118,7 +225,7 @@ export class Framebuffer extends BaseFramebuffer {
         let gl = this.handler.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
         gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + index || 0);
-        gl.readPixels(nx * this._width, ny * this._height, w, h, gl.RGBA, gl[this._typeArr[index]], res);
+        gl.readPixels(nx * this._width, ny * this._height, w, h, gl.RGBA, gl[this._targets[index].type], res);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
     /**
@@ -131,7 +238,7 @@ export class Framebuffer extends BaseFramebuffer {
         let gl = this.handler.gl;
         gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
         gl.readBuffer && gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
-        gl.readPixels(0, 0, this._width, this._height, gl.RGBA, gl[this._typeArr[attachmentIndex]], res);
+        gl.readPixels(0, 0, this._width, this._height, gl.RGBA, gl[this._targets[attachmentIndex].type], res);
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
     }
     /**

package/lib/js/webgl/Handler.d.ts

@@ -17,7 +17,7 @@ export type WebGLTextureExt = {
     default?: boolean;
 } & WebGLTexture;
 export type ImageSource = HTMLCanvasElement | ImageBitmap | ImageData | HTMLImageElement | HTMLVideoElement;
-type CreateTextureFunc = (image: ImageSource, internalFormat?: number, texture?: WebGLTextureExt) => WebGLTextureExt | null;
+type CreateTextureFunc = (image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTextureExt) => WebGLTextureExt | null;
 export interface IHandlerParameters {
     anisotropy?: number;
     width?: number;
@@ -82,6 +82,7 @@ declare class Handler {
      * @type {number}
      */
     deltaTime: number;
+    prevDeltaTime: number;
     /**
      * WebGL rendering canvas element.
      * @public
@@ -196,7 +197,7 @@ declare class Handler {
      * @param {number} [level=0] - Specifies the level-of-detail number. Level 0 is the base image level. Level n is the nth mipmap reduction image.
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture2DExt(width?: number, height?: number, filter?: string, internalFormat?: string, format?: string, type?: string, level?: number): WebGLTexture | null;
+    createEmptyTexture2DExt(width?: number, height?: number, filter?: string, internalFormat?: string, format?: string, type?: string, param?: string, level?: number): WebGLTexture | null;
     /**
      * Creates Empty NEAREST filtered texture.
      * @public
@@ -205,88 +206,97 @@ declare class Handler {
      * @param {number} [internalFormat]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture_n(width: number, height: number, internalFormat?: number): WebGLTexture | null;
+    createEmptyTexture_n(width: number, height: number, internalFormat?: number | null, texParami?: number | null): WebGLTexture | null;
     /**
      * Creates empty LINEAR filtered texture.
      * @public
      * @param {number} width - Empty texture width.
      * @param {number} height - Empty texture height.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture_l(width: number, height: number, internalFormat?: number): WebGLTexture | null;
+    createEmptyTexture_l(width: number, height: number, internalFormat?: number | null, texParami?: number | null): WebGLTexture | null;
     /**
      * Creates NEAREST filter texture.
      * @public
      * @param {HTMLCanvasElement | Image} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture=null]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_n_webgl1(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_n_webgl1(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates LINEAR filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_l_webgl1(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_l_webgl1(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates MIPMAP filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_mm_webgl1(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_mm_webgl1(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates ANISOTROPY filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_a_webgl1(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_a_webgl1(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates NEAREST filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_n_webgl2(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_n_webgl2(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates LINEAR filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_l_webgl2(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_l_webgl2(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates MIPMAP filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_mm_webgl2(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_mm_webgl2(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates ANISOTROPY filter texture.
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_a_webgl2(image: ImageSource, internalFormat?: number, texture?: WebGLTexture | null): WebGLTexture | null;
+    createTexture_a_webgl2(image: ImageSource, internalFormat?: number | null, texParami?: number | null, texture?: WebGLTexture | null): WebGLTexture | null;
     /**
      * Creates cube texture.
      * @public

package/lib/js/webgl/Handler.js

@@ -33,7 +33,16 @@ class Handler {
         this.drawFrame = () => {
             /** Calculating frame time */
             let now = window.performance.now();
-            this.deltaTime = now - this._lastAnimationFrameTime;
+            let prevDeltaTime = this.deltaTime;
+            //Make some filter:)
+            this.deltaTime = (now - this._lastAnimationFrameTime + this.prevDeltaTime) * 0.5;
+            if (this.deltaTime > 3) {
+                this.deltaTime = 3;
+            }
+            else if (this.deltaTime < 1) {
+                this.deltaTime = 1;
+            }
+            this.prevDeltaTime = prevDeltaTime;
             this._lastAnimationFrameTime = now;
             this.defaultClock.tick(this.deltaTime);
             for (let i = 0; i < this._clocks.length; i++) {
@@ -57,6 +66,7 @@ class Handler {
         this._throttledDrawFrame = this.drawFrame;
         this.defaultClock = new Clock();
         this._clocks = [];
+        this.prevDeltaTime = 0;
         this.deltaTime = 0;
         this.canvas = null;
         this.gl = null;
@@ -196,7 +206,7 @@ class Handler {
      * @param {number} [level=0] - Specifies the level-of-detail number. Level 0 is the base image level. Level n is the nth mipmap reduction image.
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture2DExt(width = 1, height = 1, filter = "NEAREST", internalFormat = "RGBA", format = "RGBA", type = "UNSIGNED_BYTE", level = 0) {
+    createEmptyTexture2DExt(width = 1, height = 1, filter = "NEAREST", internalFormat = "RGBA", format = "RGBA", type = "UNSIGNED_BYTE", param = "CLAMP_TO_EDGE", level = 0) {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -204,8 +214,8 @@ class Handler {
         gl.texImage2D(gl.TEXTURE_2D, level, gl[internalFormat.toUpperCase()], width, height, 0, gl[format.toUpperCase()], gl[type.toUpperCase()], null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl[filter.toUpperCase()]);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl[filter.toUpperCase()]);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl[param.toUpperCase()]);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl[param.toUpperCase()]);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -217,7 +227,7 @@ class Handler {
      * @param {number} [internalFormat]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture_n(width, height, internalFormat) {
+    createEmptyTexture_n(width, height, internalFormat, texParami) {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -225,8 +235,8 @@ class Handler {
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -236,9 +246,10 @@ class Handler {
      * @param {number} width - Empty texture width.
      * @param {number} height - Empty texture height.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createEmptyTexture_l(width, height, internalFormat) {
+    createEmptyTexture_l(width, height, internalFormat, texParami) {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -246,8 +257,8 @@ class Handler {
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -256,10 +267,11 @@ class Handler {
      * @public
      * @param {HTMLCanvasElement | Image} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture=null]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_n_webgl1(image, internalFormat, texture = null) {
+    createTexture_n_webgl1(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -267,8 +279,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -277,18 +289,19 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_l_webgl1(image, internalFormat, texture = null) {
+    createTexture_l_webgl1(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -297,10 +310,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_mm_webgl1(image, internalFormat, texture = null) {
+    createTexture_mm_webgl1(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -308,8 +322,8 @@ class Handler {
         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);
-        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -318,10 +332,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_a_webgl1(image, internalFormat, texture = null) {
+    createTexture_a_webgl1(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -330,8 +345,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -340,10 +355,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_n_webgl2(image, internalFormat, texture = null) {
+    createTexture_n_webgl2(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -353,8 +369,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -363,10 +379,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_l_webgl2(image, internalFormat, texture = null) {
+    createTexture_l_webgl2(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -376,8 +393,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -386,10 +403,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_mm_webgl2(image, internalFormat, texture = null) {
+    createTexture_mm_webgl2(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -398,8 +416,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -408,10 +426,11 @@ class Handler {
      * @public
      * @param {ImageSource} image - Image or Canvas object.
      * @param {number} [internalFormat]
+     * @param {number} [texParami]
      * @param {WebGLTexture | null} [texture]
      * @returns {WebGLTexture | null} - WebGL texture object.
      */
-    createTexture_a_webgl2(image, internalFormat, texture = null) {
+    createTexture_a_webgl2(image, internalFormat, texParami, texture = null) {
         let gl = this.gl;
         texture = texture || gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
@@ -422,8 +441,8 @@ class Handler {
         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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, texParami || gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, texParami || gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }

package/lib/js/webgl/Program.js

@@ -222,10 +222,6 @@ class Program {
                     this.drawElementsInstanced = ext.drawElementsInstancedANGLE.bind(ext);
                 }
             }
-            // this.drawElementsInstanced =
-            //     gl.drawElementsInstanced ?
-            //         gl.drawElementsInstanced.bind(gl) :
-            //         gl.getExtension('ANGLE_instanced_arrays').drawElementsInstancedANGLE.bind(gl.getExtension('ANGLE_instanced_arrays'));
         }
         if (!this.vertexAttribDivisor) {
             if (gl.vertexAttribDivisor) {
@@ -237,10 +233,6 @@ class Program {
                     this.vertexAttribDivisor = ext.vertexAttribDivisorANGLE.bind(ext);
                 }
             }
-            // this.vertexAttribDivisor =
-            //     gl.vertexAttribDivisor ?
-            //         gl.vertexAttribDivisor.bind(gl) :
-            //         gl.getExtension('ANGLE_instanced_arrays').vertexAttribDivisorANGLE.bind(gl.getExtension('ANGLE_instanced_arrays'));
         }
         if (!gl.getProgramParameter(this._p, gl.LINK_STATUS)) {
             cons.logErr(`Shader program "${this.name}": initialization failed. ${gl.getProgramInfoLog(this._p)}.`);