@vunk/plus 1.3.10 → 1.3.12

package/components/init.mjs

@@ -0,0 +1,3779 @@
+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 { 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
+   */
+  static init(options) {
+    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);
+          this._resizeTo = dom;
+          if (dom) {
+            globalThis.addEventListener("resize", this.queueResize);
+            this.resize();
+          }
+        },
+        get() {
+          return this._resizeTo;
+        }
+      }
+    );
+    this.queueResize = () => {
+      if (!this._resizeTo) {
+        return;
+      }
+      this._cancelResize();
+      this._resizeId = requestAnimationFrame(() => this.resize());
+    };
+    this._cancelResize = () => {
+      if (this._resizeId) {
+        cancelAnimationFrame(this._resizeId);
+        this._resizeId = null;
+      }
+    };
+    this.resize = () => {
+      if (!this._resizeTo) {
+        return;
+      }
+      this._cancelResize();
+      let width;
+      let height;
+      if (this._resizeTo === globalThis.window) {
+        width = globalThis.innerWidth;
+        height = globalThis.innerHeight;
+      } else {
+        const { clientWidth, clientHeight } = this._resizeTo;
+        width = clientWidth;
+        height = clientHeight;
+      }
+      this.renderer.resize(width, height);
+      this.render();
+    };
+    this._resizeId = null;
+    this._resizeTo = null;
+    this.resizeTo = options.resizeTo || null;
+  }
+  /**
+   * Clean up the ticker, scoped to application
+   * @static
+   * @private
+   */
+  static destroy() {
+    globalThis.removeEventListener("resize", this.queueResize);
+    this._cancelResize();
+    this._cancelResize = null;
+    this.queueResize = null;
+    this.resizeTo = null;
+    this.resize = null;
+  }
+}
+/** @ignore */
+ResizePlugin.extension = ExtensionType.Application;
+
+class TickerPlugin {
+  /**
+   * Initialize the plugin with scope of application instance
+   * @static
+   * @private
+   * @param {object} [options] - See application options
+   */
+  static init(options) {
+    options = Object.assign({
+      autoStart: true,
+      sharedTicker: false
+    }, options);
+    Object.defineProperty(
+      this,
+      "ticker",
+      {
+        set(ticker) {
+          if (this._ticker) {
+            this._ticker.remove(this.render, this);
+          }
+          this._ticker = ticker;
+          if (ticker) {
+            ticker.add(this.render, this, UPDATE_PRIORITY.LOW);
+          }
+        },
+        get() {
+          return this._ticker;
+        }
+      }
+    );
+    this.stop = () => {
+      this._ticker.stop();
+    };
+    this.start = () => {
+      this._ticker.start();
+    };
+    this._ticker = null;
+    this.ticker = options.sharedTicker ? Ticker.shared : new Ticker();
+    if (options.autoStart) {
+      this.start();
+    }
+  }
+  /**
+   * Clean up the ticker, scoped to application.
+   * @static
+   * @private
+   */
+  static destroy() {
+    if (this._ticker) {
+      const oldTicker = this._ticker;
+      this.ticker = null;
+      oldTicker.destroy();
+    }
+  }
+}
+/** @ignore */
+TickerPlugin.extension = ExtensionType.Application;
+
+class FilterPipe {
+  constructor(renderer) {
+    this._renderer = renderer;
+  }
+  push(filterEffect, container, instructionSet) {
+    const renderPipes = this._renderer.renderPipes;
+    renderPipes.batch.break(instructionSet);
+    instructionSet.add({
+      renderPipeId: "filter",
+      canBundle: false,
+      action: "pushFilter",
+      container,
+      filterEffect
+    });
+  }
+  pop(_filterEffect, _container, instructionSet) {
+    this._renderer.renderPipes.batch.break(instructionSet);
+    instructionSet.add({
+      renderPipeId: "filter",
+      action: "popFilter",
+      canBundle: false
+    });
+  }
+  execute(instruction) {
+    if (instruction.action === "pushFilter") {
+      this._renderer.filter.push(instruction);
+    } else if (instruction.action === "popFilter") {
+      this._renderer.filter.pop();
+    }
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+FilterPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "filter"
+};
+
+function getGlobalRenderableBounds(renderables, bounds) {
+  bounds.clear();
+  const tempMatrix = bounds.matrix;
+  for (let i = 0; i < renderables.length; i++) {
+    const renderable = renderables[i];
+    if (renderable.globalDisplayStatus < 7) {
+      continue;
+    }
+    bounds.matrix = renderable.worldTransform;
+    bounds.addBounds(renderable.bounds);
+  }
+  bounds.matrix = tempMatrix;
+  return bounds;
+}
+
+const quadGeometry = new Geometry({
+  attributes: {
+    aPosition: {
+      buffer: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+      format: "float32x2",
+      stride: 2 * 4,
+      offset: 0
+    }
+  },
+  indexBuffer: new Uint32Array([0, 1, 2, 0, 2, 3])
+});
+class FilterSystem {
+  constructor(renderer) {
+    this._filterStackIndex = 0;
+    this._filterStack = [];
+    this._filterGlobalUniforms = new UniformGroup({
+      uInputSize: { value: new Float32Array(4), type: "vec4<f32>" },
+      uInputPixel: { value: new Float32Array(4), type: "vec4<f32>" },
+      uInputClamp: { value: new Float32Array(4), type: "vec4<f32>" },
+      uOutputFrame: { value: new Float32Array(4), type: "vec4<f32>" },
+      uGlobalFrame: { value: new Float32Array(4), type: "vec4<f32>" },
+      uOutputTexture: { value: new Float32Array(4), type: "vec4<f32>" }
+    });
+    this._globalFilterBindGroup = new BindGroup({});
+    this.renderer = renderer;
+  }
+  /**
+   * The back texture of the currently active filter. Requires the filter to have `blendRequired` set to true.
+   * @readonly
+   */
+  get activeBackTexture() {
+    return this._activeFilterData?.backTexture;
+  }
+  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++;
+    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;
+      return;
+    }
+    if (clipToViewport) {
+      const viewPort = renderer.renderTarget.rootViewPort;
+      const rootResolution = renderer.renderTarget.renderTarget.resolution;
+      bounds.fitBounds(0, viewPort.width / rootResolution, 0, viewPort.height / rootResolution);
+    }
+    bounds.scale(resolution).ceil().scale(1 / resolution).pad(padding | 0);
+    if (!bounds.isPositive) {
+      filterData.skip = true;
+      return;
+    }
+    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(
+      bounds.width,
+      bounds.height,
+      resolution,
+      antialias
+    );
+    renderer.renderTarget.bind(filterData.inputTexture, true);
+    renderer.globalUniforms.push({
+      offset: bounds
+    });
+  }
+  pop() {
+    const renderer = this.renderer;
+    this._filterStackIndex--;
+    const filterData = this._filterStack[this._filterStackIndex];
+    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);
+    }
+    if (filterData.blendRequired) {
+      TexturePool.returnTexture(backTexture);
+    }
+  }
+  getBackTexture(lastRenderSurface, bounds, previousBounds) {
+    const backgroundResolution = lastRenderSurface.colorTexture.source._resolution;
+    const backTexture = TexturePool.getOptimalTexture(
+      bounds.width,
+      bounds.height,
+      backgroundResolution,
+      false
+    );
+    let x = bounds.minX;
+    let y = bounds.minY;
+    if (previousBounds) {
+      x -= previousBounds.minX;
+      y -= previousBounds.minY;
+    }
+    x = Math.floor(x * backgroundResolution);
+    y = Math.floor(y * backgroundResolution);
+    const width = Math.ceil(bounds.width * backgroundResolution);
+    const height = Math.ceil(bounds.height * backgroundResolution);
+    this.renderer.renderTarget.copyToTexture(
+      lastRenderSurface,
+      backTexture,
+      { x, y },
+      { width, height },
+      { x: 0, y: 0 }
+    );
+    return backTexture;
+  }
+  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;
+    }
+    if (currentIndex > 0) {
+      resolution = this._filterStack[currentIndex].inputTexture.source._resolution;
+    }
+    const filterUniforms = this._filterGlobalUniforms;
+    const uniforms = filterUniforms.uniforms;
+    const outputFrame = uniforms.uOutputFrame;
+    const inputSize = uniforms.uInputSize;
+    const inputPixel = uniforms.uInputPixel;
+    const inputClamp = uniforms.uInputClamp;
+    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;
+    } else {
+      outputFrame[0] = 0;
+      outputFrame[1] = 0;
+    }
+    outputFrame[2] = input.frame.width;
+    outputFrame[3] = input.frame.height;
+    inputSize[0] = input.source.width;
+    inputSize[1] = input.source.height;
+    inputSize[2] = 1 / inputSize[0];
+    inputSize[3] = 1 / inputSize[1];
+    inputPixel[0] = input.source.pixelWidth;
+    inputPixel[1] = input.source.pixelHeight;
+    inputPixel[2] = 1 / inputPixel[0];
+    inputPixel[3] = 1 / inputPixel[1];
+    inputClamp[0] = 0.5 * inputPixel[2];
+    inputClamp[1] = 0.5 * inputPixel[3];
+    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[2] = rootTexture.source.width * resolution;
+    globalFrame[3] = rootTexture.source.height * resolution;
+    const renderTarget = this.renderer.renderTarget.getRenderTarget(output);
+    renderer.renderTarget.bind(output, !!clear);
+    if (output instanceof Texture) {
+      outputTexture[0] = output.frame.width;
+      outputTexture[1] = output.frame.height;
+    } else {
+      outputTexture[0] = renderTarget.width;
+      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();
+    }
+  }
+  _getFilterData() {
+    return {
+      skip: false,
+      inputTexture: null,
+      bounds: new Bounds(),
+      container: null,
+      filterEffect: null,
+      blendRequired: false,
+      previousRenderSurface: null
+    };
+  }
+  /**
+   * 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;
+  }
+}
+/** @ignore */
+FilterSystem.extension = {
+  type: [
+    ExtensionType.WebGLSystem,
+    ExtensionType.WebGPUSystem
+  ],
+  name: "filter"
+};
+
+class Graphics extends ViewContainer {
+  /**
+   * @param options - Options for the Graphics.
+   */
+  constructor(options) {
+    if (options instanceof GraphicsContext) {
+      options = { context: options };
+    }
+    const { context, roundPixels, ...rest } = options || {};
+    super({
+      label: "Graphics",
+      ...rest
+    });
+    this.renderPipeId = "graphics";
+    if (!context) {
+      this._context = this._ownedContext = new GraphicsContext();
+    } else {
+      this._context = context;
+    }
+    this._context.on("update", this.onViewUpdate, this);
+    this.allowChildren = false;
+    this.roundPixels = roundPixels ?? false;
+  }
+  set context(context) {
+    if (context === this._context)
+      return;
+    this._context.off("update", this.onViewUpdate, this);
+    this._context = context;
+    this._context.on("update", this.onViewUpdate, this);
+    this.onViewUpdate();
+  }
+  get context() {
+    return this._context;
+  }
+  /**
+   * The local bounds of the graphic.
+   * @type {rendering.Bounds}
+   */
+  get bounds() {
+    return this._context.bounds;
+  }
+  /**
+   * Graphics objects do not need to update their bounds as the context handles this.
+   * @private
+   */
+  updateBounds() {
+  }
+  /**
+   * Checks if the object contains the given point.
+   * @param point - The point to check
+   */
+  containsPoint(point) {
+    return this._context.containsPoint(point);
+  }
+  /**
+   * Destroys this graphics renderable and optionally its context.
+   * @param options - Options parameter. A boolean will act as if all options
+   *
+   * If the context was created by this graphics and `destroy(false)` or `destroy()` is called
+   * then the context will still be destroyed.
+   *
+   * If you want to explicitly not destroy this context that this graphics created,
+   * 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
+   */
+  destroy(options) {
+    if (this._ownedContext && !options) {
+      this._ownedContext.destroy(options);
+    } else if (options === true || options?.context === true) {
+      this._context.destroy(options);
+    }
+    this._ownedContext = null;
+    this._context = null;
+    super.destroy(options);
+  }
+  _callContextMethod(method, args) {
+    this.context[method](...args);
+    return this;
+  }
+  // --------------------------------------- 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.
+   */
+  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.
+   */
+  setStrokeStyle(...args) {
+    return this._callContextMethod("setStrokeStyle", args);
+  }
+  fill(...args) {
+    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.
+   */
+  stroke(...args) {
+    return this._callContextMethod("stroke", args);
+  }
+  texture(...args) {
+    return this._callContextMethod("texture", args);
+  }
+  /**
+   * 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.
+   */
+  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!
+   */
+  cut() {
+    return this._callContextMethod("cut", []);
+  }
+  arc(...args) {
+    return this._callContextMethod("arc", args);
+  }
+  arcTo(...args) {
+    return this._callContextMethod("arcTo", args);
+  }
+  arcToSvg(...args) {
+    return this._callContextMethod("arcToSvg", args);
+  }
+  bezierCurveTo(...args) {
+    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.
+   */
+  closePath() {
+    return this._callContextMethod("closePath", []);
+  }
+  ellipse(...args) {
+    return this._callContextMethod("ellipse", args);
+  }
+  circle(...args) {
+    return this._callContextMethod("circle", args);
+  }
+  path(...args) {
+    return this._callContextMethod("path", args);
+  }
+  lineTo(...args) {
+    return this._callContextMethod("lineTo", args);
+  }
+  moveTo(...args) {
+    return this._callContextMethod("moveTo", args);
+  }
+  quadraticCurveTo(...args) {
+    return this._callContextMethod("quadraticCurveTo", args);
+  }
+  rect(...args) {
+    return this._callContextMethod("rect", args);
+  }
+  roundRect(...args) {
+    return this._callContextMethod("roundRect", args);
+  }
+  poly(...args) {
+    return this._callContextMethod("poly", args);
+  }
+  regularPoly(...args) {
+    return this._callContextMethod("regularPoly", args);
+  }
+  roundPoly(...args) {
+    return this._callContextMethod("roundPoly", args);
+  }
+  roundShape(...args) {
+    return this._callContextMethod("roundShape", args);
+  }
+  filletRect(...args) {
+    return this._callContextMethod("filletRect", args);
+  }
+  chamferRect(...args) {
+    return this._callContextMethod("chamferRect", args);
+  }
+  star(...args) {
+    return this._callContextMethod("star", args);
+  }
+  svg(...args) {
+    return this._callContextMethod("svg", args);
+  }
+  restore(...args) {
+    return this._callContextMethod("restore", args);
+  }
+  /** Saves the current graphics state, including transformations, fill styles, and stroke styles, onto a stack. */
+  save() {
+    return this._callContextMethod("save", []);
+  }
+  /**
+   * Returns the current transformation matrix of the graphics context.
+   * @returns The current transformation matrix.
+   */
+  getTransform() {
+    return this.context.getTransform();
+  }
+  /**
+   * 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.
+   */
+  resetTransform() {
+    return this._callContextMethod("resetTransform", []);
+  }
+  rotateTransform(...args) {
+    return this._callContextMethod("rotate", args);
+  }
+  scaleTransform(...args) {
+    return this._callContextMethod("scale", args);
+  }
+  setTransform(...args) {
+    return this._callContextMethod("setTransform", args);
+  }
+  transform(...args) {
+    return this._callContextMethod("transform", args);
+  }
+  translateTransform(...args) {
+    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.
+   */
+  clear() {
+    return this._callContextMethod("clear", []);
+  }
+  /**
+   * The fill style to use.
+   * @type {ConvertedFillStyle}
+   */
+  get fillStyle() {
+    return this._context.fillStyle;
+  }
+  set fillStyle(value) {
+    this._context.fillStyle = value;
+  }
+  /**
+   * The stroke style to use.
+   * @type {ConvertedStrokeStyle}
+   */
+  get strokeStyle() {
+    return this._context.strokeStyle;
+  }
+  set strokeStyle(value) {
+    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
+   */
+  clone(deep = false) {
+    if (deep) {
+      return new Graphics(this._context.clone());
+    }
+    this._ownedContext = null;
+    const clone = new Graphics(this._context);
+    return clone;
+  }
+  // -------- v7 deprecations ---------
+  /**
+   * @param width
+   * @param color
+   * @param alpha
+   * @deprecated since 8.0.0 Use {@link Graphics#setStrokeStyle} instead
+   */
+  lineStyle(width, color, alpha) {
+    deprecation(v8_0_0, "Graphics#lineStyle is no longer needed. Use Graphics#setStrokeStyle to set the stroke style.");
+    const strokeStyle = {};
+    width && (strokeStyle.width = width);
+    color && (strokeStyle.color = color);
+    alpha && (strokeStyle.alpha = alpha);
+    this.context.strokeStyle = strokeStyle;
+    return this;
+  }
+  /**
+   * @param color
+   * @param alpha
+   * @deprecated since 8.0.0 Use {@link Graphics#fill} instead
+   */
+  beginFill(color, alpha) {
+    deprecation(v8_0_0, "Graphics#beginFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
+    const fillStyle = {};
+    if (color !== void 0)
+      fillStyle.color = color;
+    if (alpha !== void 0)
+      fillStyle.alpha = alpha;
+    this.context.fillStyle = fillStyle;
+    return this;
+  }
+  /**
+   * @deprecated since 8.0.0 Use {@link Graphics#fill} instead
+   */
+  endFill() {
+    deprecation(v8_0_0, "Graphics#endFill is no longer needed. Use Graphics#fill to fill the shape with the desired style.");
+    this.context.fill();
+    const strokeStyle = this.context.strokeStyle;
+    if (strokeStyle.width !== GraphicsContext.defaultStrokeStyle.width || strokeStyle.color !== GraphicsContext.defaultStrokeStyle.color || strokeStyle.alpha !== GraphicsContext.defaultStrokeStyle.alpha) {
+      this.context.stroke();
+    }
+    return this;
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#circle} instead
+   */
+  drawCircle(...args) {
+    deprecation(v8_0_0, "Graphics#drawCircle has been renamed to Graphics#circle");
+    return this._callContextMethod("circle", args);
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#ellipse} instead
+   */
+  drawEllipse(...args) {
+    deprecation(v8_0_0, "Graphics#drawEllipse has been renamed to Graphics#ellipse");
+    return this._callContextMethod("ellipse", args);
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#poly} instead
+   */
+  drawPolygon(...args) {
+    deprecation(v8_0_0, "Graphics#drawPolygon has been renamed to Graphics#poly");
+    return this._callContextMethod("poly", args);
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#rect} instead
+   */
+  drawRect(...args) {
+    deprecation(v8_0_0, "Graphics#drawRect has been renamed to Graphics#rect");
+    return this._callContextMethod("rect", args);
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#roundRect} instead
+   */
+  drawRoundedRect(...args) {
+    deprecation(v8_0_0, "Graphics#drawRoundedRect has been renamed to Graphics#roundRect");
+    return this._callContextMethod("roundRect", args);
+  }
+  /**
+   * @param {...any} args
+   * @deprecated since 8.0.0 Use {@link Graphics#star} instead
+   */
+  drawStar(...args) {
+    deprecation(v8_0_0, "Graphics#drawStar has been renamed to Graphics#star");
+    return this._callContextMethod("star", args);
+  }
+}
+
+const _MeshGeometry = class _MeshGeometry extends Geometry {
+  constructor(...args) {
+    let options = args[0] ?? {};
+    if (options instanceof Float32Array) {
+      deprecation(v8_0_0, "use new MeshGeometry({ positions, uvs, indices }) instead");
+      options = {
+        positions: options,
+        uvs: args[1],
+        indices: args[2]
+      };
+    }
+    options = { ..._MeshGeometry.defaultOptions, ...options };
+    const positions = options.positions || new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]);
+    let uvs = options.uvs;
+    if (!uvs) {
+      if (options.positions) {
+        uvs = new Float32Array(positions.length);
+      } else {
+        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;
+  }
+  /**
+   * 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;
+
+function textStyleToCSS(style) {
+  const stroke = style._stroke;
+  const fill = style._fill;
+  const cssStyleString = [
+    `color: ${Color.shared.setValue(fill.color).toHex()}`,
+    `font-size: ${style.fontSize}px`,
+    `font-family: ${style.fontFamily}`,
+    `font-weight: ${style.fontWeight}`,
+    `font-style: ${style.fontStyle}`,
+    `font-variant: ${style.fontVariant}`,
+    `letter-spacing: ${style.letterSpacing}px`,
+    `text-align: ${style.align}`,
+    `padding: ${style.padding}px`,
+    `white-space: ${style.whiteSpace === "pre" && style.wordWrap ? "pre-wrap" : style.whiteSpace}`,
+    ...style.lineHeight ? [`line-height: ${style.lineHeight}px`] : [],
+    ...style.wordWrap ? [
+      `word-wrap: ${style.breakWords ? "break-all" : "break-word"}`,
+      `max-width: ${style.wordWrapWidth}px`
+    ] : [],
+    ...stroke ? [strokeToCSS(stroke)] : [],
+    ...style.dropShadow ? [dropShadowToCSS(style.dropShadow)] : [],
+    ...style.cssOverrides
+  ].join(";");
+  const cssStyles = [`div { ${cssStyleString} }`];
+  tagStyleToCSS(style.tagStyles, cssStyles);
+  return cssStyles.join(" ");
+}
+function dropShadowToCSS(dropShadowStyle) {
+  const color = Color.shared.setValue(dropShadowStyle.color).setAlpha(dropShadowStyle.alpha).toHexa();
+  const x = Math.round(Math.cos(dropShadowStyle.angle) * dropShadowStyle.distance);
+  const y = Math.round(Math.sin(dropShadowStyle.angle) * dropShadowStyle.distance);
+  const position = `${x}px ${y}px`;
+  if (dropShadowStyle.blur > 0) {
+    return `text-shadow: ${position} ${dropShadowStyle.blur}px ${color}`;
+  }
+  return `text-shadow: ${position} ${color}`;
+}
+function strokeToCSS(stroke) {
+  return [
+    `-webkit-text-stroke-width: ${stroke.width}px`,
+    `-webkit-text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,
+    `text-stroke-width: ${stroke.width}px`,
+    `text-stroke-color: ${Color.shared.setValue(stroke.color).toHex()}`,
+    "paint-order: stroke"
+  ].join(";");
+}
+const templates = {
+  fontSize: `font-size: {{VALUE}}px`,
+  fontFamily: `font-family: {{VALUE}}`,
+  fontWeight: `font-weight: {{VALUE}}`,
+  fontStyle: `font-style: {{VALUE}}`,
+  fontVariant: `font-variant: {{VALUE}}`,
+  letterSpacing: `letter-spacing: {{VALUE}}px`,
+  align: `text-align: {{VALUE}}`,
+  padding: `padding: {{VALUE}}px`,
+  whiteSpace: `white-space: {{VALUE}}`,
+  lineHeight: `line-height: {{VALUE}}px`,
+  wordWrapWidth: `max-width: {{VALUE}}px`
+};
+const transform = {
+  fill: (value) => `color: ${Color.shared.setValue(value).toHex()}`,
+  breakWords: (value) => `word-wrap: ${value ? "break-all" : "break-word"}`,
+  stroke: strokeToCSS,
+  dropShadow: dropShadowToCSS
+};
+function tagStyleToCSS(tagStyles, out) {
+  for (const i in tagStyles) {
+    const tagStyle = tagStyles[i];
+    const cssTagStyle = [];
+    for (const j in tagStyle) {
+      if (transform[j]) {
+        cssTagStyle.push(transform[j](tagStyle[j]));
+      } else if (templates[j]) {
+        cssTagStyle.push(templates[j].replace("{{VALUE}}", tagStyle[j]));
+      }
+    }
+    out.push(`${i} { ${cssTagStyle.join(";")} }`);
+  }
+}
+
+class HTMLTextStyle extends TextStyle {
+  constructor(options = {}) {
+    super(options);
+    this._cssOverrides = [];
+    this.cssOverrides ?? (this.cssOverrides = options.cssOverrides);
+    this.tagStyles = options.tagStyles ?? {};
+  }
+  /** List of style overrides that will be applied to the HTML text. */
+  set cssOverrides(value) {
+    this._cssOverrides = value instanceof Array ? value : [value];
+    this.update();
+  }
+  get cssOverrides() {
+    return this._cssOverrides;
+  }
+  _generateKey() {
+    this._styleKey = generateTextStyleKey(this) + this._cssOverrides.join("-");
+    return this._styleKey;
+  }
+  update() {
+    this._cssStyle = null;
+    super.update();
+  }
+  /**
+   * Creates a new HTMLTextStyle object with the same values as this one.
+   * @returns New cloned HTMLTextStyle object
+   */
+  clone() {
+    return new HTMLTextStyle({
+      align: this.align,
+      breakWords: this.breakWords,
+      dropShadow: this.dropShadow ? { ...this.dropShadow } : null,
+      fill: this._fill,
+      fontFamily: this.fontFamily,
+      fontSize: this.fontSize,
+      fontStyle: this.fontStyle,
+      fontVariant: this.fontVariant,
+      fontWeight: this.fontWeight,
+      letterSpacing: this.letterSpacing,
+      lineHeight: this.lineHeight,
+      padding: this.padding,
+      stroke: this._stroke,
+      whiteSpace: this.whiteSpace,
+      wordWrap: this.wordWrap,
+      wordWrapWidth: this.wordWrapWidth,
+      cssOverrides: this.cssOverrides
+    });
+  }
+  get cssStyle() {
+    if (!this._cssStyle) {
+      this._cssStyle = textStyleToCSS(this);
+    }
+    return this._cssStyle;
+  }
+  /**
+   * Add a style override, this can be any CSS property
+   * it will override any built-in style. This is the
+   * property and the value as a string (e.g., `color: red`).
+   * This will override any other internal style.
+   * @param {string} value - CSS style(s) to add.
+   * @example
+   * style.addOverride('background-color: red');
+   */
+  addOverride(...value) {
+    const toAdd = value.filter((v) => !this.cssOverrides.includes(v));
+    if (toAdd.length > 0) {
+      this.cssOverrides.push(...toAdd);
+      this.update();
+    }
+  }
+  /**
+   * Remove any overrides that match the value.
+   * @param {string} value - CSS style to remove.
+   * @example
+   * style.removeOverride('background-color: red');
+   */
+  removeOverride(...value) {
+    const toRemove = value.filter((v) => this.cssOverrides.includes(v));
+    if (toRemove.length > 0) {
+      this.cssOverrides = this.cssOverrides.filter((v) => !toRemove.includes(v));
+      this.update();
+    }
+  }
+  set fill(value) {
+    if (typeof value !== "string" && typeof value !== "number") {
+      warn("[HTMLTextStyle] only color fill is not supported by HTMLText");
+    }
+    super.fill = value;
+  }
+  set stroke(value) {
+    if (value && typeof value !== "string" && typeof value !== "number") {
+      warn("[HTMLTextStyle] only color stroke is not supported by HTMLText");
+    }
+    super.stroke = value;
+  }
+}
+
+const nssvg = "http://www.w3.org/2000/svg";
+const nsxhtml = "http://www.w3.org/1999/xhtml";
+class HTMLTextRenderData {
+  constructor() {
+    this.svgRoot = document.createElementNS(nssvg, "svg");
+    this.foreignObject = document.createElementNS(nssvg, "foreignObject");
+    this.domElement = document.createElementNS(nsxhtml, "div");
+    this.styleElement = document.createElementNS(nsxhtml, "style");
+    this.image = new Image();
+    const { foreignObject, svgRoot, styleElement, domElement } = this;
+    foreignObject.setAttribute("width", "10000");
+    foreignObject.setAttribute("height", "10000");
+    foreignObject.style.overflow = "hidden";
+    svgRoot.appendChild(foreignObject);
+    foreignObject.appendChild(styleElement);
+    foreignObject.appendChild(domElement);
+  }
+}
+
+let tempHTMLTextRenderData;
+function measureHtmlText(text, style, fontStyleCSS, htmlTextRenderData) {
+  htmlTextRenderData || (htmlTextRenderData = tempHTMLTextRenderData || (tempHTMLTextRenderData = new HTMLTextRenderData()));
+  const { domElement, styleElement, svgRoot } = htmlTextRenderData;
+  domElement.innerHTML = `<style>${style.cssStyle};</style><div style='padding:0'>${text}</div>`;
+  domElement.setAttribute("style", "transform-origin: top left; display: inline-block");
+  if (fontStyleCSS) {
+    styleElement.textContent = fontStyleCSS;
+  }
+  document.body.appendChild(svgRoot);
+  const contentBounds = domElement.getBoundingClientRect();
+  svgRoot.remove();
+  const doublePadding = style.padding * 2;
+  return {
+    width: contentBounds.width - doublePadding,
+    height: contentBounds.height - doublePadding
+  };
+}
+
+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");
+  }
+  validateRenderable(graphics) {
+    const context = graphics.context;
+    const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
+    const gpuContext = this.renderer.graphicsContext.updateGpuContext(context);
+    if (gpuContext.isBatchable || wasBatched !== gpuContext.isBatchable) {
+      return true;
+    }
+    return false;
+  }
+  addRenderable(graphics, instructionSet) {
+    const gpuContext = this.renderer.graphicsContext.updateGpuContext(graphics.context);
+    if (graphics.didViewUpdate) {
+      this._rebuild(graphics);
+    }
+    if (gpuContext.isBatchable) {
+      this._addToBatcher(graphics, instructionSet);
+    } else {
+      this.renderer.renderPipes.batch.break(instructionSet);
+      instructionSet.add(graphics);
+    }
+  }
+  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);
+    }
+    graphics.off("destroyed", this._destroyRenderableBound);
+  }
+  execute(graphics) {
+    if (!graphics.isRenderable)
+      return;
+    const renderer = this.renderer;
+    const context = graphics.context;
+    const contextSystem = renderer.graphicsContext;
+    if (!contextSystem.getGpuContext(context).batches.length) {
+      return;
+    }
+    const shader = context.customShader || this._adaptor.shader;
+    this.state.blendMode = graphics.groupBlendMode;
+    const localUniforms = shader.resources.localUniforms.uniforms;
+    localUniforms.uTransformMatrix = graphics.groupTransform;
+    localUniforms.uRound = renderer._roundPixels | graphics._roundPixels;
+    color32BitToUniform(
+      graphics.groupColorAlpha,
+      localUniforms.uColor,
+      0
+    );
+    this._adaptor.execute(this, graphics);
+  }
+  _rebuild(graphics) {
+    const wasBatched = !!this._graphicsBatchesHash[graphics.uid];
+    const gpuContext = this.renderer.graphicsContext.updateGpuContext(graphics.context);
+    if (wasBatched) {
+      this._removeBatchForRenderable(graphics.uid);
+    }
+    if (gpuContext.isBatchable) {
+      this._initBatchesForRenderable(graphics);
+    }
+    graphics.batched = gpuContext.isBatchable;
+  }
+  _addToBatcher(graphics, instructionSet) {
+    const batchPipe = this.renderer.renderPipes.batch;
+    const batches = this._getBatchesForRenderable(graphics);
+    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);
+  }
+  _initBatchesForRenderable(graphics) {
+    const context = graphics.context;
+    const gpuContext = this.renderer.graphicsContext.getGpuContext(context);
+    const roundPixels = this.renderer._roundPixels | graphics._roundPixels;
+    const 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 */
+GraphicsPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "graphics"
+};
+
+const _PlaneGeometry = class _PlaneGeometry extends MeshGeometry {
+  constructor(...args) {
+    super({});
+    let options = args[0] ?? {};
+    if (typeof options === "number") {
+      deprecation(v8_0_0, "PlaneGeometry constructor changed please use { width, height, verticesX, verticesY } instead");
+      options = {
+        width: options,
+        height: args[1],
+        verticesX: args[2],
+        verticesY: args[3]
+      };
+    }
+    this.build(options);
+  }
+  /**
+   * Refreshes plane coordinates
+   * @param options - Options to be applied to plane geometry
+   */
+  build(options) {
+    options = { ..._PlaneGeometry.defaultOptions, ...options };
+    this.verticesX = this.verticesX ?? options.verticesX;
+    this.verticesY = this.verticesY ?? options.verticesY;
+    this.width = this.width ?? options.width;
+    this.height = this.height ?? options.height;
+    const total = this.verticesX * this.verticesY;
+    const verts = [];
+    const uvs = [];
+    const indices = [];
+    const verticesX = this.verticesX - 1;
+    const verticesY = this.verticesY - 1;
+    const sizeX = this.width / verticesX;
+    const sizeY = this.height / verticesY;
+    for (let i = 0; i < total; i++) {
+      const x = i % this.verticesX;
+      const y = i / this.verticesX | 0;
+      verts.push(x * sizeX, y * sizeY);
+      uvs.push(x / verticesX, y / verticesY);
+    }
+    const totalSub = verticesX * verticesY;
+    for (let i = 0; i < totalSub; i++) {
+      const xpos = i % verticesX;
+      const ypos = i / verticesX | 0;
+      const value = ypos * this.verticesX + xpos;
+      const value2 = ypos * this.verticesX + xpos + 1;
+      const value3 = (ypos + 1) * this.verticesX + xpos;
+      const value4 = (ypos + 1) * this.verticesX + xpos + 1;
+      indices.push(
+        value,
+        value2,
+        value3,
+        value2,
+        value4,
+        value3
+      );
+    }
+    this.buffers[0].data = new Float32Array(verts);
+    this.buffers[1].data = new Float32Array(uvs);
+    this.indexBuffer.data = new Uint32Array(indices);
+    this.buffers[0].update();
+    this.buffers[1].update();
+    this.indexBuffer.update();
+  }
+};
+_PlaneGeometry.defaultOptions = {
+  width: 100,
+  height: 100,
+  verticesX: 10,
+  verticesY: 10
+};
+let PlaneGeometry = _PlaneGeometry;
+
+class BatchableMesh {
+  constructor() {
+    this.batcherName = "default";
+    this.packAsQuad = false;
+    this.indexOffset = 0;
+    this.attributeOffset = 0;
+    this.roundPixels = 0;
+    this._batcher = null;
+    this._batch = null;
+    this._textureMatrixUpdateId = -1;
+    this._uvUpdateId = -1;
+  }
+  get blendMode() {
+    return this.renderable.groupBlendMode;
+  }
+  get topology() {
+    return this._topology || this.geometry.topology;
+  }
+  set topology(value) {
+    this._topology = value;
+  }
+  reset() {
+    this.renderable = null;
+    this.texture = null;
+    this._batcher = null;
+    this._batch = null;
+    this.geometry = null;
+    this._uvUpdateId = -1;
+    this._textureMatrixUpdateId = -1;
+  }
+  /**
+   * Sets the texture for the batchable mesh.
+   * As it does so, it resets the texture matrix update ID.
+   * this is to ensure that the texture matrix is recalculated when the uvs are referenced
+   * @param value - The texture to set.
+   */
+  setTexture(value) {
+    if (this.texture === value)
+      return;
+    this.texture = value;
+    this._textureMatrixUpdateId = -1;
+  }
+  get uvs() {
+    const geometry = this.geometry;
+    const uvBuffer = geometry.getBuffer("aUV");
+    const uvs = uvBuffer.data;
+    let transformedUvs = uvs;
+    const textureMatrix = this.texture.textureMatrix;
+    if (!textureMatrix.isSimple) {
+      transformedUvs = this._transformedUvs;
+      if (this._textureMatrixUpdateId !== textureMatrix._updateID || this._uvUpdateId !== uvBuffer._updateID) {
+        if (!transformedUvs || transformedUvs.length < uvs.length) {
+          transformedUvs = this._transformedUvs = new Float32Array(uvs.length);
+        }
+        this._textureMatrixUpdateId = textureMatrix._updateID;
+        this._uvUpdateId = uvBuffer._updateID;
+        textureMatrix.multiplyUvs(uvs, transformedUvs);
+      }
+    }
+    return transformedUvs;
+  }
+  get positions() {
+    return this.geometry.positions;
+  }
+  get indices() {
+    return this.geometry.indices;
+  }
+  get color() {
+    return this.renderable.groupColorAlpha;
+  }
+  get groupTransform() {
+    return this.renderable.groupTransform;
+  }
+  get attributeSize() {
+    return this.geometry.positions.length / 2;
+  }
+  get indexSize() {
+    return this.geometry.indices.length;
+  }
+}
+
+class MeshPipe {
+  constructor(renderer, adaptor) {
+    this.localUniforms = new UniformGroup({
+      uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
+      uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
+      uRound: { value: 0, type: "f32" }
+    });
+    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);
+    const wasBatched = meshData.batched;
+    const isBatched = mesh.batched;
+    meshData.batched = isBatched;
+    if (wasBatched !== isBatched) {
+      return true;
+    } else if (isBatched) {
+      const geometry = mesh._geometry;
+      if (geometry.indices.length !== meshData.indexSize || geometry.positions.length !== meshData.vertexSize) {
+        meshData.indexSize = geometry.indices.length;
+        meshData.vertexSize = geometry.positions.length;
+        return true;
+      }
+      const batchableMesh = this._getBatchableMesh(mesh);
+      if (batchableMesh.texture.uid !== mesh._texture.uid) {
+        batchableMesh._textureMatrixUpdateId = -1;
+      }
+      return !batchableMesh._batcher.checkAndUpdateTexture(
+        batchableMesh,
+        mesh._texture
+      );
+    }
+    return false;
+  }
+  addRenderable(mesh, instructionSet) {
+    const batcher = this.renderer.renderPipes.batch;
+    const { batched } = this._getMeshData(mesh);
+    if (batched) {
+      const gpuBatchableMesh = this._getBatchableMesh(mesh);
+      gpuBatchableMesh.setTexture(mesh._texture);
+      gpuBatchableMesh.geometry = mesh._geometry;
+      batcher.addToBatch(gpuBatchableMesh, instructionSet);
+    } else {
+      batcher.break(instructionSet);
+      instructionSet.add(mesh);
+    }
+  }
+  updateRenderable(mesh) {
+    if (mesh.batched) {
+      const gpuBatchableMesh = this._gpuBatchableMeshHash[mesh.uid];
+      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;
+    mesh.state.blendMode = getAdjustedBlendModeBlend(mesh.groupBlendMode, mesh.texture._source);
+    const localUniforms = this.localUniforms;
+    localUniforms.uniforms.uTransformMatrix = mesh.groupTransform;
+    localUniforms.uniforms.uRound = this.renderer._roundPixels | mesh._roundPixels;
+    localUniforms.update();
+    color32BitToUniform(
+      mesh.groupColorAlpha,
+      localUniforms.uniforms.uColor,
+      0
+    );
+    this._adaptor.execute(this, mesh);
+  }
+  _getMeshData(mesh) {
+    return this._meshDataHash[mesh.uid] || this._initMeshData(mesh);
+  }
+  _initMeshData(mesh) {
+    this._meshDataHash[mesh.uid] = {
+      batched: mesh.batched,
+      indexSize: mesh._geometry.indices?.length,
+      vertexSize: mesh._geometry.positions?.length
+    };
+    mesh.on("destroyed", this._destroyRenderableBound);
+    return this._meshDataHash[mesh.uid];
+  }
+  _getBatchableMesh(mesh) {
+    return this._gpuBatchableMeshHash[mesh.uid] || this._initBatchableMesh(mesh);
+  }
+  _initBatchableMesh(mesh) {
+    const gpuMesh = BigPool.get(BatchableMesh);
+    gpuMesh.renderable = mesh;
+    gpuMesh.setTexture(mesh._texture);
+    gpuMesh.transform = mesh.groupTransform;
+    gpuMesh.roundPixels = this.renderer._roundPixels | mesh._roundPixels;
+    this._gpuBatchableMeshHash[mesh.uid] = 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();
+    this._adaptor = null;
+    this.renderer = null;
+  }
+}
+/** @ignore */
+MeshPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "mesh"
+};
+
+class GlParticleContainerAdaptor {
+  execute(particleContainerPipe, container) {
+    const state = particleContainerPipe.state;
+    const renderer = particleContainerPipe.renderer;
+    const shader = container.shader || particleContainerPipe.defaultShader;
+    shader.resources.uTexture = container.texture._source;
+    shader.resources.uniforms = particleContainerPipe.localUniforms;
+    const gl = renderer.gl;
+    const buffer = particleContainerPipe.getBuffers(container);
+    renderer.shader.bind(shader);
+    renderer.state.set(state);
+    renderer.geometry.bind(buffer.geometry, shader.glProgram);
+    const byteSize = buffer.geometry.indexBuffer.data.BYTES_PER_ELEMENT;
+    const glType = byteSize === 2 ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT;
+    gl.drawElements(gl.TRIANGLES, container.particleChildren.length * 6, glType, 0);
+  }
+}
+
+class GpuParticleContainerAdaptor {
+  execute(particleContainerPipe, container) {
+    const renderer = particleContainerPipe.renderer;
+    const shader = container.shader || particleContainerPipe.defaultShader;
+    shader.groups[0] = renderer.renderPipes.uniformBatch.getUniformBindGroup(particleContainerPipe.localUniforms, true);
+    shader.groups[1] = renderer.texture.getTextureBindGroup(container.texture);
+    const state = particleContainerPipe.state;
+    const buffer = particleContainerPipe.getBuffers(container);
+    renderer.encoder.draw({
+      geometry: buffer.geometry,
+      shader: container.shader || particleContainerPipe.defaultShader,
+      state,
+      size: container.particleChildren.length * 6
+    });
+  }
+}
+
+function createIndicesForQuads(size, outBuffer = null) {
+  const totalIndices = size * 6;
+  if (totalIndices > 65535) {
+    outBuffer || (outBuffer = new Uint32Array(totalIndices));
+  } else {
+    outBuffer || (outBuffer = new Uint16Array(totalIndices));
+  }
+  if (outBuffer.length !== totalIndices) {
+    throw new Error(`Out buffer length is incorrect, got ${outBuffer.length} and expected ${totalIndices}`);
+  }
+  for (let i = 0, j = 0; i < totalIndices; i += 6, j += 4) {
+    outBuffer[i + 0] = j + 0;
+    outBuffer[i + 1] = j + 1;
+    outBuffer[i + 2] = j + 2;
+    outBuffer[i + 3] = j + 0;
+    outBuffer[i + 4] = j + 2;
+    outBuffer[i + 5] = j + 3;
+  }
+  return outBuffer;
+}
+
+function generateParticleUpdateFunction(properties) {
+  return {
+    dynamicUpdate: generateUpdateFunction(properties, true),
+    staticUpdate: generateUpdateFunction(properties, false)
+  };
+}
+function generateUpdateFunction(properties, dynamic) {
+  const funcFragments = [];
+  funcFragments.push(`
+      
+        var index = 0;
+
+        for (let i = 0; i < ps.length; ++i)
+        {
+            const p = ps[i];
+
+            `);
+  let offset = 0;
+  for (const i in properties) {
+    const property = properties[i];
+    if (dynamic !== property.dynamic)
+      continue;
+    funcFragments.push(`offset = index + ${offset}`);
+    funcFragments.push(property.code);
+    const attributeInfo = getAttributeInfoFromFormat(property.format);
+    offset += attributeInfo.stride / 4;
+  }
+  funcFragments.push(`
+            index += stride * 4;
+        }
+    `);
+  funcFragments.unshift(`
+        var stride = ${offset};
+    `);
+  const functionSource = funcFragments.join("\n");
+  return new Function("ps", "f32v", "u32v", functionSource);
+}
+
+class ParticleBuffer {
+  constructor(options) {
+    this._size = 0;
+    this._generateParticleUpdateCache = {};
+    const size = this._size = options.size ?? 1e3;
+    const properties = options.properties;
+    let staticVertexSize = 0;
+    let dynamicVertexSize = 0;
+    for (const i in properties) {
+      const property = properties[i];
+      const attributeInfo = getAttributeInfoFromFormat(property.format);
+      if (property.dynamic) {
+        dynamicVertexSize += attributeInfo.stride;
+      } else {
+        staticVertexSize += attributeInfo.stride;
+      }
+    }
+    this._dynamicStride = dynamicVertexSize / 4;
+    this._staticStride = staticVertexSize / 4;
+    this.staticAttributeBuffer = new ViewableBuffer(size * 4 * staticVertexSize);
+    this.dynamicAttributeBuffer = new ViewableBuffer(size * 4 * dynamicVertexSize);
+    this.indexBuffer = createIndicesForQuads(size);
+    const geometry = new Geometry();
+    let dynamicOffset = 0;
+    let staticOffset = 0;
+    this._staticBuffer = new Buffer({
+      data: new Float32Array(1),
+      label: "static-particle-buffer",
+      shrinkToFit: false,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    this._dynamicBuffer = new Buffer({
+      data: new Float32Array(1),
+      label: "dynamic-particle-buffer",
+      shrinkToFit: false,
+      usage: BufferUsage.VERTEX | BufferUsage.COPY_DST
+    });
+    for (const i in properties) {
+      const property = properties[i];
+      const attributeInfo = getAttributeInfoFromFormat(property.format);
+      if (property.dynamic) {
+        geometry.addAttribute(property.attributeName, {
+          buffer: this._dynamicBuffer,
+          stride: this._dynamicStride * 4,
+          offset: dynamicOffset * 4,
+          format: property.format
+        });
+        dynamicOffset += attributeInfo.size;
+      } else {
+        geometry.addAttribute(property.attributeName, {
+          buffer: this._staticBuffer,
+          stride: this._staticStride * 4,
+          offset: staticOffset * 4,
+          format: property.format
+        });
+        staticOffset += attributeInfo.size;
+      }
+    }
+    geometry.addIndex(this.indexBuffer);
+    const uploadFunction = this.getParticleUpdate(properties);
+    this._dynamicUpload = uploadFunction.dynamicUpdate;
+    this._staticUpload = uploadFunction.staticUpdate;
+    this.geometry = geometry;
+  }
+  getParticleUpdate(properties) {
+    const key = getParticleSyncKey(properties);
+    if (this._generateParticleUpdateCache[key]) {
+      return this._generateParticleUpdateCache[key];
+    }
+    this._generateParticleUpdateCache[key] = this.generateParticleUpdate(properties);
+    return this._generateParticleUpdateCache[key];
+  }
+  generateParticleUpdate(properties) {
+    return generateParticleUpdateFunction(properties);
+  }
+  update(particles, uploadStatic) {
+    if (particles.length > this._size) {
+      uploadStatic = true;
+      this._size = Math.max(particles.length, this._size * 1.5 | 0);
+      this.staticAttributeBuffer = new ViewableBuffer(this._size * this._staticStride * 4 * 4);
+      this.dynamicAttributeBuffer = new ViewableBuffer(this._size * this._dynamicStride * 4 * 4);
+      this.indexBuffer = createIndicesForQuads(this._size);
+      this.geometry.indexBuffer.setDataWithSize(
+        this.indexBuffer,
+        this.indexBuffer.byteLength,
+        true
+      );
+    }
+    const dynamicAttributeBuffer = this.dynamicAttributeBuffer;
+    this._dynamicUpload(particles, dynamicAttributeBuffer.float32View, dynamicAttributeBuffer.uint32View);
+    this._dynamicBuffer.setDataWithSize(
+      this.dynamicAttributeBuffer.float32View,
+      particles.length * this._dynamicStride * 4,
+      true
+    );
+    if (uploadStatic) {
+      const staticAttributeBuffer = this.staticAttributeBuffer;
+      this._staticUpload(particles, staticAttributeBuffer.float32View, staticAttributeBuffer.uint32View);
+      this._staticBuffer.setDataWithSize(
+        staticAttributeBuffer.float32View,
+        particles.length * this._staticStride * 4,
+        true
+      );
+    }
+  }
+  destroy() {
+    this._staticBuffer.destroy();
+    this._dynamicBuffer.destroy();
+    this.geometry.destroy();
+  }
+}
+function getParticleSyncKey(properties) {
+  const keyGen = [];
+  for (const key in properties) {
+    const property = properties[key];
+    keyGen.push(key, property.code, property.dynamic ? "d" : "s");
+  }
+  return keyGen.join("_");
+}
+
+var fragment = "varying vec2 vUV;\nvarying vec4 vColor;\n\nuniform sampler2D uTexture;\n\nvoid main(void){\n    vec4 color = texture2D(uTexture, vUV) * vColor;\n    gl_FragColor = color;\n}";
+
+var vertex = "attribute vec2 aVertex;\nattribute vec2 aUV;\nattribute vec4 aColor;\n\nattribute vec2 aPosition;\nattribute float aRotation;\n\nuniform mat3 uTranslationMatrix;\nuniform float uRound;\nuniform vec2 uResolution;\nuniform vec4 uColor;\n\nvarying vec2 vUV;\nvarying vec4 vColor;\n\nvec2 roundPixels(vec2 position, vec2 targetSize)\n{       \n    return (floor(((position * 0.5 + 0.5) * targetSize) + 0.5) / targetSize) * 2.0 - 1.0;\n}\n\nvoid main(void){\n    float cosRotation = cos(aRotation);\n    float sinRotation = sin(aRotation);\n    float x = aVertex.x * cosRotation - aVertex.y * sinRotation;\n    float y = aVertex.x * sinRotation + aVertex.y * cosRotation;\n\n    vec2 v = vec2(x, y);\n    v = v + aPosition;\n\n    gl_Position = vec4((uTranslationMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);\n\n    if(uRound == 1.0)\n    {\n        gl_Position.xy = roundPixels(gl_Position.xy, uResolution);\n    }\n\n    vUV = aUV;\n    vColor = vec4(aColor.rgb * aColor.a, aColor.a) * uColor;\n}\n";
+
+var wgsl = "\nstruct ParticleUniforms {\n  uProjectionMatrix:mat3x3<f32>,\n  uColor:vec4<f32>,\n  uResolution:vec2<f32>,\n  uRoundPixels:f32,\n};\n\n@group(0) @binding(0) var<uniform> uniforms: ParticleUniforms;\n\n@group(1) @binding(0) var uTexture: texture_2d<f32>;\n@group(1) @binding(1) var uSampler : sampler;\n\nstruct VSOutput {\n    @builtin(position) position: vec4<f32>,\n    @location(0) uv : vec2<f32>,\n    @location(1) color : vec4<f32>,\n  };\n@vertex\nfn mainVertex(\n  @location(0) aVertex: vec2<f32>,\n  @location(1) aPosition: vec2<f32>,\n  @location(2) aUV: vec2<f32>,\n  @location(3) aColor: vec4<f32>,\n  @location(4) aRotation: f32,\n) -> VSOutput {\n  \n   let v = vec2(\n       aVertex.x * cos(aRotation) - aVertex.y * sin(aRotation),\n       aVertex.x * sin(aRotation) + aVertex.y * cos(aRotation)\n   ) + aPosition;\n\n   let position = vec4((uniforms.uProjectionMatrix * vec3(v, 1.0)).xy, 0.0, 1.0);\n\n    let vColor = vec4(aColor.rgb * aColor.a, aColor.a) * uniforms.uColor;\n\n  return VSOutput(\n   position,\n   aUV,\n   vColor,\n  );\n}\n\n@fragment\nfn mainFragment(\n  @location(0) uv: vec2<f32>,\n  @location(1) color: vec4<f32>,\n  @builtin(position) position: vec4<f32>,\n) -> @location(0) vec4<f32> {\n\n    var sample = textureSample(uTexture, uSampler, uv) * color;\n   \n    return sample;\n}";
+
+class ParticleShader extends Shader {
+  constructor() {
+    const glProgram = GlProgram.from({
+      vertex,
+      fragment
+    });
+    const gpuProgram = GpuProgram.from({
+      fragment: {
+        source: wgsl,
+        entryPoint: "mainFragment"
+      },
+      vertex: {
+        source: wgsl,
+        entryPoint: "mainVertex"
+      }
+    });
+    super({
+      glProgram,
+      gpuProgram,
+      resources: {
+        // this will be replaced with the texture from the particle container
+        uTexture: Texture.WHITE.source,
+        // this will be replaced with the texture style from the particle container
+        uSampler: new TextureStyle({}),
+        // this will be replaced with the local uniforms from the particle container
+        uniforms: {
+          uTranslationMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
+          uColor: { value: new Color(16777215), type: "vec4<f32>" },
+          uRound: { value: 1, type: "f32" },
+          uResolution: { value: [0, 0], type: "vec2<f32>" }
+        }
+      }
+    });
+  }
+}
+
+class ParticleContainerPipe {
+  /**
+   * @param renderer - The renderer this sprite batch works for.
+   * @param adaptor
+   */
+  constructor(renderer, adaptor) {
+    this.state = State.for2d();
+    this._gpuBufferHash = /* @__PURE__ */ Object.create(null);
+    // eslint-disable-next-line max-len
+    this._destroyRenderableBound = this.destroyRenderable.bind(this);
+    this.localUniforms = new UniformGroup({
+      uTranslationMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
+      uColor: { value: new Float32Array(4), type: "vec4<f32>" },
+      uRound: { value: 1, type: "f32" },
+      uResolution: { value: [0, 0], type: "vec2<f32>" }
+    });
+    this.renderer = renderer;
+    this.adaptor = adaptor;
+    this.defaultShader = new ParticleShader();
+    this.state = State.for2d();
+  }
+  validateRenderable(_renderable) {
+    return false;
+  }
+  addRenderable(renderable, instructionSet) {
+    this.renderer.renderPipes.batch.break(instructionSet);
+    instructionSet.add(renderable);
+  }
+  getBuffers(renderable) {
+    return this._gpuBufferHash[renderable.uid] || this._initBuffer(renderable);
+  }
+  _initBuffer(renderable) {
+    this._gpuBufferHash[renderable.uid] = new ParticleBuffer({
+      size: renderable.particleChildren.length,
+      properties: renderable._properties
+    });
+    renderable.on("destroyed", this._destroyRenderableBound);
+    return this._gpuBufferHash[renderable.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) {
+      return;
+    }
+    const renderer = this.renderer;
+    const buffer = this.getBuffers(container);
+    container.texture || (container.texture = children[0].texture);
+    const state = this.state;
+    buffer.update(children, container._childrenDirty);
+    container._childrenDirty = false;
+    state.blendMode = getAdjustedBlendModeBlend(container.blendMode, container.texture._source);
+    const uniforms = this.localUniforms.uniforms;
+    const transformationMatrix = uniforms.uTranslationMatrix;
+    container.worldTransform.copyTo(transformationMatrix);
+    transformationMatrix.prepend(renderer.globalUniforms.globalUniformData.projectionMatrix);
+    uniforms.uResolution = renderer.globalUniforms.globalUniformData.resolution;
+    uniforms.uRound = renderer._roundPixels | container._roundPixels;
+    color32BitToUniform(
+      container.groupColorAlpha,
+      uniforms.uColor,
+      0
+    );
+    this.adaptor.execute(this, container);
+  }
+  /** Destroys the ParticleRenderer. */
+  destroy() {
+    if (this.defaultShader) {
+      this.defaultShader.destroy();
+      this.defaultShader = null;
+    }
+  }
+}
+
+class GlParticleContainerPipe extends ParticleContainerPipe {
+  constructor(renderer) {
+    super(renderer, new GlParticleContainerAdaptor());
+  }
+}
+/** @ignore */
+GlParticleContainerPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes
+  ],
+  name: "particle"
+};
+
+class GpuParticleContainerPipe extends ParticleContainerPipe {
+  constructor(renderer) {
+    super(renderer, new GpuParticleContainerAdaptor());
+  }
+}
+/** @ignore */
+GpuParticleContainerPipe.extension = {
+  type: [
+    ExtensionType.WebGPUPipes
+  ],
+  name: "particle"
+};
+
+const _NineSliceGeometry = class _NineSliceGeometry extends PlaneGeometry {
+  constructor(options = {}) {
+    options = { ..._NineSliceGeometry.defaultOptions, ...options };
+    super({
+      width: options.width,
+      height: options.height,
+      verticesX: 4,
+      verticesY: 4
+    });
+    this.update(options);
+  }
+  /**
+   * Updates the NineSliceGeometry with the options.
+   * @param options - The options of the NineSliceGeometry.
+   */
+  update(options) {
+    this.width = options.width ?? this.width;
+    this.height = options.height ?? this.height;
+    this._originalWidth = options.originalWidth ?? this._originalWidth;
+    this._originalHeight = options.originalHeight ?? this._originalHeight;
+    this._leftWidth = options.leftWidth ?? this._leftWidth;
+    this._rightWidth = options.rightWidth ?? this._rightWidth;
+    this._topHeight = options.topHeight ?? this._topHeight;
+    this._bottomHeight = options.bottomHeight ?? this._bottomHeight;
+    this._anchorX = options.anchor?.x;
+    this._anchorY = options.anchor?.y;
+    this.updateUvs();
+    this.updatePositions();
+  }
+  /** Updates the positions of the vertices. */
+  updatePositions() {
+    const p = this.positions;
+    const {
+      width,
+      height,
+      _leftWidth,
+      _rightWidth,
+      _topHeight,
+      _bottomHeight,
+      _anchorX,
+      _anchorY
+    } = this;
+    const w = _leftWidth + _rightWidth;
+    const scaleW = width > w ? 1 : width / w;
+    const h = _topHeight + _bottomHeight;
+    const scaleH = height > h ? 1 : height / h;
+    const scale = Math.min(scaleW, scaleH);
+    const anchorOffsetX = _anchorX * width;
+    const anchorOffsetY = _anchorY * height;
+    p[0] = p[8] = p[16] = p[24] = -anchorOffsetX;
+    p[2] = p[10] = p[18] = p[26] = _leftWidth * scale - anchorOffsetX;
+    p[4] = p[12] = p[20] = p[28] = width - _rightWidth * scale - anchorOffsetX;
+    p[6] = p[14] = p[22] = p[30] = width - anchorOffsetX;
+    p[1] = p[3] = p[5] = p[7] = -anchorOffsetY;
+    p[9] = p[11] = p[13] = p[15] = _topHeight * scale - anchorOffsetY;
+    p[17] = p[19] = p[21] = p[23] = height - _bottomHeight * scale - anchorOffsetY;
+    p[25] = p[27] = p[29] = p[31] = height - anchorOffsetY;
+    this.getBuffer("aPosition").update();
+  }
+  /** Updates the UVs of the vertices. */
+  updateUvs() {
+    const uvs = this.uvs;
+    uvs[0] = uvs[8] = uvs[16] = uvs[24] = 0;
+    uvs[1] = uvs[3] = uvs[5] = uvs[7] = 0;
+    uvs[6] = uvs[14] = uvs[22] = uvs[30] = 1;
+    uvs[25] = uvs[27] = uvs[29] = uvs[31] = 1;
+    const _uvw = 1 / this._originalWidth;
+    const _uvh = 1 / this._originalHeight;
+    uvs[2] = uvs[10] = uvs[18] = uvs[26] = _uvw * this._leftWidth;
+    uvs[9] = uvs[11] = uvs[13] = uvs[15] = _uvh * this._topHeight;
+    uvs[4] = uvs[12] = uvs[20] = uvs[28] = 1 - _uvw * this._rightWidth;
+    uvs[17] = uvs[19] = uvs[21] = uvs[23] = 1 - _uvh * this._bottomHeight;
+    this.getBuffer("aUV").update();
+  }
+};
+/** The default options for the NineSliceGeometry. */
+_NineSliceGeometry.defaultOptions = {
+  /** The width of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
+  width: 100,
+  /** The height of the NineSlicePlane, setting this will actually modify the vertices and UV's of this plane. */
+  height: 100,
+  /** The width of the left column. */
+  leftWidth: 10,
+  /** The height of the top row. */
+  topHeight: 10,
+  /** The width of the right column. */
+  rightWidth: 10,
+  /** The height of the bottom row. */
+  bottomHeight: 10,
+  /** The original width of the texture */
+  originalWidth: 100,
+  /** The original height of the texture */
+  originalHeight: 100
+};
+let NineSliceGeometry = _NineSliceGeometry;
+
+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);
+    if (sprite.didViewUpdate)
+      this._updateBatchableSprite(sprite, gpuSprite);
+    this._renderer.renderPipes.batch.addToBatch(gpuSprite, instructionSet);
+  }
+  updateRenderable(sprite) {
+    const gpuSprite = this._gpuSpriteHash[sprite.uid];
+    if (sprite.didViewUpdate)
+      this._updateBatchableSprite(sprite, gpuSprite);
+    gpuSprite._batcher.updateElement(gpuSprite);
+  }
+  validateRenderable(sprite) {
+    const gpuSprite = this._getGpuSprite(sprite);
+    return !gpuSprite._batcher.checkAndUpdateTexture(
+      gpuSprite,
+      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);
+  }
+  _initGPUSprite(sprite) {
+    const batchableMesh = BigPool.get(BatchableMesh);
+    batchableMesh.geometry = BigPool.get(NineSliceGeometry);
+    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;
+  }
+  destroy() {
+    for (const i in this._gpuSpriteHash) {
+      const batchableMesh = this._gpuSpriteHash[i];
+      batchableMesh.geometry.destroy();
+    }
+    this._gpuSpriteHash = null;
+    this._renderer = null;
+  }
+}
+/** @ignore */
+NineSliceSpritePipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "nineSliceSprite"
+};
+
+const tilingBit = {
+  name: "tiling-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+            struct TilingUniforms {
+                uMapCoord:mat3x3<f32>,
+                uClampFrame:vec4<f32>,
+                uClampOffset:vec2<f32>,
+                uTextureTransform:mat3x3<f32>,
+                uSizeAnchor:vec4<f32>
+            };
+
+            @group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
+            @group(2) @binding(1) var uTexture: texture_2d<f32>;
+            @group(2) @binding(2) var uSampler: sampler;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            uv = (tilingUniforms.uTextureTransform * vec3(uv, 1.0)).xy;
+
+            position = (position - tilingUniforms.uSizeAnchor.zw) * tilingUniforms.uSizeAnchor.xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* wgsl */
+      `
+            struct TilingUniforms {
+                uMapCoord:mat3x3<f32>,
+                uClampFrame:vec4<f32>,
+                uClampOffset:vec2<f32>,
+                uTextureTransform:mat3x3<f32>,
+                uSizeAnchor:vec4<f32>
+            };
+
+            @group(2) @binding(0) var<uniform> tilingUniforms: TilingUniforms;
+            @group(2) @binding(1) var uTexture: texture_2d<f32>;
+            @group(2) @binding(2) var uSampler: sampler;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+
+            var coord = vUV + ceil(tilingUniforms.uClampOffset - vUV);
+            coord = (tilingUniforms.uMapCoord * vec3(coord, 1.0)).xy;
+            var unclamped = coord;
+            coord = clamp(coord, tilingUniforms.uClampFrame.xy, tilingUniforms.uClampFrame.zw);
+
+            var bias = 0.;
+
+            if(unclamped.x == coord.x && unclamped.y == coord.y)
+            {
+                bias = -32.;
+            } 
+
+            outColor = textureSampleBias(uTexture, uSampler, coord, bias);
+        `
+    )
+  }
+};
+const tilingBitGl = {
+  name: "tiling-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+            uniform mat3 uTextureTransform;
+            uniform vec4 uSizeAnchor;
+        
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            uv = (uTextureTransform * vec3(aUV, 1.0)).xy;
+
+            position = (position - uSizeAnchor.zw) * uSizeAnchor.xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* glsl */
+      `
+            uniform sampler2D uTexture;
+            uniform mat3 uMapCoord;
+            uniform vec4 uClampFrame;
+            uniform vec2 uClampOffset;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+
+        vec2 coord = vUV + ceil(uClampOffset - vUV);
+        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
+    
+        `
+    )
+  }
+};
+
+let gpuProgram$1;
+let glProgram$1;
+class TilingSpriteShader extends Shader {
+  constructor() {
+    gpuProgram$1 ?? (gpuProgram$1 = compileHighShaderGpuProgram({
+      name: "tiling-sprite-shader",
+      bits: [
+        localUniformBit,
+        tilingBit,
+        roundPixelsBit
+      ]
+    }));
+    glProgram$1 ?? (glProgram$1 = compileHighShaderGlProgram({
+      name: "tiling-sprite-shader",
+      bits: [
+        localUniformBitGl,
+        tilingBitGl,
+        roundPixelsBitGl
+      ]
+    }));
+    const tilingUniforms = new UniformGroup({
+      uMapCoord: { value: new Matrix(), type: "mat3x3<f32>" },
+      uClampFrame: { value: new Float32Array([0, 0, 1, 1]), type: "vec4<f32>" },
+      uClampOffset: { value: new Float32Array([0, 0]), type: "vec2<f32>" },
+      uTextureTransform: { value: new Matrix(), type: "mat3x3<f32>" },
+      uSizeAnchor: { value: new Float32Array([100, 100, 0.5, 0.5]), type: "vec4<f32>" }
+    });
+    super({
+      glProgram: glProgram$1,
+      gpuProgram: gpuProgram$1,
+      resources: {
+        localUniforms: new UniformGroup({
+          uTransformMatrix: { value: new Matrix(), type: "mat3x3<f32>" },
+          uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
+          uRound: { value: 0, type: "f32" }
+        }),
+        tilingUniforms,
+        uTexture: Texture.EMPTY.source,
+        uSampler: Texture.EMPTY.source.style
+      }
+    });
+  }
+  updateUniforms(width, height, matrix, anchorX, anchorY, texture) {
+    const tilingUniforms = this.resources.tilingUniforms;
+    const textureWidth = texture.width;
+    const textureHeight = texture.height;
+    const textureMatrix = texture.textureMatrix;
+    const uTextureTransform = tilingUniforms.uniforms.uTextureTransform;
+    uTextureTransform.set(
+      matrix.a * textureWidth / width,
+      matrix.b * textureWidth / height,
+      matrix.c * textureHeight / width,
+      matrix.d * textureHeight / height,
+      matrix.tx / width,
+      matrix.ty / height
+    );
+    uTextureTransform.invert();
+    tilingUniforms.uniforms.uMapCoord = textureMatrix.mapCoord;
+    tilingUniforms.uniforms.uClampFrame = textureMatrix.uClampFrame;
+    tilingUniforms.uniforms.uClampOffset = textureMatrix.uClampOffset;
+    tilingUniforms.uniforms.uTextureTransform = uTextureTransform;
+    tilingUniforms.uniforms.uSizeAnchor[0] = width;
+    tilingUniforms.uniforms.uSizeAnchor[1] = height;
+    tilingUniforms.uniforms.uSizeAnchor[2] = anchorX;
+    tilingUniforms.uniforms.uSizeAnchor[3] = anchorY;
+    if (texture) {
+      this.resources.uTexture = texture.source;
+      this.resources.uSampler = texture.source.style;
+    }
+  }
+}
+
+class QuadGeometry extends MeshGeometry {
+  constructor() {
+    super({
+      positions: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+      uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
+      indices: new Uint32Array([0, 1, 2, 0, 2, 3])
+    });
+  }
+}
+
+function setPositions(tilingSprite, positions) {
+  const anchorX = tilingSprite.anchor.x;
+  const anchorY = tilingSprite.anchor.y;
+  positions[0] = -anchorX * tilingSprite.width;
+  positions[1] = -anchorY * tilingSprite.height;
+  positions[2] = (1 - anchorX) * tilingSprite.width;
+  positions[3] = -anchorY * tilingSprite.height;
+  positions[4] = (1 - anchorX) * tilingSprite.width;
+  positions[5] = (1 - anchorY) * tilingSprite.height;
+  positions[6] = -anchorX * tilingSprite.width;
+  positions[7] = (1 - anchorY) * tilingSprite.height;
+}
+
+function applyMatrix(array, stride, offset, matrix) {
+  let index = 0;
+  const size = array.length / (stride);
+  const a = matrix.a;
+  const b = matrix.b;
+  const c = matrix.c;
+  const d = matrix.d;
+  const tx = matrix.tx;
+  const ty = matrix.ty;
+  offset *= stride;
+  while (index < size) {
+    const x = array[offset];
+    const y = array[offset + 1];
+    array[offset] = a * x + c * y + tx;
+    array[offset + 1] = b * x + d * y + ty;
+    offset += stride;
+    index++;
+  }
+}
+
+function setUvs(tilingSprite, uvs) {
+  const texture = tilingSprite.texture;
+  const width = texture.frame.width;
+  const height = texture.frame.height;
+  let anchorX = 0;
+  let anchorY = 0;
+  if (tilingSprite.applyAnchorToTexture) {
+    anchorX = tilingSprite.anchor.x;
+    anchorY = tilingSprite.anchor.y;
+  }
+  uvs[0] = uvs[6] = -anchorX;
+  uvs[2] = uvs[4] = 1 - anchorX;
+  uvs[1] = uvs[3] = -anchorY;
+  uvs[5] = uvs[7] = 1 - anchorY;
+  const textureMatrix = Matrix.shared;
+  textureMatrix.copyFrom(tilingSprite._tileTransform.matrix);
+  textureMatrix.tx /= tilingSprite.width;
+  textureMatrix.ty /= tilingSprite.height;
+  textureMatrix.invert();
+  textureMatrix.scale(tilingSprite.width / width, tilingSprite.height / height);
+  applyMatrix(uvs, 2, 0, textureMatrix);
+}
+
+const sharedQuad = new QuadGeometry();
+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);
+    const couldBatch = tilingSpriteData.canBatch;
+    this._updateCanBatch(renderable);
+    const canBatch = tilingSpriteData.canBatch;
+    if (canBatch && canBatch === couldBatch) {
+      const { batchableMesh } = tilingSpriteData;
+      return !batchableMesh._batcher.checkAndUpdateTexture(
+        batchableMesh,
+        renderable.texture
+      );
+    }
+    return couldBatch !== canBatch;
+  }
+  addRenderable(tilingSprite, instructionSet) {
+    const batcher = this._renderer.renderPipes.batch;
+    this._updateCanBatch(tilingSprite);
+    const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
+    const { geometry, canBatch } = tilingSpriteData;
+    if (canBatch) {
+      tilingSpriteData.batchableMesh || (tilingSpriteData.batchableMesh = new BatchableMesh());
+      const batchableMesh = tilingSpriteData.batchableMesh;
+      if (tilingSprite.didViewUpdate) {
+        this._updateBatchableMesh(tilingSprite);
+        batchableMesh.geometry = geometry;
+        batchableMesh.renderable = tilingSprite;
+        batchableMesh.transform = tilingSprite.groupTransform;
+        batchableMesh.setTexture(tilingSprite._texture);
+      }
+      batchableMesh.roundPixels = this._renderer._roundPixels | tilingSprite._roundPixels;
+      batcher.addToBatch(batchableMesh, instructionSet);
+    } else {
+      batcher.break(instructionSet);
+      tilingSpriteData.shader || (tilingSpriteData.shader = new TilingSpriteShader());
+      this.updateRenderable(tilingSprite);
+      instructionSet.add(tilingSprite);
+    }
+  }
+  execute(tilingSprite) {
+    const { shader } = this._tilingSpriteDataHash[tilingSprite.uid];
+    shader.groups[0] = this._renderer.globalUniforms.bindGroup;
+    const localUniforms = shader.resources.localUniforms.uniforms;
+    localUniforms.uTransformMatrix = tilingSprite.groupTransform;
+    localUniforms.uRound = this._renderer._roundPixels | tilingSprite._roundPixels;
+    color32BitToUniform(
+      tilingSprite.groupColorAlpha,
+      localUniforms.uColor,
+      0
+    );
+    this._state.blendMode = getAdjustedBlendModeBlend(tilingSprite.groupBlendMode, tilingSprite.texture._source);
+    this._renderer.encoder.draw({
+      geometry: sharedQuad,
+      shader,
+      state: this._state
+    });
+  }
+  updateRenderable(tilingSprite) {
+    const tilingSpriteData = this._getTilingSpriteData(tilingSprite);
+    const { canBatch } = tilingSpriteData;
+    if (canBatch) {
+      const { batchableMesh } = tilingSpriteData;
+      if (tilingSprite.didViewUpdate)
+        this._updateBatchableMesh(tilingSprite);
+      batchableMesh._batcher.updateElement(batchableMesh);
+    } else if (tilingSprite.didViewUpdate) {
+      const { shader } = tilingSpriteData;
+      shader.updateUniforms(
+        tilingSprite.width,
+        tilingSprite.height,
+        tilingSprite._tileTransform.matrix,
+        tilingSprite.anchor.x,
+        tilingSprite.anchor.y,
+        tilingSprite.texture
+      );
+    }
+  }
+  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);
+  }
+  _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];
+  }
+  _updateBatchableMesh(tilingSprite) {
+    const renderableData = this._getTilingSpriteData(tilingSprite);
+    const { geometry } = renderableData;
+    const style = tilingSprite.texture.source.style;
+    if (style.addressMode !== "repeat") {
+      style.addressMode = "repeat";
+      style.update();
+    }
+    setUvs(tilingSprite, geometry.uvs);
+    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) {
+    const renderableData = this._getTilingSpriteData(tilingSprite);
+    const texture = tilingSprite.texture;
+    let _nonPowOf2wrapping = true;
+    if (this._renderer.type === RendererType.WEBGL) {
+      _nonPowOf2wrapping = this._renderer.context.supports.nonPowOf2wrapping;
+    }
+    renderableData.canBatch = texture.textureMatrix.isSimple && (_nonPowOf2wrapping || texture.source.isPowerOfTwo);
+    return renderableData.canBatch;
+  }
+}
+/** @ignore */
+TilingSpritePipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "tilingSprite"
+};
+
+const localUniformMSDFBit = {
+  name: "local-uniform-msdf-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+            struct LocalUniforms {
+                uColor:vec4<f32>,
+                uTransformMatrix:mat3x3<f32>,
+                uDistance: f32,
+                uRound:f32,
+            }
+
+            @group(2) @binding(0) var<uniform> localUniforms : LocalUniforms;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            vColor *= localUniforms.uColor;
+            modelMatrix *= localUniforms.uTransformMatrix;
+        `
+    ),
+    end: (
+      /* wgsl */
+      `
+            if(localUniforms.uRound == 1)
+            {
+                vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
+            }
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* wgsl */
+      `
+            struct LocalUniforms {
+                uColor:vec4<f32>,
+                uTransformMatrix:mat3x3<f32>,
+                uDistance: f32
+            }
+
+            @group(2) @binding(0) var<uniform> localUniforms : LocalUniforms;
+         `
+    ),
+    main: (
+      /* wgsl */
+      ` 
+            outColor = vec4<f32>(calculateMSDFAlpha(outColor, localUniforms.uColor, localUniforms.uDistance));
+        `
+    )
+  }
+};
+const localUniformMSDFBitGl = {
+  name: "local-uniform-msdf-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+            uniform mat3 uTransformMatrix;
+            uniform vec4 uColor;
+            uniform float uRound;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            vColor *= uColor;
+            modelMatrix *= uTransformMatrix;
+        `
+    ),
+    end: (
+      /* glsl */
+      `
+            if(uRound == 1.)
+            {
+                gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
+            }
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* glsl */
+      `
+            uniform float uDistance;
+         `
+    ),
+    main: (
+      /* glsl */
+      ` 
+            outColor = vec4(calculateMSDFAlpha(outColor, vColor, uDistance));
+        `
+    )
+  }
+};
+
+const mSDFBit = {
+  name: "msdf-bit",
+  fragment: {
+    header: (
+      /* 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);
+
+                var screenPxDistance = distance * (median - 0.5);
+                var alpha = clamp(screenPxDistance + 0.5, 0.0, 1.0);
+                if (median < 0.01) {
+                    alpha = 0.0;
+                } else if (median > 0.99) {
+                    alpha = 1.0;
+                }
+
+                // Gamma correction for coverage-like alpha
+                var luma: f32 = dot(shapeColor.rgb, vec3<f32>(0.299, 0.587, 0.114));
+                var gamma: f32 = mix(1.0, 1.0 / 2.2, luma);
+                var coverage: f32 = pow(shapeColor.a * alpha, gamma);
+
+                return coverage;
+             
+            }
+        `
+    )
+  }
+};
+const mSDFBitGl = {
+  name: "msdf-bit",
+  fragment: {
+    header: (
+      /* 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) {
+                    alpha = 1.0;
+                }
+
+                // 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);  
+              
+                return coverage;
+            }
+        `
+    )
+  }
+};
+
+let gpuProgram;
+let glProgram;
+class SdfShader extends Shader {
+  constructor() {
+    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: [
+        colorBit,
+        generateTextureBatchBit(maxTextures),
+        localUniformMSDFBit,
+        mSDFBit,
+        roundPixelsBit
+      ]
+    }));
+    glProgram ?? (glProgram = compileHighShaderGlProgram({
+      name: "sdf-shader",
+      bits: [
+        colorBitGl,
+        generateTextureBatchBitGl(maxTextures),
+        localUniformMSDFBitGl,
+        mSDFBitGl,
+        roundPixelsBitGl
+      ]
+    }));
+    super({
+      glProgram,
+      gpuProgram,
+      resources: {
+        localUniforms: uniforms,
+        batchSamplers: getBatchSamplersUniformGroup(maxTextures)
+      }
+    });
+  }
+}
+
+class BitmapTextPipe {
+  constructor(renderer) {
+    this._gpuBitmapText = {};
+    this._destroyRenderableBound = this.destroyRenderable.bind(this);
+    this._renderer = renderer;
+    this._renderer.renderableGC.addManagedHash(this, "_gpuBitmapText");
+  }
+  validateRenderable(bitmapText) {
+    const graphicsRenderable = this._getGpuBitmapText(bitmapText);
+    if (bitmapText._didTextUpdate) {
+      bitmapText._didTextUpdate = false;
+      this._updateContext(bitmapText, graphicsRenderable);
+    }
+    return this._renderer.renderPipes.graphics.validateRenderable(graphicsRenderable);
+  }
+  addRenderable(bitmapText, instructionSet) {
+    const graphicsRenderable = this._getGpuBitmapText(bitmapText);
+    syncWithProxy(bitmapText, graphicsRenderable);
+    if (bitmapText._didTextUpdate) {
+      bitmapText._didTextUpdate = false;
+      this._updateContext(bitmapText, graphicsRenderable);
+    }
+    this._renderer.renderPipes.graphics.addRenderable(graphicsRenderable, instructionSet);
+    if (graphicsRenderable.context.customShader) {
+      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);
+    this._renderer.renderPipes.graphics.updateRenderable(graphicsRenderable);
+    if (graphicsRenderable.context.customShader) {
+      this._updateDistanceField(bitmapText);
+    }
+  }
+  _updateContext(bitmapText, proxyGraphics) {
+    const { context } = proxyGraphics;
+    const bitmapFont = BitmapFontManager.getFont(bitmapText.text, bitmapText._style);
+    context.clear();
+    if (bitmapFont.distanceField.type !== "none") {
+      if (!context.customShader) {
+        context.customShader = BigPool.get(SdfShader);
+      }
+    }
+    const chars = Array.from(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;
+    let ty = bitmapTextLayout.height + bitmapTextLayout.offsetY;
+    if (style._stroke) {
+      tx += style._stroke.width / scale;
+      ty += style._stroke.width / scale;
+    }
+    context.translate(-bitmapText._anchor._x * tx - padding, -bitmapText._anchor._y * ty - padding).scale(scale, scale);
+    const tint = bitmapFont.applyFillAsTint ? style._fill.color : 16777215;
+    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 charData = bitmapFont.chars[char];
+        if (charData?.texture) {
+          context.texture(
+            charData.texture,
+            tint ? tint : "black",
+            Math.round(line.charPositions[j] + charData.xOffset),
+            Math.round(currentY + charData.yOffset)
+          );
+        }
+      }
+      currentY += bitmapFont.lineHeight;
+    }
+  }
+  _getGpuBitmapText(bitmapText) {
+    return this._gpuBitmapText[bitmapText.uid] || this.initGpuText(bitmapText);
+  }
+  initGpuText(bitmapText) {
+    const proxyRenderable = BigPool.get(Graphics);
+    this._gpuBitmapText[bitmapText.uid] = proxyRenderable;
+    this._updateContext(bitmapText, proxyRenderable);
+    bitmapText.on("destroyed", this._destroyRenderableBound);
+    return this._gpuBitmapText[bitmapText.uid];
+  }
+  _updateDistanceField(bitmapText) {
+    const context = this._getGpuBitmapText(bitmapText).context;
+    const fontFamily = bitmapText._style.fontFamily;
+    const dynamicFont = Cache.get(`${fontFamily}-bitmap`);
+    const { a, b, c, d } = bitmapText.groupTransform;
+    const dx = Math.sqrt(a * a + b * b);
+    const dy = Math.sqrt(c * c + d * d);
+    const worldScale = (Math.abs(dx) + Math.abs(dy)) / 2;
+    const fontScale = dynamicFont.baseRenderedFontSize / bitmapText._style.fontSize;
+    const distance = worldScale * dynamicFont.distanceField.range * (1 / fontScale);
+    context.customShader.resources.localUniforms.uniforms.uDistance = distance;
+  }
+  destroy() {
+    for (const uid in this._gpuBitmapText) {
+      this._destroyRenderableByUid(uid);
+    }
+    this._gpuBitmapText = null;
+    this._renderer = null;
+  }
+}
+/** @ignore */
+BitmapTextPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "bitmapText"
+};
+function syncWithProxy(container, proxy) {
+  proxy.groupTransform = container.groupTransform;
+  proxy.groupColorAlpha = container.groupColorAlpha;
+  proxy.groupColor = container.groupColor;
+  proxy.groupBlendMode = container.groupBlendMode;
+  proxy.globalDisplayStatus = container.globalDisplayStatus;
+  proxy.groupTransform = container.groupTransform;
+  proxy.localDisplayStatus = container.localDisplayStatus;
+  proxy.groupAlpha = container.groupAlpha;
+  proxy._roundPixels = container._roundPixels;
+}
+
+function updateTextBounds(batchableSprite, text) {
+  const { texture, bounds } = batchableSprite;
+  updateQuadBounds(bounds, text._anchor, texture);
+  const padding = text._style.padding;
+  bounds.minX -= padding;
+  bounds.minY -= padding;
+  bounds.maxX -= padding;
+  bounds.maxY -= padding;
+}
+
+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;
+  }
+  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;
+    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(batchableSprite, htmlText);
+  }
+  async _updateGpuText(htmlText) {
+    htmlText._didTextUpdate = false;
+    const gpuText = this._getGpuText(htmlText);
+    if (gpuText.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);
+  }
+  _getGpuText(htmlText) {
+    return this._gpuText[htmlText.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;
+    htmlText._resolution = htmlText._autoResolution ? this._renderer.resolution : htmlText.resolution;
+    this._gpuText[htmlText.uid] = gpuTextData;
+    htmlText.on("destroyed", this._destroyRenderableBound);
+    return gpuTextData;
+  }
+  destroy() {
+    for (const i in this._gpuText) {
+      this._destroyRenderableById(i);
+    }
+    this._gpuText = null;
+    this._renderer = null;
+  }
+}
+/** @ignore */
+HTMLTextPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  name: "htmlText"
+};
+
+function isSafari() {
+  const { userAgent } = DOMAdapter.get().getNavigator();
+  return /^((?!chrome|android).)*safari/i.test(userAgent);
+}
+
+const tempBounds = new Bounds();
+function getPo2TextureFromSource(image, width, height, resolution) {
+  const bounds = tempBounds;
+  bounds.minX = 0;
+  bounds.minY = 0;
+  bounds.maxX = image.width / resolution | 0;
+  bounds.maxY = image.height / resolution | 0;
+  const texture = TexturePool.getOptimalTexture(
+    bounds.width,
+    bounds.height,
+    resolution,
+    false
+  );
+  texture.source.uploadMethodId = "image";
+  texture.source.resource = image;
+  texture.source.alphaMode = "premultiply-alpha-on-upload";
+  texture.frame.width = width / resolution;
+  texture.frame.height = height / resolution;
+  texture.source.emit("update", texture.source);
+  texture.updateUvs();
+  return texture;
+}
+
+function extractFontFamilies(text, style) {
+  const fontFamily = style.fontFamily;
+  const fontFamilies = [];
+  const dedupe = {};
+  const regex = /font-family:([^;"\s]+)/g;
+  const matches = text.match(regex);
+  function addFontFamily(fontFamily2) {
+    if (!dedupe[fontFamily2]) {
+      fontFamilies.push(fontFamily2);
+      dedupe[fontFamily2] = true;
+    }
+  }
+  if (Array.isArray(fontFamily)) {
+    for (let i = 0; i < fontFamily.length; i++) {
+      addFontFamily(fontFamily[i]);
+    }
+  } else {
+    addFontFamily(fontFamily);
+  }
+  if (matches) {
+    matches.forEach((match) => {
+      const fontFamily2 = match.split(":")[1].trim();
+      addFontFamily(fontFamily2);
+    });
+  }
+  for (const i in style.tagStyles) {
+    const fontFamily2 = style.tagStyles[i].fontFamily;
+    addFontFamily(fontFamily2);
+  }
+  return fontFamilies;
+}
+
+async function loadFontAsBase64(url) {
+  const response = await DOMAdapter.get().fetch(url);
+  const blob = await response.blob();
+  const reader = new FileReader();
+  const dataSrc = await new Promise((resolve, reject) => {
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+  return dataSrc;
+}
+
+async function loadFontCSS(style, url) {
+  const dataSrc = await loadFontAsBase64(url);
+  return `@font-face {
+        font-family: "${style.fontFamily}";
+        src: url('${dataSrc}');
+        font-weight: ${style.fontWeight};
+        font-style: ${style.fontStyle};
+    }`;
+}
+
+const FontStylePromiseCache = /* @__PURE__ */ new Map();
+async function getFontCss(fontFamilies, style, defaultOptions) {
+  const fontPromises = fontFamilies.filter((fontFamily) => Cache.has(`${fontFamily}-and-url`)).map((fontFamily, i) => {
+    if (!FontStylePromiseCache.has(fontFamily)) {
+      const { url } = Cache.get(`${fontFamily}-and-url`);
+      if (i === 0) {
+        FontStylePromiseCache.set(fontFamily, loadFontCSS({
+          fontWeight: style.fontWeight,
+          fontStyle: style.fontStyle,
+          fontFamily
+        }, url));
+      } else {
+        FontStylePromiseCache.set(fontFamily, loadFontCSS({
+          fontWeight: defaultOptions.fontWeight,
+          fontStyle: defaultOptions.fontStyle,
+          fontFamily
+        }, url));
+      }
+    }
+    return FontStylePromiseCache.get(fontFamily);
+  });
+  return (await Promise.all(fontPromises)).join("\n");
+}
+
+function getSVGUrl(text, style, resolution, fontCSS, htmlTextData) {
+  const { domElement, styleElement, svgRoot } = htmlTextData;
+  domElement.innerHTML = `<style>${style.cssStyle}</style><div style='padding:0;'>${text}</div>`;
+  domElement.setAttribute("style", `transform: scale(${resolution});transform-origin: top left; display: inline-block`);
+  styleElement.textContent = fontCSS;
+  const { width, height } = htmlTextData.image;
+  svgRoot.setAttribute("width", width.toString());
+  svgRoot.setAttribute("height", height.toString());
+  return new XMLSerializer().serializeToString(svgRoot);
+}
+
+function getTemporaryCanvasFromImage(image, resolution) {
+  const canvasAndContext = CanvasPool.getOptimalCanvasAndContext(
+    image.width,
+    image.height,
+    resolution
+  );
+  const { context } = canvasAndContext;
+  context.clearRect(0, 0, image.width, image.height);
+  context.drawImage(image, 0, 0);
+  return canvasAndContext;
+}
+
+function loadSVGImage(image, url, delay) {
+  return new Promise(async (resolve) => {
+    if (delay) {
+      await new Promise((resolve2) => setTimeout(resolve2, 100));
+    }
+    image.onload = () => {
+      resolve();
+    };
+    image.src = `data:image/svg+xml;charset=utf8,${encodeURIComponent(url)}`;
+    image.crossOrigin = "anonymous";
+  });
+}
+
+class HTMLTextSystem {
+  constructor(renderer) {
+    this._activeTextures = {};
+    this._renderer = renderer;
+    this._createCanvas = renderer.type === RendererType.WEBGPU;
+  }
+  getTexture(options) {
+    return this._buildTexturePromise(
+      options.text,
+      options.resolution,
+      options.style
+    );
+  }
+  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;
+  }
+  async _buildTexturePromise(text, resolution, style) {
+    const htmlTextData = BigPool.get(HTMLTextRenderData);
+    const fontFamilies = extractFontFamilies(text, style);
+    const fontCSS = await getFontCss(
+      fontFamilies,
+      style,
+      HTMLTextStyle.defaultTextStyle
+    );
+    const measured = measureHtmlText(text, style, fontCSS, htmlTextData);
+    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 image = htmlTextData.image;
+    const uvSafeOffset = 2;
+    image.width = (width | 0) + uvSafeOffset;
+    image.height = (height | 0) + uvSafeOffset;
+    const svgURL = getSVGUrl(text, style, resolution, fontCSS, htmlTextData);
+    await loadSVGImage(image, svgURL, isSafari() && fontFamilies.length > 0);
+    const resource = image;
+    let canvasAndContext;
+    if (this._createCanvas) {
+      canvasAndContext = getTemporaryCanvasFromImage(image, resolution);
+    }
+    const texture = getPo2TextureFromSource(
+      canvasAndContext ? canvasAndContext.canvas : resource,
+      image.width - uvSafeOffset,
+      image.height - uvSafeOffset,
+      resolution
+    );
+    if (this._createCanvas) {
+      this._renderer.texture.initSource(texture.source);
+      CanvasPool.returnCanvasAndContext(canvasAndContext);
+    }
+    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";
+  }
+  getReferenceCount(textKey) {
+    return this._activeTextures[textKey].usageCount;
+  }
+  destroy() {
+    this._activeTextures = null;
+  }
+}
+/** @ignore */
+HTMLTextSystem.extension = {
+  type: [
+    ExtensionType.WebGLSystem,
+    ExtensionType.WebGPUSystem,
+    ExtensionType.CanvasSystem
+  ],
+  name: "htmlText"
+};
+HTMLTextSystem.defaultFontOptions = {
+  fontFamily: "Arial",
+  fontStyle: "normal",
+  fontWeight: "normal"
+};
+
+class CanvasTextPipe {
+  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(text) {
+    const gpuText = this._getGpuText(text);
+    const newKey = text._getKey();
+    if (gpuText.currentKey !== newKey) {
+      return true;
+    }
+    return false;
+  }
+  addRenderable(text, instructionSet) {
+    const gpuText = this._getGpuText(text);
+    const batchableSprite = gpuText.batchableSprite;
+    if (text._didTextUpdate) {
+      this._updateText(text);
+    }
+    this._renderer.renderPipes.batch.addToBatch(batchableSprite, 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);
+  }
+  _updateGpuText(text) {
+    const gpuText = this._getGpuText(text);
+    const batchableSprite = gpuText.batchableSprite;
+    if (gpuText.texture) {
+      this._renderer.canvasText.decreaseReferenceCount(gpuText.currentKey);
+    }
+    gpuText.texture = batchableSprite.texture = this._renderer.canvasText.getManagedTexture(text);
+    gpuText.currentKey = text._getKey();
+    batchableSprite.texture = gpuText.texture;
+  }
+  _getGpuText(text) {
+    return this._gpuText[text.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;
+  }
+  destroy() {
+    for (const i in this._gpuText) {
+      this._destroyRenderableById(i);
+    }
+    this._gpuText = null;
+    this._renderer = null;
+  }
+}
+/** @ignore */
+CanvasTextPipe.extension = {
+  type: [
+    ExtensionType.WebGLPipes,
+    ExtensionType.WebGPUPipes,
+    ExtensionType.CanvasPipes
+  ],
+  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) {
+    if (typeof options === "string") {
+      deprecation("8.0.0", "CanvasTextSystem.getTexture: Use object TextOptions instead of separate arguments");
+      options = {
+        text: options,
+        style,
+        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;
+    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);
+    if (style.trim) {
+      const trimmed = getCanvasBoundingBox(canvas, resolution);
+      texture.frame.copyFrom(trimmed);
+      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;
+    }
+    const { texture, canvasAndContext } = this.createTextureAndCanvas(text);
+    this._activeTextures[textKey] = {
+      canvasAndContext,
+      texture,
+      usageCount: 1
+    };
+    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.
+   * @param texture - The texture to be returned.
+   */
+  returnTexture(texture) {
+    const source = texture.source;
+    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;
+  }
+  /**
+   * 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
+   */
+  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
+          );
+        }
+      }
+    }
+  }
+  /**
+   * 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
+   */
+  _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;
+    }
+  }
+  destroy() {
+    this._activeTextures = null;
+  }
+}
+/** @ignore */
+CanvasTextSystem.extension = {
+  type: [
+    ExtensionType.WebGLSystem,
+    ExtensionType.WebGPUSystem,
+    ExtensionType.CanvasSystem
+  ],
+  name: "canvasText"
+};
+
+extensions.add(ResizePlugin);
+extensions.add(TickerPlugin);
+
+extensions.add(GraphicsPipe);
+extensions.add(GraphicsContextSystem);
+
+extensions.add(MeshPipe);
+
+extensions.add(GlParticleContainerPipe);
+extensions.add(GpuParticleContainerPipe);
+
+extensions.add(CanvasTextSystem);
+extensions.add(CanvasTextPipe);
+
+extensions.add(BitmapTextPipe);
+
+extensions.add(HTMLTextSystem);
+extensions.add(HTMLTextPipe);
+
+extensions.add(TilingSpritePipe);
+
+extensions.add(NineSliceSpritePipe);
+
+extensions.add(FilterSystem);
+extensions.add(FilterPipe);