@expofp/renderer 2.3.0 → 2.3.1

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { default as default_2 } from 'stats-gl';
-import { Vector2 } from 'three';
 import { Vector2Like } from 'three';
 import { Vector2Tuple } from 'three';
-import { Vector3 } from 'three';
 import { Vector3Like } from 'three';
 import { Vector3Tuple } from 'three';
 import { WebGLRenderer } from 'three';
@@ -132,20 +130,6 @@ export declare interface ControlsAPI {
     getCameraState: () => CameraState;
 }
 
-/**
- * Converts multiple vector2 representations to a {@link Vector2} instance.
- * @param vector2 Vector2 representation as a tuple/POJO
- * @returns Vector2 instance
- */
-export declare function createVector2(vector2: IVector2): Vector2;
-
-/**
- * Converts multiple vector3 representations to a {@link Vector3} instance.
- * @param vector3 Vector3 representation as a tuple/POJO
- * @returns Vector3 instance
- */
-export declare function createVector3(vector3: IVector3 | IVector2): Vector3;
-
 /**
  * Mapping of engine-wide events to their payloads
  */

package/dist/index.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 var _a;
-import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Frustum, Sphere, Box3, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, Mesh, LessEqualDepth, LinearSRGBColorSpace, Plane, Raycaster, Spherical, PerspectiveCamera, Camera, Scene, MathUtils, Clock, WebGLRenderer } from "three";
+import { DataTexture, FloatType, UnsignedIntType, IntType, RGBAFormat, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Color, Matrix4, Vector3, Frustum, Sphere, Box3, DynamicDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, Mesh, LessEqualDepth, LinearSRGBColorSpace, Plane, Raycaster, Spherical, PerspectiveCamera, Camera, Scene, MathUtils, Clock, WebGLRenderer } from "three";
 import { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import createLog from "debug";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
@@ -540,24 +540,58 @@ class BatchedMesh extends BatchedMesh$1 {
 /** Whether to use WebGL_multi_draw extension or less performant fallback */
 __publicField(BatchedMesh, "useMultiDraw", true);
 const floatsPerMember = 32;
-const tempColor = new Color();
 const defaultStrokeColor = 8421504;
+const defaultOrient = "+x+y";
+const glyphBoundsAttrName = "aTroikaGlyphBounds";
+const glyphIndexAttrName = "aTroikaGlyphIndex";
+const memberIndexAttrName = "aTroikaTextBatchMemberIndex";
+const syncStartEvent = { type: "syncstart" };
+const syncCompleteEvent = { type: "synccomplete" };
+const SYNCABLE_PROPS = [
+  "font",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "lang",
+  "letterSpacing",
+  "lineHeight",
+  "maxWidth",
+  "overflowWrap",
+  "text",
+  "direction",
+  "textAlign",
+  "textIndent",
+  "whiteSpace",
+  "anchorX",
+  "anchorY",
+  "colorRanges",
+  "sdfGlyphSize"
+];
+const tempColor = new Color();
 const tempMat4 = new Matrix4();
 const tempVec3a = new Vector3();
 const tempVec3b = new Vector3();
 const origin = new Vector3();
-const defaultOrient = "+x+y";
+const frustum = new Frustum();
+const sphere = new Sphere();
+const box = new Box3();
 class BatchedText extends BatchedText$1 {
   // eslint-disable-next-line jsdoc/require-jsdoc
   constructor() {
     super();
+    __publicField(this, "_needsRepack", false);
     __publicField(this, "textArray", []);
     __publicField(this, "textureNeedsUpdate", false);
     __publicField(this, "boundsNeedsUpdate", false);
+    __publicField(this, "batchNeedsSync", true);
     this.addEventListener("synccomplete", () => {
       this.boundsNeedsUpdate = true;
     });
   }
+  /** Mark the batch as needing a sync pass. */
+  requestSync() {
+    this.batchNeedsSync = true;
+  }
   /** Number of texts in the batch */
   get size() {
     return this._members.size;
@@ -592,12 +626,16 @@ class BatchedText extends BatchedText$1 {
   }
   addText(text, instanceId) {
     super.addText(text);
+    text._batchParent = this;
     if (instanceId !== void 0) this.textArray[instanceId] = text;
+    this.batchNeedsSync = true;
     this.boundsNeedsUpdate = true;
   }
   removeText(text) {
     super.removeText(text);
+    if (text._batchParent === this) text._batchParent = void 0;
     this.textArray.splice(this.textArray.indexOf(text), 1);
+    this.batchNeedsSync = true;
     this.boundsNeedsUpdate = true;
   }
   dispose() {
@@ -611,19 +649,88 @@ class BatchedText extends BatchedText$1 {
       for (const text of this.textArray) {
         if (!text.visible) continue;
         if (text.matrixAutoUpdate) text.updateMatrix();
-        _box$1.copy(text.geometry.boundingBox).applyMatrix4(text.matrix);
-        bbox.union(_box$1);
+        box.copy(text.geometry.boundingBox).applyMatrix4(text.matrix);
+        bbox.union(box);
       }
       bbox.getBoundingSphere(this.geometry.boundingSphere);
       this.boundsNeedsUpdate = false;
     }
   }
   onBeforeRender(renderer, scene, camera, geometry, material) {
-    this.sync();
+    if (this.batchNeedsSync) this.sync();
     if ("isTroikaTextMaterial" in material && material.isTroikaTextMaterial) {
       this.prepareForRender(material, scene, camera);
     }
   }
+  /**
+   * Sync members and repack the batched geometry if needed.
+   * @param callback Optional callback invoked after sync completes.
+   */
+  sync(callback) {
+    if (!this.batchNeedsSync) return;
+    this.batchNeedsSync = false;
+    let needsRepack = this._needsRepack;
+    this._needsRepack = false;
+    const pendingSyncs = [];
+    this._members.forEach((packingInfo, text) => {
+      const needsMemberSync = text._needsSync;
+      if (packingInfo.dirty || needsMemberSync) {
+        packingInfo.dirty = false;
+        needsRepack = true;
+        if (needsMemberSync) pendingSyncs.push(new Promise((resolve) => text.sync(resolve)));
+      }
+    });
+    if (!needsRepack) return;
+    this.dispatchEvent(syncStartEvent);
+    const repack = () => {
+      this.repackBatchedGeometry();
+      this.dispatchEvent(syncCompleteEvent);
+      if (callback) callback();
+    };
+    if (pendingSyncs.length) {
+      void Promise.all(pendingSyncs).then(repack);
+    } else {
+      repack();
+    }
+  }
+  repackBatchedGeometry() {
+    var _a2, _b, _c;
+    const geometry = this.geometry;
+    const batchedAttributes = geometry.attributes;
+    let memberIndexes = ((_a2 = batchedAttributes[memberIndexAttrName]) == null ? void 0 : _a2.array) ?? new Uint16Array(0);
+    let batchedGlyphIndexes = ((_b = batchedAttributes[glyphIndexAttrName]) == null ? void 0 : _b.array) ?? new Float32Array(0);
+    let batchedGlyphBounds = ((_c = batchedAttributes[glyphBoundsAttrName]) == null ? void 0 : _c.array) ?? new Float32Array(0);
+    let totalGlyphCount = 0;
+    this._members.forEach((_, { textRenderInfo }) => {
+      if (textRenderInfo) {
+        totalGlyphCount += textRenderInfo.glyphAtlasIndices.length;
+        this._textRenderInfo = textRenderInfo;
+      }
+    });
+    if (totalGlyphCount !== memberIndexes.length) {
+      memberIndexes = cloneAndResize(memberIndexes, totalGlyphCount);
+      batchedGlyphIndexes = cloneAndResize(batchedGlyphIndexes, totalGlyphCount);
+      batchedGlyphBounds = cloneAndResize(batchedGlyphBounds, totalGlyphCount * 4);
+    }
+    let memberIndex = 0;
+    let glyphIndex = 0;
+    this._members.forEach((packingInfo, { textRenderInfo }) => {
+      if (textRenderInfo) {
+        const glyphCount = textRenderInfo.glyphAtlasIndices.length;
+        memberIndexes.fill(memberIndex, glyphIndex, glyphIndex + glyphCount);
+        batchedGlyphIndexes.set(textRenderInfo.glyphAtlasIndices, glyphIndex);
+        batchedGlyphBounds.set(textRenderInfo.glyphBounds, glyphIndex * 4);
+        glyphIndex += glyphCount;
+        packingInfo.index = memberIndex++;
+      }
+    });
+    geometry.updateAttributeData(memberIndexAttrName, memberIndexes, 1);
+    geometry.getAttribute(memberIndexAttrName).setUsage(DynamicDrawUsage);
+    geometry.updateAttributeData(glyphIndexAttrName, batchedGlyphIndexes, 1);
+    geometry.updateAttributeData(glyphBoundsAttrName, batchedGlyphBounds, 4);
+    this.boundsNeedsUpdate = true;
+    this.updateBounds();
+  }
   prepareForRender(material, scene, camera) {
     var _a2;
     const isOutline = material.isTextOutlineMaterial;
@@ -643,14 +750,14 @@ class BatchedText extends BatchedText$1 {
     }
     const texData = texture.image.data;
     this.textureNeedsUpdate = false;
-    _matrix$1.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).multiply(scene.matrixWorld);
-    _frustum$1.setFromProjectionMatrix(_matrix$1, camera.coordinateSystem);
+    tempMat4.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).multiply(scene.matrixWorld);
+    frustum.setFromProjectionMatrix(tempMat4, camera.coordinateSystem);
     for (const text of this.textArray) {
       const index = ((_a2 = this._members.get(text)) == null ? void 0 : _a2.index) ?? -1;
       const textRenderInfo = text.textRenderInfo;
       if (index < 0 || !textRenderInfo) continue;
       const startIndex = index * floatsPerMember;
-      const isHidden = !text.visible || !_frustum$1.intersectsSphere(_sphere$1.copy(text.geometry.boundingSphere).applyMatrix4(text.matrix));
+      const isHidden = !text.visible || !frustum.intersectsSphere(sphere.copy(text.geometry.boundingSphere).applyMatrix4(text.matrix));
       if (isHidden) {
         for (let i = 0; i < 16; i++) {
           this.setTexData(startIndex + i, 0, texData);
@@ -709,6 +816,11 @@ class BatchedText extends BatchedText$1 {
   }
 }
 class Text extends Text$1 {
+  constructor() {
+    super(...arguments);
+    /** Parent batch for sync invalidation. */
+    __publicField(this, "_batchParent");
+  }
   _prepareForRender(material) {
     const isOutline = material.isTextOutlineMaterial;
     const uniforms = material.uniforms;
@@ -766,6 +878,7 @@ class Text extends Text$1 {
           blockBounds[3] + pad
         );
       }
+      if (!this._batchParent) this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
     }
     uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
     material.polygonOffset = !!this.depthOffset;
@@ -797,10 +910,29 @@ class Text extends Text$1 {
     }
   }
 }
-const _matrix$1 = new Matrix4();
-const _frustum$1 = new Frustum();
-const _sphere$1 = new Sphere();
-const _box$1 = new Box3();
+SYNCABLE_PROPS.forEach((prop) => {
+  const privateKey = `_private_${prop}`;
+  Object.defineProperty(Text.prototype, prop, {
+    get() {
+      return this[privateKey];
+    },
+    set(value) {
+      var _a2;
+      const target = this;
+      if (value !== target[privateKey]) {
+        target[privateKey] = value;
+        target._needsSync = true;
+        (_a2 = target._batchParent) == null ? void 0 : _a2.requestSync();
+      }
+    }
+  });
+});
+function cloneAndResize(source, newLength) {
+  const constructor = source.constructor;
+  const copy = new constructor(newLength);
+  copy.set(source.subarray(0, newLength));
+  return copy;
+}
 function setDimming(root, dim) {
   root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
 }
@@ -6761,8 +6893,6 @@ export {
   Polygon,
   Rect,
   Renderer,
-  createVector2,
-  createVector3,
   isImageDef,
   isImageLayer,
   isLayerDef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@expofp/renderer",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "type": "module",
   "files": [
     "dist"