@expofp/renderer 1.4.2 → 2.0.0

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, DoubleSide, MeshBasicMaterial, Texture, Quaternion, Group, PlaneGeometry, SRGBColorSpace, Vector2, BufferGeometry, LinearSRGBColorSpace, Mesh, Plane, Raycaster, Sphere, Box3, Spherical, PerspectiveCamera, Scene, Camera, MathUtils, Clock, WebGLRenderer } from "three";
+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 { traverseAncestorsGenerator } from "three/examples/jsm/utils/SceneUtils.js";
 import { BatchedText as BatchedText$1, Text as Text$1 } from "troika-three-text";
 import { LineMaterial, LineSegmentsGeometry } from "three/examples/jsm/Addons.js";
@@ -10,351 +10,703 @@ import { MaxRectsPacker, Rectangle } from "maxrects-packer";
 import { converter, parse } from "culori";
 import { RAD2DEG, DEG2RAD as DEG2RAD$1 } from "three/src/math/MathUtils.js";
 import { EventManager, Rotate, Pan } from "mjolnir.js";
-function isObject(item) {
-  return !!item && typeof item === "object" && !Array.isArray(item);
-}
-function deepMerge(target, ...sources) {
-  if (!sources.length) return target;
-  const source = sources.shift();
-  if (source === void 0) {
-    return target;
-  }
-  if (isObject(target) && isObject(source)) {
-    for (const key in source) {
-      if (isObject(source[key])) {
-        if (!target[key]) {
-          Object.assign(target, { [key]: {} });
-        }
-        deepMerge(target[key], source[key]);
-      } else {
-        Object.assign(target, { [key]: source[key] });
-      }
-    }
+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);
   }
