@openglobus/og 0.11.5 → 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 {
@@ -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;
                 }
@@ -219,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);
 
@@ -295,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);
@@ -316,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);
@@ -356,8 +356,8 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     static createTexture_l(handler, image) {
-        var gl = handler.gl;
-        var texture = gl.createTexture();
+        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);
@@ -375,8 +375,8 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     static createTexture_mm(handler, image) {
-        var gl = handler.gl;
-        var texture = gl.createTexture();
+        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);
@@ -395,8 +395,8 @@ class Handler {
      * @returns {Object} - WebGL texture object.
      */
     static createTexture_a(handler, image) {
-        var gl = handler.gl;
-        var texture = gl.createTexture();
+        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);
@@ -452,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],
@@ -469,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];
@@ -505,7 +505,7 @@ class Handler {
      */
     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) {
@@ -534,7 +534,7 @@ class Handler {
      * @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]);
         }
     }
@@ -563,7 +563,7 @@ class Handler {
      * @private
      */
     _initPrograms() {
-        for (var p in this.programs) {
+        for (let p in this.programs) {
             this._initProgramController(this.programs[p]);
         }
     }
@@ -577,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) {
@@ -618,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);
         }
@@ -646,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;
         });
@@ -710,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,
@@ -750,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);
@@ -759,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
@@ -769,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);
@@ -836,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));
     }
 
@@ -847,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);
         }
@@ -872,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);
     }
@@ -914,8 +933,8 @@ 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);
@@ -923,8 +942,8 @@ class Handler {
             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;
@@ -944,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);
         }
 
@@ -965,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);
@@ -975,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);
@@ -1013,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;
@@ -1037,7 +1056,7 @@ export const createTexture = {
     NEAREST: Handler.createTexture_n,
     LINEAR: Handler.createTexture_l,
     MIPMAP: Handler.createTexture_mm,
-    ANISOTROPHIC: Handler.createTexture_a
+    ANISOTROPIC: Handler.createTexture_a
 };
 
 export { Handler };

package/src/og/webgl/Multisample.js

@@ -2,7 +2,7 @@
  * @module og/webgl/Multisample
  */
 
-'use strict';
+"use strict";
 
 /**
  * Class represents multisample framebuffer.
@@ -16,9 +16,7 @@
  * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
  */
 export class Multisample {
-
     constructor(handler, options) {
-
         options = options || {};
 
         /**
@@ -28,7 +26,9 @@ export class Multisample {
          */
         this.handler = handler;
 
-        this._internalFormat = options.internalFormat ? options.internalFormat.toUpperCase() : "RGBA8";
+        this._internalFormat = options.internalFormat
+            ? options.internalFormat.toUpperCase()
+            : "RGBA8";
 
         /**
          * Framebuffer object.
@@ -62,10 +62,11 @@ export class Multisample {
 
         this._useDepth = options.useDepth != undefined ? options.useDepth : true;
 
-        this._depthComponent = options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
+        this._depthComponent =
+            options.depthComponent != undefined ? options.depthComponent : "DEPTH_COMPONENT16";
 
         /**
-         * Framebuffer activity. 
+         * Framebuffer activity.
          * @private
          * @type {boolean}
          */
@@ -102,7 +103,6 @@ export class Multisample {
      * @private
      */
     init() {
-
         var gl = this.handler.gl;
 
         this._glFilter = gl[this._filter];
@@ -115,8 +115,19 @@ export class Multisample {
         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);
+            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);
@@ -126,8 +137,19 @@ export class Multisample {
         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.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);
         }
 
@@ -137,7 +159,6 @@ export class Multisample {
     }
 
     blitTo(framebuffer, attachmentIndex = 0) {
-
         let gl = this.handler.gl;
 
         gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
@@ -147,9 +168,16 @@ export class Multisample {
         gl.clearBufferfv(gl.COLOR, 0, [0.0, 0.0, 0.0, 1.0]);
 
         gl.blitFramebuffer(
-            0, 0, this._width, this._height,
-            0, 0, framebuffer._width, framebuffer._height,
-            gl.COLOR_BUFFER_BIT, this._glFilter
+            0,
+            0,
+            this._width,
+            this._height,
+            0,
+            0,
+            framebuffer._width,
+            framebuffer._height,
+            gl.COLOR_BUFFER_BIT,
+            this._glFilter
         );
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
@@ -229,4 +257,4 @@ export class Multisample {
             gl.viewport(0, 0, h.canvas.width, h.canvas.height);
         }
     }
-}
+}