@tresjs/post-processing 0.4.0 → 0.5.0

package/dist/core/injectionKeys.d.ts

@@ -1,3 +1,3 @@
-import { EffectComposer } from 'postprocessing';
-import { InjectionKey, ShallowRef } from 'vue';
+import type { EffectComposer } from 'postprocessing';
+import type { InjectionKey, ShallowRef } from 'vue';
 export declare const effectComposerInjectionKey: InjectionKey<ShallowRef<EffectComposer | null>>;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import Bloom from './core/effects/Bloom.vue';
 import Glitch from './core/effects/Glitch.vue';
 import Outline from './core/effects/Outline.vue';
+import Pixelation from './core/effects/Pixelation.vue';
+import DepthOfField from './core/effects/DepthOfField.vue';
 import EffectComposer from './core/EffectComposer.vue';
-export { EffectComposer, Bloom, Outline, Glitch };
+export { Bloom, Glitch, Outline, Pixelation, DepthOfField, EffectComposer, };

package/dist/tres-postprocessing.js

@@ -1,15 +1,64 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.4.0
+ * version: v0.5.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 $, shallowRef as w, watchEffect as m, onUnmounted as T, watch as _, defineComponent as f, computed as k, provide as j, renderSlot as N } from "vue";
+import { EffectPass as X, BloomEffect as x, GlitchEffect as b, GlitchMode as Y, OutlineEffect as y, PixelationEffect as P, DepthOfFieldEffect as F, EffectComposer as R, RenderPass as H, NormalPass as I, DepthDownsamplingPass as U } from "postprocessing";
+import { useTresContext as S, normalizeColor as C, useRenderLoop as K } from "@tresjs/core";
+import { HalfFloatType as O } from "three";
+const A = Symbol(), v = (a) => {
+  const t = $(A), e = w(null), n = w(null), { scene: o, camera: l } = S();
+  m(() => {
+    !l.value || !(n != null && n.value) || (n.value.mainCamera = l.value);
+  });
+  let s = () => {
+  };
+  return s = m(() => {
+    !l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new X(l.value, n.value), t.value.addPass(e.value)));
+  }), T(() => {
+    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
+  };
+}, M = /([^[.\]])+/g, q = (a, t) => {
+  if (!t)
+    return;
+  const e = Array.isArray(t) ? t : t.match(M);
+  return e == null ? void 0 : e.reduce((n, o) => n && n[o], a);
+}, z = (a, t, e) => {
+  const n = Array.isArray(t) ? t : t.match(M);
+  n && n.reduce((o, l, s) => (o[l] === void 0 && (o[l] = {}), s === n.length - 1 && (o[l] = e), o[l]), a);
+}, J = (a, t) => {
+  const e = { ...a };
+  return t.forEach((n) => delete e[n]), e;
+}, G = (a, t, e, n, o = {}) => _(
+  a,
+  (l) => {
+    var s;
+    if (t.value)
+      if (l === void 0) {
+        const r = n();
+        z(t.value, e, q(r, e)), (s = r.dispose) == null || s.call(r);
+      } else
+        z(t.value, e, a());
+  },
+  o
+), E = (a, t, e) => a.map(([n, o]) => G(
+  n,
+  t,
+  o,
+  e
+)), L = (a, t, e) => Object.keys(a).map((n) => G(
+  () => a[n],
+  t,
+  n,
+  e
+)), te = /* @__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 } = v(() => new x(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 x()
+    ), (l, s) => null;
   }
-}), le = /* @__PURE__ */ _({
+}), ne = /* @__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 } = v(() => new b(e));
+    return t({ pass: n, effect: o }), m(() => {
+      const l = () => {
+        if (e.mode !== void 0)
+          return e.active === !1 ? Y.DISABLED : e.mode;
+        const s = new b(), r = s.mode;
+        return s.dispose(), r;
+      };
+      o.value && (o.value.mode = l());
+    }), L(
+      J(e, ["active", "mode", "blendFunction"]),
+      o,
+      () => new b()
+    ), (l, s) => null;
   }
-}), ae = /* @__PURE__ */ _({
+}), oe = /* @__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,120 @@ 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 } = v(() => new y(l.value, o.value, s));
+    t({ pass: r, effect: i }), _(
+      [() => 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 = k(() => ({
+      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 y()
+    ), (c, B) => null;
+  }
+}), le = /* @__PURE__ */ f({
+  __name: "Pixelation",
+  props: {
+    granularity: {}
+  },
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = v(() => new P(e.granularity));
+    return t({ pass: n, effect: o }), L(
+      e,
+      o,
+      () => new P()
+    ), (l, s) => null;
+  }
+}), ae = /* @__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 } = v(() => new F(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 F()
+    ), (s, r) => null;
   }
 });
-let b;
-function L() {
-  var f;
-  if (b !== void 0)
-    return b;
+let p;
+function D() {
+  var a;
+  if (p !== void 0)
+    return p;
   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 p = !!(window.WebGL2RenderingContext && (t = e.getContext("webgl2"))), t && ((a = t.getExtension("WEBGL_lose_context")) == null || a.loseContext()), p;
   } catch {
-    return b = !1;
+    return p = !1;
   }
 }
-const te = /* @__PURE__ */ _({
+const se = /* @__PURE__ */ f({
   __name: "EffectComposer",
   props: {
     enabled: { type: Boolean, default: !0 },
@@ -182,48 +256,56 @@ const te = /* @__PURE__ */ _({
     resolutionScale: {},
     autoClear: { type: Boolean, default: !0 },
     multisampling: { default: 0 },
-    frameBufferType: { default: G }
+    frameBufferType: { default: O }
   },
-  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 = w(null);
+    let r = null, i = null;
+    j(A, 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 I(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && D() && (r = new U({
+        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);
+    m(() => {
+      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 = k(() => {
+      const u = new R(), g = {
+        depthBuffer: t.depthBuffer !== void 0 ? t.depthBuffer : u.inputBuffer.depthBuffer,
+        stencilBuffer: t.stencilBuffer !== void 0 ? t.stencilBuffer : u.inputBuffer.stencilBuffer,
+        multisampling: D() ? 0 : t.multisampling !== void 0 ? t.multisampling : u.multisampling,
+        frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : O
       };
-      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;
+    }), B = () => {
+      !o.value && !e.value && !n.value || (s.value = new R(o.value, c.value), s.value.addPass(new H(e.value, n.value)), t.disableNormalPass || d());
+    };
+    let h = () => {
+    };
+    h = _([l.height, l.width], () => {
+      !l.height.value && !l.width.value || (m(B), h == null || h());
+    }, {
+      immediate: !0
+    });
+    const { onLoop: W } = K();
+    return W(({ 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");
+    }), T(() => {
+      var u;
+      (u = s.value) == null || u.dispose();
+    }), (u, g) => N(u.$slots, "default");
   }
 });
 export {
-  ee as Bloom,
-  te as EffectComposer,
-  le as Glitch,
-  ae as Outline
+  te as Bloom,
+  ae as DepthOfField,
+  se as EffectComposer,
+  ne as Glitch,
+  oe as Outline,
+  le as Pixelation
 };

package/dist/tres-postprocessing.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.4.0
+ * version: v0.5.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(c,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):(c=typeof globalThis<"u"?globalThis:c||self,i(c["tres-postprocessing"]={},c.Vue,c.Postprocessing,c.TresjsCore,c.Three))})(this,function(c,i,u,m,E){"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 s,f,h;e.value&&((s=t==null?void 0:t.value)==null||s.removePass(e.value)),(f=n.value)==null||f.dispose(),(h=e.value)==null||h.dispose()}),{pass:e,effect:n}},_=/([^[.\]])+/g,F=(a,t)=>{if(!t)return;const e=Array.isArray(t)?t:t.match(_);return e==null?void 0:e.reduce((n,l)=>n&&n[l],a)},B=(a,t,e)=>{const n=Array.isArray(t)?t:t.match(_);n&&n.reduce((l,o,r)=>(l[o]===void 0&&(l[o]={}),r===n.length-1&&(l[o]=e),l[o]),a)},O=(a,t)=>{const e={...a};return t.forEach(n=>delete e[n]),e},y=(a,t,e,n,l={})=>i.watch(a,o=>{var r;if(t.value)if(o===void 0){const s=n();B(t.value,e,F(s,e)),(r=s.dispose)==null||r.call(s)}else B(t.value,e,a())},l),S=(a,t,e)=>a.map(([n,l])=>y(n,t,l,e)),x=(a,t,e)=>Object.keys(a).map(n=>y(()=>a[n],t,n,e)),R=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}),S([[()=>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,s=r.mode;return r.dispose(),s};l.value&&(l.value.mode=o())}),x(O(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:s,effect:f}=v(()=>new u.OutlineEffect(o.value,l.value,r));t({pass:s,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 S([[()=>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,T)=>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}),x(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}),S([[()=>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,s)=>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 j=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:E.HalfFloatType}},setup(a){const t=a,{scene:e,camera:n,renderer:l,sizes:o}=m.useTresContext(),r=i.shallowRef(null);let s=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()&&(s=new u.DepthDownsamplingPass({normalBuffer:f.texture,resolutionScale:t.resolutionScale}),s.enabled=!1,r.value.addPass(s)))};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,w={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:E.HalfFloatType};return d.dispose(),w}),T=()=>{!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 g=()=>{};g=i.watch([o.height,o.width],()=>{!o.height.value&&!o.width.value||(i.watchEffect(T),g==null||g())},{immediate:!0});const{onLoop:A}=m.useRenderLoop();return A(({delta:d})=>{if(t.enabled&&l.value&&r.value&&o.width.value&&o.height.value){const w=l.value.autoClear;l.value.autoClear=t.autoClear,t.stencilBuffer&&!t.autoClear&&l.value.clearStencil(),r.value.render(d),l.value.autoClear=w}}),i.onUnmounted(()=>{var d;(d=r.value)==null||d.dispose()}),(d,w)=>i.renderSlot(d.$slots,"default")}});c.Bloom=R,c.DepthOfField=M,c.EffectComposer=j,c.Glitch=z,c.Outline=D,c.Pixelation=k,Object.defineProperty(c,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[];