@openglobus/og 0.10.4 → 0.11.1

package/src/og/webgl/Framebuffer.js

@@ -20,319 +20,320 @@ import { ImageCanvas } from '../ImageCanvas.js';
  * @param {String} [options.depthComponent="DEPTH_COMPONENT16"] - Specifies depth buffer size.
  * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
  */
-const Framebuffer = function (handler, options = {}) {
+export class Framebuffer {
+
+    constructor(handler, options = {}) {
 
-    /**
-     * WebGL handler.
-     * @public
-     * @type {og.webgl.Handler}
-     */
-    this.handler = handler;
+        /**
+         * WebGL handler.
+         * @public
+         * @type {og.webgl.Handler}
+         */
+        this.handler = handler;
 
-    /**
-     * Framebuffer object.
-     * @private
-     * @type {Object}
-     */
-    this._fbo = null;
+        /**
+         * Framebuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._fbo = null;
 
-    this._isBare = options.isBare || false;
+        this._isBare = options.isBare || false;
 
-    /**
-     * Renderbuffer object.
-     * @private
-     * @type {Object}
-     */
-    this._depthRenderbuffer = null;
+        /**
+         * Renderbuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._depthRenderbuffer = null;
 
-    this._filter = options.filter || "NEAREST";
+        this._filter = options.filter || "NEAREST";
 
-    this._internalFormatArr = options.internalFormat instanceof Array ? options.internalFormat : [options.internalFormat || "RGBA"];
+        this._internalFormatArr = options.internalFormat instanceof Array ? options.internalFormat : [options.internalFormat || "RGBA"];
 
-    this._formatArr = options.format instanceof Array ? options.format : [options.format || "RGBA"];
+        this._formatArr = options.format instanceof Array ? options.format : [options.format || "RGBA"];
 
-    this._typeArr = options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
+        this._typeArr = options.type instanceof Array ? options.type : [options.type || "UNSIGNED_BYTE"];
 
-    this._attachmentArr = options.attachment instanceof Array ?
-        options.attachment.map((a, i) => {
-            let res = a.toUpperCase();
-            if (res === "COLOR_ATTACHMENT") {
-                return `${res}${i.toString()}`;
-            }
-            return res;
-        }) : [options.attachment || "COLOR_ATTACHMENT0"];
+        this._attachmentArr = options.attachment instanceof Array ?
+            options.attachment.map((a, i) => {
+                let res = a.toUpperCase();
+                if (res === "COLOR_ATTACHMENT") {
+                    return `${res}${i.toString()}`;
+                }
+                return res;
+            }) : [options.attachment || "COLOR_ATTACHMENT0"];
 
-    /**
-     * Framebuffer width.
-     * @private
-     * @type {number}
-     */
-    this._width = options.width || handler.canvas.width;
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._width = options.width || handler.canvas.width;
 
-    /**
-     * Framebuffer width.
-     * @private
-     * @type {number}
-     */
-    this._height = options.height || handler.canvas.height;
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._height = options.height || handler.canvas.height;
 
-    this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+        this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
 
-    this._useDepth = options.useDepth != undefined ? options.useDepth : true;
+        this._useDepth = options.useDepth != undefined ? options.useDepth : true;
 
-    /**
-     * Framebuffer activity. 
-     * @private
-     * @type {boolean}
-     */
-    this._active = false;
+        /**
+         * Framebuffer activity. 
+         * @private
+         * @type {boolean}
+         */
+        this._active = false;
 
-    this._size = options.size || 1;
+        this._size = options.size || 1;
 
-    /**
-     * Framebuffer texture.
-     * @public
-     * @type {number}
-     */
-    this.textures = options.textures || new Array(this._size);
-};
+        /**
+         * Framebuffer texture.
+         * @public
+         * @type {number}
+         */
+        this.textures = options.textures || new Array(this._size);
+    };
 
-Framebuffer.blit = function (sourceFramebuffer, destFramebuffer, glAttachment, glMask, glFilter) {
+    static blit(sourceFramebuffer, destFramebuffer, glAttachment, glMask, glFilter) {
 
-    let gl = sourceFramebuffer.handler.gl;
+        let gl = sourceFramebuffer.handler.gl;
 
-    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, sourceFramebuffer._fbo);
-    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
-    gl.readBuffer(glAttachment);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, sourceFramebuffer._fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
+        gl.readBuffer(glAttachment);
 
-    gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
+        gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
 
-    gl.blitFramebuffer(
-        0, 0, sourceFramebuffer._width, sourceFramebuffer._height,
-        0, 0, destFramebuffer._width, destFramebuffer._height,
-        glMask, glFilter
-    );
+        gl.blitFramebuffer(
+            0, 0, sourceFramebuffer._width, sourceFramebuffer._height,
+            0, 0, destFramebuffer._width, destFramebuffer._height,
+            glMask, glFilter
+        );
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
-    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
-};
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    };
 