-  return deepMerge(target, ...sources);
-}
-function getSquareTextureSize(capacity, pixelsPerInstance) {
-  return Math.max(pixelsPerInstance, Math.ceil(Math.sqrt(capacity / pixelsPerInstance)) * pixelsPerInstance);
-}
-function getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity) {
-  if (channels === 3) {
-    console.warn('"channels" cannot be 3. Set to 4. More info: https://github.com/mrdoob/three.js/pull/23228');
-    channels = 4;
+  /** Number of texts in the batch */
+  get size() {
+    return this._members.size;
   }
-  const size = getSquareTextureSize(capacity, pixelsPerInstance);
-  const array = new arrayType(size * size * channels);
-  const isFloat = arrayType.name.includes("Float");
-  const isUnsignedInt = arrayType.name.includes("Uint");
-  const type = isFloat ? FloatType : isUnsignedInt ? UnsignedIntType : IntType;
-  let format;
-  switch (channels) {
-    case 1:
-      format = isFloat ? RedFormat : RedIntegerFormat;
-      break;
-    case 2:
-      format = isFloat ? RGFormat : RGIntegerFormat;
-      break;
-    case 4:
-      format = isFloat ? RGBAFormat : RGBAIntegerFormat;
-      break;
+  /** Base material before patching */
+  get baseMaterial() {
+    return this._baseMaterial;
   }
-  return { array, size, type, format };
-}
-class SquareDataTexture extends DataTexture {
   /**
-   * @param arrayType The constructor for the TypedArray.
-   * @param channels The number of channels in the texture.
-   * @param pixelsPerInstance The number of pixels required for each instance.
-   * @param capacity The total number of instances.
-   * @param uniformMap Optional map for handling uniform values.
-   * @param fetchInFragmentShader Optional flag that determines if uniform values should be fetched in the fragment shader instead of the vertex shader.
+   * Get the {@link Text} object by instance id
+   * @param instanceId Instance id
+   * @returns Text object
    */
-  constructor(arrayType, channels, pixelsPerInstance, capacity, uniformMap, fetchInFragmentShader) {
-    if (channels === 3) channels = 4;
-    const { array, format, size, type } = getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity);
-    super(array, size, size, format, type);
-    __publicField(this, "data");
-    __publicField(this, "channels");
-    __publicField(this, "pixelsPerInstance");
-    __publicField(this, "stride");
-    __publicField(this, "uniformMap");
-    __publicField(this, "fetchUniformsInFragmentShader");
-    __publicField(this, "uniformPrefix", "batch_");
-    this.data = array;
-    this.channels = channels;
-    this.pixelsPerInstance = pixelsPerInstance;
-    this.stride = pixelsPerInstance * channels;
-    this.uniformMap = uniformMap;
-    this.fetchUniformsInFragmentShader = fetchInFragmentShader;
-    this.needsUpdate = true;
+  getText(instanceId) {
+    return this.mapInstanceIdToText.get(instanceId);
   }
   /**
-   * Sets a uniform value at the specified instance ID in the texture.
-   * @param id The instance ID to set the uniform for.
-   * @param name The name of the uniform.
-   * @param value The value to set for the uniform.
+   * 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
    */
-  setUniformAt(id, name, value) {
-    const schema = this.uniformMap.get(name);
-    if (!schema) {
-      console.warn(`SquareDataTexture.setUniformAt: uniform ${name} not found`);
-      return;
-    }
-    const { offset, size } = schema;
-    const stride = this.stride;
-    if (size === 1) {
-      this.data[id * stride + offset] = value;
-    } else {
-      value.toArray(this.data, id * stride + offset);
-    }
+  setVisibleAt(instanceId, visible) {
+    const text = this.getText(instanceId);
+    text.visible = visible;
   }
-  /**
-   * Retrieves a uniform value at the specified instance ID from the texture.
-   * @param id The instance ID to retrieve the uniform from.
-   * @param name The name of the uniform.
-   * @param target Optional target object to store the uniform value.
-   * @returns The uniform value for the specified instance.
-   */
-  getUniformAt(id, name, target) {
-    const schema = this.uniformMap.get(name);
-    if (!schema) {
-      console.warn(`SquareDataTexture.getUniformAt: uniform ${name} not found`);
-      return 0;
-    }
-    const { offset, size } = schema;
-    const stride = this.stride;
-    if (size === 1) {
-      return this.data[id * stride + offset];
+  addText(text, instanceId) {
+    super.addText(text);
+    if (instanceId !== void 0) {
+      this.mapInstanceIdToText.set(instanceId, text);
     }
-    return target.fromArray(this.data, id * stride + offset);
-  }
-  /** Mark the texture as needing an update. */
-  update() {
-    this.needsUpdate = true;
-  }
-  /**
-   * Generates the GLSL code for accessing the uniform data stored in the texture.
-   * @param textureName The name of the texture in the GLSL shader.
-   * @param indexName The name of the index in the GLSL shader.
-   * @param indexType The type of the index in the GLSL shader.
-   * @returns An object containing the GLSL code for the vertex and fragment shaders.
-   */
-  getUniformsGLSL(textureName, indexName, indexType) {
-    const vertex = this.getUniformsVertexGLSL(textureName, indexName, indexType);
-    const fragment = this.getUniformsFragmentGLSL(textureName, indexName, indexType);
-    return { vertex, fragment };
+    this.textArray.push(text);
   }
-  getUniformsVertexGLSL(textureName, indexName, indexType) {
-    if (this.fetchUniformsInFragmentShader) {
-      return (
-        /*glsl*/
-        `
-        flat varying ${indexType} ${this.uniformPrefix}${indexName};
-        void main() {
-          ${this.uniformPrefix}${indexName} = ${indexName};
-      `
-      );
-    }
-    const texelsFetch = this.texelsFetchGLSL(textureName, indexName);
-    const getFromTexels = this.getFromTexelsGLSL();
-    const { assignVarying, declareVarying } = this.getVarying();
-    return (
-      /*glsl*/
-      `
-      uniform highp sampler2D ${textureName};  
-      ${declareVarying}
-      void main() {
-      #ifdef USE_BATCHING
-        ${indexType} ${indexName} = ${indexType}(getIndirectIndex(gl_DrawID));
-      #endif
-        ${texelsFetch}
-        ${getFromTexels}
-        ${assignVarying}`
-    );
+  dispose() {
+    super.dispose();
+    this.dispatchEvent({ type: "dispose" });
   }
-  getUniformsFragmentGLSL(textureName, indexName, indexType) {
-    if (!this.fetchUniformsInFragmentShader) {
-      const { declareVarying, getVarying } = this.getVarying();
-      return (
-        /*glsl*/
-        `
-        ${declareVarying}
-        void main() {
-          ${getVarying}`
+  // 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 texelsFetch = this.texelsFetchGLSL(textureName, `${this.uniformPrefix}${indexName}`);
-    const getFromTexels = this.getFromTexelsGLSL();
-    return (
-      /*glsl*/
-      `
-      uniform highp sampler2D ${textureName};  
-      flat varying ${indexType} ${this.uniformPrefix}${indexName};
-      void main() {
-        ${texelsFetch}
-        ${getFromTexels}`
-    );
-  }
-  texelsFetchGLSL(textureName, indexName) {
-    const pixelsPerInstance = this.pixelsPerInstance;
-    let texelsFetch = (
-      /*glsl*/
-      `
-      int size = textureSize(${textureName}, 0).x;
-      int j = int(${indexName}) * ${pixelsPerInstance};
-      int x = j % size;
-      int y = j / size;
-    `
-    );
-    for (let i = 0; i < pixelsPerInstance; i++) {
-      texelsFetch += /*glsl*/
-      `vec4 ${this.uniformPrefix}texel${i} = texelFetch(${textureName}, ivec2(x + ${i}, y), 0);
-`;
-    }
-    return texelsFetch;
-  }
-  getFromTexelsGLSL() {
-    const uniforms = this.uniformMap;
-    let getFromTexels = "";
-    for (const [name, { type, offset, size }] of uniforms) {
-      const tId = Math.floor(offset / this.channels);
-      if (type === "mat3") {
-        getFromTexels += /*glsl*/
-        `mat3 ${name} = mat3(${this.uniformPrefix}texel${tId}.rgb, vec3(${this.uniformPrefix}texel${tId}.a, ${this.uniformPrefix}texel${tId + 1}.rg), vec3(${this.uniformPrefix}texel${tId + 1}.ba, ${this.uniformPrefix}texel${tId + 2}.r));
-`;
-      } else if (type === "mat4") {
-        getFromTexels += /*glsl*/
-        `mat4 ${name} = mat4(${this.uniformPrefix}texel${tId}, ${this.uniformPrefix}texel${tId + 1}, ${this.uniformPrefix}texel${tId + 2}, ${this.uniformPrefix}texel${tId + 3});
-`;
+    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 {
-        const components = this.getUniformComponents(offset, size);
-        getFromTexels += /*glsl*/
-        `${type} ${name} = ${this.uniformPrefix}texel${tId}.${components};
-`;
+        this.setTexData(startIndex + 28, uTroikaStrokeWidth.value, texData);
+        this.setTexData(startIndex + 29, tempColor.set(uTroikaStrokeColor.value).getHex(), texData);
+        this.setTexData(startIndex + 30, uTroikaStrokeOpacity.value, texData);
       }
     }
-    return getFromTexels;
-  }
-  getVarying() {
-    const uniforms = this.uniformMap;
-    let declareVarying = "";
-    let assignVarying = "";
-    let getVarying = "";
-    for (const [name, { type }] of uniforms) {
-      declareVarying += /*glsl*/
-      `flat varying ${type} ${this.uniformPrefix}${name};
-`;
-      assignVarying += /*glsl*/
-      `${this.uniformPrefix}${name} = ${name};
-`;
-      getVarying += /*glsl*/
-      `${type} ${name} = ${this.uniformPrefix}${name};
-`;
-    }
-    return { declareVarying, assignVarying, getVarying };
+    texture.needsUpdate = this.textureNeedsUpdate;
+    material.setMatrixTexture(texture);
   }
-  getUniformComponents(offset, size) {
-    const startIndex = offset % this.channels;
-    let components = "";
-    for (let i = 0; i < size; i++) {
-      components += componentsArray[startIndex + i];
+  setTexData(index, value, texData) {
+    if (value !== texData[index]) {
+      texData[index] = value;
+      this.textureNeedsUpdate = true;
     }
-    return components;
   }
 }
-const componentsArray = ["r", "g", "b", "a"];
-const batchIdName = "batchId";
-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.
-   * @param indexCount the max number of indices to be used by all geometries.
-   * @param material an instance of {@link Material}. Default is a new {@link MeshBasicMaterial}.
-   */
-  constructor(instanceCount, vertexCount, indexCount, material) {
-    super(instanceCount, vertexCount, indexCount, material);
-    __publicField(this, "uniformsTexture");
-    __publicField(this, "isMaterialPatched", false);
-    __publicField(this, "uniformSchema", {});
-    __publicField(this, "boundsNeedsUpdate", false);
-    // Multi_draw with index causes excessive memory consumption on renderer process
-    // TODO: Create issue in three.js repo
-    __publicField(this, "useMultiDraw", false);
-    __publicField(this, "useIndex", false);
-    __publicField(this, "batchCount", 0);
-    __publicField(this, "indexBuffer");
-    __publicField(this, "geometryById", /* @__PURE__ */ new Map());
-    __publicField(this, "mapGeometryToInstanceId", /* @__PURE__ */ new Map());
-    material.forceSinglePass = true;
-    addDim(this);
-    this.addEventListener("added", () => {
-      if (!this.useIndex && this.geometry.index !== null) {
-        this.geometry = this.geometry.toNonIndexed();
-        this.resizeToFitGeometry(this.geometry);
+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;
       }
-    });
-  }
-  /**
-   * Appends uniform definitions to the current schema, and creates a new {@link SquareDataTexture} if needed.
-   * @param schema description of per-instance uniforms by shader stage (vertex/fragment)
-   */
-  addPerInstanceUniforms(schema) {
-    this.uniformSchema = deepMerge(this.uniformSchema, schema);
-    const parsedSchema = this.parseUniformSchema(this.uniformSchema);
-    if (this.uniformsTexture) this.uniformsTexture.dispose();
-    this.uniformsTexture = new SquareDataTexture(
-      Float32Array,
-      parsedSchema.channels,
-      parsedSchema.texelsPerInstance,
-      this.maxInstanceCount,
-      parsedSchema.uniformMap,
-      parsedSchema.fetchInFragmentShader
-    );
-  }
-  addGeometry(geometry, reservedVertexRange, reservedIndexRange) {
-    if (this.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;
-  }
-  addInstance(geometryId) {
-    if (this.useMultiDraw) return super.addInstance(geometryId);
-    if (this.mapGeometryToInstanceId.has(geometryId)) {
-      const geometry = this.geometryById.get(geometryId);
-      this.resizeToFitGeometry(geometry);
-      geometryId = this.addGeometry(geometry);
+      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);
     }
-    const instanceId = super.addInstance(geometryId);
-    this.mapGeometryToInstanceId.set(geometryId, instanceId);
-    return instanceId;
-  }
-  onBeforeRender(renderer, scene, camera, geometry, material, group) {
-    var _a2;
-    if (!this.isMaterialPatched) this.patchMaterial(material);
-    (_a2 = this.uniformsTexture) == null ? void 0 : _a2.update();
-    if (this.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);
+    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;
     }
-    super.onBeforeRender(renderer, scene, camera, geometry, material, group);
-    this.batchCount = this.updateIndexBuffer(geometry);
-    this._multiDrawCount = 0;
   }
-  onAfterRender(renderer, scene, camera, geometry) {
-    var _a2;
-    if (this.useMultiDraw) return;
-    const batchCount = this.batchCount;
-    const gl = renderer.getContext();
-    if (geometry.index == null) return console.warn("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);
+}
+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;
   }
-  /**
-   * Retrieves the value of a uniform at the specified instance ID.
+  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 isObject(item) {
+  return !!item && typeof item === "object" && !Array.isArray(item);
+}
+function deepMerge(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+  if (source === void 0) {
+    return target;
+  }
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) {
+          Object.assign(target, { [key]: {} });
+        }
+        deepMerge(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+  return deepMerge(target, ...sources);
+}
+function getSquareTextureSize(capacity, pixelsPerInstance) {
+  return Math.max(pixelsPerInstance, Math.ceil(Math.sqrt(capacity / pixelsPerInstance)) * pixelsPerInstance);
+}
+function getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity) {
+  if (channels === 3) {
+    console.warn('"channels" cannot be 3. Set to 4. More info: https://github.com/mrdoob/three.js/pull/23228');
+    channels = 4;
+  }
+  const size = getSquareTextureSize(capacity, pixelsPerInstance);
+  const array = new arrayType(size * size * channels);
+  const isFloat = arrayType.name.includes("Float");
+  const isUnsignedInt = arrayType.name.includes("Uint");
+  const type = isFloat ? FloatType : isUnsignedInt ? UnsignedIntType : IntType;
+  let format;
+  switch (channels) {
+    case 1:
+      format = isFloat ? RedFormat : RedIntegerFormat;
+      break;
+    case 2:
+      format = isFloat ? RGFormat : RGIntegerFormat;
+      break;
+    case 4:
+      format = isFloat ? RGBAFormat : RGBAIntegerFormat;
+      break;
+  }
+  return { array, size, type, format };
+}
+class SquareDataTexture extends DataTexture {
+  /**
+   * @param arrayType The constructor for the TypedArray.
+   * @param channels The number of channels in the texture.
+   * @param pixelsPerInstance The number of pixels required for each instance.
+   * @param capacity The total number of instances.
+   * @param uniformMap Optional map for handling uniform values.
+   * @param fetchInFragmentShader Optional flag that determines if uniform values should be fetched in the fragment shader instead of the vertex shader.
+   */
+  constructor(arrayType, channels, pixelsPerInstance, capacity, uniformMap, fetchInFragmentShader) {
+    if (channels === 3) channels = 4;
+    const { array, format, size, type } = getSquareTextureInfo(arrayType, channels, pixelsPerInstance, capacity);
+    super(array, size, size, format, type);
+    __publicField(this, "data");
+    __publicField(this, "channels");
+    __publicField(this, "pixelsPerInstance");
+    __publicField(this, "stride");
+    __publicField(this, "uniformMap");
+    __publicField(this, "fetchUniformsInFragmentShader");
+    __publicField(this, "uniformPrefix", "batch_");
+    this.data = array;
+    this.channels = channels;
+    this.pixelsPerInstance = pixelsPerInstance;
+    this.stride = pixelsPerInstance * channels;
+    this.uniformMap = uniformMap;
+    this.fetchUniformsInFragmentShader = fetchInFragmentShader;
+    this.needsUpdate = true;
+  }
+  /**
+   * Sets a uniform value at the specified instance ID in the texture.
+   * @param id The instance ID to set the uniform for.
+   * @param name The name of the uniform.
+   * @param value The value to set for the uniform.
+   */
+  setUniformAt(id, name, value) {
+    const schema = this.uniformMap.get(name);
+    if (!schema) {
+      console.warn(`SquareDataTexture.setUniformAt: uniform ${name} not found`);
+      return;
+    }
+    const { offset, size } = schema;
+    const stride = this.stride;
+    if (size === 1) {
+      this.data[id * stride + offset] = value;
+    } else {
+      value.toArray(this.data, id * stride + offset);
+    }
+  }
+  /**
+   * Retrieves a uniform value at the specified instance ID from the texture.
+   * @param id The instance ID to retrieve the uniform from.
+   * @param name The name of the uniform.
+   * @param target Optional target object to store the uniform value.
+   * @returns The uniform value for the specified instance.
+   */
+  getUniformAt(id, name, target) {
+    const schema = this.uniformMap.get(name);
+    if (!schema) {
+      console.warn(`SquareDataTexture.getUniformAt: uniform ${name} not found`);
+      return 0;
+    }
+    const { offset, size } = schema;
+    const stride = this.stride;
+    if (size === 1) {
+      return this.data[id * stride + offset];
+    }
+    return target.fromArray(this.data, id * stride + offset);
+  }
+  /** Mark the texture as needing an update. */
+  update() {
+    this.needsUpdate = true;
+  }
+  /**
+   * Generates the GLSL code for accessing the uniform data stored in the texture.
+   * @param textureName The name of the texture in the GLSL shader.
+   * @param indexName The name of the index in the GLSL shader.
+   * @param indexType The type of the index in the GLSL shader.
+   * @returns An object containing the GLSL code for the vertex and fragment shaders.
+   */
+  getUniformsGLSL(textureName, indexName, indexType) {
+    const vertex = this.getUniformsVertexGLSL(textureName, indexName, indexType);
+    const fragment = this.getUniformsFragmentGLSL(textureName, indexName, indexType);
+    return { vertex, fragment };
+  }
+  getUniformsVertexGLSL(textureName, indexName, indexType) {
+    if (this.fetchUniformsInFragmentShader) {
+      return (
+        /*glsl*/
+        `
+        varying ${indexType} ${this.uniformPrefix}${indexName};
+        void main() {
+          ${this.uniformPrefix}${indexName} = ${indexName};
+      `
+      );
+    }
+    const texelsFetch = this.texelsFetchGLSL(textureName, indexName);
+    const getFromTexels = this.getFromTexelsGLSL();
+    const { assignVarying, declareVarying } = this.getVarying();
+    return (
+      /*glsl*/
+      `
+      uniform highp sampler2D ${textureName};  
+      ${declareVarying}
+      void main() {
+      #ifdef USE_BATCHING
+        ${indexType} ${indexName} = ${indexType}(getIndirectIndex(gl_DrawID));
+      #endif
+        ${texelsFetch}
+        ${getFromTexels}
+        ${assignVarying}`
+    );
+  }
+  getUniformsFragmentGLSL(textureName, indexName, indexType) {
+    if (!this.fetchUniformsInFragmentShader) {
+      const { declareVarying, getVarying } = this.getVarying();
+      return (
+        /*glsl*/
+        `
+        ${declareVarying}
+        void main() {
+          ${getVarying}`
+      );
+    }
+    const texelsFetch = this.texelsFetchGLSL(textureName, `${this.uniformPrefix}${indexName}`);
+    const getFromTexels = this.getFromTexelsGLSL();
+    return (
+      /*glsl*/
+      `
+      uniform highp sampler2D ${textureName};  
+      varying ${indexType} ${this.uniformPrefix}${indexName};
+      void main() {
+        ${texelsFetch}
+        ${getFromTexels}`
+    );
+  }
+  texelsFetchGLSL(textureName, indexName) {
+    const pixelsPerInstance = this.pixelsPerInstance;
+    let texelsFetch = (
+      /*glsl*/
+      `
+      int size = textureSize(${textureName}, 0).x;
+      int j = int(${indexName}) * ${pixelsPerInstance};
+      int x = j % size;
+      int y = j / size;
+    `
+    );
+    for (let i = 0; i < pixelsPerInstance; i++) {
+      texelsFetch += /*glsl*/
+      `vec4 ${this.uniformPrefix}texel${i} = texelFetch(${textureName}, ivec2(x + ${i}, y), 0);
+`;
+    }
+    return texelsFetch;
+  }
+  getFromTexelsGLSL() {
+    const uniforms = this.uniformMap;
+    let getFromTexels = "";
+    for (const [name, { type, offset, size }] of uniforms) {
+      const tId = Math.floor(offset / this.channels);
+      if (type === "mat3") {
+        getFromTexels += /*glsl*/
+        `mat3 ${name} = mat3(${this.uniformPrefix}texel${tId}.rgb, vec3(${this.uniformPrefix}texel${tId}.a, ${this.uniformPrefix}texel${tId + 1}.rg), vec3(${this.uniformPrefix}texel${tId + 1}.ba, ${this.uniformPrefix}texel${tId + 2}.r));
+`;
+      } else if (type === "mat4") {
+        getFromTexels += /*glsl*/
+        `mat4 ${name} = mat4(${this.uniformPrefix}texel${tId}, ${this.uniformPrefix}texel${tId + 1}, ${this.uniformPrefix}texel${tId + 2}, ${this.uniformPrefix}texel${tId + 3});
+`;
+      } else {
+        const components = this.getUniformComponents(offset, size);
+        getFromTexels += /*glsl*/
+        `${type} ${name} = ${this.uniformPrefix}texel${tId}.${components};
+`;
+      }
+    }
+    return getFromTexels;
+  }
+  getVarying() {
+    const uniforms = this.uniformMap;
+    let declareVarying = "";
+    let assignVarying = "";
+    let getVarying = "";
+    for (const [name, { type }] of uniforms) {
+      declareVarying += /*glsl*/
+      `varying ${type} ${this.uniformPrefix}${name};
+`;
+      assignVarying += /*glsl*/
+      `${this.uniformPrefix}${name} = ${name};
+`;
+      getVarying += /*glsl*/
+      `${type} ${name} = ${this.uniformPrefix}${name};
+`;
+    }
+    return { declareVarying, assignVarying, getVarying };
+  }
+  getUniformComponents(offset, size) {
+    const startIndex = offset % this.channels;
+    let components = "";
+    for (let i = 0; i < size; i++) {
+      components += componentsArray[startIndex + i];
+    }
+    return components;
+  }
+}
+const componentsArray = ["r", "g", "b", "a"];
+const batchIdName = "batchId";
+const _BatchedMesh = 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.
+   * @param indexCount the max number of indices to be used by all geometries.
+   * @param material an instance of {@link Material}. Default is a new {@link MeshBasicMaterial}.
+   */
+  constructor(instanceCount, vertexCount, indexCount, material) {
+    super(instanceCount, vertexCount, indexCount, material);
+    __publicField(this, "uniformsTexture");
+    __publicField(this, "uniformSchema", {});
+    __publicField(this, "isMaterialPatched", false);
+    __publicField(this, "boundsNeedsUpdate", false);
+    __publicField(this, "batchCount", 0);
+    __publicField(this, "indexBuffer");
+    __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);
+      }
+    });
+  }
+  /**
+   * Appends uniform definitions to the current schema, and creates a new {@link SquareDataTexture} if needed.
+   * @param schema description of per-instance uniforms by shader stage (vertex/fragment)
+   */
+  addPerInstanceUniforms(schema) {
+    this.uniformSchema = deepMerge(this.uniformSchema, schema);
+    const parsedSchema = this.parseUniformSchema(this.uniformSchema);
+    if (this.uniformsTexture) this.uniformsTexture.dispose();
+    this.uniformsTexture = new SquareDataTexture(
+      Float32Array,
+      parsedSchema.channels,
+      parsedSchema.texelsPerInstance,
+      this.maxInstanceCount,
+      parsedSchema.uniformMap,
+      parsedSchema.fetchInFragmentShader
+    );
+    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;
+  }
+  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;
+  }
+  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;
+  }
+  onAfterRender(renderer, scene, camera, geometry) {
+    var _a2;
+    if (_BatchedMesh.useMultiDraw) return;
+    const batchCount = this.batchCount;
+    const gl = renderer.getContext();
+    if (geometry.index == null) return console.warn("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);
+  }
+  /**
+   * Retrieves the value of a uniform at the specified instance ID.
    * @param id instance ID
    * @param name uniform name
    * @param target Optional target object to store the uniform value
@@ -388,530 +740,179 @@ class BatchedMesh extends BatchedMesh$1 {
       this.boundsNeedsUpdate = false;
     }
   }
-  setMatrixAt(instanceId, matrix) {
-    super.setMatrixAt(instanceId, matrix);
-    this.boundsNeedsUpdate = true;
-    return this;
-  }
-  dispose() {
-    var _a2;
-    this.geometry.setIndex(this.indexBuffer ?? null);
-    super.dispose();
-    this.uniformSchema = {};
-    (_a2 = this.uniformsTexture) == null ? void 0 : _a2.dispose();
-    this.uniformsTexture = void 0;
-    this.indexBuffer = void 0;
-    this.geometryById.forEach((geometry) => geometry.dispose());
-    this.geometryById.clear();
-    this.mapGeometryToInstanceId.clear();
-    return this;
-  }
-  resizeToFitGeometry(geometry) {
-    var _a2;
-    const vertexCount = geometry.attributes["position"].count;
-    const indexCount = ((_a2 = geometry.index) == null ? void 0 : _a2.count) ?? 0;
-    this._maxVertexCount += vertexCount;
-    this._maxIndexCount += indexCount;
-    this.setGeometrySize(this._maxVertexCount, this._maxIndexCount);
-  }
-  updateIndexBuffer(geometry) {
-    const { _multiDrawStarts, _multiDrawCounts, _multiDrawCount } = this;
-    const indexBuffer = this.indexBuffer;
-    const indexArray = indexBuffer.array;
-    const batchIdBuffer = geometry.getAttribute(batchIdName);
-    const batchIdArray = batchIdBuffer.array;
-    const indirectArray = this._indirectTexture.image.data;
-    let indexCount = 0;
-    for (let i = 0; i < _multiDrawCount; i++) {
-      const start = _multiDrawStarts[i];
-      const count = _multiDrawCounts[i];
-      const batchId = batchIdArray[start];
-      indirectArray[batchId] = batchId;
-      for (let j = start; j < start + count; j++) {
-        indexArray[indexCount++] = j;
-      }
-    }
-    indexBuffer.needsUpdate = true;
-    geometry.setIndex(indexBuffer);
-    return indexCount;
-  }
-  addBatchIdBuffer(geometry, geometryId) {
-    const hasAttribute = geometry.hasAttribute(batchIdName);
-    const vertexCount = geometry.getAttribute("position").count;
-    const batchIdArray = hasAttribute ? geometry.getAttribute(batchIdName).array : new Int32Array(vertexCount);
-    for (let i = 0; i < vertexCount; i++) {
-      batchIdArray[i] = geometryId;
-    }
-    if (!hasAttribute) {
-      const batchIdBuffer = new BufferAttribute(batchIdArray, 1).setUsage(StreamDrawUsage);
-      geometry.setAttribute(batchIdName, batchIdBuffer);
-    }
-  }
-  patchMaterial(material) {
-    const onBeforeCompile = material.onBeforeCompile.bind(material);
-    const customProgramCacheKey = material.customProgramCacheKey.bind(material);
-    material.onBeforeCompile = (shader, renderer) => {
-      var _a2;
-      onBeforeCompile(shader, renderer);
-      shader.defines ?? (shader.defines = {});
-      shader.defines["USE_BATCH_UNIFORMS"] = "";
-      shader.uniforms["uniformsTexture"] = { value: this.uniformsTexture };
-      const { vertex, fragment } = ((_a2 = this.uniformsTexture) == null ? void 0 : _a2.getUniformsGLSL("uniformsTexture", "instanceId", "int")) ?? {
-        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 (!this.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);
-    };
-    material.customProgramCacheKey = () => {
-      return `batch_${this.id}_${!!this.uniformsTexture}_${customProgramCacheKey()}`;
-    };
-    this.isMaterialPatched = true;
-  }
-  // Taken from https://github.com/agargaro/instanced-mesh/blob/master/src/core/feature/Uniforms.ts
-  parseUniformSchema(schema) {
-    let totalSize = 0;
-    const uniformMap = /* @__PURE__ */ new Map();
-    const uniforms = [];
-    const vertexSchema = schema.vertex ?? {};
-    const fragmentSchema = schema.fragment ?? {};
-    let fetchInFragmentShader = true;
-    for (const name in vertexSchema) {
-      const type = vertexSchema[name];
-      const size = this.getUniformSize(type);
-      totalSize += size;
-      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 });
-      }
-    }
-    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;
-  }
-}
-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);
+  setMatrixAt(instanceId, matrix) {
+    super.setMatrixAt(instanceId, matrix);
+    this.boundsNeedsUpdate = true;
+    return this;
   }
   dispose() {
+    var _a2;
+    if (this.indexBuffer) this.geometry.setIndex(this.indexBuffer);
     super.dispose();
-    this.dispatchEvent({ type: "dispose" });
+    this.uniformSchema = {};
+    (_a2 = this.uniformsTexture) == null ? void 0 : _a2.dispose();
+    this.uniformsTexture = void 0;
+    this.indexBuffer = void 0;
+    this.geometryById.forEach((geometry) => geometry.dispose());
+    this.geometryById.clear();
+    this.mapGeometryToInstanceId.clear();
+    return this;
   }
