@openglobus/og 0.17.1 → 0.18.0

package/src/utils/Loader.ts

@@ -0,0 +1,247 @@
+import {EventsHandler, createEvents} from '../Events';
+import {Planet} from "../scene/Planet";
+import {Segment} from "../segment/Segment";
+
+type LoaderEventsList = ["loadend", "layerloadend"];
+
+const LOADER_EVENTS: LoaderEventsList = ["loadend", "layerloadend"];
+
+export interface IResponse {
+    status: string;
+    data?: any;
+    msg?: string;
+}
+
+type IResponseCallback = (response: IResponse) => void;
+
+// interface IResponseHandler {
+//     json: (r: Response) => Promise<any>;
+//     blob: (r: Response) => Promise<Blob>;
+//     arrayBuffer: (r: Response) => Promise<ArrayBuffer>;
+//     imageBitmap: (r: Response) => Promise<ImageBitmap>;
+//     text: (r: Response) => Promise<string>;
+// }
+
+interface Obj<T> {
+    __id: number;
+    isIdle: boolean;
+    isEqual: (obj: T) => boolean;
+    events: EventsHandler<any>
+    _planet: Planet | null;
+
+}
+
+type QueryParams<T> = {
+    sender?: T,
+    src: string,
+    type: string,
+    filter?: (val: QueryParams<T>) => boolean,
+    options?: any,
+    segment?: Segment
+};
+
+type QueueData<T> = {
+    params: QueryParams<T>,
+    callback: IResponseCallback
+};
+
+type RequestCounter<T> = {
+    sender: T,
+    counter: number,
+    __requestCounterFrame__: number
+};
+
+
+export class Loader<T extends Obj<T>> {
+    public MAX_REQUESTS: number;
+
+    public events: EventsHandler<LoaderEventsList>;
+
+    protected _loading: number;
+
+    protected _queue: QueueData<T>[];//new QueueArray();
+
+    protected _senderRequestCounter: RequestCounter<T>[];
+
+    protected _promises: { [key: string]: (r: Response) => Promise<any> };//IResponseHandler;
+
+    constructor(maxRequests: number = 24) {
+
+        this.MAX_REQUESTS = maxRequests;
+
+        this.events = createEvents(LOADER_EVENTS);
+
+        this._loading = 0;
+
+        this._queue = [];//new QueueArray();
+
+        this._senderRequestCounter = [];
+
+        this._promises = {
+            'json': r => r.json(),
+            'blob': r => r.blob(),
+            'arrayBuffer': r => r.arrayBuffer(),
+            'imageBitmap': r => r.blob().then(
+                (r: Blob) => createImageBitmap(r, {
+                    premultiplyAlpha: "premultiply"
+                })),
+            'text': r => r.text()
+        };
+    }
+
+    public load(params: QueryParams<T>, callback: IResponseCallback) {
+        if (params.sender) {
+            if (!this._senderRequestCounter[params.sender.__id]) {
+                this._senderRequestCounter[params.sender.__id] = {
+                    sender: params.sender, counter: 0, __requestCounterFrame__: 0
+                };
+            }
+            this._senderRequestCounter[params.sender.__id].counter++;
+        }
+        this._queue.push({params, callback});
+        this._exec();
+    }
+
+    public fetch(params: QueryParams<T>) {
+        return fetch(params.src, params.options || {})
+            .then((response: Response) => {
+                if (!response.ok) {
+                    throw Error(`Unable to load '${params.src}'`);
+                }
+                return this._promises[params.type || "blob"](response);
+            })
+
+            .then((data: any) => {
+                return {status: "ready", data: data};
+
+            })
+
+            .catch((err: Error) => {
+                return {status: "error", msg: err.toString()};
+            });
+    }
+
+    public getRequestCounter(sender: T): number {
+        if (sender) {
+            let r = this._senderRequestCounter[sender.__id];
+            if (r) {
+                return r.counter;
+            }
+        }
+        return 0;
+    }
+
+    public isIdle(sender: T): boolean {
+        return sender.isIdle;
+    }
+
+    protected _checkLoadend(request: RequestCounter<T>, sender: T) {
+        if (request.counter === 0 && (!sender._planet || sender._planet._terrainCompletedActivated)) {
+            sender.events.dispatch(sender.events.loadend, sender);
+            this.events.dispatch(this.events.layerloadend, sender);
+            request.__requestCounterFrame__ = 0;
+        } else {
+            request.__requestCounterFrame__ = requestAnimationFrame(() => {
+                this._checkLoadend(request, sender);
+            });
+        }
+    }
+
+    protected _handleResponse(q: QueueData<T>, response: IResponse) {
+        q.callback(response);
+        let sender = q.params.sender;
+        if (sender && (sender.events.loadend!.handlers.length || this.events.layerloadend!.handlers.length)) {
+            let request = this._senderRequestCounter[sender.__id];
+            if (request && request.counter > 0) {
+                request.counter--;
+                cancelAnimationFrame(request.__requestCounterFrame__!);
+                request.__requestCounterFrame__ = requestAnimationFrame(() => {
+                    this._checkLoadend(request, sender!);
+                });
+            }
+        }
+        this._exec();
+    }
+
+    protected _exec() {
+
+        if (this._queue.length > 0 && this._loading < this.MAX_REQUESTS) {
+
+            let q = this._queue.pop()!;
+
+            if (!q) return;
+
+            let p = q.params;
+
+            if (!p.filter || p.filter(p)) {
+
+                this._loading++;
+
+                return fetch(p.src!, p.options || {})
+                    .then((response: Response) => {
+                        if (!response.ok) {
+                            throw Error(`Unable to load '${p.src}'`);
+                        }
+                        return this._promises[p.type || "blob"](response);
+                    })
+                    .then((data: any) => {
+                        this._loading--;
+                        this._handleResponse(q, {status: "ready", data: data});
+                    })
+                    .catch((err: Error) => {
+                        this._loading--;
+                        this._handleResponse(q, {status: "error", msg: err.toString()});
+                    });
+
+            } else {
+                this._handleResponse(q, {status: "abort"});
+            }
+        } else if (this._loading === 0) {
+            this.events.dispatch(this.events.loadend);
+        }
+    }
+
+    public abort(sender: T) {
+
+        if (this._senderRequestCounter[sender.__id]) {
+            this._senderRequestCounter[sender.__id].counter = 0;
+            cancelAnimationFrame(this._senderRequestCounter[sender.__id].__requestCounterFrame__);
+            this._senderRequestCounter[sender.__id].__requestCounterFrame__ = 0;
+        }
+
+        for (let i = 0, len = this._queue.length; i < len; i++) {
+            let qi = this._queue[i];
+            if (qi && qi.params.sender && sender.isEqual(qi.params.sender)) {
+                qi.callback({'status': "abort"});
+                //@ts-ignore
+                this._queue[i] = null;
+            }
+        }
+    }
+
+    public abortAll() {
+        for (let i = 0, len = this._queue.length; i < len; i++) {
+            let qi = this._queue[i];
+            if (qi) {
+                let sender = qi.params.sender;
+                if (sender && this._senderRequestCounter[sender.__id]) {
+                    this._senderRequestCounter[sender.__id].counter = 0;
+                    cancelAnimationFrame(this._senderRequestCounter[sender.__id].__requestCounterFrame__);
+                    this._senderRequestCounter[sender.__id].__requestCounterFrame__ = 0;
+                }
+                qi.callback({'status': "abort"});
+                //@ts-ignore
+                this._queue[i] = null;
+            }
+        }
+        this._queue = [];
+    }
+
+    public get loading(): number {
+        return this._loading;
+    }
+
+    public get queue(): QueueData<T>[] {
+        return this._queue;
+    }
+}

