@openglobus/og 0.10.4 → 0.11.1

package/src/og/webgl/Multisample.js

@@ -15,217 +15,218 @@
  * @param {String} [options.depthComponent="DEPTH_COMPONENT16"] - Specifies depth buffer size.
  * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
  */
-const Multisample = function (handler, options) {
+export class Multisample {
 
-    options = options || {};
+    constructor(handler, options) {
 
-    /**
-     * WebGL handler.
-     * @public
-     * @type {og.webgl.Handler}
-     */
-    this.handler = handler;
+        options = options || {};
 
-    this._internalFormat = options.internalFormat ? options.internalFormat.toUpperCase() : "RGBA8";
+        /**
+         * WebGL handler.
+         * @public
+         * @type {og.webgl.Handler}
+         */
+        this.handler = handler;
 
-    /**
-     * Framebuffer object.
-     * @private
-     * @type {Object}
-     */
-    this._fbo = null;
+        this._internalFormat = options.internalFormat ? options.internalFormat.toUpperCase() : "RGBA8";
 
-    /**
-     * Renderbuffer object.
-     * @private
-     * @type {Object}
-     */
-    this._depthRenderbuffer = null;
+        /**
+         * Framebuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._fbo = null;
 
-    /**
-     * Framebuffer width.
-     * @private
-     * @type {number}
-     */
-    this._width = options.width || handler.canvas.width;
+        /**
+         * Renderbuffer object.
+         * @private
+         * @type {Object}
+         */
+        this._depthRenderbuffer = null;
 
-    /**
-     * Framebuffer width.
-     * @private
-     * @type {number}
-     */
-    this._height = options.height || handler.canvas.height;
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._width = options.width || handler.canvas.width;
 
-    this._msaa = options.msaa != undefined ? options.msaa : 4;
+        /**
+         * Framebuffer width.
+         * @private
+         * @type {number}
+         */
+        this._height = options.height || handler.canvas.height;
 
-    this._useDepth = options.useDepth != undefined ? options.useDepth : true;
+        this._msaa = options.msaa != undefined ? options.msaa : 4;
 
-    this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+        this._useDepth = options.useDepth != undefined ? options.useDepth : true;
 
-    /**
-     * Framebuffer activity. 
-     * @private
-     * @type {boolean}
-     */
-    this._active = false;
+        this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
 
-    this._size = options.size || 1;
+        /**
+         * Framebuffer activity. 
+         * @private
+         * @type {boolean}
+         */
+        this._active = false;
 
-    this._filter = options.filter || "NEAREST";
+        this._size = options.size || 1;
 
-    this._glFilter = null;
+        this._filter = options.filter || "NEAREST";
 
-    this.renderbuffers = new Array(this._size);
-};
+        this._glFilter = null;
 
-Multisample.prototype.destroy = function () {
-    var gl = this.handler.gl;
+        this.renderbuffers = new Array(this._size);
+    };
 
-    for (var i = 0; i < this.renderbuffers.length; i++) {
-        gl.deleteRenderbuffer(this.renderbuffers[i]);
-    }
-    this.renderbuffers = new Array(this._size);
+    destroy() {
+        var gl = this.handler.gl;
 
-    gl.deleteFramebuffer(this._fbo);
-    gl.deleteRenderbuffer(this._depthRenderbuffer);
+        for (var i = 0; i < this.renderbuffers.length; i++) {
+            gl.deleteRenderbuffer(this.renderbuffers[i]);
+        }
+        this.renderbuffers = new Array(this._size);
 
-    this._depthRenderbuffer = null;
-    this._fbo = null;
+        gl.deleteFramebuffer(this._fbo);
+        gl.deleteRenderbuffer(this._depthRenderbuffer);
 
-    this._active = false;
-};
+        this._depthRenderbuffer = null;
+        this._fbo = null;
 
-/**
- * Framebuffer initialization.
- * @private
- */
-Multisample.prototype.init = function () {
+        this._active = false;
+    };
 
-    var gl = this.handler.gl;
+    /**
+     * Framebuffer initialization.
+     * @private
+     */
+    init() {
 
-    this._glFilter = gl[this._filter];
+        var gl = this.handler.gl;
 
-    this._fbo = gl.createFramebuffer();
+        this._glFilter = gl[this._filter];
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
+        this._fbo = gl.createFramebuffer();
 
-    let colorAttachments = [];
-    for (var i = 0; i < this.renderbuffers.length; i++) {
-        let rb = gl.createRenderbuffer();
-        gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
-        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this._msaa, gl[this._internalFormat], this._width, this._height);
-        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.RENDERBUFFER, rb);
-        colorAttachments.push(gl.COLOR_ATTACHMENT0 + i);
-        this.renderbuffers[i] = rb;
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-    }
-    gl.drawBuffers(colorAttachments);
+        gl.bindFramebuffer(gl.FRAMEBUFFER, this._fbo);
 
-    if (this._useDepth) {
-        this._depthRenderbuffer = gl.createRenderbuffer();
-        gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
-        gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this._msaa, gl[this._depthComponent], this._width, this._height);
-        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthRenderbuffer);
-        gl.bindRenderbuffer(gl.RENDERBUFFER, null);
-    }
+        let colorAttachments = [];
+        for (var i = 0; i < this.renderbuffers.length; i++) {
+            let rb = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
+            gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this._msaa, gl[this._internalFormat], this._width, this._height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0 + i, gl.RENDERBUFFER, rb);
+            colorAttachments.push(gl.COLOR_ATTACHMENT0 + i);
+            this.renderbuffers[i] = rb;
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
+        gl.drawBuffers(colorAttachments);
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        if (this._useDepth) {
+            this._depthRenderbuffer = gl.createRenderbuffer();
+            gl.bindRenderbuffer(gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.renderbufferStorageMultisample(gl.RENDERBUFFER, this._msaa, gl[this._depthComponent], this._width, this._height);
+            gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, this._depthRenderbuffer);
+            gl.bindRenderbuffer(gl.RENDERBUFFER, null);
+        }
 