-  _prepareForRender(material) {
+  resizeToFitGeometry(geometry) {
     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);
+    const vertexCount = geometry.attributes["position"].count;
+    const indexCount = ((_a2 = geometry.index) == null ? void 0 : _a2.count) ?? 0;
+    this._maxVertexCount += vertexCount;
+    this._maxIndexCount += indexCount;
+    this.setGeometrySize(this._maxVertexCount, this._maxIndexCount);
+  }
+  updateIndexBuffer(geometry) {
+    const { _multiDrawStarts, _multiDrawCounts, _multiDrawCount } = this;
+    const indexBuffer = this.indexBuffer;
+    const indexArray = indexBuffer.array;
+    const batchIdBuffer = geometry.getAttribute(batchIdName);
+    const batchIdArray = batchIdBuffer.array;
+    const indirectArray = this._indirectTexture.image.data;
+    let indexCount = 0;
+    for (let i = 0; i < _multiDrawCount; i++) {
+      const start = _multiDrawStarts[i];
+      const count = _multiDrawCounts[i];
+      const batchId = batchIdArray[start];
+      indirectArray[batchId] = batchId;
+      for (let j = start; j < start + count; j++) {
+        indexArray[indexCount++] = j;
       }
     }
-    texture.needsUpdate = this.textureNeedsUpdate;
-    material.setMatrixTexture(texture);
+    indexBuffer.needsUpdate = true;
+    geometry.setIndex(indexBuffer);
+    return indexCount;
   }
-  setTexData(index, value, texData) {
-    if (value !== texData[index]) {
-      texData[index] = value;
-      this.textureNeedsUpdate = true;
+  addBatchIdBuffer(geometry, geometryId) {
+    const hasAttribute = geometry.hasAttribute(batchIdName);
+    const vertexCount = geometry.getAttribute("position").count;
+    const batchIdArray = hasAttribute ? geometry.getAttribute(batchIdName).array : new Int32Array(vertexCount);
+    for (let i = 0; i < vertexCount; i++) {
+      batchIdArray[i] = geometryId;
     }
-  }
-}
-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);
+    if (!hasAttribute) {
+      const batchIdBuffer = new BufferAttribute(batchIdArray, 1).setUsage(StreamDrawUsage);
+      geometry.setAttribute(batchIdName, batchIdBuffer);
     }
-    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);
-      }
+  }
+  patchMaterial(material) {
+    const onBeforeCompile = material.onBeforeCompile.bind(material);
+    const customProgramCacheKey = material.customProgramCacheKey.bind(material);
+    material.onBeforeCompile = (shader, renderer) => {
+      var _a2;
+      onBeforeCompile(shader, renderer);
+      shader.defines ?? (shader.defines = {});
+      shader.defines["USE_BATCH_UNIFORMS"] = "";
+      shader.uniforms["uniformsTexture"] = { value: this.uniformsTexture };
+      const { vertex, fragment } = ((_a2 = this.uniformsTexture) == null ? void 0 : _a2.getUniformsGLSL("uniformsTexture", "instanceId", "int")) ?? {
+        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);
+    };
+    material.customProgramCacheKey = () => {
+      return `batch_${this.id}_${!!this.uniformsTexture}_${customProgramCacheKey()}`;
+    };
+    this.isMaterialPatched = true;
+  }
+  // Taken from https://github.com/agargaro/instanced-mesh/blob/master/src/core/feature/Uniforms.ts
+  parseUniformSchema(schema) {
+    let totalSize = 0;
+    const uniformMap = /* @__PURE__ */ new Map();
+    const uniforms = [];
+    const vertexSchema = schema.vertex ?? {};
+    const fragmentSchema = schema.fragment ?? {};
+    let fetchInFragmentShader = true;
+    for (const name in vertexSchema) {
+      const type = vertexSchema[name];
+      const size = this.getUniformSize(type);
+      totalSize += size;
+      uniforms.push({ name, type, size });
+      fetchInFragmentShader = false;
     }
-    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();
+    for (const name in fragmentSchema) {
+      if (!vertexSchema[name]) {
+        const type = fragmentSchema[name];
+        const size = this.getUniformSize(type);
+        totalSize += size;
+        uniforms.push({ name, type, size });
       }
-      material._orientation = orient;
     }
+    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 };
   }
-}
-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;
+  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 shader = material.userData.shader;
-    if (!shader) {
-      material.userData.uDim = uDim;
-      material.userData.skipDimTexture = object.userData["skipDimTexture"];
-      return;
+    const offset = tempOffset.length * 4;
+    for (; size > 0; size -= 4) {
+      tempOffset.push(size);
     }
-    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_BATCHING
-    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;
+    return offset;
   }
-`
-);
-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);
-  }`
-);
+  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 (Firefox only) */
+__publicField(_BatchedMesh, "useMultiDraw", true);
+let BatchedMesh = _BatchedMesh;
 const sharedParameters = {
   side: DoubleSide,
   transparent: true,
-  depthTest: false
+  forceSinglePass: true,
+  depthFunc: AlwaysDepth
 };
 class MaterialSystem {
   constructor() {
@@ -950,7 +951,6 @@ class MaterialSystem {
         uniforms["resolution"].value.set(this.viewport.z, this.viewport.w);
       }
     };
-    this.addPolygonOffset(material);
     addDimToMaterial(material);
     return material;
   }
@@ -969,7 +969,6 @@ class MaterialSystem {
       color: params.color,
       opacity: params.opacity
     });
-    this.addPolygonOffset(material);
     addDimToMaterial(material);
     return material;
   }
@@ -993,7 +992,6 @@ class MaterialSystem {
         );
       };
     }
-    this.addPolygonOffset(material);
     addDimToMaterial(material);
     return material;
   }
