@tresjs/post-processing 0.4.0 → 0.6.0-next.0

package/dist/tres-postprocessing.js

@@ -1,15 +1,64 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.4.0
+ * version: v0.6.0-next.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { defineComponent as _, inject as T, shallowRef as g, watchEffect as h, onUnmounted as w, computed as j, watch as F, provide as H, renderSlot as I } from "vue";
-import { useTresContext as P, normalizeColor as z, useRenderLoop as X } from "@tresjs/core";
-import { BloomEffect as O, EffectPass as M, GlitchEffect as k, GlitchMode as Y, OutlineEffect as A, EffectComposer as R, RenderPass as K, NormalPass as U, DepthDownsamplingPass as q } from "postprocessing";
-import { HalfFloatType as G } from "three";
-const x = Symbol(), ee = /* @__PURE__ */ _({
+import { inject as W, shallowRef as _, watchEffect as v, onUnmounted as A, watch as w, defineComponent as f, computed as M, provide as j, renderSlot as X } from "vue";
+import { EffectPass as Y, BloomEffect as y, GlitchEffect as b, GlitchMode as H, OutlineEffect as P, PixelationEffect as F, DepthOfFieldEffect as R, BlendFunction as I, NoiseEffect as O, EffectComposer as z, RenderPass as U, NormalPass as K, DepthDownsamplingPass as q } from "postprocessing";
+import { useTresContext as S, normalizeColor as C, useRenderLoop as J } from "@tresjs/core";
+import { HalfFloatType as D } from "three";
+const N = Symbol(), p = (a) => {
+  const t = W(N), e = _(null), n = _(null), { scene: o, camera: l } = S();
+  v(() => {
+    !l.value || !(n != null && n.value) || (n.value.mainCamera = l.value);
+  });
+  let s = () => {
+  };
+  return s = v(() => {
+    !l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new Y(l.value, n.value), t.value.addPass(e.value)));
+  }), A(() => {
+    var r, i, d;
+    e.value && ((r = t == null ? void 0 : t.value) == null || r.removePass(e.value)), (i = n.value) == null || i.dispose(), (d = e.value) == null || d.dispose();
+  }), {
+    pass: e,
+    effect: n
+  };
+}, G = /([^[.\]])+/g, Q = (a, t) => {
+  if (!t)
+    return;
+  const e = Array.isArray(t) ? t : t.match(G);
+  return e == null ? void 0 : e.reduce((n, o) => n && n[o], a);
+}, T = (a, t, e) => {
+  const n = Array.isArray(t) ? t : t.match(G);
+  n && n.reduce((o, l, s) => (o[l] === void 0 && (o[l] = {}), s === n.length - 1 && (o[l] = e), o[l]), a);
+}, V = (a, t) => {
+  const e = { ...a };
+  return t.forEach((n) => delete e[n]), e;
+}, L = (a, t, e, n, o = {}) => w(
+  a,
+  (l) => {
+    var s;
+    if (t.value)
+      if (l === void 0) {
+        const r = n();
+        T(t.value, e, Q(r, e)), (s = r.dispose) == null || s.call(r);
+      } else
+        T(t.value, e, a());
+  },
+  o
+), E = (a, t, e) => a.map(([n, o]) => L(
+  n,
+  t,
+  o,
+  e
+)), B = (a, t, e) => Object.keys(a).map((n) => L(
+  () => a[n],
+  t,
+  n,
+  e
+)), oe = /* @__PURE__ */ f({
   __name: "Bloom",
   props: {
     blendFunction: {},
@@ -17,26 +66,23 @@ const x = Symbol(), ee = /* @__PURE__ */ _({
     kernelSize: {},
     luminanceThreshold: {},
     luminanceSmoothing: {},
-    mipmapBlur: { type: Boolean }
+    mipmapBlur: { type: Boolean, default: void 0 }
   },
-  setup(f, { expose: o }) {
-    const l = f, n = T(x), t = g(null), e = g(null);
-    o({ pass: t, effect: e });
-    const { camera: i } = P();
-    let s;
-    return s = h(() => {
-      !i.value || !(n != null && n.value) || (s == null || s(), !e.value && (e.value = new O(l), t.value = new M(i.value, e.value), n.value.addPass(t.value)));
-    }), h(() => {
-      if (!e.value)
-        return;
-      const a = new O();
-      e.value.intensity = l.intensity !== void 0 ? l.intensity : a.intensity, e.value.kernelSize = l.kernelSize !== void 0 ? l.kernelSize : a.kernelSize, e.value.luminanceMaterial.smoothing = l.luminanceSmoothing !== void 0 ? l.luminanceSmoothing : a.luminanceMaterial.smoothing, e.value.luminanceMaterial.threshold = l.luminanceThreshold !== void 0 ? l.luminanceThreshold : a.luminanceMaterial.threshold, a.dispose();
-    }), w(() => {
-      var a, d, v;
-      t.value && ((a = n == null ? void 0 : n.value) == null || a.removePass(t.value)), (d = e.value) == null || d.dispose(), (v = t.value) == null || v.dispose();
-    }), (a, d) => null;
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = p(() => new y(e));
+    return t({ pass: n, effect: o }), E(
+      [
+        // blendFunction is not updated, because it has no setter in BloomEffect
+        [() => e.intensity, "intensity"],
+        [() => e.kernelSize, "kernelSize"],
+        [() => e.luminanceSmoothing, "luminanceMaterial.smoothing"],
+        [() => e.luminanceThreshold, "luminanceMaterial.threshold"]
+      ],
+      o,
+      () => new y()
+    ), (l, s) => null;
   }
-}), le = /* @__PURE__ */ _({
+}), le = /* @__PURE__ */ f({
   __name: "Glitch",
   props: {
     blendFunction: {},
@@ -51,29 +97,28 @@ const x = Symbol(), ee = /* @__PURE__ */ _({
     perturbationMap: {},
     dtSize: {}
   },
-  setup(f, { expose: o }) {
-    const l = f, n = T(x), t = g(null), e = g(null);
-    o({ pass: t, effect: e });
-    const { camera: i } = P();
-    let s;
-    return s = h(() => {
-      !i.value || !(n != null && n.value) || (s == null || s(), !e.value && (e.value = new k(l), t.value = new M(i.value, e.value), n.value.addPass(t.value)));
-    }), h(() => {
-      if (!e.value)
-        return;
-      const a = new k(), d = () => l.mode !== void 0 ? l.active === !1 ? Y.DISABLED : l.mode : a.mode;
-      e.value.mode = d(), e.value.ratio = l.ratio !== void 0 ? l.ratio : a.ratio, e.value.delay = l.delay !== void 0 ? l.delay : a.delay, e.value.columns = l.columns !== void 0 ? l.columns : a.columns, e.value.duration = l.duration !== void 0 ? l.duration : a.duration, e.value.strength = l.strength !== void 0 ? l.strength : a.strength, e.value.perturbationMap = l.perturbationMap !== void 0 ? l.perturbationMap : a.perturbationMap, e.value.chromaticAberrationOffset = l.chromaticAberrationOffset !== void 0 ? l.chromaticAberrationOffset : a.chromaticAberrationOffset;
-    }), w(() => {
-      var a, d, v;
-      t.value && ((a = n == null ? void 0 : n.value) == null || a.removePass(t.value)), (d = e.value) == null || d.dispose(), (v = t.value) == null || v.dispose();
-    }), (a, d) => null;
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = p(() => new b(e));
+    return t({ pass: n, effect: o }), v(() => {
+      const l = () => {
+        if (e.mode !== void 0)
+          return e.active === !1 ? H.DISABLED : e.mode;
+        const s = new b(), r = s.mode;
+        return s.dispose(), r;
+      };
+      o.value && (o.value.mode = l());
+    }), B(
+      V(e, ["active", "mode", "blendFunction"]),
+      o,
+      () => new b()
+    ), (l, s) => null;
   }
-}), ae = /* @__PURE__ */ _({
+}), ae = /* @__PURE__ */ f({
   __name: "Outline",
   props: {
     outlinedObjects: {},
-    blur: { type: Boolean },
-    xRay: { type: Boolean },
+    blur: { type: Boolean, default: void 0 },
+    xRay: { type: Boolean, default: void 0 },
     kernelSize: {},
     pulseSpeed: {},
     resolutionX: {},
@@ -87,91 +132,134 @@ const x = Symbol(), ee = /* @__PURE__ */ _({
     hiddenEdgeColor: {},
     visibleEdgeColor: {}
   },
-  setup(f, { expose: o }) {
-    const l = f, n = T(x), t = g(null), e = g(null);
-    o({ pass: t, effect: e });
-    const i = (u) => u !== void 0 ? z(u).getHex() : void 0, s = j(() => {
-      const {
-        blur: u,
-        xRay: c,
-        kernelSize: p,
-        pulseSpeed: r,
-        resolutionX: m,
-        resolutionY: S,
-        patternScale: B,
-        edgeStrength: C,
-        multisampling: y,
-        blendFunction: E,
-        patternTexture: N,
-        resolutionScale: D,
-        hiddenEdgeColor: $,
-        visibleEdgeColor: W
-      } = l;
-      return {
-        blur: u,
-        xRay: c,
-        kernelSize: p,
-        pulseSpeed: r,
-        resolutionX: m,
-        resolutionY: S,
-        patternScale: B,
-        edgeStrength: C,
-        blendFunction: E,
-        multisampling: y,
-        patternTexture: N,
-        resolutionScale: D,
-        hiddenEdgeColor: i($),
-        visibleEdgeColor: i(W)
-      };
-    }), { camera: a, scene: d } = P();
-    let v;
-    return v = h(() => {
-      !a.value || !(n != null && n.value) || !d.value || (v == null || v(), !e.value && (e.value = new A(d.value, a.value, s.value), t.value = new M(a.value, e.value), n.value.addPass(t.value)));
-    }), F(
-      [() => l.outlinedObjects, e],
+  setup(a, { expose: t }) {
+    const e = a, n = (c) => c !== void 0 ? C(c).getHex() : void 0, { camera: o, scene: l } = S(), s = {
+      blur: e.blur,
+      xRay: e.xRay,
+      kernelSize: e.kernelSize,
+      pulseSpeed: e.pulseSpeed,
+      resolutionX: e.resolutionX,
+      resolutionY: e.resolutionY,
+      patternScale: e.patternScale,
+      edgeStrength: e.edgeStrength,
+      blendFunction: e.blendFunction,
+      multisampling: e.multisampling,
+      patternTexture: e.patternTexture,
+      resolutionScale: e.resolutionScale,
+      hiddenEdgeColor: n(e.hiddenEdgeColor),
+      visibleEdgeColor: n(e.visibleEdgeColor)
+    }, { pass: r, effect: i } = p(() => new P(l.value, o.value, s));
+    t({ pass: r, effect: i }), w(
+      [() => e.outlinedObjects, i],
       // watchEffect is intentionally not used here as it would result in an endless loop
       () => {
-        var u;
-        (u = e.value) == null || u.selection.set(l.outlinedObjects || []);
+        var c;
+        (c = i.value) == null || c.selection.set(e.outlinedObjects || []);
       },
       {
         immediate: !0
       }
-    ), h(() => {
-      if (!e.value)
-        return;
-      const u = new A(), {
-        blur: c,
-        xRay: p,
-        kernelSize: r,
-        pulseSpeed: m,
-        patternScale: S,
-        edgeStrength: B,
-        multisampling: C,
-        hiddenEdgeColor: y,
-        visibleEdgeColor: E
-      } = s.value;
-      e.value.blur = c !== void 0 ? c : u.blur, e.value.xRay = p !== void 0 ? p : u.xRay, e.value.pulseSpeed = m !== void 0 ? m : u.pulseSpeed, e.value.kernelSize = r !== void 0 ? r : u.kernelSize, e.value.edgeStrength = B !== void 0 ? B : u.edgeStrength, e.value.patternScale = S !== void 0 ? S : u.patternScale, e.value.multisampling = C !== void 0 ? C : u.multisampling, e.value.hiddenEdgeColor = y !== void 0 ? z(y) : u.hiddenEdgeColor, e.value.visibleEdgeColor = E !== void 0 ? z(E) : u.visibleEdgeColor, u.dispose();
-    }), w(() => {
-      var u, c, p, r;
-      (u = e.value) == null || u.selection.clear(), t.value && ((c = n == null ? void 0 : n.value) == null || c.removePass(t.value)), (p = e.value) == null || p.dispose(), (r = t.value) == null || r.dispose();
-    }), (u, c) => null;
+    );
+    const d = M(() => ({
+      hiddenEdgeColor: e.hiddenEdgeColor ? C(e.hiddenEdgeColor) : void 0,
+      visibleEdgeColor: e.visibleEdgeColor ? C(e.visibleEdgeColor) : void 0
+    }));
+    return E(
+      [
+        /* some properties are not updated because of different reasons:
+            resolutionX - has no setter in OutlineEffect
+            resolutionY - has no setter in OutlineEffect
+            blendFunction - has no setter in OutlineEffect
+            patternTexture - different type in constructor and in setter
+            resolutionScale - has no setter in OutlineEffect
+          */
+        [() => e.blur, "blur"],
+        [() => e.xRay, "xRay"],
+        [() => e.pulseSpeed, "pulseSpeed"],
+        [() => e.kernelSize, "kernelSize"],
+        [() => e.edgeStrength, "edgeStrength"],
+        [() => e.patternScale, "patternScale"],
+        [() => e.multisampling, "multisampling"],
+        [() => d.value.hiddenEdgeColor, "hiddenEdgeColor"],
+        [() => d.value.visibleEdgeColor, "visibleEdgeColor"]
+      ],
+      i,
+      () => new P()
+    ), (c, x) => null;
+  }
+}), se = /* @__PURE__ */ f({
+  __name: "Pixelation",
+  props: {
+    granularity: {}
+  },
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = p(() => new F(e.granularity));
+    return t({ pass: n, effect: o }), B(
+      e,
+      o,
+      () => new F()
+    ), (l, s) => null;
+  }
+}), re = /* @__PURE__ */ f({
+  __name: "DepthOfField",
+  props: {
+    blendFunction: {},
+    worldFocusDistance: {},
+    worldFocusRange: {},
+    focusDistance: {},
+    focusRange: {},
+    bokehScale: {},
+    resolutionScale: {},
+    resolutionX: {},
+    resolutionY: {}
+  },
+  setup(a, { expose: t }) {
+    const e = a, { camera: n } = S(), { pass: o, effect: l } = p(() => new R(n.value, e));
+    return t({ pass: o, effect: l }), E(
+      [
+        // blendFunction is not updated, because it has no setter in BloomEffect
+        [() => e.worldFocusDistance, "circleOfConfusionMaterial.worldFocusDistance"],
+        [() => e.focusDistance, "circleOfConfusionMaterial.focusDistance"],
+        [() => e.worldFocusRange, "circleOfConfusionMaterial.worldFocusRange"],
+        [() => e.focusRange, "circleOfConfusionMaterial.focusRange"],
+        [() => e.bokehScale, "bokehScale"],
+        [() => e.resolutionScale, "blurPass.resolution.scale"],
+        [() => e.resolutionX, "resolution.width"],
+        [() => e.resolutionY, "resolution.height"]
+      ],
+      l,
+      () => new R()
+    ), (s, r) => null;
+  }
+}), ie = /* @__PURE__ */ f({
+  __name: "Noise",
+  props: {
+    premultiply: { type: Boolean, default: !1 },
+    blendFunction: { default: I.SCREEN }
+  },
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = p(() => new O(e));
+    return t({ pass: n, effect: o }), B(
+      e,
+      o,
+      () => new O()
+    ), (l, s) => null;
   }
 });
-let b;
-function L() {
-  var f;
-  if (b !== void 0)
-    return b;
+let m;
+function k() {
+  var a;
+  if (m !== void 0)
+    return m;
   try {
-    let o;
-    const l = document.createElement("canvas");
-    return b = !!(window.WebGL2RenderingContext && (o = l.getContext("webgl2"))), o && ((f = o.getExtension("WEBGL_lose_context")) == null || f.loseContext()), b;
+    let t;
+    const e = document.createElement("canvas");
+    return m = !!(window.WebGL2RenderingContext && (t = e.getContext("webgl2"))), t && ((a = t.getExtension("WEBGL_lose_context")) == null || a.loseContext()), m;
   } catch {
-    return b = !1;
+    return m = !1;
   }
 }
-const te = /* @__PURE__ */ _({
+const ue = /* @__PURE__ */ f({
   __name: "EffectComposer",
   props: {
     enabled: { type: Boolean, default: !0 },
@@ -182,48 +270,57 @@ const te = /* @__PURE__ */ _({
     resolutionScale: {},
     autoClear: { type: Boolean, default: !0 },
     multisampling: { default: 0 },
-    frameBufferType: { default: G }
+    frameBufferType: { default: D }
   },
-  setup(f) {
-    const o = f, { scene: l, camera: n, renderer: t, sizes: e } = P(), i = g(null);
-    let s = null, a = null;
-    H(x, i);
+  setup(a) {
+    const t = a, { scene: e, camera: n, renderer: o, sizes: l } = S(), s = _(null);
+    let r = null, i = null;
+    j(N, s);
     const d = () => {
-      i.value && (a = new U(l.value, n.value), a.enabled = !1, i.value.addPass(a), o.resolutionScale !== void 0 && L() && (s = new q({
-        normalBuffer: a.texture,
-        resolutionScale: o.resolutionScale
-      }), s.enabled = !1, i.value.addPass(s)));
+      s.value && (i = new K(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && k() && (r = new q({
+        normalBuffer: i.texture,
+        resolutionScale: t.resolutionScale
+      }), r.enabled = !1, s.value.addPass(r)));
     };
-    h(() => {
-      i.value && e.width.value && e.height.value && i.value.setSize(e.width.value, e.height.value);
+    v(() => {
+      s.value && l.width.value && l.height.value && s.value.setSize(l.width.value, l.height.value);
     });
-    const v = j(() => {
-      const r = new R(), m = {
-        depthBuffer: o.depthBuffer !== void 0 ? o.depthBuffer : r.inputBuffer.depthBuffer,
-        stencilBuffer: o.stencilBuffer !== void 0 ? o.stencilBuffer : r.inputBuffer.stencilBuffer,
-        multisampling: L() ? 0 : o.multisampling !== void 0 ? o.multisampling : r.multisampling,
-        frameBufferType: o.frameBufferType !== void 0 ? o.frameBufferType : G
+    const c = M(() => {
+      const u = new z(), g = {
+        depthBuffer: t.depthBuffer !== void 0 ? t.depthBuffer : u.inputBuffer.depthBuffer,
+        stencilBuffer: t.stencilBuffer !== void 0 ? t.stencilBuffer : u.inputBuffer.stencilBuffer,
+        multisampling: k() ? 0 : t.multisampling !== void 0 ? t.multisampling : u.multisampling,
+        frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : D
       };
-      return r.dispose(), m;
-    }), u = () => {
-      !t.value && !l.value && !n.value || (i.value = new R(t.value, v.value), i.value.addPass(new K(l.value, n.value)), o.disableNormalPass || d());
-    }, c = F([e.height, e.width], () => {
-      !e.height.value && !e.width.value || (h(u), c == null || c());
-    }), { onLoop: p } = X();
-    return p(({ delta: r }) => {
-      if (o.enabled && t.value && i.value && e.width.value && e.height.value) {
-        const m = t.value.autoClear;
-        t.value.autoClear = o.autoClear, o.stencilBuffer && !o.autoClear && t.value.clearStencil(), i.value.render(r), t.value.autoClear = m;
+      return u.dispose(), g;
+    }), x = () => {
+      !o.value && !e.value && !n.value || (s.value = new z(o.value, c.value), s.value.addPass(new U(e.value, n.value)), t.disableNormalPass || d());
+    };
+    let h = () => {
+    };
+    h = w([l.height, l.width], () => {
+      !l.height.value && !l.width.value || (v(x), h == null || h());
+    }, {
+      immediate: !0
+    });
+    const { onLoop: $ } = J();
+    return $(({ delta: u }) => {
+      if (t.enabled && o.value && s.value && l.width.value && l.height.value) {
+        const g = o.value.autoClear;
+        o.value.autoClear = t.autoClear, t.stencilBuffer && !t.autoClear && o.value.clearStencil(), s.value.render(u), o.value.autoClear = g;
       }
-    }), w(() => {
-      var r;
-      (r = i.value) == null || r.dispose();
-    }), (r, m) => I(r.$slots, "default");
+    }), A(() => {
+      var u;
+      (u = s.value) == null || u.dispose();
+    }), (u, g) => X(u.$slots, "default");
   }
 });
 export {
-  ee as Bloom,
-  te as EffectComposer,
+  oe as Bloom,
+  re as DepthOfField,
+  ue as EffectComposer,
   le as Glitch,
-  ae as Outline
+  ie as Noise,
+  ae as Outline,
+  se as Pixelation
 };

package/dist/tres-postprocessing.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.4.0
+ * version: v0.6.0-next.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(v,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("@tresjs/core"),require("postprocessing"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@tresjs/core","postprocessing","three"],l):(v=typeof globalThis<"u"?globalThis:v||self,l(v["tres-postprocessing"]={},v.Vue,v.TresjsCore,v.Postprocessing,v.Three))})(this,function(v,l,S,d,x){"use strict";const E=Symbol(),z=l.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const{camera:r}=S.useTresContext();let f;return f=l.watchEffect(()=>{!r.value||!(o!=null&&o.value)||(f==null||f(),!e.value&&(e.value=new d.BloomEffect(t),n.value=new d.EffectPass(r.value,e.value),o.value.addPass(n.value)))}),l.watchEffect(()=>{if(!e.value)return;const a=new d.BloomEffect;e.value.intensity=t.intensity!==void 0?t.intensity:a.intensity,e.value.kernelSize=t.kernelSize!==void 0?t.kernelSize:a.kernelSize,e.value.luminanceMaterial.smoothing=t.luminanceSmoothing!==void 0?t.luminanceSmoothing:a.luminanceMaterial.smoothing,e.value.luminanceMaterial.threshold=t.luminanceThreshold!==void 0?t.luminanceThreshold:a.luminanceMaterial.threshold,a.dispose()}),l.onUnmounted(()=>{var a,c,m;n.value&&((a=o==null?void 0:o.value)==null||a.removePass(n.value)),(c=e.value)==null||c.dispose(),(m=n.value)==null||m.dispose()}),(a,c)=>null}}),R=l.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const{camera:r}=S.useTresContext();let f;return f=l.watchEffect(()=>{!r.value||!(o!=null&&o.value)||(f==null||f(),!e.value&&(e.value=new d.GlitchEffect(t),n.value=new d.EffectPass(r.value,e.value),o.value.addPass(n.value)))}),l.watchEffect(()=>{if(!e.value)return;const a=new d.GlitchEffect,c=()=>t.mode!==void 0?t.active===!1?d.GlitchMode.DISABLED:t.mode:a.mode;e.value.mode=c(),e.value.ratio=t.ratio!==void 0?t.ratio:a.ratio,e.value.delay=t.delay!==void 0?t.delay:a.delay,e.value.columns=t.columns!==void 0?t.columns:a.columns,e.value.duration=t.duration!==void 0?t.duration:a.duration,e.value.strength=t.strength!==void 0?t.strength:a.strength,e.value.perturbationMap=t.perturbationMap!==void 0?t.perturbationMap:a.perturbationMap,e.value.chromaticAberrationOffset=t.chromaticAberrationOffset!==void 0?t.chromaticAberrationOffset:a.chromaticAberrationOffset}),l.onUnmounted(()=>{var a,c,m;n.value&&((a=o==null?void 0:o.value)==null||a.removePass(n.value)),(c=e.value)==null||c.dispose(),(m=n.value)==null||m.dispose()}),(a,c)=>null}}),O=l.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean},xRay:{type:Boolean},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const r=u=>u!==void 0?S.normalizeColor(u).getHex():void 0,f=l.computed(()=>{const{blur:u,xRay:p,kernelSize:g,pulseSpeed:s,resolutionX:C,resolutionY:w,patternScale:y,edgeStrength:B,multisampling:P,blendFunction:_,patternTexture:M,resolutionScale:k,hiddenEdgeColor:A,visibleEdgeColor:G}=t;return{blur:u,xRay:p,kernelSize:g,pulseSpeed:s,resolutionX:C,resolutionY:w,patternScale:y,edgeStrength:B,blendFunction:_,multisampling:P,patternTexture:M,resolutionScale:k,hiddenEdgeColor:r(A),visibleEdgeColor:r(G)}}),{camera:a,scene:c}=S.useTresContext();let m;return m=l.watchEffect(()=>{!a.value||!(o!=null&&o.value)||!c.value||(m==null||m(),!e.value&&(e.value=new d.OutlineEffect(c.value,a.value,f.value),n.value=new d.EffectPass(a.value,e.value),o.value.addPass(n.value)))}),l.watch([()=>t.outlinedObjects,e],()=>{var u;(u=e.value)==null||u.selection.set(t.outlinedObjects||[])},{immediate:!0}),l.watchEffect(()=>{if(!e.value)return;const u=new d.OutlineEffect,{blur:p,xRay:g,kernelSize:s,pulseSpeed:C,patternScale:w,edgeStrength:y,multisampling:B,hiddenEdgeColor:P,visibleEdgeColor:_}=f.value;e.value.blur=p!==void 0?p:u.blur,e.value.xRay=g!==void 0?g:u.xRay,e.value.pulseSpeed=C!==void 0?C:u.pulseSpeed,e.value.kernelSize=s!==void 0?s:u.kernelSize,e.value.edgeStrength=y!==void 0?y:u.edgeStrength,e.value.patternScale=w!==void 0?w:u.patternScale,e.value.multisampling=B!==void 0?B:u.multisampling,e.value.hiddenEdgeColor=P!==void 0?S.normalizeColor(P):u.hiddenEdgeColor,e.value.visibleEdgeColor=_!==void 0?S.normalizeColor(_):u.visibleEdgeColor,u.dispose()}),l.onUnmounted(()=>{var u,p,g,s;(u=e.value)==null||u.selection.clear(),n.value&&((p=o==null?void 0:o.value)==null||p.removePass(n.value)),(g=e.value)==null||g.dispose(),(s=n.value)==null||s.dispose()}),(u,p)=>null}});let b;function T(){var h;if(b!==void 0)return b;try{let i;const t=document.createElement("canvas");return b=!!(window.WebGL2RenderingContext&&(i=t.getContext("webgl2"))),i&&((h=i.getExtension("WEBGL_lose_context"))==null||h.loseContext()),b}catch{return b=!1}}const j=l.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean,default:void 0},disableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean,default:void 0},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:0},frameBufferType:{default:x.HalfFloatType}},setup(h){const i=h,{scene:t,camera:o,renderer:n,sizes:e}=S.useTresContext(),r=l.shallowRef(null);let f=null,a=null;l.provide(E,r);const c=()=>{r.value&&(a=new d.NormalPass(t.value,o.value),a.enabled=!1,r.value.addPass(a),i.resolutionScale!==void 0&&T()&&(f=new d.DepthDownsamplingPass({normalBuffer:a.texture,resolutionScale:i.resolutionScale}),f.enabled=!1,r.value.addPass(f)))};l.watchEffect(()=>{r.value&&e.width.value&&e.height.value&&r.value.setSize(e.width.value,e.height.value)});const m=l.computed(()=>{const s=new d.EffectComposer,C={depthBuffer:i.depthBuffer!==void 0?i.depthBuffer:s.inputBuffer.depthBuffer,stencilBuffer:i.stencilBuffer!==void 0?i.stencilBuffer:s.inputBuffer.stencilBuffer,multisampling:T()?0:i.multisampling!==void 0?i.multisampling:s.multisampling,frameBufferType:i.frameBufferType!==void 0?i.frameBufferType:x.HalfFloatType};return s.dispose(),C}),u=()=>{!n.value&&!t.value&&!o.value||(r.value=new d.EffectComposer(n.value,m.value),r.value.addPass(new d.RenderPass(t.value,o.value)),i.disableNormalPass||c())},p=l.watch([e.height,e.width],()=>{!e.height.value&&!e.width.value||(l.watchEffect(u),p==null||p())}),{onLoop:g}=S.useRenderLoop();return g(({delta:s})=>{if(i.enabled&&n.value&&r.value&&e.width.value&&e.height.value){const C=n.value.autoClear;n.value.autoClear=i.autoClear,i.stencilBuffer&&!i.autoClear&&n.value.clearStencil(),r.value.render(s),n.value.autoClear=C}}),l.onUnmounted(()=>{var s;(s=r.value)==null||s.dispose()}),(s,C)=>l.renderSlot(s.$slots,"default")}});v.Bloom=z,v.EffectComposer=j,v.Glitch=R,v.Outline=O,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
+(function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("postprocessing"),require("@tresjs/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","postprocessing","@tresjs/core","three"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s["tres-postprocessing"]={},s.Vue,s.Postprocessing,s.TresjsCore,s.Three))})(this,function(s,i,u,m,_){"use strict";const b=Symbol(),v=a=>{const t=i.inject(b),e=i.shallowRef(null),n=i.shallowRef(null),{scene:l,camera:o}=m.useTresContext();i.watchEffect(()=>{!o.value||!(n!=null&&n.value)||(n.value.mainCamera=o.value)});let r=()=>{};return r=i.watchEffect(()=>{!o.value||!(t!=null&&t.value)||!l.value||(r(),!n.value&&(n.value=a(),e.value=new u.EffectPass(o.value,n.value),t.value.addPass(e.value)))}),i.onUnmounted(()=>{var c,f,h;e.value&&((c=t==null?void 0:t.value)==null||c.removePass(e.value)),(f=n.value)==null||f.dispose(),(h=e.value)==null||h.dispose()}),{pass:e,effect:n}},B=/([^[.\]])+/g,T=(a,t)=>{if(!t)return;const e=Array.isArray(t)?t:t.match(B);return e==null?void 0:e.reduce((n,l)=>n&&n[l],a)},y=(a,t,e)=>{const n=Array.isArray(t)?t:t.match(B);n&&n.reduce((l,o,r)=>(l[o]===void 0&&(l[o]={}),r===n.length-1&&(l[o]=e),l[o]),a)},R=(a,t)=>{const e={...a};return t.forEach(n=>delete e[n]),e},x=(a,t,e,n,l={})=>i.watch(a,o=>{var r;if(t.value)if(o===void 0){const c=n();y(t.value,e,T(c,e)),(r=c.dispose)==null||r.call(c)}else y(t.value,e,a())},l),E=(a,t,e)=>a.map(([n,l])=>x(n,t,l,e)),S=(a,t,e)=>Object.keys(a).map(n=>x(()=>a[n],t,n,e)),O=i.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean,default:void 0}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.BloomEffect(e));return t({pass:n,effect:l}),E([[()=>e.intensity,"intensity"],[()=>e.kernelSize,"kernelSize"],[()=>e.luminanceSmoothing,"luminanceMaterial.smoothing"],[()=>e.luminanceThreshold,"luminanceMaterial.threshold"]],l,()=>new u.BloomEffect),(o,r)=>null}}),z=i.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.GlitchEffect(e));return t({pass:n,effect:l}),i.watchEffect(()=>{const o=()=>{if(e.mode!==void 0)return e.active===!1?u.GlitchMode.DISABLED:e.mode;const r=new u.GlitchEffect,c=r.mode;return r.dispose(),c};l.value&&(l.value.mode=o())}),S(R(e,["active","mode","blendFunction"]),l,()=>new u.GlitchEffect),(o,r)=>null}}),D=i.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean,default:void 0},xRay:{type:Boolean,default:void 0},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(a,{expose:t}){const e=a,n=p=>p!==void 0?m.normalizeColor(p).getHex():void 0,{camera:l,scene:o}=m.useTresContext(),r={blur:e.blur,xRay:e.xRay,kernelSize:e.kernelSize,pulseSpeed:e.pulseSpeed,resolutionX:e.resolutionX,resolutionY:e.resolutionY,patternScale:e.patternScale,edgeStrength:e.edgeStrength,blendFunction:e.blendFunction,multisampling:e.multisampling,patternTexture:e.patternTexture,resolutionScale:e.resolutionScale,hiddenEdgeColor:n(e.hiddenEdgeColor),visibleEdgeColor:n(e.visibleEdgeColor)},{pass:c,effect:f}=v(()=>new u.OutlineEffect(o.value,l.value,r));t({pass:c,effect:f}),i.watch([()=>e.outlinedObjects,f],()=>{var p;(p=f.value)==null||p.selection.set(e.outlinedObjects||[])},{immediate:!0});const h=i.computed(()=>({hiddenEdgeColor:e.hiddenEdgeColor?m.normalizeColor(e.hiddenEdgeColor):void 0,visibleEdgeColor:e.visibleEdgeColor?m.normalizeColor(e.visibleEdgeColor):void 0}));return E([[()=>e.blur,"blur"],[()=>e.xRay,"xRay"],[()=>e.pulseSpeed,"pulseSpeed"],[()=>e.kernelSize,"kernelSize"],[()=>e.edgeStrength,"edgeStrength"],[()=>e.patternScale,"patternScale"],[()=>e.multisampling,"multisampling"],[()=>h.value.hiddenEdgeColor,"hiddenEdgeColor"],[()=>h.value.visibleEdgeColor,"visibleEdgeColor"]],f,()=>new u.OutlineEffect),(p,F)=>null}}),k=i.defineComponent({__name:"Pixelation",props:{granularity:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.PixelationEffect(e.granularity));return t({pass:n,effect:l}),S(e,l,()=>new u.PixelationEffect),(o,r)=>null}}),M=i.defineComponent({__name:"DepthOfField",props:{blendFunction:{},worldFocusDistance:{},worldFocusRange:{},focusDistance:{},focusRange:{},bokehScale:{},resolutionScale:{},resolutionX:{},resolutionY:{}},setup(a,{expose:t}){const e=a,{camera:n}=m.useTresContext(),{pass:l,effect:o}=v(()=>new u.DepthOfFieldEffect(n.value,e));return t({pass:l,effect:o}),E([[()=>e.worldFocusDistance,"circleOfConfusionMaterial.worldFocusDistance"],[()=>e.focusDistance,"circleOfConfusionMaterial.focusDistance"],[()=>e.worldFocusRange,"circleOfConfusionMaterial.worldFocusRange"],[()=>e.focusRange,"circleOfConfusionMaterial.focusRange"],[()=>e.bokehScale,"bokehScale"],[()=>e.resolutionScale,"blurPass.resolution.scale"],[()=>e.resolutionX,"resolution.width"],[()=>e.resolutionY,"resolution.height"]],o,()=>new u.DepthOfFieldEffect),(r,c)=>null}}),j=i.defineComponent({__name:"Noise",props:{premultiply:{type:Boolean,default:!1},blendFunction:{default:u.BlendFunction.SCREEN}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.NoiseEffect(e));return t({pass:n,effect:l}),S(e,l,()=>new u.NoiseEffect),(o,r)=>null}});let C;function P(){var a;if(C!==void 0)return C;try{let t;const e=document.createElement("canvas");return C=!!(window.WebGL2RenderingContext&&(t=e.getContext("webgl2"))),t&&((a=t.getExtension("WEBGL_lose_context"))==null||a.loseContext()),C}catch{return C=!1}}const A=i.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean,default:void 0},disableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean,default:void 0},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:0},frameBufferType:{default:_.HalfFloatType}},setup(a){const t=a,{scene:e,camera:n,renderer:l,sizes:o}=m.useTresContext(),r=i.shallowRef(null);let c=null,f=null;i.provide(b,r);const h=()=>{r.value&&(f=new u.NormalPass(e.value,n.value),f.enabled=!1,r.value.addPass(f),t.resolutionScale!==void 0&&P()&&(c=new u.DepthDownsamplingPass({normalBuffer:f.texture,resolutionScale:t.resolutionScale}),c.enabled=!1,r.value.addPass(c)))};i.watchEffect(()=>{r.value&&o.width.value&&o.height.value&&r.value.setSize(o.width.value,o.height.value)});const p=i.computed(()=>{const d=new u.EffectComposer,g={depthBuffer:t.depthBuffer!==void 0?t.depthBuffer:d.inputBuffer.depthBuffer,stencilBuffer:t.stencilBuffer!==void 0?t.stencilBuffer:d.inputBuffer.stencilBuffer,multisampling:P()?0:t.multisampling!==void 0?t.multisampling:d.multisampling,frameBufferType:t.frameBufferType!==void 0?t.frameBufferType:_.HalfFloatType};return d.dispose(),g}),F=()=>{!l.value&&!e.value&&!n.value||(r.value=new u.EffectComposer(l.value,p.value),r.value.addPass(new u.RenderPass(e.value,n.value)),t.disableNormalPass||h())};let w=()=>{};w=i.watch([o.height,o.width],()=>{!o.height.value&&!o.width.value||(i.watchEffect(F),w==null||w())},{immediate:!0});const{onLoop:N}=m.useRenderLoop();return N(({delta:d})=>{if(t.enabled&&l.value&&r.value&&o.width.value&&o.height.value){const g=l.value.autoClear;l.value.autoClear=t.autoClear,t.stencilBuffer&&!t.autoClear&&l.value.clearStencil(),r.value.render(d),l.value.autoClear=g}}),i.onUnmounted(()=>{var d;(d=r.value)==null||d.dispose()}),(d,g)=>i.renderSlot(d.$slots,"default")}});s.Bloom=O,s.DepthOfField=M,s.EffectComposer=A,s.Glitch=z,s.Noise=j,s.Outline=D,s.Pixelation=k,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});

