@openglobus/og 0.11.1 → 0.11.6

package/src/og/webgl/Multisample.js

@@ -2,12 +2,12 @@
  * @module og/webgl/Multisample
  */
 
-'use strict';
+"use strict";
 
 /**
  * Class represents multisample framebuffer.
  * @class
- * @param {og.webgl.Handler} handler - WebGL handler.
+ * @param {Handler} handler - WebGL handler.
  * @param {Object} [options] - Framebuffer options:
  * @param {number} [options.width] - Framebuffer width. Default is handler canvas width.
  * @param {number} [options.height] - Framebuffer height. Default is handler canvas height.
@@ -16,19 +16,19 @@
  * @param {Boolean} [options.useDepth] - Using depth buffer during the rendering.
  */
 export class Multisample {
-
     constructor(handler, options) {
-
         options = options || {};
 
         /**
          * WebGL handler.
          * @public
-         * @type {og.webgl.Handler}
+         * @type {Handler}
          */
         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}
          */
@@ -78,7 +79,7 @@ export class Multisample {
         this._glFilter = null;
 
         this.renderbuffers = new Array(this._size);
-    };
+    }
 
     destroy() {
         var gl = this.handler.gl;
@@ -95,14 +96,13 @@ export class Multisample {
         this._fbo = null;
 
         this._active = false;
-    };
+    }
 
     /**
      * Framebuffer initialization.
      * @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,18 +137,28 @@ 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);
         }
 
         gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 
         return this;
-    };
+    }
 
     blitTo(framebuffer, attachmentIndex = 0) {
-
         let gl = this.handler.gl;
 
         gl.bindFramebuffer(gl.READ_FRAMEBUFFER, this._fbo);
@@ -147,15 +168,22 @@ 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);
         gl.bindFramebuffer(gl.READ_FRAMEBUFFER, null);
         gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, null);
-    };
+    }
 
     /**
      * Sets framebuffer viewport size.
@@ -175,7 +203,7 @@ export class Multisample {
             this.destroy();
             this.init();
         }
-    };
+    }
 
     /**
      * Returns framebuffer completed.
@@ -188,12 +216,12 @@ export class Multisample {
             return true;
         }
         return false;
-    };
+    }
 
     /**
      * Activate framebuffer frame to draw.
      * @public
-     * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
+     * @returns {Framebuffer} Returns Current framebuffer.
      */
     activate() {
         var gl = this.handler.gl;
@@ -205,7 +233,7 @@ export class Multisample {
         c && (c._active = false);
         this.handler.framebufferStack.push(this);
         return this;
-    };
+    }
 
     /**
      * Deactivate framebuffer frame.
@@ -228,5 +256,5 @@ export class Multisample {
         } else {
             gl.viewport(0, 0, h.canvas.width, h.canvas.height);
         }
-    };
-}
+    }
+}

package/src/og/webgl/Program.js

@@ -2,20 +2,13 @@
  * @module og/webgl/Program
  */
 
-'use strict';
+"use strict";
 
-import { callbacks } from './callbacks.js';
-import { cons } from '../cons.js';
-import { typeStr } from './types.js';
+import { callbacks } from "./callbacks.js";
+import { cons } from "../cons.js";
+import { typeStr, types } from "./types.js";
 
