@expofp/renderer 2.1.2 → 2.2.1

package/dist/index.js

@@ -2,372 +2,16 @@ 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 { Color, Matrix4, Vector3, DataTexture, RGBAFormat, FloatType, RedFormat, UnsignedIntType, IntType, RGBAIntegerFormat, RGFormat, RGIntegerFormat, RedIntegerFormat, BatchedMesh as BatchedMesh$1, BufferAttribute, StreamDrawUsage, Vector4, AlwaysDepth, DoubleSide, MeshBasicMaterial, Texture, Group, PlaneGeometry, SRGBColorSpace, Vector2, Mesh, LessEqualDepth, Quaternion, BufferGeometry, 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, 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 { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
-import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
 import createLog from "debug";
+import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
 import { LineMaterial, LineSegmentsGeometry } from "three/examples/jsm/Addons.js";
 import { MaxRectsPacker, Rectangle } from "maxrects-packer";
 import { extend, colord } from "colord";
 import namesPlugin from "colord/plugins/names";
 import { RAD2DEG, DEG2RAD as DEG2RAD$1 } from "three/src/math/MathUtils.js";
 import { EventManager, Rotate, Pan } from "mjolnir.js";
-const floatsPerMember = 32;
-const tempColor = new Color();
-const defaultStrokeColor = 8421504;
-const tempMat4 = new Matrix4();
-const tempVec3a = new Vector3();
-const tempVec3b = new Vector3();
-const origin = new Vector3();
-const defaultOrient = "+x+y";
-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);
-  }
-  /** Number of texts in the batch */
-  get size() {
-    return this._members.size;
-  }
-  /** Base material before patching */
-  get baseMaterial() {
-    return this._baseMaterial;
-  }
-  /**
-   * Get the {@link Text} object by instance id
-   * @param instanceId Instance id
-   * @returns Text object
-   */
-  getText(instanceId) {
-    return this.mapInstanceIdToText.get(instanceId);
-  }
-  /**
-   * Set the visibility of the {@link Text} object by instance id.
-   * This is for interface compatibility with {@link BatchedMesh}.
-   * @param instanceId Instance id
-   * @param visible Visibility flag
-   */
-  setVisibleAt(instanceId, visible) {
-    const text = this.getText(instanceId);
-    text.visible = visible;
-  }
-  addText(text, instanceId) {
-    super.addText(text);
-    if (instanceId !== void 0) {
-      this.mapInstanceIdToText.set(instanceId, text);
-    }
-    this.textArray.push(text);
-  }
-  dispose() {
-    super.dispose();
-    this.dispatchEvent({ type: "dispose" });
-  }
-  // TODO: Check performance
-  _prepareForRender(material) {
-    var _a2;
-    const isOutline = material.isTextOutlineMaterial;
-    material.uniforms.uTroikaIsOutline.value = isOutline;
-    let texture = this._dataTextures[isOutline ? "outline" : "main"];
-    const dataLength = Math.pow(2, Math.ceil(Math.log2(this._members.size * floatsPerMember)));
-    if (!texture || dataLength !== texture.image.data.length) {
-      if (texture) texture.dispose();
-      const width = Math.min(dataLength / 4, 1024);
-      texture = this._dataTextures[isOutline ? "outline" : "main"] = new DataTexture(
-        new Float32Array(dataLength),
-        width,
-        dataLength / 4 / width,
-        RGBAFormat,
-        FloatType
-      );
-    }
-    const texData = texture.image.data;
-    this.textureNeedsUpdate = false;
-    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) {
-        for (let i = 0; i < 16; i++) {
-          this.setTexData(startIndex + i, 0, texData);
-        }
-        continue;
-      }
-      const matrix = text.matrix.elements;
-      for (let i = 0; i < 16; i++) {
-        this.setTexData(startIndex + i, matrix[i], texData);
-      }
-      text._prepareForRender(material);
-      const {
-        uTroikaTotalBounds,
-        uTroikaClipRect,
-        uTroikaPositionOffset,
-        uTroikaEdgeOffset,
-        uTroikaBlurRadius,
-        uTroikaStrokeWidth,
-        uTroikaStrokeColor,
-        uTroikaStrokeOpacity,
-        uTroikaFillOpacity,
-        uTroikaCurveRadius
-      } = material.uniforms;
-      for (let i = 0; i < 4; i++) {
-        this.setTexData(startIndex + 16 + i, uTroikaTotalBounds.value.getComponent(i), texData);
-      }
-      for (let i = 0; i < 4; i++) {
-        this.setTexData(startIndex + 20 + i, uTroikaClipRect.value.getComponent(i), texData);
-      }
-      let color = isOutline ? text.outlineColor || 0 : text.color;
-      color ?? (color = this.color);
-      color ?? (color = this.material.color);
-      color ?? (color = 16777215);
-      this.setTexData(startIndex + 24, tempColor.set(color).getHex(), texData);
-      this.setTexData(startIndex + 25, uTroikaFillOpacity.value, texData);
-      this.setTexData(startIndex + 26, uTroikaCurveRadius.value, texData);
-      if (isOutline) {
-        this.setTexData(startIndex + 28, uTroikaPositionOffset.value.x, texData);
-        this.setTexData(startIndex + 29, uTroikaPositionOffset.value.y, texData);
-        this.setTexData(startIndex + 30, uTroikaEdgeOffset.value, texData);
-        this.setTexData(startIndex + 31, uTroikaBlurRadius.value, texData);
-      } else {
-        this.setTexData(startIndex + 28, uTroikaStrokeWidth.value, texData);
-        this.setTexData(startIndex + 29, tempColor.set(uTroikaStrokeColor.value).getHex(), texData);
-        this.setTexData(startIndex + 30, uTroikaStrokeOpacity.value, texData);
-      }
-    }
-    texture.needsUpdate = this.textureNeedsUpdate;
-    material.setMatrixTexture(texture);
-  }
-  setTexData(index, value, texData) {
-    if (value !== texData[index]) {
-      texData[index] = value;
-      this.textureNeedsUpdate = true;
-    }
-  }
-}
-class Text extends Text$1 {
-  _prepareForRender(material) {
-    const isOutline = material.isTextOutlineMaterial;
-    const uniforms = material.uniforms;
-    const textInfo = this.textRenderInfo;
-    if (textInfo) {
-      const { sdfTexture, blockBounds } = textInfo;
-      const { width, height } = sdfTexture.image;
-      uniforms.uTroikaSDFTexture.value = sdfTexture;
-      uniforms.uTroikaSDFTextureSize.value.set(width, height);
-      uniforms.uTroikaSDFGlyphSize.value = textInfo.sdfGlyphSize;
-      uniforms.uTroikaSDFExponent.value = textInfo.sdfExponent;
-      uniforms.uTroikaTotalBounds.value.fromArray(blockBounds);
-      uniforms.uTroikaUseGlyphColors.value = !isOutline && !!textInfo.glyphColors;
-      let distanceOffset = 0;
-      let blurRadius = 0;
-      let strokeWidth = 0;
-      let fillOpacity;
-      let strokeOpacity = 1;
-      let strokeColor;
-      let offsetX = 0;
-      let offsetY = 0;
-      if (isOutline) {
-        const { outlineWidth, outlineOffsetX, outlineOffsetY, outlineBlur, outlineOpacity } = this;
-        distanceOffset = this._parsePercent(outlineWidth) || 0;
-        blurRadius = Math.max(0, this._parsePercent(outlineBlur) || 0);
-        fillOpacity = outlineOpacity;
-        offsetX = this._parsePercent(outlineOffsetX) || 0;
-        offsetY = this._parsePercent(outlineOffsetY) || 0;
-      } else {
-        strokeWidth = Math.max(0, this._parsePercent(this.strokeWidth) || 0);
-        if (strokeWidth) {
-          strokeColor = this.strokeColor;
-          uniforms.uTroikaStrokeColor.value.set(strokeColor ?? defaultStrokeColor);
-          strokeOpacity = this.strokeOpacity;
-          strokeOpacity ?? (strokeOpacity = 1);
-        }
-        fillOpacity = this.fillOpacity;
-      }
-      uniforms.uTroikaEdgeOffset.value = distanceOffset;
-      uniforms.uTroikaPositionOffset.value.set(offsetX, offsetY);
-      uniforms.uTroikaBlurRadius.value = blurRadius;
-      uniforms.uTroikaStrokeWidth.value = strokeWidth;
-      uniforms.uTroikaStrokeOpacity.value = strokeOpacity;
-      uniforms.uTroikaFillOpacity.value = fillOpacity ?? 1;
-      uniforms.uTroikaCurveRadius.value = this.curveRadius || 0;
-      const clipRect = this.clipRect;
-      if (clipRect && Array.isArray(clipRect) && clipRect.length === 4) {
-        uniforms.uTroikaClipRect.value.fromArray(clipRect);
-      } else {
-        const pad = (this.fontSize || 0.1) * 100;
-        uniforms.uTroikaClipRect.value.set(
-          blockBounds[0] - pad,
-          blockBounds[1] - pad,
-          blockBounds[2] + pad,
-          blockBounds[3] + pad
-        );
-      }
-      this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
-    }
-    uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
-    material.polygonOffset = !!this.depthOffset;
-    material.polygonOffsetFactor = material.polygonOffsetUnits = this.depthOffset || 0;
-    const color = isOutline ? this.outlineColor || 0 : this.color;
-    if (color == null) {
-      delete material.color;
-    } else {
-      const colorObj = material.hasOwnProperty("color") ? material.color : material.color = new Color();
-      if (color !== colorObj._input || typeof color === "object") {
-        colorObj.set(colorObj._input = color);
-      }
-    }
-    let orient = this.orientation || defaultOrient;
-    if (orient !== material._orientation) {
-      const rotMat = uniforms.uTroikaOrient.value;
-      orient = orient.replace(/[^-+xyz]/g, "");
-      const match = orient !== defaultOrient && /^([-+])([xyz])([-+])([xyz])$/.exec(orient);
-      if (match) {
-        const [, hSign, hAxis, vSign, vAxis] = match;
-        tempVec3a.set(0, 0, 0)[hAxis] = hSign === "-" ? 1 : -1;
-        tempVec3b.set(0, 0, 0)[vAxis] = vSign === "-" ? -1 : 1;
-        tempMat4.lookAt(origin, tempVec3a.cross(tempVec3b), tempVec3b);
-        rotMat.setFromMatrix4(tempMat4);
-      } else {
-        rotMat.identity();
-      }
-      material._orientation = orient;
-    }
-  }
-}
-function setDimming(root, dim) {
-  root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
-}
-function toggleInstanceDim(object, instanceId, dim) {
-  const value = dim === void 0 ? 0 : (+dim - 0.5) * 2;
-  if (object instanceof BatchedMesh) {
-    object.setUniformAt(instanceId, "skipDimInstance", value);
-    return;
-  }
-  const skipDimTexture = object.userData["skipDimTexture"];
-  if (skipDimTexture) {
-    const skipDimData = skipDimTexture.image.data;
-    skipDimData[instanceId] = value;
-    skipDimTexture.needsUpdate = true;
-  }
-}
-function addDimToMaterial(material) {
-  if (material.userData.hasDimShader) return;
-  const onBeforeCompile = material.onBeforeCompile.bind(material);
-  const onBeforeRender = material.onBeforeRender.bind(material);
-  material.onBeforeCompile = (shader, renderer) => {
-    onBeforeCompile(shader, renderer);
-    shader.uniforms["uDim"] = { value: material.userData.uDim ?? 0 };
-    shader.uniforms["skipDimTexture"] = { value: material.userData.skipDimTexture ?? null };
-    shader.vertexShader = shader.vertexShader.replace("void main() {", `${dimColorVertexDefs}
-void main() {`).replace(
-      "#include <fog_vertex>",
-      /*glsl*/
-      `
-            #include <fog_vertex>
-            setDimAmount();
-          `
-    ).concat(dimColorVertexImpl);
-    shader.fragmentShader = /*glsl*/
-    `        
-        ${dimColorFrag}
-        ${shader.fragmentShader}
-      `.replace(
-      "#include <colorspace_fragment>",
-      /*glsl*/
-      `
-          gl_FragColor = dimColor(gl_FragColor);          
-          #include <colorspace_fragment>
-        `
-    );
-    material.userData.shader = shader;
-  };
-  material.onBeforeRender = (renderer, scene, camera, geometry, object, group) => {
-    onBeforeRender(renderer, scene, camera, geometry, object, group);
-    const skipDimTexture = object.userData["skipDimTexture"];
-    let uDim = object.userData["uDim"];
-    if (uDim === void 0) {
-      for (const ancestor of traverseAncestorsGenerator(object)) {
-        if (ancestor.userData["uDim"] !== void 0) {
-          uDim = ancestor.userData["uDim"];
-          break;
-        }
-      }
-    }
-    const shader = material.userData.shader;
-    if (!shader) {
-      material.userData.uDim = uDim;
-      material.userData.skipDimTexture = object.userData["skipDimTexture"];
-      return;
-    }
-    shader.uniforms["uDim"].value = uDim ?? 0;
-    shader.uniforms["skipDimTexture"].value = skipDimTexture ?? null;
-  };
-  material.userData.hasDimShader = true;
-}
-function addDim(mesh) {
-  if (mesh instanceof BatchedMesh) mesh.addPerInstanceUniforms({ vertex: { skipDimInstance: "float" } });
-  if (mesh instanceof BatchedText) addSkipDimTexture(mesh);
-}
-function addSkipDimTexture(text) {
-  const count = text.size;
-  const size = Math.ceil(Math.sqrt(count));
-  const array = new Float32Array(size * size);
-  array.fill(0);
-  const texture = new DataTexture(array, size, size, RedFormat, FloatType);
-  texture.needsUpdate = true;
-  text.userData["skipDimTexture"] = texture;
-  text.addEventListener("dispose", () => texture.dispose());
-  return texture;
-}
-const dimColorVertexDefs = (
-  /*glsl*/
-  `
-  uniform float uDim;
-  out float dimAmount;
-#ifdef TROIKA_DERIVED_MATERIAL_1
-  uniform sampler2D skipDimTexture;
-#endif
-  void setDimAmount();
-`
-);
-const dimColorVertexImpl = (
-  /*glsl*/
-  `
-  void setDimAmount() {
-    float instanceDim = 0.;
-#ifdef USE_BATCH_UNIFORMS
-    instanceDim = batch_skipDimInstance;
-#endif
-#ifdef TROIKA_DERIVED_MATERIAL_1
-    float indirectIndex = aTroikaTextBatchMemberIndex;
-    int size = textureSize(skipDimTexture, 0).x;
-		int i = int(indirectIndex);
-		int x = i % size;
-		int y = i / size;
-    instanceDim = texelFetch(skipDimTexture, ivec2(x, y), 0).r;
-#endif
-    dimAmount = instanceDim == 0. ? uDim : instanceDim / 2. + 0.5;
-  }
-`
-);
-const dimColorFrag = (
-  /*glsl*/
-  `
-  in float dimAmount;
-
-  const vec3 grayWeights = vec3(0.299, 0.587, 0.114);
-  const float darkenFactor = pow(2., 2.2); // Gamma corrected
-  
-  vec4 dimColor(vec4 col) {            
-    vec3 color = col.rgb / col.a;
-    vec3 gray = vec3(dot(grayWeights, color));    
-    vec3 m = mix(color, gray / darkenFactor, dimAmount);    
-    return vec4(m * col.a, col.a);
-  }`
-);
 function createLogger(namespace) {
   const fullNamespace = namespace ? `renderer:${namespace}` : "renderer";
   const info = createLog(fullNamespace);
@@ -653,7 +297,7 @@ class SquareDataTexture extends DataTexture {
 const componentsArray = ["r", "g", "b", "a"];
 const batchIdName = "batchId";
 const logger$a = createLogger("BatchedMesh");
-const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
+class BatchedMesh extends BatchedMesh$1 {
   /**
    * @param instanceCount the max number of individual geometries planned to be added.
    * @param vertexCount the max number of vertices to be used by all geometries.
@@ -671,13 +315,7 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
     __publicField(this, "geometryById", /* @__PURE__ */ new Map());
     __publicField(this, "mapGeometryToInstanceId", /* @__PURE__ */ new Map());
     material.forceSinglePass = true;
-    addDim(this);
-    this.addEventListener("added", () => {
-      if (!_BatchedMesh.useMultiDraw && this.geometry.index !== null) {
-        this.geometry = this.geometry.toNonIndexed();
-        this.resizeToFitGeometry(this.geometry);
-      }
-    });
+    addDim(this);
   }
   /**
    * Appends uniform definitions to the current schema, and creates a new {@link SquareDataTexture} if needed.
@@ -698,45 +336,18 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
     if (!this.isMaterialPatched) this.patchMaterial(this.material);
   }
   addGeometry(geometry, reservedVertexRange, reservedIndexRange) {
-    if (_BatchedMesh.useMultiDraw) return super.addGeometry(geometry, reservedVertexRange, reservedIndexRange);
-    this.addBatchIdBuffer(geometry, this.instanceCount);
-    const geometryId = super.addGeometry(geometry, reservedVertexRange, reservedIndexRange);
-    this.geometryById.set(geometryId, geometry);
-    return geometryId;
+    return super.addGeometry(geometry, reservedVertexRange, reservedIndexRange);
   }
   addInstance(geometryId) {
-    if (_BatchedMesh.useMultiDraw) return super.addInstance(geometryId);
-    if (this.mapGeometryToInstanceId.has(geometryId)) {
-      const geometry = this.geometryById.get(geometryId);
-      this.resizeToFitGeometry(geometry);
-      geometryId = this.addGeometry(geometry);
-    }
-    const instanceId = super.addInstance(geometryId);
-    this.mapGeometryToInstanceId.set(geometryId, instanceId);
-    return instanceId;
+    return super.addInstance(geometryId);
   }
   onBeforeRender(renderer, scene, camera, geometry, material, group) {
     var _a2;
     (_a2 = this.uniformsTexture) == null ? void 0 : _a2.update();
-    if (_BatchedMesh.useMultiDraw) return super.onBeforeRender(renderer, scene, camera, geometry, material, group);
-    if (!this.indexBuffer) {
-      const vertexCount = geometry.getAttribute("position").count;
-      this.indexBuffer = new BufferAttribute(new Uint32Array(vertexCount), 1).setUsage(StreamDrawUsage);
-    }
-    super.onBeforeRender(renderer, scene, camera, geometry, material, group);
-    this.batchCount = this.updateIndexBuffer(geometry);
-    this._multiDrawCount = 0;
+    return super.onBeforeRender(renderer, scene, camera, geometry, material, group);
   }
   onAfterRender(renderer, scene, camera, geometry) {
-    var _a2;
-    if (_BatchedMesh.useMultiDraw) return;
-    const batchCount = this.batchCount;
-    const gl = renderer.getContext();
-    if (geometry.index == null) return logger$a.debug("No index buffer", (_a2 = this.parent) == null ? void 0 : _a2.name);
-    const type = this.getIndexType(gl, geometry.index);
-    gl.drawElements(gl.TRIANGLES, batchCount, type, 0);
-    renderer.info.update(batchCount, gl.TRIANGLES, 1);
-    geometry.setIndex(null);
+    return;
   }
   /**
    * Retrieves the value of a uniform at the specified instance ID.
@@ -845,19 +456,7 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
         vertex: "",
         fragment: ""
       };
-      const patch = (
-        /*glsl*/
-        `
-          #ifdef gl_DrawID
-            #define _gl_DrawID ${batchIdName}
-          #else
-            #define gl_DrawID ${batchIdName}
-          #endif
-          in int ${batchIdName};          
-        `
-      );
       const main = "void main() {";