@@ -1014,14 +1012,10 @@ class MaterialSystem {
           `
         );
       };
-      this.addPolygonOffset(this.backgroundMaterial);
       addDimToMaterial(this.backgroundMaterial);
     }
     return this.backgroundMaterial;
   }
-  addPolygonOffset(material) {
-    return;
-  }
 }
 function isShapeDef(def) {
   return def.shape !== void 0;
@@ -1053,6 +1047,31 @@ function isLineLayer(layer) {
 function isLayerLayer(layer) {
   return layer.children[0] && isLayerDef(layer.children[0]);
 }
+function groupBy(list, keyGetter) {
+  const map = /* @__PURE__ */ new Map();
+  list.forEach((item) => {
+    const key = keyGetter(item);
+    const collection = map.get(key);
+    if (!collection) {
+      map.set(key, [item]);
+    } else {
+      collection.push(item);
+    }
+  });
+  return map;
+}
+function partition(list, pred) {
+  const truthy = [];
+  const falsy = [];
+  for (const item of list) {
+    if (pred(item)) {
+      truthy.push(item);
+    } else {
+      falsy.push(item);
+    }
+  }
+  return [truthy, falsy];
+}
 const INTERACTIVE_LAYER = 1;
 function setInteractive(object, isInteractive) {
   if (isInteractive) object.layers.enable(INTERACTIVE_LAYER);
@@ -1063,19 +1082,6 @@ function isVisible(object) {
   if (!object.visible) return false;
   return [...traverseAncestorsGenerator(object)].every((obj) => obj.visible);
 }
-function printTree(object, fullName = false) {
-  object.traverse((obj) => {
-    let s = "";
-    let obj2 = obj;
-    while (obj2 !== object) {
-      s = "|___ " + s;
-      obj2 = (obj2 == null ? void 0 : obj2.parent) ?? null;
-    }
-    const renderOrder = obj.isGroup ? "" : `, RO: ${obj.renderOrder}`;
-    const name = fullName ? obj.name : obj.name.split(":").at(-1);
-    console.log(`${s}${name}<${obj.type}>${renderOrder}`);
-  });
-}
 class RenderableSystem {
   /**
    * @param type readable name of the system's type for debugging
@@ -1126,6 +1132,15 @@ class RenderableSystem {
     const shapeDef = this.getDefsByObject(mesh)[batchId];
     return shapeDef;
   }
+  /**
+   * Dispose all objects and clear the mappings
+   */
+  dispose() {
+    for (const object of this.getAllObjects()) {
+      this.disposeObject(object);
+    }
+    this.clearMappings();
+  }
   /**
    * Protected implementation method that subclasses can override.
    * This ensures logging always happens even when the method is overridden.
@@ -1298,10 +1313,10 @@ class ImageSystem extends RenderableSystem {
     /** Textures memory limit in megabytes */
     __publicField(this, "memoryLimitMb");
     __publicField(this, "packer");
-    __publicField(this, "position", new Vector3());
-    __publicField(this, "rotation", new Quaternion());
-    __publicField(this, "scale", new Vector3());
-    __publicField(this, "matrix", new Matrix4());
+    __publicField(this, "globalTranslationMatrix", new Matrix4());
+    __publicField(this, "originTranslationMatrix", new Matrix4());
+    __publicField(this, "rotationMatrix", new Matrix4());
+    __publicField(this, "scaleMatrix", new Matrix4());
     this.materialSystem = materialSystem;
     const atlasTextureSize = renderer.context.capabilities.maxTextureSize;
     console.log(`Max texture size: ${atlasTextureSize}`);
@@ -1401,17 +1416,13 @@ class ImageSystem extends RenderableSystem {
   }
   updateDefImpl(imageDef, mesh, instanceIds) {
     const bounds = imageDef.bounds;
-    this.position.set(bounds.center.x, bounds.center.y, 0);
-    if (imageDef.origin) {
-      const xFactor = 0.5 - imageDef.origin[0];
-      const yFactor = 0.5 - imageDef.origin[1];
-      this.position.x += bounds.size.width * xFactor;
-      this.position.y += bounds.size.height * yFactor;
-    }
-    this.scale.set(bounds.size.width, bounds.size.height, 1);
-    this.rotation.setFromAxisAngle(new Vector3(0, 0, 1), bounds.rotation);
-    this.matrix.compose(this.position, this.rotation, this.scale);
-    mesh.setMatrixAt(instanceIds[0], this.matrix);
+    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.rotationMatrix.makeRotationZ(bounds.rotation);
+    const matrix = this.originTranslationMatrix.premultiply(this.scaleMatrix).premultiply(this.rotationMatrix).premultiply(this.globalTranslationMatrix);
+    mesh.setMatrixAt(instanceIds[0], matrix);
   }
   packImages(images) {
     this.packer.reset();
@@ -1545,7 +1556,15 @@ class LineSystem extends RenderableSystem {
   }
 }
 function createVector2(vector2) {
-  return vector2 instanceof Vector2 ? vector2 : Array.isArray(vector2) ? new Vector2(vector2[0], vector2[1]) : new Vector2(vector2.x, vector2.y);
+  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);
 }
 class Rect {
   /**
@@ -1613,7 +1632,7 @@ class Polygon {
     __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(createVector2);
+    this.vertices = vertices.map(createVector3);
     this.indices = indices;
   }
   /**
@@ -1652,41 +1671,19 @@ class Polygon {
   }
   /**
    * Rotates all vertices of the polygon around the given center.
-   * @param rotation Rotation angle in radians. Positive values rotate clockwise.
-   * @param center Center of the rotation.
-   * @returns this {@link Polygon} instance
-   */
-  rotate(rotation, center) {
-    this.vertices.forEach((vertex) => {
-      vertex.rotateAround(center, rotation);
-    });
-    return this;
-  }
-}
-function groupBy(list, keyGetter) {
-  const map = /* @__PURE__ */ new Map();
-  list.forEach((item) => {
-    const key = keyGetter(item);
-    const collection = map.get(key);
-    if (!collection) {
-      map.set(key, [item]);
-    } else {
-      collection.push(item);
-    }
-  });
-  return map;
-}
-function partition(list, pred) {
-  const truthy = [];
-  const falsy = [];
-  for (const item of list) {
-    if (pred(item)) {
-      truthy.push(item);
-    } else {
-      falsy.push(item);
-    }
+   * @param rotation Rotation angle in radians. Positive values rotate clockwise.
+   * @param center Center of the rotation.
+   * @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);
+    });
+    return this;
   }
-  return [truthy, falsy];
 }
 class MeshSystem extends RenderableSystem {
   /**
@@ -1725,6 +1722,12 @@ class MeshSystem extends RenderableSystem {
       opaqueMesh.name = "opaque";
       group.add(opaqueMesh);
     }
+    if (layer.mode === "3d") {
+      group.children.filter((child) => child instanceof Mesh).forEach((mesh) => {
+        const material = mesh.material;
+        material.depthFunc = LessEqualDepth;
+      });
+    }
     return group;
   }
   updateDefImpl(shapeDef, mesh, instanceIds) {
@@ -1741,12 +1744,10 @@ class MeshSystem extends RenderableSystem {
     let rectGeometry = void 0;
     const shapeDefToGeometry = /* @__PURE__ */ new Map();
     for (const shapeDef of shapes) {
-      if (shapeDef.shape instanceof Rect) {
-        if (!rectGeometry) {
-          rectGeometry = new PlaneGeometry(1, 1);
-          rectGeometry.deleteAttribute("normal");
-          rectGeometry.deleteAttribute("uv");
-        }
+      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;
       } else if (shapeDef.shape instanceof Polygon) {
@@ -1758,6 +1759,7 @@ class MeshSystem extends RenderableSystem {
     }
     const material = this.materialSystem.createColorMaterial({ opacity });
     const batchedMesh = new BatchedMesh(shapes.length, vertexCount, indexCount, material);
+    const rectGeometryId = rectGeometry ? batchedMesh.addGeometry(rectGeometry) : void 0;
     batchedMesh.setCustomSort((list) => this.sortInstances(batchedMesh, list));
     const position = new Vector3();
     const rotation = new Quaternion();
@@ -1765,8 +1767,7 @@ class MeshSystem extends RenderableSystem {
     const matrix = new Matrix4();
     for (const shapeDef of shapes) {
       let instanceId = void 0;
-      if (shapeDef.shape instanceof Rect) {
-        const rectGeometryId = rectGeometry ? batchedMesh.addGeometry(rectGeometry) : void 0;
+      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);
@@ -1811,6 +1812,7 @@ class TextSystem extends RenderableSystem {
     __publicField(this, "initialTextScale", new Vector2(1, -1));
     __publicField(this, "textColor", new Color());
     __publicField(this, "pendingUpdates", /* @__PURE__ */ new Map());
+    __publicField(this, "sdfAtlases", /* @__PURE__ */ new Set());
     __publicField(this, "alignmentOffset", new Vector2());
     __publicField(this, "alignmentDirection", new Vector2());
     __publicField(this, "localPosition", new Vector2());
@@ -1820,6 +1822,10 @@ class TextSystem extends RenderableSystem {
     __publicField(this, "localToMax", new Vector2());
     this.materialSystem = materialSystem;
   }
+  dispose() {
+    super.dispose();
+    this.sdfAtlases.forEach((texture) => texture.dispose());
+  }
   buildLayer(layer) {
     const group = new Group();
     const batchedText = this.buildBatchedText(layer);
@@ -1897,7 +1903,12 @@ class TextSystem extends RenderableSystem {
     for (const { textDef, instanceIds } of mappingData) {
       this.registerDefObject(textDef, batchedText, instanceIds);
     }
-    batchedText.addEventListener("synccomplete", () => this.renderer.update());
+    batchedText.addEventListener("synccomplete", () => {
+      var _a2;
+      const sdfTexture = (_a2 = batchedText.textRenderInfo) == null ? void 0 : _a2.sdfTexture;
+      if (sdfTexture) this.sdfAtlases.add(sdfTexture);
+      this.renderer.update();
+    });
     return batchedText;
   }
   // TODO: Simplify
@@ -1990,6 +2001,7 @@ class LayerSystem {
    * @param renderer {@link Renderer}
    */
   constructor(renderer) {
+    __publicField(this, "backgroundMesh");
     __publicField(this, "materialSystem");
     __publicField(this, "meshSystem");
     __publicField(this, "imageSystem");
@@ -2029,6 +2041,7 @@ class LayerSystem {
   }
   /**
    * Update the given defs immediately, or queue them for update if update buffering is enabled.
+   * NOTE: Currently update buffering is disabled, as observed performance gains are negligible. Need to revisit this.
    * @param defs {@link RenderableDef} array
    */
   updateDefs(defs) {
@@ -2089,6 +2102,18 @@ class LayerSystem {
     }
     return rootGroup;
   }
+  /**
+   * Dispose all objects and clear the mappings
+   */
+  disposeScene() {
+    var _a2, _b, _c;
+    for (const system of this.systems) {
+      system.dispose();
+    }
+    (_a2 = this.backgroundMesh) == null ? void 0 : _a2.geometry.dispose();
+    (_c = (_b = this.backgroundMesh) == null ? void 0 : _b.material) == null ? void 0 : _c.dispose();
+    this.backgroundMesh = void 0;
+  }
   updateDef(def) {
     if (isShapeDef(def)) this.meshSystem.updateDef(def);
     else if (isImageDef(def)) this.imageSystem.updateDef(def);
@@ -2153,6 +2178,7 @@ class LayerSystem {
     backgroundMesh.frustumCulled = false;
     backgroundMesh.renderOrder = 0;
     backgroundMesh.name = "background";
+    this.backgroundMesh = backgroundMesh;
     return backgroundMesh;
   }
   initRenderOrder(rootLayer) {
@@ -2170,6 +2196,8 @@ class LayerSystem {
         this.layerDefRenderOrder.push(layer);
       }
     }
+    const [threeDLayers, twoDLayers] = partition(this.layerDefRenderOrder, (layer) => layer.mode === "3d");
+    this.layerDefRenderOrder = [...twoDLayers, ...threeDLayers];
   }
   getFullLayerName(layerDef) {
     let fullName = layerDef.name;
@@ -2181,6 +2209,19 @@ class LayerSystem {
     return fullName;
   }
 }
+function printTree(object, fullName = false) {
+  object.traverse((obj) => {
+    let s = "";
+    let obj2 = obj;
+    while (obj2 !== object) {
+      s = "|___ " + s;
+      obj2 = (obj2 == null ? void 0 : obj2.parent) ?? null;
+    }
+    const renderOrder = obj.isGroup ? "" : `, RO: ${obj.renderOrder}`;
+    const name = fullName ? obj.name : obj.name.split(":").at(-1);
+    console.log(`${s}${name}<${obj.type}>${renderOrder}`);
+  });
+}
 /*!
  * camera-controls
  * https://github.com/yomotsu/camera-controls
@@ -4717,6 +4758,20 @@ class CameraController extends CameraControls {
   constructor(camera, renderer) {
     super(camera);
     this.renderer = renderer;
+    this.dollyToCursor = true;
+    this.draggingSmoothTime = 0;
+    void this.rotatePolarTo(0, false);
+    this.mouseButtons = {
+      left: CameraController.ACTION.NONE,
+      middle: CameraController.ACTION.NONE,
+      right: CameraController.ACTION.NONE,
+      wheel: CameraController.ACTION.NONE
+    };
+    this.touches = {
+      one: CameraController.ACTION.NONE,
+      two: CameraController.ACTION.NONE,
+      three: CameraController.ACTION.NONE
+    };
   }
   update(delta) {
     var _a2;
@@ -4737,31 +4792,30 @@ class CameraSystem {
    * @param renderer {@link Renderer} instance
    */
   constructor(renderer) {
-    /** External camera instance. Used to render the scene in external mode (e.g. Mapbox GL JS). */
-    __publicField(this, "externalCamera");
+    /** {@link PerspectiveCamera} instance. Used to render the scene in internal mode. */
+    __publicField(this, "camera");
     /** {@link CameraController} instance. Used to smoothly animate the camera. */
     __publicField(this, "controller");
-    __publicField(this, "camera");
-    __publicField(this, "zoomIdentityDistance");
+    /**
+     * Cached previous viewport height used to preserve zoom across resizes.
+     * Note: we intentionally keep this separate from the derived identity distance.
+     */
+    __publicField(this, "prevViewportHeightPx");
+    /** [min, max] zoom factors */
     __publicField(this, "zoomBounds");
+    /** Default FOV for the camera. Taken from Mapbox GL JS. */
+    __publicField(this, "defaultFov", 36.87);
     this.renderer = renderer;
-    const [w, h] = renderer.size;
-    this.camera = new PerspectiveCamera(90, w / (h || 1));
+    const h = renderer.size[1];
+    this.prevViewportHeightPx = h;
+    this.camera = new PerspectiveCamera(this.defaultFov);
     this.camera.up.set(0, 0, -1);
-    this.zoomIdentityDistance = h / 2;
-    this.camera.position.z = this.zoomIdentityDistance;
-    this.controller = new CameraController(this.camera, renderer);
-    this.controller.polarAngle = 0;
+    this.controller = new CameraController(this.camera, this.renderer);
     this.controller.distance = this.zoomIdentityDistance;
   }
-  /** Current camera instance. */
-  get currentCamera() {
-    return this.externalCamera ?? this.camera;
-  }
   /** Current camera zoom factor. */
   get zoomFactor() {
-    const distance = this.controller.distance;
-    return distance ? this.zoomIdentityDistance / distance : 1;
+    return this.zoomFactorForHeight(this.renderer.size[1]);
   }
   /**
    * Calculates the camera distance from the scene's plane for a given zoom factor.
@@ -4769,7 +4823,7 @@ class CameraSystem {
    * @returns Corresponding camera distance on the Z axis
    */
   zoomFactorToDistance(zoomFactor) {
-    return zoomFactor > 0 ? this.zoomIdentityDistance / zoomFactor : this.zoomIdentityDistance;
+    return this.zoomIdentityDistance / zoomFactor;
   }
   /**
    * Initializes the camera with the given zoom bounds.
@@ -4783,41 +4837,188 @@ class CameraSystem {
   updateCamera() {
     if (!this.zoomBounds) return;
     const [w, h] = this.renderer.size;
-    const zoomFactor = this.zoomFactor;
-    this.zoomIdentityDistance = h / 2;
-    const maxDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[0]);
-    const minDistance = Math.abs(this.zoomIdentityDistance / this.zoomBounds[1]);
+    if (w <= 0 || h <= 0) return;
+    const zoomFactor = this.zoomFactorForHeight(this.prevViewportHeightPx);
+    const newZoomIdentity = this.zoomIdentityDistanceForHeight(h);
+    const maxDistance = Math.abs(newZoomIdentity / this.zoomBounds[0]);
+    const minDistance = Math.abs(newZoomIdentity / this.zoomBounds[1]);
     this.camera.aspect = w / (h || 1);
-    this.computeCameraClipPlanes(minDistance, maxDistance);
+    this.camera.near = 0.01;
+    this.camera.far = Math.max(maxDistance, this.camera.near) * 2;
     this.camera.updateProjectionMatrix();
-    this.syncController(minDistance, maxDistance, zoomFactor);
-  }
-  computeCameraClipPlanes(minDistance, maxDistance, nearSafetyFactor = 0.5, farSafetyFactor = 1.5) {
-    const fov = this.camera.fov * DEG2RAD$1;
-    const aspect = this.camera.aspect;
-    const maxPolarAngle = 85 * DEG2RAD$1;
-    const halfFovY = fov / 2;
-    const halfFovX = Math.atan(Math.tan(halfFovY) * aspect);
-    const diagonalFov = 2 * Math.atan(Math.sqrt(Math.tan(halfFovX) ** 2 + Math.tan(halfFovY) ** 2));
-    const minHeight = minDistance * Math.cos(maxPolarAngle);
-    const near = Math.max(0.1, minHeight * nearSafetyFactor);
-    const criticalHeight = minHeight;
-    const horizontalDistToOrbit = minDistance * Math.sin(maxPolarAngle);
-    const distToOrbit = minDistance;
-    const visibleRadiusAtOrbit = distToOrbit * Math.tan(diagonalFov / 2);
-    const planeExtent = Math.max(maxDistance, visibleRadiusAtOrbit);
-    const horizontalDistToFarEdge = horizontalDistToOrbit + planeExtent;
-    const maxViewDistance = Math.sqrt(criticalHeight ** 2 + horizontalDistToFarEdge ** 2);
-    const far = maxViewDistance * farSafetyFactor;
-    this.camera.near = near;
-    this.camera.far = far;
-    if (this.renderer.debugLog) console.log("camera clip planes", near, far);
-  }
-  syncController(minDistance, maxDistance, zoomFactor) {
-    if (this.renderer.debugLog) console.log("syncController", minDistance, maxDistance, zoomFactor);
     this.controller.minDistance = minDistance;
     this.controller.maxDistance = maxDistance;
     void this.controller.dollyTo(this.zoomFactorToDistance(zoomFactor), false);
+    this.prevViewportHeightPx = h;
+  }
+  /**
+   * Distance from the scene plane corresponding to zoomFactor = 1 for the current viewport height.
+   * Derived from camera FOV and renderer height (in pixels).
+   */
+  get zoomIdentityDistance() {
+    return this.zoomIdentityDistanceForHeight(this.renderer.size[1]);
+  }
+  /**
+   * Calculates the zoom identity distance for a given viewport height.
+   * @param viewportHeightPx Renderer height in pixels
+   * @returns Zoom identity distance
+   */
+  zoomIdentityDistanceForHeight(viewportHeightPx) {
+    if (viewportHeightPx <= 0) return 0;
+    return viewportHeightPx * 0.5 / Math.tan(this.camera.fov * DEG2RAD$1 / 2);
+  }
+  /**
+   * Calculates the zoom factor for a given viewport height.
+   * @param viewportHeightPx Renderer height in pixels
+   * @returns Zoom factor
+   */
+  zoomFactorForHeight(viewportHeightPx) {
+    const zid = this.zoomIdentityDistanceForHeight(viewportHeightPx);
+    if (zid === 0) return 1;
+    return zid / (this.controller.distance || zid);
+  }
+}
+class ExternalSystem {
+  /**
+   * @param pickingSystem {@link PickingSystem} instance
+   */
+  constructor(pickingSystem) {
+    /** External camera instance */
+    __publicField(this, "camera", new Camera());
+    __publicField(this, "staticTransformMatrix", new Matrix4());
+    __publicField(this, "intersectionPoint", new Vector3());
+    /**
+     * Scratch NDC coordinate used by external ptScale. Kept as a field to avoid allocating a Vector2 each frame.
+     * (This is always screen center: NDC (0,0))
+     */
+    __publicField(this, "ndcCenter", new Vector2(0, 0));
+    /**
+     * Scratch clip-space vector used when projecting SVG points through the external camera matrix.
+     * Kept as a field to avoid allocating a Vector4 each frame.
+     */
+    __publicField(this, "clipPoint", new Vector4());
+    /**
+     * Scratch pixel points used by external ptScale estimation.
+     * p0 is the screen center in drawing-buffer pixels; p1/p2 are projected offsets from the anchor point.
+     */
+    __publicField(this, "px0", new Vector2());
+    __publicField(this, "px1", new Vector2());
+    __publicField(this, "px2", new Vector2());
+    this.pickingSystem = pickingSystem;
+  }
+  /**
+   * Set static part of an svg -> px transform matrix
+   * @param staticTransformMatrix static transform matrix to apply to the scene
+   */
+  setStaticTransform(staticTransformMatrix) {
+    if (!this.validateMatrix(staticTransformMatrix, "setStaticTransform")) return;
+    this.staticTransformMatrix.fromArray(staticTransformMatrix);
+  }
+  /**
+   * Set dynamic part of an svg -> px transform matrix. Should be called every frame.
+   * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
+   */
+  setDynamicTransform(dynamicTransformMatrix) {
+    if (!this.validateMatrix(dynamicTransformMatrix, "setDynamicTransform")) return;
+    this.camera.projectionMatrix.fromArray(dynamicTransformMatrix).multiply(this.staticTransformMatrix);
+    this.camera.projectionMatrixInverse.copy(this.camera.projectionMatrix).invert();
+  }
+  /**
+   * Estimates pixel→SVG scale for external context rendering (e.g. Mapbox).
+   *
+   * In external mode we don't own a camera rig/controller, so we can't derive scale from "camera distance".
+   * Instead, we:
+   * 1) Find the point on the SVG plane that is currently under the screen center.
+   * 2) Measure how much the screen position changes when moving 1 SVG unit in X/Y around that point.
+   * 3) Convert that local plane→screen mapping into a single "zoom-like" scalar that is stable under tilt+rotate.
+   *
+   * This matches internal mode semantics better because the internal orbit target is also kept under screen center.
+   * @param viewportSize Size of the viewport in drawing-buffer pixels
+   * @returns Pixel-to-SVG scale factor (px → svg units)
+   */
+  pxToSvgScale(viewportSize) {
+    const M = this.camera.projectionMatrix;
+    const [viewportW, viewportH] = viewportSize;
+    if (viewportW <= 0 || viewportH <= 0) return;
+    const intersectionPoint = this.pickingSystem.intersectPlane(this.ndcCenter, this.camera, this.intersectionPoint);
+    if (!intersectionPoint) return;
+    const anchorX = intersectionPoint.x;
+    const anchorY = intersectionPoint.y;
+    const clip = this.clipPoint;
+    const p0 = this.px0.set(viewportW * 0.5, viewportH * 0.5);
+    const p1 = this.px1;
+    const p2 = this.px2;
+    const svgToPixels = (x, y, out) => {
+      clip.set(x, y, 0, 1).applyMatrix4(M);
+      if (clip.w === 0) return false;
+      const ndcX = clip.x / clip.w;
+      const ndcY = clip.y / clip.w;
+      out.set((ndcX + 1) * 0.5 * viewportW, (1 - ndcY) * 0.5 * viewportH);
+      return true;
+    };
+    const svgStep = 1;
+    if (!svgToPixels(anchorX + svgStep, anchorY, p1)) return;
+    if (!svgToPixels(anchorX, anchorY + svgStep, p2)) return;
+    const pxDeltaPerSvgX = p1.sub(p0).divideScalar(svgStep);
+    const pxDeltaPerSvgY = p2.sub(p0).divideScalar(svgStep);
+    const pixelsSqPerSvgX = pxDeltaPerSvgX.dot(pxDeltaPerSvgX);
+    const pixelsSqPerSvgY = pxDeltaPerSvgY.dot(pxDeltaPerSvgY);
+    const pixelsSqCross = pxDeltaPerSvgX.dot(pxDeltaPerSvgY);
+    const sumPixelsSq = pixelsSqPerSvgX + pixelsSqPerSvgY;
+    const areaPixelsSq = pixelsSqPerSvgX * pixelsSqPerSvgY - pixelsSqCross * pixelsSqCross;
+    const maxStretchDiscriminant = Math.max(0, sumPixelsSq * sumPixelsSq - 4 * areaPixelsSq);
+    const maxPixelsSqPerSvg = 0.5 * (sumPixelsSq + Math.sqrt(maxStretchDiscriminant));
+    const pxPerSvg = Math.sqrt(maxPixelsSqPerSvg);
+    if (!Number.isFinite(pxPerSvg) || pxPerSvg <= 0) return;
+    return 1 / pxPerSvg;
+  }
+  validateMatrix(matrix, name) {
+    if (matrix.length !== 16) {
+      console.warn(`[ViewportSystem.${name}]: Matrix must be 16 elements long`);
+      return false;
+    }
+    return true;
+  }
+}
+class PickingSystem {
+  /** */
+  constructor() {
+    __publicField(this, "raycaster", new Raycaster());
+    __publicField(this, "ndcPoint", new Vector2());
+    __publicField(this, "viewboxPlane", new Plane(new Vector3(0, 0, 1), 0));
+    this.raycaster.layers.set(INTERACTIVE_LAYER);
+  }
+  /**
+   * Gets the objects intersected by the raycaster.
+   * @param ndcCoords raycast point in NDC (normalized device coordinates)
+   * @param scene {@link Scene} instance
+   * @param camera {@link Camera} instance
+   * @returns Array of {@link Intersection} instances
+   */
+  getIntersectedObjects(ndcCoords, scene, camera) {
+    this.setRaycasterFromCamera(ndcCoords, camera);
+    const intersections = this.raycaster.intersectObject(scene, true);
+    return intersections.filter((i) => isVisible(i.object));
+  }
+  /**
+   * Intersects the xy-plane with the raycaster.
+   * @param ndcCoords raycast point in NDC (normalized device coordinates
+   * @param camera {@link Camera} instance
+   * @param out Output vector
+   * @returns Intersection point in world space or null if no intersection.
+   */
+  intersectPlane(ndcCoords, camera, out) {
+    this.setRaycasterFromCamera(ndcCoords, camera);
+    return this.raycaster.ray.intersectPlane(this.viewboxPlane, out) ?? void 0;
+  }
+  setRaycasterFromCamera(ndcCoords, camera) {
+    if (camera.isPerspectiveCamera || camera.isOrthographicCamera) {
+      this.ndcPoint.set(ndcCoords.x, ndcCoords.y);
+      this.raycaster.setFromCamera(this.ndcPoint, camera);
+    } else {
+      this.raycaster.ray.origin.set(0, 0, 0).unproject(camera);
+      this.raycaster.ray.direction.set(ndcCoords.x, ndcCoords.y, 1).unproject(camera).sub(this.raycaster.ray.origin).normalize();
+    }
   }
 }
 class SceneSystem {
@@ -4827,29 +5028,22 @@ class SceneSystem {
   constructor(renderer) {
     /** {@link Scene} instance */
     __publicField(this, "scene");
-    /** World matrix - SVG → World transform */
+    /** World matrix - model → world transform */
     __publicField(this, "worldMatrix", new Matrix4());
-    /** Inverse world matrix - World → SVG transform */
+    /** Inverse world matrix - world → model transform */
     __publicField(this, "inverseWorldMatrix", new Matrix4());
+    __publicField(this, "tempVector3", new Vector3());
     __publicField(this, "translationMatrix", new Matrix4());
     __publicField(this, "scaleMatrix", new Matrix4());
-    __publicField(this, "scaleVector", new Vector3());
     __publicField(this, "visibleRectOffsetMatrix", new Matrix4());
     __publicField(this, "viewbox");
     this.renderer = renderer;
     this.scene = new Scene();
     this.scene.matrixAutoUpdate = false;
   }
-  /** Scene scale factor (SVG to pixel) */
+  /** Scene scale factor (model space to world space) */
   get scaleFactor() {
-    this.scaleVector.setFromMatrixScale(this.scene.matrix);
-    if (this.scaleVector.z === 1) {
-      return this.scaleVector.x;
-    } else {
-      const perspectiveW = this.scene.matrix.elements[15];
-      const halfViewportWidth = this.renderer.size[0] / 2;
-      return halfViewportWidth * this.scaleVector.x / perspectiveW;
-    }
+    return this.scene.matrix.elements[0];
   }
   /**
    * Initializes the scene with the given SVG viewbox.
@@ -4859,28 +5053,48 @@ class SceneSystem {
     this.viewbox = viewbox;
     this.updateScene();
   }
-  /**
-   * Updates the scene transform when the renderer size changes.
-   */
+  /** Updates the scene transform from the current viewbox and renderer size. */
   updateScene() {
     if (!this.viewbox) return;
+    this.composeMatrices(this.viewbox);
+  }
+  /**
+   * Converts a point from model coordinates to world coordinates.
+   * @param modelCoords Point in model coordinates
+   * @param out Output vector
+   * @returns Point in world coordinates
+   */
+  modelToWorld(modelCoords, out) {
+    const worldPoint = this.tempVector3.set(modelCoords.x, modelCoords.y, 0).applyMatrix4(this.worldMatrix);
+    out.set(worldPoint.x, worldPoint.y, 0);
+    return out;
+  }
+  /**
+   * Converts a point from world coordinates to model coordinates. Z axis is ignored.
+   * @param worldCoords Point in world coordinates
+   * @param out Output vector
+   * @returns Point in SVG coordinates
+   */
+  worldToModel(worldCoords, out) {
+    const modelPoint = this.tempVector3.copy(worldCoords).applyMatrix4(this.inverseWorldMatrix);
+    out.set(modelPoint.x, modelPoint.y);
+    return out;
+  }
+  composeMatrices(viewbox) {
     const dpr = this.renderer.context.getPixelRatio();
     const visibleRect = this.renderer.visibleRect;
-    const [viewBoxWidth, viewBoxHeight] = this.viewbox.size;
+    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] = this.viewbox.center;
+    const [centerX, 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 canvasCenter = new Vector2(...this.renderer.size).multiplyScalar(0.5);
+      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);
     }
-    this.composeMatrices();
-  }
-  composeMatrices() {
     this.worldMatrix.copy(this.translationMatrix).premultiply(this.scaleMatrix);
     if (this.renderer.visibleRect) this.worldMatrix.premultiply(this.visibleRectOffsetMatrix);
     this.scene.matrix.copy(this.worldMatrix);
@@ -4894,19 +5108,18 @@ class ViewportSystem {
    * @param eventSystem {@link EventSystem} instance
    */
   constructor(renderer, eventSystem) {
+    __publicField(this, "pickingSystem");
+    __publicField(this, "externalSystem");
     __publicField(this, "sceneSystem");
     __publicField(this, "cameraSystem");
-    __publicField(this, "raycaster", new Raycaster());
-    __publicField(this, "intersectionPoint", new Vector3());
-    __publicField(this, "viewboxPlane", new Plane(new Vector3(0, 0, 1), 0));
-    __publicField(this, "pxToSvgScaleThreshold", 1e-3);
+    __publicField(this, "pxToSvgScaleThreshold", 1e-4);
     __publicField(this, "prevPxToSvgScale");
-    __publicField(this, "externalStaticTransformMatrix", new Matrix4());
     this.renderer = renderer;
     this.eventSystem = eventSystem;
+    this.pickingSystem = new PickingSystem();
     this.sceneSystem = new SceneSystem(renderer);
     this.cameraSystem = new CameraSystem(renderer);
-    this.raycaster.layers.set(INTERACTIVE_LAYER);
+    this.externalSystem = new ExternalSystem(this.pickingSystem);
   }
   /** {@link Scene} instance */
   get scene() {
@@ -4914,10 +5127,10 @@ class ViewportSystem {
   }
   /** Current {@link Camera} instance */
   get camera() {
-    return this.cameraSystem.currentCamera;
+    return this.renderer.isExternalMode ? this.externalSystem.camera : this.cameraSystem.camera;
   }
   /** {@link CameraController} instance */
-  get cameraController() {
+  get controller() {
     return this.cameraSystem.controller;
   }
   /** Current camera zoom factor. */
@@ -4930,14 +5143,22 @@ class ViewportSystem {
   }
   /** Pixel to SVG scale factor */
   get pxToSvgScale() {
-    return 1 / (this.scaleFactor * this.zoomFactor);
+    return this.renderer.isExternalMode ? this.externalSystem.pxToSvgScale(this.renderer.size) ?? this.prevPxToSvgScale ?? 1 : 1 / (this.scaleFactor * this.zoomFactor);
+  }
+  /**
+   * Get bearing angle between current camera orientation and true north (in radians).
+   * Angle is in range [0, 2π), going clockwise from north.
+   */
+  get bearing() {
+    const tau = Math.PI * 2;
+    return MathUtils.euclideanModulo(-this.controller.azimuthAngle, tau);
   }
   /**
    * Initializes the viewport and zoom bounds with the given scene definition.
    * @param sceneDef {@link SceneDef} scene definition
    */
   initViewport(sceneDef) {
-    this.sceneSystem.initScene(sceneDef.viewbox);
+    if (!this.renderer.isExternalMode) this.sceneSystem.initScene(sceneDef.viewbox);
     this.cameraSystem.initCamera([0.1, sceneDef.viewbox.size.width > 1e5 ? 100 : 35]);
   }
   /** Updates the viewport when the renderer size changes. */
@@ -4957,71 +5178,99 @@ class ViewportSystem {
   }
   /**
    * Gets the objects intersected by the raycaster.
-   * @param normalizedCoords raycast point in NDC (normalized device coordinates
+   * @param ndcCoords raycast point in NDC (normalized device coordinates)
    * @returns Array of {@link Intersection} instances
    */
-  getIntersectedObjects(normalizedCoords) {
-    const { scene, camera } = this;
-    this.raycaster.setFromCamera(normalizedCoords, camera);
-    const intersections = this.raycaster.intersectObject(scene, true).filter((i) => isVisible(i.object));
-    return intersections;
+  getIntersectedObjects(ndcCoords) {
+    return this.pickingSystem.getIntersectedObjects(ndcCoords, this.scene, this.camera);
   }
   /**
-   * Converts a point from SVG coordinates to world coordinates.
-   * @param svgCoords Point in SVG coordinates
+   * Converts a point from model coordinates to world coordinates.
+   * @param modelCoords Point in model coordinates
+   * @param out Optional output vector
    * @returns Point in world coordinates
    */
-  svgToWorld(svgCoords) {
-    const svg3D = new Vector3(...svgCoords, 0);
-    svg3D.applyMatrix4(this.sceneSystem.worldMatrix);
-    return new Vector2(svg3D.x, svg3D.y);
+  modelToWorld(modelCoords, out = new Vector3()) {
+    return this.sceneSystem.modelToWorld(modelCoords, out);
   }
   /**
-   * Converts a point from world coordinates to SVG coordinates. Z axis is ignored.
+   * Converts a point from world coordinates to model coordinates. Z axis is ignored.
    * @param worldCoords Point in world coordinates
-   * @returns Point in SVG coordinates
+   * @param out Optional output vector
+   * @returns Point in model coordinates
    */
-  worldToSvg(worldCoords) {
-    const svgCoords = worldCoords.clone().applyMatrix4(this.sceneSystem.inverseWorldMatrix);
-    return new Vector2(svgCoords.x, svgCoords.y);
+  worldToModel(worldCoords, out = new Vector2()) {
+    return this.sceneSystem.worldToModel(worldCoords, out);
   }
   /**
-   * Converts a point from screen coordinates to the given coordinate space.
-   * @param space Space to convert to (either "svg" or "world")
-   * @param normalizedCoords Point in NDC (normalized device coordinates)
-   * @returns Point in the given space
+   * Converts a point from screen coordinates to world space.
+   * @param ndcCoords Point in NDC (normalized device coordinates)
+   * @param out Optional output vector
+   * @returns Point in world space
    */
-  screenTo(space, normalizedCoords) {
-    this.raycaster.setFromCamera(normalizedCoords, this.camera);
-    this.raycaster.ray.intersectPlane(this.viewboxPlane, this.intersectionPoint);
-    if (space === "svg") this.intersectionPoint.applyMatrix4(this.sceneSystem.inverseWorldMatrix);
-    return { x: this.intersectionPoint.x, y: this.intersectionPoint.y };
+  ndcToWorld(ndcCoords, out = new Vector3()) {
+    return this.pickingSystem.intersectPlane(ndcCoords, this.camera, out);
   }
   /**
-   * Calculates the camera distance from the scene's plane for a given zoom factor.
-   * @param zoomFactor Zoom factor
-   * @returns Corresponding camera distance on the Z axis
+   * Convert canvas coordinates (relative to the canvas's top left corner)
+   * to NDC (normalized device coordinates).
+   * @param point object defining the coordinates relative to the canvas's top left corner
+   * @param out Optional output vector
+   * @returns Point in NDC space
    */
-  zoomFactorToDistance(zoomFactor) {
-    return this.cameraSystem.zoomFactorToDistance(zoomFactor);
+  canvasToNDC(point, out = new Vector2()) {
+    const dpr = this.renderer.context.getPixelRatio();
+    const [width, height] = [this.renderer.size[0] / dpr, this.renderer.size[1] / dpr];
+    const uv = [point.x / width, point.y / height];
+    const ndc = [uv[0] * 2 - 1, -uv[1] * 2 + 1];
+    return out.set(MathUtils.clamp(ndc[0], -1, 1), MathUtils.clamp(ndc[1], -1, 1));
   }
   /**
-   * Sets the external transform matrix.
+   * Convert canvas coordinates (CSS pixels, relative to canvas top-left) to SVG coordinates.
+   * @param point point in canvas space (CSS pixels)
+   * @returns point in SVG coordinates or undefined if point is outside the SVG plane
+   */
+  canvasToSvg(point) {
+    const vec2 = new Vector2();
+    const vec3 = new Vector3();
+    const ndcPoint = this.canvasToNDC(point, vec2);
+    const worldPoint = this.ndcToWorld(ndcPoint, vec3);
+    if (!worldPoint) return;
+    return this.worldToModel(worldPoint, vec2);
+  }
+  /**
+   * Set static part of an svg -> px transform matrix
    * @param staticTransformMatrix static transform matrix to apply to the scene
    */
-  setExternalTransform(staticTransformMatrix) {
-    this.cameraSystem.externalCamera = new Camera();
-    this.externalStaticTransformMatrix.fromArray(staticTransformMatrix);
+  setStaticTransform(staticTransformMatrix) {
+    this.externalSystem.setStaticTransform(staticTransformMatrix);
   }
   /**
-   * Updates the external camera.
-   * @param dynamicTransformMatrix dynamic transform matrix to apply to the scene
+   * Set dynamic part of an svg -> px transform matrix. Should be called every frame.
+   * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
    */
-  updateExternalCamera(dynamicTransformMatrix) {
-    this.scene.matrix.fromArray(dynamicTransformMatrix).multiply(this.externalStaticTransformMatrix);
-    this.scene.matrixWorldNeedsUpdate = true;
+  setDynamicTransform(dynamicTransformMatrix) {
+    this.externalSystem.setDynamicTransform(dynamicTransformMatrix);
+  }
+  /**
+   * Calculates the camera distance from the scene's plane for a given zoom factor.
+   * @param zoomFactor Zoom factor
+   * @returns Corresponding camera distance on the Z axis
+   */
+  zoomFactorToDistance(zoomFactor) {
+    return this.cameraSystem.zoomFactorToDistance(zoomFactor);
   }
 }
+function asViewportAPI(viewportSystem) {
+  return {
+    canvasToSvg: viewportSystem.canvasToSvg.bind(viewportSystem),
+    setStaticTransform: viewportSystem.setStaticTransform.bind(viewportSystem),
+    setDynamicTransform: viewportSystem.setDynamicTransform.bind(viewportSystem)
+  };
+}
+function eventToCanvas(event) {
+  return { x: event.offsetX, y: event.offsetY };
+}
 class ControlsSystem {
   /**
    * @param renderer {@link Renderer} instance
@@ -5033,7 +5282,7 @@ class ControlsSystem {
     this.renderer = renderer;
     this.viewportSystem = viewportSystem;
     this.interactionsSystem = interactionsSystem;
-    this.controller = viewportSystem.cameraController;
+    this.controller = viewportSystem.controller;
   }
   /** Gesture handlers for camera controls. */
   get handlers() {
@@ -5062,7 +5311,9 @@ class ControlsSystem {
     const dpr = this.renderer.context.getPixelRatio();
     const visibleRect = this.renderer.visibleRect;
     const bearingAngle = -this.controller.azimuthAngle;
-    const worldRect = new Rect(this.viewportSystem.svgToWorld(rect.min), this.viewportSystem.svgToWorld(rect.max));
+    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);
@@ -5070,7 +5321,7 @@ class ControlsSystem {
       [Math.min(...xValues), Math.min(...yValues)],
       [Math.max(...xValues), Math.max(...yValues)]
     );
-    const targetRect = visibleRect ? new Rect(visibleRect.min.clone().multiplyScalar(dpr), visibleRect.max.clone().multiplyScalar(dpr)) : new Rect([0, 0], this.renderer.size);
+    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 zoomByWidth = targetRect.size.x / sourceRect.size.x;
     const zoomByHeight = targetRect.size.y / sourceRect.size.y;
@@ -5095,8 +5346,8 @@ class ControlsSystem {
    * @returns Promise that resolves when the pan animation completes
    */
   panBy(x, y, immediate) {
-    const svgOrigin = this.viewportSystem.svgToWorld(new Vector2(0, 0));
-    const svgOffset = this.viewportSystem.svgToWorld(new Vector2(x, y));
+    const svgOrigin = this.viewportSystem.modelToWorld({ x: 0, y: 0 });
+    const svgOffset = this.viewportSystem.modelToWorld({ x, y });
     const worldOffset = new Vector3(svgOffset.x - svgOrigin.x, svgOffset.y - svgOrigin.y, 0);
     const currentTarget = this.controller.getTarget(new Vector3());
     const newTarget = currentTarget.add(worldOffset);
@@ -5110,7 +5361,7 @@ class ControlsSystem {
    * @returns Promise that resolves when the pan animation completes
    */
   panTo(x, y, immediate) {
-    const worldCoords = this.viewportSystem.svgToWorld(new Vector2(x, y));
+    const worldCoords = this.viewportSystem.modelToWorld({ x, y });
     return this.controller.moveTo(worldCoords.x, worldCoords.y, 0, !immediate);
   }
   /**
@@ -5208,8 +5459,8 @@ class ControlsSystem {
       this.controller.setBoundary(void 0);
       return;
     }
-    const worldMin = this.viewportSystem.svgToWorld(rect.min);
-    const worldMax = this.viewportSystem.svgToWorld(rect.max);
+    const worldMin = this.viewportSystem.modelToWorld(rect.min);
+    const worldMax = this.viewportSystem.modelToWorld(rect.max);
     const boundary = new Box3(new Vector3(worldMin.x, worldMin.y, 0), new Vector3(worldMax.x, worldMax.y, 0));
     this.controller.setBoundary(boundary);
   }
@@ -5219,9 +5470,9 @@ class ControlsSystem {
    */
   getCameraState() {
     const target = this.controller.getTarget(new Vector3());
-    const center = this.viewportSystem.worldToSvg(target);
+    const center = this.viewportSystem.worldToModel(target);
     const zoom = this.viewportSystem.zoomFactor;
-    const roll = this.interactionsSystem.bearing * RAD2DEG;
+    const roll = this.viewportSystem.bearing * RAD2DEG;
     const pitch = this.controller.polarAngle * RAD2DEG;
     const ptScale = this.viewportSystem.pxToSvgScale;
     return { center, zoom, roll, pitch, ptScale };
@@ -5318,21 +5569,6 @@ function asEventAPI(system) {
     clear: system.clear.bind(system)
   };
 }
-function clientToCanvas(event, domElement, target) {
-  target = target ?? new Vector2();
-  const { left, top } = domElement.getBoundingClientRect();
-  const clientX = "clientX" in event ? event.clientX : event.x;
-  const clientY = "clientY" in event ? event.clientY : event.y;
-  target.set(clientX - left, clientY - top);
-  return target;
-}
-function canvasToNDC(coordinates, canvas, target) {
-  target = target ?? new Vector2();
-  const { width, height } = canvas.getBoundingClientRect();
-  const uv = [coordinates.x / width, coordinates.y / height];
-  target.set(uv[0] * 2 - 1, -uv[1] * 2 + 1);
-  return target;
-}
 class Handler {
   /**
    * @param viewportSystem The viewport system instance
@@ -5347,7 +5583,7 @@ class Handler {
     this.viewportSystem = viewportSystem;
     this.domElement = domElement;
     this.eventManager = eventManager;
-    this.controller = viewportSystem.cameraController;
+    this.controller = viewportSystem.controller;
   }
   /**
    * Per-frame update for this handler.
@@ -5558,13 +5794,15 @@ class PitchHandler extends Handler {
     __publicField(this, "isValid");
     __publicField(this, "firstMove");
     __publicField(this, "lastPoints");
+    __publicField(this, "p0", new Vector2());
+    __publicField(this, "p1", new Vector2());
     __publicField(this, "prevTwoFingerAction");
     __publicField(this, "onPitchStart", (e) => {
       const pointers = e.pointers.sort((a, b) => a.pointerId - b.pointerId);
-      const p0 = clientToCanvas(pointers[0], this.domElement);
-      const p1 = clientToCanvas(pointers[1], this.domElement);
-      this.lastPoints = [p0, p1];
-      if (this.isVertical(p0.clone().sub(p1))) {
+      this.p0.copy(eventToCanvas(pointers[0]));
+      this.p1.copy(eventToCanvas(pointers[1]));
+      this.lastPoints = [new Vector2().copy(this.p0), new Vector2().copy(this.p1)];
+      if (this.isVertical(this.p0.sub(this.p1))) {
         this.isValid = false;
       }
     });
@@ -5579,18 +5817,19 @@ class PitchHandler extends Handler {
       const lastPoints = this.lastPoints;
       if (!lastPoints) return;
       const pointers = e.pointers.sort((a, b) => a.pointerId - b.pointerId);
-      const p0 = clientToCanvas(pointers[0], this.domElement);
-      const p1 = clientToCanvas(pointers[1], this.domElement);
-      const vectorA = p0.clone().sub(lastPoints[0]);
-      const vectorB = p1.clone().sub(lastPoints[1]);
-      this.isValid = this.gestureBeginsVertically(vectorA, vectorB, e.timeStamp);
+      this.p0.copy(eventToCanvas(pointers[0]));
+      this.p1.copy(eventToCanvas(pointers[1]));
+      this.p0.sub(lastPoints[0]);
+      this.p1.sub(lastPoints[1]);
+      this.isValid = this.gestureBeginsVertically(this.p0, this.p1, e.timeStamp);
       if (!this.isValid) return;
       if (this.prevTwoFingerAction === void 0) {
         this.prevTwoFingerAction = this.controller.touches.two;
         this.controller.touches.two = CameraController.ACTION.NONE;
       }
-      this.lastPoints = [p0, p1];
-      const yDeltaAverage = (vectorA.y + vectorB.y) / 2;
+      lastPoints[0].add(this.p0);
+      lastPoints[1].add(this.p1);
+      const yDeltaAverage = (this.p0.y + this.p1.y) / 2;
       const degreesPerPixelMoved = -0.5;
       const deltaAngle = yDeltaAverage * degreesPerPixelMoved * DEG2RAD$1;
       void this.controller.rotatePolarTo(this.controller.polarAngle + deltaAngle, false);
@@ -5635,12 +5874,10 @@ class PitchHandler extends Handler {
   updatePolarAngles() {
     this.controller.minPolarAngle = this.minPitch * DEG2RAD$1;
     this.controller.maxPolarAngle = this.maxPitch * DEG2RAD$1;
-    if (this.controller.polarAngle < this.controller.minPolarAngle) {
+    if (this.controller.polarAngle < this.controller.minPolarAngle)
       void this.controller.rotatePolarTo(this.controller.minPolarAngle, false);
-    }
-    if (this.controller.polarAngle > this.controller.maxPolarAngle) {
+    if (this.controller.polarAngle > this.controller.maxPolarAngle)
       void this.controller.rotatePolarTo(this.controller.maxPolarAngle, false);
-    }
   }
   gestureBeginsVertically(vectorA, vectorB, timeStamp) {
     if (this.isValid !== void 0) return this.isValid;
@@ -5672,35 +5909,36 @@ class RollHandler extends Handler {
     __publicField(this, "rotationThreshold", 25);
     // Threshold tracking (Mapbox-style)
     __publicField(this, "startVector");
-    __publicField(this, "vector");
+    __publicField(this, "vector", new Vector2());
+    __publicField(this, "p0", new Vector2());
+    __publicField(this, "p1", new Vector2());
     __publicField(this, "minDiameter", 0);
     __publicField(this, "prevAngle", 0);
     // Camera and pivot vectors
+    __publicField(this, "pivotNDC", new Vector2());
     __publicField(this, "pivotWorld", new Vector3());
     __publicField(this, "targetWorld", new Vector3());
     __publicField(this, "cameraPosition", new Vector3());
     __publicField(this, "cameraForward", new Vector3());
     __publicField(this, "rotationMatrix", new Matrix4());
     __publicField(this, "onRotateStart", (e) => {
-      console.log("onRotateStart");
       const pointers = e.pointers;
-      const p0 = clientToCanvas(pointers[0], this.domElement);
-      const p1 = clientToCanvas(pointers[1], this.domElement);
-      this.startVector = p0.sub(p1);
+      this.p0.copy(eventToCanvas(pointers[0]));
+      this.p1.copy(eventToCanvas(pointers[1]));
+      this.startVector = new Vector2().copy(this.p0).sub(this.p1);
       this.minDiameter = this.startVector.length();
     });
     __publicField(this, "onRotateEnd", () => {
       this.isRolling = false;
       this.startVector = void 0;
-      this.vector = void 0;
       this.minDiameter = 0;
     });
     __publicField(this, "onRotate", (e) => {
       const pointers = e.pointers;
       if (!this.isRolling) {
-        const p0 = clientToCanvas(pointers[0], this.domElement);
-        const p1 = clientToCanvas(pointers[1], this.domElement);
-        this.vector = p0.sub(p1);
+        this.p0.copy(eventToCanvas(pointers[0]));
+        this.p1.copy(eventToCanvas(pointers[1]));
+        this.vector.copy(this.p0).sub(this.p1);
         if (this.isBelowThreshold(this.vector)) return;
         this.isRolling = true;
         this.prevAngle = e.rotation;
@@ -5708,7 +5946,7 @@ class RollHandler extends Handler {
       const deltaAngle = (e.rotation - this.prevAngle) * -DEG2RAD$1;
       this.prevAngle = e.rotation;
       if (Math.abs(deltaAngle) < 1e-3) return;
-      this.setPivot(e);
+      if (!this.setPivot(e)) return;
       this.rotationMatrix.makeRotationZ(deltaAngle);
       this.cameraPosition.sub(this.pivotWorld).applyMatrix4(this.rotationMatrix).add(this.pivotWorld);
       this.cameraForward.applyMatrix4(this.rotationMatrix);
@@ -5756,13 +5994,12 @@ class RollHandler extends Handler {
     this.eventManager.off("rotateend", this.onRotateEnd);
   }
   setPivot(e) {
-    const pivotScreen = e.center;
-    const pivotNDC = canvasToNDC(pivotScreen, this.domElement);
-    const pivotWorld2D = this.viewportSystem.screenTo("world", pivotNDC);
-    this.pivotWorld.set(pivotWorld2D.x, pivotWorld2D.y, 0);
+    this.viewportSystem.canvasToNDC(e.offsetCenter, this.pivotNDC);
+    if (!this.viewportSystem.ndcToWorld(this.pivotNDC, this.pivotWorld)) return false;
     this.controller.getPosition(this.cameraPosition);
     this.controller.getTarget(this.targetWorld);
     this.cameraForward.copy(this.targetWorld).sub(this.cameraPosition);
+    return true;
   }
   /**
    * Check if rotation is below threshold (Mapbox-style).
@@ -5782,7 +6019,6 @@ class RollHandler extends Handler {
     const startVector = this.startVector;
     if (!startVector) return false;
     const bearingDeltaSinceStart = this.getBearingDelta(vector, startVector);
-    console.log("bearingDeltaSinceStart", vector, startVector);
     return Math.abs(bearingDeltaSinceStart) < threshold;
   }
   /**
@@ -5794,16 +6030,6 @@ class RollHandler extends Handler {
   getBearingDelta(a, b) {
     return a.angleTo(b) * RAD2DEG;
   }
-  /**
-   * Normalize angle to be between -π and π
-   * @param angle Angle in radians
-   * @returns Normalized angle in radians
-   */
-  normalizeAngle(angle) {
-    while (angle > Math.PI) angle -= 2 * Math.PI;
-    while (angle < -Math.PI) angle += 2 * Math.PI;
-    return angle;
-  }
 }
 class ZoomHandler extends Handler {
   reset(enableTransition = true) {
@@ -5838,12 +6064,16 @@ class InteractionsSystem {
     __publicField(this, "handlers");
     __publicField(this, "handlerArray");
     __publicField(this, "canvas");
-    __publicField(this, "mousePointer", new Vector2());
     __publicField(this, "eventManager");
+    __publicField(this, "mousePointerNDC", new Vector2());
+    __publicField(this, "mousePointerWorld", new Vector3());
+    __publicField(this, "mousePointerModel", new Vector2());
+    __publicField(this, "canvasListeners");
     __publicField(this, "dragStart");
     __publicField(this, "dragThreshold", 15);
     __publicField(this, "isDragging", false);
     __publicField(this, "prevBearing", 0);
+    this.renderer = renderer;
     this.events = events;
     this.viewportSystem = viewportSystem;
     this.layerSystem = layerSystem;
@@ -5851,8 +6081,6 @@ class InteractionsSystem {
     this.eventManager = new EventManager(this.canvas, {
       recognizers: [Rotate, [Pan, { event: "pitch", pointers: 2 }, "rotate"]]
     });
-    this.configureCameraControls();
-    this.attachCanvasListeners();
     const handlers = {
       pan: new PanHandler(viewportSystem, this.canvas, this.eventManager),
       zoom: new ZoomHandler(viewportSystem, this.canvas, this.eventManager),
@@ -5861,17 +6089,32 @@ class InteractionsSystem {
     };
     this.handlers = handlers;
     this.handlerArray = Object.values(handlers);
-    this.handlers.pan.enable();
-    this.handlers.zoom.enable();
   }
   /**
-   * Get bearing angle between current camera orientation and true north (in radians).
-   * Angle is in range [0, 2π), going clockwise from north.
+   * Initializes the interactions system and attaches event listeners.
+   * Should be called once as part of renderer initialization.
    */
-  // TODO: Move somewhere else
-  get bearing() {
-    const tau = Math.PI * 2;
-    return MathUtils.euclideanModulo(-this.viewportSystem.cameraController.azimuthAngle, tau);
+  init() {
+    this.attachCanvasListeners();
+    if (!this.renderer.isExternalMode) {
+      const controller = this.viewportSystem.controller;
+      controller.connect(this.canvas);
+      controller.addEventListener("transitionstart", () => {
+        this.events.emit("navigation:change");
+      });
+      this.handlers.pan.enable();
+      this.handlers.zoom.enable();
+    }
+  }
+  /**
+   * Disposes the interactions system.
+   * WARNING: This method is final and cannot be undone. To re-enable interactions, create a new renderer instance.
+   */
+  dispose() {
+    for (const handler of this.handlerArray) handler.disable();
+    this.viewportSystem.controller.disconnect();
+    this.detachCanvasListeners();
+    this.eventManager.destroy();
   }
   /**
    * Update camera position and directions.
@@ -5880,77 +6123,67 @@ class InteractionsSystem {
    * @returns true if re-rendering is needed
    */
   updateControls(delta) {
-    let needsUpdate = this.viewportSystem.cameraController.update(delta);
+    let needsUpdate = this.viewportSystem.controller.update(delta);
     for (const handler of this.handlerArray) {
       if (handler.isEnabled()) {
         needsUpdate = handler.update(delta) || needsUpdate;
       }
     }
-    if (this.bearing !== this.prevBearing) {
-      this.prevBearing = this.bearing;
-      this.events.emit("navigation:roll", this.bearing);
+    if (this.viewportSystem.bearing !== this.prevBearing) {
+      this.prevBearing = this.viewportSystem.bearing;
+      this.events.emit("navigation:roll", this.viewportSystem.bearing);
     }
     return needsUpdate;
   }
-  /** Disconnect the interactions system. */
-  disconnect() {
-    this.viewportSystem.cameraController.disconnect();
-    for (const handler of this.handlerArray) {
-      handler.disable();
-    }
-  }
-  configureCameraControls() {
-    const controller = this.viewportSystem.cameraController;
-    controller.draggingSmoothTime = 0;
-    controller.dollyToCursor = true;
-    controller.mouseButtons = {
-      left: CameraController.ACTION.NONE,
-      middle: CameraController.ACTION.NONE,
-      right: CameraController.ACTION.NONE,
-      wheel: CameraController.ACTION.NONE
-    };
-    controller.touches = {
-      one: CameraController.ACTION.NONE,
-      two: CameraController.ACTION.NONE,
-      three: CameraController.ACTION.NONE
-    };
-    controller.connect(this.canvas);
-    controller.addEventListener("transitionstart", () => {
-      this.events.emit("navigation:change");
-    });
-  }
   attachCanvasListeners() {
-    this.canvas.addEventListener("pointerdown", (event) => {
+    if (this.canvasListeners) return;
+    const pointerdown = (event) => {
       this.isDragging = false;
       this.dragStart = { x: event.offsetX, y: event.offsetY };
-    });
-    this.canvas.addEventListener("pointerup", (event) => {
+    };
+    const pointerup = (event) => {
       if (!this.dragStart) return;
       const dX = event.offsetX - this.dragStart.x;
       const dY = event.offsetY - this.dragStart.y;
       this.dragStart = void 0;
       if (dX * dX + dY * dY > this.dragThreshold) this.isDragging = true;
-    });
+    };
     const mouseEventsMap = {
       mousemove: "pointer:move",
       mouseout: "pointer:out",
       click: "pointer:click"
     };
     const mouseEventKeys = Object.keys(mouseEventsMap);
-    mouseEventKeys.forEach((type) => {
-      this.canvas.addEventListener(type, (event) => {
-        const eventType = mouseEventsMap[type];
-        const isDragging = type === "click" && this.isDragging;
-        const hasListeners = this.events.hasListeners(eventType);
-        if (isDragging || !hasListeners) return;
-        clientToCanvas(event, this.canvas, this.mousePointer);
-        canvasToNDC(this.mousePointer, this.canvas, this.mousePointer);
-        const intersections = this.viewportSystem.getIntersectedObjects(this.mousePointer);
-        const point = this.viewportSystem.screenTo("svg", this.mousePointer);
-        const defs = this.layerSystem.getIntersectedDefs(intersections);
-        this.events.emit(eventType, { event, point, defs });
-      });
-    });
+    const sharedMouseHandler = (type, event) => {
+      const eventType = mouseEventsMap[type];
+      const isDragging = type === "click" && this.isDragging;
+      const hasListeners = this.events.hasListeners(eventType);
+      if (isDragging || !hasListeners) return;
+      const mousePointer = eventToCanvas(event);
+      this.viewportSystem.canvasToNDC(mousePointer, this.mousePointerNDC);
+      if (!this.viewportSystem.ndcToWorld(this.mousePointerNDC, this.mousePointerWorld)) return;
+      const intersections = this.viewportSystem.getIntersectedObjects(this.mousePointerNDC);
+      const point = this.viewportSystem.worldToModel(this.mousePointerWorld, this.mousePointerModel);
+      const defs = this.layerSystem.getIntersectedDefs(intersections);
+      this.events.emit(eventType, { event, point: { x: point.x, y: point.y }, defs });
+    };
+    const mousemove = (event) => sharedMouseHandler("mousemove", event);
+    const mouseout = (event) => sharedMouseHandler("mouseout", event);
+    const click = (event) => sharedMouseHandler("click", event);
+    const canvasListeners = { pointerdown, pointerup, mousemove, mouseout, click };
+    this.canvas.addEventListener("pointerdown", pointerdown);
+    this.canvas.addEventListener("pointerup", pointerup);
+    mouseEventKeys.forEach((type) => this.canvas.addEventListener(type, canvasListeners[type]));
+    this.canvasListeners = canvasListeners;
+  }
+  detachCanvasListeners() {
+    if (!this.canvasListeners) return;
+    this.canvas.removeEventListener("pointerdown", this.canvasListeners.pointerdown);
+    this.canvas.removeEventListener("pointerup", this.canvasListeners.pointerup);
+    this.canvas.removeEventListener("mousemove", this.canvasListeners.mousemove);
+    this.canvas.removeEventListener("mouseout", this.canvasListeners.mouseout);
+    this.canvas.removeEventListener("click", this.canvasListeners.click);
+    this.canvasListeners = void 0;
   }
 }
 class Renderer {
@@ -5960,6 +6193,7 @@ class Renderer {
   constructor(opts) {
     /** Whether to log debug information */
     __publicField(this, "debugLog");
+    //FIXME: Add https://www.npmjs.com/package/debug
     /** {@link HTMLCanvasElement} that this renderer is rendering to */
     __publicField(this, "canvas");
     __publicField(this, "ui");
@@ -5969,13 +6203,17 @@ class Renderer {
     __publicField(this, "viewportSystem");
     __publicField(this, "interactionsSystem");
     __publicField(this, "controlsSystem");
+    __publicField(this, "controlsAPI");
+    __publicField(this, "eventsAPI");
+    __publicField(this, "viewportAPI");
     __publicField(this, "clock");
     __publicField(this, "renderer");
-    __publicField(this, "viewport");
+    __publicField(this, "visibleRectValue");
+    __publicField(this, "memoryInfoExtension", null);
+    __publicField(this, "memoryInfo");
+    __publicField(this, "initialized", false);
+    __publicField(this, "disposed", false);
     __publicField(this, "needsRedraw", true);
-    __publicField(this, "memoryInfoExtension");
-    __publicField(this, "memoryInfo", "");
-    var _a2, _b;
     const { canvas, gl, debugLog = false, ui } = opts;
     this.canvas = canvas;
     this.debugLog = debugLog;
@@ -5990,41 +6228,84 @@ class Renderer {
     this.renderer = new WebGLRenderer(rendererOptions);
     this.renderer.setSize(this.canvas.clientWidth, this.canvas.clientHeight, false);
     this.renderer.setPixelRatio(window.devicePixelRatio);
+    this.renderer.autoClear = !this.isExternalMode;
     this.eventSystem = new EventSystem();
     this.viewportSystem = new ViewportSystem(this, this.eventSystem);
     this.layerSystem = new LayerSystem(this);
     this.interactionsSystem = new InteractionsSystem(this, this.eventSystem, this.viewportSystem, this.layerSystem);
     this.controlsSystem = new ControlsSystem(this, this.viewportSystem, this.interactionsSystem);
-    this.memoryInfoExtension = this.renderer.getContext().getExtension("GMAN_webgl_memory");
-    this.canvas.addEventListener("webglcontextlost", (e) => this.onContextLost(e), false);
-    this.canvas.addEventListener("webglcontextrestored", (e) => this.onContextRestored(e), false);
-    void ((_b = (_a2 = this.ui) == null ? void 0 : _a2.stats) == null ? void 0 : _b.init(this.renderer.getContext()));
+    this.initContext(this.renderer.getContext());
+    BatchedMesh.useMultiDraw = this.renderer.extensions.has("WEBGL_multi_draw");
   }
   /**
    * {@link ControlsAPI} instance for controlling the viewport
    */
   get controls() {
-    return asControlsAPI(this.controlsSystem);
+    if (this.controlsAPI) return this.controlsAPI;
+    const api = asControlsAPI(this.controlsSystem);
+    const guard = (name) => this.assertInitialized(`controls.${name}`) && this.assertNotDisposed(`controls.${name}`) && this.assertNotExternalMode(`controls.${name}`);
+    this.controlsAPI = {
+      handlers: api.handlers,
+      configure: api.configure,
+      zoomBy: guardFn(guard, api.zoomBy, Promise.resolve()),
+      zoomTo: guardFn(guard, api.zoomTo, Promise.resolve()),
+      panBy: guardFn(guard, api.panBy, Promise.resolve()),
+      panTo: guardFn(guard, api.panTo, Promise.resolve()),
+      rollBy: guardFn(guard, api.rollBy, Promise.resolve()),
+      rollTo: guardFn(guard, api.rollTo, Promise.resolve()),
+      pitchBy: guardFn(guard, api.pitchBy, Promise.resolve()),
+      pitchTo: guardFn(guard, api.pitchTo, Promise.resolve()),
+      resetCamera: guardFn(guard, api.resetCamera, Promise.resolve()),
+      setCameraBounds: guardFn(guard, api.setCameraBounds),
+      getCameraState: guardFn(guard, api.getCameraState, {
+        center: { x: 0, y: 0 },
+        roll: 0,
+        pitch: 0,
+        zoom: 1,
+        ptScale: 1
+      })
+    };
+    return this.controlsAPI;
   }
   /**
    * {@link EventsAPI} instance for subscribing to internal events
    */
   get events() {
-    return asEventAPI(this.eventSystem);
+    if (this.eventsAPI) return this.eventsAPI;
+    this.eventsAPI = asEventAPI(this.eventSystem);
+    return this.eventsAPI;
+  }
+  /**
+   * {@link ViewportAPI} instance for view transforms and external transforms.
+   */
+  get viewport() {
+    if (this.viewportAPI) return this.viewportAPI;
+    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}`);
+    this.viewportAPI = {
+      canvasToSvg: guardFn(guard, api.canvasToSvg, { x: 0, y: 0 }),
+      setStaticTransform: guardFn(guardExternal, api.setStaticTransform),
+      setDynamicTransform: guardFn(guardExternal, api.setDynamicTransform)
+    };
+    return this.viewportAPI;
   }
   /**
    * Optional sub-rectangle of the viewport that is used for positioning scene's viewbox
    */
   get visibleRect() {
-    return this.viewport;
+    return this.visibleRectValue;
   }
   /**
    * Optional sub-rectangle of the viewport that is used for positioning scene's viewbox
    */
   set visibleRect(rect) {
-    this.viewport = rect;
-    this.viewportSystem.updateViewport();
-    this.update();
+    if (!this.assertNotExternalMode("visibleRect")) return;
+    this.visibleRectValue = rect;
+    if (this.initialized && !this.disposed) {
+      this.viewportSystem.updateViewport();
+      this.update();
+    }
   }
   /**
    * Underlying {@link WebGLRenderer} instance
@@ -6040,64 +6321,73 @@ class Renderer {
     return [this.canvas.width, this.canvas.height];
   }
   /**
-   * Sets the renderer to external mode, where parts of rendering process are not managed by the renderer (e.g. Mapbox GL JS).
-   * @param staticTransformMatrix static transform matrix to apply to the scene
+   * Returns true if the renderer is in external mode, meaning that webgl context is managed outside of the renderer
+   * (for example, when using Mapbox GL JS as a host context). In this mode renderer will not clear the canvas before
+   * rendering, and will not automatically compute scene and camera transformations. Clients are responsible for setting
+   * the matrices manually by using {@link Renderer.viewport} methods.
    */
