@mirage-engine/core 0.1.0 → 0.2.0

package/dist/mirage-engine.js

@@ -1,61 +1,63 @@
-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 A = Object.defineProperty;
+var P = (i, e, t) => e in i ? A(i, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : i[e] = t;
+var h = (i, e, t) => (P(i, 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 E = 0, O = 1, D = 2, k = 4, z = 8, N = 16, x = 1, R = 2, Z = 0, q = [
   "include-tree",
   "exclude-tree",
   "include-self",
   "exclude-self",
   "end"
 ];
-function P(r, t, e) {
-  const i = t.split(`
+function Y(i, e, t) {
+  const r = e.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);
+  return r.forEach((a) => {
+    const n = a.split(" ");
+    let o = n[0];
+    for (let l = 1; l < n.length; l++) {
+      const c = n[l];
+      i.measureText(o + " " + c).width < t ? o += " " + c : (s.push(o), o = c);
     }
     s.push(o);
   }), s;
 }
-function L(r, t, e, i, s = 2) {
-  const n = document.createElement("canvas"), a = n.getContext("2d");
-  if (!a)
+function I(i, e, t, r, s = 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) * s;
+  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 = Y(n, i, t), g = e.lineHeight;
+  c.forEach((p, m) => {
+    const T = m * g + 2;
+    let v = 0;
+    e.textAlign === "center" ? v = t / 2 : e.textAlign === "right" && (v = t), n.textAlign = e.textAlign, n.fillText(p, v, T);
   });
-  const f = new d.CanvasTexture(n);
-  return f.colorSpace = d.SRGBColorSpace, f.minFilter = d.LinearFilter, f.magFilter = d.LinearFilter, f.needsUpdate = !0, f;
+  const u = new d.CanvasTexture(a);
+  return u.colorSpace = d.SRGBColorSpace, u.minFilter = d.LinearFilter, u.magFilter = d.LinearFilter, u.needsUpdate = !0, u;
 }
-function v(r) {
-  return typeof r == "number" ? r : parseFloat(r) || 0;
+function w(i) {
+  return typeof i == "number" ? i : parseFloat(i) || 0;
 }
-function X(r, t) {
-  var o, h, c, p;
-  if (!t) {
-    r.set(0, 0, 0, 0);
+function _(i, e) {
+  var o, l, c, g;
+  if (!e) {
+    i.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 = w(t[0]), s = w((o = t[1]) != null ? o : t[0]), a = w((l = t[2]) != null ? l : t[0]), n = w((g = (c = t[3]) != null ? c : t[1]) != null ? g : t[0]);
+  i.set(r, s, a, n);
 }
-const Y = (
+const U = (
   /* glsl */
   `
   varying vec2 vUv;
+  varying vec4 vScreenPos;
   void main() {
     vUv = uv;
     gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    vScreenPos = gl_Position;
   }
 `
 ), W = (
@@ -65,7 +67,7 @@ const Y = (
   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 S(i) {
+  if (!i || i === "transparent")
     return { color: new d.Color(16777215), alpha: 0 };
-  const t = r.match(
+  const e = i.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), s = parseInt(e[3], 10), a = e[4] !== void 0 ? parseFloat(e[4]) : 1;
+    return { color: new d.Color(`rgb(${t}, ${r}, ${s})`), alpha: a };
   }
-  return { color: new d.Color(r), alpha: 1 };
+  return { color: new d.Color(i), 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 H(i, e, t, r = null, s) {
+  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;
+    ${(s == null ? void 0 : s.uvModifier) || ""}
+  `
+  ) : "", l = a ? (
+    /* glsl */
+    `
+    baseColor = texture2D(uTexture, resultUv);
+  `
+  ) : "", c = (s == null ? void 0 : s.colorModifier) || "", g = W.replace("#INJECT_DECLARATIONS", n).replace("#INJECT_UV_MODIFIER", o).replace("#INJECT_BASE_COLOR", l).replace("#INJECT_COLOR_MODIFIER", c), u = S(i.backgroundColor), p = S(i.borderColor), m = {
+    uSize: { value: new d.Vector2(e, t) },
+    uBorderRadius: { value: new d.Vector4(0, 0, 0, 0) },
+    uBorderWidth: { value: w(i.borderWidth) },
+    uBgColor: { value: u.color },
+    uBorderColor: { value: p.color },
+    uOpacity: { value: (v = i.opacity) != null ? v : 1 },
+    uBgOpacity: { value: u.alpha },
+    uBorderOpacity: { value: p.alpha },
+    uTexture: { value: null }
   };
-  return X(n.uRadius.value, r.borderRadius), new d.ShaderMaterial({
-    uniforms: n,
-    vertexShader: Y,
-    fragmentShader: W,
+  return _(m.uBorderRadius.value, i.borderRadius), a && (m.uTexture.value = r), new d.ShaderMaterial({
+    uniforms: m,
+    vertexShader: U,
+    fragmentShader: g,
     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 $(i, e, t, r, s) {
+  var o;
+  const a = S(e.backgroundColor), n = S(e.borderColor);
+  i.uniforms.uSize.value.set(t, r), _(i.uniforms.uBorderRadius.value, e.borderRadius), i.uniforms.uBorderWidth.value = w(e.borderWidth), i.uniforms.uBgColor.value.copy(a.color), i.uniforms.uBorderColor.value.copy(n.color), i.uniforms.uOpacity.value = (o = e.opacity) != null ? o : 1, i.uniforms.uBgOpacity.value = a.alpha, i.uniforms.uBorderOpacity.value = n.alpha, i.uniforms.uTexture && s !== void 0 && (i.uniforms.uTexture.value = s);
 }
-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,
-        i,
+const F = {
+  create(i, e, t, r, s, a = 2, n = null) {
+    if (i === "BOX")
+      return H(e, r, s, n);
+    if (i === "TEXT") {
+      const o = I(
+        t || "",
+        e,
+        r,
         s,
-        n
+        a
       );
       return new d.MeshBasicMaterial({
-        map: a,
+        map: o,
         transparent: !0,
         side: d.FrontSide,
         color: 16777215
@@ -195,74 +208,90 @@ const E = {
     }
     return new d.MeshBasicMaterial({ visible: !1 });
   },
-  update(r, t, e, i, s, n, a = 2) {
-    if (t === "BOX")
-      U(
-        r,
-        e,
+  update(i, e, t, r, s, a, n = 2, o) {
+    if (e === "BOX")
+      $(
+        i,
+        t,
         s,
-        n
+        a,
+        o
       );
-    else if (t === "TEXT") {
-      const o = r;
-      o.map && o.map.dispose();
-      const h = L(
-        i || "",
-        e,
+    else if (e === "TEXT") {
+      const l = i;
+      l.map && l.map.dispose();
+      const c = I(
+        r || "",
+        t,
         s,
-        n,
-        a
+        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 G {
+  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, "target");
+    h(this, "mountContainer");
+    h(this, "targetRect");
+    h(this, "meshMap", /* @__PURE__ */ new Map());
+    var n, o;
+    this.target = e, this.mountContainer = r, this.mode = (n = t.mode) != null ? n : "overlay", this.canvas = document.createElement("canvas"), this.scene = new d.Scene(), this.targetRect = this.target.getBoundingClientRect();
+    const s = this.targetRect.width, a = this.targetRect.height;
     this.camera = new d.OrthographicCamera(
       s / -2,
       s / 2,
-      n / 2,
-      n / -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(s, a), this.applyTextQuality((o = t.quality) != null ? o : "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,239 +304,300 @@ 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, s = 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()) : s ? (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 s;
+    t.add(e.element);
+    let r = this.meshMap.get(e.element);
+    if (!r) {
+      const a = new d.PlaneGeometry(1, 1);
+      let n;
+      n = F.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 ? (s = this.renderTarget) == null ? void 0 : s.texture : void 0
+      ), 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 s = JSON.stringify(t.textStyles), a = (o = r == null ? void 0 : r.userData) == null ? void 0 : o.styleHash;
+    if (!r || t.dirtyMask & N || s !== a) {
+      r && ((l = r.material.map) == null || l.dispose(), r.geometry.dispose(), e.remove(r));
+      const c = F.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
+      ), g = new d.PlaneGeometry(1, 1);
+      r = new d.Mesh(g, c), r.name = "TEXT_CHILD", r.userData = { styleHash: s }, 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, g = c.x + c.width / 2, u = c.y + c.height / 2, p = t.rect.x + t.rect.width / 2, m = t.rect.y + t.rect.height / 2, T = p - g, v = -(m - u);
+      r.position.set(T, 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 m;
+    const { rect: r, styles: s } = 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, g = this.targetRect.top + window.scrollY, u = r.x - c, p = r.y - g;
+    e.position.set(
+      u - n / 2 + r.width / 2,
+      -p + o / 2 - r.height / 2,
+      s.zIndex + this.renderOrder * l
+    ), F.update(
+      e.material,
       "BOX",
-      e.styles,
+      t.styles,
       "",
-      e.rect.width,
-      e.rect.height
+      t.rect.width,
+      t.rect.height,
+      this.qualityFactor,
+      t.isTraveler ? (m = this.renderTarget) == null ? void 0 : m.texture : void 0
     );
   }
+  updateMeshLayers(e, t) {
+    const r = (1 - (t.visibility & x)) * 30;
+    e.layers.set(r), t.visibility === (x | R) && 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 s = new d.Vector3(), a = this.targetRect.width, n = this.targetRect.height, o = this.renderer.getPixelRatio();
+    for (const l of e) {
+      s.setFromMatrixPosition(l.matrixWorld), s.project(this.camera);
+      const c = (s.x + 1) / 2 * a, g = (s.y + 1) / 2 * n, u = l.scale.x, p = l.scale.y, m = c - u / 2, T = g - p / 2, v = m * this.qualityFactor / o, B = T * this.qualityFactor / o, b = u * this.qualityFactor / o, f = p * this.qualityFactor / o;
+      this.renderer.setScissor(v, B, b, f), 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), s = new d.MeshBasicMaterial({
+      map: this.renderTarget.texture,
+      side: d.DoubleSide,
+      transparent: !0,
+      opacity: 0.8
+    }), a = new d.Mesh(r, s);
+    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(i) {
+  const e = document.createRange();
+  e.selectNodeContents(i);
+  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 V(i) {
+  const e = parseFloat(i.fontSize);
+  let t = parseFloat(i.lineHeight);
+  isNaN(t) && (t = e * 1.2);
+  let r = parseFloat(i.letterSpacing);
+  return isNaN(r) && (r = 0), {
+    font: `${i.fontStyle} ${i.fontWeight} ${i.fontSize} ${i.fontFamily}`,
+    color: i.color,
+    textAlign: i.textAlign || "start",
     textBaseline: "alphabetic",
-    direction: r.direction || "inherit",
-    lineHeight: e,
-    letterSpacing: i
+    direction: i.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;
-    if (!u.textContent || !u.textContent.trim())
+function X(i, e = O | D | k | N | z, t, r) {
+  if (i.nodeType === Node.TEXT_NODE) {
+    const f = i;
+    if (!f.textContent || !f.textContent.trim())
       return null;
-    const m = u.textContent.replace(/\s+/g, " ").trim();
-    if (m.length === 0)
+    const C = f.textContent.replace(/\s+/g, " ").trim();
+    if (C.length === 0)
       return null;
-    const g = Q(u);
-    if (g.width === 0 || g.height === 0)
+    const y = J(f);
+    if (y.width === 0 || y.height === 0)
       return null;
-    const O = u.parentElement, C = O ? window.getComputedStyle(O) : null;
-    return C ? {
+    const L = f.parentElement, M = L ? window.getComputedStyle(L) : null;
+    return M ? {
       id: Math.random().toString(36).substring(2, 9),
       type: "TEXT",
-      element: u,
+      element: f,
       rect: {
-        x: g.left + window.scrollX,
-        y: g.top + window.scrollY,
-        width: g.width,
-        height: g.height
+        x: y.left + window.scrollX,
+        y: y.top + window.scrollY,
+        width: y.width,
+        height: y.height
       },
       styles: {
         backgroundColor: "transparent",
-        opacity: parseFloat(C.opacity),
+        opacity: parseFloat(M.opacity),
         zIndex: 0,
         borderRadius: "0px",
         borderColor: "transparent",
         borderWidth: "0px"
       },
-      textContent: m,
-      textStyles: G(C),
-      dirtyMask: t,
-      visibility: e,
+      textContent: C,
+      textStyles: V(M),
+      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 s = i, a = s.dataset.mirageFilter;
+  let n = t, o = t;
+  if (a) {
+    const f = new Set(a.split(/\s+/));
+    for (const C of f)
+      if (!q.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"))
+    if (f.has("end"))
       return null;
-    if (u.has("include-tree") && u.has("exclude-tree"))
+    if (f.has("include-tree") && f.has("exclude-tree"))
       throw new Error(
         "[MirageEngine] Conflicting filters: 'include-tree' and 'exclude-tree' cannot be used together on the same element."
       );
-    if (u.has("include-self") && u.has("exclude-self"))
+    if (f.has("include-self") && f.has("exclude-self"))
       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);
+    f.has("include-tree") ? n = n | x : f.has("exclude-tree") && (n = n & ~x), o = n, f.has("include-self") ? o = o | x : f.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 & R;
+  const l = s.dataset.mirageTravel;
+  let c = !1;
+  l && new Set(l.split(/\s+/)).has("traveler") && (o = o & ~R, n = n & ~R, c = !0);
+  const g = s.getBoundingClientRect(), u = window.getComputedStyle(s);
+  if (g.width === 0 || g.height === 0 || u.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
+  const m = parseInt(u.zIndex), T = {
+    backgroundColor: u.backgroundColor,
+    opacity: parseFloat(u.opacity),
+    zIndex: isNaN(m) ? 0 : m,
+    borderRadius: u.borderRadius,
+    borderColor: u.borderColor,
+    borderWidth: u.borderWidth
   };
-  let w, b;
-  const x = [];
-  return Array.from(s.childNodes).forEach((u) => {
-    const m = u.nodeType === Node.TEXT_NODE ? o : a, g = N(
-      u,
-      t,
-      m,
-      i
+  let v, B;
+  const b = [];
+  return Array.from(s.childNodes).forEach((f) => {
+    const C = f.nodeType === Node.TEXT_NODE ? o : n, y = X(
+      f,
+      e,
+      C
     );
-    g && x.push(g);
+    y && b.push(y);
   }), {
     id: p,
     type: "BOX",
     element: s,
     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: T,
+    textContent: v,
+    textStyles: B,
+    dirtyMask: e,
     visibility: o,
-    children: x
+    isTraveler: c,
+    children: b
   };
 }
-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 j {
+  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", E);
+    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 |= O | D, 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 s = (a = r.resizeDebounce) != null ? a : !0;
+    s === !1 ? this.resizeConfig = { enabled: !1, delay: 0 } : s === !0 ? this.resizeConfig = { enabled: !0, delay: 150 } : this.resizeConfig = {
+      enabled: !0,
+      delay: (n = s.delay) != null ? n : 150,
+      onStart: s.onStart,
+      onEnd: s.onEnd
+    }, this.observer = new MutationObserver((o) => {
+      let l = E;
+      for (const c of o)
+        c.type === "childList" ? l |= z : c.type === "attributes" && (c.attributeName === "style" || c.attributeName === "class") && (l |= O | D);
+      if (l !== E) {
+        if (this.pendingMask |= l, l & z) {
           this.clearTimers(), console.log("Structural Change detected"), this.isDomDirty = !0;
           return;
         }
@@ -533,21 +623,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 = X(
+      this.target,
+      this.pendingMask,
+      e ? x | R : x,
+      this.filter
+    );
+    t && this.renderer.syncScene(t), this.pendingMask = E;
   }
 }
-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 K {
+  constructor(e, t) {
+    h(this, "renderer");
+    h(this, "syncer");
+    h(this, "target");
+    var s, a, n;
+    this.target = e;
+    let r;
+    if (t.mode === "duplicate" ? r = (a = (s = t.container) != null ? s : 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 G(this.target, t, r), this.renderer.mount(), this.syncer = new j(this.target, this.renderer, t);
   }
   start() {
     this.syncer.start();
@@ -560,15 +657,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
+  q as ALLOWED_FILTERS,
+  N as DIRTY_CONTENT,
+  E as DIRTY_NONE,
+  O as DIRTY_RECT,
+  z as DIRTY_STRUCTURE,
+  D as DIRTY_STYLE,
+  k as DIRTY_ZINDEX,
+  Z as EXCLUDED,
+  K as Engine,
+  R as SYSTEM_LAYER,
+  x as USER_LAYER
 };