-    return this;
-};
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
-Multisample.prototype.blitTo = function (framebuffer, attachmentIndex = 0) {
+        return this;
+    };
 
-    let gl = this.handler.gl;
+    blitTo(framebuffer, attachmentIndex = 0) {
 
-    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
-    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
-    gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
+        let gl = this.handler.gl;
 
-    gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, framebuffer._fbo);
+        gl.readBuffer(gl.COLOR_ATTACHMENT0 + attachmentIndex);
 
-    gl.blitFramebuffer(
-        0, 0, this._width, this._height,
-        0, 0, framebuffer._width, framebuffer._height,
-        gl.COLOR_BUFFER_BIT, this._glFilter
-    );
+        gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
-    gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
-};
+        gl.blitFramebuffer(
+            0, 0, this._width, this._height,
+            0, 0, framebuffer._width, framebuffer._height,
+            gl.COLOR_BUFFER_BIT, this._glFilter
+        );
 
-/**
- * Sets framebuffer viewport size.
- * @public
- * @param {number} width - Framebuffer width.
- * @param {number} height - Framebuffer height.
- */
-Multisample.prototype.setSize = function (width, height, forceDestroy) {
-    this._width = width;
-    this._height = height;
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
+        gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
+    };
 
-    if (this._active) {
-        this.handler.gl.viewport(0, 0, this._width, this._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._useDepth || forceDestroy) {
-        this.destroy();
-        this.init();
-    }
-};
+        if (this._active) {
+            this.handler.gl.viewport(0, 0, this._width, this._height);
+        }
 
-/**
- * Returns framebuffer completed.
- * @public
- * @returns {boolean} -
- */
-Multisample.prototype.isComplete = function () {
-    var gl = this.handler.gl;
-    if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
-        return true;
-    }
-    return false;
-};
+        if (this._useDepth || forceDestroy) {
+            this.destroy();
+            this.init();
+        }
+    };
 
-/**
- * Activate framebuffer frame to draw.
- * @public
- * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
- */
-Multisample.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;
-};
+    /**
+     * Returns framebuffer completed.
+     * @public
+     * @returns {boolean} -
+     */
+    isComplete() {
+        var gl = this.handler.gl;
+        if (gl.checkFramebufferStatus(gl.FRAMEBUFFER) === gl.FRAMEBUFFER_COMPLETE) {
+            return true;
+        }
+        return false;
+    };
 
-/**
- * Deactivate framebuffer frame.
- * @public
- */
-Multisample.prototype.deactivate = function () {
-    var h = this.handler,
-        gl = h.gl;
+    /**
+     * 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;
+    };
 
-    //Q: check for this._useDepth ?
+    /**
+     * Deactivate framebuffer frame.
+     * @public
+     */
+    deactivate() {
+        var h = this.handler,
+            gl = h.gl;
 
-    gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-    this._active = false;
+        //Q: check for this._useDepth ?
 
-    var f = this.handler.framebufferStack.popPrev();
+        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
+        this._active = false;
 
-    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);
-    }
-};
+        var f = this.handler.framebufferStack.popPrev();
 
-export { Multisample };
+        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);
+        }
+    };
+}

package/src/og/webgl/ProgramController.js

@@ -8,131 +8,132 @@
  * @param {og.webgl.Handler} handler - Handler.
  * @param {og.webgl.Program} program - Shader program.
  */