package/src/{og/utils/NormalMapCreator.js → utils/NormalMapCreator.ts}

@@ -1,15 +1,40 @@
-"use strict";
-
-import { Lock } from "../Lock.js";
-import * as quadTree from "../quadTree/quadTree.js";
-import { QueueArray } from "../QueueArray.js";
-import { Framebuffer } from "../webgl/Framebuffer.js";
-import { Program } from "../webgl/Program.js";
+import * as quadTree from "../quadTree/quadTree";
+import {Framebuffer} from "../webgl/Framebuffer";
+import {Lock, Key} from "../Lock";
+import {Planet} from "../scene/Planet";
+import {Program} from "../webgl/Program";
+import {QueueArray} from "../QueueArray";
+import {Segment} from "../segment/Segment";
+import {WebGLBufferExt, WebGLTextureExt, Handler} from "../webgl/Handler";
+
+interface INormalMapCreatorParams {
+    minTableSize?: number;
+    maxTableSize?: number;
+    width?: number;
+    height?: number;
+}
 
 export class NormalMapCreator {
 
-    constructor(planet, options) {
-        options = options || {};
+    protected _minTabelSize: number;
+    protected _maxTableSize: number;
+
+    protected _planet: Planet;
+    protected _handler: Handler | null;
+    protected _verticesBufferArray: WebGLBufferExt[];
+    protected _indexBufferArray: WebGLBufferExt[];
+    protected _positionBuffer: WebGLBufferExt | null;
+    protected _framebuffer: Framebuffer | null;
+    protected _normalMapVerticesTexture: WebGLTextureExt | null;
+
+    protected _width: number;
+    protected _height: number;
+
+    protected _queue: QueueArray<Segment>;
+
+    protected _lock: Lock;
+
+    constructor(planet: Planet, options: INormalMapCreatorParams = {}) {
 
         this._minTabelSize = options.minTableSize || 1;
         this._maxTableSize = options.maxTableSize || 8;
@@ -30,18 +55,26 @@ export class NormalMapCreator {
         this._lock = new Lock();
     }
 
-    init() {
+    public get width(): number {
+        return this._width;
+    }
+
+    public get height(): number {
+        return this._height;
+    }
+
+    public init() {
 
-        this._maxTableSize = this._planet._maxGridSize || 8;
+        this._maxTableSize = this._planet.maxGridSize || 8;
 
-        this._handler = this._planet.renderer.handler;
+        this._handler = this._planet.renderer!.handler;
 
         let isWebkit = false; //('WebkitAppearance' in document.documentElement.style) && !/^((?!chrome).)*safari/i.test(navigator.userAgent);
 
         /*==================================================================================
          * http://www.sunsetlakesoftware.com/2013/10/21/optimizing-gaussian-blurs-mobile-gpu
          *=================================================================================*/
-        var normalMapBlur = new Program("normalMapBlur", {
+        const normalMapBlur = new Program("normalMapBlur", {
             attributes: {
                 a_position: "vec2"
             },
@@ -56,10 +89,10 @@ export class NormalMapCreator {
 
                       void main() {
                           vec2 vt = a_position * 0.5 + 0.5; 
-                          ${isWebkit ? "vt.y = 1.0 - vt.y; " : " " }
+                          ${isWebkit ? "vt.y = 1.0 - vt.y; " : " "}
                           gl_Position = vec4(a_position, 0.0, 1.0);
                           blurCoordinates[0] = vt;
-                          blurCoordinates[1] = vt + ${(1.0 / this._width) * 1.407333 };
+                          blurCoordinates[1] = vt + ${(1.0 / this._width) * 1.407333};
                           blurCoordinates[2] = vt - ${(1.0 / this._height) * 1.407333};
                           blurCoordinates[3] = vt + ${(1.0 / this._width) * 3.294215};
                           blurCoordinates[4] = vt - ${(1.0 / this._height) * 3.294215};
@@ -84,11 +117,12 @@ export class NormalMapCreator {
                         }`
         });
 
-        var normalMap = new Program("normalMap", {
+        const normalMap = new Program("normalMap", {
             attributes: {
                 a_position: "vec2",
                 a_normal: "vec3"
             },
+            uniforms: {},
             vertexShader: `attribute vec2 a_position;
                       attribute vec3 a_normal;
                       
@@ -123,9 +157,11 @@ export class NormalMapCreator {
 
         //create vertices hasharray for different grid size segments from 2^4(16) to 2^7(128)
         for (let p = this._minTabelSize; p <= this._maxTableSize; p++) {
-            var gs = Math.pow(2, p);
-            var gs2 = gs / 2;
-            var vertices = new Float32Array((gs + 1) * (gs + 1) * 2);
+
+            const gs = Math.pow(2, p);
+            const gs2 = gs / 2;
+
+            let vertices = new Float32Array((gs + 1) * (gs + 1) * 2);
 
             for (let i = 0; i <= gs; i++) {
                 for (let j = 0; j <= gs; j++) {
@@ -140,51 +176,50 @@ export class NormalMapCreator {
                 2,
                 vertices.length / 2
             );
+
             this._indexBufferArray[gs] =
-                this._planet._indexesCache[Math.log2(gs)][Math.log2(gs)][Math.log2(gs)][Math.log2(gs)][
-                    Math.log2(gs)
-                ].buffer;
+                this._planet._indexesCache[Math.log2(gs)][Math.log2(gs)][Math.log2(gs)][Math.log2(gs)][Math.log2(gs)].buffer!;
         }
 
         //create 2d screen square buffer
-        var positions = new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]);
+        const positions = new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]);
 
         this._positionBuffer = this._handler.createArrayBuffer(positions, 2, positions.length / 2);
     }
 
-    _drawNormalMapBlur(segment) {
-        var normals = segment.normalMapNormals;
+    protected _drawNormalMapBlur(segment: Segment): boolean {
+        let normals = segment.normalMapNormals;
         if (
             segment.node &&
             segment.node.getState() !== quadTree.NOTRENDERING &&
             normals &&
             normals.length
         ) {
-            var size = normals.length / 3;
-            var gridSize = Math.sqrt(size) - 1;
+            const size = normals.length / 3;
+            const gridSize = Math.sqrt(size) - 1;
 
             let indBuf = this._verticesBufferArray[gridSize];
 
             if (indBuf) {
-                if (segment.planet.terrain.equalizeNormals) {
+                if (segment.planet.terrain!.equalizeNormals) {
                     segment._normalMapEdgeEqualize(quadTree.N);
                     segment._normalMapEdgeEqualize(quadTree.S);
                     segment._normalMapEdgeEqualize(quadTree.W);
                     segment._normalMapEdgeEqualize(quadTree.E);
                 }
 
-                var outTexture = segment.normalMapTexturePtr;
+                let outTexture = segment.normalMapTexturePtr;
 
-                var h = this._handler;
-                var gl = h.gl;
+                const h = this._handler!;
+                const gl = h.gl!;
 
-                var _normalsBuffer = h.createArrayBuffer(normals, 3, size, gl.DYNAMIC_DRAW);
+                let _normalsBuffer = h.createArrayBuffer(normals, 3, size, gl.DYNAMIC_DRAW);
 
-                var f = this._framebuffer;
-                var p = h.programs.normalMap;
-                var sha = p._program.attributes;
+                const f = this._framebuffer!;
+                let p = h.programs.normalMap;
+                let sha = p._program.attributes;
 
-                f.bindOutputTexture(this._normalMapVerticesTexture);
+                f.bindOutputTexture(this._normalMapVerticesTexture!);
 
                 p.activate();
 
@@ -207,24 +242,24 @@ export class NormalMapCreator {
                 //
                 // blur pass
                 //
-                f.bindOutputTexture(outTexture);
+                f.bindOutputTexture(outTexture!);
 
                 p = h.programs.normalMapBlur;
 
                 p.activate();
-                gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer);
+                gl.bindBuffer(gl.ARRAY_BUFFER, this._positionBuffer!);
                 gl.vertexAttribPointer(
                     p._program.attributes.a_position,
-                    this._positionBuffer.itemSize,
+                    this._positionBuffer!.itemSize,
                     gl.FLOAT,
                     false,
                     0,
                     0
                 );
                 gl.activeTexture(gl.TEXTURE0);
-                gl.bindTexture(gl.TEXTURE_2D, this._normalMapVerticesTexture);
+                gl.bindTexture(gl.TEXTURE_2D, this._normalMapVerticesTexture!);
                 gl.uniform1i(p._program.uniforms.s_texture, 0);
-                gl.drawArrays(gl.TRIANGLE_STRIP, 0, this._positionBuffer.numItems);
+                gl.drawArrays(gl.TRIANGLE_STRIP, 0, this._positionBuffer!.numItems);
                 return true;
             } else {
                 return true;
@@ -233,39 +268,39 @@ export class NormalMapCreator {
         return false;
     }
 
-    _drawNormalMapNoBlur(segment) {
-        var normals = segment.normalMapNormals;
+    protected _drawNormalMapNoBlur(segment: Segment): boolean {
+        let normals = segment.normalMapNormals;
         if (
             segment.node &&
             segment.node.getState() !== quadTree.NOTRENDERING &&
             normals &&
             normals.length
         ) {
-            var size = normals.length / 3;
-            var gridSize = Math.sqrt(size) - 1;
+            const size = normals.length / 3;
+            const gridSize = Math.sqrt(size) - 1;
 
             let indBuf = this._verticesBufferArray[gridSize];
 
             if (indBuf) {
-                if (segment.planet.terrain.equalizeNormals) {
+                if (segment.planet.terrain!.equalizeNormals) {
                     segment._normalMapEdgeEqualize(quadTree.N);
                     segment._normalMapEdgeEqualize(quadTree.S);
                     segment._normalMapEdgeEqualize(quadTree.W);
                     segment._normalMapEdgeEqualize(quadTree.E);
                 }
 
-                var outTexture = segment.normalMapTexturePtr;
+                let outTexture = segment.normalMapTexturePtr;
 
-                var h = this._handler;
-                var gl = h.gl;
+                const h = this._handler!;
+                const gl = h.gl!;
 
-                var _normalsBuffer = h.createArrayBuffer(normals, 3, size, gl.DYNAMIC_DRAW);
+                let _normalsBuffer = h.createArrayBuffer(normals, 3, size, gl.DYNAMIC_DRAW);
 
-                var f = this._framebuffer;
-                var p = h.programs.normalMap;
-                var sha = p._program.attributes;
+                const f = this._framebuffer!;
+                const p = h.programs.normalMap;
+                const sha = p._program.attributes;
 
-                f.bindOutputTexture(outTexture);
+                f.bindOutputTexture(outTexture!);
 
                 p.activate();
 
@@ -293,21 +328,19 @@ export class NormalMapCreator {
         return false;
     }
 
-    _drawNormalMap(segment) {
-        let t = segment.planet.terrain;
-
-        if (t.isBlur(segment)) {
+    protected _drawNormalMap(segment: Segment) {
+        if (segment.planet.terrain!.isBlur(segment)) {
             return this._drawNormalMapBlur(segment);
         } else {
             return this._drawNormalMapNoBlur(segment);
         }
     }
 
-    drawSingle(segment) {
-        var h = this._handler,
-            gl = h.gl;
+    public drawSingle(segment: Segment) {
+        const h = this._handler!;
+        const gl = h.gl!;
 
-        this._framebuffer.activate();
+        this._framebuffer!.activate();
 
         gl.disable(gl.CULL_FACE);
         gl.disable(gl.DEPTH_TEST);
@@ -326,25 +359,25 @@ export class NormalMapCreator {
         gl.enable(gl.CULL_FACE);
         gl.enable(gl.BLEND);
 
-        this._framebuffer.deactivate();
+        this._framebuffer!.deactivate();
     }
 
-    frame() {
+    public frame() {
         if (this._queue.length) {
-            var h = this._handler,
-                gl = h.gl;
+            const h = this._handler!;
+            const gl = h.gl!;
 
-            this._framebuffer.activate();
+            this._framebuffer!.activate();
 
             gl.disable(gl.CULL_FACE);
             gl.disable(gl.DEPTH_TEST);
             gl.disable(gl.BLEND);
 
-            var deltaTime = 0,
+            let deltaTime = 0,
                 startTime = window.performance.now();
 
             while (this._lock.isFree() && this._queue.length && deltaTime < 0.25) {
-                var segment = this._queue.shift();
+                const segment = this._queue.shift()!;
                 if (segment.terrainReady && this._drawNormalMap(segment)) {
                     segment.normalMapReady = true;
                     segment.normalMapTexture = segment.normalMapTexturePtr;
@@ -360,27 +393,31 @@ export class NormalMapCreator {
             gl.enable(gl.DEPTH_TEST);
             gl.enable(gl.CULL_FACE);
 
-            this._framebuffer.deactivate();
+            this._framebuffer!.deactivate();
         }
     }
 
-    queue(segment) {
+    public get queueSize(): number {
+        return this._queue.length;
+    }
+
+    public queue(segment: Segment) {
         segment._inTheQueue = true;
         this._queue.push(segment);
     }
 
-    unshift(segment) {
+    public unshift(segment: Segment) {
         segment._inTheQueue = true;
         this._queue.unshift(segment);
     }
 
-    remove(segment) {
+    public remove(segment: Segment) {
         //...
     }
 
-    clear() {
+    public clear() {
         while (this._queue.length) {
-            var s = this._queue.pop();
+            let s = this._queue.pop()!;
             s._inTheQueue = false;
         }
     }
@@ -389,7 +426,7 @@ export class NormalMapCreator {
      * Set activity off
      * @public
      */
-    lock(key) {
+    public lock(key: Key) {
         this._lock.lock(key);
     }
 
@@ -397,7 +434,7 @@ export class NormalMapCreator {
      * Set activity on
      * @public
      */
-    free(key) {
+    public free(key: Key) {
         this._lock.free(key);
     }