package/dist/util/object.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Retrieves the value at a given path within a provided object.
+ *
+ * @template T - The type of value to be returned
+ *
+ * @param {any} obj - The object to extract value from
+ * @param {string | string[]} path - A path or an array of path where the value should be get from
+ *
+ * @returns {T | undefined} - The value at the given path in the object, or undefined if path is not found
+ *
+ * @example
+ *
+ * const obj = { a: { b: { c: 1 } } }
+ *
+ * const result = get(obj, 'a.b.c')
+ *
+ * console.log(result) // 1
+ */
+export declare const get: <T>(obj: any, path: string | string[]) => T | undefined;
+/**
+ * Sets a value at a given path within a provided object. If the path does not exist, nested objects will be created.
+ *
+ * @param {any} obj - The original object to set value in
+ * @param {string | string[]} path - A path or an array of path where the value should be set
+ * @param {any} value - The value to be set at the provided path
+ *
+ * @returns {void}
+ *
+ * @example
+ * const obj = { a: { b: { c: 1 } } }
+ *
+ * set(obj, 'a.b.c', 2)
+ *
+ * console.log(obj) // { a: { b: { c: 2 } } }
+ */
+export declare const set: (obj: any, path: string | string[], value: any) => void;
+/**
+ * Omits given properties from a provided object.
+ *
+ * @template T - An object with string keys and any type of values
+ *
+ * @param {T} obj - The original object to omit properties from
+ * @param {(keyof T)[]} properties - An array of property key names to omit from the base object
+ *
+ * @returns {Partial<T>} The new object with omitted properties
+ *
+ * @example
+ * const obj = { a: 1, b: 2, c: 3 }
+ * const propsToOmit = ['b', 'c']
+ *
+ * const newObj = omit(obj, propsToOmit)
+ *
+ * console.log(newObj) // { a: 1 }
+ */
+export declare const omit: <T extends Record<string, any>>(obj: T, properties: (keyof T)[]) => Partial<T>;

