@openglobus/og 0.13.7 → 0.13.10

package/src/og/utils/VectorTileCreator.js

@@ -237,7 +237,7 @@ export class VectorTileCreator {
                         height = _h;
                     }
 
-                    texture = (material._updateTexture && material._updateTexture) || h.createEmptyTexture_l(width, height);
+                    texture = material._updateTexture || h.createEmptyTexture_l(width, height);
 
                     f.setSize(width, height);
 

package/src/og/utils/functionComposition.js

@@ -0,0 +1,13 @@
+'use strict'
+
+// Used to compose other functions,
+// in a specific order to return to desired output.
+
+const compose = x => ({
+    run: f => compose(f(x)), // runs the function 
+    runForEach: f => compose(x.map(el => f(el))), // runs the function for an array
+    end: () => x, // result
+})
+
+export {compose}
+

package/src/og/webgl/Handler.js

@@ -11,6 +11,7 @@ import { isEmpty } from "../utils/shared.js";
 import { ProgramController } from "./ProgramController.js";
 import { Stack } from "../Stack.js";
 import { Vec2 } from "../math/Vec2.js";
+import { Events } from "../Events.js";
 
 const vendorPrefixes = ["", "WEBKIT_", "MOZ_"];
 
@@ -31,9 +32,9 @@ const MAX_LEVELS = 2;
  * @param {Array.<string>} [params.extensions] - Additional WebGL extension list. Available by default: EXT_texture_filter_anisotropic.
  */
 class Handler {
-    constructor(id, params) {
-        params = params || {};
+    constructor(id, params = {}) {
 
+        this.events = new Events(["visibilitychange", "resize"]);
         /**
          * Application default timer.
          * @public
@@ -137,6 +138,8 @@ class Handler {
 
         this.createTextureDefault = null;
 
+        this.ONCANVASRESIZE = null;
+
         if (params.autoActivate || isEmpty(params.autoActivate)) {
             this.initialize();
         }
@@ -174,7 +177,6 @@ class Handler {
             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;
                 }
@@ -223,25 +225,14 @@ class Handler {
         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,
-            level,
-            gl[internalFormat.toUpperCase()],
-            width,
-            height,
-            0,
-            gl[format.toUpperCase()],
-            gl[type.toUpperCase()],
-            null
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        gl.texImage2D(gl.TEXTURE_2D, level, gl[internalFormat.toUpperCase()], width, height, 0,
+            gl[format.toUpperCase()], gl[type.toUpperCase()], null
         );
-
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl[filter.toUpperCase()]);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl[filter.toUpperCase()]);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-
         gl.bindTexture(gl.TEXTURE_2D, null);
         return texture;
     }
@@ -257,7 +248,7 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
@@ -278,7 +269,7 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -298,7 +289,7 @@ class Handler {
         var gl = this.gl;
         var texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
@@ -339,10 +330,8 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.generateMipmap(gl.TEXTURE_2D);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -361,10 +350,8 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
         gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat || gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.generateMipmap(gl.TEXTURE_2D);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameterf(gl.TEXTURE_2D, this.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, this._params.anisotropy);
@@ -384,11 +371,10 @@ class Handler {
         var gl = this.gl;
         var texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
         gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat || gl.RGBA8, image.width, image.height);
         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -407,10 +393,10 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
         gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat || gl.RGBA8, image.width, image.height);
         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -429,11 +415,10 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
         gl.texStorage2D(gl.TEXTURE_2D, MAX_LEVELS, internalFormat || gl.RGBA8, image.width, image.height);
         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.generateMipmap(gl.TEXTURE_2D);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -452,11 +437,10 @@ class Handler {
         let gl = this.gl;
         let texture = gl.createTexture();
         gl.bindTexture(gl.TEXTURE_2D, texture);
-        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
-
+        //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+        //gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
         gl.texStorage2D(gl.TEXTURE_2D, MAX_LEVELS, internalFormat || gl.RGBA8, image.width, image.height);
         gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, image.width, image.height, gl.RGBA, gl.UNSIGNED_BYTE, image);
-
         gl.generateMipmap(gl.TEXTURE_2D);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
         gl.texParameterf(gl.TEXTURE_2D, this.extensions.EXT_texture_filter_anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, this._params.anisotropy);
@@ -503,7 +487,7 @@ class Handler {
         for (let i = 0; i < faces.length; i++) {
             let face = faces[i][1];
             gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
-            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+            //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
             gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, emptyImage);
         }
 
@@ -514,7 +498,7 @@ class Handler {
             image.onload = (function (texture, face, image) {
                 return function () {
                     gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
-                    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+                    //gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
                     gl.texImage2D(face, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
                 };
             })(texture, face, image);
@@ -677,6 +661,17 @@ class Handler {
         /** Initilalize shaders and rendering parameters*/
         this._initPrograms();
         this._setDefaults();
+
+        document.addEventListener("visibilitychange", () => {
+            if (document.visibilityState === 'visible') {
+                this.start();
+                this.ONCANVASRESIZE && this.ONCANVASRESIZE();
+                this.events.dispatch(this.events.visibilitychange, true);
+            } else {
+                this.events.dispatch(this.events.visibilitychange, false);
+                this.stop();
+            }
+        });
     }
 
     /**
@@ -812,7 +807,8 @@ class Handler {
         this._oneByHeight = 1.0 / this.canvas.height;
 
         this.gl && this.gl.viewport(0, 0, w, h);
-        this.onCanvasResize && this.onCanvasResize(this.canvas);
+        this.ONCANVASRESIZE && this.ONCANVASRESIZE(this.canvas);
+        this.events.dispatch(this.events.resize, this);
     }
 
     get pixelRatio() {
@@ -882,7 +878,12 @@ class Handler {
         let canvas = this.canvas;
 
         if (Math.floor(canvas.clientWidth * this._params.pixelRatio) !== canvas.width || Math.floor(canvas.clientHeight * this._params.pixelRatio) !== canvas.height) {
-            this.setSize(canvas.clientWidth, canvas.clientHeight);
+            if (canvas.clientWidth === 0 || canvas.clientHeight === 0) {
+                this.stop();
+            } else if (!document.hidden) {
+                this.start();
+                this.setSize(canvas.clientWidth, canvas.clientHeight);
+            }
         }
 
         /** Draw frame */

package/src/og/webgl/ProgramController.js

@@ -1,143 +1,143 @@
-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
- * program capabilities, like switching program during the rendering.
- * Get access to the program from ...handler.programs.<program name> etc.
- * @class
- */
-export class ProgramController {
-    /**
-     *
-     * @param {Handler} handler - Handler.
-     * @param {Program} program - Shader program.
-     */
-    constructor(handler, program) {
-        /**
-         * Shader program.
-         * @private
-         * @type {Program}
-         */
-        this._program = program;
-
-        /**
-         * Handler.
-         * @private
-         * @type {Handler}
-         */
-        this._handler = handler;
-
-        /**
-         * Program current frame activation flag.
-         * @private
-         * @type {boolean}
-         */
-        this._activated = false;
-    }
-
-    /**
-     * Lazy create program call.
-     * @public
-     */
-    initialize() {
-        this._program.createProgram(this._handler.gl);
-    }
-
-    /**
-     * Returns controller's shader program.
-     * @public
-     * @return {Program} -
-     */
-    getProgram() {
-        return this._program;
-    }
-
-    /**
-     * Activates current shader program.
-     * @public
-     * @returns {ProgramController} -
-     */
-    activate() {
-        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
-     */
-    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];
-        }
-    }
-
-    /**
-     * Deactivate shader program. This is not necessary while activae function used.
-     * @public
-     */
-    deactivate() {
-        this._program.disableAttribArrays();
-        this._activated = false;
-    }
-
-    /**
-     * Returns program activity.
-     * @public
-     * @return {boolean} -
-     */
-    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 {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 {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 {ProgramController} Returns current shader controller instance.
-     */
-    drawArrays(mode, numItems) {
-        this._program.drawArrays(mode, numItems);
-        return this;
-    }
-}
+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
+ * program capabilities, like switching program during the rendering.
+ * Get access to the program from ...handler.programs.<program name> etc.
+ * @class
+ */
+export class ProgramController {
+    /**
+     *
+     * @param {Handler} handler - Handler.
+     * @param {Program} program - Shader program.
+     */
+    constructor(handler, program) {
+        /**
+         * Shader program.
+         * @private
+         * @type {Program}
+         */
+        this._program = program;
+
+        /**
+         * Handler.
+         * @private
+         * @type {Handler}
+         */
+        this._handler = handler;
+
+        /**
+         * Program current frame activation flag.
+         * @private
+         * @type {boolean}
+         */
+        this._activated = false;
+    }
+
+    /**
+     * Lazy create program call.
+     * @public
+     */
+    initialize() {
+        this._program.createProgram(this._handler.gl);
+    }
+
+    /**
+     * Returns controller's shader program.
+     * @public
+     * @return {Program} -
+     */
+    getProgram() {
+        return this._program;
+    }
+
+    /**
+     * Activates current shader program.
+     * @public
+     * @returns {ProgramController} -
+     */
+    activate() {
+        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
+     */
+    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];
+        }
+    }
+
+    /**
+     * Deactivate shader program. This is not necessary while activae function used.
+     * @public
+     */
+    deactivate() {
+        this._program.disableAttribArrays();
+        this._activated = false;
+    }
+
+    /**
+     * Returns program activity.
+     * @public
+     * @return {boolean} -
+     */
+    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 {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 {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 {ProgramController} Returns current shader controller instance.
+     */
+    drawArrays(mode, numItems) {
+        this._program.drawArrays(mode, numItems);
+        return this;
+    }
+}

package/types/Object3d.d.ts

@@ -0,0 +1,22 @@
+export class Object3d {
+    static scale(vertices: any, s: any): void;
+    static centroid(vertices: any): number[];
+    static translate(vertices: any, v: any): void;
+    static getNormals(vertices: any): any[];
+    static createSphere(lonBands?: number, latBands?: number, radius?: number, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
+    static createDisc(radius: number, height: number, radialSegments: number, isTop: boolean, startIndex: number, offsetX: number, offsetY: any, offsetZ?: number): Object3d;
+    static createCylinder(radiusTop?: number, radiusBottom?: number, height?: number, radialSegments?: number, heightSegments?: number, isTop?: boolean, isBottom?: boolean, offsetX?: number, offsetY?: number, offsetZ?: number): Object3d;
+    static createCube(length?: number, height?: number, depth?: number, xOffset?: number, yOffset?: number, zOffset?: number): Object3d;
+    static createArrow(back?: number, height?: number, front?: number): Object3d;
+    constructor(data: any);
+    _name: any;
+    _vertices: any;
+    _texCoords: any[];
+    color: any[] | Float32Array;
+    _indexes: any;
+    _normals: any;
+    get name(): any;
+    get vertices(): any;
+    get normals(): any;
+    get indexes(): any;
+}