@expofp/renderer 2.2.0 → 2.3.0

package/dist/index.d.ts

@@ -691,6 +691,16 @@ export declare interface ViewportAPI {
      * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
      */
     setDynamicTransform: (dynamicTransformMatrix: number[]) => void;
+    /**
+     * Set the maximum zoom factor. Default is 35.
+     * @param maxZoom Maximum zoom factor
+     */
+    setMaxZoom: (maxZoom: number) => void;
+    /**
+     * Set the minimum zoom factor. Default is 0.1.
+     * @param minZoom Minimum zoom factor
+     */
+    setMinZoom: (minZoom: number) => void;
 }
 
 /** Options for the {@link ControlsAPI.zoomTo} method. */

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, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Quaternion, BufferGeometry, Mesh, LessEqualDepth, LinearSRGBColorSpace, Plane, Raycaster, Sphere, Box3, 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, 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";
@@ -551,9 +551,12 @@ class BatchedText extends BatchedText$1 {
   // eslint-disable-next-line jsdoc/require-jsdoc
   constructor() {
     super();
-    __publicField(this, "mapInstanceIdToText", /* @__PURE__ */ new Map());
     __publicField(this, "textArray", []);
     __publicField(this, "textureNeedsUpdate", false);
+    __publicField(this, "boundsNeedsUpdate", false);
+    this.addEventListener("synccomplete", () => {
+      this.boundsNeedsUpdate = true;
+    });
   }
   /** Number of texts in the batch */
   get size() {
@@ -569,7 +572,13 @@ class BatchedText extends BatchedText$1 {
    * @returns Text object
    */
   getText(instanceId) {
-    return this.mapInstanceIdToText.get(instanceId);
+    return this.textArray[instanceId];
+  }
+  /**
+   * Mark this BatchedText as needing bounds update. This should be called when changing text transforms.
+   */
+  invalidateBounds() {
+    this.boundsNeedsUpdate = true;
   }
   /**
    * Set the visibility of the {@link Text} object by instance id.
@@ -583,17 +592,39 @@ class BatchedText extends BatchedText$1 {
   }
   addText(text, instanceId) {
     super.addText(text);
-    if (instanceId !== void 0) {
-      this.mapInstanceIdToText.set(instanceId, text);
-    }
-    this.textArray.push(text);
+    if (instanceId !== void 0) this.textArray[instanceId] = text;
+    this.boundsNeedsUpdate = true;
+  }
+  removeText(text) {
+    super.removeText(text);
+    this.textArray.splice(this.textArray.indexOf(text), 1);
+    this.boundsNeedsUpdate = true;
   }
   dispose() {
     super.dispose();
+    this.textArray.length = 0;
     this.dispatchEvent({ type: "dispose" });
   }
-  // TODO: Check performance
-  _prepareForRender(material) {
+  updateBounds() {
+    if (this.boundsNeedsUpdate) {
+      const bbox = this.geometry.boundingBox.makeEmpty();
+      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);
+      }
+      bbox.getBoundingSphere(this.geometry.boundingSphere);
+      this.boundsNeedsUpdate = false;
+    }
+  }
+  onBeforeRender(renderer, scene, camera, geometry, material) {
+    this.sync();
+    if ("isTroikaTextMaterial" in material && material.isTroikaTextMaterial) {
+      this.prepareForRender(material, scene, camera);
+    }
+  }
+  prepareForRender(material, scene, camera) {
     var _a2;
     const isOutline = material.isTextOutlineMaterial;
     material.uniforms.uTroikaIsOutline.value = isOutline;
@@ -612,12 +643,15 @@ 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);
     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;
-      if (!text.visible) {
+      const isHidden = !text.visible || !_frustum$1.intersectsSphere(_sphere$1.copy(text.geometry.boundingSphere).applyMatrix4(text.matrix));
+      if (isHidden) {
         for (let i = 0; i < 16; i++) {
           this.setTexData(startIndex + i, 0, texData);
         }
@@ -732,7 +766,6 @@ class Text extends Text$1 {
           blockBounds[3] + pad
         );
       }
-      this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
     }
     uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
     material.polygonOffset = !!this.depthOffset;
@@ -764,6 +797,10 @@ 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();
 function setDimming(root, dim) {
   root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
 }
@@ -1842,7 +1879,8 @@ class MeshSystem extends RenderableSystem {
   }
   updateShape(shapeDef, mesh, instanceId) {
     const geometryId = mesh.getGeometryIdAt(instanceId);
-    const expectedShapeType = this.mapInstanceIdToShapeType.get(instanceId);
+    const key = `${mesh.uuid}-${instanceId}`;
+    const expectedShapeType = this.mapInstanceIdToShapeType.get(key);
     const shape = shapeDef.shape;
     const isPolygon = shape instanceof Polygon;
     const isRect = shape instanceof Rect;
@@ -1898,16 +1936,19 @@ class MeshSystem extends RenderableSystem {
     batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
     for (const shapeDef of shapes) {
       let instanceId;
+      let type;
       if (shapeDef.shape instanceof Rect && rectGeometryId !== void 0) {
         instanceId = batchedMesh.addInstance(rectGeometryId);
-        this.mapInstanceIdToShapeType.set(instanceId, "rect");
+        type = "rect";
       } else {
         const geometry = shapeDefToGeometry.get(shapeDef);
         const { vertices, indices } = countGeometry(geometry);
         const polygonGeometryId = batchedMesh.addGeometry(this.placeholderPolygonGeometry, vertices, indices);
         instanceId = batchedMesh.addInstance(polygonGeometryId);
-        this.mapInstanceIdToShapeType.set(instanceId, "polygon");
+        type = "polygon";
       }
+      const key = `${batchedMesh.uuid}-${instanceId}`;
+      this.mapInstanceIdToShapeType.set(key, type);
       this.registerDefObject(shapeDef, batchedMesh, instanceId);
     }
     return batchedMesh;
@@ -1997,19 +2038,30 @@ class TextSystem extends RenderableSystem {
     group.add(newBatchedText);
   }
   updateDefImpl(textDef, mesh, instanceIds) {
-    for (const [i, line] of textDef.lines.entries()) {
+    const lines = [];
+    for (let i = 0; i < textDef.lines.length; i++) {
+      const line = textDef.lines[i];
       const text = mesh.getText(instanceIds[i]);
-      if (text) {
-        text.text = line.text;
-        text.color = this.textColor.set(line.color).getHex(LinearSRGBColorSpace);
-        text.font = line.fontUrl;
-        if (line.stroke) {
-          text.outlineColor = line.stroke.color;
-          text.outlineWidth = line.stroke.width / line.fontSize;
-        }
+      if (line.fontSize === 0) {
+        text.visible = false;
+        continue;
+      }
+      text.visible = true;
+      text.text = line.text;
+      text.color = this.textColor.set(line.color).getHex(LinearSRGBColorSpace);
+      text.font = line.fontUrl;
+      if (line.stroke) {
+        text.outlineColor = line.stroke.color;
+        text.outlineWidth = line.fontSize == 0 ? 0 : line.stroke.width / line.fontSize;
       }
+      const fontSize = line.fontSize;
+      const height = line.text.split("\n").length * text.lineHeight * fontSize;
+      lines.push({ text, fontSize, height });
+    }
+    if (lines.length > 0) {
+      if (textDef.alignment.vertical === "bottom") lines.reverse();
+      this.updateScale(textDef, mesh, lines);
     }
-    this.updateScale(textDef);
   }
   buildBatchedText(layer) {
     const textDefs = layer.children;
@@ -2024,6 +2076,7 @@ class TextSystem extends RenderableSystem {
         text.fontSize = 1;
         text.lineHeight = 1.1;
         text.whiteSpace = "nowrap";
+        text.clipRect = [0, 0, 0, 0];
         batchedText.addText(text, instanceId);
         instanceIds.push(instanceId);
         instanceId++;
@@ -2043,9 +2096,8 @@ class TextSystem extends RenderableSystem {
     return batchedText;
   }
   // TODO: Simplify
-  updateScale(textDef) {
+  updateScale(textDef, mesh, lines) {
     const dpr = this.renderer.context.getPixelRatio();
-    const lines = this.getTextLines(textDef);
     this.calculateStartInBoundsPosition(
       textDef,
       lines,
@@ -2053,41 +2105,18 @@ class TextSystem extends RenderableSystem {
       this.alignmentOffset,
       this.localPosition
     );
-    for (const { text, fontSize, height, alignment } of lines) {
-      if (!fontSize || !height) {
-        text.visible = false;
-        continue;
-      }
-      text.visible = true;
-      setAnchorsAndAlignment(text, alignment);
+    for (const { text, fontSize, height } of lines) {
+      setAnchorsAndAlignment(text, textDef.alignment);
       this.worldPosition.copy(this.localPosition).rotateAround({ x: 0, y: 0 }, textDef.bounds.rotation).add(textDef.bounds.center);
       this.textScale.copy(this.initialTextScale).multiplyScalar(fontSize * dpr);
       text.scale.set(this.textScale.x, this.textScale.y, 1);
       text.position.set(this.worldPosition.x, this.worldPosition.y, 0);
       text.rotation.set(0, 0, textDef.bounds.rotation);
-      text.clipRect = this.calculateClipRect(
-        textDef,
-        this.localPosition,
-        this.textScale,
-        this.localToMin,
-        this.localToMax
-      );
+      this.calculateClipRect(text, textDef, this.localPosition, this.textScale, this.localToMin, this.localToMax);
       this.localPosition.y += height * dpr;
+      mesh.invalidateBounds();
     }
   }
-  getTextLines(textDef) {
-    const { object: mesh, instanceIds } = this.getObjectInstanceByDef(textDef);
-    const alignment = textDef.alignment;
-    const lines = instanceIds.map((instanceId, i) => {
-      const text = mesh.getText(instanceId);
-      const line = textDef.lines[i];
-      const fontSize = line.fontSize;
-      const height = fontSize ? text.text.split("\n").length * text.lineHeight * fontSize : 0;
-      return { text, fontSize, height, alignment };
-    });
-    if (alignment.vertical === "bottom") lines.reverse();
-    return lines;
-  }
   calculateStartInBoundsPosition(textDef, lines, alignmentDirection, alignmentOffset, inBoundsPosition) {
     const padding = textDef.padding;
     const alignment = textDef.alignment;
@@ -2102,10 +2131,13 @@ class TextSystem extends RenderableSystem {
     }
     inBoundsPosition.multiply(alignmentDirection);
   }
-  calculateClipRect(textDef, inBoundsPosition, textScale, toMin, toMax) {
+  calculateClipRect(text, textDef, inBoundsPosition, textScale, toMin, toMax) {
     toMin.subVectors(textDef.bounds.min, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
     toMax.subVectors(textDef.bounds.max, textDef.bounds.center).multiply(this.initialTextScale).sub(inBoundsPosition).divide(textScale);
-    return [toMin.x, toMin.y, toMax.x, toMax.y];
+    text.clipRect[0] = toMin.x;
+    text.clipRect[1] = toMin.y;
+    text.clipRect[2] = toMax.x;
+    text.clipRect[3] = toMax.y;
   }
 }
 function getAlignmentDirection(alignment) {
@@ -2143,7 +2175,8 @@ class LayerSystem {
     __publicField(this, "mapLayerDefToParent", /* @__PURE__ */ new Map());
     __publicField(this, "layerDefRenderOrder", []);
     __publicField(this, "pendingDefs", /* @__PURE__ */ new Set());
-    __publicField(this, "useUpdateBuffering", false);
+    __publicField(this, "culledDefs", /* @__PURE__ */ new Set());
+    __publicField(this, "useUpdateBuffering", true);
     this.renderer = renderer;
     this.materialSystem = new MaterialSystem();
     this.meshSystem = new MeshSystem(this.materialSystem, this.renderer);
@@ -2177,30 +2210,57 @@ class LayerSystem {
    */
   updateDefs(defs) {
     for (const def of defs) {
-      if (this.useUpdateBuffering) this.pendingDefs.add(def);
-      else this.updateDef(def);
+      if (this.useUpdateBuffering) {
+        this.pendingDefs.add(def);
+        this.culledDefs.delete(def);
+      } else this.updateDef(def);
     }
   }
   /**
    * Drain the queued updates within a time budget.
    * Returns true if any def was updated during this call.
+   * @param scene {@link Scene} instance to get the world matrix from
+   * @param camera {@link Camera} instance to do frustum culling against
    * @param timeBudgetMs frame time budget to perform updates in milliseconds
    * @returns true if any def was updated during this call
    */
-  processPendingUpdates(timeBudgetMs = 5) {
+  processPendingUpdates(scene, camera, timeBudgetMs = -1) {
     if (!this.useUpdateBuffering) return false;
-    if (this.pendingDefs.size === 0) return false;
+    if (this.pendingDefs.size === 0 && this.culledDefs.size === 0) return false;
     const startTime = performance.now();
-    let processed = 0;
-    while (this.pendingDefs.size && performance.now() - startTime < timeBudgetMs) {
-      const def = this.pendingDefs.values().next().value;
+    _matrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).multiply(scene.matrixWorld);
+    _frustum.setFromProjectionMatrix(_matrix, camera.coordinateSystem);
+    let processedCount = 0;
+    const overBudget = () => timeBudgetMs > 0 && performance.now() - startTime >= timeBudgetMs;
+    for (const def of this.pendingDefs) {
+      if (overBudget()) break;
+      let culled = false;
       this.pendingDefs.delete(def);
+      if (isTextDef(def) || isImageDef(def)) {
+        const bounds = def.bounds;
+        _box.min.set(bounds.min.x, bounds.min.y, 0);
+        _box.max.set(bounds.max.x, bounds.max.y, 0);
+        culled = !_frustum.intersectsBox(_box);
+      }
+      if (culled) this.culledDefs.add(def);
+      else {
+        this.updateDef(def);
+        processedCount++;
+      }
+    }
+    for (const def of this.culledDefs) {
+      if (overBudget()) break;
+      this.culledDefs.delete(def);
       this.updateDef(def);
-      processed++;
+      processedCount++;
     }
     const took = (performance.now() - startTime).toFixed(2);
-    if (processed) logger$5.debug(`processed ${processed} defs in ${took}ms, ${this.pendingDefs.size} remaining`);
-    return processed > 0;
+    if (processedCount > 0) {
+      const culled = this.culledDefs.size;
+      const remaining = this.pendingDefs.size;
+      logger$5.debug(`processed ${processedCount} defs (${culled} culled, ${remaining} remaining) in ${took}ms`);
+    }
+    return processedCount > 0;
   }
   /**
    * Build the scene graph from the given scene definition.
@@ -2333,6 +2393,9 @@ class LayerSystem {
     return fullName;
   }
 }
+const _matrix = new Matrix4();
+const _frustum = new Frustum();
+const _box = new Box3();
 /*!
  * camera-controls
  * https://github.com/yomotsu/camera-controls
@@ -4943,6 +5006,17 @@ class CameraSystem {
     if (zoomFactor <= 0) return this.zoomIdentityDistance;
     return this.zoomIdentityDistance / zoomFactor;
   }
+  /**
+   * Set the zoom factor bounds.
+   * @param minZoom Minimum zoom factor. Default is 0.1.
+   * @param maxZoom Maximum zoom factor. Default is 35.
+   */
+  setZoomBounds(minZoom, maxZoom) {
+    if (!this.zoomBounds) return;
+    if (minZoom) this.zoomBounds[0] = minZoom;
+    if (maxZoom) this.zoomBounds[1] = maxZoom;
+    this.updateCamera();
+  }
   /**
    * Initializes the camera with the given zoom bounds.
    * @param zoomBounds [minZoom, maxZoom]
@@ -5288,7 +5362,7 @@ class ViewportSystem {
    */
   initViewport(sceneDef) {
     if (!this.renderer.isExternalMode) this.sceneSystem.initScene(sceneDef.viewbox);
-    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.x > 1e5 ? 100 : 35]);
+    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.x > 1e4 ? 100 : 35]);
   }
   /** Updates the viewport when the renderer size changes. */
   updateViewport() {
@@ -5393,12 +5467,28 @@ class ViewportSystem {
   zoomFactorToDistance(zoomFactor) {
     return this.cameraSystem.zoomFactorToDistance(zoomFactor);
   }
+  /**
+   * Set the maximum zoom factor. Default is 35.
+   * @param maxZoom Maximum zoom factor
+   */
+  setMaxZoom(maxZoom) {
+    this.cameraSystem.setZoomBounds(void 0, maxZoom);
+  }
+  /**
+   * Set the minimum zoom factor. Default is 0.1.
+   * @param minZoom Minimum zoom factor
+   */
+  setMinZoom(minZoom) {
+    this.cameraSystem.setZoomBounds(minZoom, void 0);
+  }
 }
 function asViewportAPI(viewportSystem) {
   return {
     canvasToSvg: viewportSystem.canvasToSvg.bind(viewportSystem),
     setStaticTransform: viewportSystem.setStaticTransform.bind(viewportSystem),
-    setDynamicTransform: viewportSystem.setDynamicTransform.bind(viewportSystem)
+    setDynamicTransform: viewportSystem.setDynamicTransform.bind(viewportSystem),
+    setMaxZoom: viewportSystem.setMaxZoom.bind(viewportSystem),
+    setMinZoom: viewportSystem.setMinZoom.bind(viewportSystem)
   };
 }
 function eventToCanvas(event) {
@@ -6414,10 +6504,13 @@ class Renderer {
     const api = asViewportAPI(this.viewportSystem);
     const guard = (name) => this.assertInitialized(`viewport.${name}`) && this.assertNotDisposed(`viewport.${name}`);
     const guardExternal = (name) => guard(name) && this.assertExternalMode(`viewport.${name}`);
+    const guardNotExternal = (name) => guard(name) && this.assertNotExternalMode(`viewport.${name}`);
     this.viewportAPI = {
       canvasToSvg: guardFn(guard, api.canvasToSvg, { x: 0, y: 0 }),
       setStaticTransform: guardFn(guardExternal, api.setStaticTransform),
-      setDynamicTransform: guardFn(guardExternal, api.setDynamicTransform)
+      setDynamicTransform: guardFn(guardExternal, api.setDynamicTransform),
+      setMaxZoom: guardFn(guardNotExternal, api.setMaxZoom),
+      setMinZoom: guardFn(guardNotExternal, api.setMinZoom)
     };
     return this.viewportAPI;
   }
@@ -6517,12 +6610,13 @@ class Renderer {
     (_b = (_a2 = this.ui) == null ? void 0 : _a2.stats) == null ? void 0 : _b.begin();
     if (this.isExternalMode) this.renderer.resetState();
     else this.resizeCanvasToDisplaySize();
-    this.viewportSystem.updatePtScale();
-    const hasDefsUpdated = this.layerSystem.processPendingUpdates();
+    const { scene, camera } = this.viewportSystem;
     const hasControlsUpdated = this.interactionsSystem.updateControls(this.clock.getDelta());
+    this.viewportSystem.updatePtScale();
+    const hasDefsUpdated = this.layerSystem.processPendingUpdates(scene, camera, 3);
     const needsRedraw = this.needsRedraw || hasControlsUpdated || hasDefsUpdated || this.isExternalMode || this.ui;
     if (needsRedraw) {
-      this.renderer.render(this.viewportSystem.scene, this.viewportSystem.camera);
+      this.renderer.render(scene, camera);
       this.needsRedraw = false;
     }
     (_d = (_c = this.ui) == null ? void 0 : _c.stats) == null ? void 0 : _d.end();
@@ -6558,7 +6652,8 @@ class Renderer {
   // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
   resizeCanvasToDisplaySize() {
     const dpr = window.devicePixelRatio;
-    const { width, height } = this.canvas.getBoundingClientRect();
+    const width = this.canvas.clientWidth;
+    const height = this.canvas.clientHeight;
     const displayWidth = Math.floor(width * dpr);
     const displayHeight = Math.floor(height * dpr);
     if (this.canvas.width !== displayWidth || this.canvas.height !== displayHeight || this.renderer.getPixelRatio() !== dpr) {

package/package.json

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