package/dist/util/prop.d.ts

@@ -0,0 +1,40 @@
+import type { Ref, WatchOptions } from 'vue';
+/**
+ * Creates a prop watcher function that monitors changes to a property and updates a target object.
+ *
+ * @template T - The type of the property being watched.
+ * @template E - The type of the target object.
+ * @param {() => T} propGetter - A function that retrieves the prop value to be watched.
+ * @param {Ref<E>} target - A Ref representing the target object to be updated.
+ * @param {string} propertyPath - The dot-separated path to the property within the target object.
+ * @param {() => E & { dispose?(): void }} newPlainObjectFunction - A function that creates a new plain object to retrieve the defaults from with an optional "dispose" method for cleanup.
+ * @param {WatchOptions} watchOptions - The options for watch.
+ */
+export declare const makePropWatcher: <T, E>(propGetter: () => T, target: Ref<E>, propertyPath: string, newPlainObjectFunction: () => E & {
+    dispose?(): void;
+}, watchOptions?: WatchOptions) => import("vue").WatchStopHandle;
+/**
+ * Creates multiple prop watchers for monitoring changes to multiple properties and updating a target object.
+ *
+ * @template T - The type of the property being watched.
+ * @template E - The type of the target object.
+ * @param {(string | (() => T))[][]} propGettersAndPropertyPaths - An array of arrays containing pairs of prop getters and their corresponding property paths within the target object.
+ * @param {Ref<E>} target - A Ref representing the target object to be updated.
+ * @param {() => E & { dispose?(): void }} newPlainObjectFunction - A function that creates a new plain object to retrieve the defaults from with an optional "dispose" method for cleanup.
+ */
+export declare const makePropWatchers: <E>(propGettersAndPropertyPaths: (string | (() => any))[][], target: Ref<E>, newPlainObjectFunction: () => E & {
+    dispose?(): void;
+}) => import("vue").WatchStopHandle[];
+/**
+ * Creates multiple prop watchers via the props object for monitoring changes to multiple properties and updating a target object.
+ * Use this method in case the prop names match the names of the properties you want to set on your target object.
+ *
+ * @param props - The props object. Usually created via defineProps.
+ * @param {Ref<E>} target - A Ref representing the target object to be updated.
+ * @param {() => E & { dispose?(): void }} newPlainObjectFunction - A function that creates a new plain object to retrieve the defaults from with an optional "dispose" method for cleanup.
+ */
+export declare const makePropWatchersUsingAllProps: <E>(props: {
+    [key: string]: any;
+}, target: Ref<E>, newPlainObjectFunction: () => E & {
+    dispose?(): void;
+}) => import("vue").WatchStopHandle[];