-const itemTypes = [
-    "BYTE",
-    "SHORT",
-    "UNSIGNED_BYTE",
-    "UNSIGNED_SHORT",
-    "FLOAT",
-    "HALF_FLOAT"
-];
+const itemTypes = ["BYTE", "SHORT", "UNSIGNED_BYTE", "UNSIGNED_SHORT", "FLOAT", "HALF_FLOAT"];
 
 /**
  * Represents more comfortable using WebGL shader program.
@@ -46,9 +39,11 @@ class Program {
          */
         this._attributes = {};
         for (let t in material.attributes) {
-            if (typeof (material.attributes[t]) === "string" ||
-                typeof (material.attributes[t]) === "number") {
-                this._attributes[t] = { 'type': material.attributes[t] };
+            if (
+                typeof material.attributes[t] === "string" ||
+                typeof material.attributes[t] === "number"
+            ) {
+                this._attributes[t] = { type: material.attributes[t] };
             } else {
                 this._attributes[t] = material.attributes[t];
             }
@@ -61,9 +56,11 @@ class Program {
          */
         this._uniforms = {};
         for (let t in material.uniforms) {
-            if (typeof (material.uniforms[t]) === "string" ||
-                typeof (material.uniforms[t]) === "number") {
-                this._uniforms[t] = { 'type': material.uniforms[t] };
+            if (
+                typeof material.uniforms[t] === "string" ||
+                typeof material.uniforms[t] === "number"
+            ) {
+                this._uniforms[t] = { type: material.uniforms[t] };
             } else {
                 this._uniforms[t] = material.uniforms[t];
             }
@@ -117,18 +114,32 @@ class Program {
          * @type {Array.<Object>}
          */
         this._attribArrays = [];
+
+        /**
+         * Program attributes divisor.
+         * @private
+         * @type {Array.<Object>}
+         */
+        this._attribDivisor = [];
     }
 
     /**
      * Bind program buffer.
      * @function
-     * @param {og.webgl.Program} program - Used program.
+     * @param {Program} program - Used program.
      * @param {Object} variable - Variable represents buffer data.
      */
     static bindBuffer(program, variable) {
         var gl = program.gl;
         gl.bindBuffer(gl.ARRAY_BUFFER, variable.value);
-        gl.vertexAttribPointer(variable._pName, variable.value.itemSize, variable.itemType, variable.normalized, 0, 0);
+        gl.vertexAttribPointer(
+            variable._pName,
+            variable.value.itemSize,
+            variable.itemType,
+            variable.normalized,
+            0,
+            0
+        );
     }
 
     /**
@@ -196,7 +207,9 @@ class Program {
         this.gl.shaderSource(shader, src);
         this.gl.compileShader(shader);
         if (!this.gl.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-            cons.logErr("og/Program/Program:" + this.name + " - " + this.gl.getShaderInfoLog(shader) + ".");
+            cons.logErr(
+                "og/Program/Program:" + this.name + " - " + this.gl.getShaderInfoLog(shader) + "."
+            );
             return false;
         }
         return true;
@@ -237,9 +250,9 @@ class Program {
     disableAttribArrays() {
         var gl = this.gl;
         var a = this._attribArrays;
-        var i = a.length;
-        while (i--) {
+        for (let i = 0, len = a.length; i < len; i++) {
             gl.disableVertexAttribArray(a[i]);
+            gl.vertexAttribDivisor(a[i], 0);
         }
     }
 
@@ -250,9 +263,10 @@ class Program {
     enableAttribArrays() {
         var gl = this.gl;
         var a = this._attribArrays;
-        var i = a.length;
-        while (i--) {
+        var d = this._attribDivisor;
+        for (let i = 0, len = a.length; i < len; i++) {
             gl.enableVertexAttribArray(a[i]);
+            gl.vertexAttribDivisor(a[i], d[i]);
         }
     }
 
@@ -280,7 +294,13 @@ class Program {
         gl.linkProgram(this._p);
 
         if (!gl.getProgramParameter(this._p, gl.LINK_STATUS)) {
-            cons.logErr("og/Program/Program:" + this.name + " - couldn't initialise shaders. " + gl.getProgramInfoLog(this._p) + ".");
+            cons.logErr(
+                "og/Program/Program:" +
+                    this.name +
+                    " - couldn't initialise shaders. " +
+                    gl.getProgramInfoLog(this._p) +
+                    "."
+            );
             gl.deleteProgram(this._p);
             return;
         }
@@ -293,25 +313,47 @@ class Program {
 
             this._attributes[a]._callback = Program.bindBuffer;
 
-            let itemTypeStr = this._attributes[a].itemType ? this._attributes[a].itemType.trim().toUpperCase() : "FLOAT";
+            let itemTypeStr = this._attributes[a].itemType
+                ? this._attributes[a].itemType.trim().toUpperCase()
+                : "FLOAT";
+
             if (itemTypes.indexOf(itemTypeStr) == -1) {
-                cons.logErr(`og/Program/Program: ${this.name}- attribute '${a}', item type ${this._attributes[a].itemType} not exists.`);
+                cons.logErr(
+                    `og/Program/Program: ${this.name}- attribute '${a}', item type ${this._attributes[a].itemType} not exists.`
+                );
                 this._attributes[a].itemType = gl.FLOAT;
             } else {
                 this._attributes[a].itemType = gl[itemTypeStr];
             }
 
             this._attributes[a].normalized = this._attributes[a].normalized || false;
+            this._attributes[a].divisor = this._attributes[a].divisor || 0;
 
             this._p[a] = gl.getAttribLocation(this._p, a);
 
             if (this._p[a] == undefined) {
-                cons.logErr("og/Program/Program:" + this.name + " - attribute '" + a + "' is not exists.");
+                cons.logErr(
+                    "og/Program/Program:" + this.name + " - attribute '" + a + "' is not exists."
+                );
                 gl.deleteProgram(this._p);
                 return;
             }
 
-            this._attribArrays.push(this._p[a]);
+            let type = this._attributes[a].type;
+            if (typeof type === "string") {
+                type = typeStr[type.trim().toLowerCase()];
+            }
+
+            let d = this._attributes[a].divisor;
+            if (type === types.MAT4) {
+                let loc = this._p[a];
+                this._attribArrays.push(loc, loc + 1, loc + 2, loc + 3);
+                this._attribDivisor.push(d, d, d, d);
+            } else {
+                this._attribArrays.push(this._p[a]);
+                this._attribDivisor.push(d);
+            }
+
             gl.enableVertexAttribArray(this._p[a]);
 
             this._attributes[a]._pName = this._p[a];
@@ -321,8 +363,9 @@ class Program {
         for (var u in this._uniforms) {
             //this.uniforms[u]._name = u;
 
-            if (typeof (this._uniforms[u].type) === "string") {
-                this._uniforms[u]._callback = callbacks.u[typeStr[this._uniforms[u].type.trim().toLowerCase()]];
+            if (typeof this._uniforms[u].type === "string") {
+                this._uniforms[u]._callback =
+                    callbacks.u[typeStr[this._uniforms[u].type.trim().toLowerCase()]];
             } else {
                 this._uniforms[u]._callback = callbacks.u[this._uniforms[u].type];
             }
@@ -331,7 +374,9 @@ class Program {
             this._p[u] = gl.getUniformLocation(this._p, u);
 
             if (this._p[u] == undefined) {
-                cons.logErr("og/Program/Program:" + this.name + " - uniform '" + u + "' is not exists.");
+                cons.logErr(
+                    "og/Program/Program:" + this.name + " - uniform '" + u + "' is not exists."
+                );
                 gl.deleteProgram(this._p);
                 return;
             }
@@ -346,6 +391,6 @@ class Program {
         gl.deleteShader(fs);
         gl.deleteShader(vs);
     }
-};
+}
 
-export { Program };
+export { Program };

package/src/og/webgl/ProgramController.js

@@ -1,28 +1,32 @@
-'use strict';
+import { Handler } from "./Handler.js";
+import { Program } from "./Program.js";
+
+("use strict");
 
 /**
- * This is shader program controller that used by hadler object to access the shader 
+ * This is shader program controller that used by hadler object to access the shader
  * program capabilities, like switching program during the rendering.
  * Get access to the program from ...handler.programs.<program name> etc.
  * @class
- * @param {og.webgl.Handler} handler - Handler.
- * @param {og.webgl.Program} program - Shader program.
  */
 export class ProgramController {
-
+    /**
+     *
+     * @param {Handler} handler - Handler.
+     * @param {Program} program - Shader program.
+     */
     constructor(handler, program) {
-
         /**
          * Shader program.
          * @private
-         * @type {og.webgl.Program}
+         * @type {Program}
          */
         this._program = program;
 
         /**
          * Handler.
          * @private
-         * @type {og.webgl.Handler}
+         * @type {Handler}
          */
         this._handler = handler;
 
@@ -32,7 +36,7 @@ export class ProgramController {
          * @type {boolean}
          */
         this._activated = false;
-    };
+    }
 
     /**
      * Lazy create program call.
@@ -40,16 +44,16 @@ export class ProgramController {
      */
     initialize() {
         this._program.createProgram(this._handler.gl);
-    };
+    }
 
     /**
      * Returns controller's shader program.
      * @public
-     * @return {og.webgl.Program} -
+     * @return {Program} -
      */
     getProgram() {
         return this._program;
-    };
+    }
 
     /**
      * Activates current shader program.
@@ -66,7 +70,7 @@ export class ProgramController {
             p.use();
         }
         return this;
-    };
+    }
 
     /**
      * Remove program from handler
@@ -82,7 +86,7 @@ export class ProgramController {
             p[this._program.name] = null;
             delete p[this._program.name];
         }
-    };
+    }
 
     /**
      * Deactivate shader program. This is not necessary while activae function used.
@@ -91,7 +95,7 @@ export class ProgramController {
     deactivate() {
         this._program.disableAttribArrays();
         this._activated = false;
-    };
+    }
 
     /**
      * Returns program activity.
@@ -100,40 +104,40 @@ export class ProgramController {
      */
     isActive() {
         return this._activated;
-    };
+    }
 
     /**
      * 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} -
+     * @return {ProgramController} -
      */
     set(params) {
         this.activate();
         this._program.set(params);
         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.
+     * @return {ProgramController} Returns current shader controller instance.
      */
     drawIndexBuffer(mode, buffer) {
         this._program.drawIndexBuffer(mode, buffer);
         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.
+     * @return {ProgramController} Returns current shader controller instance.
      */
     drawArrays(mode, numItems) {
         this._program.drawArrays(mode, numItems);
         return this;
-    };
-}
+    }
+}

package/src/og/webgl/callbacks.js

@@ -2,16 +2,16 @@
  * @module og/webgl/callbacks
  */
 
-'use strict';
+"use strict";
 
-import { types } from './types.js';
+import { types } from "./types.js";
 
 /*=========================
    Uniforms callbacks
  =========================*/
 export const callbacks = {
-    'u': [],
-    'a': []
+    u: [],
+    a: []
 };
 
 callbacks.u[types.MAT4] = function (program, variable) {
@@ -71,7 +71,7 @@ callbacks.u[types.SAMPLER2DARRAY] = function (program, variable) {
 };
 
 callbacks.u[types.INTXX] = function (program, variable) {
-    pgl.uniform1iv(variable._pName, variable.value);
+    program.gl.uniform1iv(variable._pName, variable.value);
 };
 
 callbacks.u[types.FLOATXX] = function (program, variable) {
@@ -93,6 +93,6 @@ callbacks.a[types.VEC3] = function (program, variable) {
     program.gl.vertexAttrib3fv(variable._pName, variable.value);
 };
 
-callbacks.a[types.VEC4] = function (program, variable) {
-    program.gl.vertexAttrib4fv(variable._pName, variable.value);
-};
+//callbacks.a[types.VEC4] = function (program, variable) {
+//    program.gl.vertexAttrib4fv(variable._pName, variable.value);
+//};

package/types/Clock.d.ts

@@ -1,7 +1,7 @@
 /**
  * Class represents application timer that stores custom current julian datetime, and time speed multiplier.
  * @class
- * @param {Object} [params]: - Clock parameters:
+ * @param {Object} [params] - Clock parameters:
  * @param {number} [params.startDate=0.0] - Julian start date.
  * @param {number} [params.endDate=0.0] - Julian end date.
  * @param {number} [params.currentDate] - Julian current date. Default: current date.
@@ -10,7 +10,11 @@
 export class Clock {
     static set _staticCounter(arg: any);
     static get _staticCounter(): any;
-    constructor(params: any);
+    /**
+     *
+     * @param {Object} [params] - Clock parameters:
+     */
+    constructor(params?: any);
     _id: number;
     /**
      * Clock name.

package/types/Deferred.d.ts

@@ -2,5 +2,5 @@ export function Deferred(): void;
 export class Deferred {
     resolve: any;
     reject: any;
-    promise: Promise<any>;
+    promise: any;
 }

package/types/Events.d.ts

@@ -1,12 +1,16 @@
 /**
  * Base events class to handle custom events.
  * @class
- * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
  */
 export class Events {
     static set _staticCounter(arg: any);
     static get _staticCounter(): any;
-    constructor(eventNames: any, sender: any);
+    /**
+     *
+     * @param {Array.<string>} [eventNames] - Event names that could be dispatched.
+     * @param {*} [sender]
+     */
+    constructor(eventNames?: Array<string>, sender?: any);
     /**
      * Registered event names.
      * @protected
@@ -45,14 +49,14 @@ export class Events {
      * @param {eventCallback} callback - Event callback function.
      * @param {Object} sender - Event callback function owner.
      */
-    public on(name: string, callback: any, sender: any, priority?: number): void;
+    public on(name: string, callback: eventCallback, sender: any, priority?: number): void;
     /**
      * Stop listening event name with specified callback function.
      * @public
      * @param {string} name - Event name.
      * @param {eventCallback} callback - Attached  event callback.
      */
-    public off(name: string, callback: any): void;
+    public off(name: string, callback: eventCallback): void;
     /**
      * Dispatch event.
      * @public