@openglobus/og 0.17.1 → 0.18.0

package/src/utils/FontAtlas.ts

@@ -0,0 +1,356 @@
+import {Deferred} from '../Deferred';
+import {Rectangle} from '../Rectangle';
+import {TextureAtlas, TextureAtlasNode} from './TextureAtlas';
+import {Handler} from "../webgl/Handler";
+import {HTMLImageElementExt} from "./ImagesCacheManager";
+
+//@todo: get the value from shader module
+const MAX_SIZE = 11;
+
+interface IChar {
+    id: number;
+    char: string;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    chnl: number;
+    index: number;
+    page: number;
+    xadvance: number;
+    xoffset: number;
+    yoffset: number;
+}
+
+interface IKerning {
+    first: number;
+    second: number;
+    amount: number;
+}
+
+export interface IFontParams {
+    common: {
+        scaleH: number;
+        scaleW: number;
+    };
+    info: {
+        size: number;
+    };
+    distanceField: {
+        distanceRange: number;
+    }
+    chars: IChar[];
+    kernings: IKerning[];
+    pages: string[];
+}
+
+class FontTextureAtlas extends TextureAtlas {
+    public width: number;
+    public height: number;
+    public gliphSize: number;
+    public distanceRange: number;
+    public override nodes: Map<number, FontTextureAtlasNode>;
+    public kernings: Record<number, Record<number, number>>;
+
+    constructor(width?: number, height?: number) {
+        super(width, height);
+        this.width = 0;
+        this.height = 0;
+        this.gliphSize = 0;
+        this.distanceRange = 0;
+        this.nodes = new Map<number, FontTextureAtlasNode>();
+        this.kernings = {};
+    }
+
+    public override get(key: number): FontTextureAtlasNode | undefined {
+        return this.nodes.get(key);
+    }
+}
+
+interface IMetrics extends IChar {
+    nChar: string;
+    nCode: number;
+    nWidth: number;
+    nHeight: number
+    nAdvance: number;
+    nXOffset: number;
+    nYOffset: number;
+}
+
+class FontTextureAtlasNode extends TextureAtlasNode {
+    public metrics: IMetrics;
+    public emptySize: number;
+
+    constructor(rect: Rectangle, texCoords: number[]) {
+        super(rect, texCoords);
+        this.emptySize = 1;
+        this.metrics = {
+            id: 0,
+            char: "",
+            width: 0,
+            height: 0,
+            x: 0,
+            y: 0,
+            chnl: 0,
+            index: 0,
+            page: 0,
+            xadvance: 0,
+            xoffset: 0,
+            yoffset: 0,
+
+            nChar: "",
+            nCode: 0,
+            nWidth: 0,
+            nHeight: 0,
+            nAdvance: 0,
+            nXOffset: 0,
+            nYOffset: 0
+        }
+    }
+}
+
+class FontAtlas {
+    public atlasesArr: FontTextureAtlas[];
+    public samplerArr: Uint32Array;
+    public sdfParamsArr: Float32Array;
+    public catalogSrc: string;
+
+    protected atlasIndexes: Record<string, number>;
+    protected atlasIndexesDeferred: Record<string, Deferred<number>>;
+    protected tokenImageSize: number;
+    protected _handler: Handler | null;
+
+    constructor(catalogSrc?: string) {
+        this.atlasesArr = [];
+        this.atlasIndexes = {};
+        this.atlasIndexesDeferred = {};
+        this.tokenImageSize = 64;
+        this.samplerArr = new Uint32Array(MAX_SIZE);
+        this.sdfParamsArr = new Float32Array(MAX_SIZE * 4);
+        this._handler = null;
+        this.catalogSrc = catalogSrc || "./";
+    }
+
+    public assignHandler(handler: Handler) {
+        this._handler = handler;
+    }
+
+    public getFontIndex(face: string): Promise<number> {
+        let fullName = this.getFullIndex(face);
+
+        // Try to load font from the directory
+        if (!this.atlasIndexes[fullName]) {
+            this.loadFont(fullName, this.catalogSrc, `${fullName}.json`);
+        }
+
+        if (!this.atlasIndexesDeferred[fullName]) {
+            this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+        }
+        return this.atlasIndexesDeferred[fullName].promise;
+    }
+
+    public getFullIndex(face: string): string {
+        return face.trim().toLowerCase();
+    }
+
+    protected _applyFontDataToAtlas(atlas: FontTextureAtlas, data: IFontParams, index: number = 0) {
+        let chars = data.chars;
+
+        atlas.height = data.common.scaleH;
+        atlas.width = data.common.scaleW;
+        atlas.gliphSize = data.info.size;
+        atlas.distanceRange = data.distanceField.distanceRange;
+
+        let w = atlas.width,
+            h = atlas.height,
+            s = atlas.gliphSize;
+
+        this.sdfParamsArr[index * 4] = w;
+        this.sdfParamsArr[index * 4 + 1] = h;
+        this.sdfParamsArr[index * 4 + 2] = s;
+        this.sdfParamsArr[index * 4 + 3] = atlas.distanceRange;
+
+        let idToChar: Record<number, string> = {};
+
+        for (let i = 0; i < chars.length; i++) {
+            let ci = chars[i];
+            let ti = ci.char;
+
+            idToChar[ci.id] = ti;
+
+            let r = new Rectangle(ci.x, ci.y, ci.x + ci.width, ci.y + ci.height);
+
+            let tc = new Array(12);
+
+            tc[0] = r.left / w;
+            tc[1] = r.top / h;
+
+            tc[2] = r.left / w;
+            tc[3] = r.bottom / h;
+
+            tc[4] = r.right / w;
+            tc[5] = r.bottom / h;
+
+            tc[6] = r.right / w;
+            tc[7] = r.bottom / h;
+
+            tc[8] = r.right / w;
+            tc[9] = r.top / h;
+
+            tc[10] = r.left / w;
+            tc[11] = r.top / h;
+
+            let taNode = new FontTextureAtlasNode(r, tc);
+            let ciNorm = ci.char.normalize('NFKC');
+            let ciCode = ciNorm.charCodeAt(0);
+
+            //taNode.metrics = ci;
+
+            let m = taNode.metrics;
+
+            m.id = ci.id;
+            m.char = ci.char;
+            m.width = ci.width;
+            m.height = ci.height;
+            m.x = ci.x;
+            m.y = ci.y;
+            m.chnl = ci.chnl;
+            m.index = ci.index;
+            m.page = ci.page;
+            m.xadvance = ci.xadvance;
+            m.xoffset = ci.xoffset;
+            m.yoffset = ci.yoffset;
+
+            m.nChar = ciNorm;
+            m.nCode = ciCode;
+            m.nWidth = taNode.metrics.width / s;
+            m.nHeight = taNode.metrics.height / s;
+            m.nAdvance = taNode.metrics.xadvance / s;
+            m.nXOffset = taNode.metrics.xoffset / s;
+            m.nYOffset = 1.0 - taNode.metrics.yoffset / s;
+
+            taNode.emptySize = 1;
+
+            atlas.nodes.set(ciNorm.charCodeAt(0), taNode);
+        }
+
+        atlas.kernings = {};
+
+        for (let i = 0; i < data.kernings.length; i++) {
+            let ki = data.kernings[i];
+
+            let first = ki.first,
+                second = ki.second;
+
+            //let charFirst = idToChar[first],
+            //    charSecond = idToChar[second];
+
+            // if (!atlas.kernings[charFirst]) {
+            //     atlas.kernings[charFirst] = {};
+            // }
+            //
+            // atlas.kernings[charFirst][charSecond] = ki.amount / s;
+
+            if (!atlas.kernings[first]) {
+                atlas.kernings[first] = {};
+            }
+
+            atlas.kernings[first][second] = ki.amount / s;
+        }
+    }
+
+    public initFont(faceName: string, dataJson: IFontParams, imageBase64: string) {
+        let index = this.atlasesArr.length;
+        let fullName = this.getFullIndex(faceName);
+
+        this.atlasIndexes[fullName] = index;
+
+        let def = this.atlasIndexesDeferred[fullName];
+        if (!def) {
+            def = this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+        }
+
+        this.samplerArr[this.atlasesArr.length] = index;
+
+        // TODO: FontTextureAtlas();
+        let atlas = new FontTextureAtlas();
+
+        atlas.height = 0;
+        atlas.width = 0;
+        atlas.gliphSize = 0;
+        atlas.distanceRange = 0;
+        atlas.kernings = {};
+
+        atlas.assignHandler(this._handler!);
+
+        this.atlasesArr[index] = atlas;
+
+        this._applyFontDataToAtlas(atlas, dataJson, index);
+
+        let img = new Image();
+        img.onload = () => {
+            this._createTexture(atlas, img);
+            def.resolve(index);
+        };
+        img.src = imageBase64;
+    }
+
+    protected _createTexture(atlas: FontTextureAtlas, img: HTMLImageElementExt) {
+        atlas.createTexture(img);
+    }
+
+    public loadFont(faceName: string, srcDir: string, atlasUrl: string) {
+
+        let index = this.atlasesArr.length;
+        let fullName = this.getFullIndex(faceName);
+
+        this.atlasIndexes[fullName] = index;
+
+        let def = this.atlasIndexesDeferred[fullName];
+        if (!def) {
+            def = this.atlasIndexesDeferred[fullName] = new Deferred<number>();
+        }
+
+        this.samplerArr[this.atlasesArr.length] = index;
+
+        // TODO: FontTextureAtlas();
+        let atlas = new FontTextureAtlas();
+
+        atlas.height = 0;
+        atlas.width = 0;
+        atlas.gliphSize = 0;
+        atlas.distanceRange = 0;
+        atlas.kernings = {};
+
+        atlas.assignHandler(this._handler!);
+        this.atlasesArr[index] = atlas;
+
+        fetch(`${srcDir}/${atlasUrl}`)
+            .then((response: Response) => {
+                if (!response.ok) {
+                    throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
+                }
+                //return response.json(response);
+                return response.json();
+            })
+            .then((data: IFontParams) => {
+
+                this._applyFontDataToAtlas(atlas, data, index);
+
+                let img = new Image();
+                img.onload = () => {
+                    this._createTexture(atlas, img);
+                    def.resolve(index);
+                };
+
+                img.src = `${srcDir}/${data.pages[0]}`;
+                img.crossOrigin = "Anonymous";
+            })
+            .catch(err => {
+                def.reject();
+                return {'status': "error", 'msg': err.toString()};
+            });
+    }
+}
+
+export {FontAtlas};

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

