@mirage-engine/core 0.1.0 → 0.2.1

package/dist/mirage-engine.js

@@ -1,71 +1,73 @@
 var k = Object.defineProperty;
-var I = (r, t, e) => t in r ? k(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
-var l = (r, t, e) => (I(r, typeof t != "symbol" ? t + "" : t, e), e);
+var q = (s, e, t) => e in s ? k(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var h = (s, e, t) => (q(s, typeof e != "symbol" ? e + "" : e, t), t);
 import * as d from "three";
-const T = 0, S = 1, B = 2, A = 4, M = 8, z = 16, D = 0, j = 29, F = 30, _ = [
+const S = 0, z = 1, L = 2, Y = 4, I = 8, _ = 16, x = 1, w = 2, ee = 0, W = [
   "include-tree",
   "exclude-tree",
   "include-self",
   "exclude-self",
   "end"
 ];
-function P(r, t, e) {
-  const i = t.split(`
-`), s = [];
-  return i.forEach((n) => {
-    const a = n.split(" ");
-    let o = a[0];
-    for (let h = 1; h < a.length; h++) {
-      const c = a[h];
-      r.measureText(o + " " + c).width < e ? o += " " + c : (s.push(o), o = c);
+function U(s, e, t) {
+  const r = e.split(`
+`), i = [];
+  return r.forEach((a) => {
+    const n = a.split(" ");
+    let o = n[0];
+    for (let l = 1; l < n.length; l++) {
+      const c = n[l];
+      s.measureText(o + " " + c).width < t ? o += " " + c : (i.push(o), o = c);
     }
-    s.push(o);
-  }), s;
+    i.push(o);
+  }), i;
 }
-function L(r, t, e, i, s = 2) {
-  const n = document.createElement("canvas"), a = n.getContext("2d");
-  if (!a)
+function N(s, e, t, r, i = 2) {
+  const a = document.createElement("canvas"), n = a.getContext("2d");
+  if (!n)
     throw new Error("[Mirage] Failed to create canvas context");
-  const h = (window.devicePixelRatio || 1) * s;
-  n.width = e * h, n.height = i * h, a.scale(h, h), a.font = t.font, a.fillStyle = t.color, a.textBaseline = "top", a.globalAlpha = 1;
-  const c = P(a, r, e), p = t.lineHeight;
-  c.forEach((y, w) => {
-    const b = w * p + 2;
-    let x = 0;
-    t.textAlign === "center" ? x = e / 2 : t.textAlign === "right" && (x = e), a.textAlign = t.textAlign, a.fillText(y, x, b);
+  const l = (window.devicePixelRatio || 1) * i;
+  a.width = t * l, a.height = r * l, n.scale(l, l), n.font = e.font, n.fillStyle = e.color, n.textBaseline = "top", n.globalAlpha = 1;
+  const c = U(n, s, t), m = e.lineHeight;
+  c.forEach((g, p) => {
+    const y = p * m + 2;
+    let v = 0;
+    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.fillText(g, v, y);
   });
-  const f = new d.CanvasTexture(n);
+  const f = new d.CanvasTexture(a);
   return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
 }
-function v(r) {
-  return typeof r == "number" ? r : parseFloat(r) || 0;
+function R(s) {
+  return typeof s == "number" ? s : parseFloat(s) || 0;
 }
-function X(r, t) {
-  var o, h, c, p;
-  if (!t) {
-    r.set(0, 0, 0, 0);
+function X(s, e) {
+  var o, l, c, m;
+  if (!e) {
+    s.set(0, 0, 0, 0);
     return;
   }
-  const e = t.split("/")[0].trim().split(/\s+/), i = v(e[0]), s = v((o = e[1]) != null ? o : e[0]), n = v((h = e[2]) != null ? h : e[0]), a = v((p = (c = e[3]) != null ? c : e[1]) != null ? p : e[0]);
-  r.set(i, s, n, a);
+  const t = e.split("/")[0].trim().split(/\s+/), r = R(t[0]), i = R((o = t[1]) != null ? o : t[0]), a = R((l = t[2]) != null ? l : t[0]), n = R((m = (c = t[3]) != null ? c : t[1]) != null ? m : t[0]);
+  s.set(r, i, a, n);
 }
-const Y = (
+const H = (
   /* glsl */
   `
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
 `
-), W = (
+), $ = (
   /* glsl */
   `
 
   varying vec2 vUv;
   
   uniform vec2 uSize;
-  uniform vec4 uRadius;
+  uniform vec4 uBorderRadius;
   uniform float uBorderWidth;
   uniform vec3 uBgColor;
   uniform vec3 uBorderColor;
@@ -73,121 +75,132 @@ const Y = (
   uniform float uBgOpacity;
   uniform float uBorderOpacity;
 
-  // SDF box
+  #INJECT_DECLARATIONS
+
   float sdRoundedBox(vec2 p, vec2 b, float r) {
     vec2 q = abs(p) - b + r;
-    // return length(max(q, 0.0)) - r;
+
     return min(max(q.x, q.y), 0.0) + length(max(q, 0.0)) - r;
   }
 
   void main() {
-    // uVu: (0.0, 0.0) ~ (1.0, 1.0) / center: (0.5, 0.5)
-    // p: (-1.0, -1.0) ~ (1.0, 1.0) / center: (0.0, 0.0)
     vec2 p = (vUv - 0.5) * uSize;
     vec2 halfSize = uSize * 0.5;
+
+    #INJECT_UV_MODIFIER
     
-    // # border-radius
-    vec2 xRadii = mix(uRadius.xw, uRadius.yz, step(0.0, p.x));
+    // color decision pipeline
+    vec4 baseColor = vec4(uBgColor, uBgOpacity);
+
+    #INJECT_BASE_COLOR
+
+    // sdf shape pipeline
+    vec2 xRadii = mix(uBorderRadius.xw, uBorderRadius.yz, step(0.0, p.x));
     float r = mix(xRadii.y, xRadii.x, step(0.0, p.y));
     float d = sdRoundedBox(p, halfSize, r);
 
-    // 1px blur for anti-aliasing
     float aa = 1.0; 
-
-    // x == 0~aa -> 1
-    // x < 0 -> 0 
-    // x > aa -> 1
     float bgMask = 1.0 - smoothstep(0.0, aa, d);
 
-    // v valley
-    // 10px -> 5
     float halfBorder = uBorderWidth * 0.5;
-    // 10px :
-    // 0 -> 0
-    // -10 -> 0
-    // -5 -> -5
     float borderD = abs(d + halfBorder) - halfBorder;
-    // ^ border 내부는 음수/외부는 양수
-
-    // [!] 내부가 음수인 곳에서 시작점이 0이면 내부는 안티 얼리어싱 되지 않음.
-    // 1에서 빼든 그대로든 상관없이 경계선 밖 1px
-
-    // 최종 alpha를 위해 border 부분에 해당하는 픽셀 만 1로 반환.
     float borderAlpha = (1.0 - smoothstep(0.0, aa, borderD)) * uBorderOpacity; 
-
     if (uBorderWidth <= 0.01) {
       borderAlpha = 0.0;
     }
 
+    // final blending (border + background)
     float aFront = borderAlpha;
-    float aBack = uBgOpacity;
+    float aBack = baseColor.a;
     float aOut = aFront + aBack * (1.0 - aFront);
 
     float safeAlpha = max(aOut, 0.0001);
-    vec3 cOut = (uBorderColor * aFront + uBgColor * aBack * (1.0 - aFront)) / safeAlpha;
+    vec3 cOut = (uBorderColor * aFront + baseColor.rgb * aBack * (1.0 - aFront)) / safeAlpha;
+    vec4 finalColor = vec4(cOut, aOut);
 
-    float finalOpacity = aOut * bgMask * uOpacity;
+    // final color control (Tint, Noise)
+    #INJECT_COLOR_MODIFIER
 
+    float finalOpacity = finalColor.a * bgMask * uOpacity;
     if (finalOpacity < 0.001) discard;
 
-    gl_FragColor = vec4(cOut, finalOpacity);
+    gl_FragColor = vec4(finalColor.rgb, finalOpacity);
 
     #include <colorspace_fragment>
   }
 `
 );
-function R(r) {
-  if (!r || r === "transparent")
+function E(s) {
+  if (!s || s === "transparent")
     return { color: new d.Color(16777215), alpha: 0 };
-  const t = r.match(
+  const e = s.match(
     /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
   );
-  if (t) {
-    const e = parseInt(t[1], 10), i = parseInt(t[2], 10), s = parseInt(t[3], 10), n = t[4] !== void 0 ? parseFloat(t[4]) : 1;
-    return { color: new d.Color(`rgb(${e}, ${i}, ${s})`), alpha: n };
+  if (e) {
+    const t = parseInt(e[1], 10), r = parseInt(e[2], 10), i = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${r}, ${i})`), alpha: a };
   }
-  return { color: new d.Color(r), alpha: 1 };
+  return { color: new d.Color(s), alpha: 1 };
 }
-function H(r, t, e) {
-  var o;
-  const i = R(r.backgroundColor), s = R(r.borderColor), n = {
-    uSize: { value: new d.Vector2(t, e) },
-    uRadius: { value: new d.Vector4(0, 0, 0, 0) },
-    uBorderWidth: { value: v(r.borderWidth) },
-    uBgColor: { value: i.color },
-    uBorderColor: { value: s.color },
-    uOpacity: { value: (o = r.opacity) != null ? o : 1 },
-    uBgOpacity: { value: i.alpha },
-    uBorderOpacity: { value: s.alpha }
+function G(s, e, t, r = null, i) {
+  var v;
+  const a = r !== null, n = a ? (
+    /* glsl */
+    `
+    uniform sampler2D uTexture;
+    varying vec4 vScreenPos;
+  `
+  ) : "", o = a ? (
+    /* glsl */
+    `
+    vec2 screenUv = (vScreenPos.xy / vScreenPos.w) * 0.5 + 0.5;
+    vec2 resultUv = screenUv;
+    ${(i == null ? void 0 : i.uvModifier) || ""}
+  `
+  ) : "", l = a ? (
+    /* glsl */
+    `
+    baseColor = texture2D(uTexture, resultUv);
+  `
+  ) : "", c = (i == null ? void 0 : i.colorModifier) || "", m = $.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), f = E(s.backgroundColor), g = E(s.borderColor), p = {
+    uSize: { value: new d.Vector2(e, t) },
+    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: R(s.borderWidth) },
+    uBgColor: { value: f.color },
+    uBorderColor: { value: g.color },
+    uOpacity: { value: (v = s.opacity) != null ? v : 1 },
+    uBgOpacity: { value: f.alpha },
+    uBorderOpacity: { value: g.alpha },
+    uTexture: { value: null }
   };
-  return X(n.uRadius.value, r.borderRadius), new d.ShaderMaterial({
-    uniforms: n,
-    vertexShader: Y,
-    fragmentShader: W,
+  return X(p.uBorderRadius.value, s.borderRadius), a && (p.uTexture.value = r), new d.ShaderMaterial({
+    uniforms: p,
+    vertexShader: H,
+    fragmentShader: m,
     transparent: !0,
     side: d.FrontSide
     // for better performance
   });
 }
-function U(r, t, e, i) {
-  var a;
-  const s = R(t.backgroundColor), n = R(t.borderColor);
-  r.uniforms.uSize.value.set(e, i), X(r.uniforms.uRadius.value, t.borderRadius), r.uniforms.uBorderWidth.value = v(t.borderWidth), r.uniforms.uBgColor.value.copy(s.color), r.uniforms.uBorderColor.value.copy(n.color), r.uniforms.uOpacity.value = (a = t.opacity) != null ? a : 1, r.uniforms.uBgOpacity.value = s.alpha, r.uniforms.uBorderOpacity.value = n.alpha;
+function J(s, e, t, r, i) {
+  var o;
+  const a = E(e.backgroundColor), n = E(e.borderColor);
+  s.uniforms.uSize.value.set(t, r), X(s.uniforms.uBorderRadius.value, e.borderRadius), s.uniforms.uBorderWidth.value = R(e.borderWidth), s.uniforms.uBgColor.value.copy(a.color), s.uniforms.uBorderColor.value.copy(n.color), s.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, s.uniforms.uBgOpacity.value = a.alpha, s.uniforms.uBorderOpacity.value = n.alpha, s.uniforms.uTexture && i !== void 0 && (s.uniforms.uTexture.value = i);
 }
-const E = {
-  create(r, t, e, i, s, n = 2) {
-    if (r === "BOX")
-      return H(t, i, s);
-    if (r === "TEXT") {
-      const a = L(
-        e || "",
-        t,
+const D = {
+  create(s, e, t, r, i, a = 2, n = null, o) {
+    if (s === "BOX")
+      return G(e, r, i, n, o);
+    if (s === "TEXT") {
+      const l = N(
+        t || "",
+        e,
+        r,
         i,
-        s,
-        n
+        a
       );
       return new d.MeshBasicMaterial({
-        map: a,
+        map: l,
         transparent: !0,
         side: d.FrontSide,
         color: 16777215
@@ -195,74 +208,91 @@ const E = {
     }
     return new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(r, t, e, i, s, n, a = 2) {
-    if (t === "BOX")
-      U(
-        r,
-        e,
+  update(s, e, t, r, i, a, n = 2, o) {
+    if (e === "BOX")
+      J(
         s,
-        n
+        t,
+        i,
+        a,
+        o
       );
-    else if (t === "TEXT") {
-      const o = r;
-      o.map && o.map.dispose();
-      const h = L(
-        i || "",
-        e,
-        s,
-        n,
-        a
+    else if (e === "TEXT") {
+      const l = s;
+      l.map && l.map.dispose();
+      const c = N(
+        r || "",
+        t,
+        i,
+        a,
+        n
       );
-      o.map = h, o.needsUpdate = !0;
+      l.map = c, l.needsUpdate = !0;
     }
   }
 };
-class $ {
-  constructor(t, e, i) {
-    l(this, "canvas");
-    l(this, "scene");
-    l(this, "camera");
-    l(this, "renderer");
-    l(this, "renderOrder", 0);
-    l(this, "textQualityFactor", 2);
-    l(this, "mode", "overlay");
-    l(this, "target");
-    l(this, "mountContainer");
-    l(this, "targetRect");
-    l(this, "meshMap", /* @__PURE__ */ new Map());
-    var a, o;
-    this.target = t, this.mountContainer = i, this.mode = (a = e.mode) != null ? a : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
-    const s = this.targetRect.width, n = this.targetRect.height;
+class V {
+  constructor(e, t, r) {
+    h(this, "canvas");
+    h(this, "scene");
+    h(this, "camera");
+    h(this, "renderer");
+    h(this, "renderTarget", null);
+    h(this, "renderOrder", 0);
+    h(this, "qualityFactor", 2);
+    h(this, "mode", "overlay");
+    h(this, "clipArea", 1);
+    h(this, "target");
+    h(this, "mountContainer");
+    h(this, "targetRect");
+    h(this, "meshMap", /* @__PURE__ */ new Map());
+    var n, o, l;
+    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.clipArea = (o = t.travelerClipArea) != null ? o : 1, this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const i = this.targetRect.width, a = this.targetRect.height;
     this.camera = new d.OrthographicCamera(
-      s / -2,
-      s / 2,
-      n / 2,
-      n / -2,
+      i / -2,
+      i / 2,
+      a / 2,
+      a / -2,
       1,
       1e3
-    ), this.camera.position.z = 100, this.renderer = new d.WebGLRenderer({
+    ), this.camera.position.z = 100, this.camera.layers.set(0), this.renderer = new d.WebGLRenderer({
       canvas: this.canvas,
       alpha: !0,
       antialias: !0
       // [new]
       // premultipliedAlpha: true
-    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(s, n), this.applyTextQuality((o = e.textQuality) != null ? o : "medium");
+    }), this.renderer.setPixelRatio(window.devicePixelRatio), this.renderer.setSize(i, a), this.applyTextQuality((l = t.quality) != null ? l : "medium");
+  }
+  createRenderTarget() {
+    this.renderTarget = new d.WebGLRenderTarget(
+      this.targetRect.width * this.qualityFactor,
+      this.targetRect.height * this.qualityFactor,
+      {
+        minFilter: d.LinearFilter,
+        magFilter: d.LinearFilter,
+        format: d.RGBAFormat,
+        stencilBuffer: !1,
+        depthBuffer: !0,
+        samples: 4
+      }
+    );
   }
-  applyTextQuality(t) {
-    if (typeof t == "number") {
-      this.textQualityFactor = Math.max(0.1, t);
+  applyTextQuality(e) {
+    if (typeof e == "number") {
+      this.qualityFactor = Math.max(0.1, e);
       return;
     }
-    switch (t) {
+    switch (e) {
       case "low":
-        this.textQualityFactor = 1;
+        this.qualityFactor = 1;
         break;
       case "high":
-        this.textQualityFactor = 4;
+        this.qualityFactor = 4;
         break;
       case "medium":
       default:
-        this.textQualityFactor = 2;
+        this.qualityFactor = 2;
         break;
     }
   }
@@ -275,153 +305,200 @@ class $ {
   dispose() {
     this.renderer.dispose(), this.canvas.remove();
   }
-  setSize(t, e) {
-    this.renderer.setSize(t, e), this.camera.left = t / -2, this.camera.right = t / 2, this.camera.top = e / 2, this.camera.bottom = e / -2, this.camera.updateProjectionMatrix();
-  }
-  syncScene(t) {
-    const e = this.target.getBoundingClientRect(), i = Math.abs(e.width - this.targetRect.width) > 0.1 || Math.abs(e.height - this.targetRect.height) > 0.1, s = this.mode === "overlay" && (Math.abs(e.top - this.targetRect.top) > 0.1 || Math.abs(e.left - this.targetRect.left) > 0.1);
-    i ? (this.targetRect = e, this.renderer.setSize(this.targetRect.width, this.targetRect.height), this.camera.left = this.targetRect.width / -2, this.camera.right = this.targetRect.width / 2, this.camera.top = this.targetRect.height / 2, this.camera.bottom = this.targetRect.height / -2, this.camera.layers.set(0), this.camera.updateProjectionMatrix(), this.updateCanvasLayout()) : s ? (this.targetRect = e, this.updateCanvasLayout()) : this.targetRect = e, this.renderOrder = 0;
-    const n = /* @__PURE__ */ new Set();
-    this.reconcileNode(t, n);
-    for (const [a, o] of this.meshMap.entries())
-      n.has(a) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(a));
-  }
-  reconcileNode(t, e) {
-    e.add(t.element);
-    let i = this.meshMap.get(t.element);
-    if (!i) {
-      const s = new d.PlaneGeometry(1, 1), n = E.create(
+  setSize(e, t) {
+    this.renderer.setSize(e, t), this.renderTarget && this.renderTarget.setSize(
+      e * this.qualityFactor,
+      t * this.qualityFactor
+    ), this.camera.left = e / -2, this.camera.right = e / 2, this.camera.top = t / 2, this.camera.bottom = t / -2, this.camera.updateProjectionMatrix();
+  }
+  syncScene(e) {
+    const t = this.target.getBoundingClientRect(), r = Math.abs(t.width - this.targetRect.width) > 0.1 || Math.abs(t.height - this.targetRect.height) > 0.1, i = this.mode === "overlay" && (Math.abs(t.top - this.targetRect.top) > 0.1 || Math.abs(t.left - this.targetRect.left) > 0.1);
+    r ? (this.targetRect = t, this.setSize(this.targetRect.width, this.targetRect.height), this.updateCanvasLayout()) : i ? (this.targetRect = t, this.updateCanvasLayout()) : this.targetRect = t, this.renderOrder = 0;
+    const a = /* @__PURE__ */ new Set();
+    this.reconcileNode(e, a);
+    for (const [n, o] of this.meshMap.entries())
+      a.has(n) || (this.scene.remove(o), o.geometry.dispose(), o.material instanceof d.Material && o.material.dispose(), this.meshMap.delete(n));
+  }
+  reconcileNode(e, t) {
+    var i;
+    t.add(e.element);
+    let r = this.meshMap.get(e.element);
+    if (!r) {
+      const a = new d.PlaneGeometry(1, 1);
+      let n;
+      n = D.create(
         "BOX",
-        t.styles,
+        e.styles,
         "",
-        t.rect.width,
-        t.rect.height
-      );
-      i = new d.Mesh(s, n), i.layers.set(t.visibility), t.type === "TEXT" && (i.name = "BG_MESH"), this.scene.add(i), this.meshMap.set(t.element, i);
+        e.rect.width,
+        e.rect.height,
+        this.qualityFactor,
+        e.isTraveler ? (i = this.renderTarget) == null ? void 0 : i.texture : void 0,
+        e.shaderHooks
+      ), r = new d.Mesh(a, n), e.type === "TEXT" && (r.name = "BG_MESH"), this.scene.add(r), this.meshMap.set(e.element, r);
     }
-    if (i.userData.domRect = t.rect, this.updateMeshProperties(i, t), t.type === "BOX")
-      for (const s of t.children)
-        this.reconcileNode(s, e);
+    if (r.userData.domRect = e.rect, this.updateMeshProperties(r, e), this.updateMeshLayers(r, e), e.isTraveler && r.layers.enable(28), e.type === "BOX")
+      for (const a of e.children)
+        this.reconcileNode(a, t);
     else
-      t.type === "TEXT" && this.reconcileTextChild(i, t);
+      e.type === "TEXT" && this.reconcileTextChild(r, e);
   }
-  reconcileTextChild(t, e) {
-    var o, h;
-    let i = t.children.find(
+  reconcileTextChild(e, t) {
+    var o, l;
+    let r = e.children.find(
       (c) => c.name === "TEXT_CHILD"
     );
-    const s = JSON.stringify(e.textStyles), n = (o = i == null ? void 0 : i.userData) == null ? void 0 : o.styleHash;
-    if (!i || e.dirtyMask & z || s !== n) {
-      i && ((h = i.material.map) == null || h.dispose(), i.geometry.dispose(), t.remove(i));
-      const c = E.create(
+    const i = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
+    if (!r || t.dirtyMask & _ || i !== a) {
+      r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
+      const c = D.create(
         "TEXT",
-        e.textStyles,
-        e.textContent || "",
-        e.rect.width,
-        e.rect.height,
-        this.textQualityFactor
-      ), p = new d.PlaneGeometry(1, 1);
-      i = new d.Mesh(p, c), i.name = "TEXT_CHILD", i.userData = { styleHash: s }, i.layers.set(e.visibility), i.position.z = 5e-3, t.add(i);
+        t.textStyles,
+        t.textContent || "",
+        t.rect.width,
+        t.rect.height,
+        this.qualityFactor
+      ), m = new d.PlaneGeometry(1, 1);
+      r = new d.Mesh(m, c), r.name = "TEXT_CHILD", r.userData = { styleHash: i }, this.updateMeshLayers(r, t), r.position.z = 5e-3, e.add(r);
     }
-    if (i) {
-      const c = t.userData.domRect, p = c.x + c.width / 2, f = c.y + c.height / 2, y = e.rect.x + e.rect.width / 2, w = e.rect.y + e.rect.height / 2, b = y - p, x = -(w - f);
-      i.position.set(b, x, 5e-3);
+    if (r) {
+      const c = e.userData.domRect, m = c.x + c.width / 2, f = c.y + c.height / 2, g = t.rect.x + t.rect.width / 2, p = t.rect.y + t.rect.height / 2, y = g - m, v = -(p - f);
+      r.position.set(y, v, 5e-3);
     }
   }
-  updateMeshProperties(t, e) {
-    const { rect: i, styles: s } = e, n = this.renderer.getPixelRatio(), a = this.renderer.domElement.width / n, o = this.renderer.domElement.height / n;
-    t.scale.set(i.width, i.height, 1);
-    const h = 1e-3;
+  updateMeshProperties(e, t) {
+    var p;
+    const { rect: r, styles: i } = t, a = this.renderer.getPixelRatio(), n = this.renderer.domElement.width / a, o = this.renderer.domElement.height / a;
+    e.scale.set(r.width, r.height, 1);
+    const l = 1e-3;
     this.renderOrder++;
-    const c = this.targetRect.left + window.scrollX, p = this.targetRect.top + window.scrollY, f = i.x - c, y = i.y - p;
-    t.position.set(
-      f - a / 2 + i.width / 2,
-      -y + o / 2 - i.height / 2,
-      s.zIndex + this.renderOrder * h
-    ), E.update(
-      t.material,
+    const c = this.targetRect.left + window.scrollX, m = this.targetRect.top + window.scrollY, f = r.x - c, g = r.y - m;
+    e.position.set(
+      f - n / 2 + r.width / 2,
+      -g + o / 2 - r.height / 2,
+      i.zIndex + this.renderOrder * l
+    ), D.update(
+      e.material,
       "BOX",
-      e.styles,
+      t.styles,
       "",
-      e.rect.width,
-      e.rect.height
+      t.rect.width,
+      t.rect.height,
+      this.qualityFactor,
+      t.isTraveler ? (p = this.renderTarget) == null ? void 0 : p.texture : void 0
     );
   }
+  updateMeshLayers(e, t) {
+    const r = (1 - (t.visibility & x)) * 30;
+    e.layers.set(r), t.visibility === (x | w) && e.layers.enable(29);
+  }
+  captureRenderTarget() {
+    const e = [];
+    for (const l of this.meshMap.values())
+      l.layers.mask & 1 << 28 && e.push(l);
+    if (e.length === 0)
+      return;
+    const t = new d.Color(), r = this.renderer.getClearAlpha();
+    this.renderer.getClearColor(t), this.renderer.setClearColor(0, 0), this.renderer.setRenderTarget(this.renderTarget), this.renderer.clear(), this.renderer.autoClear = !1, this.renderer.setScissorTest(!0), this.camera.layers.set(29);
+    const i = new d.Vector3(), a = this.targetRect.width, n = this.targetRect.height, o = this.renderer.getPixelRatio();
+    for (const l of e) {
+      i.setFromMatrixPosition(l.matrixWorld), i.project(this.camera);
+      const c = (i.x + 1) / 2 * a, m = (i.y + 1) / 2 * n;
+      let f = 0, g = 1;
+      typeof this.clipArea == "number" ? g = this.clipArea : this.clipArea.endsWith("%") ? g = parseFloat(this.clipArea) / 100 : this.clipArea.endsWith("px") && (f = parseFloat(this.clipArea));
+      const p = l.scale.x * g + 0.5, y = l.scale.y * g + 0.5, v = c - p / 2, B = m - y / 2, M = (v * this.qualityFactor - f) / o, F = (B * this.qualityFactor - f) / o, b = (p * this.qualityFactor + f * 2) / o, u = (y * this.qualityFactor + f * 2) / o;
+      this.renderer.setScissor(M, F, b, u), this.renderer.render(this.scene, this.camera);
+    }
+    this.renderer.setScissorTest(!1), this.renderer.autoClear = !0, this.renderer.setRenderTarget(null), this.camera.layers.set(28), this.renderer.setClearColor(t, r);
+  }
   render() {
-    this.renderer.render(this.scene, this.camera);
+    this.renderTarget && this.captureRenderTarget(), this.renderer.render(this.scene, this.camera);
+  }
+  // for debugging
+  showScissoredRenderTarget() {
+    if (!this.renderTarget)
+      return;
+    const e = this.targetRect.width, t = this.targetRect.height, r = new d.PlaneGeometry(e, t), i = new d.MeshBasicMaterial({
+      map: this.renderTarget.texture,
+      side: d.DoubleSide,
+      transparent: !0,
+      opacity: 0.8
+    }), a = new d.Mesh(r, i);
+    a.position.set(0, 0, 90), a.layers.set(28), this.scene.add(a);
   }
 }
-function Q(r) {
-  const t = document.createRange();
-  t.selectNodeContents(r);
-  const e = t.getBoundingClientRect();
+function j(s) {
+  const e = document.createRange();
+  e.selectNodeContents(s);
+  const t = e.getBoundingClientRect();
   return {
-    left: e.left,
-    top: e.top,
-    width: e.width,
-    height: e.height
+    left: t.left,
+    top: t.top,
+    width: t.width,
+    height: t.height
   };
 }
-function G(r) {
-  const t = parseFloat(r.fontSize);
-  let e = parseFloat(r.lineHeight);
-  isNaN(e) && (e = t * 1.2);
-  let i = parseFloat(r.letterSpacing);
-  return isNaN(i) && (i = 0), {
-    font: `${r.fontStyle} ${r.fontWeight} ${r.fontSize} ${r.fontFamily}`,
-    color: r.color,
-    textAlign: r.textAlign || "start",
+function Q(s) {
+  const e = parseFloat(s.fontSize);
+  let t = parseFloat(s.lineHeight);
+  isNaN(t) && (t = e * 1.2);
+  let r = parseFloat(s.letterSpacing);
+  return isNaN(r) && (r = 0), {
+    font: `${s.fontStyle} ${s.fontWeight} ${s.fontSize} ${s.fontFamily}`,
+    color: s.color,
+    textAlign: s.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: r.direction || "inherit",
-    lineHeight: e,
-    letterSpacing: i
+    direction: s.direction || "inherit",
+    lineHeight: t,
+    letterSpacing: r
   };
 }
-function N(r, t = S | B | A | z | M, e, i) {
-  if (r.nodeType === Node.TEXT_NODE) {
-    const u = r;
+function P(s, e = z | L | Y | _ | I, t, r) {
+  if (s.nodeType === Node.TEXT_NODE) {
+    const u = s;
     if (!u.textContent || !u.textContent.trim())
       return null;
-    const m = u.textContent.replace(/\s+/g, " ").trim();
-    if (m.length === 0)
+    const C = u.textContent.replace(/\s+/g, " ").trim();
+    if (C.length === 0)
       return null;
-    const g = Q(u);
-    if (g.width === 0 || g.height === 0)
+    const T = j(u);
+    if (T.width === 0 || T.height === 0)
       return null;
-    const O = u.parentElement, C = O ? window.getComputedStyle(O) : null;
-    return C ? {
+    const A = u.parentElement, O = A ? window.getComputedStyle(A) : null;
+    return O ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
       element: u,
       rect: {
-        x: g.left + window.scrollX,
-        y: g.top + window.scrollY,
-        width: g.width,
-        height: g.height
+        x: T.left + window.scrollX,
+        y: T.top + window.scrollY,
+        width: T.width,
+        height: T.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(C.opacity),
+        opacity: parseFloat(O.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
-      textContent: m,
-      textStyles: G(C),
-      dirtyMask: t,
-      visibility: e,
+      textContent: C,
+      textStyles: Q(O),
+      dirtyMask: e,
+      visibility: t,
+      isTraveler: !1,
       children: []
     } : null;
   }
-  const s = r, n = s.dataset.mirageFilter;
-  let a = e, o = e;
-  if (n) {
-    const u = new Set(n.split(/\s+/));
-    for (const m of u)
-      if (!_.includes(m))
+  const i = s, a = i.dataset.mirageFilter;
+  let n = t, o = t;
+  if (a) {
+    const u = new Set(a.split(/\s+/));
+    for (const C of u)
+      if (!W.includes(C))
         throw new Error(
-          `[MirageEngine] Invalid filter token: '${m}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
+          `[MirageEngine] Invalid filter token: '${C}'. Expected one of: 'include-tree', 'exclude-tree', 'include-self', 'exclude-self', 'end'.`
         );
     if (u.has("end"))
       return null;
@@ -433,81 +510,103 @@ function N(r, t = S | B | A | z | M, e, i) {
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-self' and 'exclude-self' cannot be used together on the same element."
       );
-    u.has("include-tree") ? a = D : u.has("exclude-tree") && (a = F), o = a, u.has("include-self") ? o = D : u.has("exclude-self") && (o = F);
+    u.has("include-tree") ? n = n | x : u.has("exclude-tree") && (n = n & ~x), o = n, u.has("include-self") ? o = o | x : u.has("exclude-self") && (o = o & ~x);
   }
-  if (i && i.end && i.end.length > 0 && i.end.some(
-    (m) => s.classList.contains(m)
-  ))
-    return null;
-  const h = s.getBoundingClientRect(), c = window.getComputedStyle(s);
-  if (h.width === 0 || h.height === 0 || c.display === "none")
+  o = o | t & w;
+  const l = i.dataset.mirageTravel;
+  let c = !1;
+  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~w, n = n & ~w, c = !0);
+  const m = i.dataset.mirageShader;
+  let f;
+  m && (f = JSON.parse(m));
+  const g = i.getBoundingClientRect(), p = window.getComputedStyle(i);
+  if (g.width === 0 || g.height === 0 || p.display === "none")
     return null;
-  let p = s.getAttribute("data-mid");
-  p || (p = Math.random().toString(36).substring(2, 11), s.setAttribute("data-mid", p));
-  const f = parseInt(c.zIndex), y = {
-    backgroundColor: c.backgroundColor,
-    opacity: parseFloat(c.opacity),
-    zIndex: isNaN(f) ? 0 : f,
-    borderRadius: c.borderRadius,
-    borderColor: c.borderColor,
-    borderWidth: c.borderWidth
+  let y = i.getAttribute("data-mid");
+  y || (y = Math.random().toString(36).substring(2, 11), i.setAttribute("data-mid", y));
+  const v = parseInt(p.zIndex), B = {
+    backgroundColor: p.backgroundColor,
+    opacity: parseFloat(p.opacity),
+    zIndex: isNaN(v) ? 0 : v,
+    borderRadius: p.borderRadius,
+    borderColor: p.borderColor,
+    borderWidth: p.borderWidth
   };
-  let w, b;
-  const x = [];
-  return Array.from(s.childNodes).forEach((u) => {
-    const m = u.nodeType === Node.TEXT_NODE ? o : a, g = N(
+  let M, F;
+  const b = [];
+  return Array.from(i.childNodes).forEach((u) => {
+    const C = u.nodeType === Node.TEXT_NODE ? o : n, T = P(
       u,
-      t,
-      m,
-      i
+      e,
+      C
     );
-    g && x.push(g);
+    T && b.push(T);
   }), {
-    id: p,
+    id: y,
     type: "BOX",
-    element: s,
+    element: i,
     rect: {
-      x: h.left + window.scrollX,
-      y: h.top + window.scrollY,
-      width: h.width,
-      height: h.height
+      x: g.left + window.scrollX,
+      y: g.top + window.scrollY,
+      width: g.width,
+      height: g.height
     },
-    styles: y,
-    textContent: w,
-    textStyles: b,
-    dirtyMask: t,
+    styles: B,
+    textContent: M,
+    textStyles: F,
+    dirtyMask: e,
     visibility: o,
-    children: x
+    isTraveler: c,
+    children: b,
+    shaderHooks: f
   };
 }
-class V {
-  constructor(t, e, i) {
-    l(this, "target");
-    l(this, "renderer");
-    l(this, "filter");
-    l(this, "observer");
-    l(this, "isDomDirty", !1);
-    l(this, "isRunning", !1);
-    l(this, "pendingMask", T);
-    l(this, "mutationTimer", null);
-    l(this, "cssTimer", null);
-    l(this, "onTransitionFinished", (t) => {
-      this.target.contains(t.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= S | B, this.cssTimer = window.setTimeout(() => {
+class Z {
+  constructor(e, t, r) {
+    h(this, "target");
+    h(this, "renderer");
+    h(this, "filter");
+    h(this, "observer");
+    h(this, "isDomDirty", !1);
+    h(this, "isRunning", !1);
+    h(this, "isTravelEnabled", !1);
+    h(this, "pendingMask", S);
+    h(this, "mutationTimer", null);
+    h(this, "cssTimer", null);
+    h(this, "resizeConfig");
+    h(this, "resizeTimer", null);
+    h(this, "isResizing", !1);
+    h(this, "onTransitionFinished", (e) => {
+      this.target.contains(e.target) && this.mutationTimer === null && (this.cssTimer && clearTimeout(this.cssTimer), this.pendingMask |= z | L, this.cssTimer = window.setTimeout(() => {
         this.isDomDirty = !0, this.cssTimer = null;
       }, 50));
     });
-    l(this, "onWindowResize", () => {
-      this.renderer.setSize(window.innerWidth, window.innerHeight), this.isDomDirty = !0;
+    h(this, "onWindowResize", () => {
+      if (!this.resizeConfig.enabled) {
+        this.isDomDirty = !0;
+        return;
+      }
+      this.isResizing || (this.isResizing = !0, this.resizeConfig.onStart && this.resizeConfig.onStart()), this.resizeTimer && clearTimeout(this.resizeTimer), this.resizeTimer = window.setTimeout(() => {
+        this.isDomDirty = !0, this.resizeConfig.onEnd && this.resizeConfig.onEnd(), this.isResizing = !1, this.resizeTimer = null;
+      }, this.resizeConfig.delay);
     });
-    l(this, "renderLoop", () => {
+    h(this, "renderLoop", () => {
       this.isRunning && (this.isDomDirty && this.forceUpdateScene(), this.renderer.render(), requestAnimationFrame(this.renderLoop));
     });
-    this.target = t, this.renderer = e, this.filter = i, this.observer = new MutationObserver((s) => {
-      let n = T;
-      for (const a of s)
-        a.type === "childList" ? n |= M : a.type === "attributes" && (a.attributeName === "style" || a.attributeName === "class") && (n |= S | B);
-      if (n !== T) {
-        if (this.pendingMask |= n, n & M) {
+    var a, n;
+    this.target = e, this.renderer = t, this.filter = r.filter;
+    const i = (a = r.resizeDebounce) != null ? a : !0;
+    i === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : i === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+      enabled: !0,
+      delay: (n = i.delay) != null ? n : 150,
+      onStart: i.onStart,
+      onEnd: i.onEnd
+    }, this.observer = new MutationObserver((o) => {
+      let l = S;
+      for (const c of o)
+        c.type === "childList" ? l |= I : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= z | L);
+      if (l !== S) {
+        if (this.pendingMask |= l, l & I) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -533,21 +632,28 @@ class V {
   }
   forceUpdateScene() {
     this.isDomDirty = !1;
-    const t = N(this.target, this.pendingMask, D, this.filter);
-    t && this.renderer.syncScene(t), this.pendingMask = T;
+    const e = document.querySelector("[data-mirage-travel='traveler']") !== null;
+    e && !this.isTravelEnabled && (this.isTravelEnabled = !0, this.renderer.createRenderTarget());
+    const t = P(
+      this.target,
+      this.pendingMask,
+      e ? x | w : x,
+      this.filter
+    );
+    t && this.renderer.syncScene(t), this.pendingMask = S;
   }
 }
-class Z {
-  constructor(t, e) {
-    l(this, "renderer");
-    l(this, "syncer");
-    l(this, "target");
-    var s, n, a;
-    this.target = t;
-    let i;
-    if (e.mode === "duplicate" ? i = (n = (s = e.container) != null ? s : this.target.parentElement) != null ? n : void 0 : i = (a = this.target.parentElement) != null ? a : void 0, !i)
+class te {
+  constructor(e, t) {
+    h(this, "renderer");
+    h(this, "syncer");
+    h(this, "target");
+    var i, a, n;
+    this.target = e;
+    let r;
+    if (t.mode === "duplicate" ? r = (a = (i = t.container) != null ? i : this.target.parentElement) != null ? a : void 0 : r = (n = this.target.parentElement) != null ? n : void 0, !r)
       throw new Error("[Mirage] Cannot find a container (parent or option).");
-    this.renderer = new $(this.target, e, i), this.renderer.mount(), this.syncer = new V(this.target, this.renderer, e.filter);
+    this.renderer = new V(this.target, t, r), this.renderer.mount(), this.syncer = new Z(this.target, this.renderer, t);
   }
   start() {
     this.syncer.start();
@@ -560,15 +666,15 @@ class Z {
   }
 }
 export {
-  _ as ALLOWED_FILTERS,
-  z as DIRTY_CONTENT,
-  T as DIRTY_NONE,
-  S as DIRTY_RECT,
-  M as DIRTY_STRUCTURE,
-  B as DIRTY_STYLE,
-  A as DIRTY_ZINDEX,
-  F as EXCLUDED,
-  Z as Engine,
-  D as INCLUDED,
-  j as SYSTEM
+  W as ALLOWED_FILTERS,
+  _ as DIRTY_CONTENT,
+  S as DIRTY_NONE,
+  z as DIRTY_RECT,
+  I as DIRTY_STRUCTURE,
+  L as DIRTY_STYLE,
+  Y as DIRTY_ZINDEX,
+  ee as EXCLUDED,
+  te as Engine,
+  w as SYSTEM_LAYER,
+  x as USER_LAYER
 };