-      if (!_BatchedMesh.useMultiDraw) shader.vertexShader = shader.vertexShader.replace(main, `${patch}${main}`);
       if (vertex) shader.vertexShader = shader.vertexShader.replace(main, vertex);
       if (fragment) shader.fragmentShader = shader.fragmentShader.replace(main, fragment);
     };
@@ -881,66 +480,421 @@ const _BatchedMesh = class _BatchedMesh extends BatchedMesh$1 {
       uniforms.push({ name, type, size });
       fetchInFragmentShader = false;
     }
-    for (const name in fragmentSchema) {
-      if (!vertexSchema[name]) {
-        const type = fragmentSchema[name];
-        const size = this.getUniformSize(type);
-        totalSize += size;
-        uniforms.push({ name, type, size });
+    for (const name in fragmentSchema) {
+      if (!vertexSchema[name]) {
+        const type = fragmentSchema[name];
+        const size = this.getUniformSize(type);
+        totalSize += size;
+        uniforms.push({ name, type, size });
+      }
+    }
+    uniforms.sort((a, b) => b.size - a.size);
+    const tempOffset = [];
+    for (const { name, size, type } of uniforms) {
+      const offset = this.getUniformOffset(size, tempOffset);
+      uniformMap.set(name, { offset, size, type });
+    }
+    const pixelsPerInstance = Math.ceil(totalSize / 4);
+    const channels = Math.min(totalSize, 4);
+    return { channels, texelsPerInstance: pixelsPerInstance, uniformMap, fetchInFragmentShader };
+  }
+  getUniformOffset(size, tempOffset) {
+    if (size < 4) {
+      for (let i = 0; i < tempOffset.length; i++) {
+        if (tempOffset[i] + size <= 4) {
+          const offset2 = i * 4 + tempOffset[i];
+          tempOffset[i] += size;
+          return offset2;
+        }
+      }
+    }
+    const offset = tempOffset.length * 4;
+    for (; size > 0; size -= 4) {
+      tempOffset.push(size);
+    }
+    return offset;
+  }
+  getUniformSize(type) {
+    switch (type) {
+      case "float":
+        return 1;
+      case "vec2":
+        return 2;
+      case "vec3":
+        return 3;
+      case "vec4":
+        return 4;
+      case "mat3":
+        return 9;
+      case "mat4":
+        return 16;
+    }
+  }
+  getIndexType(gl, index) {
+    const array = index.array;
+    if (array instanceof Uint16Array) return gl.UNSIGNED_SHORT;
+    if (array instanceof Uint32Array) return gl.UNSIGNED_INT;
+    return gl.UNSIGNED_BYTE;
+  }
+}
+/** 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 tempMat4 = new Matrix4();
+const tempVec3a = new Vector3();
+const tempVec3b = new Vector3();
+const origin = new Vector3();
+const defaultOrient = "+x+y";
+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);
+  }
+  /** Number of texts in the batch */
+  get size() {
+    return this._members.size;
+  }
+  /** Base material before patching */
+  get baseMaterial() {
+    return this._baseMaterial;
+  }
+  /**
+   * Get the {@link Text} object by instance id
+   * @param instanceId Instance id
+   * @returns Text object
+   */
+  getText(instanceId) {
+    return this.mapInstanceIdToText.get(instanceId);
+  }
+  /**
+   * Set the visibility of the {@link Text} object by instance id.
+   * This is for interface compatibility with {@link BatchedMesh}.
+   * @param instanceId Instance id
+   * @param visible Visibility flag
+   */
+  setVisibleAt(instanceId, visible) {
+    const text = this.getText(instanceId);
+    text.visible = visible;
+  }
+  addText(text, instanceId) {
+    super.addText(text);
+    if (instanceId !== void 0) {
+      this.mapInstanceIdToText.set(instanceId, text);
+    }
+    this.textArray.push(text);
+  }
+  dispose() {
+    super.dispose();
+    this.dispatchEvent({ type: "dispose" });
+  }
+  // TODO: Check performance
+  _prepareForRender(material) {
+    var _a2;
+    const isOutline = material.isTextOutlineMaterial;
+    material.uniforms.uTroikaIsOutline.value = isOutline;
+    let texture = this._dataTextures[isOutline ? "outline" : "main"];
+    const dataLength = Math.pow(2, Math.ceil(Math.log2(this._members.size * floatsPerMember)));
+    if (!texture || dataLength !== texture.image.data.length) {
+      if (texture) texture.dispose();
+      const width = Math.min(dataLength / 4, 1024);
+      texture = this._dataTextures[isOutline ? "outline" : "main"] = new DataTexture(
+        new Float32Array(dataLength),
+        width,
+        dataLength / 4 / width,
+        RGBAFormat,
+        FloatType
+      );
+    }
+    const texData = texture.image.data;
+    this.textureNeedsUpdate = false;
+    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) {
+        for (let i = 0; i < 16; i++) {
+          this.setTexData(startIndex + i, 0, texData);
+        }
+        continue;
+      }
+      const matrix = text.matrix.elements;
+      for (let i = 0; i < 16; i++) {
+        this.setTexData(startIndex + i, matrix[i], texData);
+      }
+      text._prepareForRender(material);
+      const {
+        uTroikaTotalBounds,
+        uTroikaClipRect,
+        uTroikaPositionOffset,
+        uTroikaEdgeOffset,
+        uTroikaBlurRadius,
+        uTroikaStrokeWidth,
+        uTroikaStrokeColor,
+        uTroikaStrokeOpacity,
+        uTroikaFillOpacity,
+        uTroikaCurveRadius
+      } = material.uniforms;
+      for (let i = 0; i < 4; i++) {
+        this.setTexData(startIndex + 16 + i, uTroikaTotalBounds.value.getComponent(i), texData);
+      }
+      for (let i = 0; i < 4; i++) {
+        this.setTexData(startIndex + 20 + i, uTroikaClipRect.value.getComponent(i), texData);
+      }
+      let color = isOutline ? text.outlineColor || 0 : text.color;
+      color ?? (color = this.color);
+      color ?? (color = this.material.color);
+      color ?? (color = 16777215);
+      this.setTexData(startIndex + 24, tempColor.set(color).getHex(), texData);
+      this.setTexData(startIndex + 25, uTroikaFillOpacity.value, texData);
+      this.setTexData(startIndex + 26, uTroikaCurveRadius.value, texData);
+      if (isOutline) {
+        this.setTexData(startIndex + 28, uTroikaPositionOffset.value.x, texData);
+        this.setTexData(startIndex + 29, uTroikaPositionOffset.value.y, texData);
+        this.setTexData(startIndex + 30, uTroikaEdgeOffset.value, texData);
+        this.setTexData(startIndex + 31, uTroikaBlurRadius.value, texData);
+      } else {
+        this.setTexData(startIndex + 28, uTroikaStrokeWidth.value, texData);
+        this.setTexData(startIndex + 29, tempColor.set(uTroikaStrokeColor.value).getHex(), texData);
+        this.setTexData(startIndex + 30, uTroikaStrokeOpacity.value, texData);
+      }
+    }
+    texture.needsUpdate = this.textureNeedsUpdate;
+    material.setMatrixTexture(texture);
+  }
+  setTexData(index, value, texData) {
+    if (value !== texData[index]) {
+      texData[index] = value;
+      this.textureNeedsUpdate = true;
+    }
+  }
+}
+class Text extends Text$1 {
+  _prepareForRender(material) {
+    const isOutline = material.isTextOutlineMaterial;
+    const uniforms = material.uniforms;
+    const textInfo = this.textRenderInfo;
+    if (textInfo) {
+      const { sdfTexture, blockBounds } = textInfo;
+      const { width, height } = sdfTexture.image;
+      uniforms.uTroikaSDFTexture.value = sdfTexture;
+      uniforms.uTroikaSDFTextureSize.value.set(width, height);
+      uniforms.uTroikaSDFGlyphSize.value = textInfo.sdfGlyphSize;
+      uniforms.uTroikaSDFExponent.value = textInfo.sdfExponent;
+      uniforms.uTroikaTotalBounds.value.fromArray(blockBounds);
+      uniforms.uTroikaUseGlyphColors.value = !isOutline && !!textInfo.glyphColors;
+      let distanceOffset = 0;
+      let blurRadius = 0;
+      let strokeWidth = 0;
+      let fillOpacity;
+      let strokeOpacity = 1;
+      let strokeColor;
+      let offsetX = 0;
+      let offsetY = 0;
+      if (isOutline) {
+        const { outlineWidth, outlineOffsetX, outlineOffsetY, outlineBlur, outlineOpacity } = this;
+        distanceOffset = this._parsePercent(outlineWidth) || 0;
+        blurRadius = Math.max(0, this._parsePercent(outlineBlur) || 0);
+        fillOpacity = outlineOpacity;
+        offsetX = this._parsePercent(outlineOffsetX) || 0;
+        offsetY = this._parsePercent(outlineOffsetY) || 0;
+      } else {
+        strokeWidth = Math.max(0, this._parsePercent(this.strokeWidth) || 0);
+        if (strokeWidth) {
+          strokeColor = this.strokeColor;
+          uniforms.uTroikaStrokeColor.value.set(strokeColor ?? defaultStrokeColor);
+          strokeOpacity = this.strokeOpacity;
+          strokeOpacity ?? (strokeOpacity = 1);
+        }
+        fillOpacity = this.fillOpacity;
+      }
+      uniforms.uTroikaEdgeOffset.value = distanceOffset;
+      uniforms.uTroikaPositionOffset.value.set(offsetX, offsetY);
+      uniforms.uTroikaBlurRadius.value = blurRadius;
+      uniforms.uTroikaStrokeWidth.value = strokeWidth;
+      uniforms.uTroikaStrokeOpacity.value = strokeOpacity;
+      uniforms.uTroikaFillOpacity.value = fillOpacity ?? 1;
+      uniforms.uTroikaCurveRadius.value = this.curveRadius || 0;
+      const clipRect = this.clipRect;
+      if (clipRect && Array.isArray(clipRect) && clipRect.length === 4) {
+        uniforms.uTroikaClipRect.value.fromArray(clipRect);
+      } else {
+        const pad = (this.fontSize || 0.1) * 100;
+        uniforms.uTroikaClipRect.value.set(
+          blockBounds[0] - pad,
+          blockBounds[1] - pad,
+          blockBounds[2] + pad,
+          blockBounds[3] + pad
+        );
+      }
+      this.geometry.applyClipRect(uniforms.uTroikaClipRect.value);
+    }
+    uniforms.uTroikaSDFDebug.value = !!this.debugSDF;
+    material.polygonOffset = !!this.depthOffset;
+    material.polygonOffsetFactor = material.polygonOffsetUnits = this.depthOffset || 0;
+    const color = isOutline ? this.outlineColor || 0 : this.color;
+    if (color == null) {
+      delete material.color;
+    } else {
+      const colorObj = material.hasOwnProperty("color") ? material.color : material.color = new Color();
+      if (color !== colorObj._input || typeof color === "object") {
+        colorObj.set(colorObj._input = color);
       }
     }
-    uniforms.sort((a, b) => b.size - a.size);
-    const tempOffset = [];
-    for (const { name, size, type } of uniforms) {
-      const offset = this.getUniformOffset(size, tempOffset);
-      uniformMap.set(name, { offset, size, type });
+    let orient = this.orientation || defaultOrient;
+    if (orient !== material._orientation) {
+      const rotMat = uniforms.uTroikaOrient.value;
+      orient = orient.replace(/[^-+xyz]/g, "");
+      const match = orient !== defaultOrient && /^([-+])([xyz])([-+])([xyz])$/.exec(orient);
+      if (match) {
+        const [, hSign, hAxis, vSign, vAxis] = match;
+        tempVec3a.set(0, 0, 0)[hAxis] = hSign === "-" ? 1 : -1;
+        tempVec3b.set(0, 0, 0)[vAxis] = vSign === "-" ? -1 : 1;
+        tempMat4.lookAt(origin, tempVec3a.cross(tempVec3b), tempVec3b);
+        rotMat.setFromMatrix4(tempMat4);
+      } else {
+        rotMat.identity();
+      }
+      material._orientation = orient;
     }
-    const pixelsPerInstance = Math.ceil(totalSize / 4);
-    const channels = Math.min(totalSize, 4);
-    return { channels, texelsPerInstance: pixelsPerInstance, uniformMap, fetchInFragmentShader };
   }
-  getUniformOffset(size, tempOffset) {
-    if (size < 4) {
-      for (let i = 0; i < tempOffset.length; i++) {
-        if (tempOffset[i] + size <= 4) {
-          const offset2 = i * 4 + tempOffset[i];
-          tempOffset[i] += size;
-          return offset2;
+}
+function setDimming(root, dim) {
+  root.userData["uDim"] = dim === void 0 ? void 0 : +dim;
+}
+function toggleInstanceDim(object, instanceId, dim) {
+  const value = dim === void 0 ? 0 : (+dim - 0.5) * 2;
+  if (object instanceof BatchedMesh) {
+    object.setUniformAt(instanceId, "skipDimInstance", value);
+    return;
+  }
+  const skipDimTexture = object.userData["skipDimTexture"];
+  if (skipDimTexture) {
+    const skipDimData = skipDimTexture.image.data;
+    skipDimData[instanceId] = value;
+    skipDimTexture.needsUpdate = true;
+  }
+}
+function addDimToMaterial(material) {
+  if (material.userData.hasDimShader) return;
+  const onBeforeCompile = material.onBeforeCompile.bind(material);
+  const onBeforeRender = material.onBeforeRender.bind(material);
+  material.onBeforeCompile = (shader, renderer) => {
+    onBeforeCompile(shader, renderer);
+    shader.uniforms["uDim"] = { value: material.userData.uDim ?? 0 };
+    shader.uniforms["skipDimTexture"] = { value: material.userData.skipDimTexture ?? null };
+    shader.vertexShader = shader.vertexShader.replace("void main() {", `${dimColorVertexDefs}
+void main() {`).replace(
+      "#include <fog_vertex>",
+      /*glsl*/
+      `
+            #include <fog_vertex>
+            setDimAmount();
+          `
+    ).concat(dimColorVertexImpl);
+    shader.fragmentShader = /*glsl*/
+    `        
+        ${dimColorFrag}
+        ${shader.fragmentShader}
+      `.replace(
+      "#include <colorspace_fragment>",
+      /*glsl*/
+      `
+          gl_FragColor = dimColor(gl_FragColor);          
+          #include <colorspace_fragment>
+        `
+    );
+    material.userData.shader = shader;
+  };
+  material.onBeforeRender = (renderer, scene, camera, geometry, object, group) => {
+    onBeforeRender(renderer, scene, camera, geometry, object, group);
+    const skipDimTexture = object.userData["skipDimTexture"];
+    let uDim = object.userData["uDim"];
+    if (uDim === void 0) {
+      for (const ancestor of traverseAncestorsGenerator(object)) {
+        if (ancestor.userData["uDim"] !== void 0) {
+          uDim = ancestor.userData["uDim"];
+          break;
         }
       }
     }
-    const offset = tempOffset.length * 4;
-    for (; size > 0; size -= 4) {
-      tempOffset.push(size);
-    }
-    return offset;
-  }
-  getUniformSize(type) {
-    switch (type) {
-      case "float":
-        return 1;
-      case "vec2":
-        return 2;
-      case "vec3":
-        return 3;
-      case "vec4":
-        return 4;
-      case "mat3":
-        return 9;
-      case "mat4":
-        return 16;
+    const shader = material.userData.shader;
+    if (!shader) {
+      material.userData.uDim = uDim;
+      material.userData.skipDimTexture = object.userData["skipDimTexture"];
+      return;
     }
+    shader.uniforms["uDim"].value = uDim ?? 0;
+    shader.uniforms["skipDimTexture"].value = skipDimTexture ?? null;
+  };
+  material.userData.hasDimShader = true;
+}
+function addDim(mesh) {
+  if (mesh instanceof BatchedMesh) mesh.addPerInstanceUniforms({ vertex: { skipDimInstance: "float" } });
+  if (mesh instanceof BatchedText) addSkipDimTexture(mesh);
+}
+function addSkipDimTexture(text) {
+  const count = text.size;
+  const size = Math.ceil(Math.sqrt(count));
+  const array = new Float32Array(size * size);
+  array.fill(0);
+  const texture = new DataTexture(array, size, size, RedFormat, FloatType);
+  texture.needsUpdate = true;
+  text.userData["skipDimTexture"] = texture;
+  text.addEventListener("dispose", () => texture.dispose());
+  return texture;
+}
+const dimColorVertexDefs = (
+  /*glsl*/
+  `
+  uniform float uDim;
+  out float dimAmount;
+#ifdef TROIKA_DERIVED_MATERIAL_1
+  uniform sampler2D skipDimTexture;
+#endif
+  void setDimAmount();
+`
+);
+const dimColorVertexImpl = (
+  /*glsl*/
+  `
+  void setDimAmount() {
+    float instanceDim = 0.;
+#ifdef USE_BATCH_UNIFORMS
+    instanceDim = batch_skipDimInstance;
+#endif
+#ifdef TROIKA_DERIVED_MATERIAL_1
+    float indirectIndex = aTroikaTextBatchMemberIndex;
+    int size = textureSize(skipDimTexture, 0).x;
+		int i = int(indirectIndex);
+		int x = i % size;
+		int y = i / size;
+    instanceDim = texelFetch(skipDimTexture, ivec2(x, y), 0).r;
+#endif
+    dimAmount = instanceDim == 0. ? uDim : instanceDim / 2. + 0.5;
   }
-  getIndexType(gl, index) {
-    const array = index.array;
-    if (array instanceof Uint16Array) return gl.UNSIGNED_SHORT;
-    if (array instanceof Uint32Array) return gl.UNSIGNED_INT;
-    return gl.UNSIGNED_BYTE;
-  }
-};
-/** Whether to use WebGL_multi_draw extension or less performant fallback (Firefox only) */
-__publicField(_BatchedMesh, "useMultiDraw", true);
-let BatchedMesh = _BatchedMesh;
+`
+);
+const dimColorFrag = (
+  /*glsl*/
+  `
+  in float dimAmount;
+
+  const vec3 grayWeights = vec3(0.299, 0.587, 0.114);
+  const float darkenFactor = pow(2., 2.2); // Gamma corrected
+  
+  vec4 dimColor(vec4 col) {            
+    vec3 color = col.rgb / col.a;
+    vec3 gray = vec3(dot(grayWeights, color));    
+    vec3 m = mix(color, gray / darkenFactor, dimAmount);    
+    return vec4(m * col.a, col.a);
+  }`
+);
 const sharedParameters = {
   side: DoubleSide,
   transparent: true,
@@ -1451,14 +1405,15 @@ class ImageSystem extends RenderableSystem {
     logger$9.debug(`New memory usage after resizing: ${newTotal} bytes`);
   }
   updateDefImpl(imageDef, mesh, instanceIds) {
+    const instanceId = instanceIds[0];
     const bounds = imageDef.bounds;
     const origin2 = imageDef.origin ?? [0.5, 0.5];
     this.originTranslationMatrix.makeTranslation(0.5 - origin2[0], 0.5 - origin2[1], 0);
     this.globalTranslationMatrix.makeTranslation(bounds.center.x, bounds.center.y, 0);
-    this.scaleMatrix.makeScale(bounds.size.width, bounds.size.height, 1);
+    this.scaleMatrix.makeScale(bounds.size.x, bounds.size.y, 1);
     this.rotationMatrix.makeRotationZ(bounds.rotation);
     const matrix = this.originTranslationMatrix.premultiply(this.scaleMatrix).premultiply(this.rotationMatrix).premultiply(this.globalTranslationMatrix);
-    mesh.setMatrixAt(instanceIds[0], matrix);
+    mesh.setMatrixAt(instanceId, matrix);
   }
   packImages(images) {
     this.packer.reset();
@@ -1472,8 +1427,8 @@ class ImageSystem extends RenderableSystem {
         const sourceWidth = image.source.width;
         const sourceHeight = image.source.height;
         const sourceArea = sourceWidth * sourceHeight;
-        const boundsWidth = image.bounds.size.width;
-        const boundsHeight = image.bounds.size.height;
+        const boundsWidth = image.bounds.size.x;
+        const boundsHeight = image.bounds.size.y;
         const boundsArea = boundsWidth * boundsHeight;
         const ratio = sourceArea / boundsArea;
         if (ratio > 1e3) {
@@ -1593,13 +1548,10 @@ class LineSystem extends RenderableSystem {
   }
 }
 function createVector2(vector2) {
-  if (vector2 instanceof Vector2) return vector2;
   if (Array.isArray(vector2)) return new Vector2(vector2[0], vector2[1]);
   return new Vector2(vector2.x, vector2.y);
 }
 function createVector3(vector3) {
-  if (vector3 instanceof Vector2) return new Vector3(vector3.x, vector3.y, 0);
-  if (vector3 instanceof Vector3) return vector3;
   if (Array.isArray(vector3)) return new Vector3(vector3[0], vector3[1], vector3[2] ?? 0);
   return new Vector3(vector3.x, vector3.y, "z" in vector3 ? vector3.z : 0);
 }
@@ -1610,28 +1562,53 @@ class Rect {
    * @param rotation Optional rotation of the rectangle. In radians, around center. Positive values rotate clockwise.
    */
   constructor(min, max, rotation) {
-    /** Top left corner of the rectangle. */
-    __publicField(this, "min");
-    /** Bottom right corner of the rectangle. */
-    __publicField(this, "max");
     /** Optional rotation of the rectangle. In radians, around center. Positive values rotate clockwise. */
     __publicField(this, "rotation");
-    __publicField(this, "_center");
-    __publicField(this, "_size");
-    this.min = createVector2(min);
-    this.max = createVector2(max);
+    __publicField(this, "_min");
+    __publicField(this, "_max");
+    __publicField(this, "_center", new Vector2());
+    __publicField(this, "_size", new Vector2());
+    this._min = createVector2(min);
+    this._max = createVector2(max);
     this.rotation = rotation ?? 0;
+    this.updateCenterAndSize();
+  }
+  /** Top left corner of the rectangle. */
+  get min() {
+    return this._min;
+  }
+  /** Set top left corner of the rectangle. */
+  set min(min) {
+    this._min.copy(min);
+    this.updateCenterAndSize();
+  }
+  /** Bottom right corner of the rectangle. */
+  get max() {
+    return this._max;
   }
-  /** Center of the rectangle. Read-only, calculated on demand. */
+  /** Set bottom right corner of the rectangle. */
+  set max(max) {
+    this._max.copy(max);
+    this.updateCenterAndSize();
+  }
+  /** Center of the rectangle. */
   get center() {
-    this._center ?? (this._center = this.min.clone().add(this.max).multiplyScalar(0.5));
     return this._center;
   }
-  /** Size of the rectangle. Read-only, calculated on demand. */
+  /** Set center of the rectangle. */
+  set center(center) {
+    this._center.copy(center);
+    this.updateMinAndMax();
+  }
+  /** Size of the rectangle. */
   get size() {
-    this._size ?? (this._size = this.max.clone().sub(this.min));
     return this._size;
   }
+  /** Set size of the rectangle. */
+  set size(size) {
+    this._size.copy(size);
+    this.updateMinAndMax();
+  }
   /**
    * Creates a rectangle from an SVG rectangle element.
    * @param rect {@link SVGRectElement} or {@link SVGImageElement}
@@ -1646,18 +1623,37 @@ class Rect {
     return new Rect([x, y], [x + width, y + height], rotation);
   }
   /**
-   * Increases the size of the rectangle by the given amount. Padding is added to both sides of the rectangle.
-   * @param x Horizontal padding.
-   * @param y Vertical padding. If omitted, defaults to the same value as `x`.
+   * Moves the rectangle by the given offset.
+   * @param offset Offset to move the rectangle by.
+   * @returns this {@link Rect} instance
+   */
+  translate(offset) {
+    this._center.add(offset);
+    this.updateMinAndMax();
+    return this;
+  }
+  /**
+   * Expands the rectangle by the given amount on all sides.
+   * Use positive values to increase the size of the rectangle, negative values to decrease it.
+   * @param expansion Can be a single number or a 2D vector. If a single number is provided, both horizontal and vertical sizes will be expanded by the same amount.
    * @returns this {@link Rect} instance
    */
-  addPadding(x, y = x) {
-    this.min.add({ x, y });
-    this.max.sub({ x, y });
-    this._center = void 0;
-    this._size = void 0;
+  expand(expansion) {
+    const expansionVector = typeof expansion === "number" ? { x: expansion, y: expansion } : expansion;
+    this._min.sub(expansionVector);
+    this._max.add(expansionVector);
+    this._size.subVectors(this._max, this._min);
     return this;
   }
+  updateCenterAndSize() {
+    this._center.addVectors(this._min, this._max).multiplyScalar(0.5);
+    this._size.subVectors(this._max, this._min);
+  }
+  updateMinAndMax() {
+    const halfSize = tempVector2.copy(this._size).multiplyScalar(0.5);
+    this._min.subVectors(this._center, halfSize);
+    this._max.addVectors(this._center, halfSize);
+  }
 }
 class Polygon {
   /**
@@ -1665,12 +1661,24 @@ class Polygon {
    * @param indices Array of polygon indices. Each index is a triplet of vertex indices forming a triangle.
    */
   constructor(vertices, indices) {
-    /** Array of polygon vertices. */
-    __publicField(this, "vertices");
-    /** Array of polygon indices. Each index is a triplet of vertex indices forming a triangle. */
-    __publicField(this, "indices");
-    this.vertices = vertices.map(createVector3);
-    this.indices = indices;
+    __publicField(this, "_indices");
+    __publicField(this, "_vertices");
+    __publicField(this, "_bbox");
+    this._vertices = vertices.map(createVector3);
+    this._indices = indices;
+    this._bbox = this.computeBoundingRect();
+  }
+  /** Array of polygon vertices. */
+  get vertices() {
+    return this._vertices;
+  }
+  /** Array of polygon indices. Each index is a triplet of vertex indices forming a triangle. */
+  get indices() {
+    return this._indices;
+  }
+  /** Bounding rectangle of the polygon. */
+  get bounds() {
+    return this._bbox;
   }
   /**
    * Converts a {@link Rect} to a {@link Polygon}.
@@ -1699,28 +1707,76 @@ class Polygon {
     let indexOffset = 0;
     const vertices = [];
     const indices = [];
-    for (const polygon of polygons) {
-      vertices.push(...polygon.vertices);
-      indices.push(...polygon.indices.map((index) => index.map((i) => i + indexOffset)));
-      indexOffset += polygon.vertices.length;
+    for (const p of polygons) {
+      vertices.push(...p.vertices);
+      indices.push(...p.indices.map(([i1, i2, i3]) => [i1 + indexOffset, i2 + indexOffset, i3 + indexOffset]));
+      indexOffset += p.vertices.length;
     }
     return new Polygon(vertices, indices);
   }
   /**
-   * Rotates all vertices of the polygon around the given center.
+   * Translates all vertices of the polygon by the given offset.
+   * @param offset Offset to translate the polygon by. Can be a 2D or 3D vector.
+   * @returns this {@link Polygon} instance
+   */
+  translate(offset) {
+    var _a2;
+    const vec3 = { z: 0, ...offset };
+    this._vertices.forEach((vertex) => vertex.add(vec3));
+    (_a2 = this._bbox) == null ? void 0 : _a2.translate(offset);
+    return this;
+  }
+  /**
+   * Rotates all vertices of the polygon around the given center. Only 2D rotation (around Z axis) is supported.
    * @param rotation Rotation angle in radians. Positive values rotate clockwise.
-   * @param center Center of the rotation.
+   * @param center Center of the rotation. If omitted, defaults to the bounding rectangle center.
+   * @returns this {@link Polygon} instance
+   */
+  rotate(rotation, center = this.bounds.center) {
+    this._vertices.forEach((vertex) => {
+      tempVector2.set(vertex.x, vertex.y).rotateAround(center, rotation);
+      vertex.set(tempVector2.x, tempVector2.y, vertex.z);
+    });
+    this._bbox = this.computeBoundingRect();
+    return this;
+  }
+  /**
+   * Scales the polygon around the given origin.
+   * @param scaleFactor Can be a single number or a 2D vector. If a single number is provided, both horizontal and vertical axes will be scaled by the same factor.
+   * @param origin Origin of the scaling. If omitted, defaults to the bounding rectangle center.
    * @returns this {@link Polygon} instance
    */
-  rotate(rotation, center) {
-    const tempVec2 = new Vector2();
-    this.vertices.forEach((vertex) => {
-      tempVec2.set(vertex.x, vertex.y);
-      tempVec2.rotateAround(center, rotation);
-      vertex.set(tempVec2.x, tempVec2.y, vertex.z);
+  scale(scaleFactor, origin2 = this.bounds.center) {
+    const scaleVector = typeof scaleFactor === "number" ? { x: scaleFactor, y: scaleFactor } : scaleFactor;
+    this._vertices.forEach((vertex) => {
+      tempVector2.set(vertex.x, vertex.y).sub(origin2).multiply(scaleVector).add(origin2);
+      vertex.set(tempVector2.x, tempVector2.y, vertex.z);
     });
+    this._bbox = this.computeBoundingRect();
     return this;
   }
+  computeBoundingRect() {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const vertex of this.vertices) {
+      minX = Math.min(minX, vertex.x);
+      minY = Math.min(minY, vertex.y);
+      maxX = Math.max(maxX, vertex.x);
+      maxY = Math.max(maxY, vertex.y);
+    }
+    return new Rect([minX, minY], [maxX, maxY]);
+  }
+}
+const tempVector2 = new Vector2();
+function countGeometry(geometry) {
+  var _a2;
+  if (geometry.index == null) return { vertices: geometry.getAttribute("position").count, indices: 0 };
+  return {
+    vertices: geometry.getAttribute("position").count,
+    indices: ((_a2 = geometry.index) == null ? void 0 : _a2.count) ?? 0
+  };
 }
 const logger$7 = createLogger("mesh");
 extend([namesPlugin]);
@@ -1731,8 +1787,19 @@ class MeshSystem extends RenderableSystem {
    */
   constructor(materialSystem, renderer) {
     super("mesh", renderer, logger$7);
-    __publicField(this, "meshColor", new Color());
+    __publicField(this, "color", new Color());
+    __publicField(this, "position", new Vector3());
+    __publicField(this, "rotation", new Quaternion());
+    __publicField(this, "scale", new Vector3());
+    __publicField(this, "matrix", new Matrix4());
+    __publicField(this, "rectGeometry", new PlaneGeometry(1, 1));
+    __publicField(this, "placeholderPolygonGeometry", new BufferGeometry());
+    __publicField(this, "mapInstanceIdToShapeType", /* @__PURE__ */ new Map());
     this.materialSystem = materialSystem;
+    this.rectGeometry.deleteAttribute("normal");
+    this.rectGeometry.deleteAttribute("uv");
+    this.placeholderPolygonGeometry.setAttribute("position", new BufferAttribute(new Float32Array(), 3));
+    this.placeholderPolygonGeometry.index = new BufferAttribute(new Uint32Array(), 0);
   }
   buildLayer(layer) {
     const shapes = layer.children;
@@ -1769,60 +1836,82 @@ class MeshSystem extends RenderableSystem {
     return group;
   }
   updateDefImpl(shapeDef, mesh, instanceIds) {
+    const instanceId = instanceIds[0];
+    this.updateShape(shapeDef, mesh, instanceId);
+    this.updateColor(shapeDef, mesh, instanceId);
+  }
+  updateShape(shapeDef, mesh, instanceId) {
+    const geometryId = mesh.getGeometryIdAt(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;
+    if (expectedShapeType === "polygon" && !isPolygon || expectedShapeType === "rect" && !isRect) {
+      logger$7.warn("Shape type changing not supported %O", shapeDef);
+      return;
+    }
+    if (isPolygon) {
+      const geometryRange = mesh.getGeometryRangeAt(geometryId);
+      if (!geometryRange || shape.vertices.length != geometryRange.reservedVertexCount || shape.indices.length * 3 != geometryRange.reservedIndexCount) {
+        logger$7.warn("Polygon geometry changing not supported %O", shapeDef);
+        return;
+      }
+      mesh.setGeometryAt(geometryId, this.buildPolygonGeometry(shape));
+    } else if (isRect) {
+      this.position.set(shape.center.x, shape.center.y, 0);
+      this.rotation.setFromAxisAngle(new Vector3(0, 0, 1), shape.rotation ?? 0);
+      this.scale.set(shape.size.x, shape.size.y, 1);
+      this.matrix.compose(this.position, this.rotation, this.scale);
+      mesh.setMatrixAt(instanceId, this.matrix);
+    }
+  }
+  updateColor(shapeDef, mesh, instanceId) {
     const color = this.normalizeColor(shapeDef.color);
     if (!color) {
       logger$7.warn(`Invalid color: ${shapeDef.color} %O`, shapeDef);
       return;
     }
-    for (const instanceId of instanceIds) {
-      mesh.setColorAt(instanceId, this.meshColor.setRGB(color.r / 255, color.g / 255, color.b / 255, SRGBColorSpace));
-    }
+    mesh.setColorAt(instanceId, this.color.setRGB(color.r / 255, color.g / 255, color.b / 255, SRGBColorSpace));
   }
   buildBatchedMesh(shapes, opacity = 1) {
-    var _a2, _b;
     let vertexCount = 0;
     let indexCount = 0;
-    let rectGeometry = void 0;
+    let rectAdded = false;
     const shapeDefToGeometry = /* @__PURE__ */ new Map();
     for (const shapeDef of shapes) {
-      if (shapeDef.shape instanceof Rect && !rectGeometry) {
-        rectGeometry = new PlaneGeometry(1, 1);
-        rectGeometry.deleteAttribute("normal");
-        rectGeometry.deleteAttribute("uv");
-        vertexCount += rectGeometry.getAttribute("position").count;
-        indexCount += ((_a2 = rectGeometry.index) == null ? void 0 : _a2.count) ?? 0;
+      let vertices = 0;
+      let indices = 0;
+      if (shapeDef.shape instanceof Rect && !rectAdded) {
+        rectAdded = true;
+        ({ vertices, indices } = countGeometry(this.rectGeometry));
       } else if (shapeDef.shape instanceof Polygon) {
         const geometry = this.buildPolygonGeometry(shapeDef.shape);
         shapeDefToGeometry.set(shapeDef, geometry);
-        vertexCount += geometry.getAttribute("position").count;
-        indexCount += ((_b = geometry.index) == null ? void 0 : _b.count) ?? 0;
+        ({ vertices, indices } = countGeometry(geometry));
       }
+      vertexCount += vertices;
+      indexCount += indices;
     }
     const material = this.materialSystem.createColorMaterial({ opacity });
     const batchedMesh = new BatchedMesh(shapes.length, vertexCount, indexCount, material);
-    const rectGeometryId = rectGeometry ? batchedMesh.addGeometry(rectGeometry) : void 0;
+    const rectGeometryId = rectAdded ? batchedMesh.addGeometry(this.rectGeometry) : void 0;
     batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
-    const position = new Vector3();
-    const rotation = new Quaternion();
-    const scale = new Vector3();
-    const matrix = new Matrix4();
-    const [rects, polygons] = partition(shapes, (shapeDef) => shapeDef.shape instanceof Rect);
-    const sortedShapes = [...rects, ...polygons];
-    for (const shapeDef of sortedShapes) {
-      let instanceId = void 0;
+    for (const shapeDef of shapes) {
+      let instanceId;
+      let type;
       if (shapeDef.shape instanceof Rect && rectGeometryId !== void 0) {
         instanceId = batchedMesh.addInstance(rectGeometryId);
-        position.set(shapeDef.shape.center.x, shapeDef.shape.center.y, 0);
-        rotation.setFromAxisAngle(new Vector3(0, 0, 1), shapeDef.shape.rotation ?? 0);
-        scale.set(shapeDef.shape.size.x, shapeDef.shape.size.y, 1);
-        matrix.compose(position, rotation, scale);
-        batchedMesh.setMatrixAt(instanceId, matrix);
-      } else if (shapeDef.shape instanceof Polygon) {
+        type = "rect";
+      } else {
         const geometry = shapeDefToGeometry.get(shapeDef);
-        const polygonGeometryId = batchedMesh.addGeometry(geometry);
+        const { vertices, indices } = countGeometry(geometry);
+        const polygonGeometryId = batchedMesh.addGeometry(this.placeholderPolygonGeometry, vertices, indices);
         instanceId = batchedMesh.addInstance(polygonGeometryId);
+        type = "polygon";
       }
-      if (instanceId === void 0) continue;
+      const key = `${batchedMesh.uuid}-${instanceId}`;
+      this.mapInstanceIdToShapeType.set(key, type);
       this.registerDefObject(shapeDef, batchedMesh, instanceId);
     }
     return batchedMesh;
@@ -1834,8 +1923,7 @@ class MeshSystem extends RenderableSystem {
     return color.toRgb();
   }
   buildPolygonGeometry(polygon) {
-    const geometry = new BufferGeometry().setFromPoints(polygon.vertices).setIndex(polygon.indices.flat());
-    return geometry;
+    return new BufferGeometry().setFromPoints(polygon.vertices).setIndex(polygon.indices.flat());
   }
   sortInstances(mesh, list) {
     const shapeDefs = this.getDefsByObject(mesh);
@@ -2005,11 +2093,10 @@ class TextSystem extends RenderableSystem {
     return lines;
   }
   calculateStartInBoundsPosition(textDef, lines, alignmentDirection, alignmentOffset, inBoundsPosition) {
-    const [w, h] = textDef.bounds.size;
     const padding = textDef.padding;
     const alignment = textDef.alignment;
     alignmentDirection.set(...getAlignmentDirection(alignment));
-    inBoundsPosition.set(w / 2, h / 2);
+    inBoundsPosition.copy(textDef.bounds.size).multiplyScalar(0.5);
     if (alignment.vertical === "center") {
       const totalTextHeight = lines.filter((l) => l.height !== void 0).reduce((acc, l) => acc + l.height, 0) * this.renderer.context.getPixelRatio();
       alignmentOffset.set(0, -(textDef.bounds.size.y - totalTextHeight) / 2);
@@ -4788,7 +4875,6 @@ class CameraController extends CameraControls {
     __publicField(this, "touchCancelListener");
     this.dollyToCursor = true;
     this.draggingSmoothTime = 0;
-    void this.rotatePolarTo(0, false);
     this.mouseButtons = {
       left: CameraController.ACTION.NONE,
       middle: CameraController.ACTION.NONE,
@@ -4845,9 +4931,8 @@ class CameraSystem {
     const h = renderer.size[1];
     this.prevViewportHeightPx = h;
     this.camera = new PerspectiveCamera(this.defaultFov);
-    this.camera.up.set(0, 0, -1);
     this.controller = new CameraController(this.camera);
-    this.controller.distance = this.zoomIdentityDistance;
+    void this.controller.rotatePolarTo(0, false);
   }
   /** Current camera zoom factor. */
   get zoomFactor() {
@@ -4869,6 +4954,12 @@ class CameraSystem {
   initCamera(zoomBounds) {
     this.zoomBounds = zoomBounds;
     this.updateCamera();
+    this.camera.up.set(0, -1, 0);
+    this.camera.position.set(0, 0, -this.zoomIdentityDistance);
+    this.camera.lookAt(0, 0, 0);
+    this.camera.updateMatrixWorld();
+    this.camera.up.set(0, 0, -1);
+    this.controller.updateCameraUp();
   }
   /** Updates the camera when the renderer size changes. */
   updateCamera() {
@@ -5070,7 +5161,10 @@ class SceneSystem {
     __publicField(this, "worldMatrix", new Matrix4());
     /** Inverse world matrix - world → model transform */
     __publicField(this, "inverseWorldMatrix", new Matrix4());
+    /** Used as a scratch vector for coordinate space conversions */
     __publicField(this, "tempVector3", new Vector3());
+    /** Used as a scratch vector for matrix calculations */
+    __publicField(this, "tempVector2", new Vector2());
     __publicField(this, "translationMatrix", new Matrix4());
     __publicField(this, "scaleMatrix", new Matrix4());
     __publicField(this, "visibleRectOffsetMatrix", new Matrix4());
@@ -5121,14 +5215,14 @@ class SceneSystem {
   composeMatrices(viewbox) {
     const dpr = this.renderer.context.getPixelRatio();
     const visibleRect = this.renderer.visibleRect;
-    const [viewBoxWidth, viewBoxHeight] = viewbox.size;
-    const [visibleRectWidth, visibleRectHeight] = (visibleRect == null ? void 0 : visibleRect.size.clone().multiplyScalar(dpr)) ?? this.renderer.size;
-    const scaleFactor = Math.min(visibleRectWidth / viewBoxWidth, visibleRectHeight / viewBoxHeight);
-    const [centerX, centerY] = viewbox.center;
+    const visibleRectSize = visibleRect ? this.tempVector2.copy(visibleRect.size).multiplyScalar(dpr) : this.tempVector2.set(...this.renderer.size);
+    visibleRectSize.divide(viewbox.size);
+    const scaleFactor = Math.min(visibleRectSize.width, visibleRectSize.height);
+    const { x: centerX, y: centerY } = viewbox.center;
     this.translationMatrix.makeTranslation(-centerX, -centerY, 0);
     this.scaleMatrix.makeScale(scaleFactor, scaleFactor, 1);
     if (visibleRect) {
-      const visibleRectCenter = visibleRect.center.clone().multiplyScalar(dpr);
+      const visibleRectCenter = this.tempVector2.copy(visibleRect.center).multiplyScalar(dpr);
       const canvasCenter = { x: this.renderer.size[0] / 2, y: this.renderer.size[1] / 2 };
       const offset = visibleRectCenter.sub(canvasCenter);
       this.visibleRectOffsetMatrix.makeTranslation(offset.x, offset.y, 0);
@@ -5198,7 +5292,7 @@ class ViewportSystem {
    */
   initViewport(sceneDef) {
     if (!this.renderer.isExternalMode) this.sceneSystem.initScene(sceneDef.viewbox);
-    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.width > 1e5 ? 100 : 35]);
+    this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.x > 1e5 ? 100 : 35]);
   }
   /** Updates the viewport when the renderer size changes. */
   updateViewport() {
@@ -5355,27 +5449,23 @@ class ControlsSystem {
     const dpr = this.renderer.context.getPixelRatio();
     const visibleRect = this.renderer.visibleRect;
     const bearingAngle = -this.controller.azimuthAngle;
-    const worldMin = this.viewportSystem.modelToWorld(rect.min);
-    const worldMax = this.viewportSystem.modelToWorld(rect.max);
-    const worldRect = new Rect(worldMin, worldMax);
-    const worldPolygon = Polygon.fromRect(worldRect).rotate(bearingAngle, worldRect.center);
-    const xValues = worldPolygon.vertices.map((p) => p.x);
-    const yValues = worldPolygon.vertices.map((p) => p.y);
-    const sourceRect = new Rect(
-      [Math.min(...xValues), Math.min(...yValues)],
-      [Math.max(...xValues), Math.max(...yValues)]
+    const worldRect = new Rect(
+      this.viewportSystem.modelToWorld(rect.min),
+      this.viewportSystem.modelToWorld(rect.max)
     );
+    const sourceRect = Polygon.fromRect(worldRect).rotate(bearingAngle).bounds;
     if (sourceRect.size.x <= 0 || sourceRect.size.y <= 0) {
       logger$1.warn("zoomTo: sourceRect size is 0");
       return;
     }
-    const targetRect = visibleRect ? new Rect(visibleRect.min.clone().multiplyScalar(dpr), visibleRect.max.clone().multiplyScalar(dpr)) : new Rect([0, 0], [...this.renderer.size]);
-    if (paddingPercent) targetRect.addPadding(targetRect.size.x * paddingPercent, targetRect.size.y * paddingPercent);
+    const targetRect = visibleRect ? new Rect([visibleRect.min.x * dpr, visibleRect.min.y * dpr], [visibleRect.max.x * dpr, visibleRect.max.y * dpr]) : new Rect([0, 0], [...this.renderer.size]);
+    if (paddingPercent)
+      targetRect.expand({ x: -targetRect.size.x * paddingPercent, y: -targetRect.size.y * paddingPercent });
     const zoomByWidth = targetRect.size.x / sourceRect.size.x;
     const zoomByHeight = targetRect.size.y / sourceRect.size.y;
     const minZoom = Math.min(zoomByWidth, zoomByHeight);
     const zoom = maxZoom ? Math.min(minZoom, maxZoom) : minZoom;
-    const translate = sourceRect.center;
+    const translate = new Vector2().copy(sourceRect.center);
     if (visibleRect) {
       const offset = new Vector2(...this.renderer.size).multiplyScalar(0.5).sub(targetRect.center).multiplyScalar(1 / (zoom || 1)).rotateAround({ x: 0, y: 0 }, bearingAngle);
       translate.add(offset);
@@ -6280,8 +6370,7 @@ class Renderer {
     this.controlsSystem = new ControlsSystem(this, this.viewportSystem, this.interactionsSystem);
     this.canvas.addEventListener("webglcontextlost", (e) => this.onContextLost(e), false);
     this.canvas.addEventListener("webglcontextrestored", (e) => this.onContextRestored(e), false);
-    this.initContext(this.renderer.getContext());
-    BatchedMesh.useMultiDraw = this.renderer.extensions.has("WEBGL_multi_draw");
+    this.initStatsContext(this.renderer.getContext());
   }
   /**
    * {@link ControlsAPI} instance for controlling the viewport
@@ -6494,7 +6583,11 @@ class Renderer {
         const logMarker = `memoryInfo [${elapsedTime.toFixed(2)}ms since start]`;
         logger.debug(logMarker, memoryInfo);
         this.memoryInfo = memoryInfo;
-        this.ui.memoryInfoPanel.textContent = JSON.stringify(memoryInfo, null, 2);
+        this.ui.memoryInfoPanel.textContent = JSON.stringify(
+          memoryInfo,
+          (_, value) => typeof value === "number" ? value.toLocaleString() : value,
+          2
+        ).replaceAll('"', "");
       }
     }
   }
@@ -6507,7 +6600,7 @@ class Renderer {
     if (stats && "deleteQuery" in context) {
       const gpuQueries = stats.gpuQueries;
       for (const queryInfo of gpuQueries) {
-        this.renderer.getContext().deleteQuery(queryInfo.query);
+        context.deleteQuery(queryInfo.query);
       }
       stats.gpuQueries = [];
       if (stats.gpuPanel) {
@@ -6521,11 +6614,11 @@ class Renderer {
   onContextRestored(event) {
     event.preventDefault();
     logger.debug("webglcontextrestored event", event);
-    this.initContext(this.renderer.getContext());
+    this.initStatsContext(this.renderer.getContext());
     this.needsRedraw = true;
     this.start();
   }
-  initContext(context) {
+  initStatsContext(context) {
     var _a2, _b;
     this.memoryInfoExtension = context.getExtension("GMAN_webgl_memory");
     void ((_b = (_a2 = this.ui) == null ? void 0 : _a2.stats) == null ? void 0 : _b.init(context));