@openglobus/og 0.12.1 → 0.13.0

package/src/og/terrain/MapboxTerrain.js

@@ -44,7 +44,7 @@ class MapboxTerrain extends GlobusTerrain {
     }
 
     isBlur(segment) {
-        if (segment.tileZoom >= 18) {
+        if (segment.tileZoom >= 13) {
             return true;
         }
         return false;

package/src/og/utils/FontAtlas.js

@@ -1,204 +1,213 @@
-/**
- * @module og/utils/FontAtlas
- */
-
-'use strict';
-
-import { Rectangle } from '../Rectangle.js';
-import { TextureAtlas, TextureAtlasNode } from './TextureAtlas.js';
-import { Deferred } from '../Deferred.js';
-import { ARIAL_FONT_B64 } from '../res/images.js';
-
-class FontAtlas {
-    constructor() {
-        this.atlasesArr = [];
-        this.atlasIndexes = {};
-        this.atlasIndexesDeferred = [];
-        this.tokenImageSize = 64;
-        this.samplerArr = [0];
-        this._handler = null;
-    }
-
-    assignHandler(handler) {
-        this._handler = handler;
-    }
-
-    getFontIndex(face) {
-        let fullName = this.getFullIndex(face);
-        if (!this.atlasIndexesDeferred[fullName]) {
-            this.atlasIndexesDeferred[fullName] = new Deferred();
-        }
-        return this.atlasIndexesDeferred[fullName].promise;
-    }
-
-    getFullIndex(face) {
-        return face.trim().toLowerCase();
-    }
-
-    _applyFontDataToAtlas(atlas, data) {
-        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;
-
-        let idToChar = {};
-
-        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;
-
-            atlas.nodes[ti] = new TextureAtlasNode(r, tc);
-            atlas.nodes[ti].metrics = ci;
-
-            atlas.nodes[ti].metrics.nWidth = atlas.nodes[ti].metrics.width / s;
-            atlas.nodes[ti].metrics.nHeight = atlas.nodes[ti].metrics.height / s;
-            atlas.nodes[ti].metrics.nAdvance = atlas.nodes[ti].metrics.xadvance / s;
-            atlas.nodes[ti].metrics.nXOffset = atlas.nodes[ti].metrics.xoffset / s;
-            atlas.nodes[ti].metrics.nYOffset = 1.0 - atlas.nodes[ti].metrics.yoffset / s;
-
-            atlas.nodes[ti].emptySize = 1;
-        }
-
-        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;
-        }
-    }
-
-    initFont(faceName, dataJson, imageBase64) {
-        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();
-        }
-
-        this.samplerArr[this.atlasesArr.length] = index;
-
-        // TODO: FontTextureAtlas();
-        let atlas = new TextureAtlas();
-
-        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);
-
-        let img = new Image();
-        img.onload = () => {
-            this._createTexture(atlas, img);
-            def.resolve(index);
-        };
-        img.src = ARIAL_FONT_B64;
+/**
+ * @module og/utils/FontAtlas
+ */
+
+'use strict';
+
+import { Rectangle } from '../Rectangle.js';
+import { TextureAtlas, TextureAtlasNode } from './TextureAtlas.js';
+import { Deferred } from '../Deferred.js';
+import { ARIAL_FONT_B64 } from '../res/images.js';
+
+//TODO: get the value from shader module
+const MAX_SIZE = 11;
+
+class FontAtlas {
+    constructor() {
+        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;
+    }
+
+    assignHandler(handler) {
+        this._handler = handler;
+    }
+
+    getFontIndex(face) {
+        let fullName = this.getFullIndex(face);
+        if (!this.atlasIndexesDeferred[fullName]) {
+            this.atlasIndexesDeferred[fullName] = new Deferred();
+        }
+        return this.atlasIndexesDeferred[fullName].promise;
+    }
+
+    getFullIndex(face) {
+        return face.trim().toLowerCase();
+    }
+
+    _applyFontDataToAtlas(atlas, data, index = 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 = {};
+
+        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;
+
+            atlas.nodes[ti] = new TextureAtlasNode(r, tc);
+            atlas.nodes[ti].metrics = ci;
+
+            atlas.nodes[ti].metrics.nWidth = atlas.nodes[ti].metrics.width / s;
+            atlas.nodes[ti].metrics.nHeight = atlas.nodes[ti].metrics.height / s;
+            atlas.nodes[ti].metrics.nAdvance = atlas.nodes[ti].metrics.xadvance / s;
+            atlas.nodes[ti].metrics.nXOffset = atlas.nodes[ti].metrics.xoffset / s;
+            atlas.nodes[ti].metrics.nYOffset = 1.0 - atlas.nodes[ti].metrics.yoffset / s;
+
+            atlas.nodes[ti].emptySize = 1;
+        }
+
+        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;
+        }
+    }
+
+    initFont(faceName, dataJson, imageBase64) {
+        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();
+        }
+
+        this.samplerArr[this.atlasesArr.length] = index;
+
+        // TODO: FontTextureAtlas();
+        let atlas = new TextureAtlas();
+
+        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 = ARIAL_FONT_B64;
     }
 
     _createTexture(atlas, img) {
-        atlas.createTexture(img);
-    }
-
-    loadFont(faceName, srcDir, atlasUrl) {
-
-        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();
-        }
-
-        this.samplerArr[this.atlasesArr.length] = index;
-
-        // TODO: FontTextureAtlas();
-        let atlas = new TextureAtlas();
-
-        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 => {
-                if (!response.ok) {
-                    throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
-                }
-                return response.json(response);
-            })
-            .then(data => {
-
-                this._applyFontDataToAtlas(atlas, data);
-
-                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() };
-            });
-    }
-}
-
+        atlas.createTexture(img);
+    }
+
+    loadFont(faceName, srcDir, atlasUrl) {
+
+        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();
+        }
+
+        this.samplerArr[this.atlasesArr.length] = index;
+
+        // TODO: FontTextureAtlas();
+        let atlas = new TextureAtlas();
+
+        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 => {
+                if (!response.ok) {
+                    throw Error(`Unable to load "${srcDir}/${atlasUrl}"`);
+                }
+                return response.json(response);
+            })
+            .then(data => {
+
+                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

@@ -136,8 +136,8 @@ export class GeoImageCreator {
                 extentParams: { type: types.VEC4 }
             },
             attributes: {
-                corners: { type: types.VEC2, enableArray: true },
-                texCoords: { type: types.VEC2, enableArray: true }
+                corners: "vec2",
+                texCoords: "vec2"
             },
             vertexShader: `attribute vec2 corners; 
                       attribute vec2 texCoords; 
@@ -153,12 +153,11 @@ export class GeoImageCreator {
                         varying vec2 v_texCoords;
                         void main () {
                             if(v_texCoords.x <= 0.001 || v_texCoords.x >= 0.999 ||
-                                v_texCoords.y <= 0.001 || v_texCoords.y >= 0.999) {
-                                discard;
+                                v_texCoords.y <= 0.001 || v_texCoords.y >= 0.999) {
+                                discard;
                             }
                             gl_FragColor = texture2D(sourceTexture, v_texCoords);
                         }`
         }));
     }
-
 }

package/src/og/utils/TextureAtlas.js

@@ -12,7 +12,7 @@ import { ImagesCacheManager } from "./ImagesCacheManager.js";
  * @param {number} [height] - Texture atlas height, if it hasn't 1024 default..
  */
 class TextureAtlas {
-    constructor(width, height) {
+    constructor(width = 1024, height = 1024) {
         /**
          * Atlas nodes where input images store. It can be access by image.__nodeIndex.
          * @public
@@ -31,7 +31,7 @@ class TextureAtlas {
          * @public
          * @type {canvas}
          */
-        this.canvas = new ImageCanvas(width || 1024, height || 1024);
+        this.canvas = new ImageCanvas(width, height);
         this.clearCanvas();
 
         this._handler = null;
@@ -220,11 +220,11 @@ class TextureAtlas {
  * @param {Rectangle} rect - Node image rectangle.
  */
 class TextureAtlasNode {
-    constructor(rect, texCoords) {
+    constructor(rect, texCoords = []) {
         this.childNodes = null;
         this.image = null;
         this.rect = rect;
-        this.texCoords = texCoords || [];
+        this.texCoords = texCoords;
         this.atlas = null;
     }