@@ -1,26 +1,44 @@
-'use strict';
-
-import { LonLat } from '../LonLat.js';
-import * as utils from '../utils/shared.js';
-import { Framebuffer } from '../webgl/Framebuffer.js';
-import { Program } from '../webgl/Program.js';
-import { doubleToTwoFloats2 } from "../math/coder.js";
+import * as utils from '../utils/shared';
+import {BaseGeoImage} from "../layer/BaseGeoImage";
+import {Framebuffer} from '../webgl/Framebuffer';
+import {LonLat} from '../LonLat';
+import {Program} from '../webgl/Program';
+import {Planet} from "../scene/Planet";
+import {doubleToTwoFloats2} from "../math/coder";
+import {WebGLBufferExt, WebGLTextureExt} from "../webgl/Handler";
 
 export class GeoImageCreator {
 
-    constructor(planet, maxFrames) {
+    public MAX_FRAMES: number;
+
+    protected _gridSize: number;
+    protected _planet: Planet;
+    public _framebuffer: Framebuffer | null;
+    protected _framebufferMercProj: Framebuffer | null;
+    public _texCoordsBuffer: WebGLBufferExt | null;
+    public _indexBuffer: WebGLBufferExt | null;
+    protected _currentFrame: number;
+    protected _queue: BaseGeoImage[];
+    protected _animate: BaseGeoImage[];
+    protected _quadTexCoordsBuffer: WebGLBufferExt | null;
+    protected _quadVertexBuffer: WebGLTextureExt | null;
+
+    constructor(planet: Planet, maxFrames: number = 5) {
+        this.MAX_FRAMES = maxFrames;
         this._gridSize = 64;
         this._planet = planet;
         this._framebuffer = null;
+        this._framebufferMercProj = null;
         this._texCoordsBuffer = null;
         this._indexBuffer = null;
-        this.MAX_FRAMES = maxFrames || 5;
         this._currentFrame = 0;
         this._queue = [];
         this._animate = [];
+        this._quadTexCoordsBuffer = null;
+        this._quadVertexBuffer = null;
     }
 
-    init() {
+    public init() {
         this._initShaders();
         this._initBuffers();
     }
@@ -29,9 +47,10 @@ export class GeoImageCreator {
      * Creates geoImage corners coordinates grid buffer.
      * @public
      * @param{Array.<LonLat>} c - GeoImage corners coordinates.
+     * @param{boolean} [toMerc=false] - Transform to web mercator.
      * @return{WebGLBuffer} Grid coordinates buffer.
      */
-    createGridBuffer(c, toMerc) {
+    public createGridBuffer(c: LonLat[], toMerc: boolean = false): [WebGLBufferExt, WebGLBufferExt] {
         let gs = this._gridSize;
 
         let v03 = new LonLat((c[3].lon - c[0].lon) / gs, (c[3].lat - c[0].lat) / gs),
@@ -61,7 +80,7 @@ export class GeoImageCreator {
             for (let j = 0; j <= gs; j++) {
                 let P01j = new LonLat(c[0].lon + j * v01.lon, c[0].lat + j * v01.lat),
                     P32j = new LonLat(c[3].lon + j * v32.lon, c[3].lat + j * v32.lat);
-                let xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j);
+                let xx = utils.getLinesIntersectionLonLat(P03i, P12i, P01j, P32j)!;
                 doubleToTwoFloats2(xx.lon, tempArr);
                 gridHigh[kh++] = tempArr[0];
                 gridLow[kl++] = tempArr[1];
@@ -83,22 +102,19 @@ export class GeoImageCreator {
                 doubleToTwoFloats2(c.lat, tempArr);
                 gridHigh[i * 2 + 1] = tempArr[0];
                 gridLow[i * 2 + 1] = tempArr[1];
-
-                //grid[i] = c.lon;
-                //grid[i + 1] = c.lat;
             }
         }
 
         return [
-            this._planet.renderer.handler.createArrayBuffer(gridHigh, 2, halfSize),
-            this._planet.renderer.handler.createArrayBuffer(gridLow, 2, halfSize)
+            this._planet.renderer!.handler.createArrayBuffer(gridHigh, 2, halfSize),
+            this._planet.renderer!.handler.createArrayBuffer(gridLow, 2, halfSize)
         ];
     }
 
-    frame() {
-        var i = this.MAX_FRAMES;
+    public frame() {
+        let i = this.MAX_FRAMES;
         while (i-- && this._queue.length) {
-            var q = this._queue.shift();
+            const q = this._queue.shift()!;
             q._isRendering = false;
             q.rendering();
             q.events.dispatch(q.events.loadend);
@@ -110,7 +126,7 @@ export class GeoImageCreator {
         }
     }
 
-    add(geoImage) {
+    public add(geoImage: BaseGeoImage) {
         if (!geoImage._isRendering) {
             geoImage._isRendering = true;
             if (geoImage._animate) {
@@ -121,11 +137,11 @@ export class GeoImageCreator {
         }
     }
 
-    remove(geoImage) {
+    public remove(geoImage: BaseGeoImage) {
         if (geoImage._isRendering) {
             geoImage._creationProceeding = false;
             geoImage._isRendering = false;
-            var arr;
+            let arr: BaseGeoImage[];
             if (geoImage._animate) {
                 arr = this._animate;
             } else {
@@ -140,14 +156,14 @@ export class GeoImageCreator {
         }
     }
 
-    _initBuffers() {
+    protected _initBuffers() {
 
-        let h = this._planet.renderer.handler;
+        let h = this._planet.renderer!.handler!;
 
-        this._framebuffer = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
+        this._framebuffer = new Framebuffer(h, {width: 2, height: 2, useDepth: false});
         this._framebuffer.init();
 
-        this._framebufferMercProj = new Framebuffer(h, { width: 2, height: 2, useDepth: false });
+        this._framebufferMercProj = new Framebuffer(h, {width: 2, height: 2, useDepth: false});
         this._framebufferMercProj.init();
 
         let gs = Math.log2(this._gridSize);
@@ -160,9 +176,9 @@ export class GeoImageCreator {
         this._quadVertexBuffer = h.createArrayBuffer(new Float32Array([-1, 1, 1, 1, -1, -1, 1, -1]), 2, 4);
     }
 
-    _initShaders() {
+    protected _initShaders() {
 
-        this._planet.renderer.handler.addProgram(new Program("geoImageTransform", {
+        this._planet.renderer!.handler.addProgram(new Program("geoImageTransform", {
             uniforms: {
                 sourceTexture: "sampler2d",
                 extentParamsHigh: "vec4",

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

@@ -1,70 +1,85 @@
-'use strict';
-
-import { QueueArray } from '../QueueArray.js';
-
-class ImagesCacheManager {
-    constructor() {
-        this.imagesCache = {};
-
-        this._counter = 0;
-        this._pendingsQueue = new QueueArray();
-        this._imageIndexCounter = 0;
-    }
-
-    load(src, success) {
-        if (this.imagesCache[src]) {
-            success(this.imagesCache[src]);
-        } else {
-            var req = { "src": src, "success": success };
-            if (this._counter >= 1) {
-                this._pendingsQueue.unshift(req);
-            } else {
-                this._exec(req);
-            }
-        }
-    }
-
-    _exec(req) {
-        this._counter++;
-        var that = this;
-
-        var img = new Image();
-        img.crossOrigin = '';
-        img.onload = function () {
-            that.imagesCache[req.src] = img;
-            this.__nodeIndex = that._imageIndexCounter++;
-            req.success(this);
-            that._dequeueRequest();
-        };
-
-        img.onerror = function () {
-            that._dequeueRequest();
-        };
-
-        img.src = req.src;
-    }
-
-    _dequeueRequest() {
-        this._counter--;
-        if (this._pendingsQueue.length && this._counter < 1) {
-            while (this._pendingsQueue.length) {
-                var req = this._pendingsQueue.pop();
-                if (req) {
-                    if (this.imagesCache[req.src]) {
-                        if (this._counter <= 0) {
-                            this._counter = 0;
-                        } else {
-                            this._counter--;
-                        }
-                        req.success(this.imagesCache[req.src]);
-                    } else {
-                        this._exec(req);
-                        break;
-                    }
-                }
-            }
-        }
-    }
-}
-
-export { ImagesCacheManager };
+import {QueueArray} from '../QueueArray';
+
+export type HTMLImageElementExt =
+    HTMLImageElement
+    & { __nodeIndex?: number; atlasWidth?: number; atlasHeight?: number };
+export type ImagesCacheManagerCallback = (image: HTMLImageElementExt) => void;
+
+interface IImagesCacheRequest {
+    "src": string;
+    "success": ImagesCacheManagerCallback;
+}
+
+class ImagesCacheManager {
+
+    public imagesCache: Record<string, HTMLImageElementExt>;
+
+    protected _counter: number;
+    protected _pendingsQueue: QueueArray<IImagesCacheRequest>;
+    protected _imageIndexCounter: number;
+
+    constructor() {
+        this.imagesCache = {};
+
+        this._counter = 0;
+        this._pendingsQueue = new QueueArray<IImagesCacheRequest>();
+        this._imageIndexCounter = 0;
+    }
+
+    public load(src: string, success: ImagesCacheManagerCallback) {
+        if (this.imagesCache[src]) {
+            success(this.imagesCache[src]);
+        } else {
+            let req = {"src": src, "success": success};
+            if (this._counter >= 1) {
+                this._pendingsQueue.unshift(req);
+            } else {
+                this._exec(req);
+            }
+        }
+    }
+
+    protected _exec(req: IImagesCacheRequest) {
+        this._counter++;
+        const that = this;
+
+        let img: HTMLImageElementExt = new Image();
+        img.crossOrigin = '';
+        img.onload = function () {
+            that.imagesCache[req.src] = img;
+            img.__nodeIndex = that._imageIndexCounter++;
+            req.success(img);
+            that._dequeueRequest();
+        };
+
+        img.onerror = function () {
+            that._dequeueRequest();
+        };
+
+        img.src = req.src;
+    }
+
+    protected _dequeueRequest() {
+        this._counter--;
+        if (this._pendingsQueue.length && this._counter < 1) {
+            while (this._pendingsQueue.length) {
+                let req = this._pendingsQueue.pop();
+                if (req) {
+                    if (this.imagesCache[req.src]) {
+                        if (this._counter <= 0) {
+                            this._counter = 0;
+                        } else {
+                            this._counter--;
+                        }
+                        req.success(this.imagesCache[req.src]);
+                    } else {
+                        this._exec(req);
+                        break;
+                    }
+                }
+            }
+        }
+    }
+}
+
+export {ImagesCacheManager};