-const ProgramController = function (handler, program) {
+export class ProgramController {
+
+    constructor(handler, program) {
+
+        /**
+         * Shader program.
+         * @private
+         * @type {og.webgl.Program}
+         */
+        this._program = program;
+
+        /**
+         * Handler.
+         * @private
+         * @type {og.webgl.Handler}
+         */
+        this._handler = handler;
+
+        /**
+         * Program current frame activation flag.
+         * @private
+         * @type {boolean}
+         */
+        this._activated = false;
+    };
 
     /**
-     * Shader program.
-     * @private
-     * @type {og.webgl.Program}
+     * Lazy create program call.
+     * @public
      */
-    this._program = program;
+    initialize() {
+        this._program.createProgram(this._handler.gl);
+    };
 
     /**
-     * Handler.
-     * @private
-     * @type {og.webgl.Handler}
+     * Returns controller's shader program.
+     * @public
+     * @return {og.webgl.Program} -
      */
-    this._handler = handler;
+    getProgram() {
+        return this._program;
+    };
 
     /**
-     * Program current frame activation flag.
-     * @private
-     * @type {boolean}
+     * Activates current shader program.
+     * @public
+     * @returns {ProgramController} -
      */
-    this._activated = false;
-};
-
-/**
- * Lazy create program call.
- * @public
- */
-ProgramController.prototype.initialize = function () {
-    this._program.createProgram(this._handler.gl);
-};
-
-/**
- * Returns controller's shader program.
- * @public
- * @return {og.webgl.Program} -
- */
-ProgramController.prototype.getProgram = function () {
-    return this._program;
-};
-
-/**
- * Activates current shader program.
- * @public
- * @returns {ProgramController} -
- */
-ProgramController.prototype.activate = function () {
-    if (!this._activated) {
-        this._handler.activeProgram.deactivate();
-        this._handler.activeProgram = this;
-        var p = this._program;
-        this._activated = true;
-        p.enableAttribArrays();
-        p.use();
-    }
-    return this;
-};
-
-/**
- * Remove program from handler
- * @public
- */
-ProgramController.prototype.remove = function () {
-    var p = this._handler.programs;
-    if (p[this._program.name]) {
-        if (this._activated) {
-            this.deactivate();
+    activate() {
+        if (!this._activated) {
+            this._handler.activeProgram.deactivate();
+            this._handler.activeProgram = this;
+            var p = this._program;
+            this._activated = true;
+            p.enableAttribArrays();
+            p.use();
         }
-        this._program.delete();
-        p[this._program.name] = null;
-        delete p[this._program.name];
-    }
-};
+        return this;
+    };
 
-/**
- * Deactivate shader program. This is not necessary while activae function used.
- * @public
- */
-ProgramController.prototype.deactivate = function () {
-    this._program.disableAttribArrays();
-    this._activated = false;
-};
+    /**
+     * Remove program from handler
+     * @public
+     */
+    remove() {
+        var p = this._handler.programs;
+        if (p[this._program.name]) {
+            if (this._activated) {
+                this.deactivate();
+            }
+            this._program.delete();
+            p[this._program.name] = null;
+            delete p[this._program.name];
+        }
+    };
 
-/**
- * Returns program activity.
- * @public
- * @return {boolean} -
- */
-ProgramController.prototype.isActive = function () {
-    return this._activated;
-};
+    /**
+     * Deactivate shader program. This is not necessary while activae function used.
+     * @public
+     */
+    deactivate() {
+        this._program.disableAttribArrays();
+        this._activated = false;
+    };
 
-/**
- * Sets program uniforms and attributes values and return controller instance.
- * @public
- * @param {Object} params - Object with variable name and value like { value: 12, someArray:[1,2,3], uSampler: texture,... }
- * @return {og.webgl.ProgramController} -
- */
-ProgramController.prototype.set = function (params) {
-    this.activate();
-    this._program.set(params);
-    return this;
-};
+    /**
+     * Returns program activity.
+     * @public
+     * @return {boolean} -
+     */
+    isActive() {
+        return this._activated;
+    };
 
-/**
- * Draw index buffer with this program.
- * @public
- * @param {number} mode - Gl draw mode
- * @param {WEBGLBuffer} buffer - Buffer to draw.
- * @return {og.webgl.ProgramController} Returns current shader controller instance.
- */
-ProgramController.prototype.drawIndexBuffer = function (mode, buffer) {
-    this._program.drawIndexBuffer(mode, buffer);
-    return this;
-};
+    /**
+     * Sets program uniforms and attributes values and return controller instance.
+     * @public
+     * @param {Object} params - Object with variable name and value like { value: 12, someArray:[1,2,3], uSampler: texture,... }
+     * @return {og.webgl.ProgramController} -
+     */
+    set(params) {
+        this.activate();
+        this._program.set(params);
+        return this;
+    };
 
-/**
- * Calls Gl drawArray function.
- * @param {number} mode - Gl draw mode.
- * @param {number} numItems - draw items count.
- * @return {og.webgl.ProgramController} Returns current shader controller instance.
- */
-ProgramController.prototype.drawArrays = function (mode, numItems) {
-    this._program.drawArrays(mode, numItems);
-    return this;
-};
+    /**
+     * Draw index buffer with this program.
+     * @public
+     * @param {number} mode - Gl draw mode
+     * @param {WEBGLBuffer} buffer - Buffer to draw.
+     * @return {og.webgl.ProgramController} Returns current shader controller instance.
+     */
+    drawIndexBuffer(mode, buffer) {
+        this._program.drawIndexBuffer(mode, buffer);
+        return this;
+    };
 
-export { ProgramController };
+    /**
+     * Calls Gl drawArray function.
+     * @param {number} mode - Gl draw mode.
+     * @param {number} numItems - draw items count.
+     * @return {og.webgl.ProgramController} Returns current shader controller instance.
+     */
+    drawArrays(mode, numItems) {
+        this._program.drawArrays(mode, numItems);
+        return this;
+    };
+}