-Framebuffer.prototype.destroy = function () {
-    var gl = this.handler.gl;
+    destroy() {
+        var gl = this.handler.gl;
 
-    for (var i = 0; i < this.textures.length; i++) {
-        gl.deleteTexture(this.textures[i]);
-    }
-    this.textures = new Array(this._size);
+        for (var i = 0; i < this.textures.length; i++) {
+            gl.deleteTexture(this.textures[i]);
+        }
+        this.textures = new Array(this._size);
 
-    gl.deleteFramebuffer(this._fbo);
-    gl.deleteRenderbuffer(this._depthRenderbuffer);
+        gl.deleteFramebuffer(this._fbo);
+        gl.deleteRenderbuffer(this._depthRenderbuffer);
 
-    this._depthRenderbuffer = null;
-    this._fbo = null;
+        this._depthRenderbuffer = null;
+        this._fbo = null;
 
-    this._active = false;
-};
+        this._active = false;
+    };
 
-/**
- * Framebuffer initialization.
- * @private
- */
-Framebuffer.prototype.init = function () {
-    var gl = this.handler.gl;
+    /**
+     * Framebuffer initialization.
+     * @private
+     */
+    init() {
+        var gl = this.handler.gl;
 
-    this._fbo = gl.createFramebuffer();
+        this._fbo = gl.createFramebuffer();
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
 
-    if (!this._isBare) {
-        let attachmentArr = [];
-        for (var i = 0; i < this.textures.length; i++) {
+        if (!this._isBare) {
+            let attachmentArr = [];
+            for (var 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 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]];
+                let att_i = gl[this._attachmentArr[i]];
 
-            this.bindOutputTexture(ti, att_i);
+                this.bindOutputTexture(ti, att_i);
 
-            this.textures[i] = ti;
+                this.textures[i] = ti;
 
-            if (this._attachmentArr[i] != "DEPTH_ATTACHMENT") {
-                attachmentArr.push(att_i);
+                if (this._attachmentArr[i] != "DEPTH_ATTACHMENT") {
+                    attachmentArr.push(att_i);
+                }
             }
+            gl.drawBuffers && gl.drawBuffers(attachmentArr);
         }
-        gl.drawBuffers && gl.drawBuffers(attachmentArr);
-    }
 
-    if (this._useDepth) {
-        this._depthRenderbuffer = gl.createRenderbuffer();
-        gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
-        gl.renderbufferStorage(gl.RENDERBUFFER, gl[this._depthComponent], this._width, this._height);
-        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthRenderbuffer);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-    }
+        if (this._useDepth) {
+            this._depthRenderbuffer = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.renderbufferStorage(gl.RENDERBUFFER, gl[this._depthComponent], this._width, this._height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-    return this;
-};
+        return this;
+    };
 
-/**
- * Bind buffer texture.
- * @public
- * @param{Object} texture - Output texture.
- * @param {Number} [attachmentIndex=0] - color attachment index.
- */
-Framebuffer.prototype.bindOutputTexture = function (texture, glAttachment) {
-    var gl = this.handler.gl;
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment || gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-};
+    /**
+     * Bind buffer texture.
+     * @public
+     * @param{Object} texture - Output texture.
+     * @param {Number} [attachmentIndex=0] - color attachment index.
+     */
+    bindOutputTexture(texture, glAttachment) {
+        var gl = this.handler.gl;
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, glAttachment || gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
+        gl.bindTexture(gl.TEXTURE_2D, null);
+    };
 
-/**
- * Sets framebuffer viewport size.
- * @public
- * @param {number} width - Framebuffer width.
- * @param {number} height - Framebuffer height.
- */
-Framebuffer.prototype.setSize = function (width, height, forceDestroy) {
-    this._width = width;
-    this._height = height;
+    /**
+     * Sets framebuffer viewport size.
+     * @public
+     * @param {number} width - Framebuffer width.
+     * @param {number} height - Framebuffer height.
+     */
+    setSize(width, height, forceDestroy) {
+        this._width = width;
+        this._height = height;
 
-    if (this._active) {
-        this.handler.gl.viewport(0, 0, this._width, this._height);
-    }
+        if (this._active) {
+            this.handler.gl.viewport(0, 0, this._width, this._height);
+        }
 
-    if (this._useDepth || forceDestroy) {
-        this.destroy();
-        this.init();
-    }
-};
+        if (this._useDepth || forceDestroy) {
+            this.destroy();
+            this.init();
+        }
+    };
 
-/**
- * Returns framebuffer completed.
- * @public
- * @returns {boolean} -
- */
-Framebuffer.prototype.isComplete = function () {
-    var gl = this.handler.gl;
-    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
-        return true;
-    }
-    return false;
-};
+    /**
+     * Returns framebuffer completed.
+     * @public
+     * @returns {boolean} -
+     */
+    isComplete() {
+        var gl = this.handler.gl;
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+            return true;
+        }
+        return false;
+    };
 
