@openglobus/og 0.11.2 → 0.11.7

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}
          */
@@ -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);
@@ -193,7 +221,7 @@ export class Multisample {
     /**
      * Activate framebuffer frame to draw.
      * @public
-     * @returns {og.webgl.Framebuffer} Returns Current framebuffer.
+     * @returns {Framebuffer} Returns Current framebuffer.
      */
     activate() {
         var gl = this.handler.gl;
@@ -229,4 +257,4 @@ export class Multisample {
             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;
             }
@@ -348,4 +393,4 @@ class Program {
     }
 }
 
-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;
 
@@ -45,7 +49,7 @@ export class ProgramController {
     /**
      * Returns controller's shader program.
      * @public
-     * @return {og.webgl.Program} -
+     * @return {Program} -
      */
     getProgram() {
         return this._program;
@@ -106,7 +110,7 @@ export class ProgramController {
      * 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();
@@ -119,7 +123,7 @@ export class ProgramController {
      * @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);
@@ -130,10 +134,10 @@ export class 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.
+     * @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/src/og/inherits.js

@@ -1,8 +0,0 @@
-/**
- * @module og/inherits
- */
-
-export function inherits(childCtor, parentCtor) {
-    childCtor.prototype = Object.create(parentCtor.prototype);
-    childCtor.prototype.constructor = childCtor;
-}

package/src/og/utils/polylabel.js

@@ -1,176 +0,0 @@
-/* eslint-disable no-mixed-operators */
-goog.provide('og.utils.getPolyCenter');
-
-/*
-    ISC License
-    Copyright (c) 2016 Mapbox
-
-    Permission to use, copy, modify, and/or distribute this software for any purpose
-    with or without fee is hereby granted, provided that the above copyright notice
-    and this permission notice appear in all copies.
-
-    THE SOFTWARE IS PROVIDED "AS IS" AND ISC DISCLAIMS ALL WARRANTIES WITH REGARD TO
-    THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS.
-    IN NO EVENT SHALL ISC BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR
-    CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA
-    OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS
-    ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS
-    SOFTWARE.
-
-    https://github.com/mapbox/polylabel
-*/
-
-og.utils.getPolyCenter = function (polygon) {
-
-    function polylabel(polygon, precision, debug) {
-        precision = precision || 1.0;
-
-        // find the bounding box of the outer ring
-        var minX, minY, maxX, maxY;
-        for (var i = 0; i < polygon[0].length; i++) {
-            var p = polygon[0][i];
-            if (!i || p[0] < minX) minX = p[0];
-            if (!i || p[1] < minY) minY = p[1];
-            if (!i || p[0] > maxX) maxX = p[0];
-            if (!i || p[1] > maxY) maxY = p[1];
-        }
-
-        var width = maxX - minX;
-        var height = maxY - minY;
-        var cellSize = Math.min(width, height);
-        var h = cellSize / 2;
-
-        // a priority queue of cells in order of their "potential" (max distance to polygon)
-        var cellQueue = new Queue(null, compareMax);
-
-        if (cellSize === 0) return [minX, minY];
-
-        // cover polygon with initial cells
-        for (var x = minX; x < maxX; x += cellSize) {
-            for (var y = minY; y < maxY; y += cellSize) {
-                cellQueue.push(new Cell(x + h, y + h, h, polygon));
-            }
-        }
-
-        // take centroid as the first best guess
-        var bestCell = getCentroidCell(polygon);
-
-        // special case for rectangular polygons
-        var bboxCell = new Cell(minX + width / 2, minY + height / 2, 0, polygon);
-        if (bboxCell.d > bestCell.d) bestCell = bboxCell;
-
-        var numProbes = cellQueue.length;
-
-        while (cellQueue.length) {
-            // pick the most promising cell from the queue
-            var cell = cellQueue.pop();
-
-            // update the best cell if we found a better one
-            if (cell.d > bestCell.d) {
-                bestCell = cell;
-                if (debug) console.log('found best %d after %d probes', Math.round(1e4 * cell.d) / 1e4, numProbes);
-            }
-
-            // do not drill down further if there's no chance of a better solution
-            if (cell.max - bestCell.d <= precision) continue;
-
-            // split the cell into four cells
-            h = cell.h / 2;
-            cellQueue.push(new Cell(cell.x - h, cell.y - h, h, polygon));
-            cellQueue.push(new Cell(cell.x + h, cell.y - h, h, polygon));
-            cellQueue.push(new Cell(cell.x - h, cell.y + h, h, polygon));
-            cellQueue.push(new Cell(cell.x + h, cell.y + h, h, polygon));
-            numProbes += 4;
-        }
-
-        if (debug) {
-            console.log('num probes: ' + numProbes);
-            console.log('best distance: ' + bestCell.d);
-        }
-
-        return [bestCell.x, bestCell.y];
-    }
-
-    function compareMax(a, b) {
-        return b.max - a.max;
-    }
-
-    function Cell(x, y, h, polygon) {
-        this.x = x; // cell center x
-        this.y = y; // cell center y
-        this.h = h; // half the cell size
-        this.d = pointToPolygonDist(x, y, polygon); // distance from cell center to polygon
-        this.max = this.d + this.h * Math.SQRT2; // max distance to polygon within a cell
-    }
-
-    // signed distance from point to polygon outline (negative if point is outside)
-    function pointToPolygonDist(x, y, polygon) {
-        var inside = false;
-        var minDistSq = Infinity;
-
-        for (var k = 0; k < polygon.length; k++) {
-            var ring = polygon[k];
-
-            for (var i = 0, len = ring.length, j = len - 1; i < len; j = i++) {
-                var a = ring[i];
-                var b = ring[j];
-
-                if ((a[1] > y !== b[1] > y) &&
-                    (x < (b[0] - a[0]) * (y - a[1]) / (b[1] - a[1]) + a[0])) inside = !inside;
-
-                minDistSq = Math.min(minDistSq, getSegDistSq(x, y, a, b));
-            }
-        }
-
-        return (inside ? 1 : -1) * Math.sqrt(minDistSq);
-    }
-
-    // get polygon centroid
-    function getCentroidCell(polygon) {
-        var area = 0;
-        var x = 0;
-        var y = 0;
-        var points = polygon[0];
-
-        for (var i = 0, len = points.length, j = len - 1; i < len; j = i++) {
-            var a = points[i];
-            var b = points[j];
-            var f = a[0] * b[1] - b[0] * a[1];
-            x += (a[0] + b[0]) * f;
-            y += (a[1] + b[1]) * f;
-            area += f * 3;
-        }
-        if (area === 0) return new Cell(points[0][0], points[0][1], 0, polygon);
-        return new Cell(x / area, y / area, 0, polygon);
-    }
-
-    // get squared distance from a point to a segment
-    function getSegDistSq(px, py, a, b) {
-
-        var x = a[0];
-        var y = a[1];
-        var dx = b[0] - x;
-        var dy = b[1] - y;
-
-        if (dx !== 0 || dy !== 0) {
-
-            var t = ((px - x) * dx + (py - y) * dy) / (dx * dx + dy * dy);
-
-            if (t > 1) {
-                x = b[0];
-                y = b[1];
-
-            } else if (t > 0) {
-                x += dx * t;
-                y += dy * t;
-            }
-        }
-
-        dx = px - x;
-        dy = py - y;
-
-        return dx * dx + dy * dy;
-    }
-
-    return polylabel(polygon, 1);
-};