@tresjs/post-processing 0.1.0 → 0.2.1

package/dist/tres-postprocessing.js

@@ -1,215 +1,407 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.1.0
+ * version: v0.2.1
  * (c) 2023
- * description: Post-processing library for Tres
+ * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { getCurrentInstance as L, onMounted as S, nextTick as H, getCurrentScope as N, onScopeDispose as O, unref as P, toRef as I, readonly as k, customRef as Q, ref as v, watch as y, watchEffect as b, computed as j, inject as w, defineComponent as g, toRefs as F, shallowRef as V, provide as _, toRaw as M } from "vue";
-import { useTres as $, useRenderLoop as q } from "@tresjs/core";
-import { HalfFloatType as J } from "three";
-import { EffectComposer as K, RenderPass as U, NormalPass as X, DepthDownsamplingPass as Y, EffectPass as R, BloomEffect as Z, GlitchEffect as ee } from "postprocessing";
-function x(e) {
-  return N() ? (O(e), !0) : !1;
+import { inject as b, getCurrentInstance as D, onMounted as F, nextTick as Y, getCurrentScope as q, onScopeDispose as U, unref as N, toRef as V, readonly as J, customRef as K, ref as h, watch as y, watchEffect as S, computed as G, defineComponent as B, shallowRef as L, provide as Z, renderSlot as _, toRaw as v, onUnmounted as R } from "vue";
+import { HalfFloatType as ee, Color as A } from "three";
+import { useTres as te, useRenderLoop as ne } from "@tresjs/core";
+import { EffectComposer as ae, RenderPass as le, NormalPass as ie, DepthDownsamplingPass as ue, BlendFunction as W, BloomEffect as re, EffectPass as z, GlitchMode as O, GlitchEffect as oe, OutlineEffect as T } from "postprocessing";
+function x() {
+  const { state: e, setState: n } = b("useTres", te()), l = b("extend") || (() => {
+  });
+  return {
+    state: e,
+    setState: n,
+    extend: l
+  };
 }
-function A(e) {
-  return typeof e == "function" ? e() : P(e);
+let g;
+function se() {
+  var e;
+  if (g !== void 0)
+    return g;
+  try {
+    let n;
+    const l = document.createElement("canvas");
+    return g = !!(window.WebGL2RenderingContext && (n = l.getContext("webgl2"))), n && ((e = n.getExtension("WEBGL_lose_context")) == null || e.loseContext()), g;
+  } catch {
+    return g = !1;
+  }
 }
-const te = typeof window < "u", B = () => {
+function k(e) {
+  return q() ? (U(e), !0) : !1;
+}
+function H(e) {
+  return typeof e == "function" ? e() : N(e);
+}
+const ce = typeof window < "u", I = () => {
 };
-function ne(...e) {
+function de(...e) {
   if (e.length !== 1)
-    return I(...e);
-  const t = e[0];
-  return typeof t == "function" ? k(Q(() => ({ get: t, set: B }))) : v(t);
+    return V(...e);
+  const n = e[0];
+  return typeof n == "function" ? J(K(() => ({ get: n, set: I }))) : h(n);
 }
-function ae(e, t = !0) {
-  L() ? S(e) : t ? e() : H(e);
+function fe(e, n = !0) {
+  D() ? F(e) : n ? e() : Y(e);
 }
-function re(e) {
-  var t;
-  const n = A(e);
-  return (t = n == null ? void 0 : n.$el) != null ? t : n;
+function me(e) {
+  var n;
+  const l = H(e);
+  return (n = l == null ? void 0 : l.$el) != null ? n : l;
 }
-const E = te ? window : void 0;
-function oe(...e) {
-  let t, n, r, a;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, r, a] = e, t = E) : [t, n, r, a] = e, !t)
-    return B;
-  Array.isArray(n) || (n = [n]), Array.isArray(r) || (r = [r]);
-  const o = [], l = () => {
-    o.forEach((c) => c()), o.length = 0;
-  }, s = (c, m, d, f) => (c.addEventListener(m, d, f), () => c.removeEventListener(m, d, f)), u = y(
-    () => [re(t), A(a)],
-    ([c, m]) => {
-      l(), c && o.push(
-        ...n.flatMap((d) => r.map((f) => s(c, d, f, m)))
+const M = ce ? window : void 0;
+function ve(...e) {
+  let n, l, a, t;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([l, a, t] = e, n = M) : [n, l, a, t] = e, !n)
+    return I;
+  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
+  const o = [], s = () => {
+    o.forEach((r) => r()), o.length = 0;
+  }, c = (r, u, d, m) => (r.addEventListener(u, d, m), () => r.removeEventListener(u, d, m)), f = y(
+    () => [me(n), H(t)],
+    ([r, u]) => {
+      s(), r && o.push(
+        ...l.flatMap((d) => a.map((m) => c(r, d, m, u)))
       );
     },
     { immediate: !0, flush: "post" }
   ), i = () => {
-    u(), l();
+    f(), s();
   };
-  return x(i), i;
+  return k(i), i;
 }
-function ie() {
-  const e = v(!1);
-  return L() && S(() => {
+function he() {
+  const e = h(!1);
+  return D() && F(() => {
     e.value = !0;
   }), e;
 }
-function se(e) {
-  const t = ie();
-  return j(() => (t.value, !!e()));
+function ye(e) {
+  const n = he();
+  return G(() => (n.value, !!e()));
 }
-function ue(e, t = {}) {
-  const { window: n = E } = t, r = se(() => n && "matchMedia" in n && typeof n.matchMedia == "function");
-  let a;
-  const o = v(!1), l = () => {
-    a && ("removeEventListener" in a ? a.removeEventListener("change", s) : a.removeListener(s));
-  }, s = () => {
-    r.value && (l(), a = n.matchMedia(ne(e).value), o.value = !!(a != null && a.matches), a && ("addEventListener" in a ? a.addEventListener("change", s) : a.addListener(s)));
+function ge(e, n = {}) {
+  const { window: l = M } = n, a = ye(() => l && "matchMedia" in l && typeof l.matchMedia == "function");
+  let t;
+  const o = h(!1), s = () => {
+    t && ("removeEventListener" in t ? t.removeEventListener("change", c) : t.removeListener(c));
+  }, c = () => {
+    a.value && (s(), t = l.matchMedia(de(e).value), o.value = !!(t != null && t.matches), t && ("addEventListener" in t ? t.addEventListener("change", c) : t.addListener(c)));
   };
-  return b(s), x(() => l()), o;
+  return S(c), k(() => s()), o;
 }
-function le(e = {}) {
+function be(e = {}) {
   const {
-    window: t = E,
-    initialWidth: n = 1 / 0,
-    initialHeight: r = 1 / 0,
-    listenOrientation: a = !0,
+    window: n = M,
+    initialWidth: l = 1 / 0,
+    initialHeight: a = 1 / 0,
+    listenOrientation: t = !0,
     includeScrollbar: o = !0
-  } = e, l = v(n), s = v(r), u = () => {
-    t && (o ? (l.value = t.innerWidth, s.value = t.innerHeight) : (l.value = t.document.documentElement.clientWidth, s.value = t.document.documentElement.clientHeight));
+  } = e, s = h(l), c = h(a), f = () => {
+    n && (o ? (s.value = n.innerWidth, c.value = n.innerHeight) : (s.value = n.document.documentElement.clientWidth, c.value = n.document.documentElement.clientHeight));
   };
-  if (u(), ae(u), oe("resize", u, { passive: !0 }), a) {
-    const i = ue("(orientation: portrait)");
-    y(i, () => u());
+  if (f(), fe(f), ve("resize", f, { passive: !0 }), t) {
+    const i = ge("(orientation: portrait)");
+    y(i, () => f());
   }
-  return { width: l, height: s };
+  return { width: s, height: c };
 }
-let p;
-function ce() {
-  if (p !== void 0)
-    return p;
-  try {
-    var e;
-    let t;
-    const n = document.createElement("canvas");
-    return p = !!(window.WebGL2RenderingContext && (t = n.getContext("webgl2"))), t && ((e = t.getExtension("WEBGL_lose_context")) === null || e === void 0 || e.loseContext()), p;
-  } catch {
-    return p = !1;
+const Ee = /* @__PURE__ */ B({
+  __name: "EffectComposer",
+  props: {
+    enabled: { type: Boolean, default: !0 },
+    children: {},
+    depthBuffer: { type: Boolean },
+    dissableNormalPass: { type: Boolean, default: !1 },
+    stencilBuffer: { type: Boolean },
+    resolutionScale: {},
+    autoClear: { type: Boolean, default: !0 },
+    multisampling: { default: 8 },
+    frameBufferType: { default: () => ee },
+    scene: {},
+    camera: {}
+  },
+  setup(e) {
+    const { state: n } = x(), l = L(null), a = e.scene || n.scene, t = e.camera || n.camera;
+    let o = null, s = null;
+    const c = se();
+    Z("effectComposer", l);
+    const { width: f, height: i } = be();
+    function r() {
+      l.value && (s = new ie(e.scene, e.camera), s.enabled = !1, l.value.addPass(s), e.resolutionScale !== void 0 && c && (o = new ue({
+        normalBuffer: s.texture,
+        resolutionScale: e.resolutionScale
+      }), o.enabled = !1, l.value.addPass(o)));
+    }
+    S(() => {
+      n.renderer && (n.renderer.setSize(f.value, i.value), n.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)), l.value = new ae(n.renderer, {
+        depthBuffer: e.depthBuffer,
+        stencilBuffer: e.stencilBuffer,
+        multisampling: e.multisampling > 0 && c ? e.multisampling : 0,
+        frameBufferType: e.frameBufferType
+      }), l.value.addPass(new le(a, t)), e.dissableNormalPass || r());
+    });
+    const { onLoop: u } = ne();
+    return u(() => {
+      l.value && l.value.render();
+    }), u(({ delta: d }) => {
+      if (e.enabled && n.renderer && l.value) {
+        const m = n.renderer.autoClear;
+        n.renderer.autoClear = e.autoClear, e.stencilBuffer && !e.autoClear && n.renderer.clearStencil(), l.value.render(d), n.renderer.autoClear = m;
+      }
+    }), (d, m) => _(d.$slots, "default");
   }
-}
-function C() {
-  const { state: e, setState: t } = w("useTres", $()), n = w("extend") || (() => {
-  });
-  return {
-    state: e,
-    setState: t,
-    extend: n
-  };
-}
-const pe = g({
-  name: "EffectComposer",
-  props: [
-    "enabled",
-    "children",
-    "depthBuffer",
-    "dissableNormalPass",
-    "stencilBuffer",
-    "autoClear",
-    "resolutionScale",
-    "multisampling",
-    "frameBufferType",
-    "renderPriority",
-    "camera",
-    "scene"
-  ],
-  setup(e, { slots: t }) {
-    const { state: n } = C(), {
-      enabled: r = !0,
-      renderPriority: a = 1,
-      autoClear: o = !0,
-      multisampling: l = 8,
-      frameBufferType: s = J,
-      resolutionScale: u
-    } = F(e), i = V(null), c = e.scene || n.scene, m = e.camera || n.camera;
-    let d = null, f = null;
-    const W = ce();
-    _("effectComposer", i);
-    const { width: G, height: T } = le();
-    function z() {
-      i.value && (f = new X(c, m), f.enabled = !1, i.value.addPass(f), u.value !== void 0 && W && (d = new Y({
-        normalBuffer: f.texture,
-        resolutionScale: u == null ? void 0 : u.value
-      }), d.enabled = !1, i.value.addPass(d)));
+}), Pe = /* @__PURE__ */ B({
+  __name: "Bloom",
+  props: {
+    blendFunction: { default: () => W.ADD },
+    intensity: { default: 1 },
+    blurPass: {},
+    width: {},
+    height: {},
+    kernelSize: {},
+    luminanceThreshold: { default: 0.9 },
+    luminanceSmoothing: { default: 0.025 },
+    mipmapBlur: { type: Boolean, default: !1 }
+  },
+  setup(e, { expose: n }) {
+    const { state: l } = x(), a = b("effectComposer"), t = h(null), o = h(null);
+    n({ pass: t, effect: o });
+    function s() {
+      o.value = new re({
+        blendFunction: e.blendFunction,
+        mipmapBlur: e.mipmapBlur,
+        intensity: e.intensity,
+        luminanceThreshold: e.luminanceThreshold,
+        luminanceSmoothing: e.luminanceSmoothing
+      }), t.value = new z(N(l.camera), v(o.value));
     }
-    b(() => {
-      n.renderer && n.scene && n.camera && (n.renderer.setSize(G.value, T.value), n.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)), i.value = new K(n.renderer), i.value.addPass(new U(c, m)), e.dissableNormalPass || z());
-    }), y(
-      () => e.enabled,
-      (h) => {
-        i.value && (i.value.enabled = h);
+    function c() {
+      var r, u;
+      (r = o.value) == null || r.dispose(), (u = t.value) == null || u.dispose(), a == null || a.value.removePass(v(t.value));
+    }
+    const f = y(
+      () => [l.camera, a == null ? void 0 : a.value],
+      () => {
+        var r;
+        l.camera && a && a.value && (s(), (r = a == null ? void 0 : a.value) == null || r.addPass(v(t.value)));
+      }
+    ), i = y(
+      () => [e.blendFunction, e.mipmapBlur, e.intensity, e.luminanceThreshold, e.luminanceSmoothing],
+      () => {
+        var r;
+        t.value && (c(), s(), (r = a == null ? void 0 : a.value) == null || r.addPass(v(t.value)));
       }
     );
-    const { onLoop: D } = q();
-    return D(() => {
-      i.value && i.value.render();
-    }), () => {
-      var h;
-      return (h = t.default) == null ? void 0 : h.call(t);
-    };
-  }
-}), he = g({
-  name: "Bloom",
-  props: [
-    "intensity",
-    "blurPass",
-    "width",
-    "height",
-    "kernelSize",
-    "luminanceThreshold",
-    "luminanceSmoothing"
-  ],
-  async setup(e, { expose: t }) {
-    const { state: n } = C(), r = w("effectComposer"), a = v(null);
-    return t({ getPass: () => a.value }), b(() => {
-      var o;
-      n.camera && r && r.value && (a.value = new R(P(n.camera), new Z(e)), (o = r == null ? void 0 : r.value) == null || o.addPass(M(a.value)));
-    }), () => {
-    };
+    return R(() => {
+      c(), f(), i();
+    }), (r, u) => null;
   }
-}), we = g({
-  name: "Glitch",
-  props: [
-    "delay",
-    "duration",
-    "strength",
-    "mode",
-    "active",
-    "ratio",
-    "columns",
-    "chromaticAberrationOffset",
-    "peturbationMap",
-    "dtSize"
-  ],
-  async setup(e, { expose: t }) {
-    const { state: n } = C(), r = w("effectComposer"), a = v(null);
-    return t({ getPass: () => a.value }), b(() => {
-      var o;
-      n.camera && r && r.value && (a.value = new R(P(n.camera), new ee(e)), (o = r == null ? void 0 : r.value) == null || o.addPass(M(a.value)));
-    }), y(
+}), Be = /* @__PURE__ */ B({
+  __name: "Glitch",
+  props: {
+    blendFunction: { default: () => W.ADD },
+    delay: {},
+    duration: {},
+    strength: {},
+    mode: {},
+    active: { type: Boolean },
+    ratio: { default: 0.85 },
+    columns: { default: 0.05 },
+    chromaticAberrationOffset: {},
+    peturbationMap: {},
+    dtSize: { default: 64 }
+  },
+  setup(e, { expose: n }) {
+    const { state: l } = x(), a = b("effectComposer"), t = h(null), o = h(null);
+    n({ pass: t });
+    function s() {
+      o.value = new oe({
+        blendFunction: e.blendFunction,
+        delay: e.delay,
+        duration: e.duration,
+        strength: e.strength,
+        ratio: e.ratio,
+        columns: e.columns,
+        chromaticAberrationOffset: e.chromaticAberrationOffset,
+        dtSize: e.dtSize
+      }), t.value = new z(N(l.camera), v(o.value));
+    }
+    function c() {
+      var u, d;
+      (u = o.value) == null || u.dispose(), (d = t.value) == null || d.dispose(), a == null || a.value.removePass(v(t.value));
+    }
+    const f = y(
+      () => [l.camera, a == null ? void 0 : a.value],
+      () => {
+        var u;
+        l.camera && a && a.value && (s(), (u = a == null ? void 0 : a.value) == null || u.addPass(v(t.value)));
+      }
+    ), i = y(
+      () => [e.delay, e.duration, e.strength, e.ratio, e.columns, e.chromaticAberrationOffset, e.peturbationMap, e.dtSize],
+      () => {
+        var u;
+        t.value && (a == null || a.value.removePass(v(t.value)), s(), (u = a == null ? void 0 : a.value) == null || u.addPass(v(t.value)));
+      }
+    );
+    S(() => {
+      t.value && (t.value.mode = e.active ? e.mode || O.SPORADIC : O.DISABLED);
+    });
+    const r = y(
       () => e.active,
-      (o) => {
-        a.value && (a.value.enabled = o);
+      (u) => {
+        t.value && (t.value.enabled = u);
       }
-    ), () => {
+    );
+    return R(() => {
+      c(), f(), i(), r();
+    }), (u, d) => null;
+  }
+}), xe = B({
+  name: "Outline",
+  props: {
+    /**
+     * The objects in the scene which should have an outline.
+     */
+    outlinedObjects: {
+      type: Array,
+      requred: !0
+    },
+    /**
+     * The blend function. Use `BlendFunction.ALPHA` for dark outlines.
+     */
+    blendFunction: {
+      type: Number
+    },
+    patternTexture: {
+      type: Number
+    },
+    patternScale: {
+      type: Number
+    },
+    edgeStrength: {
+      type: Number
+    },
+    /**
+     * The pulse speed. A value of zero disables the pulse effect.
+     */
+    pulseSpeed: {
+      type: Number
+    },
+    visibleEdgeColor: {
+      type: [String, Number, Array]
+    },
+    hiddenEdgeColor: {
+      type: [String, Number, Array]
+    },
+    /**
+     * The number of samples used for multisample antialiasing. Requires WebGL 2.
+     */
+    multisampling: {
+      type: Number
+    },
+    resolutionScale: {
+      type: Number
+    },
+    resolutionX: {
+      type: Number
+    },
+    resolutionY: {
+      type: Number
+    },
+    /**
+     * The blur kernel size.
+     */
+    kernelSize: {
+      type: Number
+    },
+    blur: {
+      type: Boolean
+    },
+    /**
+     * Whether occluded parts of selected objects should be visible
+     */
+    xRay: {
+      type: Boolean
+    }
+  },
+  setup(e) {
+    const { state: n } = x(), l = b("effectComposer"), a = L(null), t = L(null), o = (i) => i instanceof A ? i : Array.isArray(i) ? new A(...i) : new A(i), s = (i) => i !== void 0 ? o(i).getHex() : void 0, c = G(() => {
+      const {
+        blur: i,
+        xRay: r,
+        kernelSize: u,
+        pulseSpeed: d,
+        resolutionX: m,
+        resolutionY: p,
+        patternScale: w,
+        edgeStrength: C,
+        blendFunction: E,
+        multisampling: P,
+        patternTexture: $,
+        resolutionScale: j,
+        hiddenEdgeColor: Q,
+        visibleEdgeColor: X
+      } = e;
+      return {
+        blur: i,
+        xRay: r,
+        kernelSize: u,
+        pulseSpeed: d,
+        resolutionX: m,
+        resolutionY: p,
+        patternScale: w,
+        edgeStrength: C,
+        blendFunction: E,
+        multisampling: P,
+        patternTexture: $,
+        resolutionScale: j,
+        hiddenEdgeColor: s(Q),
+        visibleEdgeColor: s(X)
+      };
+    }), f = S(() => {
+      var i;
+      n.camera && l && l.value && n.scene && (t.value = new T(n.scene, n.camera, c.value), a.value = new z(n.camera, t.value), (i = l.value) == null || i.addPass(a.value), f());
+    });
+    return y(
+      [() => e.outlinedObjects, t],
+      // whatchEffect is intentionally not used here as it would result in an endless loop
+      () => {
+        var i;
+        (i = t.value) == null || i.selection.set(e.outlinedObjects || []);
+      },
+      {
+        immediate: !0
+      }
+    ), S(() => {
+      if (!t.value)
+        return;
+      const i = new T(), {
+        blur: r,
+        xRay: u,
+        kernelSize: d,
+        pulseSpeed: m,
+        patternScale: p,
+        edgeStrength: w,
+        multisampling: C,
+        hiddenEdgeColor: E,
+        visibleEdgeColor: P
+      } = c.value;
+      t.value.blur = r !== void 0 ? r : i.blur, t.value.xRay = u !== void 0 ? u : i.xRay, t.value.pulseSpeed = m !== void 0 ? m : i.pulseSpeed, t.value.kernelSize = d !== void 0 ? d : i.kernelSize, t.value.edgeStrength = w !== void 0 ? w : i.edgeStrength, t.value.patternScale = p !== void 0 ? p : i.patternScale, t.value.multisampling = C !== void 0 ? C : i.multisampling, t.value.hiddenEdgeColor = E !== void 0 ? o(E) : i.hiddenEdgeColor, t.value.visibleEdgeColor = P !== void 0 ? o(P) : i.visibleEdgeColor, i.dispose();
+    }), R(() => {
+      var i, r, u, d;
+      (i = t.value) == null || i.selection.clear(), (r = l.value) == null || r.removePass(a.value), (u = t.value) == null || u.dispose(), (d = a.value) == null || d.dispose();
+    }), () => {
     };
   }
 });
 export {
-  he as Bloom,
-  pe as EffectComposer,
-  we as Glitch
+  Pe as Bloom,
+  Ee as EffectComposer,
+  Be as Glitch,
+  xe as Outline
 };

package/dist/tres-postprocessing.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.1.0
+ * version: v0.2.1
  * (c) 2023
- * description: Post-processing library for Tres
+ * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@tresjs/core"),require("three"),require("postprocessing")):typeof define=="function"&&define.amd?define(["exports","vue","@tresjs/core","three","postprocessing"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c["tres-postprocessing"]={},c.Vue,c.TresjsCore,c.Three,c.Postprocessing))})(this,function(c,t,C,S,h){"use strict";function b(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function g(e){return typeof e=="function"?e():t.unref(e)}const M=typeof window<"u",L=()=>{};function R(...e){if(e.length!==1)return t.toRef(...e);const n=e[0];return typeof n=="function"?t.readonly(t.customRef(()=>({get:n,set:L}))):t.ref(n)}function T(e,n=!0){t.getCurrentInstance()?t.onMounted(e):n?e():t.nextTick(e)}function B(e){var n;const r=g(e);return(n=r==null?void 0:r.$el)!=null?n:r}const E=M?window:void 0;function A(...e){let n,r,i,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([r,i,a]=e,n=E):[n,r,i,a]=e,!n)return L;Array.isArray(r)||(r=[r]),Array.isArray(i)||(i=[i]);const o=[],u=()=>{o.forEach(d=>d()),o.length=0},l=(d,w,p,m)=>(d.addEventListener(w,p,m),()=>d.removeEventListener(w,p,m)),f=t.watch(()=>[B(n),g(a)],([d,w])=>{u(),d&&o.push(...r.flatMap(p=>i.map(m=>l(d,p,m,w))))},{immediate:!0,flush:"post"}),s=()=>{f(),u()};return b(s),s}function j(){const e=t.ref(!1);return t.getCurrentInstance()&&t.onMounted(()=>{e.value=!0}),e}function x(e){const n=j();return t.computed(()=>(n.value,!!e()))}function G(e,n={}){const{window:r=E}=n,i=x(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let a;const o=t.ref(!1),u=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",l):a.removeListener(l))},l=()=>{i.value&&(u(),a=r.matchMedia(R(e).value),o.value=!!(a!=null&&a.matches),a&&("addEventListener"in a?a.addEventListener("change",l):a.addListener(l)))};return t.watchEffect(l),b(()=>u()),o}function W(e={}){const{window:n=E,initialWidth:r=1/0,initialHeight:i=1/0,listenOrientation:a=!0,includeScrollbar:o=!0}=e,u=t.ref(r),l=t.ref(i),f=()=>{n&&(o?(u.value=n.innerWidth,l.value=n.innerHeight):(u.value=n.document.documentElement.clientWidth,l.value=n.document.documentElement.clientHeight))};if(f(),T(f),A("resize",f,{passive:!0}),a){const s=G("(orientation: portrait)");t.watch(s,()=>f())}return{width:u,height:l}}let y;function z(){if(y!==void 0)return y;try{var e;let n;const r=document.createElement("canvas");return y=!!(window.WebGL2RenderingContext&&(n=r.getContext("webgl2"))),n&&((e=n.getExtension("WEBGL_lose_context"))===null||e===void 0||e.loseContext()),y}catch{return y=!1}}function P(){const{state:e,setState:n}=t.inject("useTres",C.useTres()),r=t.inject("extend")||(()=>{});return{state:e,setState:n,extend:r}}const O=t.defineComponent({name:"EffectComposer",props:["enabled","children","depthBuffer","dissableNormalPass","stencilBuffer","autoClear","resolutionScale","multisampling","frameBufferType","renderPriority","camera","scene"],setup(e,{slots:n}){const{state:r}=P(),{enabled:i=!0,renderPriority:a=1,autoClear:o=!0,multisampling:u=8,frameBufferType:l=S.HalfFloatType,resolutionScale:f}=t.toRefs(e),s=t.shallowRef(null),d=e.scene||r.scene,w=e.camera||r.camera;let p=null,m=null;const H=z();t.provide("effectComposer",s);const{width:I,height:N}=W();function k(){s.value&&(m=new h.NormalPass(d,w),m.enabled=!1,s.value.addPass(m),f.value!==void 0&&H&&(p=new h.DepthDownsamplingPass({normalBuffer:m.texture,resolutionScale:f==null?void 0:f.value}),p.enabled=!1,s.value.addPass(p)))}t.watchEffect(()=>{r.renderer&&r.scene&&r.camera&&(r.renderer.setSize(I.value,N.value),r.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),s.value=new h.EffectComposer(r.renderer),s.value.addPass(new h.RenderPass(d,w)),e.dissableNormalPass||k())}),t.watch(()=>e.enabled,v=>{s.value&&(s.value.enabled=v)});const{onLoop:Q}=C.useRenderLoop();return Q(()=>{s.value&&s.value.render()}),()=>{var v;return(v=n.default)==null?void 0:v.call(n)}}}),q=t.defineComponent({name:"Bloom",props:["intensity","blurPass","width","height","kernelSize","luminanceThreshold","luminanceSmoothing"],async setup(e,{expose:n}){const{state:r}=P(),i=t.inject("effectComposer"),a=t.ref(null);return n({getPass:()=>a.value}),t.watchEffect(()=>{var o;r.camera&&i&&i.value&&(a.value=new h.EffectPass(t.unref(r.camera),new h.BloomEffect(e)),(o=i==null?void 0:i.value)==null||o.addPass(t.toRaw(a.value)))}),()=>{}}}),D=t.defineComponent({name:"Glitch",props:["delay","duration","strength","mode","active","ratio","columns","chromaticAberrationOffset","peturbationMap","dtSize"],async setup(e,{expose:n}){const{state:r}=P(),i=t.inject("effectComposer"),a=t.ref(null);return n({getPass:()=>a.value}),t.watchEffect(()=>{var o;r.camera&&i&&i.value&&(a.value=new h.EffectPass(t.unref(r.camera),new h.GlitchEffect(e)),(o=i==null?void 0:i.value)==null||o.addPass(t.toRaw(a.value)))}),t.watch(()=>e.active,o=>{a.value&&(a.value.enabled=o)}),()=>{}}});c.Bloom=q,c.EffectComposer=O,c.Glitch=D,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("three"),require("@tresjs/core"),require("postprocessing")):typeof define=="function"&&define.amd?define(["exports","vue","three","@tresjs/core","postprocessing"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v["tres-postprocessing"]={},v.Vue,v.Three,v.TresjsCore,v.Postprocessing))})(this,function(v,t,b,A,m){"use strict";function S(){const{state:e,setState:a}=t.inject("useTres",A.useTres()),i=t.inject("extend")||(()=>{});return{state:e,setState:a,extend:i}}let w;function M(){var e;if(w!==void 0)return w;try{let a;const i=document.createElement("canvas");return w=!!(window.WebGL2RenderingContext&&(a=i.getContext("webgl2"))),a&&((e=a.getExtension("WEBGL_lose_context"))==null||e.loseContext()),w}catch{return w=!1}}function R(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function x(e){return typeof e=="function"?e():t.unref(e)}const N=typeof window<"u",L=()=>{};function O(...e){if(e.length!==1)return t.toRef(...e);const a=e[0];return typeof a=="function"?t.readonly(t.customRef(()=>({get:a,set:L}))):t.ref(a)}function T(e,a=!0){t.getCurrentInstance()?t.onMounted(e):a?e():t.nextTick(e)}function z(e){var a;const i=x(e);return(a=i==null?void 0:i.$el)!=null?a:i}const p=N?window:void 0;function j(...e){let a,i,l,n;if(typeof e[0]=="string"||Array.isArray(e[0])?([i,l,n]=e,a=p):[a,i,l,n]=e,!a)return L;Array.isArray(i)||(i=[i]),Array.isArray(l)||(l=[l]);const c=[],s=()=>{c.forEach(u=>u()),c.length=0},d=(u,o,f,y)=>(u.addEventListener(o,f,y),()=>u.removeEventListener(o,f,y)),h=t.watch(()=>[z(a),x(n)],([u,o])=>{s(),u&&c.push(...i.flatMap(f=>l.map(y=>d(u,f,y,o))))},{immediate:!0,flush:"post"}),r=()=>{h(),s()};return R(r),r}function F(){const e=t.ref(!1);return t.getCurrentInstance()&&t.onMounted(()=>{e.value=!0}),e}function D(e){const a=F();return t.computed(()=>(a.value,!!e()))}function G(e,a={}){const{window:i=p}=a,l=D(()=>i&&"matchMedia"in i&&typeof i.matchMedia=="function");let n;const c=t.ref(!1),s=()=>{n&&("removeEventListener"in n?n.removeEventListener("change",d):n.removeListener(d))},d=()=>{l.value&&(s(),n=i.matchMedia(O(e).value),c.value=!!(n!=null&&n.matches),n&&("addEventListener"in n?n.addEventListener("change",d):n.addListener(d)))};return t.watchEffect(d),R(()=>s()),c}function W(e={}){const{window:a=p,initialWidth:i=1/0,initialHeight:l=1/0,listenOrientation:n=!0,includeScrollbar:c=!0}=e,s=t.ref(i),d=t.ref(l),h=()=>{a&&(c?(s.value=a.innerWidth,d.value=a.innerHeight):(s.value=a.document.documentElement.clientWidth,d.value=a.document.documentElement.clientHeight))};if(h(),T(h),j("resize",h,{passive:!0}),n){const r=G("(orientation: portrait)");t.watch(r,()=>h())}return{width:s,height:d}}const k=t.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean},dissableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:8},frameBufferType:{default:()=>b.HalfFloatType},scene:{},camera:{}},setup(e){const{state:a}=S(),i=t.shallowRef(null),l=e.scene||a.scene,n=e.camera||a.camera;let c=null,s=null;const d=M();t.provide("effectComposer",i);const{width:h,height:r}=W();function u(){i.value&&(s=new m.NormalPass(e.scene,e.camera),s.enabled=!1,i.value.addPass(s),e.resolutionScale!==void 0&&d&&(c=new m.DepthDownsamplingPass({normalBuffer:s.texture,resolutionScale:e.resolutionScale}),c.enabled=!1,i.value.addPass(c)))}t.watchEffect(()=>{a.renderer&&(a.renderer.setSize(h.value,r.value),a.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),i.value=new m.EffectComposer(a.renderer,{depthBuffer:e.depthBuffer,stencilBuffer:e.stencilBuffer,multisampling:e.multisampling>0&&d?e.multisampling:0,frameBufferType:e.frameBufferType}),i.value.addPass(new m.RenderPass(l,n)),e.dissableNormalPass||u())});const{onLoop:o}=A.useRenderLoop();return o(()=>{i.value&&i.value.render()}),o(({delta:f})=>{if(e.enabled&&a.renderer&&i.value){const y=a.renderer.autoClear;a.renderer.autoClear=e.autoClear,e.stencilBuffer&&!e.autoClear&&a.renderer.clearStencil(),i.value.render(f),a.renderer.autoClear=y}}),(f,y)=>t.renderSlot(f.$slots,"default")}}),I=t.defineComponent({__name:"Bloom",props:{blendFunction:{default:()=>m.BlendFunction.ADD},intensity:{default:1},blurPass:{},width:{},height:{},kernelSize:{},luminanceThreshold:{default:.9},luminanceSmoothing:{default:.025},mipmapBlur:{type:Boolean,default:!1}},setup(e,{expose:a}){const{state:i}=S(),l=t.inject("effectComposer"),n=t.ref(null),c=t.ref(null);a({pass:n,effect:c});function s(){c.value=new m.BloomEffect({blendFunction:e.blendFunction,mipmapBlur:e.mipmapBlur,intensity:e.intensity,luminanceThreshold:e.luminanceThreshold,luminanceSmoothing:e.luminanceSmoothing}),n.value=new m.EffectPass(t.unref(i.camera),t.toRaw(c.value))}function d(){var u,o;(u=c.value)==null||u.dispose(),(o=n.value)==null||o.dispose(),l==null||l.value.removePass(t.toRaw(n.value))}const h=t.watch(()=>[i.camera,l==null?void 0:l.value],()=>{var u;i.camera&&l&&l.value&&(s(),(u=l==null?void 0:l.value)==null||u.addPass(t.toRaw(n.value)))}),r=t.watch(()=>[e.blendFunction,e.mipmapBlur,e.intensity,e.luminanceThreshold,e.luminanceSmoothing],()=>{var u;n.value&&(d(),s(),(u=l==null?void 0:l.value)==null||u.addPass(t.toRaw(n.value)))});return t.onUnmounted(()=>{d(),h(),r()}),(u,o)=>null}}),q=t.defineComponent({__name:"Glitch",props:{blendFunction:{default:()=>m.BlendFunction.ADD},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{default:.85},columns:{default:.05},chromaticAberrationOffset:{},peturbationMap:{},dtSize:{default:64}},setup(e,{expose:a}){const{state:i}=S(),l=t.inject("effectComposer"),n=t.ref(null),c=t.ref(null);a({pass:n});function s(){c.value=new m.GlitchEffect({blendFunction:e.blendFunction,delay:e.delay,duration:e.duration,strength:e.strength,ratio:e.ratio,columns:e.columns,chromaticAberrationOffset:e.chromaticAberrationOffset,dtSize:e.dtSize}),n.value=new m.EffectPass(t.unref(i.camera),t.toRaw(c.value))}function d(){var o,f;(o=c.value)==null||o.dispose(),(f=n.value)==null||f.dispose(),l==null||l.value.removePass(t.toRaw(n.value))}const h=t.watch(()=>[i.camera,l==null?void 0:l.value],()=>{var o;i.camera&&l&&l.value&&(s(),(o=l==null?void 0:l.value)==null||o.addPass(t.toRaw(n.value)))}),r=t.watch(()=>[e.delay,e.duration,e.strength,e.ratio,e.columns,e.chromaticAberrationOffset,e.peturbationMap,e.dtSize],()=>{var o;n.value&&(l==null||l.value.removePass(t.toRaw(n.value)),s(),(o=l==null?void 0:l.value)==null||o.addPass(t.toRaw(n.value)))});t.watchEffect(()=>{n.value&&(n.value.mode=e.active?e.mode||m.GlitchMode.SPORADIC:m.GlitchMode.DISABLED)});const u=t.watch(()=>e.active,o=>{n.value&&(n.value.enabled=o)});return t.onUnmounted(()=>{d(),h(),r(),u()}),(o,f)=>null}}),$=t.defineComponent({name:"Outline",props:{outlinedObjects:{type:Array,requred:!0},blendFunction:{type:Number},patternTexture:{type:Number},patternScale:{type:Number},edgeStrength:{type:Number},pulseSpeed:{type:Number},visibleEdgeColor:{type:[String,Number,Array]},hiddenEdgeColor:{type:[String,Number,Array]},multisampling:{type:Number},resolutionScale:{type:Number},resolutionX:{type:Number},resolutionY:{type:Number},kernelSize:{type:Number},blur:{type:Boolean},xRay:{type:Boolean}},setup(e){const{state:a}=S(),i=t.inject("effectComposer"),l=t.shallowRef(null),n=t.shallowRef(null),c=r=>r instanceof b.Color?r:Array.isArray(r)?new b.Color(...r):new b.Color(r),s=r=>r!==void 0?c(r).getHex():void 0,d=t.computed(()=>{const{blur:r,xRay:u,kernelSize:o,pulseSpeed:f,resolutionX:y,resolutionY:g,patternScale:C,edgeStrength:E,blendFunction:P,multisampling:B,patternTexture:U,resolutionScale:H,hiddenEdgeColor:Q,visibleEdgeColor:V}=e;return{blur:r,xRay:u,kernelSize:o,pulseSpeed:f,resolutionX:y,resolutionY:g,patternScale:C,edgeStrength:E,blendFunction:P,multisampling:B,patternTexture:U,resolutionScale:H,hiddenEdgeColor:s(Q),visibleEdgeColor:s(V)}}),h=t.watchEffect(()=>{var r;a.camera&&i&&i.value&&a.scene&&(n.value=new m.OutlineEffect(a.scene,a.camera,d.value),l.value=new m.EffectPass(a.camera,n.value),(r=i.value)==null||r.addPass(l.value),h())});return t.watch([()=>e.outlinedObjects,n],()=>{var r;(r=n.value)==null||r.selection.set(e.outlinedObjects||[])},{immediate:!0}),t.watchEffect(()=>{if(!n.value)return;const r=new m.OutlineEffect,{blur:u,xRay:o,kernelSize:f,pulseSpeed:y,patternScale:g,edgeStrength:C,multisampling:E,hiddenEdgeColor:P,visibleEdgeColor:B}=d.value;n.value.blur=u!==void 0?u:r.blur,n.value.xRay=o!==void 0?o:r.xRay,n.value.pulseSpeed=y!==void 0?y:r.pulseSpeed,n.value.kernelSize=f!==void 0?f:r.kernelSize,n.value.edgeStrength=C!==void 0?C:r.edgeStrength,n.value.patternScale=g!==void 0?g:r.patternScale,n.value.multisampling=E!==void 0?E:r.multisampling,n.value.hiddenEdgeColor=P!==void 0?c(P):r.hiddenEdgeColor,n.value.visibleEdgeColor=B!==void 0?c(B):r.visibleEdgeColor,r.dispose()}),t.onUnmounted(()=>{var r,u,o,f;(r=n.value)==null||r.selection.clear(),(u=i.value)==null||u.removePass(l.value),(o=n.value)==null||o.dispose(),(f=l.value)==null||f.dispose()}),()=>{}}});v.Bloom=I,v.EffectComposer=k,v.Glitch=q,v.Outline=$,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});