rapid-render 1.0.22 → 1.0.24

package/dist/rapid-render.js

@@ -1,4 +1,4 @@
-class m {
+class g {
   _r;
   _g;
   _b;
@@ -11,8 +11,14 @@ class m {
   constructor(t, e, r, i = 255) {
     this._r = t, this._g = e, this._b = r, this._a = i, this.updateUint();
   }
-  setClearColor(t) {
-    t.clearColor(this.r / 255, this.g / 255, this.b / 255, this.a / 255);
+  setClearColor(t, e = !0) {
+    const r = e ? this.premultipliedUint32 : this.uint32;
+    t.clearColor(
+      (r & 255) / 255,
+      (r >>> 8 & 255) / 255,
+      (r >>> 16 & 255) / 255,
+      (r >>> 24) / 255
+    );
   }
   get r() {
     return this._r;
@@ -40,7 +46,7 @@ class m {
   }
   updateUint() {
     this.uint32 = (this._a << 24 | this._b << 16 | this._g << 8 | this._r) >>> 0;
-    const t = m.clampByte(this._a), e = m.clampByte(this._r * t / 255), r = m.clampByte(this._g * t / 255), i = m.clampByte(this._b * t / 255);
+    const t = g.clampByte(this._a), e = g.clampByte(this._r * t / 255), r = g.clampByte(this._g * t / 255), i = g.clampByte(this._b * t / 255);
     this.premultipliedUint32 = (t << 24 | i << 16 | r << 8 | e) >>> 0;
   }
   reset() {
@@ -52,14 +58,14 @@ class m {
   setHSL(t, e, r) {
     t = (t % 360 + 360) % 360, e = Math.max(0, Math.min(100, e)) / 100, r = Math.max(0, Math.min(100, r)) / 100;
     const i = (1 - Math.abs(2 * r - 1)) * e, s = i * (1 - Math.abs(t / 60 % 2 - 1)), a = r - i / 2;
-    let h = 0, o = 0, c = 0;
-    return t < 60 ? [h, o, c] = [i, s, 0] : t < 120 ? [h, o, c] = [s, i, 0] : t < 180 ? [h, o, c] = [0, i, s] : t < 240 ? [h, o, c] = [0, s, i] : t < 300 ? [h, o, c] = [s, 0, i] : [h, o, c] = [i, 0, s], this.setRGBA((h + a) * 255, (o + a) * 255, (c + a) * 255, 255), this;
+    let o = 0, h = 0, c = 0;
+    return t < 60 ? [o, h, c] = [i, s, 0] : t < 120 ? [o, h, c] = [s, i, 0] : t < 180 ? [o, h, c] = [0, i, s] : t < 240 ? [o, h, c] = [0, s, i] : t < 300 ? [o, h, c] = [s, 0, i] : [o, h, c] = [i, 0, s], this.setRGBA((o + a) * 255, (h + a) * 255, (c + a) * 255, 255), this;
   }
   copy(t) {
     this.setRGBA(t.r, t.g, t.b, t.a);
   }
   clone() {
-    return new m(this._r, this._g, this._b, this._a);
+    return new g(this._r, this._g, this._b, this._a);
   }
   toHexString(t = !0) {
     const e = this.r.toString(16).padStart(2, "0"), r = this.g.toString(16).padStart(2, "0"), i = this.b.toString(16).padStart(2, "0"), s = this.a.toString(16).padStart(2, "0");
@@ -69,13 +75,13 @@ class m {
     return t.r === this.r && t.g === this.g && t.b === this.b && t.a === this.a;
   }
   static FromHSL(t, e, r) {
-    return new m(0, 0, 0).setHSL(t, e, r);
+    return new g(0, 0, 0).setHSL(t, e, r);
   }
   static FromRGB(t, e, r) {
-    return new m(t, e, r);
+    return new g(t, e, r);
   }
   static fromNorm(t, e, r, i = 1) {
-    return new m(
+    return new g(
       Math.round(t * 255),
       Math.round(e * 255),
       Math.round(r * 255),
@@ -83,17 +89,17 @@ class m {
     );
   }
   static packColor(t, e, r, i, s) {
-    const a = m.clampByte(i), h = s ? a / 255 : 1, o = m.clampByte(t * h), c = m.clampByte(e * h), u = m.clampByte(r * h);
-    return (a << 24 | u << 16 | c << 8 | o) >>> 0;
+    const a = g.clampByte(i), o = s ? a / 255 : 1, h = g.clampByte(t * o), c = g.clampByte(e * o), u = g.clampByte(r * o);
+    return (a << 24 | u << 16 | c << 8 | h) >>> 0;
   }
   static fromHex(t) {
     t.startsWith("#") && (t = t.slice(1));
     const e = parseInt(t.slice(0, 2), 16), r = parseInt(t.slice(2, 4), 16), i = parseInt(t.slice(4, 6), 16);
     let s = 255;
-    return t.length >= 8 && (s = parseInt(t.slice(6, 8), 16)), new m(e, r, i, s);
+    return t.length >= 8 && (s = parseInt(t.slice(6, 8), 16)), new g(e, r, i, s);
   }
   add(t) {
-    return new m(
+    return new g(
       Math.min(this.r + t.r, 255),
       Math.min(this.g + t.g, 255),
       Math.min(this.b + t.b, 255),
@@ -101,7 +107,7 @@ class m {
     );
   }
   subtract(t) {
-    return new m(
+    return new g(
       this.r - t.r,
       this.g - t.g,
       this.b - t.b,
@@ -109,12 +115,12 @@ class m {
     );
   }
   divide(t) {
-    return t instanceof m ? new m(
+    return t instanceof g ? new g(
       this.r / t.r,
       this.g / t.g,
       this.b / t.b,
       this.a / t.a
-    ) : new m(
+    ) : new g(
       this.r / t,
       this.g / t,
       this.b / t,
@@ -122,12 +128,12 @@ class m {
     );
   }
   multiply(t) {
-    return t instanceof m ? new m(
+    return t instanceof g ? new g(
       this.r * t.r,
       this.g * t.g,
       this.b * t.b,
       this.a * t.a
-    ) : new m(
+    ) : new g(
       this.r * t,
       this.g * t,
       this.b * t,
@@ -137,55 +143,62 @@ class m {
   clamp() {
     this._r = Math.max(0, Math.min(255, this._r)), this._g = Math.max(0, Math.min(255, this._g)), this._b = Math.max(0, Math.min(255, this._b)), this._a = Math.max(0, Math.min(255, this._a)), this.updateUint();
   }
-  static Red = new m(255, 0, 0, 255);
-  static Green = new m(0, 255, 0, 255);
-  static Blue = new m(0, 0, 255, 255);
-  static Yellow = new m(255, 255, 0, 255);
-  static Purple = new m(128, 0, 128, 255);
-  static Orange = new m(255, 165, 0, 255);
-  static Pink = new m(255, 192, 203, 255);
-  static Gray = new m(128, 128, 128, 255);
-  static Brown = new m(139, 69, 19, 255);
-  static Cyan = new m(0, 255, 255, 255);
-  static Magenta = new m(255, 0, 255, 255);
-  static Lime = new m(192, 255, 0, 255);
-  static White = new m(255, 255, 255, 255);
-  static Black = new m(0, 0, 0, 255);
-  static Transparent = new m(0, 0, 0, 0);
+  static Red = new g(255, 0, 0, 255);
+  static Green = new g(0, 255, 0, 255);
+  static Blue = new g(0, 0, 255, 255);
+  static Yellow = new g(255, 255, 0, 255);
+  static Purple = new g(128, 0, 128, 255);
+  static Orange = new g(255, 165, 0, 255);
+  static Pink = new g(255, 192, 203, 255);
+  static Gray = new g(128, 128, 128, 255);
+  static Brown = new g(139, 69, 19, 255);
+  static Cyan = new g(0, 255, 255, 255);
+  static Magenta = new g(255, 0, 255, 255);
+  static Lime = new g(192, 255, 0, 255);
+  static White = new g(255, 255, 255, 255);
+  static Black = new g(0, 0, 0, 255);
+  static Transparent = new g(0, 0, 0, 0);
 }
-var Q = /* @__PURE__ */ ((n) => (n[n.LINEAR = 0] = "LINEAR", n[n.NEAREST = 1] = "NEAREST", n))(Q || {}), q = /* @__PURE__ */ ((n) => (n[n.REPEAT = 0] = "REPEAT", n[n.CLAMP = 1] = "CLAMP", n[n.MIRRORED_REPEAT = 2] = "MIRRORED_REPEAT", n))(q || {});
-class bt {
+var it = /* @__PURE__ */ ((n) => (n[n.LINEAR = 0] = "LINEAR", n[n.NEAREST = 1] = "NEAREST", n))(it || {}), J = /* @__PURE__ */ ((n) => (n[n.REPEAT = 0] = "REPEAT", n[n.CLAMP = 1] = "CLAMP", n[n.MIRRORED_REPEAT = 2] = "MIRRORED_REPEAT", n))(J || {});
+class Ct {
   render;
   cache = /* @__PURE__ */ new Map();
+  texture = /* @__PURE__ */ new Set();
   constructor(t) {
     this.render = t;
   }
+  addTexture(t) {
+    return this.texture.add(t), t;
+  }
+  removeTexture(t) {
+    return this.texture.delete(t), t;
+  }
   async load(t, e) {
     let r = this.cache.get(t);
     if (r)
-      return new F(r);
+      return this.addTexture(new W(r));
     try {
       const i = await this._fetchImage(t);
-      return r = X.fromSource(this.render, i, e), r.uid = t, this.cache.set(t, r), new F(r);
+      return r = z.fromSource(this.render, i, e), r.uid = t, this.cache.set(t, r), this.addTexture(new W(r));
     } catch (i) {
       throw console.error(`[TextureManager] Failed to load: ${t}`, i), i;
     }
   }
   create(t, e) {
     if (e?.key && this.cache.has(e.key))
-      return new F(this.cache.get(e.key));
-    const r = X.fromSource(this.render, t, e);
-    return e?.key && (r.uid = e.key, this.cache.set(e.key, r)), new F(r);
+      return this.addTexture(new W(this.cache.get(e.key)));
+    const r = z.fromSource(this.render, t, e);
+    return e?.key && (r.uid = e.key, this.cache.set(e.key, r)), this.addTexture(new W(r));
   }
   createRenderTexture(t) {
-    return new Ut(this.render, t);
+    return this.addTexture(new _t(this.render, t));
   }
   createTextTexture(t) {
-    return new _t(this.render, t);
+    return this.addTexture(new Lt(this.render, t));
   }
   destroy(t, e = !1) {
     let r, i;
-    typeof t == "string" ? (i = t, r = this.cache.get(i)) : t instanceof F ? (r = t.base, i = r?.uid, t.destroy()) : (r = t, i = r.uid), r && (r.refCount <= 0 || e) && (r.destroy(this.render.gl), i && this.cache.delete(i));
+    typeof t == "string" ? (i = t, r = this.cache.get(i)) : t instanceof W ? (r = t.base, i = r?.uid, this.removeTexture(t), t.destroy()) : (r = t, i = r.uid), r && (r.refCount <= 0 || e) && (r.destroy(this.render.gl), i && this.cache.delete(i));
   }
   destroyAll() {
     for (const t of this.cache.values())
@@ -199,7 +212,7 @@ class bt {
     });
   }
 }
-class X {
+class z {
   glTexture = null;
   width;
   height;
@@ -209,23 +222,23 @@ class X {
     this.glTexture = t, this.width = e, this.height = r;
   }
   static fromSource(t, e, r = {}) {
-    const i = rt(t, e, r);
-    return new X(i, e.width, e.height);
+    const i = nt(t, e, r);
+    return new z(i, e.width, e.height);
   }
   updateSource(t, e, r = {}) {
-    this.glTexture && (t.bindTexture(t.TEXTURE_2D, this.glTexture), r.textureFilter !== void 0 && ht(t, r.textureFilter), r.wrap !== void 0 && at(t, r.wrap), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 1), t.pixelStorei(t.UNPACK_ALIGNMENT, 1), r.premultipliedAlpha !== void 0 && t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL, r.premultipliedAlpha), this.width === e.width && this.height === e.height ? t.texSubImage2D(t.TEXTURE_2D, 0, 0, 0, t.RGBA, t.UNSIGNED_BYTE, e) : (t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, e), this.width = e.width, this.height = e.height), r.premultipliedAlpha !== void 0 && t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !1));
+    this.glTexture && (t.bindTexture(t.TEXTURE_2D, this.glTexture), r.textureFilter !== void 0 && ht(t, r.textureFilter), r.wrap !== void 0 && ot(t, r.wrap), t.pixelStorei(t.UNPACK_FLIP_Y_WEBGL, 1), t.pixelStorei(t.UNPACK_ALIGNMENT, 1), r.premultipliedAlpha !== void 0 && t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL, r.premultipliedAlpha), this.width === e.width && this.height === e.height ? t.texSubImage2D(t.TEXTURE_2D, 0, 0, 0, t.RGBA, t.UNSIGNED_BYTE, e) : (t.texImage2D(t.TEXTURE_2D, 0, t.RGBA, t.RGBA, t.UNSIGNED_BYTE, e), this.width = e.width, this.height = e.height), r.premultipliedAlpha !== void 0 && t.pixelStorei(t.UNPACK_PREMULTIPLY_ALPHA_WEBGL, !1));
   }
   setFilterMode(t, e) {
     this.glTexture && (t.bindTexture(t.TEXTURE_2D, this.glTexture), ht(t, e), t.bindTexture(t.TEXTURE_2D, null));
   }
   setWrapMode(t, e) {
-    this.glTexture && (t.bindTexture(t.TEXTURE_2D, this.glTexture), at(t, e), t.bindTexture(t.TEXTURE_2D, null));
+    this.glTexture && (t.bindTexture(t.TEXTURE_2D, this.glTexture), ot(t, e), t.bindTexture(t.TEXTURE_2D, null));
   }
   destroy(t) {
     this.glTexture && (t.deleteTexture(this.glTexture), this.glTexture = null);
   }
 }
-class F {
+class W {
   base;
   uvX = 0;
   uvY = 0;
@@ -252,6 +265,8 @@ class F {
   constructor(t) {
     t && this.setBase(t);
   }
+  updateResolution() {
+  }
   setBase(t) {
     return this.base === t ? this : (this.base && this.base.refCount--, this.base = t, this.base.refCount++, this.setRegion(0, 0, t.width, t.height), this.glTexture = t.glTexture, this);
   }
@@ -259,41 +274,42 @@ class F {
     return this.base ? (this._px = t, this._py = e, this.isAtlas = t !== 0 || e !== 0 || r !== this.base.width || i !== this.base.height, this.uvX = t / this.base.width, this.uvY = e / this.base.height, this.uvW = this.uvX + r / this.base.width, this.uvH = this.uvY + i / this.base.height, this.rawWidth = r * this.scale, this.rawHeight = i * this.scale, this) : this;
   }
   getSubTexture(t, e, r, i) {
-    if (!this.base) return new F();
-    const s = this.clone(), a = this._px, h = this._py;
-    return s.setRegion(a + t, h + e, r, i), s;
+    if (!this.base) return new W();
+    const s = this.clone(), a = this._px, o = this._py;
+    return s.setRegion(a + t, o + e, r, i), s;
   }
   clone(t) {
-    const e = t ?? new F(this.base);
+    const e = t ?? new W(this.base);
     return t && this.base && t.setBase(this.base), e.scale = this.scale, e.uvX = this.uvX, e.uvY = this.uvY, e.uvW = this.uvW, e.uvH = this.uvH, e.rawWidth = this.rawWidth, e.rawHeight = this.rawHeight, e.offsetX = this.offsetX, e.offsetY = this.offsetY, e.flipY = this.flipY, e.isRotated = this.isRotated, e.isAtlas = this.isAtlas, e._px = this._px, e._py = this._py, e;
   }
   splitGrid(t, e, r, i, s = 0) {
     if (!this.base) return [];
-    const a = [], h = this.rawWidth, o = this.rawHeight, c = Math.max(0, s), u = t + c, l = e + c, f = r ?? Math.floor((h + c) / u), d = i ?? Math.floor((o + c) / l);
-    for (let x = 0; x < d; x++)
-      for (let p = 0; p < f; p++)
-        a.push(this.getSubTexture(p * u, x * l, t, e));
+    const a = [], o = this.rawWidth, h = this.rawHeight, c = Math.max(0, s), u = t + c, l = e + c, d = r ?? Math.floor((o + c) / u), f = i ?? Math.floor((h + c) / l);
+    for (let m = 0; m < f; m++)
+      for (let x = 0; x < d; x++)
+        a.push(this.getSubTexture(x * u, m * l, t, e));
     return a;
   }
   static fromImageSource(t, e, r = {}) {
-    const i = rt(t, e, r);
-    return new F(new X(i, e.width, e.height));
+    const i = nt(t, e, r);
+    return new W(new z(i, e.width, e.height));
   }
   destroy() {
     this.base && (this.base.refCount--, this.base = void 0), this.glTexture = null;
   }
 }
-class Ut extends F {
+class _t extends W {
   framebuffer;
   renderbuffer;
   gl;
+  premultipliedAlpha;
   clearColor;
   _allocW = 0;
   _allocH = 0;
   constructor(t, e) {
-    super(), this.gl = t.gl, this.clearColor = e.clearColor ?? m.Black;
-    const r = Math.max(Math.round(e.width), 1), i = Math.max(Math.round(e.height), 1), a = rt(t, { width: r, height: i }, { ...e, onlySize: !0 });
-    if (this.setBase(new X(a, r, i)), this.framebuffer = this.gl.createFramebuffer(), this.renderbuffer = this.gl.createRenderbuffer(), !this.framebuffer || !this.renderbuffer)
+    super(), this.gl = t.gl, this.premultipliedAlpha = t.premultipliedAlpha, this.clearColor = e.clearColor ?? g.Black;
+    const r = Math.max(Math.round(e.width), 1), i = Math.max(Math.round(e.height), 1), a = nt(t, { width: r, height: i }, { ...e, onlySize: !0 });
+    if (this.setBase(new z(a, r, i)), this.framebuffer = this.gl.createFramebuffer(), this.renderbuffer = this.gl.createRenderbuffer(), !this.framebuffer || !this.renderbuffer)
       throw new Error("Failed to create Framebuffer or Renderbuffer");
     this.resize(r, i, !0);
   }
@@ -312,7 +328,7 @@ class Ut extends F {
   clear(t) {
     if (!this.framebuffer) return;
     const e = this.gl, r = t ?? this.clearColor;
-    r && (r.setClearColor(e), e.clear(e.COLOR_BUFFER_BIT | e.STENCIL_BUFFER_BIT));
+    r && (r.setClearColor(e, this.premultipliedAlpha), e.clear(e.COLOR_BUFFER_BIT | e.STENCIL_BUFFER_BIT));
   }
   deactivate() {
     const t = this.gl;
@@ -320,24 +336,24 @@ class Ut extends F {
   }
   GetPixels(t = 0, e = 0, r = this.rawWidth, i = this.rawHeight) {
     if (!this.framebuffer) return new Uint8Array(0);
-    const s = Math.floor(t), a = Math.floor(e), h = Math.floor(r), o = Math.floor(i);
-    if (h <= 0 || o <= 0) return new Uint8Array(0);
+    const s = Math.floor(t), a = Math.floor(e), o = Math.floor(r), h = Math.floor(i);
+    if (o <= 0 || h <= 0) return new Uint8Array(0);
     if (s < 0 || a < 0 || s >= this.rawWidth || a >= this.rawHeight)
       return new Uint8Array(0);
-    const c = Math.min(h, this.rawWidth - s), u = Math.min(o, this.rawHeight - a), l = this.gl, f = l.getParameter(l.FRAMEBUFFER_BINDING);
+    const c = Math.min(o, this.rawWidth - s), u = Math.min(h, this.rawHeight - a), l = this.gl, d = l.getParameter(l.FRAMEBUFFER_BINDING);
     l.bindFramebuffer(l.FRAMEBUFFER, this.framebuffer);
-    const d = new Uint8Array(c * u * 4);
-    return l.readPixels(s, a, c, u, l.RGBA, l.UNSIGNED_BYTE, d), l.bindFramebuffer(l.FRAMEBUFFER, f), d;
+    const f = new Uint8Array(c * u * 4);
+    return l.readPixels(s, a, c, u, l.RGBA, l.UNSIGNED_BYTE, f), l.bindFramebuffer(l.FRAMEBUFFER, d), f;
   }
   GetColorAt(t, e) {
     const r = this.GetPixels(t, e, 1, 1);
-    return r.length < 4 ? new m(0, 0, 0, 0) : new m(r[0], r[1], r[2], r[3]);
+    return r.length < 4 ? new g(0, 0, 0, 0) : new g(r[0], r[1], r[2], r[3]);
   }
   destroy() {
     super.destroy(), this.framebuffer && this.gl.deleteFramebuffer(this.framebuffer), this.renderbuffer && this.gl.deleteRenderbuffer(this.renderbuffer), this.base?.destroy(this.gl);
   }
 }
-const Ct = {
+const Pt = {
   fontFamily: "Arial",
   fontSize: 24,
   fontWeight: "normal",
@@ -346,25 +362,26 @@ const Ct = {
   align: "left",
   lineHeight: 1
 };
-class _t extends F {
+class Lt extends W {
   canvas;
   ctx;
   render;
   _text;
   _style;
   options;
-  flipY = !0;
+  resolution = 1;
   constructor(t, e) {
-    super(), this.render = t, this._style = { ...Ct, ...e }, this._text = e?.text ?? "", this.options = {
+    super(), this.render = t, this._style = { ...Pt, ...e }, this._text = e?.text ?? "", this.options = {
       premultipliedAlpha: t.premultipliedAlpha,
-      textureFilter: Q.LINEAR,
-      ...e
+      ...e,
+      textureFilter: 1
+      /* NEAREST */
     }, this.canvas = document.createElement("canvas");
     const r = this.canvas.getContext("2d", { willReadFrequently: !0 });
     if (!r) throw new Error("Failed to get 2d context for TextTexture");
     this.ctx = r, this.canvas.width = 1, this.canvas.height = 1;
-    const i = rt(t, this.canvas, this.options);
-    this.setBase(new X(i, 1, 1)), this.update();
+    const i = nt(t, this.canvas, this.options);
+    this.setBase(new z(i, 1, 1)), this.updateResolution(), this.update();
   }
   get text() {
     return this._text;
@@ -388,49 +405,44 @@ class _t extends F {
         return e;
     }
   }
+  updateResolution() {
+    let t = 1;
+    t *= this.render.viewport.resolution, t != this.resolution && (this.resolution = t, this.update());
+  }
   update() {
-    const t = this.ctx, e = this.style, r = this.render.dpr;
-    this.scale = 1 / r;
-    const i = e.fontSize, s = e.fontWeight, a = e.fontFamily, h = e.lineHeight, o = `${s} ${i}px ${a}`, c = e.baseline ?? "top", u = e.align ?? "left", l = e.strokeThickness ?? 0, f = l > 0, d = this._text.split(`
-`), x = "国g", p = d[0] || x;
-    t.font = o, t.textBaseline = "alphabetic", t.textAlign = "left";
-    let y = 0, v = 0, E = 0;
-    for (const D of d) {
-      const H = t.measureText(D || x);
-      y = Math.max(y, D ? H.width : 0), v = Math.max(v, H.actualBoundingBoxAscent), E = Math.max(E, H.actualBoundingBoxDescent);
+    const t = this.ctx, e = this.style, r = e.fontSize, i = e.fontWeight, s = e.fontFamily, a = e.lineHeight, h = Math.max(r, 32), c = r / h, u = `${i} ${r}px ${s}`, l = `${i} ${h}px ${s}`, d = this.resolution, f = e.baseline ?? "top", m = e.align ?? "left", x = e.strokeThickness ?? 0, y = x > 0, v = this._text.split(`
+`), T = "国g", w = v[0] || T;
+    t.font = l, t.textBaseline = "alphabetic", t.textAlign = "left";
+    let U = 0, P = 0, O = 0;
+    for (const B of v) {
+      const X = t.measureText(B || T);
+      U = Math.max(U, B ? X.width * c : 0), B == v.at(0) && (P = X.actualBoundingBoxAscent * c), B == v.at(-1) && (O = X.actualBoundingBoxDescent * c);
     }
     t.textBaseline = "alphabetic";
-    const S = t.measureText(p).fontBoundingBoxDescent;
-    t.textBaseline = c;
-    const _ = t.measureText(p).fontBoundingBoxDescent, P = i * h, k = v + E + (d.length - 1) * P, I = Math.ceil(l / 2) + 2, C = Math.max(
-      1,
-      Math.ceil(y + I * 2)
-    ), R = Math.max(
-      1,
-      Math.ceil(k + I * 2)
-    ), w = Math.ceil(C * r), O = Math.ceil(R * r);
-    (this.canvas.width !== w || this.canvas.height !== O) && (this.canvas.width = w, this.canvas.height = O), t.setTransform(r, 0, 0, r, 0, 0), t.clearRect(
+    const L = t.measureText(w).fontBoundingBoxDescent * c;
+    t.textBaseline = f;
+    const S = t.measureText(w).fontBoundingBoxDescent * c, E = r * a, b = P + O + (v.length - 1) * E, I = x / 2 + 2 / d, k = U + I * 2, G = b + I * 2, N = Math.max(1, Math.ceil(k * d)), F = Math.max(1, Math.ceil(G * d)), V = N / d;
+    (this.canvas.width !== N || this.canvas.height !== F) && (this.canvas.width = N, this.canvas.height = F), t.setTransform(d, 0, 0, -d, 0, F), t.clearRect(
       0,
       0,
-      w / r,
-      O / r
-    ), t.font = o, t.textBaseline = "alphabetic", t.textAlign = u;
-    const B = this.updateOffset(C, I);
-    f && (t.lineWidth = l, t.strokeStyle = e.stroke ?? "#000000", t.lineJoin = "round"), e.fill && (t.fillStyle = e.fill);
-    let L = I + v;
-    for (const D of d)
-      f && t.strokeText(D, B, L), e.fill && t.fillText(D, B, L), L += P;
-    this.base?.updateSource(this.render.gl, this.canvas, this.options), this.setRegion(0, 0, w, O);
-    const W = _ - S;
-    this.offsetY = -I - v + W;
+      N / d,
+      F / d
+    ), t.font = u, t.textBaseline = "alphabetic", t.textAlign = m;
+    const H = this.updateOffset(V, I);
+    y && (t.lineWidth = x, t.strokeStyle = e.stroke ?? "#000000", t.lineJoin = "round"), e.fill && (t.fillStyle = e.fill);
+    let A = I + P;
+    for (const B of v)
+      y && t.strokeText(B, H, A), e.fill && t.fillText(B, H, A), A += E;
+    const $ = S - L;
+    this.scale = 1 / this.resolution, this.offsetX = -H, this.offsetY = -I - P + $, this.base?.updateSource(this.render.gl, this.canvas, this.options), this.setRegion(0, 0, N, F);
   }
 }
-const Lt = (n, t = !1, e = !0) => {
+const Nt = (n, t = !1, e = !0) => {
   const r = n.getContext("webgl2", { stencil: !0, antialias: t, premultipliedAlpha: e });
   if (!r)
     throw new Error("WebGL2 is not supported in this browser.");
   return r;
-}, dt = (n, t, e) => {
+}, ft = (n, t, e) => {
   const r = n.createShader(e);
   if (!r)
     throw new Error("Unable to create webgl shader");
@@ -439,36 +451,36 @@ const Lt = (n, t = !1, e = !0) => {
     throw console.error("Shader compilation failed:", s), new Error("Unable to compile shader: " + s + t);
   }
   return r;
-}, Pt = (n, t, e) => {
-  var r = n.createProgram(), i = dt(n, t, 35633), s = dt(n, e, 35632);
+}, It = (n, t, e) => {
+  var r = n.createProgram(), i = ft(n, t, 35633), s = ft(n, e, 35632);
   if (!r)
     throw new Error("Unable to create program shader");
   if (n.attachShader(r, i), n.attachShader(r, s), n.linkProgram(r), !n.getProgramParameter(r, n.LINK_STATUS)) {
-    const h = n.getProgramInfoLog(r);
-    throw new Error("Unable to link shader program: " + h);
+    const o = n.getProgramInfoLog(r);
+    throw new Error("Unable to link shader program: " + o);
   }
   return r;
 };
-function at(n, t) {
+function ot(n, t) {
   const e = {
-    [q.CLAMP]: n.CLAMP_TO_EDGE,
-    [q.REPEAT]: n.REPEAT,
-    [q.MIRRORED_REPEAT]: n.MIRRORED_REPEAT
+    [J.CLAMP]: n.CLAMP_TO_EDGE,
+    [J.REPEAT]: n.REPEAT,
+    [J.MIRRORED_REPEAT]: n.MIRRORED_REPEAT
   }[t] || n.CLAMP_TO_EDGE;
   n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_S, e), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_WRAP_T, e);
 }
 function ht(n, t) {
   const e = {
-    [Q.LINEAR]: n.LINEAR,
-    [Q.NEAREST]: n.NEAREST
+    [it.LINEAR]: n.LINEAR,
+    [it.NEAREST]: n.NEAREST
   }[t] ?? n.NEAREST;
   n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MIN_FILTER, e), n.texParameteri(n.TEXTURE_2D, n.TEXTURE_MAG_FILTER, e);
 }
-function rt(n, t, e) {
+function nt(n, t, e) {
   const r = n.gl, i = r.createTexture();
   if (!i)
     throw new Error("Unable to create WebGL texture");
-  if (r.bindTexture(r.TEXTURE_2D, i), r.pixelStorei(r.UNPACK_FLIP_Y_WEBGL, 0), r.pixelStorei(r.UNPACK_ALIGNMENT, 1), at(r, e.wrap ?? q.CLAMP), ht(r, e.textureFilter ?? n.textureFilter), e.onlySize) {
+  if (r.bindTexture(r.TEXTURE_2D, i), r.pixelStorei(r.UNPACK_FLIP_Y_WEBGL, 0), r.pixelStorei(r.UNPACK_ALIGNMENT, 1), ot(r, e.wrap ?? J.CLAMP), ht(r, e.textureFilter ?? n.textureFilter), e.onlySize) {
     const s = t;
     r.texImage2D(r.TEXTURE_2D, 0, r.RGBA, s.width, s.height, 0, r.RGBA, r.UNSIGNED_BYTE, null);
   } else {
@@ -477,7 +489,7 @@ function rt(n, t, e) {
   }
   return r.bindTexture(r.TEXTURE_2D, null), i;
 }
-function K(n, t, e = "vTextureId", r = "uv", i = "return") {
+function Z(n, t, e = "vTextureId", r = "uv", i = "return") {
   if (n.includes("%TEXTURE_NUM%") && (n = n.replaceAll("%TEXTURE_NUM%", t.toString())), n.includes("%GET_COLOR%")) {
     let s = "";
     for (let a = 0; a < t; a++)
@@ -486,15 +498,15 @@ function K(n, t, e = "vTextureId", r = "uv", i = "return") {
   }
   return n;
 }
-const Nt = 5126, ot = 5121;
-function It(n, t, e) {
+const Ft = 5126, ct = 5121;
+function Ot(n, t, e) {
   n.vertexAttribDivisor(t, e);
 }
-function yt(n, t, e, r, i) {
+function wt(n, t, e, r, i) {
   n.drawArraysInstanced(t, e, r, i);
 }
-let Ot = 0;
-class Tt {
+let Bt = 0;
+class Et {
   program;
   attributeLoc = {};
   uniformLoc = {};
@@ -503,11 +515,11 @@ class Tt {
   uniformType = {};
   uniformIsArray = {};
   gl;
-  shaderId = Ot++;
+  shaderId = Bt++;
   // for debug
   vao;
   constructor(t, e, r, i) {
-    this.gl = t, this.program = Pt(t, e, r), this.parseShader(e), this.parseShader(r), this.vao = t.createVertexArray(), i && this.setAttributes(i);
+    this.gl = t, this.program = It(t, e, r), this.parseShader(e), this.parseShader(r), this.vao = t.createVertexArray(), i && this.setAttributes(i);
   }
   use() {
     this.gl.useProgram(this.program);
@@ -523,7 +535,7 @@ class Tt {
     const r = this.uniformLoc[t];
     if (r === void 0) return;
     const i = this.uniformType[t], s = this.uniformIsArray[t];
-    Wt(this.gl, r, i, e, s);
+    Dt(this.gl, r, i, e, s);
   }
   setUniforms(t) {
     for (const e in t)
@@ -537,11 +549,11 @@ class Tt {
     r.vertexAttribPointer(
       e,
       t.size,
-      t.type ?? Nt,
+      t.type ?? Ft,
       t.normalized ?? !1,
       t.stride,
       t.offset ?? 0
-    ), r.enableVertexAttribArray(e), It(r, e, t.divisor ?? 0);
+    ), r.enableVertexAttribArray(e), Ot(r, e, t.divisor ?? 0);
   }
   setAttributes(t) {
     for (const e of t)
@@ -555,19 +567,19 @@ class Tt {
     const e = this.gl, r = t.match(/(?:in|attribute)\s+\w+\s+\w+/g);
     if (r)
       for (const s of r) {
-        const h = s.split(/\s+/)[2], o = e.getAttribLocation(this.program, h);
-        o !== -1 && (this.attributeLoc[h] = o);
+        const o = s.split(/\s+/)[2], h = e.getAttribLocation(this.program, o);
+        h !== -1 && (this.attributeLoc[o] = h);
       }
     const i = t.matchAll(
       /uniform\s+(?:(?:lowp|mediump|highp)\s+)?(\w+)\s+(\w+)(\s*\[\s*\d+\s*\])?/g
     );
     for (const s of i) {
-      const a = s[1], h = s[2], o = e.getUniformLocation(this.program, h);
-      o !== null && (this.uniformLoc[h] = o, this.uniformType[h] = a, this.uniformIsArray[h] = s[3] !== void 0);
+      const a = s[1], o = s[2], h = e.getUniformLocation(this.program, o);
+      h !== null && (this.uniformLoc[o] = h, this.uniformType[o] = a, this.uniformIsArray[o] = s[3] !== void 0);
     }
   }
 }
-function Wt(n, t, e, r, i = !1) {
+function Dt(n, t, e, r, i = !1) {
   switch (e) {
     // scalars
     case "float":
@@ -605,10 +617,10 @@ function Wt(n, t, e, r, i = !1) {
       return n.uniformMatrix3x2fv(t, !1, r);
     // fallback: guess by value shape
     default:
-      return Dt(n, t, r);
+      return Wt(n, t, r);
   }
 }
-function Dt(n, t, e) {
+function Wt(n, t, e) {
   if (typeof e == "number")
     return n.uniform1f(t, e);
   const r = e;
@@ -627,7 +639,7 @@ function Dt(n, t, e) {
       return n.uniform1fv(t, r);
   }
 }
-class ct {
+class ut {
   vs;
   fs;
   glshader = /* @__PURE__ */ new Map();
@@ -640,7 +652,11 @@ class ct {
   rapid;
   prefix = [];
   constructor(t, e = "", r = "", i = 0, s) {
-    this.vs = e, this.fs = r, this.rapid = t, this.uniforms = s ?? {}, this.usedTextureUnitNum = i;
+    this.vs = e, this.fs = r, this.rapid = t, this.uniforms = s ?? {}, this.usedTextureUnitNum = i, this.beforePreCompile(), this.preCompile();
+  }
+  beforePreCompile() {
+  }
+  preCompile() {
   }
   setUniforms(t) {
     this.rapid.flush();
@@ -670,7 +686,7 @@ class ct {
     if (i == null || r == null)
       return console.warn("CustomGlShader: missing base shader for " + e), null;
     const s = this.prefix.length == 0 ? [""] : this.prefix;
-    r = r.replace("// CUSTOM_CODE_CALL", s.map((h) => h + "vertex(position, vRegion);").join("")), r = this.replaceCustomCode(r, this.vs), i = i.replace("// CUSTOM_CODE_CALL", s.map((h) => h + "fragment(fragColor, vRegion);").join("")), i = this.replaceCustomCode(i, this.fs);
+    r = r.replace("// CUSTOM_CODE_CALL", s.map((o) => o + "vertex(position, vRegion);").join("")), r = this.replaceCustomCode(r, this.vs), i = i.replace("// CUSTOM_CODE_CALL", s.map((o) => o + "fragment(fragColor, vRegion);").join("")), i = this.replaceCustomCode(i, this.fs);
     const a = t.createShader(r, i);
     return a.isCustom = !0, a.padding = this.padding, this.glshader.set(e, a), this.uniformDirty.add(e), a;
   }
@@ -678,7 +694,7 @@ class ct {
     this.glshader.forEach((t) => t.destroy());
   }
 }
-class Et {
+class Rt {
   constructor(t) {
     this.rapid = t, this.gl = t.gl, this.maxTextureUnits = t.maxTextureUnits, this.matrixStore = t.matrix;
   }
@@ -726,16 +742,16 @@ class Et {
   }
   createShader(t, e) {
     const r = this.getMaxTexutreUnit();
-    return e = K(e, r), t = K(t, r), new Tt(this.gl, t, e);
+    return e = Z(e, r), t = Z(t, r), new Et(this.gl, t, e);
   }
   createCustomShader(t) {
-    const e = this.getMaxTexutreUnit(t), r = K(this.fs, e), i = K(this.vs, e);
+    const e = this.getMaxTexutreUnit(t), r = Z(this.fs, e), i = Z(this.vs, e);
     return t.getGLShader(this, this.KEY, i, r);
   }
   getCustomShader(t) {
     if (!t)
       return this.defaultShader;
-    if (t instanceof ct) {
+    if (t instanceof ut) {
       const e = this.createCustomShader(t);
       return e ?? this.defaultShader;
     }
@@ -745,7 +761,7 @@ class Et {
     return this.isDefaultShader && !t ? !0 : this.getCustomShader(t) == this.currentShader;
   }
   enter(t) {
-    this.resetRender(), this.currentShader = this.getCustomShader(t), t instanceof ct ? (this.customShader = t, this.customShaderUsedTextureNum = t.usedTextureUnitNum) : (this.customShader = null, this.customShaderUsedTextureNum = 0), this.isDefaultShader = this.currentShader == this.defaultShader, this.currentShader.use(), this.currentShader.setUniform("u_projection", this.rapid.projection);
+    this.resetRender(), this.currentShader = this.getCustomShader(t), t instanceof ut ? (this.customShader = t, this.customShaderUsedTextureNum = t.usedTextureUnitNum) : (this.customShader = null, this.customShaderUsedTextureNum = 0), this.isDefaultShader = this.currentShader == this.defaultShader, this.currentShader.use(), this.currentShader.setUniform("u_projection", this.rapid.projection);
   }
   exit() {
     this.hasPendingContent() && this.flush(), this.gl.bindVertexArray(null);
@@ -763,7 +779,7 @@ class Et {
       for (const [s, a] of Object.entries(r.uniformTextures))
         i[s] = this.useTexture(a);
       for (const [s, a] of Object.entries(r.uniformArrayTexture))
-        i[s] = a.map((h) => this.useTexture(h));
+        i[s] = a.map((o) => this.useTexture(o));
       this.customShader.applyUniform(this.KEY, i);
     }
     const e = this.gl;
@@ -787,8 +803,8 @@ class Et {
     return !1;
   }
 }
-var A = /* @__PURE__ */ ((n) => (n[n.Float32 = 0] = "Float32", n[n.Uint32 = 1] = "Uint32", n[n.Uint16 = 2] = "Uint16", n))(A || {});
-class b {
+var C = /* @__PURE__ */ ((n) => (n[n.Float32 = 0] = "Float32", n[n.Uint32 = 1] = "Uint32", n[n.Uint16 = 2] = "Uint16", n))(C || {});
+class _ {
   usedElemNum;
   typedArray;
   arrayType;
@@ -830,24 +846,24 @@ class b {
     this.usedElemNum = 0;
   }
   static removeAtIndices(t, e) {
-    const r = Math.max(...e.map((h) => h.usedElemNum)), i = [...new Set(t)].filter(
-      (h) => h >= 0 && h < r
-    ).sort((h, o) => h - o);
+    const r = Math.max(...e.map((o) => o.usedElemNum)), i = [...new Set(t)].filter(
+      (o) => o >= 0 && o < r
+    ).sort((o, h) => o - h);
     if (i.length === 0)
       return 0;
     let s = 0, a = 0;
-    for (let h = 0; h < r; h++) {
-      if (a < i.length && h === i[a]) {
+    for (let o = 0; o < r; o++) {
+      if (a < i.length && o === i[a]) {
         a++;
         continue;
       }
-      if (s !== h)
-        for (const o of e)
-          o.typedArray[s] = o.typedArray[h];
+      if (s !== o)
+        for (const h of e)
+          h.typedArray[s] = h.typedArray[o];
       s++;
     }
-    for (const h of e)
-      h.usedElemNum = s;
+    for (const o of e)
+      o.usedElemNum = s;
     return r - s;
   }
   resize(t = 0) {
@@ -887,7 +903,7 @@ class b {
     return this.usedElemNum;
   }
 }
-class ut extends b {
+class lt extends _ {
   buffer;
   gl;
   dirty = !0;
@@ -913,7 +929,7 @@ class ut extends b {
     }
   }
 }
-const et = `#version 300 es\r
+const st = `#version 300 es\r
 precision highp float;\r
 \r
 // per-vertex\r
@@ -961,7 +977,7 @@ void main(void) {\r
 \r
     gl_Position = u_projection * position;\r
 }\r
-`, ft = `#version 300 es\r
+`, mt = `#version 300 es\r
 precision mediump float;\r
 \r
 uniform sampler2D uTextures[%TEXTURE_NUM%];\r
@@ -998,8 +1014,8 @@ void main(void) {\r
 \r
     // CUSTOM_CODE_CALL\r
 }\r
-`, z = 48, Ft = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
-class lt extends Et {
+`, j = 48, kt = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
+class dt extends Rt {
   instanceBuffer;
   quadBuffer;
   instanceCount = 0;
@@ -1011,64 +1027,64 @@ class lt extends Et {
   }
   createBuffer() {
     const t = this.gl;
-    this.quadBuffer = new ut(t, A.Float32, t.ARRAY_BUFFER, t.STATIC_DRAW), this.quadBuffer.bindBuffer();
-    for (const e of Ft) this.quadBuffer.pushFloat32(e);
-    this.quadBuffer.makeDirty(), this.quadBuffer.bufferData(), this.instanceBuffer = new ut(t, A.Uint32, t.ARRAY_BUFFER, t.DYNAMIC_DRAW);
+    this.quadBuffer = new lt(t, C.Float32, t.ARRAY_BUFFER, t.STATIC_DRAW), this.quadBuffer.bindBuffer();
+    for (const e of kt) this.quadBuffer.pushFloat32(e);
+    this.quadBuffer.makeDirty(), this.quadBuffer.bufferData(), this.instanceBuffer = new lt(t, C.Uint32, t.ARRAY_BUFFER, t.DYNAMIC_DRAW);
   }
   createDefaultShader() {
-    return this.vs = et, this.fs = ft, this.defaultShader = this.createShader(et, ft), this.defaultShader;
+    return this.vs = st, this.fs = mt, this.defaultShader = this.createShader(st, mt), this.defaultShader;
   }
   createShader(t, e) {
     const r = super.createShader(t, e);
     return r.use(), r.bindVAO(), this.instanceBuffer.bindBuffer(), r.setAttributes([
-      { name: "aMatrixRow0", size: 3, stride: z, offset: 0, divisor: 1 },
-      { name: "aMatrixRow1", size: 3, stride: z, offset: 12, divisor: 1 },
-      { name: "aUVRect", size: 4, stride: z, offset: 24, divisor: 1 },
-      { name: "aColor", size: 4, type: ot, normalized: !0, stride: z, offset: 40, divisor: 1 },
-      { name: "aTextureId", size: 1, type: ot, stride: z, offset: 44, divisor: 1 }
+      { name: "aMatrixRow0", size: 3, stride: j, offset: 0, divisor: 1 },
+      { name: "aMatrixRow1", size: 3, stride: j, offset: 12, divisor: 1 },
+      { name: "aUVRect", size: 4, stride: j, offset: 24, divisor: 1 },
+      { name: "aColor", size: 4, type: ct, normalized: !0, stride: j, offset: 40, divisor: 1 },
+      { name: "aTextureId", size: 1, type: ct, stride: j, offset: 44, divisor: 1 }
     ]), this.quadBuffer.bindBuffer(), r.setAttributes([
       { name: "aVertex", size: 2, stride: 8, offset: 0, divisor: 0 }
     ]), r.unbindVAO(), this.currentShader && this.currentShader.use(), r;
   }
-  drawSprite(t, e, r = 0, i = 0, s = 1, a = 1, h = 4294967295, o = 0, c = 0, u = !1, l = !1, f = !1) {
-    const d = e * 6, x = this.matrixStore.data;
+  drawSprite(t, e, r = 0, i = 0, s = 1, a = 1, o = 4294967295, h = 0, c = 0, u = !1, l = !1, d = !1) {
+    const f = e * 6, m = this.matrixStore.data;
     this.drawSpriteAffine(
       t,
-      x[d],
-      x[d + 1],
-      x[d + 2],
-      x[d + 3],
-      x[d + 4],
-      x[d + 5],
+      m[f],
+      m[f + 1],
+      m[f + 2],
+      m[f + 3],
+      m[f + 4],
+      m[f + 5],
       r,
       i,
       s,
       a,
-      h,
       o,
+      h,
       c,
       u,
       l,
-      f
+      d
     );
   }
-  drawSpriteAffine(t, e, r, i, s, a, h, o = 0, c = 0, u = 1, l = 1, f = 4294967295, d = 0, x = 0, p = !1, y = !1, v = !1) {
-    const E = t.base, S = t.rawWidth, _ = t.rawHeight, P = t.offsetX, k = t.offsetY, I = this.useTexture(
+  drawSpriteAffine(t, e, r, i, s, a, o, h = 0, c = 0, u = 1, l = 1, d = 4294967295, f = 0, m = 0, x = !1, y = !1, v = !1) {
+    const T = t.base, w = t.rawWidth, U = t.rawHeight, P = t.offsetX, O = t.offsetY, L = this.useTexture(
       t.glTexture,
-      d / E.width,
-      x / E.height
-    ), C = this.instanceBuffer, R = C.usedElemNum;
-    C.resize(12);
-    const w = C.float32, O = C.uint32, B = v ? _ : S, G = v ? S : _, L = B + 2 * d, W = G + 2 * x, D = P - d, H = k - x, M = this.localSpriteMatrix;
-    v ? (M[0] = 0, M[1] = y ? W : -W, M[2] = p ? -L : L, M[3] = 0, M[4] = D + (p ? L : 0), M[5] = H + (y ? 0 : W)) : (M[0] = p ? -L : L, M[1] = 0, M[2] = 0, M[3] = y ? -W : W, M[4] = D + (p ? L : 0), M[5] = H + (y ? W : 0));
-    const U = this.worldSpriteMatrix;
-    U[0] = e * M[0] + i * M[1], U[1] = r * M[0] + s * M[1], U[2] = e * M[2] + i * M[3], U[3] = r * M[2] + s * M[3], U[4] = a + e * M[4] + i * M[5], U[5] = h + r * M[4] + s * M[5], w[R + 6] = o, w[R + 7] = c, w[R + 8] = u, w[R + 9] = l, O[R + 10] = f, O[R + 11] = I, this.rapid.roundPixels && (U[4] = Math.round(U[4]), U[5] = Math.round(U[5])), w[R] = U[0], w[R + 1] = U[2], w[R + 2] = U[4], w[R + 3] = U[1], w[R + 4] = U[3], w[R + 5] = U[5], C.usedElemNum += 12, C.makeDirty(), this.instanceCount++;
+      f / T.width,
+      m / T.height
+    ), S = this.instanceBuffer, E = S.usedElemNum;
+    S.resize(12);
+    const b = S.float32, I = S.uint32, k = v ? U : w, G = v ? w : U, N = k + 2 * f, F = G + 2 * m, V = P - f, H = O - m, R = this.localSpriteMatrix;
+    v ? (R[0] = 0, R[1] = y ? F : -F, R[2] = x ? -N : N, R[3] = 0, R[4] = V + (x ? N : 0), R[5] = H + (y ? 0 : F)) : (R[0] = x ? -N : N, R[1] = 0, R[2] = 0, R[3] = y ? -F : F, R[4] = V + (x ? N : 0), R[5] = H + (y ? F : 0));
+    const A = this.worldSpriteMatrix;
+    A[0] = e * R[0] + i * R[1], A[1] = r * R[0] + s * R[1], A[2] = e * R[2] + i * R[3], A[3] = r * R[2] + s * R[3], A[4] = a + e * R[4] + i * R[5], A[5] = o + r * R[4] + s * R[5], b[E + 6] = h, b[E + 7] = c, b[E + 8] = u, b[E + 9] = l, I[E + 10] = d, I[E + 11] = L, this.rapid.roundPixels && (A[4] = Math.round(A[4]), A[5] = Math.round(A[5])), b[E] = A[0], b[E + 1] = A[2], b[E + 2] = A[4], b[E + 3] = A[1], b[E + 4] = A[3], b[E + 5] = A[5], S.usedElemNum += 12, S.makeDirty(), this.instanceCount++;
   }
   render() {
     if (this.instanceCount === 0) return;
     this.prepareRender();
     const t = this.gl, e = this.currentShader;
-    this.instanceBuffer.bindBuffer(), this.instanceBuffer.bufferData(), e.bindVAO(), yt(t, t.TRIANGLE_STRIP, 0, 4, this.instanceCount), this.rapid.drawcallCount++;
+    this.instanceBuffer.bindBuffer(), this.instanceBuffer.bufferData(), e.bindVAO(), wt(t, t.TRIANGLE_STRIP, 0, 4, this.instanceCount), this.rapid.drawcallCount++;
   }
   resetRender() {
     super.resetRender(), this.instanceBuffer.clear(), this.instanceCount = 0;
@@ -1077,66 +1093,78 @@ class lt extends Et {
     return this.instanceCount > 0;
   }
 }
-const T = 6;
-class Bt {
+const M = 6;
+class Gt {
   matrixCount = 0;
   buffer;
   data;
+  freeFlag;
+  freeMatrixStack;
   temporary = -1;
+  identityMatrix = -1;
   constructor(t = 10) {
-    this.buffer = new b(A.Float32), this.buffer.resize(t * T), this.data = this.buffer.getArray(), this.reset();
+    this.buffer = new _(C.Float32), this.buffer.resize(t * M), this.data = this.buffer.getArray(), this.freeFlag = new _(C.Uint32), this.freeMatrixStack = new _(C.Uint32), this.reset();
   }
   alloc() {
     const t = this.allocDirty();
     return this.identity(t), t;
   }
   allocDirty() {
-    return this.buffer.resize(T) && (this.data = this.buffer.getArray()), this.buffer.usedElemNum += T, this.matrixCount++;
+    if (this.freeMatrixStack.length > 0) {
+      const e = this.freeMatrixStack.pop();
+      return this.freeFlag.typedArray[e] = 1, e;
+    }
+    this.buffer.resize(M) && (this.data = this.buffer.getArray()), this.buffer.usedElemNum += M, this.freeFlag.resize(1);
+    const t = this.matrixCount++;
+    return this.freeFlag.typedArray[this.freeFlag.usedElemNum++] = 1, t;
+  }
+  free(t) {
+    !Number.isInteger(t) || t < 0 || t >= this.matrixCount || this.freeFlag.typedArray[t] !== 0 && (this.freeFlag.typedArray[t] = 0, this.freeMatrixStack.push(t));
   }
   reset() {
-    this.matrixCount = 0, this.buffer.usedElemNum = 0, this.temporary = this.alloc();
+    this.matrixCount = 0, this.buffer.usedElemNum = 0, this.freeFlag.clear(), this.freeMatrixStack.clear(), this.temporary = this.alloc(), this.identityMatrix = this.alloc();
   }
   identity(t) {
-    const e = t * T, r = this.data;
+    const e = t * M, r = this.data;
     r[e] = 1, r[e + 1] = 0, r[e + 2] = 0, r[e + 3] = 1, r[e + 4] = 0, r[e + 5] = 0;
   }
   translate(t, e, r) {
-    const i = t * T, s = this.data;
+    const i = t * M, s = this.data;
     s[i + 4] = s[i] * e + s[i + 2] * r + s[i + 4], s[i + 5] = s[i + 1] * e + s[i + 3] * r + s[i + 5];
   }
   scale(t, e, r) {
-    const i = t * T, s = this.data;
+    const i = t * M, s = this.data;
     s[i] *= e, s[i + 1] *= e, s[i + 2] *= r, s[i + 3] *= r;
   }
   rotate(t, e) {
-    const r = t * T, i = this.data, s = Math.cos(e), a = Math.sin(e), h = i[r], o = i[r + 1], c = i[r + 2], u = i[r + 3];
-    i[r] = h * s + c * a, i[r + 1] = o * s + u * a, i[r + 2] = h * -a + c * s, i[r + 3] = o * -a + u * s;
+    const r = t * M, i = this.data, s = Math.cos(e), a = Math.sin(e), o = i[r], h = i[r + 1], c = i[r + 2], u = i[r + 3];
+    i[r] = o * s + c * a, i[r + 1] = h * s + u * a, i[r + 2] = o * -a + c * s, i[r + 3] = h * -a + u * s;
   }
   rotateWithOffset(t, e, r, i) {
     this.translate(t, r, i), this.rotate(t, e), this.translate(t, -r, -i);
   }
   copy(t, e) {
-    const r = t * T, i = e * T, s = this.data;
+    const r = t * M, i = e * M, s = this.data;
     s[r] = s[i], s[r + 1] = s[i + 1], s[r + 2] = s[i + 2], s[r + 3] = s[i + 3], s[r + 4] = s[i + 4], s[r + 5] = s[i + 5];
   }
   multiply(t, e) {
     this.multiplyOut(t, t, e);
   }
   multiplyOut(t, e, r) {
-    const i = t * T, s = e * T, a = r * T, h = this.data, o = h[s], c = h[s + 1], u = h[s + 2], l = h[s + 3], f = h[s + 4], d = h[s + 5], x = h[a], p = h[a + 1], y = h[a + 2], v = h[a + 3], E = h[a + 4], S = h[a + 5];
-    h[i] = o * x + u * p, h[i + 1] = c * x + l * p, h[i + 2] = o * y + u * v, h[i + 3] = c * y + l * v, h[i + 4] = o * E + u * S + f, h[i + 5] = c * E + l * S + d;
+    const i = t * M, s = e * M, a = r * M, o = this.data, h = o[s], c = o[s + 1], u = o[s + 2], l = o[s + 3], d = o[s + 4], f = o[s + 5], m = o[a], x = o[a + 1], y = o[a + 2], v = o[a + 3], T = o[a + 4], w = o[a + 5];
+    o[i] = h * m + u * x, o[i + 1] = c * m + l * x, o[i + 2] = h * y + u * v, o[i + 3] = c * y + l * v, o[i + 4] = h * T + u * w + d, o[i + 5] = c * T + l * w + f;
   }
   invert(t) {
-    const e = t * T, r = this.data, i = r[e], s = r[e + 1], a = r[e + 2], h = r[e + 3], o = r[e + 4], c = r[e + 5];
-    let u = i * h - s * a;
+    const e = t * M, r = this.data, i = r[e], s = r[e + 1], a = r[e + 2], o = r[e + 3], h = r[e + 4], c = r[e + 5];
+    let u = i * o - s * a;
     if (!u) {
       this.identity(t);
       return;
     }
-    u = 1 / u, r[e] = h * u, r[e + 1] = -s * u, r[e + 2] = -a * u, r[e + 3] = i * u, r[e + 4] = (a * c - h * o) * u, r[e + 5] = (s * o - i * c) * u;
+    u = 1 / u, r[e] = o * u, r[e + 1] = -s * u, r[e + 2] = -a * u, r[e + 3] = i * u, r[e + 4] = (a * c - o * h) * u, r[e + 5] = (s * h - i * c) * u;
   }
   transformPoint(t, e, r) {
-    const i = t * T, s = this.data;
+    const i = t * M, s = this.data;
     return {
       x: e * s[i] + r * s[i + 2] + s[i + 4],
       y: e * s[i + 1] + r * s[i + 3] + s[i + 5]
@@ -1146,115 +1174,105 @@ class Bt {
     const i = this.allocDirty();
     this.copy(i, t), this.invert(i);
     const s = this.transformPoint(i, e, r);
-    return this.matrixCount--, this.buffer.usedElemNum -= T, s;
+    return this.free(i), s;
   }
   localToWorld(t, e, r) {
     return this.transformPoint(t, e, r);
   }
   getPosition(t) {
-    const e = t * T, r = this.data;
+    const e = t * M, r = this.data;
     return { x: r[e + 4], y: r[e + 5] };
   }
   getScale(t) {
-    const e = t * T, r = this.data, i = Math.sqrt(r[e] * r[e] + r[e + 1] * r[e + 1]), s = Math.sqrt(r[e + 2] * r[e + 2] + r[e + 3] * r[e + 3]);
+    const e = t * M, r = this.data, i = Math.sqrt(r[e] * r[e] + r[e + 1] * r[e + 1]), s = Math.sqrt(r[e + 2] * r[e + 2] + r[e + 3] * r[e + 3]);
     return { x: i, y: s };
   }
   getRotation(t) {
-    const e = t * T, r = this.data;
+    const e = t * M, r = this.data;
     return Math.atan2(r[e + 1], r[e]);
   }
   toCSSMatrix(t, e = 1, r = 1) {
-    const i = t * T, s = this.data;
+    const i = t * M, s = this.data;
     return `matrix(${s[i] * e}, ${s[i + 1] * r}, ${s[i + 2] * e}, ${s[i + 3] * r}, ${s[i + 4] * e}, ${s[i + 5] * r})`;
   }
   getMatrix(t) {
-    const e = t * T;
-    return this.data.slice(e, e + T);
+    const e = t * M;
+    return this.data.slice(e, e + M);
   }
   getMatrixRef(t) {
-    const e = t * T;
-    return this.data.subarray(e, e + T);
+    const e = t * M;
+    return this.data.subarray(e, e + M);
   }
   setMatrix(t, e) {
-    const r = t * T, i = this.data;
+    const r = t * M, i = this.data;
     i[r] = e[0], i[r + 1] = e[1], i[r + 2] = e[2], i[r + 3] = e[3], i[r + 4] = e[4], i[r + 5] = e[5];
   }
-  multiplyAffineInPlace(t, e, r, i, s, a, h) {
-    const o = t * 6, c = this.data, u = c[o], l = c[o + 1], f = c[o + 2], d = c[o + 3], x = c[o + 4], p = c[o + 5];
-    c[o] = u * e + f * r, c[o + 1] = l * e + d * r, c[o + 2] = u * i + f * s, c[o + 3] = l * i + d * s, c[o + 4] = u * a + f * h + x, c[o + 5] = l * a + d * h + p;
+  multiplyAffineInPlace(t, e, r, i, s, a, o) {
+    const h = t * 6, c = this.data, u = c[h], l = c[h + 1], d = c[h + 2], f = c[h + 3], m = c[h + 4], x = c[h + 5];
+    c[h] = u * e + d * r, c[h + 1] = l * e + f * r, c[h + 2] = u * i + d * s, c[h + 3] = l * i + f * s, c[h + 4] = u * a + d * o + m, c[h + 5] = l * a + f * o + x;
   }
-  multiplyAffine(t, e, r, i, s, a, h, o) {
-    const c = t * 6, u = e * 6, l = this.data, f = l[c], d = l[c + 1], x = l[c + 2], p = l[c + 3], y = l[c + 4], v = l[c + 5];
-    l[u] = f * r + x * i, l[u + 1] = d * r + p * i, l[u + 2] = f * s + x * a, l[u + 3] = d * s + p * a, l[u + 4] = f * h + x * o + y, l[u + 5] = d * h + p * o + v;
+  multiplyAffine(t, e, r, i, s, a, o, h) {
+    const c = t * 6, u = e * 6, l = this.data, d = l[c], f = l[c + 1], m = l[c + 2], x = l[c + 3], y = l[c + 4], v = l[c + 5];
+    l[u] = d * r + m * i, l[u + 1] = f * r + x * i, l[u + 2] = d * s + m * a, l[u + 3] = f * s + x * a, l[u + 4] = d * o + m * h + y, l[u + 5] = f * o + x * h + v;
+  }
+  clampBounds(t, e, r, i, s, a, o) {
+    if (i === void 0 && s === void 0 && a === void 0 && o === void 0)
+      return;
+    const h = t * M, c = this.data, u = Math.sqrt(c[h] * c[h] + c[h + 1] * c[h + 1]) || 1, l = Math.sqrt(c[h + 2] * c[h + 2] + c[h + 3] * c[h + 3]) || 1, d = e * 0.5 * u, f = r * 0.5 * l;
+    let m = c[h + 4], x = c[h + 5];
+    i !== void 0 && s !== void 0 ? m = s - i < d * 2 ? (i + s) * 0.5 : Math.max(i + d, Math.min(m, s - d)) : i !== void 0 ? m = Math.max(m, i + d) : s !== void 0 && (m = Math.min(m, s - d)), a !== void 0 && o !== void 0 ? x = o - a < f * 2 ? (a + o) * 0.5 : Math.max(a + f, Math.min(x, o - f)) : a !== void 0 ? x = Math.max(x, a + f) : o !== void 0 && (x = Math.min(x, o - f)), c[h + 4] = m, c[h + 5] = x;
+  }
+  applyTransform(t, e = 0, r = 0) {
+    let i = t.x ?? 0, s = t.y ?? 0;
+    t.position && (i += t.position.x, s += t.position.y);
+    let a = 1, o = 1;
+    const h = t.scale;
+    h !== void 0 && (typeof h == "number" ? (a = h, o = h) : (a = h.x, o = h.y));
+    const c = t.rotation ?? 0;
+    let u = t.offsetX ?? 0, l = t.offsetY ?? 0;
+    t.offset && (u += t.offset.x, l += t.offset.y);
+    const d = t.origin;
+    d !== void 0 && (typeof d == "number" ? (u -= d * e, l -= d * r) : (u -= d.x * e, l -= d.y * r));
+    const f = c ? Math.cos(c) : 1, m = c ? Math.sin(c) : 0, x = f * a, y = m * a, v = -m * o, T = f * o, w = i + x * u + v * l, U = s + y * u + T * l;
+    return [
+      x,
+      y,
+      v,
+      T,
+      w,
+      U
+    ];
   }
 }
-class kt {
-  matrix = new Bt();
-  step = 0;
-  stack = new b(A.Uint32);
-  stepWorldM = new b(A.Uint32);
-  stepAction = new b(A.Uint32);
-  stepParentM = new b(A.Uint32);
-  stepClose = new b(A.Uint32);
-  stepStack = new b(A.Uint32);
+class Ht {
+  matrix = new Gt();
+  stack = new _(C.Uint32);
+  currStack = new _(C.Uint32);
   curLocalM = -1;
   curWorldM = -1;
   rapid;
   constructor(t) {
     this.reset(), this.rapid = t;
   }
-  save() {
-    this.stack.push(this.curWorldM);
-    const t = this.curWorldM;
-    return this.curLocalM = this.matrix.alloc(), this.curWorldM = this.matrix.allocDirty(), this.stepWorldM.push(this.curWorldM), this.stepParentM.push(t), this.stepAction.push(1), this.stepClose.push(0), this.stepStack.push(this.step), this.matrix.copy(this.curWorldM, t), { world: this.curWorldM, local: this.curLocalM, step: this.step++ };
+  save(t, e) {
+    this.stack.push(this.curLocalM), this.stack.push(this.curWorldM);
+    const r = this.curWorldM;
+    return this.curLocalM = e ?? this.matrix.alloc(), this.curWorldM = t ?? this.matrix.allocDirty(), t === void 0 && (e === void 0 ? this.matrix.copy(this.curWorldM, r) : this.matrix.multiplyOut(this.curWorldM, r, this.curLocalM)), this.currStack.push(this.curLocalM), this.currStack.push(this.curWorldM), { parent: r, world: this.curWorldM, local: this.curLocalM };
   }
   restore() {
-    this.stack.length == 0 || this.stepStack.length == 0 || (this.curWorldM = this.stack.pop(), this.curLocalM = this.curWorldM - 1, this.stepParentM.push(this.stack.get(this.stack.length - 1)), this.stepWorldM.push(this.curWorldM), this.stepAction.push(0), this.stepClose.push(0), this.stepClose.typedArray[this.stepStack.pop()] = this.step, this.step++);
+    this.stack.length != 0 && (this.curWorldM = this.stack.pop(), this.curLocalM = this.stack.pop());
   }
   restoreAll() {
-    for (; this.stack.length > 0 && this.stepStack.length > 0; )
+    for (; this.stack.length > 0; )
       this.restore();
   }
-  getStep(t) {
-    return typeof t == "number" ? t : t.step;
-  }
-  walkSubtree(t, e, r = 1 / 0) {
-    let i = 0, s = t;
-    for (; s < this.step; ) {
-      const a = this.stepAction.get(s);
-      if (a === 1) {
-        if (i++, i > r) {
-          const h = this.stepClose.get(s);
-          if (h > s) {
-            s = h + 1, i--;
-            continue;
-          }
-        }
-      } else
-        i--;
-      if (e(s, a, i) === !1 || a === 0 && i === 0) return;
-      s++;
-    }
-  }
-  getParent(t) {
-    const e = this.getStep(t);
-    return this.stepParentM.get(e);
-  }
-  getChildren(t) {
-    const e = this.getStep(t), r = this.stepClose.get(e), i = [];
-    let s = e + 1;
-    for (; s < r; )
-      this.stepAction.get(s) === 1 ? (i.push(s), s = this.stepClose.get(s) + 1) : s++;
-    return i;
-  }
-  updateMatrixSubtree(t) {
-    const e = this.getStep(t);
-    this.walkSubtree(e, (r, i) => {
-      if (i === 1) {
-        const s = this.stepWorldM.get(r), a = s - 1, h = this.stepParentM.get(r);
-        this.matrix.multiplyOut(s, h, a);
-      }
-    });
+  retainMatrix(t) {
+    const e = new Set(
+      typeof t == "number" ? [t] : [t.local, t.world]
+    ), r = [];
+    for (let i = 0; i < this.currStack.length; i++)
+      e.has(this.currStack.get(i)) && r.push(i);
+    _.removeAtIndices(r, [this.currStack]);
   }
   translate(t, e) {
     this.matrix.translate(this.curLocalM, t, e), this.matrix.translate(this.curWorldM, t, e);
@@ -1272,7 +1290,9 @@ class kt {
     this.matrix.identity(this.curLocalM), this.matrix.identity(this.curWorldM);
   }
   reset() {
-    this.matrix.reset(), this.stack.clear(), this.stepAction.clear(), this.stepWorldM.clear(), this.stepParentM.clear(), this.stepClose.clear(), this.stepStack.clear(), this.step = 0, this.curLocalM = this.matrix.alloc(), this.curWorldM = this.matrix.alloc();
+    for (let t = 0; t < this.currStack.length; t++)
+      this.matrix.free(this.currStack.typedArray[t]);
+    this.currStack.clear(), this.stack.clear(), this.curLocalM = this.matrix.alloc(), this.curWorldM = this.matrix.alloc(), this.currStack.push(this.curLocalM), this.currStack.push(this.curWorldM);
   }
   localToWorld(t, e) {
     return this.matrix.localToWorld(this.curWorldM, t, e);
@@ -1293,61 +1313,54 @@ class kt {
     return this.matrix.toCSSMatrix(this.curWorldM);
   }
   getTransform() {
-    const t = this.curWorldM * T;
-    return this.matrix.data.slice(t, t + T);
+    const t = this.curWorldM * M;
+    return this.matrix.data.slice(t, t + M);
   }
   setTransform(t) {
-    const e = this.curWorldM * T, r = this.matrix.data;
+    const e = this.curWorldM * M, r = this.matrix.data;
     r[e] = t[0], r[e + 1] = t[1], r[e + 2] = t[2], r[e + 3] = t[3], r[e + 4] = t[4], r[e + 5] = t[5];
   }
   transformPoint(t, e) {
     return this.matrix.transformPoint(this.curLocalM, t, e);
   }
-  applyTransform(t, e = 0, r = 0, i = -1) {
-    let s = t.x ?? 0, a = t.y ?? 0;
-    t.position && (s += t.position.x, a += t.position.y);
-    let h = 1, o = 1;
-    const c = t.scale;
-    c && (typeof c == "number" ? (h = c, o = c) : (h = c.x, o = c.y));
-    const u = t.rotation ?? 0;
-    let l = t.offsetX ?? 0, f = t.offsetY ?? 0;
-    t.offset && (l += t.offset.x, f += t.offset.y);
-    const d = t.origin;
-    d !== void 0 && (typeof d == "number" ? (l -= d * e, f -= d * r) : (l -= d.x * e, f -= d.y * r));
-    const x = u ? Math.cos(u) : 1, p = u ? Math.sin(u) : 0, y = x * h, v = p * h, E = -p * o, S = x * o, _ = s + y * l + E * f, P = a + v * l + S * f;
-    if (i !== -1) {
-      this.matrix.multiplyAffine(
-        this.curWorldM,
-        i,
-        y,
-        v,
-        E,
-        S,
-        _,
-        P
-      );
-      return;
-    }
-    this.matrix.multiplyAffineInPlace(
-      this.curLocalM,
-      y,
-      v,
-      E,
-      S,
-      _,
-      P
+  applyTransform(t, e = 0, r = 0, i, s = this.curWorldM, a = this.curLocalM) {
+    const [
+      o,
+      h,
+      c,
+      u,
+      l,
+      d
+    ] = this.matrix.applyTransform(t, e, r);
+    i != null ? this.matrix.multiplyAffine(
+      s,
+      i,
+      o,
+      h,
+      c,
+      u,
+      l,
+      d
+    ) : (this.matrix.multiplyAffineInPlace(
+      a,
+      o,
+      h,
+      c,
+      u,
+      l,
+      d
     ), this.matrix.multiplyAffineInPlace(
-      this.curWorldM,
-      y,
-      v,
-      E,
-      S,
-      _,
-      P
-    );
+      s,
+      o,
+      h,
+      c,
+      u,
+      l,
+      d
+    ));
   }
 }
-const Ht = `#version 300 es\r
+const Vt = `#version 300 es\r
 precision highp float;\r
 \r
 in vec2 aPosition;\r
@@ -1378,7 +1391,7 @@ void main(void) {\r
     // CUSTOM_CODE_CALL\r
     gl_Position = u_projection * position;\r
 }\r
-`, Gt = `#version 300 es\r
+`, Xt = `#version 300 es\r
 precision mediump float;\r
 \r
 in vec4 vColor;\r
@@ -1425,7 +1438,7 @@ void main(void) {\r
     fragColor = sampleTexture(vRegion) * vColor;\r
     // CUSTOM_CODE_CALL\r
 }\r
-`, Vt = `#version 300 es\r
+`, Yt = `#version 300 es\r
 precision highp float;\r
 \r
 in vec2 aPosition;\r
@@ -1448,7 +1461,7 @@ void main(void) {\r
     );\r
     gl_Position = u_projection * position;\r
 }\r
-`, Xt = `#version 300 es\r
+`, zt = `#version 300 es\r
 precision mediump float;\r
 \r
 in vec2 vRegion;\r
@@ -1468,8 +1481,8 @@ void main(void) {\r
         discard;\r
     }\r
 }\r
-`, $ = 20;
-class Yt extends Et {
+`, K = 20;
+class $t extends Rt {
   vertexBuffer;
   vertexCount = 0;
   extraTextureUnit = 1;
@@ -1483,24 +1496,24 @@ class Yt extends Et {
   }
   createBuffer() {
     const t = this.gl;
-    this.vertexBuffer = new ut(t, A.Float32, t.ARRAY_BUFFER, t.DYNAMIC_DRAW), this.maskShader = this.createMaskShader(Vt, Xt);
+    this.vertexBuffer = new lt(t, C.Float32, t.ARRAY_BUFFER, t.DYNAMIC_DRAW), this.maskShader = this.createMaskShader(Yt, zt);
   }
   createDefaultShader() {
-    return this.vs = Ht, this.fs = Gt, this.defaultShader = this.createShader(this.vs, this.fs), this.defaultShader;
+    return this.vs = Vt, this.fs = Xt, this.defaultShader = this.createShader(this.vs, this.fs), this.defaultShader;
   }
   createMaskShader(t, e) {
-    const r = this.gl, i = new Tt(r, t, e);
+    const r = this.gl, i = new Et(r, t, e);
     return i.use(), i.bindVAO(), this.vertexBuffer.bindBuffer(), i.setAttributes([
-      { name: "aPosition", size: 2, type: r.FLOAT, stride: $ - 4, offset: 0, divisor: 0 },
-      { name: "aUV", size: 2, type: r.FLOAT, stride: $ - 4, offset: 8, divisor: 0 }
+      { name: "aPosition", size: 2, type: r.FLOAT, stride: K - 4, offset: 0, divisor: 0 },
+      { name: "aUV", size: 2, type: r.FLOAT, stride: K - 4, offset: 8, divisor: 0 }
     ]), i.unbindVAO(), this.currentShader && this.currentShader.use(), i;
   }
   createShader(t, e) {
     const r = this.gl, i = super.createShader(t, e);
     return i.use(), i.bindVAO(), this.vertexBuffer.bindBuffer(), i.setAttributes([
-      { name: "aPosition", size: 2, type: r.FLOAT, stride: $, offset: 0, divisor: 0 },
-      { name: "aColor", size: 4, type: r.UNSIGNED_BYTE, normalized: !0, stride: $, offset: 8, divisor: 0 },
-      { name: "aUV", size: 2, type: r.FLOAT, stride: $, offset: 12, divisor: 0 }
+      { name: "aPosition", size: 2, type: r.FLOAT, stride: K, offset: 0, divisor: 0 },
+      { name: "aColor", size: 4, type: r.UNSIGNED_BYTE, normalized: !0, stride: K, offset: 8, divisor: 0 },
+      { name: "aUV", size: 2, type: r.FLOAT, stride: K, offset: 12, divisor: 0 }
     ]), i.unbindVAO(), this.currentShader && this.currentShader.use(), i;
   }
   startGraphic(t, e = this.gl.TRIANGLES, r) {
@@ -1527,32 +1540,32 @@ class Yt extends Et {
     return !1;
   }
 }
-class g {
+class p {
   x;
   y;
-  static ZERO = new g(0, 0);
-  static ONE = new g(1, 1);
-  static UP = new g(0, 1);
-  static DOWN = new g(0, -1);
-  static LEFT = new g(-1, 0);
-  static RIGHT = new g(1, 0);
+  static ZERO = new p(0, 0);
+  static ONE = new p(1, 1);
+  static UP = new p(0, 1);
+  static DOWN = new p(0, -1);
+  static LEFT = new p(-1, 0);
+  static RIGHT = new p(1, 0);
   constructor(t, e) {
-    this.x = t !== void 0 ? t : 0, this.y = e !== void 0 ? e : 0;
+    this.x = t !== void 0 ? t : 0, this.y = e !== void 0 ? e : this.x;
   }
   set(t, e) {
     return e === void 0 ? (this.x = t, this.y = t) : (this.x = t, this.y = e), this;
   }
   add(t) {
-    return new g(this.x + t.x, this.y + t.y);
+    return new p(this.x + t.x, this.y + t.y);
   }
   subtract(t) {
-    return new g(this.x - t.x, this.y - t.y);
+    return new p(this.x - t.x, this.y - t.y);
   }
   multiply(t) {
-    return t instanceof g ? new g(this.x * t.x, this.y * t.y) : new g(this.x * t, this.y * t);
+    return t instanceof p ? new p(this.x * t.x, this.y * t.y) : new p(this.x * t, this.y * t);
   }
   divide(t) {
-    return t instanceof g ? new g(this.x / t.x, this.y / t.y) : new g(this.x / t, this.y / t);
+    return t instanceof p ? new p(this.x / t.x, this.y / t.y) : new p(this.x / t, this.y / t);
   }
   dot(t) {
     return this.x * t.x + this.y * t.y;
@@ -1565,7 +1578,7 @@ class g {
     return Math.sqrt(e * e + r * r);
   }
   clone() {
-    return new g(this.x, this.y);
+    return new p(this.x, this.y);
   }
   to(t) {
     this.x = t.x, this.y = t.y;
@@ -1581,7 +1594,7 @@ class g {
     return this.x = -this.x, this.y = -this.y, this;
   }
   inverted() {
-    return new g(this.x * -1, this.y * -1);
+    return new p(this.x * -1, this.y * -1);
   }
   length() {
     return Math.sqrt(this.x * this.x + this.y * this.y);
@@ -1595,13 +1608,13 @@ class g {
   }
   normalized() {
     const t = this.length();
-    return new g(this.x / t || 0, this.y / t || 0);
+    return new p(this.x / t || 0, this.y / t || 0);
   }
   fix(t = 1e-13) {
     this.x = Math.abs(this.x) < t ? 0 : this.x, this.y = Math.abs(this.y) < t ? 0 : this.y;
   }
   fixed(t = 1e-13) {
-    return new g(
+    return new p(
       Math.abs(this.x) < t ? 0 : this.x,
       Math.abs(this.y) < t ? 0 : this.y
     );
@@ -1610,13 +1623,13 @@ class g {
     return Math.atan2(this.y, this.x);
   }
   abs() {
-    return new g(Math.abs(this.x), Math.abs(this.y));
+    return new p(Math.abs(this.x), Math.abs(this.y));
   }
   floor() {
-    return new g(Math.floor(this.x), Math.floor(this.y));
+    return new p(Math.floor(this.x), Math.floor(this.y));
   }
   ceil() {
-    return new g(Math.ceil(this.x), Math.ceil(this.y));
+    return new p(Math.ceil(this.x), Math.ceil(this.y));
   }
   stringify() {
     return `Vec2(${this.x}, ${this.y})`;
@@ -1637,14 +1650,14 @@ class g {
     return this.x = Math.cos(t) * e, this.y = Math.sin(t) * e, this;
   }
   static FromArray(t) {
-    return t.map((e) => new g(e[0], e[1]));
+    return t.map((e) => new p(e[0], e[1]));
   }
   static fromAngle(t) {
-    return new g(Math.cos(t), Math.sin(t));
+    return new p(Math.cos(t), Math.sin(t));
   }
 }
-const zt = (n, t) => {
-  const [e, r, i, s, a, h] = t, o = new Float32Array([
+const jt = (n, t) => {
+  const [e, r, i, s, a, o] = t, h = new Float32Array([
     e,
     i,
     0,
@@ -1658,12 +1671,12 @@ const zt = (n, t) => {
     1,
     0,
     a,
-    h,
+    o,
     0,
     1
   ]);
-  return $t(o, n);
-}, $t = (n, t) => {
+  return Kt(h, n);
+}, Kt = (n, t) => {
   const e = new Float32Array(16);
   for (let r = 0; r < 4; r++)
     for (let i = 0; i < 4; i++) {
@@ -1674,77 +1687,84 @@ const zt = (n, t) => {
     }
   return e;
 };
-var jt = /* @__PURE__ */ ((n) => (n[n.STRETCH = 0] = "STRETCH", n[n.REPEAT = 1] = "REPEAT", n))(jt || {});
-const nt = 10, mt = (n, t, e, r, i, s) => {
-  const a = [], h = [], o = r ? Math.atan2(t.y, t.x) : Math.atan2(-t.y, -t.x), c = Math.PI, u = new g(t.y, -t.x);
-  for (let l = 0; l < nt; l++) {
-    const f = l / nt, d = (l + 1) / nt, x = o + f * c, p = o + d * c, y = new g(Math.cos(x) * e, Math.sin(x) * e), v = new g(Math.cos(p) * e, Math.sin(p) * e);
-    a.push(n), h.push(new g(i, 0.5)), a.push(n.add(y)), h.push(new g(i + y.dot(u) * s, 0.5 - 0.5 * y.dot(t) / e)), a.push(n.add(v)), h.push(new g(i + v.dot(u) * s, 0.5 - 0.5 * v.dot(t) / e));
-  }
-  return { vertices: a, uv: h };
-}, Kt = (n, t = !1) => {
+var qt = /* @__PURE__ */ ((n) => (n[n.STRETCH = 0] = "STRETCH", n[n.REPEAT = 1] = "REPEAT", n))(qt || {});
+const at = 10, xt = (n, t, e, r, i, s) => {
+  const a = [], o = [], h = r ? Math.atan2(t.y, t.x) : Math.atan2(-t.y, -t.x), c = Math.PI, u = new p(t.y, -t.x);
+  for (let l = 0; l < at; l++) {
+    const d = l / at, f = (l + 1) / at, m = h + d * c, x = h + f * c, y = new p(Math.cos(m) * e, Math.sin(m) * e), v = new p(Math.cos(x) * e, Math.sin(x) * e);
+    a.push(n), o.push(new p(i, 0.5)), a.push(n.add(y)), o.push(new p(i + y.dot(u) * s, 0.5 - 0.5 * y.dot(t) / e)), a.push(n.add(v)), o.push(new p(i + v.dot(u) * s, 0.5 - 0.5 * v.dot(t) / e));
+  }
+  return { vertices: a, uv: o };
+}, Zt = (n, t = !1) => {
   const e = [];
   if (n.length < 2 || t && n.length < 3) return { normals: e, length: 0 };
   const r = 4, i = 1e-3, s = n.length;
   let a = 0;
   if (t)
-    for (let o = 0; o < s; o++) {
-      const c = n[o], u = n[(o + 1) % s];
+    for (let h = 0; h < s; h++) {
+      const c = n[h], u = n[(h + 1) % s];
       a += c.distanceTo(u);
     }
   else
-    for (let o = 0; o < s - 1; o++)
-      a += n[o].distanceTo(n[o + 1]);
-  const h = (o, c, u) => {
-    const l = c.subtract(o).normalize(), f = c.subtract(u).normalize(), d = f.dot(l);
-    if (d < -1 + i)
+    for (let h = 0; h < s - 1; h++)
+      a += n[h].distanceTo(n[h + 1]);
+  const o = (h, c, u) => {
+    const l = c.subtract(h).normalize(), d = c.subtract(u).normalize(), f = d.dot(l);
+    if (f < -1 + i)
       return { normal: l.perpendicular(), miters: 1 };
     {
-      let x = f.add(l).normalize();
-      l.cross(f) < 0 && (x = x.multiply(-1));
-      let p = 1 / Math.sqrt((1 - d) / 2);
-      return { normal: x, miters: Math.min(p, r) };
+      let m = d.add(l).normalize();
+      l.cross(d) < 0 && (m = m.multiply(-1));
+      let x = 1 / Math.sqrt((1 - f) / 2);
+      return { normal: m, miters: Math.min(x, r) };
     }
   };
   if (t)
-    for (let o = 0; o < s; o++) {
-      const c = o === 0 ? n[s - 1] : n[o - 1], u = n[o], l = o === s - 1 ? n[0] : n[o + 1];
-      e.push(h(c, u, l));
+    for (let h = 0; h < s; h++) {
+      const c = h === 0 ? n[s - 1] : n[h - 1], u = n[h], l = h === s - 1 ? n[0] : n[h + 1];
+      e.push(o(c, u, l));
     }
   else
-    for (let o = 0; o < s; o++)
-      if (o === 0) {
+    for (let h = 0; h < s; h++)
+      if (h === 0) {
         const c = n[1].subtract(n[0]).normalize();
         e.push({ normal: c.perpendicular(), miters: 1 });
-      } else if (o === s - 1) {
-        const c = n[o].subtract(n[o - 1]).normalize();
+      } else if (h === s - 1) {
+        const c = n[h].subtract(n[h - 1]).normalize();
         e.push({ normal: c.perpendicular(), miters: 1 });
       } else
-        e.push(h(n[o - 1], n[o], n[o + 1]));
+        e.push(o(n[h - 1], n[h], n[h + 1]));
   return { normals: e, length: a };
-}, qt = (n) => {
+}, Qt = (n) => {
   const t = n.points;
   if (t.length < 2) return { vertices: [], uv: [] };
-  const { normals: e, length: r } = Kt(t, n.closed), i = (n.width || 1) / 2, s = [], a = [], h = n.roundCap || !1, o = n.textureMode || 0;
+  const { normals: e, length: r } = Zt(t, n.closed), i = (n.width || 1) / 2, s = [], a = [], o = n.roundCap || !1, h = n.textureMode || 0;
   let c = 0;
   const u = n.texture?.rawWidth || 1, l = n.closed ? t.length : t.length - 1;
-  for (let f = 0; f < l; f++) {
-    const d = t[f], x = e[f].normal, p = e[f].miters, y = (f + 1) % t.length, v = t[y], E = e[y].normal, S = e[y].miters, _ = d.add(x.multiply(p * i)), P = d.subtract(x.multiply(p * i)), k = v.add(E.multiply(S * i)), I = v.subtract(E.multiply(S * i)), C = d.distanceTo(v);
-    let R = 0, w = 0;
-    o === 0 ? (R = c / r, w = (c + C) / r) : (R = c / u, w = R + C / u);
-    const O = new g(R, 0), B = new g(R, 1), G = new g(w, 0), L = new g(w, 1);
-    s.push(_), a.push(O), s.push(P), a.push(B), s.push(k), a.push(G), s.push(k), a.push(G), s.push(I), a.push(L), s.push(P), a.push(B), c += C;
-  }
-  if (h && !n.closed) {
-    const f = t[0], d = e[0].normal, x = o === 0 ? r > 0 ? 1 / r : 0 : 1 / u, p = mt(f, d, i, !0, 0, x);
-    s.push(...p.vertices), a.push(...p.uv);
-    const y = t[t.length - 1], v = e[t.length - 1].normal, E = o === 0 ? 1 : c / u, S = o === 0 ? r > 0 ? 1 / r : 0 : 1 / u, _ = mt(y, v, i, !1, E, S);
-    s.push(..._.vertices), a.push(..._.uv);
+  for (let d = 0; d < l; d++) {
+    const f = t[d], m = e[d].normal, x = e[d].miters, y = (d + 1) % t.length, v = t[y], T = e[y].normal, w = e[y].miters, U = f.add(m.multiply(x * i)), P = f.subtract(m.multiply(x * i)), O = v.add(T.multiply(w * i)), L = v.subtract(T.multiply(w * i)), S = f.distanceTo(v);
+    let E = 0, b = 0;
+    h === 0 ? (E = c / r, b = (c + S) / r) : (E = c / u, b = E + S / u);
+    const I = new p(E, 0), k = new p(E, 1), G = new p(b, 0), N = new p(b, 1);
+    s.push(U), a.push(I), s.push(P), a.push(k), s.push(O), a.push(G), s.push(O), a.push(G), s.push(L), a.push(N), s.push(P), a.push(k), c += S;
+  }
+  if (o && !n.closed) {
+    const d = t[0], f = e[0].normal, m = h === 0 ? r > 0 ? 1 / r : 0 : 1 / u, x = xt(d, f, i, !0, 0, m);
+    s.push(...x.vertices), a.push(...x.uv);
+    const y = t[t.length - 1], v = e[t.length - 1].normal, T = h === 0 ? 1 : c / u, w = h === 0 ? r > 0 ? 1 / r : 0 : 1 / u, U = xt(y, v, i, !1, T, w);
+    s.push(...U.vertices), a.push(...U.uv);
   }
   return { vertices: s, uv: a };
-}, Z = (n, t, e, r) => {
+}, tt = (n, t, e, r) => {
+  const i = n.matrix.temporary;
   if (t.customMatrix !== void 0)
-    return t.customMatrix;
+    return n.matrixStack.applyTransform(
+      t,
+      e,
+      r,
+      i,
+      t.customMatrix
+    ), i;
   if (t.modifyStack) {
     n.matrixStack.applyTransform(
       t,
@@ -1752,41 +1772,40 @@ const nt = 10, mt = (n, t, e, r, i, s) => {
       r
     );
     return;
-  } else {
-    const i = n.matrix.temporary;
+  } else
     return n.matrixStack.applyTransform(
       t,
       e,
       r,
-      i
+      i,
+      n.matrixStack.curWorldM
     ), i;
-  }
-}, Qt = (n, t) => t ? n ? t.premultipliedUint32 : t.uint32 : 4294967295, Zt = 2, Jt = (n, t) => {
-  const e = Z(n, t, t.texture.rawWidth, t.texture.rawHeight), r = t.texture;
+}, Jt = (n, t) => t ? n ? t.premultipliedUint32 : t.uint32 : 4294967295, te = 2, ee = (n, t) => {
+  const e = tt(n, t, t.texture.rawWidth, t.texture.rawHeight), r = t.texture;
   if (!r?.base || n.inCreateMask)
     return;
   const i = r.isAtlas ? n.atlasSpriteRegion : n.spriteRegion;
   n.enterRegion(i, t.shader);
-  let s = r.uvX, a = r.uvY, h = r.uvW, o = r.uvH;
+  let s = r.uvX, a = r.uvY, o = r.uvW, h = r.uvH;
   const c = !!t.flipX, u = !!t.flipY != !!r.flipY;
   let l = t.padding ?? i.currentShader.padding;
-  r.isAtlas && (l += Zt);
-  const f = s <= h ? l : -l, d = a <= o ? l : -l;
+  r.isAtlas && (l += te);
+  const d = s <= o ? l : -l, f = a <= h ? l : -l;
   i.drawSprite(
     r,
     e ?? t.customMatrix ?? n.matrixStack.curWorldM,
     s,
     a,
-    h,
     o,
+    h,
     n.getColorUint32(t.color),
-    f,
     d,
+    f,
     c,
     u,
     r.isRotated
   );
-}, te = (n, t) => {
+}, re = (n, t) => {
   const e = n.particleRegion;
   n.enterRegion(e, t.shader);
   const r = t.texture, i = t.count ?? t.x.length, s = t.color;
@@ -1814,7 +1833,7 @@ const nt = 10, mt = (n, t, e, r, i, s) => {
   );
 }, Mt = (n, t) => {
   if (t.points.length === 0) return;
-  const e = Z(n, t, 0, 0);
+  const e = tt(n, t, 0, 0);
   n.startGraphic(
     t.drawMode ?? n.gl.TRIANGLES,
     t.texture,
@@ -1832,18 +1851,18 @@ const nt = 10, mt = (n, t, e, r, i, s) => {
     );
   }
   n.endGraphic();
-}, ee = (n, t) => {
+}, ie = (n, t) => {
   if (n.inCreateMask)
     return;
-  const { vertices: e, uv: r } = qt(t);
+  const { vertices: e, uv: r } = Qt(t);
   Mt(n, {
     ...t,
     points: e,
     uv: r,
     drawMode: n.gl.TRIANGLES
   });
-}, re = (n, t) => {
-  const e = Z(
+}, se = (n, t) => {
+  const e = tt(
     n,
     t,
     t.texture.rawWidth,
@@ -1854,16 +1873,16 @@ const nt = 10, mt = (n, t, e, r, i, s) => {
     t.texture,
     e ?? t.customMatrix
   ), n.addRectVertex(t.texture.rawWidth, t.texture.rawHeight), n.endGraphic();
-}, ie = (n, t) => {
-  const e = Z(n, t, t.width, t.height);
+}, ne = (n, t) => {
+  const e = tt(n, t, t.width, t.height);
   n.startGraphic(
     n.gl.TRIANGLE_FAN,
     t.texture,
     t.shader,
     e ?? t.customMatrix
   ), n.addRectVertex(t.width, t.height, t.color), n.endGraphic();
-}, se = (n, t) => {
-  const e = t.segments ?? 32, r = Z(n, t, 0, 0);
+}, ae = (n, t) => {
+  const e = t.segments ?? 32, r = tt(n, t, 0, 0);
   n.startGraphic(
     n.gl.TRIANGLE_FAN,
     void 0,
@@ -1872,7 +1891,7 @@ const nt = 10, mt = (n, t, e, r, i, s) => {
   );
   const i = n.getColorUint32(t.color);
   n.addGraphicVertex(0, 0, 0.5, 0.5, i), n.addCircleVertex(t.radius, t.color, e), n.addGraphicVertex(t.radius, 0, 1, 0.5, i), n.endGraphic();
-}, xt = `#version 300 es\r
+}, pt = `#version 300 es\r
 precision mediump float;\r
 \r
 uniform sampler2D uTextures[%TEXTURE_NUM%];\r
@@ -1916,16 +1935,16 @@ void main(void) {\r
     // CUSTOM_CODE_CALL\r
 }\r
 `;
-class ne extends lt {
+class oe extends dt {
   KEY = "AtlasSprite";
   constructor(t) {
     super(t);
   }
   createDefaultShader() {
-    return this.vs = et, this.fs = xt, this.defaultShader = this.createShader(et, xt), this.defaultShader;
+    return this.vs = st, this.fs = pt, this.defaultShader = this.createShader(st, pt), this.defaultShader;
   }
 }
-const ae = `#version 300 es\r
+const he = `#version 300 es\r
 precision highp float;\r
 \r
 // per-vertex\r
@@ -1942,7 +1961,8 @@ in vec4 aUVRect;\r
 \r
 // per-instance：tint color\r
 in vec4 aColor;\r
-uniform mat4 u_projection;\r
+// Projection and scene transform are combined once per particle batch on the CPU.
+uniform mat4 u_matrix;
 \r
 out vec2 vRegion;\r
 out vec4 vColor;\r
@@ -1960,9 +1980,9 @@ void main(void) {\r
     vec4 position = vec4(mat2(c, s, -s, c) * scaled + aPosition, 0.0, 1.0);\r
     // CUSTOM_CODE_CALL\r
 \r
-    gl_Position = u_projection * position;\r
+    gl_Position = u_matrix * position;
 }\r
-`, he = `#version 300 es\r
+`, ce = `#version 300 es\r
 precision mediump float;\r
 \r
 uniform sampler2D uTexture;\r
@@ -1979,8 +1999,8 @@ void main(void) {\r
 \r
     // CUSTOM_CODE_CALL\r
 }\r
-`, V = 48, oe = V / 4;
-class ce extends lt {
+`, Y = 48, ue = Y / 4;
+class le extends dt {
   KEY = "ParticleSprite";
   texture;
   customMatrix;
@@ -1990,77 +2010,77 @@ class ce extends lt {
     super(t);
   }
   createDefaultShader() {
-    const t = he, e = ae;
+    const t = ce, e = he;
     return this.vs = e, this.fs = t, this.defaultShader = this.createShader(e, t), this.defaultShader;
   }
   enter(t) {
-    super.enter(t), this.currentShader.setUniform("u_projection", this.rapid.projection);
+    super.enter(t), this.currentShader.setUniform("u_matrix", this.rapid.projection);
   }
   createShader(t, e) {
     const r = super.createShader(t, e);
     return r.use(), r.bindVAO(), this.instanceBuffer.bindBuffer(), r.setAttributes([
-      { name: "aPosition", size: 2, stride: V, offset: 0, divisor: 1 },
-      { name: "aScale", size: 2, stride: V, offset: 8, divisor: 1 },
-      { name: "aRotation", size: 1, stride: V, offset: 16, divisor: 1 },
-      { name: "aUVRect", size: 4, stride: V, offset: 20, divisor: 1 },
-      { name: "aColor", size: 4, type: ot, normalized: !0, stride: V, offset: 36, divisor: 1 },
-      { name: "aOrigin", size: 2, stride: V, offset: 40, divisor: 1 }
+      { name: "aPosition", size: 2, stride: Y, offset: 0, divisor: 1 },
+      { name: "aScale", size: 2, stride: Y, offset: 8, divisor: 1 },
+      { name: "aRotation", size: 1, stride: Y, offset: 16, divisor: 1 },
+      { name: "aUVRect", size: 4, stride: Y, offset: 20, divisor: 1 },
+      { name: "aColor", size: 4, type: ct, normalized: !0, stride: Y, offset: 36, divisor: 1 },
+      { name: "aOrigin", size: 2, stride: Y, offset: 40, divisor: 1 }
     ]), this.quadBuffer.bindBuffer(), r.setAttributes([
       { name: "aVertex", size: 2, stride: 8, offset: 0, divisor: 0 }
     ]), r.unbindVAO(), this.currentShader && this.currentShader.use(), r;
   }
-  drawParticles(t, e, r, i = 0, s = 4294967295, a, h = 1, o = 1, c = 0, u = 0, l = 1, f = 1, d = !1, x = !1, p = !1, y = 0.5, v = 0.5, E, S = !1, _) {
+  drawParticles(t, e, r, i = 0, s = 4294967295, a, o = 1, h = 1, c = 0, u = 0, l = 1, d = 1, f = !1, m = !1, x = !1, y = 0.5, v = 0.5, T, w = !1, U) {
     if (!t.glTexture || a <= 0) return;
     this.texture && t !== this.texture && this.flush();
-    const P = typeof h == "number", k = typeof o == "number", I = typeof i == "number", C = typeof s == "number", R = typeof c == "number", w = !C && typeof s[0] == "number", O = t.uvW - t.uvX, B = t.uvH - t.uvY, G = O === 0 ? 0 : 1 / O, L = B === 0 ? 0 : 1 / B;
-    let W = t.rawWidth * (d ? -1 : 1);
-    P && (W *= h);
-    let D = t.rawHeight * (x ? -1 : 1);
-    k && (D *= o), R && (W *= (l - c) * G, D *= (f - u) * L);
-    let H = p ? Math.PI / 2 : 0;
-    I && (H += i);
-    const M = s ?? 4294967295, U = this.getParticleLoop(
+    const P = typeof o == "number", O = typeof h == "number", L = typeof i == "number", S = typeof s == "number", E = typeof c == "number", b = !S && typeof s[0] == "number", I = t.uvW - t.uvX, k = t.uvH - t.uvY, G = I === 0 ? 0 : 1 / I, N = k === 0 ? 0 : 1 / k;
+    let F = t.rawWidth * (f ? -1 : 1);
+    P && (F *= o);
+    let V = t.rawHeight * (m ? -1 : 1);
+    O && (V *= h), E && (F *= (l - c) * G, V *= (d - u) * N);
+    let H = x ? Math.PI / 2 : 0;
+    L && (H += i);
+    const R = s ?? 4294967295, A = this.getParticleLoop(
       P,
-      k,
-      I,
-      R,
-      C,
-      w,
+      O,
+      L,
+      E,
       S,
-      E
+      b,
+      w,
+      T
     );
     this.texture || (this.texture = t, this.useTexture(t.glTexture, 0, 0));
-    const it = a, Y = this.instanceBuffer;
-    let st = Y.usedElemNum;
-    Y.resize(it * oe);
-    const At = Y.float32, St = Y.uint32;
-    st = U(
+    const $ = a, B = this.instanceBuffer;
+    let X = B.usedElemNum;
+    B.resize($ * ue);
+    const bt = B.float32, Ut = B.uint32;
+    X = A(
       e,
       r,
-      h,
       o,
+      h,
       i,
       c,
       u,
       l,
-      f,
+      d,
       s,
-      At,
-      St,
-      W,
-      D,
+      bt,
+      Ut,
+      F,
+      V,
       G,
-      L,
+      N,
       H,
-      M,
-      y,
-      v,
+      R,
+      1 - y,
+      1 - v,
       a,
-      it,
-      st
-    ), Y.usedElemNum = st, Y.makeDirty(), this.instanceCount += it, this.customMatrix = _, this.flush();
+      $,
+      X
+    ), B.usedElemNum = X, B.makeDirty(), this.instanceCount += $, this.customMatrix = U, this.flush();
   }
-  getParticleLoop(t, e, r, i, s, a, h, o) {
+  getParticleLoop(t, e, r, i, s, a, o, h) {
     const c = [...arguments].join("_");
     if (this.particleLoopCache.has(c))
       return this.particleLoopCache.get(c);
@@ -2073,7 +2093,7 @@ const endIdx = index + batchCount * 12;
 let idx = index;
 if (endIdx > f32.length) return index;
 
-${h ? "for (let src = count - 1; idx < endIdx; src--, idx += 12) {" : "for (let src = 0; idx < endIdx; src++, idx += 12) {"}
+${o ? "for (let src = count - 1; idx < endIdx; src--, idx += 12) {" : "for (let src = 0; idx < endIdx; src++, idx += 12) {"}
 f32[idx]     = x[src];
 f32[idx + 1] = y[src];
 
@@ -2096,7 +2116,7 @@ f32[idx + 7] = cu1;
 f32[idx + 8] = cv1;
 `}
 
-u32[idx + 9] = ${s ? "staticColor" : a ? "color[src]" : `color[src].${o ? "premultipliedUint32" : "uint32"}`};
+u32[idx + 9] = ${s ? "staticColor" : a ? "color[src]" : `color[src].${h ? "premultipliedUint32" : "uint32"}`};
 
 f32[idx + 10] = originX;
 f32[idx + 11] = originY;
@@ -2114,30 +2134,171 @@ return idx;
     this.texture && (t.activeTexture(t.TEXTURE0), t.bindTexture(t.TEXTURE_2D, this.texture.glTexture));
     const e = this.currentShader;
     this.instanceBuffer.bindBuffer(), this.instanceBuffer.bufferData(), e.bindVAO();
-    const r = this.rapid.matrixStack, s = this.rapid.matrix.getMatrix(this.customMatrix ?? r.curWorldM), a = zt(this.rapid.projection, s);
-    this.currentShader.setUniform("u_projection", a), yt(t, t.TRIANGLE_STRIP, 0, 4, this.instanceCount), this.rapid.drawcallCount++, this.texture = void 0, this.customMatrix = void 0;
+    const r = this.rapid.matrixStack, s = this.rapid.matrix.getMatrix(this.customMatrix ?? r.curWorldM), a = jt(this.rapid.projection, s);
+    this.currentShader.setUniform("u_matrix", a), wt(t, t.TRIANGLE_STRIP, 0, 4, this.instanceCount), this.rapid.drawcallCount++, this.texture = void 0, this.customMatrix = void 0;
+  }
+}
+var de = /* @__PURE__ */ ((n) => (n[n.KEEP_W = 0] = "KEEP_W", n[n.KEEP_H = 1] = "KEEP_H", n[n.KEEP = 2] = "KEEP", n[n.IGNORE = 3] = "IGNORE", n[n.EXPAND = 4] = "EXPAND", n[n.NONE = 5] = "NONE", n))(de || {});
+const fe = {
+  4: new p(1, 1),
+  0: new p(0, 1),
+  1: new p(1, 0),
+  2: new p(0, 0)
+}, gt = {
+  4: new p(0.5, 0.5),
+  0: new p(0.5, 0),
+  1: new p(0, 0.5),
+  2: new p(0.5, 0.5)
+};
+class me {
+  constructor(t, e) {
+    this.rapid = t, this.updateWindowOption(e);
+  }
+  viewLeft = 0;
+  viewRight = 0;
+  viewTop = 0;
+  viewBottom = 0;
+  window = {};
+  scissorViewport = null;
+  resolution = 0;
+  updateWindowOption(t) {
+    Object.assign(this.window, t);
+  }
+  resize(t, e, r, i) {
+    const s = this.rapid, a = this.window, o = a.scale ?? 1;
+    t /= o, e /= o, s.flush();
+    const h = r ?? s.canvas.clientWidth ?? s.canvas.width, c = i ?? s.canvas.clientHeight ?? s.canvas.height;
+    r !== void 0 && (s.canvas.style.width = h + "px"), i !== void 0 && (s.canvas.style.height = c + "px"), s.physicsWidth = h * s.dpr, s.physicsHeight = c * s.dpr, s.logicWidth = t, s.logicHeight = e;
+    let u = 0, l = t, d = e, f = 0;
+    const m = a.scaleMode ?? Q.CanvasItem, x = a.expand ?? 2;
+    let y = p.ZERO, v = p.ZERO;
+    switch (x in gt && (y = a.expandPosition ?? gt[x], v = fe[x]), this.scissorViewport = null, x) {
+      case 3: {
+        u = 0, l = t, d = e, f = 0;
+        break;
+      }
+      case 5: {
+        u = 0, l = s.physicsWidth, d = s.physicsHeight, f = 0;
+        break;
+      }
+      default:
+      case 4:
+      case 0:
+      case 1:
+      case 2: {
+        const T = y, w = v, U = Math.min(
+          s.physicsWidth / t,
+          s.physicsHeight / e
+        ), P = s.physicsWidth / U, O = s.physicsHeight / U, L = P - t, S = O - e;
+        if (u = -L * T.x, l = t + L * (1 - T.x), f = -S * T.y, d = e + S * (1 - T.y), !w.x && L > 0 || !w.y && S > 0) {
+          const E = w.x && L > 0 ? u : 0, b = w.x && L > 0 ? l : t, I = w.y && S > 0 ? f : 0, k = w.y && S > 0 ? d : e;
+          this.scissorViewport = {
+            x: E,
+            y: I,
+            width: b - E,
+            height: k - I
+          };
+        }
+        break;
+      }
+    }
+    switch (m) {
+      case Q.Viewport:
+        s.canvas.width = t, s.canvas.height = e, s.canvas.style.imageRendering = "pixelated", s.gl.viewport(0, 0, t, e);
+        break;
+      default:
+      case Q.CanvasItem:
+        s.canvas.width = s.physicsWidth, s.canvas.height = s.physicsHeight, s.canvas.style.imageRendering = "auto", s.gl.viewport(
+          0,
+          0,
+          s.physicsWidth,
+          s.physicsHeight
+        );
+        break;
+    }
+    this.viewLeft = u, this.viewRight = l, this.viewTop = f, this.viewBottom = d, this.updateProjection(), this.restoreViewportScissor(), this.updateResolution(m);
+  }
+  updateResolution(t) {
+    let e = 1;
+    const r = this.rapid.texture;
+    if (t !== Q.Viewport) {
+      const i = this.viewRight - this.viewLeft, s = this.viewBottom - this.viewTop;
+      e = Math.max(
+        this.rapid.physicsWidth / i,
+        this.rapid.physicsHeight / s
+      );
+    }
+    e != this.resolution && (this.resolution = e, r.texture.forEach((i) => i.updateResolution()));
+  }
+  updateProjection() {
+    this.rapid.updateProjection(
+      this.viewLeft,
+      this.viewRight,
+      this.viewBottom,
+      this.viewTop
+    );
+  }
+  updateOrthMatrix(t, e, r, i, s) {
+    t[0] = 2 / (r - e), t[1] = 0, t[2] = 0, t[3] = 0, t[4] = 0, t[5] = 2 / (s - i), t[6] = 0, t[7] = 0, t[8] = 0, t[9] = 0, t[10] = -1, t[11] = 0, t[12] = -(r + e) / (r - e), t[13] = -(s + i) / (s - i), t[14] = 0, t[15] = 1;
+  }
+  applyCamera(t) {
+    const e = this.rapid, r = e.matrix, i = e.matrixStack, s = this.scissorViewport && e.gl.getParameter(e.gl.FRAMEBUFFER_BINDING) === null ? this.scissorViewport : null, a = s?.width ?? this.viewRight - this.viewLeft, o = s?.height ?? this.viewBottom - this.viewTop, h = s ? s.x + a / 2 : (this.viewLeft + this.viewRight) / 2, c = s ? s.y + o / 2 : (this.viewTop + this.viewBottom) / 2, u = i.curWorldM, l = r.temporary, d = r.applyTransform(t, 0, 0);
+    r.setMatrix(l, d), r.clampBounds(
+      l,
+      a,
+      o,
+      t.limitLeft,
+      t.limitRight,
+      t.limitTop,
+      t.limitBottom
+    ), i.translate(h, c), r.invert(l), r.multiplyOut(u, u, l);
+  }
+  startScissor(t, e, r, i) {
+    const s = this.rapid;
+    s.flush();
+    const a = s.gl, o = this.scissorViewport;
+    if (o && a.getParameter(a.FRAMEBUFFER_BINDING) === null) {
+      const P = Math.max(Math.min(t, t + r), o.x), O = Math.min(Math.max(t, t + r), o.x + o.width), L = Math.max(Math.min(e, e + i), o.y), S = Math.min(
+        Math.max(e, e + i),
+        o.y + o.height
+      );
+      t = P, e = L, r = Math.max(0, O - P), i = Math.max(0, S - L);
+    }
+    const [h, c, u, l] = a.getParameter(
+      a.VIEWPORT
+    ), d = s.projection, f = h + (d[0] * t + d[12] + 1) * u / 2, m = h + (d[0] * (t + r) + d[12] + 1) * u / 2, x = c + (d[5] * e + d[13] + 1) * l / 2, y = c + (d[5] * (e + i) + d[13] + 1) * l / 2, v = Math.round(Math.min(f, m)), T = Math.round(Math.max(f, m)), w = Math.round(Math.min(x, y)), U = Math.round(Math.max(x, y));
+    a.enable(a.SCISSOR_TEST), a.scissor(v, w, T - v, U - w);
+  }
+  restoreViewportScissor() {
+    this.rapid.flush();
+    const t = this.rapid.gl, e = this.scissorViewport;
+    e && t.getParameter(t.FRAMEBUFFER_BINDING) === null ? this.startScissor(e.x, e.y, e.width, e.height) : t.disable(t.SCISSOR_TEST);
+  }
+  endScissor() {
+    this.restoreViewportScissor();
   }
 }
-var Rt = /* @__PURE__ */ ((n) => (n[n.EQUAL = 0] = "EQUAL", n[n.NOT_EQUAL = 1] = "NOT_EQUAL", n))(Rt || {}), ue = /* @__PURE__ */ ((n) => (n[n.NORMAL = 0] = "NORMAL", n[n.ADD = 1] = "ADD", n[n.MULTIPLY = 2] = "MULTIPLY", n[n.SCREEN = 3] = "SCREEN", n[n.ERASE = 4] = "ERASE", n))(ue || {}), le = /* @__PURE__ */ ((n) => (n[n.CanvasItem = 0] = "CanvasItem", n[n.Viewport = 1] = "Viewport", n))(le || {});
-class pe {
+var St = /* @__PURE__ */ ((n) => (n[n.EQUAL = 0] = "EQUAL", n[n.NOT_EQUAL = 1] = "NOT_EQUAL", n))(St || {}), xe = /* @__PURE__ */ ((n) => (n[n.NORMAL = 0] = "NORMAL", n[n.ADD = 1] = "ADD", n[n.MULTIPLY = 2] = "MULTIPLY", n[n.SCREEN = 3] = "SCREEN", n[n.ERASE = 4] = "ERASE", n))(xe || {}), Q = /* @__PURE__ */ ((n) => (n[n.CanvasItem = 0] = "CanvasItem", n[n.Viewport = 1] = "Viewport", n))(Q || {});
+class we {
   gl;
   canvas;
   projection = new Float32Array(16);
   projectionDirty = !0;
   dpr;
-  backgroundColor = m.Black;
+  backgroundColor = g.Black;
   logicWidth = 0;
   logicHeight = 0;
   physicsWidth = 0;
   physicsHeight = 0;
   currentRegion = null;
   maxTextureUnits = 0;
-  matrixStack = new kt(this);
+  matrixStack = new Ht(this);
   matrix;
   spriteRegion;
   graphicRegion;
   atlasSpriteRegion;
   particleRegion;
+  regions;
   drawcallCount = 0;
   inCreateMask = !1;
   texture;
@@ -2145,9 +2306,9 @@ class pe {
   antialias;
   roundPixels;
   textureFilter;
-  scaleMode;
+  viewport;
   _filterRT = [null, null];
-  _filterInput = new F();
+  _filterInput = new W();
   get height() {
     return this.logicHeight;
   }
@@ -2155,38 +2316,41 @@ class pe {
     return this.logicWidth;
   }
   constructor(t) {
-    this.canvas = t.canvas, this.dpr = window.devicePixelRatio || 1, this.antialias = t.antialias ?? !1, this.textureFilter = t.textureFilter ?? Q.NEAREST, this.premultipliedAlpha = t.premultipliedAlpha ?? !0, this.roundPixels = t.roundPixels ?? !1, this.scaleMode = t.scaleMode ?? 0;
-    const e = Lt(this.canvas, this.antialias, this.premultipliedAlpha);
-    this.gl = e, this.maxTextureUnits = e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS), this.matrix = this.matrixStack.matrix, this.spriteRegion = new lt(this), this.graphicRegion = new Yt(this), this.atlasSpriteRegion = new ne(this), this.particleRegion = new ce(this);
-    const r = this.canvas.clientWidth || this.canvas.width, i = this.canvas.clientHeight || this.canvas.height;
-    this.physicsWidth = t.physicsWidth || Math.round(r * this.dpr), this.physicsHeight = t.physicsHeight || Math.round(i * this.dpr), this.logicWidth = t.logicWidth || t.width || this.physicsWidth / this.dpr, this.logicHeight = t.logicHeight || t.height || this.physicsHeight / this.dpr, this.resize(this.logicWidth, this.logicHeight, this.physicsWidth, this.physicsHeight), this.texture = new bt(this), t.backgroundColor && (this.backgroundColor = t.backgroundColor), e.enable(e.BLEND), this.premultipliedAlpha ? e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA) : e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA), e.enable(e.STENCIL_TEST), e.stencilFunc(e.ALWAYS, 1, 255), e.stencilOp(e.KEEP, e.KEEP, e.KEEP);
+    this.canvas = t.canvas, this.dpr = window.devicePixelRatio || 1, this.antialias = t.antialias ?? !1, this.textureFilter = t.textureFilter ?? it.NEAREST, this.premultipliedAlpha = t.premultipliedAlpha ?? !0, this.roundPixels = t.roundPixels ?? !1;
+    const e = Nt(this.canvas, this.antialias, this.premultipliedAlpha);
+    this.gl = e, this.maxTextureUnits = e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS), this.matrix = this.matrixStack.matrix, this.spriteRegion = new dt(this), this.graphicRegion = new $t(this), this.atlasSpriteRegion = new oe(this), this.particleRegion = new le(this), this.viewport = new me(this, t.window), this.texture = new Ct(this), this.regions = [
+      this.spriteRegion,
+      this.atlasSpriteRegion
+    ];
+    const r = this.canvas.clientWidth ?? this.canvas.width, i = this.canvas.clientHeight ?? this.canvas.height;
+    this.physicsWidth = t.physicsWidth ?? Math.round(r * this.dpr), this.physicsHeight = t.physicsHeight ?? Math.round(i * this.dpr), this.logicWidth = t.width ?? this.physicsWidth / this.dpr, this.logicHeight = t.height ?? this.physicsHeight / this.dpr, this.resize(this.logicWidth, this.logicHeight, this.physicsWidth, this.physicsHeight), t.backgroundColor && (this.backgroundColor = t.backgroundColor), e.enable(e.BLEND), this.premultipliedAlpha ? e.blendFunc(e.ONE, e.ONE_MINUS_SRC_ALPHA) : e.blendFunc(e.SRC_ALPHA, e.ONE_MINUS_SRC_ALPHA), e.enable(e.STENCIL_TEST), e.stencilFunc(e.ALWAYS, 1, 255), e.stencilOp(e.KEEP, e.KEEP, e.KEEP);
   }
   setTextureFilter(t) {
     this.textureFilter = t;
   }
   getColorUint32(t) {
-    return Qt(this.premultipliedAlpha, t);
+    return Jt(this.premultipliedAlpha, t);
   }
   enterRegion(t, e) {
     this.currentRegion === t && this.currentRegion.isSameShader(e) || (this.flush(), this.currentRegion = t, t.enter(e));
   }
   drawParticles(t) {
-    te(this, t);
+    re(this, t);
   }
   drawSprite(t) {
-    Jt(this, t);
+    ee(this, t);
   }
   drawLine(t) {
-    ee(this, t);
+    ie(this, t);
   }
   drawGraphic(t) {
     Mt(this, t);
   }
   drawRect(t) {
-    ie(this, t);
+    ne(this, t);
   }
   drawCircle(t) {
-    se(this, t);
+    ae(this, t);
   }
   startGraphic(t = this.gl.TRIANGLES, e, r, i) {
     this.enterRegion(this.graphicRegion, r), this.graphicRegion.startGraphic(i ?? this.matrixStack.curWorldM, t, e);
@@ -2195,7 +2359,7 @@ class pe {
     this.startGraphic(t, e, this.graphicRegion.maskShader, r);
   }
   drawMaskImage(t) {
-    re(this, t);
+    se(this, t);
   }
   addRectVertex(t, e, r) {
     const i = this.getColorUint32(r);
@@ -2204,8 +2368,8 @@ class pe {
   addCircleVertex(t, e, r = 32) {
     const i = Math.PI * 2 / r, s = this.getColorUint32(e);
     for (let a = 0; a < r; a++) {
-      const h = i * a, o = Math.cos(h) * t, c = Math.sin(h) * t, u = 0.5 + Math.cos(h) * 0.5, l = 0.5 + Math.sin(h) * 0.5;
-      this.addGraphicVertex(o, c, u, l, s);
+      const o = i * a, h = Math.cos(o) * t, c = Math.sin(o) * t, u = 0.5 + Math.cos(o) * 0.5, l = 0.5 + Math.sin(o) * 0.5;
+      this.addGraphicVertex(h, c, u, l, s);
     }
   }
   addGraphicVertex(t, e, r = 0, i = 0, s = 4294967295) {
@@ -2215,29 +2379,14 @@ class pe {
     this.graphicRegion.endGraphic();
   }
   resize(t, e, r, i) {
-    this.flush();
-    const s = r ?? this.canvas.clientWidth ?? this.canvas.width, a = i ?? this.canvas.clientHeight ?? this.canvas.height;
-    switch (r !== void 0 && (this.canvas.style.width = s + "px"), i !== void 0 && (this.canvas.style.height = a + "px"), this.physicsWidth = s * this.dpr, this.physicsHeight = a * this.dpr, this.logicWidth = t, this.logicHeight = e, this.scaleMode) {
-      case 1:
-        this.canvas.width = t, this.canvas.height = e, this.canvas.style.imageRendering = "pixelated", this.gl.viewport(0, 0, t, e);
-        break;
-      case 0:
-        this.canvas.width = this.physicsWidth, this.canvas.height = this.physicsHeight, this.canvas.style.imageRendering = "auto", this.gl.viewport(0, 0, this.physicsWidth, this.physicsHeight);
-        break;
-      default:
-        throw new Error("scaleMode can only be CanvasScaleMode.Viewport or CanvasScaleMode.CanvasItem");
-    }
-    this.updateProjection(0, this.logicWidth, this.logicHeight, 0);
+    this.viewport.resize(t, e, r, i);
   }
   updateProjection(t, e, r, i) {
-    this.updateOrthMatrix(this.projection, t, e, r, i), this.projectionDirty = !0;
+    this.viewport.updateOrthMatrix(this.projection, t, e, r, i), this.projectionDirty = !0;
   }
   clear() {
     const t = this.gl;
-    this.backgroundColor.setClearColor(t), t.clear(t.COLOR_BUFFER_BIT | t.STENCIL_BUFFER_BIT), this.drawcallCount = 0, this.matrixStack.reset();
-  }
-  updateOrthMatrix(t, e, r, i, s) {
-    t[0] = 2 / (r - e), t[1] = 0, t[2] = 0, t[3] = 0, t[4] = 0, t[5] = 2 / (s - i), t[6] = 0, t[7] = 0, t[8] = 0, t[9] = 0, t[10] = -1, t[11] = 0, t[12] = -(r + e) / (r - e), t[13] = -(s + i) / (s - i), t[14] = 0, t[15] = 1;
+    this.flush(), t.disable(t.SCISSOR_TEST), this.viewport.scissorViewport && t.getParameter(t.FRAMEBUFFER_BINDING) === null ? (t.clearColor(0, 0, 0, 1), t.clear(t.COLOR_BUFFER_BIT | t.STENCIL_BUFFER_BIT), this.backgroundColor.setClearColor(t, this.premultipliedAlpha), this.viewport.restoreViewportScissor(), t.clear(t.COLOR_BUFFER_BIT)) : (this.backgroundColor.setClearColor(t, this.premultipliedAlpha), t.clear(t.COLOR_BUFFER_BIT | t.STENCIL_BUFFER_BIT)), this.drawcallCount = 0, this.matrixStack.reset();
   }
   flush() {
     this.currentRegion && (this.currentRegion.exit(), this.currentRegion = null);
@@ -2248,33 +2397,33 @@ class pe {
     const r = Math.max(...e.map((c) => c.padding)), i = r, s = t.rawWidth + r * 2, a = t.rawHeight + r * 2;
     for (let c = 0; c < 2; c++)
       this._filterRT[c] ? this._filterRT[c].resize(s, a) : this._filterRT[c] = this.texture.createRenderTexture({ width: s, height: a });
-    let h = t.clone(this._filterInput), o = 0;
+    let o = t.clone(this._filterInput), h = 0;
     this.matrixStack.save(), this.matrixStack.identity();
     for (let c = 0; c < e.length; c++) {
-      const u = this._filterRT[o % 2];
+      const u = this._filterRT[h % 2];
       u.offsetX = 0, u.offsetY = 0, this.enterRenderTexture(u), this.clearRenderTexture(), this.drawSprite({
-        texture: h,
+        texture: o,
         shader: e[c],
         offsetX: c == 0 ? i : 0,
         // padding back
         offsetY: c == 0 ? i : 0,
         padding: r
-      }), this.leaveRenderTexture(), h = u, o++;
+      }), this.leaveRenderTexture(), o = u, h++;
     }
-    return this.matrixStack.restore(), h.offsetX = -i, h.offsetY = -i, h;
+    return this.matrixStack.restore(), o.offsetX = -i, o.offsetY = -i, o;
   }
   enterRenderTexture(t) {
-    this.flush(), t.activate(), this.gl.viewport(0, 0, t.rawWidth, t.rawHeight), this.updateProjection(0, t.rawWidth, 0, t.rawHeight);
+    this.flush(), t.activate(), this.viewport.restoreViewportScissor(), this.gl.viewport(0, 0, t.rawWidth, t.rawHeight), this.updateProjection(0, t.rawWidth, 0, t.rawHeight);
   }
-  clearRenderTexture(t = new m(0, 0, 0, 0)) {
+  clearRenderTexture(t = new g(0, 0, 0, 0)) {
     this.flush();
     const e = this.gl;
-    t.setClearColor(e), e.clear(e.COLOR_BUFFER_BIT);
+    t.setClearColor(e, this.premultipliedAlpha), e.clear(e.COLOR_BUFFER_BIT);
   }
   leaveRenderTexture() {
-    this.flush(), this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null), this.gl.viewport(0, 0, this.physicsWidth, this.physicsHeight), this.updateProjection(0, this.logicWidth, this.logicHeight, 0);
+    this.flush(), this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null), this.gl.viewport(0, 0, this.canvas.width, this.canvas.height), this.viewport.updateProjection(), this.viewport.restoreViewportScissor();
   }
-  drawToRenderTexture(t, e, r = new m(0, 0, 0, 0)) {
+  drawToRenderTexture(t, e, r = new g(0, 0, 0, 0)) {
     this.enterRenderTexture(t);
     try {
       r !== null && this.clearRenderTexture(r), e();
@@ -2370,26 +2519,22 @@ class pe {
     }
   }
   startScissor(t, e, r, i) {
-    this.flush();
-    const s = this.gl, a = this.physicsWidth / this.logicWidth, h = this.physicsHeight / this.logicHeight, o = Math.round(t * a), c = Math.round(this.physicsHeight - (e + i) * h), u = Math.round(r * a), l = Math.round(i * h);
-    s.enable(s.SCISSOR_TEST), s.scissor(o, c, u, l);
+    this.viewport.startScissor(t, e, r, i);
   }
   endScissor() {
-    this.flush(), this.gl.disable(this.gl.SCISSOR_TEST);
+    this.viewport.endScissor();
   }
   applyCamera(t) {
-    this.matrixStack.applyTransform(t);
-    const e = this.matrixStack.curWorldM;
-    this.matrix.invert(e);
+    this.viewport.applyCamera(t);
   }
   logicToPhysics(t) {
-    return t.multiply(new g(
+    return t.multiply(new p(
       this.physicsWidth / this.logicWidth,
       this.physicsHeight / this.logicHeight
     ));
   }
   physicsToLogic(t) {
-    return t.multiply(new g(
+    return t.multiply(new p(
       this.logicWidth / this.physicsWidth,
       this.logicHeight / this.physicsHeight
     ));
@@ -2409,10 +2554,10 @@ class pe {
     return this.matrix.toCSSMatrix(t ?? this.matrixStack.curWorldM, e, r);
   }
 }
-function de(n) {
-  return !(n === null || typeof n != "object" || Array.isArray(n) || n instanceof g || n instanceof m);
+function pe(n) {
+  return !(n === null || typeof n != "object" || Array.isArray(n) || n instanceof p || n instanceof g);
 }
-class N {
+class D {
   static float(t, e) {
     return Math.random() * (e - t) + t;
   }
@@ -2423,18 +2568,18 @@ class N {
     return Math.random() * Math.PI * 2;
   }
   static vector(t, e, r, i) {
-    return new g(N.float(t, e), N.float(r, i));
+    return new p(D.float(t, e), D.float(r, i));
   }
   static randomColor(t, e) {
-    return new m(
-      N.float(t.r, e.r),
-      N.float(t.g, e.g),
-      N.float(t.b, e.b),
-      N.float(t.a, e.a)
+    return new g(
+      D.float(t.r, e.r),
+      D.float(t.g, e.g),
+      D.float(t.b, e.b),
+      D.float(t.a, e.a)
     );
   }
   static pick(t) {
-    return t[N.int(0, t.length - 1)];
+    return t[D.int(0, t.length - 1)];
   }
   static pickWeight(t) {
     if (!t || t.length === 0) return null;
@@ -2450,27 +2595,27 @@ class N {
     if (Array.isArray(t)) {
       const [r, i] = t;
       if (typeof r == "number")
-        return N.float(r, i);
+        return D.float(r, i);
+      if (r instanceof p)
+        return D.vector(r.x, i.x, r.y, i.y);
       if (r instanceof g)
-        return N.vector(r.x, i.x, r.y, i.y);
-      if (r instanceof m)
-        return N.randomColor(r, i);
+        return D.randomColor(r, i);
     }
     return typeof t == "number" ? t : t.clone();
   }
 }
-const J = (n, t) => (Array.isArray(n) ? n : [n]).slice(0, t);
-var fe = /* @__PURE__ */ ((n) => (n.POINT = "point", n.CIRCLE = "circle", n.RECT = "rect", n))(fe || {});
-const gt = 10, pt = 0, vt = !0;
-class j {
+const et = (n, t) => (Array.isArray(n) ? n : [n]).slice(0, t);
+var ge = /* @__PURE__ */ ((n) => (n.POINT = "point", n.CIRCLE = "circle", n.RECT = "rect", n))(ge || {});
+const vt = 10, yt = 0, Tt = !0;
+class q {
   components;
   constructor(t = 1) {
     if (!Number.isInteger(t) || t <= 0)
       throw new RangeError("ParticleAttributeStore size must be a positive integer");
     this.components = Array.from({ length: t }, () => ({
-      value: new b(A.Float32),
-      delta: new b(A.Float32),
-      damping: new b(A.Float32)
+      value: new _(C.Float32),
+      delta: new _(C.Float32),
+      damping: new _(C.Float32)
     }));
   }
   getArrayBuffer() {
@@ -2487,7 +2632,7 @@ class j {
   getComponent(t, e) {
     if (typeof t == "number")
       return t;
-    if (t instanceof g)
+    if (t instanceof p)
       return e === 0 ? t.x : t.y;
     switch (e) {
       case 0:
@@ -2503,47 +2648,47 @@ class j {
     }
   }
   resolveComponent(t, e, r) {
-    return t === void 0 ? r : Array.isArray(t) ? N.float(
+    return t === void 0 ? r : Array.isArray(t) ? D.float(
       this.getComponent(t[0], e),
       this.getComponent(t[1], e)
     ) : this.getComponent(t, e);
   }
   create(t, e, r = 1) {
-    const i = de(t) ? t : void 0, s = i === void 0 ? t : void 0, a = r > 0 ? r : 1;
-    let h = 0;
-    for (let o = 0; o < this.components.length; o++) {
-      const { value: c, delta: u, damping: l } = this.components[o], f = this.getComponent(e, o), d = s === void 0 ? this.resolveComponent(i?.start, o, f) : this.getComponent(s, o), x = i?.end === void 0 ? d : this.resolveComponent(i.end, o, f);
-      c.push(d), u.push(i?.delta === void 0 ? (x - d) / a : this.getComponent(i.delta, o)), l.push(i?.damping ?? 1), o === 0 && (h = d);
+    const i = pe(t) ? t : void 0, s = i === void 0 ? t : void 0, a = r > 0 ? r : 1;
+    let o = 0;
+    for (let h = 0; h < this.components.length; h++) {
+      const { value: c, delta: u, damping: l } = this.components[h], d = this.getComponent(e, h), f = s === void 0 ? this.resolveComponent(i?.start, h, d) : this.getComponent(s, h), m = i?.end === void 0 ? f : this.resolveComponent(i.end, h, d);
+      c.push(f), u.push(i?.delta === void 0 ? (m - f) / a : this.getComponent(i.delta, h)), l.push(i?.damping ?? 1), h === 0 && (o = f);
     }
-    return h;
+    return o;
   }
 }
-class wt {
+class At {
   options;
   emitting = !1;
   emitTimer = 0;
-  emitRate = gt;
-  emitTime = pt;
+  emitRate = vt;
+  emitTime = yt;
   emitTimeCounter = 0;
-  localSpace = vt;
+  localSpace = Tt;
   rapid;
-  x = new b(A.Float32);
-  y = new b(A.Float32);
-  scaleX = new b(A.Float32);
-  scaleY = new b(A.Float32);
-  rotation = new b(A.Float32);
-  color = new b(A.Uint32);
-  remainingLife = new b(A.Float32);
+  x = new _(C.Float32);
+  y = new _(C.Float32);
+  scaleX = new _(C.Float32);
+  scaleY = new _(C.Float32);
+  rotation = new _(C.Float32);
+  color = new _(C.Uint32);
+  remainingLife = new _(C.Float32);
   animations = {
-    speed: new j(),
-    rotation: new j(),
-    scale: new j(),
-    color: new j(4),
-    velocity: new j(2)
+    speed: new q(),
+    rotation: new q(),
+    scale: new q(),
+    color: new q(4),
+    velocity: new q(2)
   };
   count = 0;
   constructor(t, e) {
-    this.rapid = t, this.options = e, this.emitRate = e.emitRate ?? gt, this.emitTime = e.emitTime ?? pt, this.localSpace = e.localSpace ?? vt;
+    this.rapid = t, this.options = e, this.emitRate = e.emitRate ?? vt, this.emitTime = e.emitTime ?? yt, this.localSpace = e.localSpace ?? Tt;
   }
   getAllArrayBuffer() {
     return [
@@ -2561,7 +2706,7 @@ class wt {
     this.options.texture = t;
   }
   clone() {
-    return new wt(this.rapid, { ...this.options });
+    return new At(this.rapid, { ...this.options });
   }
   setEmitRate(t) {
     this.emitRate = t;
@@ -2586,7 +2731,7 @@ class wt {
       this.createParticle();
   }
   createParticle() {
-    const t = N.scalarOrRange(this.options.life, 1);
+    const t = D.scalarOrRange(this.options.life, 1);
     this.remainingLife.push(t);
     let e = 0, r = 0;
     switch (this.options.emitShape) {
@@ -2607,8 +2752,8 @@ class wt {
       const { x: c, y: u } = i.localToWorld(e, r);
       this.x.push(c), this.y.push(u);
     }
-    const s = this.options.animation, a = this.animations, h = a.scale.create(s.scale, 1, t), o = a.rotation.create(s.rotation, 0, t);
-    a.speed.create(s.speed, 0, t), a.velocity.create(s.velocity, g.ZERO, t), a.color.create(s.color, m.White, t), this.rotation.push(o), this.scaleX.push(h), this.scaleY.push(h), this.color.pushUint32(m.packColor(
+    const s = this.options.animation, a = this.animations, o = a.scale.create(s.scale, 1, t), h = a.rotation.create(s.rotation, 0, t);
+    a.speed.create(s.speed, 0, t), a.velocity.create(s.velocity, p.ZERO, t), a.color.create(s.color, g.White, t), this.rotation.push(h), this.scaleX.push(o), this.scaleY.push(o), this.color.pushUint32(g.packColor(
       a.color.get(this.count, 0),
       a.color.get(this.count, 1),
       a.color.get(this.count, 2),
@@ -2629,7 +2774,7 @@ class wt {
         r > 0 && (this.emit(r), this.emitTimer -= r / this.emitRate);
       }
     const e = this.updateParticle(t);
-    this.count -= e.length, b.removeAtIndices(e, this.getAllArrayBuffer());
+    this.count -= e.length, _.removeAtIndices(e, this.getAllArrayBuffer());
   }
   updateParticle(t) {
     const e = [], r = this.animations;
@@ -2639,34 +2784,38 @@ class wt {
         e.push(i);
         continue;
       }
-      const s = r.rotation.get(i), a = r.scale.get(i), h = r.speed.get(i);
-      this.rotation.typedArray[i] = s, this.scaleX.typedArray[i] = a, this.scaleY.typedArray[i] = a, this.color.uint32[i] = m.packColor(
+      const s = r.rotation.get(i), a = r.scale.get(i), o = r.speed.get(i);
+      this.rotation.typedArray[i] = s, this.scaleX.typedArray[i] = a, this.scaleY.typedArray[i] = a, this.color.uint32[i] = g.packColor(
         r.color.get(i, 0),
         r.color.get(i, 1),
         r.color.get(i, 2),
         r.color.get(i, 3),
         this.rapid.premultipliedAlpha
-      ), this.x.typedArray[i] += (h * Math.cos(s) + r.velocity.get(i, 0)) * t, this.y.typedArray[i] += (h * Math.sin(s) + r.velocity.get(i, 1)) * t;
+      ), this.x.typedArray[i] += (o * Math.cos(s) + r.velocity.get(i, 0)) * t, this.y.typedArray[i] += (o * Math.sin(s) + r.velocity.get(i, 1)) * t;
     }
     return e;
   }
-  render() {
-    const t = this.options, e = this.localSpace ? void 0 : this.rapid.matrix.alloc();
-    this.rapid.drawParticles({
-      texture: t.texture,
-      shader: t.shader,
-      x: this.x.typedArray,
-      y: this.y.typedArray,
-      scaleX: this.scaleX.typedArray,
-      scaleY: this.scaleY.typedArray,
-      rotation: this.rotation.typedArray,
-      color: this.color.typedArray,
-      count: this.count,
-      reverseOrder: !0,
-      originX: t.origin?.x ?? 0.5,
-      originY: t.origin?.y ?? 0.5,
-      customMatrix: e
-    });
+  render(t) {
+    const e = this.options, r = t ?? (this.localSpace ? void 0 : this.rapid.matrix.alloc());
+    try {
+      this.rapid.drawParticles({
+        texture: e.texture,
+        shader: e.shader,
+        x: this.x.typedArray,
+        y: this.y.typedArray,
+        scaleX: this.scaleX.typedArray,
+        scaleY: this.scaleY.typedArray,
+        rotation: this.rotation.typedArray,
+        color: this.color.typedArray,
+        count: this.count,
+        reverseOrder: !0,
+        originX: e.origin?.x ?? 0.5,
+        originY: e.origin?.y ?? 0.5,
+        customMatrix: r
+      });
+    } finally {
+      t === void 0 && r !== void 0 && !this.localSpace && this.rapid.matrix.free(r);
+    }
   }
   isActive() {
     return this.emitting || this.count > 0;
@@ -2675,12 +2824,10 @@ class wt {
     this.emit(this.emitRate);
   }
 }
-const me = `
+const ve = `
 uniform mediump int uLightTextureId[%TEXTURE_NUM%];
 
 uniform sampler2D uNormalMap;
-uniform vec2 uResolution;
-uniform vec2 uLogicalResolution;
 uniform mediump int uLightCount;
 uniform vec4 uLightColor[%TEXTURE_NUM%];
 uniform mat3x2 uLightMatrix[%TEXTURE_NUM%];
@@ -2690,10 +2837,12 @@ uniform float uRoughness;
 uniform vec3 uAmbientColor;
 uniform vec2 uNormalScale;
 
+in vec2 light_worldPos;
+
 void light_fragment(inout vec4 color, in vec2 vRegion) {
     if (color.a < 0.005) return;
 
-    vec2 worldPos = vec2(gl_FragCoord.x, uResolution.y - gl_FragCoord.y) * (uLogicalResolution / uResolution);
+    vec2 worldPos = light_worldPos;
     vec3 normal = normalize(texture(uNormalMap, vRegion).rgb * 2.0 - 1.0);
     normal = normalize(normal * vec3(uNormalScale, 1.0));
 
@@ -2728,8 +2877,13 @@ void light_fragment(inout vec4 color, in vec2 vRegion) {
 
     color.rgb = color.rgb * (uAmbientColor + totalDiffuse) + totalSpecular;
 }
-`, xe = "void light_vertex(inout vec4 p, vec2 u) {}", tt = 8;
-class ge extends ct {
+`, ye = `out vec2 light_worldPos;
+
+void light_vertex(inout vec4 p, vec2 u) {
+    light_worldPos = p.xy;
+}
+`, rt = 8;
+class Te extends ut {
   constructor(t, e = "", r = "", i = 0, s) {
     super(
       t,
@@ -2737,25 +2891,28 @@ class ge extends ct {
       r,
       i + 2,
       s
-    ), this.prefix.push("light_");
+    );
+  }
+  beforePreCompile() {
+    this.prefix.push("light_");
   }
   getGLShader(t, e, r, i) {
-    const s = K(me, t.getMaxTexutreUnit(this), "layer", "lightUV", "lightTex = ");
-    return i = this.replaceCustomCode(i, s), r = this.replaceCustomCode(r, xe), super.getGLShader(t, e, r, i);
+    const s = Z(ve, t.getMaxTexutreUnit(this), "layer", "lightUV", "lightTex = ");
+    return i = this.replaceCustomCode(i, s), r = this.replaceCustomCode(r, ye), super.getGLShader(t, e, r, i);
   }
 }
-class ve {
+class Ee {
   shader;
   rapid;
   rt;
   constructor(t) {
-    this.rapid = t, this.shader = new ge(t), this.rt = t.texture.createRenderTexture({ width: 0, height: 0 });
+    this.rapid = t, this.shader = new Te(t), this.rt = t.texture.createRenderTexture({ width: 0, height: 0 });
   }
   lightShadow(t, e, r) {
     if (r.length === 0) return;
-    const i = this.rapid, s = typeof e == "number" ? e : e.world, a = new g(t.rawWidth * 0.5, t.rawHeight * 0.5), h = r.map((c) => {
+    const i = this.rapid, s = typeof e == "number" ? e : e.world, a = new p(t.rawWidth * 0.5, t.rawHeight * 0.5), o = r.map((c) => {
       const u = i.matrixStack.localToWorld(c.x, c.y), l = i.matrix.worldToLocal(s, u.x, u.y);
-      return new g(
+      return new p(
         // 要把LightTexture的基向量转化为RenderTexture的坐标
         // 纹理是从左上角开始的，所以要 + 0.5
         (l.x + 0.5) * t.rawWidth,
@@ -2763,36 +2920,39 @@ class ve {
       );
     });
     this.rt.resize(t.rawWidth, t.rawHeight);
-    const o = Math.hypot(t.rawWidth, t.rawHeight) * 0.5 * 1.05;
+    const h = Math.hypot(t.rawWidth, t.rawHeight) * 0.5 * 1.05;
     return i.drawToRenderTexture(this.rt, () => {
-      i.withMask(() => {
-        i.startMaskGraphic(i.gl.TRIANGLES);
-        for (let c = 0; c < h.length; c++) {
-          const u = h[c], l = h[(c + 1) % h.length], f = u.subtract(a).normalized(), d = l.subtract(a).normalized(), x = Math.max(-0.999, Math.min(1, f.dot(d))), p = Math.sqrt((1 + x) * 0.5), y = o / p, v = a.add(f.multiply(y)), E = a.add(d.multiply(y));
-          i.addGraphicVertex(u.x, u.y), i.addGraphicVertex(l.x, l.y), i.addGraphicVertex(E.x, E.y), i.addGraphicVertex(u.x, u.y), i.addGraphicVertex(E.x, E.y), i.addGraphicVertex(v.x, v.y);
-        }
-        i.endGraphic();
-      }, () => {
-        i.drawSprite({ texture: t });
-      }, Rt.NOT_EQUAL);
+      i.matrixStack.save(), i.matrixStack.identity();
+      try {
+        i.withMask(() => {
+          i.startMaskGraphic(i.gl.TRIANGLES);
+          for (let c = 0; c < o.length; c++) {
+            const u = o[c], l = o[(c + 1) % o.length], d = u.subtract(a).normalized(), f = l.subtract(a).normalized(), m = Math.max(-0.999, Math.min(1, d.dot(f))), x = Math.sqrt((1 + m) * 0.5), y = h / x, v = a.add(d.multiply(y)), T = a.add(f.multiply(y));
+            i.addGraphicVertex(u.x, u.y), i.addGraphicVertex(l.x, l.y), i.addGraphicVertex(T.x, T.y), i.addGraphicVertex(u.x, u.y), i.addGraphicVertex(T.x, T.y), i.addGraphicVertex(v.x, v.y);
+          }
+          i.endGraphic();
+        }, () => {
+          i.drawSprite({ texture: t });
+        }, St.NOT_EQUAL);
+      } finally {
+        i.matrixStack.restore();
+      }
     }), this.rt;
   }
   setupLight(t) {
-    const e = t.customShader ?? this.shader, r = J(t.lightMatrix, tt), i = J(t.color, tt), s = J(t.lightHeight, tt), a = J(t.lightTexture, tt);
+    const e = t.customShader ?? this.shader, r = et(t.lightMatrix, rt), i = et(t.color, rt), s = et(t.lightHeight, rt), a = et(t.lightTexture, rt);
     return e.setUniforms({
-      uResolution: [this.rapid.physicsWidth, this.rapid.physicsHeight],
-      uLogicalResolution: [this.rapid.logicWidth, this.rapid.logicHeight],
       uNormalMap: t.normalMap.glTexture,
-      uLightTextureId: a.map((h) => h.glTexture),
+      uLightTextureId: a.map((o) => o.glTexture),
       uLightCount: r.length,
       uLightMatrix: Float32Array.from(r.flatMap(
-        (h) => Array.from(this.rapid.matrix.getMatrix(typeof h == "number" ? h : h.world))
+        (o) => Array.from(this.rapid.matrix.getMatrix(typeof o == "number" ? o : o.world))
       )),
-      uLightColor: Float32Array.from(r.flatMap((h, o) => {
-        const c = i[o] ?? i[0];
+      uLightColor: Float32Array.from(r.flatMap((o, h) => {
+        const c = i[h] ?? i[0];
         return c ? [c.r / 255, c.g / 255, c.b / 255, c.a / 255] : [1, 1, 1, 1];
       })),
-      uLightHeight: Float32Array.from(r.map((h, o) => s[o] ?? s[0] ?? 80)),
+      uLightHeight: Float32Array.from(r.map((o, h) => s[h] ?? s[0] ?? 80)),
       uMetallic: t.metallic ?? 0.8,
       uRoughness: t.roughness ?? 0.15,
       uAmbientColor: t.ambientColor ? [t.ambientColor.r / 255, t.ambientColor.g / 255, t.ambientColor.b / 255] : [0.1, 0.1, 0.15],
@@ -2801,37 +2961,39 @@ class ve {
   }
 }
 export {
-  X as BaseTexture,
-  ue as BlendMode,
-  le as CanvasScaleMode,
-  m as Color,
-  ct as CustomGlShader,
-  Tt as GLShader,
-  ve as Light,
-  ge as LightShader,
-  jt as LineTextureMode,
-  tt as MAX_LIGHTS,
-  Rt as MaskType,
-  wt as ParticleEmitter,
-  fe as ParticleShape,
-  pe as Rapid,
-  Ut as RenderTexture,
-  _t as TextTexture,
-  F as Texture,
-  Q as TextureFilterMode,
-  bt as TextureManager,
-  q as TextureWrapMode,
-  g as Vec2,
-  zt as composeProjectionWithAffine,
-  se as drawCircle,
+  z as BaseTexture,
+  xe as BlendMode,
+  Q as CanvasScaleMode,
+  g as Color,
+  ut as CustomGlShader,
+  de as ExpandMode,
+  Et as GLShader,
+  Ee as Light,
+  Te as LightShader,
+  qt as LineTextureMode,
+  rt as MAX_LIGHTS,
+  St as MaskType,
+  At as ParticleEmitter,
+  ge as ParticleShape,
+  we as Rapid,
+  _t as RenderTexture,
+  Lt as TextTexture,
+  W as Texture,
+  it as TextureFilterMode,
+  Ct as TextureManager,
+  J as TextureWrapMode,
+  p as Vec2,
+  me as ViewPort,
+  jt as composeProjectionWithAffine,
+  ae as drawCircle,
   Mt as drawGraphic,
-  ee as drawLine,
-  re as drawMaskImage,
-  te as drawParticles,
-  ie as drawRect,
-  Jt as drawSprite,
-  Qt as getColorUint32,
-  qt as getLineGeometry,
-  Kt as getLineNormal,
-  $t as multiplyMat4
+  ie as drawLine,
+  se as drawMaskImage,
+  re as drawParticles,
+  ne as drawRect,
+  ee as drawSprite,
+  Jt as getColorUint32,
+  Qt as getLineGeometry,
+  Zt as getLineNormal,
+  Kt as multiplyMat4
 };