@openglobus/og 0.11.2 → 0.11.7

package/src/og/entity/Label.js

@@ -2,11 +2,12 @@
  * @module og/entity/Label
  */
 
-'use strict';
+"use strict";
 
-import * as utils from '../utils/shared.js';
-import { BaseBillboard } from './BaseBillboard.js';
-import { Vec4 } from '../math/Vec4.js';
+import * as utils from "../utils/shared.js";
+import { BaseBillboard } from "./BaseBillboard.js";
+import { Vec4 } from "../math/Vec4.js";
+import { LOCK_FREE, LOCK_UPDATE } from "./LabelWorker.js";
 
 const ALIGN = {
     RIGHT: 0,
@@ -28,13 +29,13 @@ const STR2ALIGN = {
 /**
  * Billboard text label.
  * @class
- * @extends {og.BaseBillboard}
+ * @extends {BaseBillboard}
  * @param {Object} [options] - Label options:
- * @param {og.Vec3|Array.<number>} [options.position] - Billboard spatial position.
+ * @param {Vec3|Array.<number>} [options.position] - Billboard spatial position.
  * @param {number} [options.rotation] - Screen angle rotaion.
- * @param {og.Vec4|string|Array.<number>} [options.color] - Billboard color.
- * @param {og.Vec3|Array.<number>} [options.alignedAxis] - Billboard aligned vector.
- * @param {og.Vec3|Array.<number>} [options.offset] - Billboard center screen offset.
+ * @param {Vec4|string|Array.<number>} [options.color] - Billboard color.
+ * @param {Vec3|Array.<number>} [options.alignedAxis] - Billboard aligned vector.
+ * @param {Vec3|Array.<number>} [options.offset] - Billboard center screen offset.
  * @param {boolean} [options.visibility] - Visibility.
  * @param {string} [options.text] - Text string.
  * @param {string} [options.face] - HTML5 font face.
@@ -42,8 +43,8 @@ const STR2ALIGN = {
  * @param {string} [options.style] - HTML5 font style. Example 'normal', 'italic'.
  * @param {string} [options.weight] - HTML5 font weight. Example 'normal', 'bold'.
  * @param {number} [options.outline] - Text outline size. 0 - no outline, 1 - maximum outline. Default 0.58.
- * @param {og.Vec4|string|Array.<number>} [options.outlineColor] - Outline color.
- * @param {og.Label.ALIGN} [options.align] - Text horizontal align: "left", "right" and "center".
+ * @param {Vec4|string|Array.<number>} [options.outlineColor] - Outline color.
+ * @param {Label.ALIGN} [options.align] - Text horizontal align: "left", "right" and "center".
  */
 class Label extends BaseBillboard {
     constructor(options) {
@@ -82,16 +83,21 @@ class Label extends BaseBillboard {
         /**
          * Label outline color.
          * @private
-         * @type {og.Vec4}
+         * @type {Vec4}
          */
-        this._outlineColor = utils.createColorRGBA(options.outlineColor, new Vec4(0.0, 0.0, 0.0, 1.0));
+        this._outlineColor = utils.createColorRGBA(
+            options.outlineColor,
+            new Vec4(0.0, 0.0, 0.0, 1.0)
+        );
 
         /**
          * Text horizontal align: "left", "right" and "center".
          * @private
-         * @type {og.Label.ALIGN}
+         * @type {Label.ALIGN}
          */
-        this._align = options.align ? STR2ALIGN[options.align.trim().toLowerCase()] || ALIGN.RIGHT : ALIGN.RIGHT;
+        this._align = options.align
+            ? STR2ALIGN[options.align.trim().toLowerCase()] || ALIGN.RIGHT
+            : ALIGN.RIGHT;
 
         /**
          * Label font atlas index.
@@ -103,7 +109,7 @@ class Label extends BaseBillboard {
         /**
          * Font atlas pointer.
          * @private
-         * @type {og.utils.FontAtlas}
+         * @type {utils.FontAtlas}
          */
         this._fontAtlas = null;
     }
@@ -111,12 +117,14 @@ class Label extends BaseBillboard {
     /**
      * Sets lablel text.
      * @public
-     * @param {string} text - Text string. 
+     * @param {string} text - Text string.
      * It can't be bigger than maximum labelHandler _maxLetters value.
      */
     setText(text) {
         this._text = text.toString();
-        this._handler && this._handler.setText(this._handlerIndex, text, this._fontIndex, this._align);
+        if (this._isReady) {
+            this._handler.setText(this._handlerIndex, text, this._fontIndex, this._align);
+        }
     }
 
     /**
@@ -131,17 +139,21 @@ class Label extends BaseBillboard {
     /**
      * Sets label text align. Could be center, left or right. Left is default.
      * @public
-     * @param {og.Label.ALIGN} align - Text align.
+     * @param {Label.ALIGN} align - Text align.
      */
     setAlign(align) {
         this._align = STR2ALIGN[align.trim().toLowerCase()];
-        this._handler && this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
+        if (this._isReady) {
+            this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
+        }
     }
 
     /**
      * Gets label text current alignment.
      * @public
-     * @returns {og.Label.ALIGN}
+     * @returns {Label.ALIGN}
      */
     getAlign() {
         return this._align;
@@ -172,8 +184,14 @@ class Label extends BaseBillboard {
      * @param {number} size - Label size in pixels.
      */
     setSize(size) {
-        this._size = size;
-        this._handler && this._handler.setSizeArr(this._handlerIndex, size);
+        if (size !== this._size) {
+            this._size = size;
+            if (this._isReady) {
+                this._handler.setSizeArr(this._handlerIndex, size);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
+        }
     }
 
     /**
@@ -192,7 +210,11 @@ class Label extends BaseBillboard {
      */
     setOutline(outline) {
         this._outline = outline;
-        this._handler && this._handler.setOutlineArr(this._handlerIndex, outline);
+        if (this._isReady) {
+            this._handler.setOutlineArr(this._handlerIndex, outline);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
+        }
     }
 
     /**
@@ -210,10 +232,8 @@ class Label extends BaseBillboard {
      * @param {number} a - Label opacity.
      */
     setOpacity(a) {
-        this._color.w = a;
-        this.setColor4v(this._color);
-        this._outlineColor.w = a;
-        this.setOutlineColor4v(this._outlineColor);
+        super.setOpacity(a);
+        this.setOutlineOpacity(a);
     }
 
     /**
@@ -225,24 +245,26 @@ class Label extends BaseBillboard {
      * @param {number} a - Alpha.
      */
     setOutlineColor(r, g, b, a) {
-        this._outlineColor.x = r;
-        this._outlineColor.y = g;
-        this._outlineColor.z = b;
-        this._outlineColor.w = a;
-        this._handler && this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+        if (a !== this._outlineColor.w || r !== this._outlineColor.x || g !== this._outlineColor.y || b !== this._outlineColor.z) {
+            this._outlineColor.x = r;
+            this._outlineColor.y = g;
+            this._outlineColor.z = b;
+            this._outlineColor.w = a;
+            if (this._isReady) {
+                this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
+        }
     }
 
     /**
      * Sets text outline color.
      * @public
-     * @param {og.Vec4} rgba - Color vector.
+     * @param {Vec4} rgba - Color vector.
      */
     setOutlineColor4v(rgba) {
-        this._outlineColor.x = rgba.x;
-        this._outlineColor.y = rgba.y;
-        this._outlineColor.z = rgba.z;
-        this._outlineColor.w = rgba.w;
-        this._handler && this._handler.setOutlineColorArr(this._handlerIndex, rgba);
+        this.setOutlineColor(rgba.x, rgba.y, rgba.z, rgba.w);
     }
 
     /**
@@ -257,7 +279,7 @@ class Label extends BaseBillboard {
     /**
      * Gets outline color vector.
      * @public
-     * @returns {og.Vec4}
+     * @returns {Vec4}
      */
     getOutlineColor() {
         return this._outlineColor;
@@ -269,8 +291,14 @@ class Label extends BaseBillboard {
      * @param {number} opacity - Outline opacity.
      */
     setOutlineOpacity(opacity) {
-        this._outlineColor.w = opacity;
-        this._handler && this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+        if (opacity !== this._outlineColor.w) {
+            this._outlineColor.w = opacity;
+            if (this._isReady) {
+                this._handler.setOutlineColorArr(this._handlerIndex, this._outlineColor);
+            } else if (this._lockId !== LOCK_FREE) {
+                this._lockId = LOCK_UPDATE;
+            }
+        }
     }
 
     /**
@@ -286,29 +314,32 @@ class Label extends BaseBillboard {
      * Updates label parameters.
      * @public
      */
-    update() {
+    async update() {
         if (this._fontAtlas) {
-            this._fontAtlas.getFontIndex(this._face).then((fontIndex) => {
-                this._applyFontIndex(fontIndex);
-            });
+            const fontIndex = await this._fontAtlas.getFontIndex(this._face);
+            this._applyFontIndex(fontIndex);
         }
     }
 
     _applyFontIndex(fontIndex) {
         this._fontIndex = fontIndex;
-        if (this._handler) {
+        if (this._isReady) {
             this._handler.setFontIndexArr(this._handlerIndex, this._fontIndex);
             this._handler.setText(this._handlerIndex, this._text, this._fontIndex, this._align);
+        } else if (this._lockId !== LOCK_FREE) {
+            this._lockId = LOCK_UPDATE;
         }
     }
 
     /**
      * Assigns font atlas and update.
      * @public
-     * @param {og.utils.FontAtlas} fontAtlas - Font atlas.
+     * @param {utils.FontAtlas} fontAtlas - Font atlas.
      */
     assignFontAtlas(fontAtlas) {
-        !this._fontAtlas && (this._fontAtlas = fontAtlas);
+        if (!this._fontAtlas) {
+            this._fontAtlas = fontAtlas;
+        }
         this.update();
     }
 }

package/src/og/entity/LabelHandler.js

@@ -8,6 +8,7 @@ import * as shaders from "../shaders/label.js";
 import { ALIGN } from "./Label.js";
 import { BillboardHandler } from "./BillboardHandler.js";
 import { concatTypedArrays, spliceTypedArray } from "../utils/shared.js";
+import { LOCK_FREE } from "./LabelWorker.js";
 
 const PICKINGCOLOR_BUFFER = 0;
 const POSITION_BUFFER = 1;
@@ -30,6 +31,11 @@ window.dZ = 1.1;
  *
  */
 class LabelHandler extends BillboardHandler {
+    /**
+     *
+     * @param {*} entityCollection
+     * @param {*} maxLetters
+     */
     constructor(entityCollection, maxLetters = 21) {
         super(entityCollection);
 
@@ -71,19 +77,52 @@ class LabelHandler extends BillboardHandler {
     }
 
     add(label) {
-        if (label._handlerIndex === -1) {
+        if (!label._handler) {
             label._handler = this;
-            label._handlerIndex = this._billboards.length;
-            this._billboards.push(label);
-            this._addBillboardToArrays(label);
-            this.refresh();
             this.assignFontAtlas(label);
+            this.refresh();
         }
     }
 
+    _addLabelToArrays(label) {
+        this._renderer.labelWorker.make(this, label);
+    }
+
     assignFontAtlas(label) {
         if (this._entityCollection && this._renderer) {
             label.assignFontAtlas(this._renderer.fontAtlas);
+            this._addLabelToArrays(label);
+        } else {
+            this._billboards.push(label);
+        }
+    }
+
+    workerCallback(data, label) {
+        if (label._lockId !== LOCK_FREE && this.isEqual(label._handler)) {
+            label._isReady = true;
+            label._lockId = LOCK_FREE;
+            label._handlerIndex = this._billboards.length;
+            this._billboards.push(label);
+
+            this._vertexArr = concatTypedArrays(this._vertexArr, data.vertexArr);
+            this._texCoordArr = concatTypedArrays(this._texCoordArr, data.texCoordArr);
+            this._gliphParamArr = concatTypedArrays(this._gliphParamArr, data.gliphParamArr);
+            this._positionHighArr = concatTypedArrays(this._positionHighArr, data.positionHighArr);
+            this._positionLowArr = concatTypedArrays(this._positionLowArr, data.positionLowArr);
+            this._sizeArr = concatTypedArrays(this._sizeArr, data.sizeArr);
+            this._offsetArr = concatTypedArrays(this._offsetArr, data.offsetArr);
+            this._rgbaArr = concatTypedArrays(this._rgbaArr, data.rgbaArr);
+            this._rotationArr = concatTypedArrays(this._rotationArr, data.rotationArr);
+            this._alignedAxisArr = concatTypedArrays(this._alignedAxisArr, data.alignedAxisArr);
+            this._fontIndexArr = concatTypedArrays(this._fontIndexArr, data.fontIndexArr);
+            this._outlineArr = concatTypedArrays(this._outlineArr, data.outlineArr);
+            this._noOutlineArr = concatTypedArrays(this._noOutlineArr, data.noOutlineArr);
+            this._outlineColorArr = concatTypedArrays(this._outlineColorArr, data.outlineColorArr);
+            this._pickingColorArr = concatTypedArrays(this._pickingColorArr, data.pickingColorArr);
+
+            label.update();
+
+            this.refresh();
         }
     }
 
@@ -163,236 +202,6 @@ class LabelHandler extends BillboardHandler {
         }
     }
 
-    _addBillboardToArrays(label) {
-        for (var i = 0; i < this._maxLetters; i++) {
-            if (label._visibility) {
-                this._vertexArr = concatTypedArrays(
-                    this._vertexArr,
-                    [0, 0, 0, -1, 1, -1, 1, -1, 1, 0, 0, 0]
-                );
-            } else {
-                this._vertexArr = concatTypedArrays(
-                    this._vertexArr,
-                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
-                );
-            }
-
-            this._texCoordArr = concatTypedArrays(
-                this._texCoordArr,
-                [0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0, 0, 0, -1, 0]
-            );
-            this._gliphParamArr = concatTypedArrays(
-                this._gliphParamArr,
-                [1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0]
-            );
-
-            var x = label._positionHigh.x,
-                y = label._positionHigh.y,
-                z = label._positionHigh.z,
-                w;
-            this._positionHighArr = concatTypedArrays(this._positionHighArr, [
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z
-            ]);
-
-            x = label._positionLow.x;
-            y = label._positionLow.y;
-            z = label._positionLow.z;
-            this._positionLowArr = concatTypedArrays(this._positionLowArr, [
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z
-            ]);
-
-            x = label._size;
-            this._sizeArr = concatTypedArrays(this._sizeArr, [x, x, x, x, x, x]);
-
-            x = label._offset.x;
-            y = label._offset.y;
-            z = label._offset.z;
-            this._offsetArr = concatTypedArrays(this._offsetArr, [
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z
-            ]);
-
-            x = label._color.x;
-            y = label._color.y;
-            z = label._color.z;
-            w = label._color.w;
-            this._rgbaArr = concatTypedArrays(this._rgbaArr, [
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w
-            ]);
-
-            x = label._rotation;
-            this._rotationArr = concatTypedArrays(this._rotationArr, [x, x, x, x, x, x]);
-
-            x = label._alignedAxis.x;
-            y = label._alignedAxis.y;
-            z = label._alignedAxis.z;
-            this._alignedAxisArr = concatTypedArrays(this._alignedAxisArr, [
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z
-            ]);
-
-            x = label._fontIndex;
-            this._fontIndexArr = concatTypedArrays(this._fontIndexArr, [x, x, x, x, x, x]);
-
-            x = label._outline;
-            this._outlineArr = concatTypedArrays(this._outlineArr, [x, x, x, x, x, x]);
-
-            const weight = 0.001;
-            this._noOutlineArr = concatTypedArrays(this._noOutlineArr, [
-                weight,
-                weight,
-                weight,
-                weight,
-                weight,
-                weight
-            ]);
-
-            x = label._outlineColor.x;
-            y = label._outlineColor.y;
-            z = label._outlineColor.z;
-            w = label._outlineColor.w;
-            this._outlineColorArr = concatTypedArrays(this._outlineColorArr, [
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w,
-                x,
-                y,
-                z,
-                w
-            ]);
-
-            x = label._entity._pickingColor.x / 255;
-            y = label._entity._pickingColor.y / 255;
-            z = label._entity._pickingColor.z / 255;
-            this._pickingColorArr = concatTypedArrays(this._pickingColorArr, [
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z,
-                x,
-                y,
-                z
-            ]);
-        }
-    }
-
     _displayPASS() {
         var r = this._renderer;
         var h = r.handler;
@@ -687,12 +496,6 @@ class LabelHandler extends BillboardHandler {
 
             let m = n.metrics;
 
-            //m.nWidth;
-            //m.nHeight;
-            //m.nAdvance;
-            //m.nXOffset;
-            //m.nYOffset;
-
             a[j] = tc[0];
             a[j + 1] = tc[1];
             a[j + 2] = offset;
@@ -1151,8 +954,6 @@ class LabelHandler extends BillboardHandler {
     }
 
     setFontIndexArr(index, fontIndex) {
-        fontIndex = fontIndex;
-
         var i = index * 6 * this._maxLetters;
         var a = this._fontIndexArr;
 
@@ -1237,4 +1038,4 @@ class LabelHandler extends BillboardHandler {
     }
 }
 
-export { LabelHandler };
+export { LabelHandler };