@vunk/plus 1.6.8 → 1.6.10

package/components/init.mjs

@@ -1,10 +1,9 @@
-import { E as ExtensionType, U as UPDATE_PRIORITY, T as Ticker, k as UniformGroup, c as BindGroup, w as warn, H as TexturePool, t as Texture, P as Point, a3 as Geometry, R as RendererType, F as Bounds, M as Matrix, a9 as ViewContainer, aa as GraphicsContext, a0 as deprecation, a1 as v8_0_0, b as Buffer, B as BufferUsage, Z as Color, ab as TextStyle, ac as generateTextStyleKey, y as BigPool, ad as BatchableGraphics, ae as getAdjustedBlendModeBlend, K as getAttributeInfoFromFormat, af as ViewableBuffer, s as Shader, u as GlProgram, G as GpuProgram, ag as TextureStyle, m as compileHighShaderGpuProgram, p as roundPixelsBit, a4 as compileHighShaderGlProgram, a7 as roundPixelsBitGl, q as getMaxTexturesPerBatch, n as colorBit, o as generateTextureBatchBit, a5 as colorBitGl, a6 as generateTextureBatchBitGl, a8 as getBatchSamplersUniformGroup, ah as BitmapFontManager, ai as getBitmapTextLayout, aj as Cache, ak as updateQuadBounds, D as DOMAdapter, l as CanvasPool, O as Rectangle, al as CanvasTextMetrics, am as nextPow2, an as fontStringFromTextStyle, ao as getCanvasFillStyle, e as extensions, ap as GraphicsContextSystem } from './index2.mjs';
+import { E as ExtensionType, U as UPDATE_PRIORITY, T as Ticker, a2 as Geometry, k as UniformGroup, c as BindGroup, z as TexturePool, s as Texture, M as Matrix, R as RendererType, w as warn, F as Bounds, a9 as ViewContainer, aa as GraphicsContext, $ as deprecation, a0 as v8_0_0, b as Buffer, B as BufferUsage, D as DOMAdapter, ab as nextPow2, N as Rectangle, ac as CanvasTextMetrics, l as CanvasPool, ad as fontStringFromTextStyle, Y as Color, ae as getCanvasFillStyle, af as TextStyle, x as BigPool, ag as BatchableGraphics, ah as getAdjustedBlendModeBlend, J as getAttributeInfoFromFormat, ai as ViewableBuffer, q as Shader, t as GlProgram, G as GpuProgram, aj as TextureStyle, m as compileHighShaderGpuProgram, a4 as compileHighShaderGlProgram, p as roundPixelsBit, a7 as roundPixelsBitGl, n as colorBit, o as generateTextureBatchBit, a5 as colorBitGl, a6 as generateTextureBatchBitGl, a8 as getBatchSamplersUniformGroup, ak as BitmapFontManager, al as getBitmapTextLayout, am as Cache, an as updateQuadBounds, e as extensions, ao as GraphicsContextSystem } from './index2.mjs';
 import { S as State, c as color32BitToUniform, a as localUniformBit, b as localUniformBitGl, B as BatchableSprite } from './colorToUniform.mjs';
 
 class ResizePlugin {
   /**
    * Initialize the plugin with scope of application instance
-   * @static
    * @private
    * @param {object} [options] - See application options
    */
@@ -12,13 +11,6 @@ class ResizePlugin {
     Object.defineProperty(
       this,
       "resizeTo",
-      /**
-       * The HTML element or window to automatically resize the
-       * renderer's view element to match width and height.
-       * @member {Window|HTMLElement}
-       * @name resizeTo
-       * @memberof app.Application#
-       */
       {
         set(dom) {
           globalThis.removeEventListener("resize", this.queueResize);
@@ -70,7 +62,6 @@ class ResizePlugin {
   }
   /**
    * Clean up the ticker, scoped to application
-   * @static
    * @private
    */
   static destroy() {
@@ -88,7 +79,6 @@ ResizePlugin.extension = ExtensionType.Application;
 class TickerPlugin {
   /**
    * Initialize the plugin with scope of application instance
-   * @static
    * @private
    * @param {object} [options] - See application options
    */
@@ -129,7 +119,6 @@ class TickerPlugin {
   }
   /**
    * Clean up the ticker, scoped to application.
-   * @static
    * @private
    */
   static destroy() {
@@ -212,6 +201,55 @@ const quadGeometry = new Geometry({
   },
   indexBuffer: new Uint32Array([0, 1, 2, 0, 2, 3])
 });
+class FilterData {
+  constructor() {
+    /**
+     * Indicates whether the filter should be skipped.
+     * @type {boolean}
+     */
+    this.skip = false;
+    /**
+     * The texture to which the filter is applied.
+     * @type {Texture}
+     */
+    this.inputTexture = null;
+    /**
+     * The back texture used for blending, if required.
+     * @type {Texture | null}
+     */
+    this.backTexture = null;
+    /**
+     * The list of filters to be applied.
+     * @type {Filter[]}
+     */
+    this.filters = null;
+    /**
+     * The bounds of the filter area.
+     * @type {Bounds}
+     */
+    this.bounds = new Bounds();
+    /**
+     * The container to which the filter is applied.
+     * @type {Container}
+     */
+    this.container = null;
+    /**
+     * Indicates whether blending is required for the filter.
+     * @type {boolean}
+     */
+    this.blendRequired = false;
+    /**
+     * The render surface where the output of the filter is rendered.
+     * @type {RenderSurface}
+     */
+    this.outputRenderSurface = null;
+    /**
+     * The global frame of the filter area.
+     * @type {{ x: number, y: number, width: number, height: number }}
+     */
+    this.globalFrame = { x: 0, y: 0, width: 0, height: 0 };
+  }
+}
 class FilterSystem {
   constructor(renderer) {
     this._filterStackIndex = 0;
@@ -234,147 +272,143 @@ class FilterSystem {
   get activeBackTexture() {
     return this._activeFilterData?.backTexture;
   }
+  /**
+   * Pushes a filter instruction onto the filter stack.
+   * @param instruction - The instruction containing the filter effect and container.
+   * @internal
+   */
   push(instruction) {
     const renderer = this.renderer;
     const filters = instruction.filterEffect.filters;
-    if (!this._filterStack[this._filterStackIndex]) {
-      this._filterStack[this._filterStackIndex] = this._getFilterData();
-    }
-    const filterData = this._filterStack[this._filterStackIndex];
-    this._filterStackIndex++;
+    const filterData = this._pushFilterData();
+    filterData.skip = false;
+    filterData.filters = filters;
+    filterData.container = instruction.container;
+    filterData.outputRenderSurface = renderer.renderTarget.renderSurface;
+    const colorTextureSource = renderer.renderTarget.renderTarget.colorTexture.source;
+    const rootResolution = colorTextureSource.resolution;
+    const rootAntialias = colorTextureSource.antialias;
     if (filters.length === 0) {
       filterData.skip = true;
       return;
     }
     const bounds = filterData.bounds;
-    if (instruction.renderables) {
-      getGlobalRenderableBounds(instruction.renderables, bounds);
-    } else if (instruction.filterEffect.filterArea) {
-      bounds.clear();
-      bounds.addRect(instruction.filterEffect.filterArea);
-      bounds.applyMatrix(instruction.container.worldTransform);
-    } else {
-      instruction.container.getFastGlobalBounds(true, bounds);
-    }
-    if (instruction.container) {
-      const renderGroup = instruction.container.renderGroup || instruction.container.parentRenderGroup;
-      const filterFrameTransform = renderGroup.cacheToLocalTransform;
-      if (filterFrameTransform) {
-        bounds.applyMatrix(filterFrameTransform);
-      }
-    }
-    const colorTextureSource = renderer.renderTarget.renderTarget.colorTexture.source;
-    let resolution = Infinity;
-    let padding = 0;
-    let antialias = true;
-    let blendRequired = false;
-    let enabled = false;
-    let clipToViewport = true;
-    for (let i = 0; i < filters.length; i++) {
-      const filter = filters[i];
-      resolution = Math.min(resolution, filter.resolution === "inherit" ? colorTextureSource._resolution : filter.resolution);
-      padding += filter.padding;
-      if (filter.antialias === "off") {
-        antialias = false;
-      } else if (filter.antialias === "inherit") {
-        antialias && (antialias = colorTextureSource.antialias);
-      }
-      if (!filter.clipToViewport) {
-        clipToViewport = false;
-      }
-      const isCompatible = !!(filter.compatibleRenderers & renderer.type);
-      if (!isCompatible) {
-        enabled = false;
-        break;
-      }
-      if (filter.blendRequired && !(renderer.backBuffer?.useBackBuffer ?? true)) {
-        warn("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options.");
-        enabled = false;
-        break;
-      }
-      enabled = filter.enabled || enabled;
-      blendRequired || (blendRequired = filter.blendRequired);
-    }
-    if (!enabled) {
-      filterData.skip = true;
+    this._calculateFilterArea(instruction, bounds);
+    this._calculateFilterBounds(filterData, renderer.renderTarget.rootViewPort, rootAntialias, rootResolution, 1);
+    if (filterData.skip) {
       return;
     }
-    if (clipToViewport) {
-      const viewPort = renderer.renderTarget.rootViewPort;
-      const rootResolution = renderer.renderTarget.renderTarget.resolution;
-      bounds.fitBounds(0, viewPort.width / rootResolution, 0, viewPort.height / rootResolution);
+    const previousFilterData = this._getPreviousFilterData();
+    const globalResolution = this._findFilterResolution(rootResolution);
+    let offsetX = 0;
+    let offsetY = 0;
+    if (previousFilterData) {
+      offsetX = previousFilterData.bounds.minX;
+      offsetY = previousFilterData.bounds.minY;
     }
-    bounds.scale(resolution).ceil().scale(1 / resolution).pad(padding | 0);
-    if (!bounds.isPositive) {
+    this._calculateGlobalFrame(
+      filterData,
+      offsetX,
+      offsetY,
+      globalResolution,
+      colorTextureSource.width,
+      colorTextureSource.height
+    );
+    this._setupFilterTextures(filterData, bounds, renderer, previousFilterData);
+  }
+  /**
+   * Applies filters to a texture.
+   *
+   * This method takes a texture and a list of filters, applies the filters to the texture,
+   * and returns the resulting texture.
+   * @param {object} params - The parameters for applying filters.
+   * @param {Texture} params.texture - The texture to apply filters to.
+   * @param {Filter[]} params.filters - The filters to apply.
+   * @returns {Texture} The resulting texture after all filters have been applied.
+   * @example
+   *
+   * ```ts
+   * // Create a texture and a list of filters
+   * const texture = new Texture(...);
+   * const filters = [new BlurFilter(), new ColorMatrixFilter()];
+   *
+   * // Apply the filters to the texture
+   * const resultTexture = filterSystem.applyToTexture({ texture, filters });
+   *
+   * // Use the resulting texture
+   * sprite.texture = resultTexture;
+   * ```
+   *
+   * Key Points:
+   * 1. padding is not currently supported here - so clipping may occur with filters that use padding.
+   * 2. If all filters are disabled or skipped, the original texture is returned.
+   */
+  generateFilteredTexture({ texture, filters }) {
+    const filterData = this._pushFilterData();
+    this._activeFilterData = filterData;
+    filterData.skip = false;
+    filterData.filters = filters;
+    const colorTextureSource = texture.source;
+    const rootResolution = colorTextureSource.resolution;
+    const rootAntialias = colorTextureSource.antialias;
+    if (filters.length === 0) {
       filterData.skip = true;
-      return;
+      return texture;
     }
-    filterData.skip = false;
-    filterData.bounds = bounds;
-    filterData.blendRequired = blendRequired;
-    filterData.container = instruction.container;
-    filterData.filterEffect = instruction.filterEffect;
-    filterData.previousRenderSurface = renderer.renderTarget.renderSurface;
-    filterData.inputTexture = TexturePool.getOptimalTexture(
+    const bounds = filterData.bounds;
+    bounds.addRect(texture.frame);
+    this._calculateFilterBounds(filterData, bounds.rectangle, rootAntialias, rootResolution, 0);
+    if (filterData.skip) {
+      return texture;
+    }
+    const globalResolution = rootResolution;
+    const offsetX = 0;
+    const offsetY = 0;
+    this._calculateGlobalFrame(
+      filterData,
+      offsetX,
+      offsetY,
+      globalResolution,
+      colorTextureSource.width,
+      colorTextureSource.height
+    );
+    filterData.outputRenderSurface = TexturePool.getOptimalTexture(
       bounds.width,
       bounds.height,
-      resolution,
-      antialias
+      filterData.resolution,
+      filterData.antialias
     );
-    renderer.renderTarget.bind(filterData.inputTexture, true);
-    renderer.globalUniforms.push({
-      offset: bounds
-    });
+    filterData.backTexture = Texture.EMPTY;
+    filterData.inputTexture = texture;
+    const renderer = this.renderer;
+    renderer.renderTarget.finishRenderPass();
+    this._applyFiltersToTexture(filterData, true);
+    const outputTexture = filterData.outputRenderSurface;
+    outputTexture.source.alphaMode = "premultiplied-alpha";
+    return outputTexture;
   }
+  /** @internal */
   pop() {
     const renderer = this.renderer;
-    this._filterStackIndex--;
-    const filterData = this._filterStack[this._filterStackIndex];
+    const filterData = this._popFilterData();
     if (filterData.skip) {
       return;
     }
-    this._activeFilterData = filterData;
-    const inputTexture = filterData.inputTexture;
-    const bounds = filterData.bounds;
-    let backTexture = Texture.EMPTY;
-    renderer.renderTarget.finishRenderPass();
-    if (filterData.blendRequired) {
-      const previousBounds = this._filterStackIndex > 0 ? this._filterStack[this._filterStackIndex - 1].bounds : null;
-      const renderTarget = renderer.renderTarget.getRenderTarget(filterData.previousRenderSurface);
-      backTexture = this.getBackTexture(renderTarget, bounds, previousBounds);
-    }
-    filterData.backTexture = backTexture;
-    const filters = filterData.filterEffect.filters;
-    this._globalFilterBindGroup.setResource(inputTexture.source.style, 2);
-    this._globalFilterBindGroup.setResource(backTexture.source, 3);
     renderer.globalUniforms.pop();
-    if (filters.length === 1) {
-      filters[0].apply(this, inputTexture, filterData.previousRenderSurface, false);
-      TexturePool.returnTexture(inputTexture);
-    } else {
-      let flip = filterData.inputTexture;
-      let flop = TexturePool.getOptimalTexture(
-        bounds.width,
-        bounds.height,
-        flip.source._resolution,
-        false
-      );
-      let i = 0;
-      for (i = 0; i < filters.length - 1; ++i) {
-        const filter = filters[i];
-        filter.apply(this, flip, flop, true);
-        const t = flip;
-        flip = flop;
-        flop = t;
-      }
-      filters[i].apply(this, flip, filterData.previousRenderSurface, false);
-      TexturePool.returnTexture(flip);
-      TexturePool.returnTexture(flop);
-    }
+    renderer.renderTarget.finishRenderPass();
+    this._activeFilterData = filterData;
+    this._applyFiltersToTexture(filterData, false);
     if (filterData.blendRequired) {
-      TexturePool.returnTexture(backTexture);
+      TexturePool.returnTexture(filterData.backTexture);
     }
+    TexturePool.returnTexture(filterData.inputTexture);
   }
+  /**
+   * Copies the last render surface to a texture.
+   * @param lastRenderSurface - The last render surface to copy from.
+   * @param bounds - The bounds of the area to copy.
+   * @param previousBounds - The previous bounds to use for offsetting the copy.
+   */
   getBackTexture(lastRenderSurface, bounds, previousBounds) {
     const backgroundResolution = lastRenderSurface.colorTexture.source._resolution;
     const backTexture = TexturePool.getOptimalTexture(
@@ -402,23 +436,144 @@ class FilterSystem {
     );
     return backTexture;
   }
+  /**
+   * Applies a filter to a texture.
+   * @param filter - The filter to apply.
+   * @param input - The input texture.
+   * @param output - The output render surface.
+   * @param clear - Whether to clear the output surface before applying the filter.
+   */
   applyFilter(filter, input, output, clear) {
     const renderer = this.renderer;
-    const filterData = this._filterStack[this._filterStackIndex];
-    const bounds = filterData.bounds;
-    const offset = Point.shared;
-    const previousRenderSurface = filterData.previousRenderSurface;
-    const isFinalTarget = previousRenderSurface === output;
-    let resolution = this.renderer.renderTarget.rootRenderTarget.colorTexture.source._resolution;
-    let currentIndex = this._filterStackIndex - 1;
-    while (currentIndex > 0 && this._filterStack[currentIndex].skip) {
-      --currentIndex;
+    const filterData = this._activeFilterData;
+    const outputRenderSurface = filterData.outputRenderSurface;
+    const isFinalTarget = outputRenderSurface === output;
+    const rootResolution = renderer.renderTarget.rootRenderTarget.colorTexture.source._resolution;
+    const resolution = this._findFilterResolution(rootResolution);
+    let offsetX = 0;
+    let offsetY = 0;
+    if (isFinalTarget) {
+      const offset = this._findPreviousFilterOffset();
+      offsetX = offset.x;
+      offsetY = offset.y;
+    }
+    this._updateFilterUniforms(input, output, filterData, offsetX, offsetY, resolution, isFinalTarget, clear);
+    this._setupBindGroupsAndRender(filter, input, renderer);
+  }
+  /**
+   * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
+   *
+   * Use `outputMatrix * vTextureCoord` in the shader.
+   * @param outputMatrix - The matrix to output to.
+   * @param {Sprite} sprite - The sprite to map to.
+   * @returns The mapped matrix.
+   */
+  calculateSpriteMatrix(outputMatrix, sprite) {
+    const data = this._activeFilterData;
+    const mappedMatrix = outputMatrix.set(
+      data.inputTexture._source.width,
+      0,
+      0,
+      data.inputTexture._source.height,
+      data.bounds.minX,
+      data.bounds.minY
+    );
+    const worldTransform = sprite.worldTransform.copyTo(Matrix.shared);
+    const renderGroup = sprite.renderGroup || sprite.parentRenderGroup;
+    if (renderGroup && renderGroup.cacheToLocalTransform) {
+      worldTransform.prepend(renderGroup.cacheToLocalTransform);
+    }
+    worldTransform.invert();
+    mappedMatrix.prepend(worldTransform);
+    mappedMatrix.scale(
+      1 / sprite.texture.frame.width,
+      1 / sprite.texture.frame.height
+    );
+    mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y);
+    return mappedMatrix;
+  }
+  destroy() {
+  }
+  /**
+   * Sets up the bind groups and renders the filter.
+   * @param filter - The filter to apply
+   * @param input - The input texture
+   * @param renderer - The renderer instance
+   */
+  _setupBindGroupsAndRender(filter, input, renderer) {
+    if (renderer.renderPipes.uniformBatch) {
+      const batchUniforms = renderer.renderPipes.uniformBatch.getUboResource(this._filterGlobalUniforms);
+      this._globalFilterBindGroup.setResource(batchUniforms, 0);
+    } else {
+      this._globalFilterBindGroup.setResource(this._filterGlobalUniforms, 0);
+    }
+    this._globalFilterBindGroup.setResource(input.source, 1);
+    this._globalFilterBindGroup.setResource(input.source.style, 2);
+    filter.groups[0] = this._globalFilterBindGroup;
+    renderer.encoder.draw({
+      geometry: quadGeometry,
+      shader: filter,
+      state: filter._state,
+      topology: "triangle-list"
+    });
+    if (renderer.type === RendererType.WEBGL) {
+      renderer.renderTarget.finishRenderPass();
     }
-    if (currentIndex > 0) {
-      resolution = this._filterStack[currentIndex].inputTexture.source._resolution;
+  }
+  /**
+   * Sets up the filter textures including input texture and back texture if needed.
+   * @param filterData - The filter data to update
+   * @param bounds - The bounds for the texture
+   * @param renderer - The renderer instance
+   * @param previousFilterData - The previous filter data for back texture calculation
+   */
+  _setupFilterTextures(filterData, bounds, renderer, previousFilterData) {
+    filterData.backTexture = Texture.EMPTY;
+    if (filterData.blendRequired) {
+      renderer.renderTarget.finishRenderPass();
+      const renderTarget = renderer.renderTarget.getRenderTarget(filterData.outputRenderSurface);
+      filterData.backTexture = this.getBackTexture(renderTarget, bounds, previousFilterData?.bounds);
     }
-    const filterUniforms = this._filterGlobalUniforms;
-    const uniforms = filterUniforms.uniforms;
+    filterData.inputTexture = TexturePool.getOptimalTexture(
+      bounds.width,
+      bounds.height,
+      filterData.resolution,
+      filterData.antialias
+    );
+    renderer.renderTarget.bind(filterData.inputTexture, true);
+    renderer.globalUniforms.push({
+      offset: bounds
+    });
+  }
+  /**
+   * Calculates and sets the global frame for the filter.
+   * @param filterData - The filter data to update
+   * @param offsetX - The X offset
+   * @param offsetY - The Y offset
+   * @param globalResolution - The global resolution
+   * @param sourceWidth - The source texture width
+   * @param sourceHeight - The source texture height
+   */
+  _calculateGlobalFrame(filterData, offsetX, offsetY, globalResolution, sourceWidth, sourceHeight) {
+    const globalFrame = filterData.globalFrame;
+    globalFrame.x = offsetX * globalResolution;
+    globalFrame.y = offsetY * globalResolution;
+    globalFrame.width = sourceWidth * globalResolution;
+    globalFrame.height = sourceHeight * globalResolution;
+  }
+  /**
+   * Updates the filter uniforms with the current filter state.
+   * @param input - The input texture
+   * @param output - The output render surface
+   * @param filterData - The current filter data
+   * @param offsetX - The X offset for positioning
+   * @param offsetY - The Y offset for positioning
+   * @param resolution - The current resolution
+   * @param isFinalTarget - Whether this is the final render target
+   * @param clear - Whether to clear the output surface
+   */
+  _updateFilterUniforms(input, output, filterData, offsetX, offsetY, resolution, isFinalTarget, clear) {
+    const uniforms = this._filterGlobalUniforms.uniforms;
     const outputFrame = uniforms.uOutputFrame;
     const inputSize = uniforms.uInputSize;
     const inputPixel = uniforms.uInputPixel;
@@ -426,18 +581,8 @@ class FilterSystem {
     const globalFrame = uniforms.uGlobalFrame;
     const outputTexture = uniforms.uOutputTexture;
     if (isFinalTarget) {
-      let lastIndex = this._filterStackIndex;
-      while (lastIndex > 0) {
-        lastIndex--;
-        const filterData2 = this._filterStack[this._filterStackIndex - 1];
-        if (!filterData2.skip) {
-          offset.x = filterData2.bounds.minX;
-          offset.y = filterData2.bounds.minY;
-          break;
-        }
-      }
-      outputFrame[0] = bounds.minX - offset.x;
-      outputFrame[1] = bounds.minY - offset.y;
+      outputFrame[0] = filterData.bounds.minX - offsetX;
+      outputFrame[1] = filterData.bounds.minY - offsetY;
     } else {
       outputFrame[0] = 0;
       outputFrame[1] = 0;
@@ -457,12 +602,14 @@ class FilterSystem {
     inputClamp[2] = input.frame.width * inputSize[2] - 0.5 * inputPixel[2];
     inputClamp[3] = input.frame.height * inputSize[3] - 0.5 * inputPixel[3];
     const rootTexture = this.renderer.renderTarget.rootRenderTarget.colorTexture;
-    globalFrame[0] = offset.x * resolution;
-    globalFrame[1] = offset.y * resolution;
+    globalFrame[0] = offsetX * resolution;
+    globalFrame[1] = offsetY * resolution;
     globalFrame[2] = rootTexture.source.width * resolution;
     globalFrame[3] = rootTexture.source.height * resolution;
+    if (output instanceof Texture)
+      output.source.resource = null;
     const renderTarget = this.renderer.renderTarget.getRenderTarget(output);
-    renderer.renderTarget.bind(output, !!clear);
+    this.renderer.renderTarget.bind(output, !!clear);
     if (output instanceof Texture) {
       outputTexture[0] = output.frame.width;
       outputTexture[1] = output.frame.height;
@@ -471,68 +618,165 @@ class FilterSystem {
       outputTexture[1] = renderTarget.height;
     }
     outputTexture[2] = renderTarget.isRoot ? -1 : 1;
-    filterUniforms.update();
-    if (renderer.renderPipes.uniformBatch) {
-      const batchUniforms = renderer.renderPipes.uniformBatch.getUboResource(filterUniforms);
-      this._globalFilterBindGroup.setResource(batchUniforms, 0);
-    } else {
-      this._globalFilterBindGroup.setResource(filterUniforms, 0);
-    }
-    this._globalFilterBindGroup.setResource(input.source, 1);
-    this._globalFilterBindGroup.setResource(input.source.style, 2);
-    filter.groups[0] = this._globalFilterBindGroup;
-    renderer.encoder.draw({
-      geometry: quadGeometry,
-      shader: filter,
-      state: filter._state,
-      topology: "triangle-list"
-    });
-    if (renderer.type === RendererType.WEBGL) {
-      renderer.renderTarget.finishRenderPass();
+    this._filterGlobalUniforms.update();
+  }
+  /**
+   * Finds the correct resolution by looking back through the filter stack.
+   * @param rootResolution - The fallback root resolution to use
+   * @returns The resolution from the previous filter or root resolution
+   */
+  _findFilterResolution(rootResolution) {
+    let currentIndex = this._filterStackIndex - 1;
+    while (currentIndex > 0 && this._filterStack[currentIndex].skip) {
+      --currentIndex;
     }
+    return currentIndex > 0 && this._filterStack[currentIndex].inputTexture ? this._filterStack[currentIndex].inputTexture.source._resolution : rootResolution;
   }
-  _getFilterData() {
-    return {
-      skip: false,
-      inputTexture: null,
-      bounds: new Bounds(),
-      container: null,
-      filterEffect: null,
-      blendRequired: false,
-      previousRenderSurface: null
-    };
+  /**
+   * Finds the offset from the previous non-skipped filter in the stack.
+   * @returns The offset coordinates from the previous filter
+   */
+  _findPreviousFilterOffset() {
+    let offsetX = 0;
+    let offsetY = 0;
+    let lastIndex = this._filterStackIndex;
+    while (lastIndex > 0) {
+      lastIndex--;
+      const prevFilterData = this._filterStack[lastIndex];
+      if (!prevFilterData.skip) {
+        offsetX = prevFilterData.bounds.minX;
+        offsetY = prevFilterData.bounds.minY;
+        break;
+      }
+    }
+    return { x: offsetX, y: offsetY };
   }
   /**
-   * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
-   *
-   * Use `outputMatrix * vTextureCoord` in the shader.
-   * @param outputMatrix - The matrix to output to.
-   * @param {Sprite} sprite - The sprite to map to.
-   * @returns The mapped matrix.
+   * Calculates the filter area bounds based on the instruction type.
+   * @param instruction - The filter instruction
+   * @param bounds - The bounds object to populate
    */
-  calculateSpriteMatrix(outputMatrix, sprite) {
-    const data = this._activeFilterData;
-    const mappedMatrix = outputMatrix.set(
-      data.inputTexture._source.width,
-      0,
-      0,
-      data.inputTexture._source.height,
-      data.bounds.minX,
-      data.bounds.minY
-    );
-    const worldTransform = sprite.worldTransform.copyTo(Matrix.shared);
-    const renderGroup = sprite.renderGroup || sprite.parentRenderGroup;
-    if (renderGroup && renderGroup.cacheToLocalTransform) {
-      worldTransform.prepend(renderGroup.cacheToLocalTransform);
+  _calculateFilterArea(instruction, bounds) {
+    if (instruction.renderables) {
+      getGlobalRenderableBounds(instruction.renderables, bounds);
+    } else if (instruction.filterEffect.filterArea) {
+      bounds.clear();
+      bounds.addRect(instruction.filterEffect.filterArea);
+      bounds.applyMatrix(instruction.container.worldTransform);
+    } else {
+      instruction.container.getFastGlobalBounds(true, bounds);
+    }
+    if (instruction.container) {
+      const renderGroup = instruction.container.renderGroup || instruction.container.parentRenderGroup;
+      const filterFrameTransform = renderGroup.cacheToLocalTransform;
+      if (filterFrameTransform) {
+        bounds.applyMatrix(filterFrameTransform);
+      }
     }
-    worldTransform.invert();
-    mappedMatrix.prepend(worldTransform);
-    mappedMatrix.scale(
-      1 / sprite.texture.frame.width,
-      1 / sprite.texture.frame.height
-    );
-    mappedMatrix.translate(sprite.anchor.x, sprite.anchor.y);
-    return mappedMatrix;
+  }
+  _applyFiltersToTexture(filterData, clear) {
+    const inputTexture = filterData.inputTexture;
+    const bounds = filterData.bounds;
+    const filters = filterData.filters;
+    this._globalFilterBindGroup.setResource(inputTexture.source.style, 2);
+    this._globalFilterBindGroup.setResource(filterData.backTexture.source, 3);
+    if (filters.length === 1) {
+      filters[0].apply(this, inputTexture, filterData.outputRenderSurface, clear);
+    } else {
+      let flip = filterData.inputTexture;
+      const tempTexture = TexturePool.getOptimalTexture(
+        bounds.width,
+        bounds.height,
+        flip.source._resolution,
+        false
+      );
+      let flop = tempTexture;
+      let i = 0;
+      for (i = 0; i < filters.length - 1; ++i) {
+        const filter = filters[i];
+        filter.apply(this, flip, flop, true);
+        const t = flip;
+        flip = flop;
+        flop = t;
+      }
+      filters[i].apply(this, flip, filterData.outputRenderSurface, clear);
+      TexturePool.returnTexture(tempTexture);
+    }
+  }
+  _calculateFilterBounds(filterData, viewPort, rootAntialias, rootResolution, paddingMultiplier) {
+    const renderer = this.renderer;
+    const bounds = filterData.bounds;
+    const filters = filterData.filters;
+    let resolution = Infinity;
+    let padding = 0;
+    let antialias = true;
+    let blendRequired = false;
+    let enabled = false;
+    let clipToViewport = true;
+    for (let i = 0; i < filters.length; i++) {
+      const filter = filters[i];
+      resolution = Math.min(resolution, filter.resolution === "inherit" ? rootResolution : filter.resolution);
+      padding += filter.padding;
+      if (filter.antialias === "off") {
+        antialias = false;
+      } else if (filter.antialias === "inherit") {
+        antialias && (antialias = rootAntialias);
+      }
+      if (!filter.clipToViewport) {
+        clipToViewport = false;
+      }
+      const isCompatible = !!(filter.compatibleRenderers & renderer.type);
+      if (!isCompatible) {
+        enabled = false;
+        break;
+      }
+      if (filter.blendRequired && !(renderer.backBuffer?.useBackBuffer ?? true)) {
+        warn("Blend filter requires backBuffer on WebGL renderer to be enabled. Set `useBackBuffer: true` in the renderer options.");
+        enabled = false;
+        break;
+      }
+      enabled = filter.enabled || enabled;
+      blendRequired || (blendRequired = filter.blendRequired);
+    }
+    if (!enabled) {
+      filterData.skip = true;
+      return;
+    }
+    if (clipToViewport) {
+      bounds.fitBounds(0, viewPort.width / rootResolution, 0, viewPort.height / rootResolution);
+    }
+    bounds.scale(resolution).ceil().scale(1 / resolution).pad((padding | 0) * paddingMultiplier);
+    if (!bounds.isPositive) {
+      filterData.skip = true;
+      return;
+    }
+    filterData.antialias = antialias;
+    filterData.resolution = resolution;
+    filterData.blendRequired = blendRequired;
+  }
+  _popFilterData() {
+    this._filterStackIndex--;
+    return this._filterStack[this._filterStackIndex];
+  }
+  _getPreviousFilterData() {
+    let previousFilterData;
+    let index = this._filterStackIndex - 1;
+    while (index > 1) {
+      index--;
+      previousFilterData = this._filterStack[index];
+      if (!previousFilterData.skip) {
+        break;
+      }
+    }
+    return previousFilterData;
+  }
+  _pushFilterData() {
+    let filterData = this._filterStack[this._filterStackIndex];
+    if (!filterData) {
+      filterData = this._filterStack[this._filterStackIndex] = new FilterData();
+    }
+    this._filterStackIndex++;
+    return filterData;
   }
 }
 /** @ignore */
@@ -546,6 +790,7 @@ FilterSystem.extension = {
 
 class Graphics extends ViewContainer {
   /**
+   * Creates a new Graphics object.
    * @param options - Options for the Graphics.
    */
   constructor(options) {
@@ -557,6 +802,7 @@ class Graphics extends ViewContainer {
       label: "Graphics",
       ...rest
     });
+    /** @internal */
     this.renderPipeId = "graphics";
     if (!context) {
       this._context = this._ownedContext = new GraphicsContext();
@@ -564,6 +810,7 @@ class Graphics extends ViewContainer {
       this._context = context;
     }
     this._context.on("update", this.onViewUpdate, this);
+    this.didViewUpdate = true;
     this.allowChildren = false;
     this.roundPixels = roundPixels ?? false;
   }
@@ -575,12 +822,53 @@ class Graphics extends ViewContainer {
     this._context.on("update", this.onViewUpdate, this);
     this.onViewUpdate();
   }
+  /**
+   * The underlying graphics context used for drawing operations.
+   * Controls how shapes and paths are rendered.
+   * @example
+   * ```ts
+   * // Create a shared context
+   * const sharedContext = new GraphicsContext();
+   *
+   * // Create graphics objects sharing the same context
+   * const graphics1 = new Graphics();
+   * const graphics2 = new Graphics();
+   *
+   * // Assign shared context
+   * graphics1.context = sharedContext;
+   * graphics2.context = sharedContext;
+   *
+   * // Both graphics will show the same shapes
+   * sharedContext
+   *     .rect(0, 0, 100, 100)
+   *     .fill({ color: 0xff0000 });
+   * ```
+   * @see {@link GraphicsContext} For drawing operations
+   * @see {@link GraphicsOptions} For context configuration
+   */
   get context() {
     return this._context;
   }
   /**
-   * The local bounds of the graphic.
-   * @type {rendering.Bounds}
+   * The local bounds of the graphics object.
+   * Returns the boundaries after all graphical operations but before any transforms.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Draw a shape
+   * graphics
+   *     .rect(0, 0, 100, 100)
+   *     .fill({ color: 0xff0000 });
+   *
+   * // Get bounds information
+   * const bounds = graphics.bounds;
+   * console.log(bounds.width);  // 100
+   * console.log(bounds.height); // 100
+   * ```
+   * @readonly
+   * @see {@link Bounds} For bounds operations
+   * @see {@link Container#getBounds} For transformed bounds
    */
   get bounds() {
     return this._context.bounds;
@@ -593,7 +881,25 @@ class Graphics extends ViewContainer {
   }
   /**
    * Checks if the object contains the given point.
-   * @param point - The point to check
+   * Returns true if the point lies within the Graphics object's rendered area.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Draw a shape
+   * graphics
+   *     .rect(0, 0, 100, 100)
+   *     .fill({ color: 0xff0000 });
+   *
+   * // Check point intersection
+   * if (graphics.containsPoint({ x: 50, y: 50 })) {
+   *     console.log('Point is inside rectangle!');
+   * }
+   * ```
+   * @param point - The point to check in local coordinates
+   * @returns True if the point is inside the Graphics object
+   * @see {@link Graphics#bounds} For bounding box checks
+   * @see {@link PointData} For point data structure
    */
   containsPoint(point) {
     return this._context.containsPoint(point);
@@ -609,9 +915,13 @@ class Graphics extends ViewContainer {
    * then you should pass destroy({ context: false })
    *
    * If the context was passed in as an argument to the constructor then it will not be destroyed
-   * @param {boolean} [options.texture=false] - Should destroy the texture of the graphics context
-   * @param {boolean} [options.textureSource=false] - Should destroy the texture source of the graphics context
-   * @param {boolean} [options.context=false] - Should destroy the context
+   * @example
+   * ```ts
+   * // Destroy the graphics and its context
+   * graphics.destroy();
+   * graphics.destroy(true);
+   * graphics.destroy({ context: true, texture: true, textureSource: true });
+   * ```
    */
   destroy(options) {
     if (this._ownedContext && !options) {
@@ -629,21 +939,104 @@ class Graphics extends ViewContainer {
   }
   // --------------------------------------- GraphicsContext methods ---------------------------------------
   /**
-   * Sets the current fill style of the graphics context. The fill style can be a color, gradient,
-   * pattern, or a more complex style defined by a FillStyle object.
-   * @param {FillInput} args - The fill style to apply. This can be a simple color, a gradient or
-   * pattern object, or a FillStyle or ConvertedFillStyle object.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * Sets the current fill style of the graphics context.
+   * The fill style can be a color, gradient, pattern, or a complex style object.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Basic color fill
+   * graphics
+   *     .setFillStyle({ color: 0xff0000 }) // Red fill
+   *     .rect(0, 0, 100, 100)
+   *     .fill();
+   *
+   * // Gradient fill
+   * const gradient = new FillGradient({
+   *    end: { x: 1, y: 0 },
+   *    colorStops: [
+   *         { offset: 0, color: 0xff0000 }, // Red at start
+   *         { offset: 0.5, color: 0x00ff00 }, // Green at middle
+   *         { offset: 1, color: 0x0000ff }, // Blue at end
+   *    ],
+   * });
+   *
+   * graphics
+   *     .setFillStyle(gradient)
+   *     .circle(100, 100, 50)
+   *     .fill();
+   *
+   * // Pattern fill
+   * const pattern = new FillPattern(texture);
+   * graphics
+   *     .setFillStyle({
+   *         fill: pattern,
+   *         alpha: 0.5
+   *     })
+   *     .rect(0, 0, 200, 200)
+   *     .fill();
+   * ```
+   * @param {FillInput} args - The fill style to apply
+   * @returns The Graphics instance for chaining
+   * @see {@link FillStyle} For fill style options
+   * @see {@link FillGradient} For gradient fills
+   * @see {@link FillPattern} For pattern fills
    */
   setFillStyle(...args) {
     return this._callContextMethod("setFillStyle", args);
   }
   /**
-   * Sets the current stroke style of the graphics context. Similar to fill styles, stroke styles can
-   * encompass colors, gradients, patterns, or more detailed configurations via a StrokeStyle object.
-   * @param {StrokeInput} args - The stroke style to apply. Can be defined as a color, a gradient or pattern,
-   * or a StrokeStyle or ConvertedStrokeStyle object.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * Sets the current stroke style of the graphics context.
+   * Similar to fill styles, stroke styles can encompass colors, gradients, patterns, or more detailed configurations.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Basic color stroke
+   * graphics
+   *     .setStrokeStyle({
+   *         width: 2,
+   *         color: 0x000000
+   *     })
+   *     .rect(0, 0, 100, 100)
+   *     .stroke();
+   *
+   * // Complex stroke style
+   * graphics
+   *     .setStrokeStyle({
+   *         width: 4,
+   *         color: 0xff0000,
+   *         alpha: 0.5,
+   *         join: 'round',
+   *         cap: 'round',
+   *         alignment: 0.5
+   *     })
+   *     .circle(100, 100, 50)
+   *     .stroke();
+   *
+   * // Gradient stroke
+   * const gradient = new FillGradient({
+   *    end: { x: 1, y: 0 },
+   *    colorStops: [
+   *         { offset: 0, color: 0xff0000 }, // Red at start
+   *         { offset: 0.5, color: 0x00ff00 }, // Green at middle
+   *         { offset: 1, color: 0x0000ff }, // Blue at end
+   *    ],
+   * });
+   *
+   * graphics
+   *     .setStrokeStyle({
+   *         width: 10,
+   *         fill: gradient
+   *     })
+   *     .poly([0,0, 100,50, 0,100])
+   *     .stroke();
+   * ```
+   * @param {StrokeInput} args - The stroke style to apply
+   * @returns The Graphics instance for chaining
+   * @see {@link StrokeStyle} For stroke style options
+   * @see {@link FillGradient} For gradient strokes
+   * @see {@link FillPattern} For pattern strokes
    */
   setStrokeStyle(...args) {
     return this._callContextMethod("setStrokeStyle", args);
@@ -652,11 +1045,53 @@ class Graphics extends ViewContainer {
     return this._callContextMethod("fill", args);
   }
   /**
-   * Strokes the current path with the current stroke style. This method can take an optional
-   * FillStyle parameter to define the stroke's appearance, including its color, width, and other properties.
-   * @param {FillStyle} args - (Optional) The stroke style to apply. Can be defined as a simple color or a more
-   * complex style object. If omitted, uses the current stroke style.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * Strokes the current path with the current stroke style or specified style.
+   * Outlines the shape using the stroke settings.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Stroke with direct color
+   * graphics
+   *     .circle(50, 50, 25)
+   *     .stroke({
+   *         width: 2,
+   *         color: 0xff0000
+   *     }); // 2px red stroke
+   *
+   * // Fill with texture
+   * graphics
+   *    .rect(0, 0, 100, 100)
+   *    .stroke(myTexture); // Fill with texture
+   *
+   * // Stroke with gradient
+   * const gradient = new FillGradient({
+   *     end: { x: 1, y: 0 },
+   *     colorStops: [
+   *         { offset: 0, color: 0xff0000 },
+   *         { offset: 0.5, color: 0x00ff00 },
+   *         { offset: 1, color: 0x0000ff },
+   *     ],
+   * });
+   *
+   * graphics
+   *     .rect(0, 0, 100, 100)
+   *     .stroke({
+   *         width: 4,
+   *         fill: gradient,
+   *         alignment: 0.5,
+   *         join: 'round'
+   *     });
+   * ```
+   * @param {StrokeStyle} args - Optional stroke style to apply. Can be:
+   * - A stroke style object with width, color, etc.
+   * - A gradient
+   * - A pattern
+   * If omitted, uses current stroke style.
+   * @returns The Graphics instance for chaining
+   * @see {@link StrokeStyle} For stroke style options
+   * @see {@link FillGradient} For gradient strokes
+   * @see {@link setStrokeStyle} For setting default stroke style
    */
   stroke(...args) {
     return this._callContextMethod("stroke", args);
@@ -667,15 +1102,39 @@ class Graphics extends ViewContainer {
   /**
    * Resets the current path. Any previous path and its commands are discarded and a new path is
    * started. This is typically called before beginning a new shape or series of drawing commands.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   * graphics
+   *     .circle(150, 150, 50)
+   *     .fill({ color: 0x00ff00 })
+   *     .beginPath() // Starts a new path
+   *     .circle(250, 150, 50)
+   *     .fill({ color: 0x0000ff });
+   * ```
+   * @returns The Graphics instance for chaining
+   * @see {@link Graphics#moveTo} For starting a new subpath
+   * @see {@link Graphics#closePath} For closing the current path
    */
   beginPath() {
     return this._callContextMethod("beginPath", []);
   }
   /**
    * Applies a cutout to the last drawn shape. This is used to create holes or complex shapes by
-   * subtracting a path from the previously drawn path. If a hole is not completely in a shape, it will
-   * fail to cut correctly!
+   * subtracting a path from the previously drawn path.
+   *
+   * If a hole is not completely in a shape, it will fail to cut correctly.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Draw outer circle
+   * graphics
+   *     .circle(100, 100, 50)
+   *     .fill({ color: 0xff0000 });
+   *     .circle(100, 100, 25) // Inner circle
+   *     .cut() // Cuts out the inner circle from the outer circle
+   * ```
    */
   cut() {
     return this._callContextMethod("cut", []);
@@ -693,9 +1152,23 @@ class Graphics extends ViewContainer {
     return this._callContextMethod("bezierCurveTo", args);
   }
   /**
-   * Closes the current path by drawing a straight line back to the start.
-   * If the shape is already closed or there are no points in the path, this method does nothing.
-   * @returns The instance of the current object for chaining.
+   * Closes the current path by drawing a straight line back to the start point.
+   *
+   * This is useful for completing shapes and ensuring they are properly closed for fills.
+   * @example
+   * ```ts
+   * // Create a triangle with closed path
+   * const graphics = new Graphics();
+   * graphics
+   *     .moveTo(50, 50)
+   *     .lineTo(100, 100)
+   *     .lineTo(0, 100)
+   *     .closePath()
+   * ```
+   * @returns The Graphics instance for method chaining
+   * @see {@link Graphics#beginPath} For starting a new path
+   * @see {@link Graphics#fill} For filling closed paths
+   * @see {@link Graphics#stroke} For stroking paths
    */
   closePath() {
     return this._callContextMethod("closePath", []);
@@ -751,13 +1224,69 @@ class Graphics extends ViewContainer {
   restore(...args) {
     return this._callContextMethod("restore", args);
   }
-  /** Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack. */
+  /**
+   * Saves the current graphics state onto a stack. The state includes:
+   * - Current transformation matrix
+   * - Current fill style
+   * - Current stroke style
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Save state before complex operations
+   * graphics.save();
+   *
+   * // Create transformed and styled shape
+   * graphics
+   *     .translateTransform(100, 100)
+   *     .rotateTransform(Math.PI / 4)
+   *     .setFillStyle({
+   *         color: 0xff0000,
+   *         alpha: 0.5
+   *     })
+   *     .rect(-25, -25, 50, 50)
+   *     .fill();
+   *
+   * // Restore to original state
+   * graphics.restore();
+   *
+   * // Continue drawing with previous state
+   * graphics
+   *     .circle(50, 50, 25)
+   *     .fill();
+   * ```
+   * @returns The Graphics instance for method chaining
+   * @see {@link Graphics#restore} For restoring the saved state
+   * @see {@link Graphics#setTransform} For setting transformations
+   */
   save() {
     return this._callContextMethod("save", []);
   }
   /**
    * Returns the current transformation matrix of the graphics context.
+   * This matrix represents all accumulated transformations including translate, scale, and rotate.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Apply some transformations
+   * graphics
+   *     .translateTransform(100, 100)
+   *     .rotateTransform(Math.PI / 4);
+   *
+   * // Get the current transform matrix
+   * const matrix = graphics.getTransform();
+   * console.log(matrix.tx, matrix.ty); // 100, 100
+   *
+   * // Use the matrix for other operations
+   * graphics
+   *     .setTransform(matrix)
+   *     .circle(0, 0, 50)
+   *     .fill({ color: 0xff0000 });
+   * ```
    * @returns The current transformation matrix.
+   * @see {@link Graphics#setTransform} For setting the transform matrix
+   * @see {@link Matrix} For matrix operations
    */
   getTransform() {
     return this.context.getTransform();
@@ -765,7 +1294,27 @@ class Graphics extends ViewContainer {
   /**
    * Resets the current transformation matrix to the identity matrix, effectively removing
    * any transformations (rotation, scaling, translation) previously applied.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Apply transformations
+   * graphics
+   *     .translateTransform(100, 100)
+   *     .scaleTransform(2, 2)
+   *     .circle(0, 0, 25)
+   *     .fill({ color: 0xff0000 });
+   * // Reset transform to default state
+   * graphics
+   *     .resetTransform()
+   *     .circle(50, 50, 25) // Will draw at actual coordinates
+   *     .fill({ color: 0x00ff00 });
+   * ```
+   * @returns The Graphics instance for method chaining
+   * @see {@link Graphics#getTransform} For getting the current transform
+   * @see {@link Graphics#setTransform} For setting a specific transform
+   * @see {@link Graphics#save} For saving the current transform state
+   * @see {@link Graphics#restore} For restoring a previous transform state
    */
   resetTransform() {
     return this._callContextMethod("resetTransform", []);
@@ -786,16 +1335,79 @@ class Graphics extends ViewContainer {
     return this._callContextMethod("translate", args);
   }
   /**
-   * Clears all drawing commands from the graphics context, effectively resetting it. This includes clearing the path,
-   * and optionally resetting transformations to the identity matrix.
-   * @returns The instance of the current GraphicsContext for method chaining.
+   * Clears all drawing commands from the graphics context, effectively resetting it.
+   * This includes clearing the current path, fill style, stroke style, and transformations.
+   *
+   * > [!NOTE] Graphics objects are not designed to be continuously cleared and redrawn.
+   * > Instead, they are intended to be used for static or semi-static graphics that
+   * > can be redrawn as needed. Frequent clearing and redrawing may lead to performance issues.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Draw some shapes
+   * graphics
+   *     .circle(100, 100, 50)
+   *     .fill({ color: 0xff0000 })
+   *     .rect(200, 100, 100, 50)
+   *     .fill({ color: 0x00ff00 });
+   *
+   * // Clear all graphics
+   * graphics.clear();
+   *
+   * // Start fresh with new shapes
+   * graphics
+   *     .circle(150, 150, 30)
+   *     .fill({ color: 0x0000ff });
+   * ```
+   * @returns The Graphics instance for method chaining
+   * @see {@link Graphics#beginPath} For starting a new path without clearing styles
+   * @see {@link Graphics#save} For saving the current state
+   * @see {@link Graphics#restore} For restoring a previous state
    */
   clear() {
     return this._callContextMethod("clear", []);
   }
   /**
-   * The fill style to use.
+   * Gets or sets the current fill style for the graphics context. The fill style determines
+   * how shapes are filled when using the fill() method.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Basic color fill
+   * graphics.fillStyle = {
+   *     color: 0xff0000,  // Red
+   *     alpha: 1
+   * };
+   *
+   * // Using gradients
+   * const gradient = new FillGradient({
+   *     end: { x: 0, y: 1 }, // Vertical gradient
+   *     stops: [
+   *         { offset: 0, color: 0xff0000, alpha: 1 }, // Start color
+   *         { offset: 1, color: 0x0000ff, alpha: 1 }  // End color
+   *     ]
+   * });
+   *
+   * graphics.fillStyle = {
+   *     fill: gradient,
+   *     alpha: 0.8
+   * };
+   *
+   * // Using patterns
+   * graphics.fillStyle = {
+   *     texture: myTexture,
+   *     alpha: 1,
+   *     matrix: new Matrix()
+   *         .scale(0.5, 0.5)
+   *         .rotate(Math.PI / 4)
+   * };
+   * ```
    * @type {ConvertedFillStyle}
+   * @see {@link FillStyle} For all available fill style options
+   * @see {@link FillGradient} For creating gradient fills
+   * @see {@link Graphics#fill} For applying the fill to paths
    */
   get fillStyle() {
     return this._context.fillStyle;
@@ -804,8 +1416,47 @@ class Graphics extends ViewContainer {
     this._context.fillStyle = value;
   }
   /**
-   * The stroke style to use.
-   * @type {ConvertedStrokeStyle}
+   * Gets or sets the current stroke style for the graphics context. The stroke style determines
+   * how paths are outlined when using the stroke() method.
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Basic stroke style
+   * graphics.strokeStyle = {
+   *     width: 2,
+   *     color: 0xff0000,
+   *     alpha: 1
+   * };
+   *
+   * // Using with gradients
+   * const gradient = new FillGradient({
+   *   end: { x: 0, y: 1 },
+   *   stops: [
+   *       { offset: 0, color: 0xff0000, alpha: 1 },
+   *       { offset: 1, color: 0x0000ff, alpha: 1 }
+   *   ]
+   * });
+   *
+   * graphics.strokeStyle = {
+   *     width: 4,
+   *     fill: gradient,
+   *     alignment: 0.5,
+   *     join: 'round',
+   *     cap: 'round'
+   * };
+   *
+   * // Complex stroke settings
+   * graphics.strokeStyle = {
+   *     width: 6,
+   *     color: 0x00ff00,
+   *     alpha: 0.5,
+   *     join: 'miter',
+   *     miterLimit: 10,
+   * };
+   * ```
+   * @see {@link StrokeStyle} For all available stroke style options
+   * @see {@link Graphics#stroke} For applying the stroke to paths
    */
   get strokeStyle() {
     return this._context.strokeStyle;
@@ -814,12 +1465,41 @@ class Graphics extends ViewContainer {
     this._context.strokeStyle = value;
   }
   /**
-   * Creates a new Graphics object.
-   * Note that only the context of the object is cloned, not its transform (position,scale,etc)
-   * @param deep - Whether to create a deep clone of the graphics object. If false, the context
-   * will be shared between the two objects (default false). If true, the context will be
-   * cloned (recommended if you need to modify the context in any way).
-   * @returns - A clone of the graphics object
+   * Creates a new Graphics object that copies the current graphics content.
+   * The clone can either share the same context (shallow clone) or have its own independent
+   * context (deep clone).
+   * @example
+   * ```ts
+   * const graphics = new Graphics();
+   *
+   * // Create original graphics content
+   * graphics
+   *     .circle(100, 100, 50)
+   *     .fill({ color: 0xff0000 });
+   *
+   * // Create a shallow clone (shared context)
+   * const shallowClone = graphics.clone();
+   *
+   * // Changes to original affect the clone
+   * graphics
+   *     .circle(200, 100, 30)
+   *     .fill({ color: 0x00ff00 });
+   *
+   * // Create a deep clone (independent context)
+   * const deepClone = graphics.clone(true);
+   *
+   * // Modify deep clone independently
+   * deepClone
+   *     .translateTransform(100, 100)
+   *     .circle(0, 0, 40)
+   *     .fill({ color: 0x0000ff });
+   * ```
+   * @param deep - Whether to create a deep clone of the graphics object.
+   *              If false (default), the context will be shared between objects.
+   *              If true, creates an independent copy of the context.
+   * @returns A new Graphics instance with either shared or copied context
+   * @see {@link Graphics#context} For accessing the underlying graphics context
+   * @see {@link GraphicsContext} For understanding the shared context behavior
    */
   clone(deep = false) {
     if (deep) {
@@ -943,85 +1623,359 @@ const _MeshGeometry = class _MeshGeometry extends Geometry {
         uvs = new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
       }
     }
-    const indices = options.indices || new Uint32Array([0, 1, 2, 0, 2, 3]);
-    const shrinkToFit = options.shrinkBuffersToFit;
-    const positionBuffer = new Buffer({
-      data: positions,
-      label: "attribute-mesh-positions",
-      shrinkToFit,
-      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
-    });
-    const uvBuffer = new Buffer({
-      data: uvs,
-      label: "attribute-mesh-uvs",
-      shrinkToFit,
-      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
-    });
-    const indexBuffer = new Buffer({
-      data: indices,
-      label: "index-mesh-buffer",
-      shrinkToFit,
-      usage: BufferUsage.INDEX | BufferUsage.COPY_DST
-    });
-    super({
-      attributes: {
-        aPosition: {
-          buffer: positionBuffer,
-          format: "float32x2",
-          stride: 2 * 4,
-          offset: 0
-        },
-        aUV: {
-          buffer: uvBuffer,
-          format: "float32x2",
-          stride: 2 * 4,
-          offset: 0
-        }
-      },
-      indexBuffer,
-      topology: options.topology
-    });
-    this.batchMode = "auto";
-  }
-  /** The positions of the mesh. */
-  get positions() {
-    return this.attributes.aPosition.buffer.data;
-  }
-  /**
-   * Set the positions of the mesh.
-   * When setting the positions, its important that the uvs array is at least as long as the positions array.
-   * otherwise the geometry will not be valid.
-   * @param {Float32Array} value - The positions of the mesh.
-   */
-  set positions(value) {
-    this.attributes.aPosition.buffer.data = value;
-  }
-  /** The UVs of the mesh. */
-  get uvs() {
-    return this.attributes.aUV.buffer.data;
+    const indices = options.indices || new Uint32Array([0, 1, 2, 0, 2, 3]);
+    const shrinkToFit = options.shrinkBuffersToFit;
+    const positionBuffer = new Buffer({
+      data: positions,
+      label: "attribute-mesh-positions",
+      shrinkToFit,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    const uvBuffer = new Buffer({
+      data: uvs,
+      label: "attribute-mesh-uvs",
+      shrinkToFit,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    const indexBuffer = new Buffer({
+      data: indices,
+      label: "index-mesh-buffer",
+      shrinkToFit,
+      usage: BufferUsage.INDEX | BufferUsage.COPY_DST
+    });
+    super({
+      attributes: {
+        aPosition: {
+          buffer: positionBuffer,
+          format: "float32x2",
+          stride: 2 * 4,
+          offset: 0
+        },
+        aUV: {
+          buffer: uvBuffer,
+          format: "float32x2",
+          stride: 2 * 4,
+          offset: 0
+        }
+      },
+      indexBuffer,
+      topology: options.topology
+    });
+    this.batchMode = "auto";
+  }
+  /** The positions of the mesh. */
+  get positions() {
+    return this.attributes.aPosition.buffer.data;
+  }
+  /**
+   * Set the positions of the mesh.
+   * When setting the positions, its important that the uvs array is at least as long as the positions array.
+   * otherwise the geometry will not be valid.
+   * @param {Float32Array} value - The positions of the mesh.
+   */
+  set positions(value) {
+    this.attributes.aPosition.buffer.data = value;
+  }
+  /** The UVs of the mesh. */
+  get uvs() {
+    return this.attributes.aUV.buffer.data;
+  }
+  /**
+   * Set the UVs of the mesh.
+   * Its important that the uvs array you set is at least as long as the positions array.
+   * otherwise the geometry will not be valid.
+   * @param {Float32Array} value - The UVs of the mesh.
+   */
+  set uvs(value) {
+    this.attributes.aUV.buffer.data = value;
+  }
+  /** The indices of the mesh. */
+  get indices() {
+    return this.indexBuffer.data;
+  }
+  set indices(value) {
+    this.indexBuffer.data = value;
+  }
+};
+_MeshGeometry.defaultOptions = {
+  topology: "triangle-list",
+  shrinkBuffersToFit: false
+};
+let MeshGeometry = _MeshGeometry;
+
+let _internalCanvas = null;
+let _internalContext = null;
+function ensureInternalCanvas(width, height) {
+  if (!_internalCanvas) {
+    _internalCanvas = DOMAdapter.get().createCanvas(256, 128);
+    _internalContext = _internalCanvas.getContext("2d", { willReadFrequently: true });
+    _internalContext.globalCompositeOperation = "copy";
+    _internalContext.globalAlpha = 1;
+  }
+  if (_internalCanvas.width < width || _internalCanvas.height < height) {
+    _internalCanvas.width = nextPow2(width);
+    _internalCanvas.height = nextPow2(height);
+  }
+}
+function checkRow(data, width, y) {
+  for (let x = 0, index = 4 * y * width; x < width; ++x, index += 4) {
+    if (data[index + 3] !== 0)
+      return false;
+  }
+  return true;
+}
+function checkColumn(data, width, x, top, bottom) {
+  const stride = 4 * width;
+  for (let y = top, index = top * stride + 4 * x; y <= bottom; ++y, index += stride) {
+    if (data[index + 3] !== 0)
+      return false;
+  }
+  return true;
+}
+function getCanvasBoundingBox(...args) {
+  let options = args[0];
+  if (!options.canvas) {
+    options = { canvas: args[0], resolution: args[1] };
+  }
+  const { canvas } = options;
+  const resolution = Math.min(options.resolution ?? 1, 1);
+  const width = options.width ?? canvas.width;
+  const height = options.height ?? canvas.height;
+  let output = options.output;
+  ensureInternalCanvas(width, height);
+  if (!_internalContext) {
+    throw new TypeError("Failed to get canvas 2D context");
+  }
+  _internalContext.drawImage(
+    canvas,
+    0,
+    0,
+    width,
+    height,
+    0,
+    0,
+    width * resolution,
+    height * resolution
+  );
+  const imageData = _internalContext.getImageData(0, 0, width, height);
+  const data = imageData.data;
+  let left = 0;
+  let top = 0;
+  let right = width - 1;
+  let bottom = height - 1;
+  while (top < height && checkRow(data, width, top))
+    ++top;
+  if (top === height)
+    return Rectangle.EMPTY;
+  while (checkRow(data, width, bottom))
+    --bottom;
+  while (checkColumn(data, width, left, top, bottom))
+    ++left;
+  while (checkColumn(data, width, right, top, bottom))
+    --right;
+  ++right;
+  ++bottom;
+  _internalContext.globalCompositeOperation = "source-over";
+  _internalContext.strokeRect(left, top, right - left, bottom - top);
+  _internalContext.globalCompositeOperation = "copy";
+  output ?? (output = new Rectangle());
+  output.set(left / resolution, top / resolution, (right - left) / resolution, (bottom - top) / resolution);
+  return output;
+}
+
+const tempRect = new Rectangle();
+class CanvasTextGeneratorClass {
+  /**
+   * Creates a canvas with the specified text rendered to it.
+   *
+   * Generates a canvas of appropriate size, renders the text with the provided style,
+   * and returns both the canvas/context and a Rectangle representing the text bounds.
+   *
+   * When trim is enabled in the style, the frame will represent the bounds of the
+   * non-transparent pixels, which can be smaller than the full canvas.
+   * @param options - The options for generating the text canvas
+   * @param options.text - The text to render
+   * @param options.style - The style to apply to the text
+   * @param options.resolution - The resolution of the canvas (defaults to 1)
+   * @param options.padding
+   * @returns An object containing the canvas/context and the frame (bounds) of the text
+   */
+  getCanvasAndContext(options) {
+    const { text, style, resolution = 1 } = options;
+    const padding = style._getFinalPadding();
+    const measured = CanvasTextMetrics.measureText(text || " ", style);
+    const width = Math.ceil(Math.ceil(Math.max(1, measured.width) + padding * 2) * resolution);
+    const height = Math.ceil(Math.ceil(Math.max(1, measured.height) + padding * 2) * resolution);
+    const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(width, height);
+    this._renderTextToCanvas(text, style, padding, resolution, canvasAndContext);
+    const frame = style.trim ? getCanvasBoundingBox({ canvas: canvasAndContext.canvas, width, height, resolution: 1, output: tempRect }) : tempRect.set(0, 0, width, height);
+    return {
+      canvasAndContext,
+      frame
+    };
+  }
+  /**
+   * Returns a canvas and context to the pool.
+   *
+   * This should be called when you're done with the canvas to allow reuse
+   * and prevent memory leaks.
+   * @param canvasAndContext - The canvas and context to return to the pool
+   */
+  returnCanvasAndContext(canvasAndContext) {
+    CanvasPool.returnCanvasAndContext(canvasAndContext);
+  }
+  /**
+   * Renders text to its canvas, and updates its texture.
+   * @param text - The text to render
+   * @param style - The style of the text
+   * @param padding - The padding of the text
+   * @param resolution - The resolution of the text
+   * @param canvasAndContext - The canvas and context to render the text to
+   */
+  _renderTextToCanvas(text, style, padding, resolution, canvasAndContext) {
+    const { canvas, context } = canvasAndContext;
+    const font = fontStringFromTextStyle(style);
+    const measured = CanvasTextMetrics.measureText(text || " ", style);
+    const lines = measured.lines;
+    const lineHeight = measured.lineHeight;
+    const lineWidths = measured.lineWidths;
+    const maxLineWidth = measured.maxLineWidth;
+    const fontProperties = measured.fontProperties;
+    const height = canvas.height;
+    context.resetTransform();
+    context.scale(resolution, resolution);
+    context.textBaseline = style.textBaseline;
+    if (style._stroke?.width) {
+      const strokeStyle = style._stroke;
+      context.lineWidth = strokeStyle.width;
+      context.miterLimit = strokeStyle.miterLimit;
+      context.lineJoin = strokeStyle.join;
+      context.lineCap = strokeStyle.cap;
+    }
+    context.font = font;
+    let linePositionX;
+    let linePositionY;
+    const passesCount = style.dropShadow ? 2 : 1;
+    for (let i = 0; i < passesCount; ++i) {
+      const isShadowPass = style.dropShadow && i === 0;
+      const dsOffsetText = isShadowPass ? Math.ceil(Math.max(1, height) + padding * 2) : 0;
+      const dsOffsetShadow = dsOffsetText * resolution;
+      if (isShadowPass) {
+        context.fillStyle = "black";
+        context.strokeStyle = "black";
+        const shadowOptions = style.dropShadow;
+        const dropShadowColor = shadowOptions.color;
+        const dropShadowAlpha = shadowOptions.alpha;
+        context.shadowColor = Color.shared.setValue(dropShadowColor).setAlpha(dropShadowAlpha).toRgbaString();
+        const dropShadowBlur = shadowOptions.blur * resolution;
+        const dropShadowDistance = shadowOptions.distance * resolution;
+        context.shadowBlur = dropShadowBlur;
+        context.shadowOffsetX = Math.cos(shadowOptions.angle) * dropShadowDistance;
+        context.shadowOffsetY = Math.sin(shadowOptions.angle) * dropShadowDistance + dsOffsetShadow;
+      } else {
+        context.fillStyle = style._fill ? getCanvasFillStyle(style._fill, context, measured) : null;
+        if (style._stroke?.width) {
+          const padding2 = style._stroke.width * style._stroke.alignment;
+          context.strokeStyle = getCanvasFillStyle(style._stroke, context, measured, padding2);
+        }
+        context.shadowColor = "black";
+      }
+      let linePositionYShift = (lineHeight - fontProperties.fontSize) / 2;
+      if (lineHeight - fontProperties.fontSize < 0) {
+        linePositionYShift = 0;
+      }
+      const strokeWidth = style._stroke?.width ?? 0;
+      for (let i2 = 0; i2 < lines.length; i2++) {
+        linePositionX = strokeWidth / 2;
+        linePositionY = strokeWidth / 2 + i2 * lineHeight + fontProperties.ascent + linePositionYShift;
+        if (style.align === "right") {
+          linePositionX += maxLineWidth - lineWidths[i2];
+        } else if (style.align === "center") {
+          linePositionX += (maxLineWidth - lineWidths[i2]) / 2;
+        }
+        if (style._stroke?.width) {
+          this._drawLetterSpacing(
+            lines[i2],
+            style,
+            canvasAndContext,
+            linePositionX + padding,
+            linePositionY + padding - dsOffsetText,
+            true
+          );
+        }
+        if (style._fill !== void 0) {
+          this._drawLetterSpacing(
+            lines[i2],
+            style,
+            canvasAndContext,
+            linePositionX + padding,
+            linePositionY + padding - dsOffsetText
+          );
+        }
+      }
+    }
   }
   /**
-   * Set the UVs of the mesh.
-   * Its important that the uvs array you set is at least as long as the positions array.
-   * otherwise the geometry will not be valid.
-   * @param {Float32Array} value - The UVs of the mesh.
+   * Render the text with letter-spacing.
+   *
+   * This method handles rendering text with the correct letter spacing, using either:
+   * 1. Native letter spacing if supported by the browser
+   * 2. Manual letter spacing calculation if not natively supported
+   *
+   * For manual letter spacing, it calculates the position of each character
+   * based on its width and the desired spacing.
+   * @param text - The text to draw
+   * @param style - The text style to apply
+   * @param canvasAndContext - The canvas and context to draw to
+   * @param x - Horizontal position to draw the text
+   * @param y - Vertical position to draw the text
+   * @param isStroke - Whether to render the stroke (true) or fill (false)
+   * @private
    */
-  set uvs(value) {
-    this.attributes.aUV.buffer.data = value;
-  }
-  /** The indices of the mesh. */
-  get indices() {
-    return this.indexBuffer.data;
-  }
-  set indices(value) {
-    this.indexBuffer.data = value;
+  _drawLetterSpacing(text, style, canvasAndContext, x, y, isStroke = false) {
+    const { context } = canvasAndContext;
+    const letterSpacing = style.letterSpacing;
+    let useExperimentalLetterSpacing = false;
+    if (CanvasTextMetrics.experimentalLetterSpacingSupported) {
+      if (CanvasTextMetrics.experimentalLetterSpacing) {
+        context.letterSpacing = `${letterSpacing}px`;
+        context.textLetterSpacing = `${letterSpacing}px`;
+        useExperimentalLetterSpacing = true;
+      } else {
+        context.letterSpacing = "0px";
+        context.textLetterSpacing = "0px";
+      }
+    }
+    if (letterSpacing === 0 || useExperimentalLetterSpacing) {
+      if (isStroke) {
+        context.strokeText(text, x, y);
+      } else {
+        context.fillText(text, x, y);
+      }
+      return;
+    }
+    let currentPosition = x;
+    const stringArray = CanvasTextMetrics.graphemeSegmenter(text);
+    let previousWidth = context.measureText(text).width;
+    let currentWidth = 0;
+    for (let i = 0; i < stringArray.length; ++i) {
+      const currentChar = stringArray[i];
+      if (isStroke) {
+        context.strokeText(currentChar, currentPosition, y);
+      } else {
+        context.fillText(currentChar, currentPosition, y);
+      }
+      let textStr = "";
+      for (let j = i + 1; j < stringArray.length; ++j) {
+        textStr += stringArray[j];
+      }
+      currentWidth = context.measureText(textStr).width;
+      currentPosition += previousWidth - currentWidth + letterSpacing;
+      previousWidth = currentWidth;
+    }
   }
-};
-_MeshGeometry.defaultOptions = {
-  topology: "triangle-list",
-  shrinkBuffersToFit: false
-};
-let MeshGeometry = _MeshGeometry;
+}
+const CanvasTextGenerator = new CanvasTextGeneratorClass();
 
 function textStyleToCSS(style) {
   const stroke = style._stroke;
@@ -1107,28 +2061,85 @@ class HTMLTextStyle extends TextStyle {
   constructor(options = {}) {
     super(options);
     this._cssOverrides = [];
-    this.cssOverrides ?? (this.cssOverrides = options.cssOverrides);
+    this.cssOverrides = options.cssOverrides ?? [];
     this.tagStyles = options.tagStyles ?? {};
   }
-  /** List of style overrides that will be applied to the HTML text. */
+  /**
+   * List of CSS style overrides to apply to the HTML text.
+   * These styles are added after the built-in styles and can override any default styling.
+   * @advanced
+   */
   set cssOverrides(value) {
     this._cssOverrides = value instanceof Array ? value : [value];
     this.update();
   }
+  /** @advanced */
   get cssOverrides() {
     return this._cssOverrides;
   }
-  _generateKey() {
-    this._styleKey = generateTextStyleKey(this) + this._cssOverrides.join("-");
-    return this._styleKey;
-  }
+  /**
+   * Updates the text style and triggers a refresh of the CSS style cache.
+   * This method is called automatically when style properties are changed.
+   * @example
+   * ```ts
+   * // Update after multiple changes
+   * const text = new HTMLText({
+   *     text: 'Hello World',
+   *     style
+   * });
+   *
+   * style.fontSize = 32;
+   * style.fill = '#00ff00';
+   * style.fontFamily = 'Arial';
+   * style.update(); // Apply all changes at once
+   * ```
+   * @advanced
+   * @see {@link HTMLTextStyle#cssStyle} For accessing the generated CSS
+   * @see {@link HTMLTextStyle#cssOverrides} For managing CSS overrides
+   */
   update() {
     this._cssStyle = null;
     super.update();
   }
   /**
    * Creates a new HTMLTextStyle object with the same values as this one.
-   * @returns New cloned HTMLTextStyle object
+   * This creates a deep copy of all style properties, including dropShadow and tag styles.
+   * @example
+   * ```ts
+   * // Create original style
+   * const originalStyle = new HTMLTextStyle({
+   *     fontSize: 24,
+   *     fill: '#ff0000',
+   *     tagStyles: {
+   *         header: { fontSize: 32, fill: '#00ff00' }
+   *     }
+   * });
+   *
+   * // Clone the style
+   * const clonedStyle = originalStyle.clone();
+   *
+   * // Modify cloned style independently
+   * clonedStyle.fontSize = 36;
+   * clonedStyle.fill = '#0000ff';
+   *
+   * // Original style remains unchanged
+   * console.log(originalStyle.fontSize); // Still 24
+   * console.log(originalStyle.fill); // Still '#ff0000'
+   * ```
+   *
+   * Properties that are cloned:
+   * - Basic text properties (fontSize, fontFamily, etc.)
+   * - Fill and stroke styles
+   * - Drop shadow configuration
+   * - CSS overrides
+   * - Tag styles (deep copied)
+   * - Word wrap settings
+   * - Alignment and spacing
+   * @returns {HTMLTextStyle} A new HTMLTextStyle instance with the same properties
+   * @see {@link HTMLTextStyle} For available style properties
+   * @see {@link HTMLTextStyle#cssOverrides} For CSS override handling
+   * @see {@link HTMLTextStyle#tagStyles} For tag style configuration
+   * @standard
    */
   clone() {
     return new HTMLTextStyle({
@@ -1148,9 +2159,14 @@ class HTMLTextStyle extends TextStyle {
       whiteSpace: this.whiteSpace,
       wordWrap: this.wordWrap,
       wordWrapWidth: this.wordWrapWidth,
-      cssOverrides: this.cssOverrides
+      cssOverrides: this.cssOverrides,
+      tagStyles: { ...this.tagStyles }
     });
   }
+  /**
+   * The CSS style string that will be applied to the HTML text.
+   * @advanced
+   */
   get cssStyle() {
     if (!this._cssStyle) {
       this._cssStyle = textStyleToCSS(this);
@@ -1165,6 +2181,7 @@ class HTMLTextStyle extends TextStyle {
    * @param {string} value - CSS style(s) to add.
    * @example
    * style.addOverride('background-color: red');
+   * @advanced
    */
   addOverride(...value) {
     const toAdd = value.filter((v) => !this.cssOverrides.includes(v));
@@ -1178,6 +2195,7 @@ class HTMLTextStyle extends TextStyle {
    * @param {string} value - CSS style to remove.
    * @example
    * style.removeOverride('background-color: red');
+   * @advanced
    */
   removeOverride(...value) {
     const toRemove = value.filter((v) => this.cssOverrides.includes(v));
@@ -1186,12 +2204,83 @@ class HTMLTextStyle extends TextStyle {
       this.update();
     }
   }
+  /**
+   * Sets the fill style for the text. HTML text only supports color fills (string or number values).
+   * Texture fills are not supported and will trigger a warning in debug mode.
+   * @example
+   * ```ts
+   * // Using hex colors
+   * const text = new HTMLText({
+   *     text: 'Colored Text',
+   *     style: {
+   *         fill: 0xff0000 // Red color
+   *     }
+   * });
+   *
+   * // Using CSS color strings
+   * text.style.fill = '#00ff00';     // Hex string (Green)
+   * text.style.fill = 'blue';        // Named color
+   * text.style.fill = 'rgb(255,0,0)' // RGB
+   * text.style.fill = '#f0f';        // Short hex
+   *
+   * // Invalid usage (will trigger warning in debug)
+   * text.style.fill = {
+   *     type: 'pattern',
+   *     texture: Texture.from('pattern.png')
+   * }; // Not supported, falls back to default
+   * ```
+   * @param value - The fill color to use. Must be a string or number.
+   * @throws {Warning} In debug mode when attempting to use unsupported fill types
+   * @see {@link TextStyle#fill} For full fill options in canvas text
+   * @standard
+   */
   set fill(value) {
     if (typeof value !== "string" && typeof value !== "number") {
       warn("[HTMLTextStyle] only color fill is not supported by HTMLText");
     }
     super.fill = value;
   }
+  /**
+   * Sets the stroke style for the text. HTML text only supports color strokes (string or number values).
+   * Texture strokes are not supported and will trigger a warning in debug mode.
+   * @example
+   * ```ts
+   * // Using hex colors
+   * const text = new HTMLText({
+   *     text: 'Outlined Text',
+   *     style: {
+   *         stroke: 0xff0000 // Red outline
+   *     }
+   * });
+   *
+   * // Using CSS color strings
+   * text.style.stroke = '#00ff00';     // Hex string (Green)
+   * text.style.stroke = 'blue';        // Named color
+   * text.style.stroke = 'rgb(255,0,0)' // RGB
+   * text.style.stroke = '#f0f';        // Short hex
+   *
+   * // Using stroke width
+   * text.style = {
+   *     stroke: {
+   *         color: '#ff0000',
+   *         width: 2
+   *     }
+   * };
+   *
+   * // Remove stroke
+   * text.style.stroke = null;
+   *
+   * // Invalid usage (will trigger warning in debug)
+   * text.style.stroke = {
+   *     type: 'pattern',
+   *     texture: Texture.from('pattern.png')
+   * }; // Not supported, falls back to default
+   * ```
+   * @param value - The stroke style to use. Must be a string, number, or stroke configuration object
+   * @throws {Warning} In debug mode when attempting to use unsupported stroke types
+   * @see {@link TextStyle#stroke} For full stroke options in canvas text
+   * @standard
+   */
   set stroke(value) {
     if (value && typeof value !== "string" && typeof value !== "number") {
       warn("[HTMLTextStyle] only color stroke is not supported by HTMLText");
@@ -1238,20 +2327,31 @@ function measureHtmlText(text, style, fontStyleCSS, htmlTextRenderData) {
   };
 }
 
+class GraphicsGpuData {
+  constructor() {
+    this.batches = [];
+    this.batched = false;
+  }
+  destroy() {
+    this.batches.forEach((batch) => {
+      BigPool.return(batch);
+    });
+    this.batches.length = 0;
+  }
+}
 class GraphicsPipe {
   constructor(renderer, adaptor) {
     this.state = State.for2d();
-    // batchable graphics list, used to render batches
-    this._graphicsBatchesHash = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this.renderer = renderer;
     this._adaptor = adaptor;
-    this._adaptor.init();
-    this.renderer.renderableGC.addManagedHash(this, "_graphicsBatchesHash");
+    this.renderer.runners.contextChange.add(this);
+  }
+  contextChange() {
+    this._adaptor.contextChange(this.renderer);
   }
   validateRenderable(graphics) {
     const context = graphics.context;
-    const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
+    const wasBatched = !!graphics._gpuData;
     const gpuContext = this.renderer.graphicsContext.updateGpuContext(context);
     if (gpuContext.isBatchable || wasBatched !== gpuContext.isBatchable) {
       return true;
@@ -1271,19 +2371,12 @@ class GraphicsPipe {
     }
   }
   updateRenderable(graphics) {
-    const batches = this._graphicsBatchesHash[graphics.uid];
-    if (batches) {
-      for (let i = 0; i < batches.length; i++) {
-        const batch = batches[i];
-        batch._batcher.updateElement(batch);
-      }
-    }
-  }
-  destroyRenderable(graphics) {
-    if (this._graphicsBatchesHash[graphics.uid]) {
-      this._removeBatchForRenderable(graphics.uid);
+    const gpuData = this._getGpuDataForRenderable(graphics);
+    const batches = gpuData.batches;
+    for (let i = 0; i < batches.length; i++) {
+      const batch = batches[i];
+      batch._batcher.updateElement(batch);
     }
-    graphics.off("destroyed", this._destroyRenderableBound);
   }
   execute(graphics) {
     if (!graphics.isRenderable)
@@ -1307,59 +2400,46 @@ class GraphicsPipe {
     this._adaptor.execute(this, graphics);
   }
   _rebuild(graphics) {
-    const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
+    const gpuData = this._getGpuDataForRenderable(graphics);
     const gpuContext = this.renderer.graphicsContext.updateGpuContext(graphics.context);
-    if (wasBatched) {
-      this._removeBatchForRenderable(graphics.uid);
-    }
+    gpuData.destroy();
     if (gpuContext.isBatchable) {
-      this._initBatchesForRenderable(graphics);
+      this._updateBatchesForRenderable(graphics, gpuData);
     }
-    graphics.batched = gpuContext.isBatchable;
   }
   _addToBatcher(graphics, instructionSet) {
     const batchPipe = this.renderer.renderPipes.batch;
-    const batches = this._getBatchesForRenderable(graphics);
+    const batches = this._getGpuDataForRenderable(graphics).batches;
     for (let i = 0; i < batches.length; i++) {
       const batch = batches[i];
       batchPipe.addToBatch(batch, instructionSet);
     }
   }
-  _getBatchesForRenderable(graphics) {
-    return this._graphicsBatchesHash[graphics.uid] || this._initBatchesForRenderable(graphics);
+  _getGpuDataForRenderable(graphics) {
+    return graphics._gpuData[this.renderer.uid] || this._initGpuDataForRenderable(graphics);
+  }
+  _initGpuDataForRenderable(graphics) {
+    const gpuData = new GraphicsGpuData();
+    graphics._gpuData[this.renderer.uid] = gpuData;
+    return gpuData;
   }
-  _initBatchesForRenderable(graphics) {
+  _updateBatchesForRenderable(graphics, gpuData) {
     const context = graphics.context;
     const gpuContext = this.renderer.graphicsContext.getGpuContext(context);
     const roundPixels = this.renderer._roundPixels | graphics._roundPixels;
-    const batches = gpuContext.batches.map((batch) => {
+    gpuData.batches = gpuContext.batches.map((batch) => {
       const batchClone = BigPool.get(BatchableGraphics);
       batch.copyTo(batchClone);
       batchClone.renderable = graphics;
       batchClone.roundPixels = roundPixels;
       return batchClone;
     });
-    if (this._graphicsBatchesHash[graphics.uid] === void 0) {
-      graphics.on("destroyed", this._destroyRenderableBound);
-    }
-    this._graphicsBatchesHash[graphics.uid] = batches;
-    return batches;
-  }
-  _removeBatchForRenderable(graphicsUid) {
-    this._graphicsBatchesHash[graphicsUid].forEach((batch) => {
-      BigPool.return(batch);
-    });
-    this._graphicsBatchesHash[graphicsUid] = null;
   }
   destroy() {
     this.renderer = null;
     this._adaptor.destroy();
     this._adaptor = null;
     this.state = null;
-    for (const i in this._graphicsBatchesHash) {
-      this._removeBatchForRenderable(i);
-    }
-    this._graphicsBatchesHash = null;
   }
 }
 /** @ignore */
@@ -1525,6 +2605,10 @@ class BatchableMesh {
   }
 }
 
+class MeshGpuData {
+  destroy() {
+  }
+}
 class MeshPipe {
   constructor(renderer, adaptor) {
     this.localUniforms = new UniformGroup({
@@ -1535,14 +2619,9 @@ class MeshPipe {
     this.localUniformsBindGroup = new BindGroup({
       0: this.localUniforms
     });
-    this._meshDataHash = /* @__PURE__ */ Object.create(null);
-    this._gpuBatchableMeshHash = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this.renderer = renderer;
     this._adaptor = adaptor;
     this._adaptor.init();
-    renderer.renderableGC.addManagedHash(this, "_gpuBatchableMeshHash");
-    renderer.renderableGC.addManagedHash(this, "_meshDataHash");
   }
   validateRenderable(mesh) {
     const meshData = this._getMeshData(mesh);
@@ -1584,21 +2663,12 @@ class MeshPipe {
   }
   updateRenderable(mesh) {
     if (mesh.batched) {
-      const gpuBatchableMesh = this._gpuBatchableMeshHash[mesh.uid];
+      const gpuBatchableMesh = this._getBatchableMesh(mesh);
       gpuBatchableMesh.setTexture(mesh._texture);
       gpuBatchableMesh.geometry = mesh._geometry;
       gpuBatchableMesh._batcher.updateElement(gpuBatchableMesh);
     }
   }
-  destroyRenderable(mesh) {
-    this._meshDataHash[mesh.uid] = null;
-    const gpuMesh = this._gpuBatchableMeshHash[mesh.uid];
-    if (gpuMesh) {
-      BigPool.return(gpuMesh);
-      this._gpuBatchableMeshHash[mesh.uid] = null;
-    }
-    mesh.off("destroyed", this._destroyRenderableBound);
-  }
   execute(mesh) {
     if (!mesh.isRenderable)
       return;
@@ -1615,37 +2685,33 @@ class MeshPipe {
     this._adaptor.execute(this, mesh);
   }
   _getMeshData(mesh) {
-    return this._meshDataHash[mesh.uid] || this._initMeshData(mesh);
+    var _a, _b;
+    (_a = mesh._gpuData)[_b = this.renderer.uid] || (_a[_b] = new MeshGpuData());
+    return mesh._gpuData[this.renderer.uid].meshData || this._initMeshData(mesh);
   }
   _initMeshData(mesh) {
-    this._meshDataHash[mesh.uid] = {
+    mesh._gpuData[this.renderer.uid].meshData = {
       batched: mesh.batched,
       indexSize: mesh._geometry.indices?.length,
       vertexSize: mesh._geometry.positions?.length
     };
-    mesh.on("destroyed", this._destroyRenderableBound);
-    return this._meshDataHash[mesh.uid];
+    return mesh._gpuData[this.renderer.uid].meshData;
   }
   _getBatchableMesh(mesh) {
-    return this._gpuBatchableMeshHash[mesh.uid] || this._initBatchableMesh(mesh);
+    var _a, _b;
+    (_a = mesh._gpuData)[_b = this.renderer.uid] || (_a[_b] = new MeshGpuData());
+    return mesh._gpuData[this.renderer.uid].batchableMesh || this._initBatchableMesh(mesh);
   }
   _initBatchableMesh(mesh) {
-    const gpuMesh = BigPool.get(BatchableMesh);
+    const gpuMesh = new BatchableMesh();
     gpuMesh.renderable = mesh;
     gpuMesh.setTexture(mesh._texture);
     gpuMesh.transform = mesh.groupTransform;
     gpuMesh.roundPixels = this.renderer._roundPixels | mesh._roundPixels;
-    this._gpuBatchableMeshHash[mesh.uid] = gpuMesh;
+    mesh._gpuData[this.renderer.uid].batchableMesh = gpuMesh;
     return gpuMesh;
   }
   destroy() {
-    for (const i in this._gpuBatchableMeshHash) {
-      if (this._gpuBatchableMeshHash[i]) {
-        BigPool.return(this._gpuBatchableMeshHash[i]);
-      }
-    }
-    this._gpuBatchableMeshHash = null;
-    this._meshDataHash = null;
     this.localUniforms = null;
     this.localUniformsBindGroup = null;
     this._adaptor.destroy();
@@ -1728,7 +2794,7 @@ function generateParticleUpdateFunction(properties) {
 function generateUpdateFunction(properties, dynamic) {
   const funcFragments = [];
   funcFragments.push(`
-      
+
         var index = 0;
 
         for (let i = 0; i < ps.length; ++i)
@@ -1925,10 +2991,9 @@ class ParticleContainerPipe {
    * @param adaptor
    */
   constructor(renderer, adaptor) {
+    /** @internal */
     this.state = State.for2d();
-    this._gpuBufferHash = /* @__PURE__ */ Object.create(null);
-    // eslint-disable-next-line max-len
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
+    /** Local uniforms that are used for rendering particles. */
     this.localUniforms = new UniformGroup({
       uTranslationMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
       uColor: { value: new Float32Array(4), type: "vec4<f32>" },
@@ -1948,24 +3013,17 @@ class ParticleContainerPipe {
     instructionSet.add(renderable);
   }
   getBuffers(renderable) {
-    return this._gpuBufferHash[renderable.uid] || this._initBuffer(renderable);
+    return renderable._gpuData[this.renderer.uid] || this._initBuffer(renderable);
   }
   _initBuffer(renderable) {
-    this._gpuBufferHash[renderable.uid] = new ParticleBuffer({
+    renderable._gpuData[this.renderer.uid] = new ParticleBuffer({
       size: renderable.particleChildren.length,
       properties: renderable._properties
     });
-    renderable.on("destroyed", this._destroyRenderableBound);
-    return this._gpuBufferHash[renderable.uid];
+    return renderable._gpuData[this.renderer.uid];
   }
   updateRenderable(_renderable) {
   }
-  destroyRenderable(renderable) {
-    const buffer = this._gpuBufferHash[renderable.uid];
-    buffer.destroy();
-    this._gpuBufferHash[renderable.uid] = null;
-    renderable.off("destroyed", this._destroyRenderableBound);
-  }
   execute(container) {
     const children = container.particleChildren;
     if (children.length === 0) {
@@ -2122,12 +3180,18 @@ _NineSliceGeometry.defaultOptions = {
 };
 let NineSliceGeometry = _NineSliceGeometry;
 
+class NineSliceSpriteGpuData extends BatchableMesh {
+  constructor() {
+    super();
+    this.geometry = new NineSliceGeometry();
+  }
+  destroy() {
+    this.geometry.destroy();
+  }
+}
 class NineSliceSpritePipe {
   constructor(renderer) {
-    this._gpuSpriteHash = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_gpuSpriteHash");
   }
   addRenderable(sprite, instructionSet) {
     const gpuSprite = this._getGpuSprite(sprite);
@@ -2136,7 +3200,7 @@ class NineSliceSpritePipe {
     this._renderer.renderPipes.batch.addToBatch(gpuSprite, instructionSet);
   }
   updateRenderable(sprite) {
-    const gpuSprite = this._gpuSpriteHash[sprite.uid];
+    const gpuSprite = this._getGpuSprite(sprite);
     if (sprite.didViewUpdate)
       this._updateBatchableSprite(sprite, gpuSprite);
     gpuSprite._batcher.updateElement(gpuSprite);
@@ -2148,40 +3212,26 @@ class NineSliceSpritePipe {
       sprite._texture
     );
   }
-  destroyRenderable(sprite) {
-    const batchableMesh = this._gpuSpriteHash[sprite.uid];
-    BigPool.return(batchableMesh.geometry);
-    BigPool.return(batchableMesh);
-    this._gpuSpriteHash[sprite.uid] = null;
-    sprite.off("destroyed", this._destroyRenderableBound);
-  }
   _updateBatchableSprite(sprite, batchableSprite) {
     batchableSprite.geometry.update(sprite);
     batchableSprite.setTexture(sprite._texture);
   }
   _getGpuSprite(sprite) {
-    return this._gpuSpriteHash[sprite.uid] || this._initGPUSprite(sprite);
+    return sprite._gpuData[this._renderer.uid] || this._initGPUSprite(sprite);
   }
   _initGPUSprite(sprite) {
-    const batchableMesh = BigPool.get(BatchableMesh);
-    batchableMesh.geometry = BigPool.get(NineSliceGeometry);
+    const gpuData = sprite._gpuData[this._renderer.uid] = new NineSliceSpriteGpuData();
+    const batchableMesh = gpuData;
     batchableMesh.renderable = sprite;
     batchableMesh.transform = sprite.groupTransform;
     batchableMesh.texture = sprite._texture;
     batchableMesh.roundPixels = this._renderer._roundPixels | sprite._roundPixels;
-    this._gpuSpriteHash[sprite.uid] = batchableMesh;
     if (!sprite.didViewUpdate) {
       this._updateBatchableSprite(sprite, batchableMesh);
     }
-    sprite.on("destroyed", this._destroyRenderableBound);
-    return batchableMesh;
+    return gpuData;
   }
   destroy() {
-    for (const i in this._gpuSpriteHash) {
-      const batchableMesh = this._gpuSpriteHash[i];
-      batchableMesh.geometry.destroy();
-    }
-    this._gpuSpriteHash = null;
     this._renderer = null;
   }
 }
@@ -2254,7 +3304,7 @@ const tilingBit = {
             if(unclamped.x == coord.x && unclamped.y == coord.y)
             {
                 bias = -32.;
-            } 
+            }
 
             outColor = textureSampleBias(uTexture, uSampler, coord, bias);
         `
@@ -2269,7 +3319,7 @@ const tilingBitGl = {
       `
             uniform mat3 uTextureTransform;
             uniform vec4 uSizeAnchor;
-        
+
         `
     ),
     main: (
@@ -2299,9 +3349,9 @@ const tilingBitGl = {
         coord = (uMapCoord * vec3(coord, 1.0)).xy;
         vec2 unclamped = coord;
         coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);
-        
+
         outColor = texture(uTexture, coord, unclamped == coord ? 0.0 : -32.0);// lod-bias very negative to force lod 0
-    
+
         `
     )
   }
@@ -2404,7 +3454,7 @@ function setPositions(tilingSprite, positions) {
 
 function applyMatrix(array, stride, offset, matrix) {
   let index = 0;
-  const size = array.length / (stride);
+  const size = array.length / (stride );
   const a = matrix.a;
   const b = matrix.b;
   const c = matrix.c;
@@ -2446,13 +3496,24 @@ function setUvs(tilingSprite, uvs) {
 }
 
 const sharedQuad = new QuadGeometry();
+class TilingSpriteGpuData {
+  constructor() {
+    this.canBatch = true;
+    this.geometry = new MeshGeometry({
+      indices: sharedQuad.indices.slice(),
+      positions: sharedQuad.positions.slice(),
+      uvs: sharedQuad.uvs.slice()
+    });
+  }
+  destroy() {
+    this.geometry.destroy();
+    this.shader?.destroy();
+  }
+}
 class TilingSpritePipe {
   constructor(renderer) {
     this._state = State.default2d;
-    this._tilingSpriteDataHash = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_tilingSpriteDataHash");
   }
   validateRenderable(renderable) {
     const tilingSpriteData = this._getTilingSpriteData(renderable);
@@ -2493,7 +3554,7 @@ class TilingSpritePipe {
     }
   }
   execute(tilingSprite) {
-    const { shader } = this._tilingSpriteDataHash[tilingSprite.uid];
+    const { shader } = this._getTilingSpriteData(tilingSprite);
     shader.groups[0] = this._renderer.globalUniforms.bindGroup;
     const localUniforms = shader.resources.localUniforms.uniforms;
     localUniforms.uTransformMatrix = tilingSprite.groupTransform;
@@ -2530,29 +3591,14 @@ class TilingSpritePipe {
       );
     }
   }
-  destroyRenderable(tilingSprite) {
-    const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
-    tilingSpriteData.batchableMesh = null;
-    tilingSpriteData.shader?.destroy();
-    this._tilingSpriteDataHash[tilingSprite.uid] = null;
-    tilingSprite.off("destroyed", this._destroyRenderableBound);
-  }
   _getTilingSpriteData(renderable) {
-    return this._tilingSpriteDataHash[renderable.uid] || this._initTilingSpriteData(renderable);
+    return renderable._gpuData[this._renderer.uid] || this._initTilingSpriteData(renderable);
   }
   _initTilingSpriteData(tilingSprite) {
-    const geometry = new MeshGeometry({
-      indices: sharedQuad.indices,
-      positions: sharedQuad.positions.slice(),
-      uvs: sharedQuad.uvs.slice()
-    });
-    this._tilingSpriteDataHash[tilingSprite.uid] = {
-      canBatch: true,
-      renderable: tilingSprite,
-      geometry
-    };
-    tilingSprite.on("destroyed", this._destroyRenderableBound);
-    return this._tilingSpriteDataHash[tilingSprite.uid];
+    const gpuData = new TilingSpriteGpuData();
+    gpuData.renderable = tilingSprite;
+    tilingSprite._gpuData[this._renderer.uid] = gpuData;
+    return gpuData;
   }
   _updateBatchableMesh(tilingSprite) {
     const renderableData = this._getTilingSpriteData(tilingSprite);
@@ -2566,10 +3612,6 @@ class TilingSpritePipe {
     setPositions(tilingSprite, geometry.positions);
   }
   destroy() {
-    for (const i in this._tilingSpriteDataHash) {
-      this.destroyRenderable(this._tilingSpriteDataHash[i].renderable);
-    }
-    this._tilingSpriteDataHash = null;
     this._renderer = null;
   }
   _updateCanBatch(tilingSprite) {
@@ -2641,7 +3683,7 @@ const localUniformMSDFBit = {
     ),
     main: (
       /* wgsl */
-      ` 
+      `
             outColor = vec4<f32>(calculateMSDFAlpha(outColor, localUniforms.uColor, localUniforms.uDistance));
         `
     )
@@ -2684,7 +3726,7 @@ const localUniformMSDFBitGl = {
     ),
     main: (
       /* glsl */
-      ` 
+      `
             outColor = vec4(calculateMSDFAlpha(outColor, vColor, uDistance));
         `
     )
@@ -2698,12 +3740,12 @@ const mSDFBit = {
       /* wgsl */
       `
             fn calculateMSDFAlpha(msdfColor:vec4<f32>, shapeColor:vec4<f32>, distance:f32) -> f32 {
-                
+
                 // MSDF
                 var median = msdfColor.r + msdfColor.g + msdfColor.b -
                     min(msdfColor.r, min(msdfColor.g, msdfColor.b)) -
                     max(msdfColor.r, max(msdfColor.g, msdfColor.b));
-            
+
                 // SDF
                 median = min(median, msdfColor.a);
 
@@ -2721,7 +3763,7 @@ const mSDFBit = {
                 var coverage: f32 = pow(shapeColor.a * alpha, gamma);
 
                 return coverage;
-             
+
             }
         `
     )
@@ -2734,18 +3776,18 @@ const mSDFBitGl = {
       /* glsl */
       `
             float calculateMSDFAlpha(vec4 msdfColor, vec4 shapeColor, float distance) {
-                
+
                 // MSDF
                 float median = msdfColor.r + msdfColor.g + msdfColor.b -
                                 min(msdfColor.r, min(msdfColor.g, msdfColor.b)) -
                                 max(msdfColor.r, max(msdfColor.g, msdfColor.b));
-               
+
                 // SDF
                 median = min(median, msdfColor.a);
-            
+
                 float screenPxDistance = distance * (median - 0.5);
                 float alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
-           
+
                 if (median < 0.01) {
                     alpha = 0.0;
                 } else if (median > 0.99) {
@@ -2755,8 +3797,8 @@ const mSDFBitGl = {
                 // Gamma correction for coverage-like alpha
                 float luma = dot(shapeColor.rgb, vec3(0.299, 0.587, 0.114));
                 float gamma = mix(1.0, 1.0 / 2.2, luma);
-                float coverage = pow(shapeColor.a * alpha, gamma);  
-              
+                float coverage = pow(shapeColor.a * alpha, gamma);
+
                 return coverage;
             }
         `
@@ -2767,14 +3809,13 @@ const mSDFBitGl = {
 let gpuProgram;
 let glProgram;
 class SdfShader extends Shader {
-  constructor() {
+  constructor(maxTextures) {
     const uniforms = new UniformGroup({
       uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
       uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
       uDistance: { value: 4, type: "f32" },
       uRound: { value: 0, type: "f32" }
     });
-    const maxTextures = getMaxTexturesPerBatch();
     gpuProgram ?? (gpuProgram = compileHighShaderGpuProgram({
       name: "sdf-shader",
       bits: [
@@ -2806,10 +3847,16 @@ class SdfShader extends Shader {
   }
 }
 
+class BitmapTextGraphics extends Graphics {
+  destroy() {
+    if (this.context.customShader) {
+      this.context.customShader.destroy();
+    }
+    super.destroy();
+  }
+}
 class BitmapTextPipe {
   constructor(renderer) {
-    this._gpuBitmapText = {};
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this._renderer = renderer;
     this._renderer.renderableGC.addManagedHash(this, "_gpuBitmapText");
   }
@@ -2833,19 +3880,6 @@ class BitmapTextPipe {
       this._updateDistanceField(bitmapText);
     }
   }
-  destroyRenderable(bitmapText) {
-    bitmapText.off("destroyed", this._destroyRenderableBound);
-    this._destroyRenderableByUid(bitmapText.uid);
-  }
-  _destroyRenderableByUid(renderableUid) {
-    const context = this._gpuBitmapText[renderableUid].context;
-    if (context.customShader) {
-      BigPool.return(context.customShader);
-      context.customShader = null;
-    }
-    BigPool.return(this._gpuBitmapText[renderableUid]);
-    this._gpuBitmapText[renderableUid] = null;
-  }
   updateRenderable(bitmapText) {
     const graphicsRenderable = this._getGpuBitmapText(bitmapText);
     syncWithProxy(bitmapText, graphicsRenderable);
@@ -2860,14 +3894,13 @@ class BitmapTextPipe {
     context.clear();
     if (bitmapFont.distanceField.type !== "none") {
       if (!context.customShader) {
-        context.customShader = BigPool.get(SdfShader);
+        context.customShader = new SdfShader(this._renderer.limits.maxBatchableTextures);
       }
     }
-    const chars = Array.from(bitmapText.text);
+    const chars = CanvasTextMetrics.graphemeSegmenter(bitmapText.text);
     const style = bitmapText._style;
     let currentY = bitmapFont.baseLineOffset;
     const bitmapTextLayout = getBitmapTextLayout(chars, style, bitmapFont, true);
-    let index = 0;
     const padding = style.padding;
     const scale = bitmapTextLayout.scale;
     let tx = bitmapTextLayout.width;
@@ -2881,7 +3914,7 @@ class BitmapTextPipe {
     for (let i = 0; i < bitmapTextLayout.lines.length; i++) {
       const line = bitmapTextLayout.lines[i];
       for (let j = 0; j < line.charPositions.length; j++) {
-        const char = chars[index++];
+        const char = line.chars[j];
         const charData = bitmapFont.chars[char];
         if (charData?.texture) {
           context.texture(
@@ -2896,14 +3929,13 @@ class BitmapTextPipe {
     }
   }
   _getGpuBitmapText(bitmapText) {
-    return this._gpuBitmapText[bitmapText.uid] || this.initGpuText(bitmapText);
+    return bitmapText._gpuData[this._renderer.uid] || this.initGpuText(bitmapText);
   }
   initGpuText(bitmapText) {
-    const proxyRenderable = BigPool.get(Graphics);
-    this._gpuBitmapText[bitmapText.uid] = proxyRenderable;
+    const proxyRenderable = new BitmapTextGraphics();
+    bitmapText._gpuData[this._renderer.uid] = proxyRenderable;
     this._updateContext(bitmapText, proxyRenderable);
-    bitmapText.on("destroyed", this._destroyRenderableBound);
-    return this._gpuBitmapText[bitmapText.uid];
+    return proxyRenderable;
   }
   _updateDistanceField(bitmapText) {
     const context = this._getGpuBitmapText(bitmapText).context;
@@ -2918,10 +3950,6 @@ class BitmapTextPipe {
     context.customShader.resources.localUniforms.uniforms.uDistance = distance;
   }
   destroy() {
-    for (const uid in this._gpuBitmapText) {
-      this._destroyRenderableByUid(uid);
-    }
-    this._gpuBitmapText = null;
     this._renderer = null;
   }
 }
@@ -2946,136 +3974,102 @@ function syncWithProxy(container, proxy) {
   proxy._roundPixels = container._roundPixels;
 }
 
+class BatchableHTMLText extends BatchableSprite {
+  /**
+   * Creates an instance of BatchableHTMLText.
+   * @param renderer - The renderer instance to be used.
+   */
+  constructor(renderer) {
+    super();
+    this.generatingTexture = false;
+    this._renderer = renderer;
+    renderer.runners.resolutionChange.add(this);
+  }
+  /** Handles resolution changes for the HTML text. If the text has auto resolution enabled, it triggers a view update. */
+  resolutionChange() {
+    const text = this.renderable;
+    if (text._autoResolution) {
+      text.onViewUpdate();
+    }
+  }
+  /** Destroys the BatchableHTMLText instance. Returns the texture promise to the renderer and cleans up references. */
+  destroy() {
+    this._renderer.htmlText.returnTexturePromise(this.texturePromise);
+    this.texturePromise = null;
+    this._renderer = null;
+  }
+}
+
 function updateTextBounds(batchableSprite, text) {
   const { texture, bounds } = batchableSprite;
+  const padding = text._style._getFinalPadding();
   updateQuadBounds(bounds, text._anchor, texture);
-  const padding = text._style.padding;
-  bounds.minX -= padding;
-  bounds.minY -= padding;
-  bounds.maxX -= padding;
-  bounds.maxY -= padding;
+  const paddingOffset = text._anchor._x * padding * 2;
+  const paddingOffsetY = text._anchor._y * padding * 2;
+  bounds.minX -= padding - paddingOffset;
+  bounds.minY -= padding - paddingOffsetY;
+  bounds.maxX -= padding - paddingOffset;
+  bounds.maxY -= padding - paddingOffsetY;
 }
 
 class HTMLTextPipe {
   constructor(renderer) {
-    this._gpuText = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this._renderer = renderer;
-    this._renderer.runners.resolutionChange.add(this);
-    this._renderer.renderableGC.addManagedHash(this, "_gpuText");
-  }
-  resolutionChange() {
-    for (const i in this._gpuText) {
-      const gpuText = this._gpuText[i];
-      if (!gpuText)
-        continue;
-      const text = gpuText.batchableSprite.renderable;
-      if (text._autoResolution) {
-        text._resolution = this._renderer.resolution;
-        text.onViewUpdate();
-      }
-    }
   }
   validateRenderable(htmlText) {
-    const gpuText = this._getGpuText(htmlText);
-    const newKey = htmlText._getKey();
-    if (gpuText.textureNeedsUploading) {
-      gpuText.textureNeedsUploading = false;
-      return true;
-    }
-    if (gpuText.currentKey !== newKey) {
-      return true;
-    }
-    return false;
+    return htmlText._didTextUpdate;
   }
   addRenderable(htmlText, instructionSet) {
-    const gpuText = this._getGpuText(htmlText);
-    const batchableSprite = gpuText.batchableSprite;
-    if (htmlText._didTextUpdate) {
-      this._updateText(htmlText);
-    }
-    this._renderer.renderPipes.batch.addToBatch(batchableSprite, instructionSet);
-  }
-  updateRenderable(htmlText) {
-    const gpuText = this._getGpuText(htmlText);
-    const batchableSprite = gpuText.batchableSprite;
+    const batchableHTMLText = this._getGpuText(htmlText);
     if (htmlText._didTextUpdate) {
-      this._updateText(htmlText);
-    }
-    batchableSprite._batcher.updateElement(batchableSprite);
-  }
-  destroyRenderable(htmlText) {
-    htmlText.off("destroyed", this._destroyRenderableBound);
-    this._destroyRenderableById(htmlText.uid);
-  }
-  _destroyRenderableById(htmlTextUid) {
-    const gpuText = this._gpuText[htmlTextUid];
-    this._renderer.htmlText.decreaseReferenceCount(gpuText.currentKey);
-    BigPool.return(gpuText.batchableSprite);
-    this._gpuText[htmlTextUid] = null;
-  }
-  _updateText(htmlText) {
-    const newKey = htmlText._getKey();
-    const gpuText = this._getGpuText(htmlText);
-    const batchableSprite = gpuText.batchableSprite;
-    if (gpuText.currentKey !== newKey) {
       this._updateGpuText(htmlText).catch((e) => {
         console.error(e);
       });
+      htmlText._didTextUpdate = false;
+      updateTextBounds(batchableHTMLText, htmlText);
     }
-    htmlText._didTextUpdate = false;
-    updateTextBounds(batchableSprite, htmlText);
+    this._renderer.renderPipes.batch.addToBatch(batchableHTMLText, instructionSet);
+  }
+  updateRenderable(htmlText) {
+    const batchableHTMLText = this._getGpuText(htmlText);
+    batchableHTMLText._batcher.updateElement(batchableHTMLText);
   }
   async _updateGpuText(htmlText) {
     htmlText._didTextUpdate = false;
-    const gpuText = this._getGpuText(htmlText);
-    if (gpuText.generatingTexture)
+    const batchableHTMLText = this._getGpuText(htmlText);
+    if (batchableHTMLText.generatingTexture)
       return;
-    const newKey = htmlText._getKey();
-    this._renderer.htmlText.decreaseReferenceCount(gpuText.currentKey);
-    gpuText.generatingTexture = true;
-    gpuText.currentKey = newKey;
-    const resolution = htmlText.resolution ?? this._renderer.resolution;
-    const texture = await this._renderer.htmlText.getManagedTexture(
-      htmlText.text,
-      resolution,
-      htmlText._style,
-      htmlText._getKey()
-    );
-    const batchableSprite = gpuText.batchableSprite;
-    batchableSprite.texture = gpuText.texture = texture;
-    gpuText.generatingTexture = false;
-    gpuText.textureNeedsUploading = true;
-    htmlText.onViewUpdate();
-    updateTextBounds(batchableSprite, htmlText);
+    if (batchableHTMLText.texturePromise) {
+      this._renderer.htmlText.returnTexturePromise(batchableHTMLText.texturePromise);
+      batchableHTMLText.texturePromise = null;
+    }
+    batchableHTMLText.generatingTexture = true;
+    htmlText._resolution = htmlText._autoResolution ? this._renderer.resolution : htmlText.resolution;
+    const texturePromise = this._renderer.htmlText.getTexturePromise(htmlText);
+    batchableHTMLText.texturePromise = texturePromise;
+    batchableHTMLText.texture = await texturePromise;
+    const renderGroup = htmlText.renderGroup || htmlText.parentRenderGroup;
+    if (renderGroup) {
+      renderGroup.structureDidChange = true;
+    }
+    batchableHTMLText.generatingTexture = false;
+    updateTextBounds(batchableHTMLText, htmlText);
   }
   _getGpuText(htmlText) {
-    return this._gpuText[htmlText.uid] || this.initGpuText(htmlText);
+    return htmlText._gpuData[this._renderer.uid] || this.initGpuText(htmlText);
   }
   initGpuText(htmlText) {
-    const gpuTextData = {
-      texture: Texture.EMPTY,
-      currentKey: "--",
-      batchableSprite: BigPool.get(BatchableSprite),
-      textureNeedsUploading: false,
-      generatingTexture: false
-    };
-    const batchableSprite = gpuTextData.batchableSprite;
-    batchableSprite.renderable = htmlText;
-    batchableSprite.transform = htmlText.groupTransform;
-    batchableSprite.texture = Texture.EMPTY;
-    batchableSprite.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
-    batchableSprite.roundPixels = this._renderer._roundPixels | htmlText._roundPixels;
+    const batchableHTMLText = new BatchableHTMLText(this._renderer);
+    batchableHTMLText.renderable = htmlText;
+    batchableHTMLText.transform = htmlText.groupTransform;
+    batchableHTMLText.texture = Texture.EMPTY;
+    batchableHTMLText.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
+    batchableHTMLText.roundPixels = this._renderer._roundPixels | htmlText._roundPixels;
     htmlText._resolution = htmlText._autoResolution ? this._renderer.resolution : htmlText.resolution;
-    this._gpuText[htmlText.uid] = gpuTextData;
-    htmlText.on("destroyed", this._destroyRenderableBound);
-    return gpuTextData;
+    htmlText._gpuData[this._renderer.uid] = batchableHTMLText;
+    return batchableHTMLText;
   }
   destroy() {
-    for (const i in this._gpuText) {
-      this._destroyRenderableById(i);
-    }
-    this._gpuText = null;
     this._renderer = null;
   }
 }
@@ -3233,34 +4227,21 @@ function loadSVGImage(image, url, delay) {
 
 class HTMLTextSystem {
   constructor(renderer) {
-    this._activeTextures = {};
     this._renderer = renderer;
     this._createCanvas = renderer.type === RendererType.WEBGPU;
   }
+  /**
+   * @param options
+   * @deprecated Use getTexturePromise instead
+   */
   getTexture(options) {
-    return this._buildTexturePromise(
-      options.text,
-      options.resolution,
-      options.style
-    );
+    return this.getTexturePromise(options);
   }
-  getManagedTexture(text, resolution, style, textKey) {
-    if (this._activeTextures[textKey]) {
-      this._increaseReferenceCount(textKey);
-      return this._activeTextures[textKey].promise;
-    }
-    const promise = this._buildTexturePromise(text, resolution, style).then((texture) => {
-      this._activeTextures[textKey].texture = texture;
-      return texture;
-    });
-    this._activeTextures[textKey] = {
-      texture: null,
-      promise,
-      usageCount: 1
-    };
-    return promise;
+  getTexturePromise(options) {
+    return this._buildTexturePromise(options);
   }
-  async _buildTexturePromise(text, resolution, style) {
+  async _buildTexturePromise(options) {
+    const { text, style, resolution, textureStyle } = options;
     const htmlTextData = BigPool.get(HTMLTextRenderData);
     const fontFamilies = extractFontFamilies(text, style);
     const fontCSS = await getFontCss(
@@ -3288,6 +4269,8 @@ class HTMLTextSystem {
       image.height - uvSafeOffset,
       resolution
     );
+    if (textureStyle)
+      texture.source.style = textureStyle;
     if (this._createCanvas) {
       this._renderer.texture.initSource(texture.source);
       CanvasPool.returnCanvasAndContext(canvasAndContext);
@@ -3295,38 +4278,20 @@ class HTMLTextSystem {
     BigPool.return(htmlTextData);
     return texture;
   }
-  _increaseReferenceCount(textKey) {
-    this._activeTextures[textKey].usageCount++;
-  }
-  decreaseReferenceCount(textKey) {
-    const activeTexture = this._activeTextures[textKey];
-    if (!activeTexture)
-      return;
-    activeTexture.usageCount--;
-    if (activeTexture.usageCount === 0) {
-      if (activeTexture.texture) {
-        this._cleanUp(activeTexture);
-      } else {
-        activeTexture.promise.then((texture) => {
-          activeTexture.texture = texture;
-          this._cleanUp(activeTexture);
-        }).catch(() => {
-          warn("HTMLTextSystem: Failed to clean texture");
-        });
-      }
-      this._activeTextures[textKey] = null;
-    }
-  }
-  _cleanUp(activeTexture) {
-    TexturePool.returnTexture(activeTexture.texture);
-    activeTexture.texture.source.resource = null;
-    activeTexture.texture.source.uploadMethodId = "unknown";
+  returnTexturePromise(texturePromise) {
+    texturePromise.then((texture) => {
+      this._cleanUp(texture);
+    }).catch(() => {
+      warn("HTMLTextSystem: Failed to clean texture");
+    });
   }
-  getReferenceCount(textKey) {
-    return this._activeTextures[textKey].usageCount;
+  _cleanUp(texture) {
+    TexturePool.returnTexture(texture, true);
+    texture.source.resource = null;
+    texture.source.uploadMethodId = "unknown";
   }
   destroy() {
-    this._activeTextures = null;
+    this._renderer = null;
   }
 }
 /** @ignore */
@@ -3338,110 +4303,66 @@ HTMLTextSystem.extension = {
   ],
   name: "htmlText"
 };
-HTMLTextSystem.defaultFontOptions = {
-  fontFamily: "Arial",
-  fontStyle: "normal",
-  fontWeight: "normal"
-};
 
-class CanvasTextPipe {
+class BatchableText extends BatchableSprite {
   constructor(renderer) {
-    this._gpuText = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
+    super();
     this._renderer = renderer;
-    this._renderer.runners.resolutionChange.add(this);
-    this._renderer.renderableGC.addManagedHash(this, "_gpuText");
+    renderer.runners.resolutionChange.add(this);
   }
   resolutionChange() {
-    for (const i in this._gpuText) {
-      const gpuText = this._gpuText[i];
-      if (!gpuText)
-        continue;
-      const text = gpuText.batchableSprite.renderable;
-      if (text._autoResolution) {
-        text._resolution = this._renderer.resolution;
-        text.onViewUpdate();
-      }
+    const text = this.renderable;
+    if (text._autoResolution) {
+      text.onViewUpdate();
     }
   }
+  destroy() {
+    this._renderer.canvasText.returnTexture(this.texture);
+    this._renderer = null;
+  }
+}
+
+class CanvasTextPipe {
+  constructor(renderer) {
+    this._renderer = renderer;
+  }
   validateRenderable(text) {
-    const gpuText = this._getGpuText(text);
-    const newKey = text._getKey();
-    if (gpuText.currentKey !== newKey) {
-      return true;
-    }
-    return false;
+    return text._didTextUpdate;
   }
   addRenderable(text, instructionSet) {
-    const gpuText = this._getGpuText(text);
-    const batchableSprite = gpuText.batchableSprite;
+    const batchableText = this._getGpuText(text);
     if (text._didTextUpdate) {
-      this._updateText(text);
+      this._updateGpuText(text);
+      text._didTextUpdate = false;
     }
-    this._renderer.renderPipes.batch.addToBatch(batchableSprite, instructionSet);
+    this._renderer.renderPipes.batch.addToBatch(batchableText, instructionSet);
   }
   updateRenderable(text) {
-    const gpuText = this._getGpuText(text);
-    const batchableSprite = gpuText.batchableSprite;
-    if (text._didTextUpdate) {
-      this._updateText(text);
-    }
-    batchableSprite._batcher.updateElement(batchableSprite);
-  }
-  destroyRenderable(text) {
-    text.off("destroyed", this._destroyRenderableBound);
-    this._destroyRenderableById(text.uid);
-  }
-  _destroyRenderableById(textUid) {
-    const gpuText = this._gpuText[textUid];
-    this._renderer.canvasText.decreaseReferenceCount(gpuText.currentKey);
-    BigPool.return(gpuText.batchableSprite);
-    this._gpuText[textUid] = null;
-  }
-  _updateText(text) {
-    const newKey = text._getKey();
-    const gpuText = this._getGpuText(text);
-    const batchableSprite = gpuText.batchableSprite;
-    if (gpuText.currentKey !== newKey) {
-      this._updateGpuText(text);
-    }
-    text._didTextUpdate = false;
-    updateTextBounds(batchableSprite, text);
+    const batchableText = this._getGpuText(text);
+    batchableText._batcher.updateElement(batchableText);
   }
   _updateGpuText(text) {
-    const gpuText = this._getGpuText(text);
-    const batchableSprite = gpuText.batchableSprite;
-    if (gpuText.texture) {
-      this._renderer.canvasText.decreaseReferenceCount(gpuText.currentKey);
+    const batchableText = this._getGpuText(text);
+    if (batchableText.texture) {
+      this._renderer.canvasText.returnTexture(batchableText.texture);
     }
-    gpuText.texture = batchableSprite.texture = this._renderer.canvasText.getManagedTexture(text);
-    gpuText.currentKey = text._getKey();
-    batchableSprite.texture = gpuText.texture;
+    text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
+    batchableText.texture = batchableText.texture = this._renderer.canvasText.getTexture(text);
+    updateTextBounds(batchableText, text);
   }
   _getGpuText(text) {
-    return this._gpuText[text.uid] || this.initGpuText(text);
+    return text._gpuData[this._renderer.uid] || this.initGpuText(text);
   }
   initGpuText(text) {
-    const gpuTextData = {
-      texture: null,
-      currentKey: "--",
-      batchableSprite: BigPool.get(BatchableSprite)
-    };
-    gpuTextData.batchableSprite.renderable = text;
-    gpuTextData.batchableSprite.transform = text.groupTransform;
-    gpuTextData.batchableSprite.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
-    gpuTextData.batchableSprite.roundPixels = this._renderer._roundPixels | text._roundPixels;
-    this._gpuText[text.uid] = gpuTextData;
-    text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
-    this._updateText(text);
-    text.on("destroyed", this._destroyRenderableBound);
-    return gpuTextData;
+    const batchableText = new BatchableText(this._renderer);
+    batchableText.renderable = text;
+    batchableText.transform = text.groupTransform;
+    batchableText.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
+    batchableText.roundPixels = this._renderer._roundPixels | text._roundPixels;
+    text._gpuData[this._renderer.uid] = batchableText;
+    return batchableText;
   }
   destroy() {
-    for (const i in this._gpuText) {
-      this._destroyRenderableById(i);
-    }
-    this._gpuText = null;
     this._renderer = null;
   }
 }
@@ -3455,119 +4376,53 @@ CanvasTextPipe.extension = {
   name: "text"
 };
 
-function checkRow(data, width, y) {
-  for (let x = 0, index = 4 * y * width; x < width; ++x, index += 4) {
-    if (data[index + 3] !== 0)
-      return false;
-  }
-  return true;
-}
-function checkColumn(data, width, x, top, bottom) {
-  const stride = 4 * width;
-  for (let y = top, index = top * stride + 4 * x; y <= bottom; ++y, index += stride) {
-    if (data[index + 3] !== 0)
-      return false;
-  }
-  return true;
-}
-function getCanvasBoundingBox(canvas, resolution = 1) {
-  const { width, height } = canvas;
-  const context = canvas.getContext("2d", {
-    willReadFrequently: true
-  });
-  if (context === null) {
-    throw new TypeError("Failed to get canvas 2D context");
-  }
-  const imageData = context.getImageData(0, 0, width, height);
-  const data = imageData.data;
-  let left = 0;
-  let top = 0;
-  let right = width - 1;
-  let bottom = height - 1;
-  while (top < height && checkRow(data, width, top))
-    ++top;
-  if (top === height)
-    return Rectangle.EMPTY;
-  while (checkRow(data, width, bottom))
-    --bottom;
-  while (checkColumn(data, width, left, top, bottom))
-    ++left;
-  while (checkColumn(data, width, right, top, bottom))
-    --right;
-  ++right;
-  ++bottom;
-  return new Rectangle(left / resolution, top / resolution, (right - left) / resolution, (bottom - top) / resolution);
-}
-
 class CanvasTextSystem {
   constructor(_renderer) {
-    this._activeTextures = {};
     this._renderer = _renderer;
   }
-  getTextureSize(text, resolution, style) {
-    const measured = CanvasTextMetrics.measureText(text || " ", style);
-    let width = Math.ceil(Math.ceil(Math.max(1, measured.width) + style.padding * 2) * resolution);
-    let height = Math.ceil(Math.ceil(Math.max(1, measured.height) + style.padding * 2) * resolution);
-    width = Math.ceil(width - 1e-6);
-    height = Math.ceil(height - 1e-6);
-    width = nextPow2(width);
-    height = nextPow2(height);
-    return { width, height };
-  }
-  getTexture(options, resolution, style, _textKey) {
+  getTexture(options, _resolution, _style, _textKey) {
     if (typeof options === "string") {
       deprecation("8.0.0", "CanvasTextSystem.getTexture: Use object TextOptions instead of separate arguments");
       options = {
         text: options,
-        style,
-        resolution
+        style: _style,
+        resolution: _resolution
       };
     }
     if (!(options.style instanceof TextStyle)) {
       options.style = new TextStyle(options.style);
     }
-    const { texture, canvasAndContext } = this.createTextureAndCanvas(
-      options
-    );
-    this._renderer.texture.initSource(texture._source);
-    CanvasPool.returnCanvasAndContext(canvasAndContext);
-    return texture;
-  }
-  createTextureAndCanvas(options) {
-    const { text, style } = options;
+    if (!(options.textureStyle instanceof TextureStyle)) {
+      options.textureStyle = new TextureStyle(options.textureStyle);
+    }
+    if (typeof options.text !== "string") {
+      options.text = options.text.toString();
+    }
+    const { text, style, textureStyle } = options;
     const resolution = options.resolution ?? this._renderer.resolution;
-    const measured = CanvasTextMetrics.measureText(text || " ", style);
-    const width = Math.ceil(Math.ceil(Math.max(1, measured.width) + style.padding * 2) * resolution);
-    const height = Math.ceil(Math.ceil(Math.max(1, measured.height) + style.padding * 2) * resolution);
-    const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(width, height);
-    const { canvas } = canvasAndContext;
-    this.renderTextToCanvas(text, style, resolution, canvasAndContext);
-    const texture = getPo2TextureFromSource(canvas, width, height, resolution);
+    const { frame, canvasAndContext } = CanvasTextGenerator.getCanvasAndContext({
+      text,
+      style,
+      resolution
+    });
+    const texture = getPo2TextureFromSource(canvasAndContext.canvas, frame.width, frame.height, resolution);
+    if (textureStyle)
+      texture.source.style = textureStyle;
     if (style.trim) {
-      const trimmed = getCanvasBoundingBox(canvas, resolution);
-      texture.frame.copyFrom(trimmed);
+      frame.pad(style.padding);
+      texture.frame.copyFrom(frame);
       texture.updateUvs();
     }
-    return { texture, canvasAndContext };
-  }
-  getManagedTexture(text) {
-    text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
-    const textKey = text._getKey();
-    if (this._activeTextures[textKey]) {
-      this._increaseReferenceCount(textKey);
-      return this._activeTextures[textKey].texture;
+    if (style.filters) {
+      const filteredTexture = this._applyFilters(texture, style.filters);
+      this.returnTexture(texture);
+      CanvasTextGenerator.returnCanvasAndContext(canvasAndContext);
+      return filteredTexture;
     }
-    const { texture, canvasAndContext } = this.createTextureAndCanvas(text);
-    this._activeTextures[textKey] = {
-      canvasAndContext,
-      texture,
-      usageCount: 1
-    };
+    this._renderer.texture.initSource(texture._source);
+    CanvasTextGenerator.returnCanvasAndContext(canvasAndContext);
     return texture;
   }
-  _increaseReferenceCount(textKey) {
-    this._activeTextures[textKey].usageCount++;
-  }
   /**
    * Returns a texture that was created wit the above `getTexture` function.
    * Handy if you are done with a texture and want to return it to the pool.
@@ -3578,168 +4433,39 @@ class CanvasTextSystem {
     source.resource = null;
     source.uploadMethodId = "unknown";
     source.alphaMode = "no-premultiply-alpha";
-    TexturePool.returnTexture(texture);
-  }
-  decreaseReferenceCount(textKey) {
-    const activeTexture = this._activeTextures[textKey];
-    activeTexture.usageCount--;
-    if (activeTexture.usageCount === 0) {
-      CanvasPool.returnCanvasAndContext(activeTexture.canvasAndContext);
-      this.returnTexture(activeTexture.texture);
-      this._activeTextures[textKey] = null;
-    }
-  }
-  getReferenceCount(textKey) {
-    return this._activeTextures[textKey].usageCount;
+    TexturePool.returnTexture(texture, true);
   }
   /**
    * Renders text to its canvas, and updates its texture.
-   *
-   * By default this is used internally to ensure the texture is correct before rendering,
-   * but it can be used called externally, for example from this class to 'pre-generate' the texture from a piece of text,
-   * and then shared across multiple Sprites.
-   * @param text
-   * @param style
-   * @param resolution
-   * @param canvasAndContext
+   * @deprecated since 8.10.0
    */
-  renderTextToCanvas(text, style, resolution, canvasAndContext) {
-    const { canvas, context } = canvasAndContext;
-    const font = fontStringFromTextStyle(style);
-    const measured = CanvasTextMetrics.measureText(text || " ", style);
-    const lines = measured.lines;
-    const lineHeight = measured.lineHeight;
-    const lineWidths = measured.lineWidths;
-    const maxLineWidth = measured.maxLineWidth;
-    const fontProperties = measured.fontProperties;
-    const height = canvas.height;
-    context.resetTransform();
-    context.scale(resolution, resolution);
-    context.textBaseline = style.textBaseline;
-    if (style._stroke?.width) {
-      const strokeStyle = style._stroke;
-      context.lineWidth = strokeStyle.width;
-      context.miterLimit = strokeStyle.miterLimit;
-      context.lineJoin = strokeStyle.join;
-      context.lineCap = strokeStyle.cap;
-    }
-    context.font = font;
-    let linePositionX;
-    let linePositionY;
-    const passesCount = style.dropShadow ? 2 : 1;
-    for (let i = 0; i < passesCount; ++i) {
-      const isShadowPass = style.dropShadow && i === 0;
-      const dsOffsetText = isShadowPass ? Math.ceil(Math.max(1, height) + style.padding * 2) : 0;
-      const dsOffsetShadow = dsOffsetText * resolution;
-      if (isShadowPass) {
-        context.fillStyle = "black";
-        context.strokeStyle = "black";
-        const shadowOptions = style.dropShadow;
-        const dropShadowColor = shadowOptions.color;
-        const dropShadowAlpha = shadowOptions.alpha;
-        context.shadowColor = Color.shared.setValue(dropShadowColor).setAlpha(dropShadowAlpha).toRgbaString();
-        const dropShadowBlur = shadowOptions.blur * resolution;
-        const dropShadowDistance = shadowOptions.distance * resolution;
-        context.shadowBlur = dropShadowBlur;
-        context.shadowOffsetX = Math.cos(shadowOptions.angle) * dropShadowDistance;
-        context.shadowOffsetY = Math.sin(shadowOptions.angle) * dropShadowDistance + dsOffsetShadow;
-      } else {
-        context.fillStyle = style._fill ? getCanvasFillStyle(style._fill, context, measured) : null;
-        if (style._stroke?.width) {
-          const padding = style._stroke.width * style._stroke.alignment;
-          context.strokeStyle = getCanvasFillStyle(style._stroke, context, measured, padding);
-        }
-        context.shadowColor = "black";
-      }
-      let linePositionYShift = (lineHeight - fontProperties.fontSize) / 2;
-      if (lineHeight - fontProperties.fontSize < 0) {
-        linePositionYShift = 0;
-      }
-      const strokeWidth = style._stroke?.width ?? 0;
-      for (let i2 = 0; i2 < lines.length; i2++) {
-        linePositionX = strokeWidth / 2;
-        linePositionY = strokeWidth / 2 + i2 * lineHeight + fontProperties.ascent + linePositionYShift;
-        if (style.align === "right") {
-          linePositionX += maxLineWidth - lineWidths[i2];
-        } else if (style.align === "center") {
-          linePositionX += (maxLineWidth - lineWidths[i2]) / 2;
-        }
-        if (style._stroke?.width) {
-          this._drawLetterSpacing(
-            lines[i2],
-            style,
-            canvasAndContext,
-            linePositionX + style.padding,
-            linePositionY + style.padding - dsOffsetText,
-            true
-          );
-        }
-        if (style._fill !== void 0) {
-          this._drawLetterSpacing(
-            lines[i2],
-            style,
-            canvasAndContext,
-            linePositionX + style.padding,
-            linePositionY + style.padding - dsOffsetText
-          );
-        }
-      }
-    }
+  renderTextToCanvas() {
+    deprecation(
+      "8.10.0",
+      "CanvasTextSystem.renderTextToCanvas: no longer supported, use CanvasTextSystem.getTexture instead"
+    );
   }
   /**
-   * Render the text with letter-spacing.
-   * @param text - The text to draw
-   * @param style
-   * @param canvasAndContext
-   * @param x - Horizontal position to draw the text
-   * @param y - Vertical position to draw the text
-   * @param isStroke - Is this drawing for the outside stroke of the
-   *  text? If not, it's for the inside fill
+   * Applies the specified filters to the given texture.
+   *
+   * This method takes a texture and a list of filters, applies the filters to the texture,
+   * and returns the resulting texture. It also ensures that the alpha mode of the resulting
+   * texture is set to 'premultiplied-alpha'.
+   * @param {Texture} texture - The texture to which the filters will be applied.
+   * @param {Filter[]} filters - The filters to apply to the texture.
+   * @returns {Texture} The resulting texture after all filters have been applied.
    */
-  _drawLetterSpacing(text, style, canvasAndContext, x, y, isStroke = false) {
-    const { context } = canvasAndContext;
-    const letterSpacing = style.letterSpacing;
-    let useExperimentalLetterSpacing = false;
-    if (CanvasTextMetrics.experimentalLetterSpacingSupported) {
-      if (CanvasTextMetrics.experimentalLetterSpacing) {
-        context.letterSpacing = `${letterSpacing}px`;
-        context.textLetterSpacing = `${letterSpacing}px`;
-        useExperimentalLetterSpacing = true;
-      } else {
-        context.letterSpacing = "0px";
-        context.textLetterSpacing = "0px";
-      }
-    }
-    if (letterSpacing === 0 || useExperimentalLetterSpacing) {
-      if (isStroke) {
-        context.strokeText(text, x, y);
-      } else {
-        context.fillText(text, x, y);
-      }
-      return;
-    }
-    let currentPosition = x;
-    const stringArray = CanvasTextMetrics.graphemeSegmenter(text);
-    let previousWidth = context.measureText(text).width;
-    let currentWidth = 0;
-    for (let i = 0; i < stringArray.length; ++i) {
-      const currentChar = stringArray[i];
-      if (isStroke) {
-        context.strokeText(currentChar, currentPosition, y);
-      } else {
-        context.fillText(currentChar, currentPosition, y);
-      }
-      let textStr = "";
-      for (let j = i + 1; j < stringArray.length; ++j) {
-        textStr += stringArray[j];
-      }
-      currentWidth = context.measureText(textStr).width;
-      currentPosition += previousWidth - currentWidth + letterSpacing;
-      previousWidth = currentWidth;
-    }
+  _applyFilters(texture, filters) {
+    const currentRenderTarget = this._renderer.renderTarget.renderTarget;
+    const resultTexture = this._renderer.filter.generateFilteredTexture({
+      texture,
+      filters
+    });
+    this._renderer.renderTarget.bind(currentRenderTarget, false);
+    return resultTexture;
   }
   destroy() {
-    this._activeTextures = null;
+    this._renderer = null;
   }
 }
 /** @ignore */