-  // TODO: Move somewhere
-  setExternalTransform(staticTransformMatrix) {
-    this.renderer.autoClear = false;
-    this.interactionsSystem.disconnect();
-    this.viewportSystem.setExternalTransform(staticTransformMatrix);
+  get isExternalMode() {
+    return this.gl !== void 0;
   }
   /**
-   * Update scene matrix from dynamic transform matrix.
-   * @param dynamicTransformMatrix dynamic transform matrix (changes every frame)
+   * Returns true if the renderer is initialized, meaning that the viewport and scene have been set up.
    */
-  updateExternalCamera(dynamicTransformMatrix) {
-    this.viewportSystem.updateExternalCamera(dynamicTransformMatrix);
+  get isInitialized() {
+    return this.initialized;
   }
   /**
-   * Initialize the scene and start the rendering loop
+   * Returns true if the renderer is disposed, meaning that all WebGL resources have been released.
+   */
+  get isDisposed() {
+    return this.disposed;
+  }
+  /**
+   * Initializes viewport and scene with the given scene definition.
+   * Should be called once on startup. Repeated calls will produce console warnings.
    * @param sceneDef {@link SceneDef} to render
-   * @param startLoop whether to start the rendering loop
    */
-  start(sceneDef, startLoop = true) {
-    this.clock.start();
+  init(sceneDef) {
+    if (!this.assertNotDisposed("init")) return;
+    if (!this.assertNotInitialized("init")) return;
     this.viewportSystem.initViewport(sceneDef);
+    this.interactionsSystem.init();
     this.viewportSystem.scene.add(this.layerSystem.buildScene(sceneDef));
-    if (startLoop) this.renderer.setAnimationLoop(() => this.render());
+    this.initialized = true;
+  }
+  /**
+   * Start the rendering loop
+   */
+  start() {
+    if (!this.assertNotDisposed("start")) return;
+    if (!this.assertInitialized("start")) return;
+    if (this.clock.running) return;
+    this.clock.start();
+    this.renderer.setAnimationLoop(() => this.render());
   }
   /**
    * Update the given defs to make them reflect the current state
    * @param defs {@link RenderableDef} array to update
    */
   update(...defs) {
+    if (!this.assertNotDisposed("update")) return;
+    if (!this.assertInitialized("update")) return;
     this.layerSystem.updateDefs(defs);
     this.needsRedraw = true;
   }
   /**
-   * Converts coordinates from canvas space to SVG space.
-   * @param point point in canvas space (relative to the canvas's top left corner), in css pixels
-   * @returns point in SVG space
-   */
-  screenToSvg(point) {
-    const vector2 = new Vector2(point.x, point.y);
-    canvasToNDC(vector2, this.canvas, vector2);
-    return this.viewportSystem.screenTo("svg", vector2);
-  }
-  /**
-   * Main rendering loop
+   * Render a single frame
    */
   render() {
     var _a2, _b, _c, _d, _e, _f;
+    if (!this.assertNotDisposed("render")) return;
+    if (!this.assertInitialized("render")) return;
     (_b = (_a2 = this.ui) == null ? void 0 : _a2.stats) == null ? void 0 : _b.begin();
-    if (this.gl !== void 0) this.renderer.resetState();
+    if (this.isExternalMode) this.renderer.resetState();
     else this.resizeCanvasToDisplaySize();
     this.viewportSystem.updatePtScale();
-    const delta = this.clock.getDelta();
     const hasDefsUpdated = this.layerSystem.processPendingUpdates();
-    const hasControlsUpdated = this.interactionsSystem.updateControls(delta);
-    const needsRedraw = this.needsRedraw || hasControlsUpdated || hasDefsUpdated || this.ui;
+    const hasControlsUpdated = this.interactionsSystem.updateControls(this.clock.getDelta());
+    const needsRedraw = this.needsRedraw || hasControlsUpdated || hasDefsUpdated || this.isExternalMode || this.ui;
     if (needsRedraw) {
       this.renderer.render(this.viewportSystem.scene, this.viewportSystem.camera);
       this.needsRedraw = false;
@@ -6106,6 +6396,30 @@ class Renderer {
     (_f = (_e = this.ui) == null ? void 0 : _e.stats) == null ? void 0 : _f.update();
     this.updateMemoryInfo();
   }
+  /**
+   * Stop the rendering loop
+   */
+  stop() {
+    this.renderer.setAnimationLoop(null);
+    this.clock.stop();
+  }
+  /**
+   * Dispose all WebGL resources. This calls {@link Renderer.stop} internally.
+   * WARNING: This method is final and cannot be undone. Attempting to use the renderer after calling this method
+   * will result in a console warning and no-op methods. If you need to re-initialize the renderer, create a new instance.
+   */
+  dispose() {
+    if (this.disposed) return;
+    this.stop();
+    this.interactionsSystem.dispose();
+    this.layerSystem.disposeScene();
+    this.viewportSystem.scene.clear();
+    this.renderer.clear();
+    this.renderer.info.reset();
+    this.renderer.dispose();
+    this.updateMemoryInfo();
+    this.disposed = true;
+  }
   // https://webgl2fundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
   resizeCanvasToDisplaySize() {
     const dpr = window.devicePixelRatio;
@@ -6121,38 +6435,100 @@ class Renderer {
     }
   }
   updateMemoryInfo() {
-    var _a2;
+    var _a2, _b, _c, _d;
     if (this.memoryInfoExtension && ((_a2 = this.ui) == null ? void 0 : _a2.memoryInfoPanel)) {
       const memoryInfo = this.memoryInfoExtension.getMemoryInfo();
-      const memoryInfoContent = JSON.stringify(memoryInfo.memory, null, 2);
-      const elapsedTime = this.clock.getElapsedTime() * 1e3;
-      if (memoryInfoContent !== this.memoryInfo) {
+      memoryInfo.resources["drawCalls"] = this.renderer.info.render.calls;
+      if (memoryInfo.memory["texture"] !== ((_b = this.memoryInfo) == null ? void 0 : _b.memory["texture"]) || memoryInfo.memory["buffer"] !== ((_c = this.memoryInfo) == null ? void 0 : _c.memory["buffer"]) || memoryInfo.memory["renderbuffer"] !== ((_d = this.memoryInfo) == null ? void 0 : _d.memory["renderbuffer"])) {
+        const elapsedTime = this.clock.getElapsedTime() * 1e3;
         const logMarker = `memoryInfo [${elapsedTime.toFixed(2)}ms since start]`;
         if (this.debugLog) console.log(logMarker, memoryInfo);
-        this.memoryInfo = memoryInfoContent;
+        this.memoryInfo = memoryInfo;
+        this.ui.memoryInfoPanel.textContent = JSON.stringify(memoryInfo, null, 2);
       }
-      this.ui.memoryInfoPanel.textContent = JSON.stringify(memoryInfo, null, 2);
     }
   }
   onContextLost(event) {
+    var _a2, _b;
     event.preventDefault();
     console.log("webglcontextlost event", event);
-    this.renderer.setAnimationLoop(null);
-    this.clock.stop();
-    if (this.ui) setTimeout(() => this.renderer.forceContextRestore(), 0);
+    const stats = (_a2 = this.ui) == null ? void 0 : _a2.stats;
+    const context = this.renderer.getContext();
+    if (stats && "deleteQuery" in context) {
+      const gpuQueries = stats.gpuQueries;
+      for (const queryInfo of gpuQueries) {
+        this.renderer.getContext().deleteQuery(queryInfo.query);
+      }
+      stats.gpuQueries = [];
+      if (stats.gpuPanel) {
+        stats.dom.removeChild((_b = stats.gpuPanel) == null ? void 0 : _b.canvas);
+        stats.gpuPanel = null;
+        stats._panelId--;
+      }
+    }
+    this.stop();
   }
   onContextRestored(event) {
     event.preventDefault();
     console.log("webglcontextrestored event", event);
-    this.renderer.setAnimationLoop(() => this.render());
-    this.clock.start();
+    this.initContext(this.renderer.getContext());
+    this.needsRedraw = true;
+    this.start();
+  }
+  initContext(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));
+  }
+  assertNotDisposed(funcName) {
+    if (this.disposed) {
+      console.warn(`[Renderer.${funcName}]: Renderer is used after being disposed. Please create a new instance.`);
+      return false;
+    }
+    return true;
+  }
+  assertInitialized(funcName) {
+    if (!this.initialized) {
+      console.warn(`[Renderer.${funcName}]: Renderer is not initialized. Please call init() before using it.`);
+      return false;
+    }
+    return true;
+  }
+  assertNotInitialized(funcName) {
+    if (this.initialized) {
+      console.warn(`[Renderer.${funcName}]: Renderer is already initialized. Please call init() only once.`);
+      return false;
+    }
+    return true;
   }
+  assertNotExternalMode(funcName) {
+    if (this.isExternalMode) {
+      console.warn(`[Renderer.${funcName}]: This operation is not supported in external mode.`);
+      return false;
+    }
+    return true;
+  }
+  assertExternalMode(funcName) {
+    if (!this.isExternalMode) {
+      console.warn(`[Renderer.${funcName}]: This operation is only supported in external mode.`);
+      return false;
+    }
+    return true;
+  }
+}
+function guardFn(guard, fn, ...fallback) {
+  return (...args) => {
+    const name = fn.name.split(" ").at(-1);
+    if (!guard(name)) return fallback[0];
+    return fn(...args);
+  };
 }
 export {
   Polygon,
   Rect,
   Renderer,
   createVector2,
+  createVector3,
   isImageDef,
   isImageLayer,
   isLayerDef,