-/**
- * Gets pixel RBGA color from framebuffer by coordinates.
- * @public
- * @param {Uint8Array} res - Normalized x - coordinate.
- * @param {number} nx - Normalized x - coordinate.
- * @param {number} ny - Normalized y - coordinate.
- * @param {number} [w=1] - Normalized width.
- * @param {number} [h=1] - Normalized height.
- * @param {Number} [attachmentIndex=0] - color attachment index.
- */
-Framebuffer.prototype.readPixels = function (res, nx, ny, index = 0, w = 1, h = 1) {
-    var 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.bindFramebuffer(gl.FRAMEBUFFER, null);
-};
+    /**
+     * Gets pixel RBGA color from framebuffer by coordinates.
+     * @public
+     * @param {Uint8Array} res - Normalized x - coordinate.
+     * @param {number} nx - Normalized x - coordinate.
+     * @param {number} ny - Normalized y - coordinate.
+     * @param {number} [w=1] - Normalized width.
+     * @param {number} [h=1] - Normalized height.
+     * @param {Number} [attachmentIndex=0] - color attachment index.
+     */
+    readPixels(res, nx, ny, index = 0, w = 1, h = 1) {
+        var 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.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
 
-/**
- * Reads all pixels(RGBA colors) from framebuffer.
- * @public
- * @param {Uint8Array} res - Result array.
- * @param {Number} [attachmentIndex=0] - color attachment index.
- */
-Framebuffer.prototype.readAllPixels = function (res, attachmentIndex = 0) {
-    var 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.bindFramebuffer(gl.FRAMEBUFFER, null);
-};
+    /**
+     * Reads all pixels(RGBA colors) from framebuffer.
+     * @public
+     * @param {Uint8Array} res - Result array.
+     * @param {Number} [attachmentIndex=0] - color attachment index.
+     */
+    readAllPixels(res, attachmentIndex = 0) {
+        var 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.bindFramebuffer(gl.FRAMEBUFFER, null);
+    };
 
-/**
- * Activate framebuffer frame to draw.
- * @public
- * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
- */
-Framebuffer.prototype.activate = function () {
-    var gl = this.handler.gl;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
-    gl.viewport(0, 0, this._width, this._height);
-    this._active = true;
-    var c = this.handler.framebufferStack.current().data;
-    c && (c._active = false);
-    this.handler.framebufferStack.push(this);
-    return this;
-};
+    /**
+     * Activate framebuffer frame to draw.
+     * @public
+     * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
+     */
+    activate() {
+        var gl = this.handler.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        gl.viewport(0, 0, this._width, this._height);
+        this._active = true;
+        var c = this.handler.framebufferStack.current().data;
+        c && (c._active = false);
+        this.handler.framebufferStack.push(this);
+        return this;
+    };
 
-/**
- * Deactivate framebuffer frame.
- * @public
- */
-Framebuffer.prototype.deactivate = function () {
-    var h = this.handler,
-        gl = h.gl;
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    this._active = false;
-
-    var f = this.handler.framebufferStack.popPrev();
-
-    if (f) {
-        gl.bindFramebuffer(gl.FRAMEBUFFER, f._fbo);
-        gl.viewport(0, 0, f._width, f._height);
-    } else {
-        gl.viewport(0, 0, h.canvas.width, h.canvas.height);
-    }
-};
+    /**
+     * Deactivate framebuffer frame.
+     * @public
+     */
+    deactivate() {
+        var h = this.handler,
+            gl = h.gl;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this._active = false;
+
+        var f = this.handler.framebufferStack.popPrev();
+
+        if (f) {
+            gl.bindFramebuffer(gl.FRAMEBUFFER, f._fbo);
+            gl.viewport(0, 0, f._width, f._height);
+        } else {
+            gl.viewport(0, 0, h.canvas.width, h.canvas.height);
+        }
+    };
 
-/**
- * Gets JavaScript image object that framebuffer has drawn.
- * @public
- * @returns {Object} -
- */
-Framebuffer.prototype.getImage = function () {
-    var data = new Uint8Array(4 * this._width * this._height);
-    this.readAllPixels(data);
-    var imageCanvas = new ImageCanvas(this._width, this._height);
-    imageCanvas.setData(data);
-    return imageCanvas.getImage();
-};
+    /**
+     * Gets JavaScript image object that framebuffer has drawn.
+     * @public
+     * @returns {Object} -
+     */
+    getImage() {
+        var data = new Uint8Array(4 * this._width * this._height);
+        this.readAllPixels(data);
+        var imageCanvas = new ImageCanvas(this._width, this._height);
+        imageCanvas.setData(data);
+        return imageCanvas.getImage();
+    };
 
-/**
- * Open dialog window with framebuffer image.
- * @public
- */
-Framebuffer.prototype.openImage = function () {
-    var img = this.getImage();
-    var dataUrl = img.src;
-    var windowContent = '<!DOCTYPE html>';
-    windowContent += '<html>';
-    windowContent += '<head><title>Print</title></head>';
-    windowContent += '<body>';
-    windowContent += '<img src="' + dataUrl + '">';
-    windowContent += '</body>';
-    windowContent += '</html>';
-    var printWin = window.open('', '', 'width=' + img.width + 'px ,height=' + img.height + 'px');
-    printWin.document.open();
-    printWin.document.write(windowContent);
-    printWin.document.close();
-    printWin.focus();
-};
-
-export { Framebuffer };
+    /**
+     * Open dialog window with framebuffer image.
+     * @public
+     */
+    openImage() {
+        var img = this.getImage();
+        var dataUrl = img.src;
+        var windowContent = '<!DOCTYPE html>';
+        windowContent += '<html>';
+        windowContent += '<head><title>Print</title></head>';
+        windowContent += '<body>';
+        windowContent += '<img src="' + dataUrl + '">';
+        windowContent += '</body>';
+        windowContent += '</html>';
+        var printWin = window.open('', '', 'width=' + img.width + 'px ,height=' + img.height + 'px');
+        printWin.document.open();
+        printWin.document.write(windowContent);
+        printWin.document.close();
+        printWin.focus();
+    };
+}