@tresjs/post-processing 0.2.0 → 0.3.0

package/dist/core/EffectComposer.vue.d.ts

@@ -5,7 +5,7 @@ export type EffectComposerProps = {
     enabled?: boolean;
     children?: TresObject[];
     depthBuffer?: boolean;
-    dissableNormalPass?: boolean;
+    disableNormalPass?: boolean;
     stencilBuffer?: boolean;
     resolutionScale?: number;
     autoClear?: boolean;
@@ -27,7 +27,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
-    dissableNormalPass: {
+    disableNormalPass: {
         type: __PropType<boolean | undefined>;
         required: false;
     };
@@ -72,7 +72,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<boolean | undefined>;
         required: false;
     };
-    dissableNormalPass: {
+    disableNormalPass: {
         type: __PropType<boolean | undefined>;
         required: false;
     };

package/dist/core/effects/Outline.vue.d.ts

@@ -0,0 +1,163 @@
+import type { PropType as __PropType } from 'vue';
+import type { TresColor } from '@tresjs/core';
+import type { Object3D, Texture } from 'three';
+import type { BlendFunction, KernelSize } from 'postprocessing';
+export type OutlineProps = {
+    /**
+     * The objects in the scene which should have an outline.
+     */
+    outlinedObjects: Object3D[];
+    blur?: boolean;
+    /**
+     * Whether occluded parts of selected objects should be visible
+     */
+    xRay?: boolean;
+    /**
+     * The blur kernel size. Must be used with blur being true.
+     */
+    kernelSize?: KernelSize;
+    /**
+     * The pulse speed. A value of zero disables the pulse effect.
+     */
+    pulseSpeed?: number;
+    resolutionX?: number;
+    resolutionY?: number;
+    edgeStrength?: number;
+    patternScale?: number;
+    /**
+     * The number of samples used for multisample antialiasing. Requires WebGL 2.
+     */
+    multisampling?: number;
+    /**
+     * The blend function. Use `BlendFunction.ALPHA` for dark outlines.
+     */
+    blendFunction?: BlendFunction;
+    patternTexture?: Texture;
+    resolutionScale?: number;
+    hiddenEdgeColor?: TresColor;
+    visibleEdgeColor?: TresColor;
+};
+declare const _sfc_main: import("vue").DefineComponent<{
+    outlinedObjects: {
+        type: __PropType<Object3D<import("three").Event>[]>;
+        required: true;
+    };
+    blur: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    xRay: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    kernelSize: {
+        type: __PropType<KernelSize | undefined>;
+        required: false;
+    };
+    pulseSpeed: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    resolutionX: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    resolutionY: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    edgeStrength: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    patternScale: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    multisampling: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    blendFunction: {
+        type: __PropType<BlendFunction | undefined>;
+        required: false;
+    };
+    patternTexture: {
+        type: __PropType<Texture | undefined>;
+        required: false;
+    };
+    resolutionScale: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    hiddenEdgeColor: {
+        type: __PropType<[r: number, g: number, b: number] | import("three").ColorRepresentation | undefined>;
+        required: false;
+    };
+    visibleEdgeColor: {
+        type: __PropType<[r: number, g: number, b: number] | import("three").ColorRepresentation | undefined>;
+        required: false;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    outlinedObjects: {
+        type: __PropType<Object3D<import("three").Event>[]>;
+        required: true;
+    };
+    blur: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    xRay: {
+        type: __PropType<boolean | undefined>;
+        required: false;
+    };
+    kernelSize: {
+        type: __PropType<KernelSize | undefined>;
+        required: false;
+    };
+    pulseSpeed: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    resolutionX: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    resolutionY: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    edgeStrength: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    patternScale: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    multisampling: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    blendFunction: {
+        type: __PropType<BlendFunction | undefined>;
+        required: false;
+    };
+    patternTexture: {
+        type: __PropType<Texture | undefined>;
+        required: false;
+    };
+    resolutionScale: {
+        type: __PropType<number | undefined>;
+        required: false;
+    };
+    hiddenEdgeColor: {
+        type: __PropType<[r: number, g: number, b: number] | import("three").ColorRepresentation | undefined>;
+        required: false;
+    };
+    visibleEdgeColor: {
+        type: __PropType<[r: number, g: number, b: number] | import("three").ColorRepresentation | undefined>;
+        required: false;
+    };
+}>>, {}, {}>;
+export default _sfc_main;

package/dist/core/injectionKeys.d.ts

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

package/dist/index.d.ts

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

package/dist/tres-postprocessing.js

@@ -1,122 +1,154 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.2.0
+ * version: v0.3.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-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") || (() => {
+import { inject as C, getCurrentInstance as k, onMounted as I, nextTick as q, getCurrentScope as J, onScopeDispose as Q, unref as D, ref as b, watch as p, computed as y, defineComponent as O, shallowRef as T, provide as Z, watchEffect as P, renderSlot as _, toRaw as S, onUnmounted as F } from "vue";
+import { HalfFloatType as ee } from "three";
+import { useTres as te, useRenderLoop as ne, normalizeColor as R } from "@tresjs/core";
+import { EffectComposer as ae, RenderPass as le, NormalPass as ue, DepthDownsamplingPass as oe, BlendFunction as W, BloomEffect as ie, EffectPass as L, GlitchMode as j, GlitchEffect as re, OutlineEffect as G } from "postprocessing";
+function A() {
+  const { state: e, setState: a } = C("useTres", te()), n = C("extend") || (() => {
   });
   return {
     state: e,
-    setState: n,
-    extend: l
+    setState: a,
+    extend: n
   };
 }
-let g;
+let w;
 function se() {
   var e;
-  if (g !== void 0)
-    return g;
+  if (w !== void 0)
+    return w;
   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;
+    let a;
+    const n = document.createElement("canvas");
+    return w = !!(window.WebGL2RenderingContext && (a = n.getContext("webgl2"))), a && ((e = a.getExtension("WEBGL_lose_context")) == null || e.loseContext()), w;
   } catch {
-    return g = !1;
+    return w = !1;
   }
 }
-function k(e) {
-  return q() ? (U(e), !0) : !1;
+function N(e) {
+  return J() ? (Q(e), !0) : !1;
 }
 function H(e) {
-  return typeof e == "function" ? e() : N(e);
+  return typeof e == "function" ? e() : D(e);
 }
-const ce = typeof window < "u", I = () => {
+const ce = typeof window < "u", de = () => {
 };
-function de(...e) {
-  if (e.length !== 1)
-    return V(...e);
-  const n = e[0];
-  return typeof n == "function" ? J(K(() => ({ get: n, set: I }))) : h(n);
+function fe(e, a = !0) {
+  k() ? I(e) : a ? e() : q(e);
 }
-function fe(e, n = !0) {
-  D() ? F(e) : n ? e() : Y(e);
+function E(e) {
+  var a;
+  const n = H(e);
+  return (a = n == null ? void 0 : n.$el) != null ? a : n;
 }
-function me(e) {
-  var n;
-  const l = H(e);
-  return (n = l == null ? void 0 : l.$el) != null ? n : l;
-}
-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)))
+const X = ce ? window : void 0;
+function M(...e) {
+  let a, n, t, l;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, t, l] = e, a = X) : [a, n, t, l] = e, !a)
+    return de;
+  Array.isArray(n) || (n = [n]), Array.isArray(t) || (t = [t]);
+  const r = [], c = () => {
+    r.forEach((i) => i()), r.length = 0;
+  }, f = (i, o, s, d) => (i.addEventListener(o, s, d), () => i.removeEventListener(o, s, d)), v = p(
+    () => [E(a), H(l)],
+    ([i, o]) => {
+      c(), i && r.push(
+        ...n.flatMap((s) => t.map((d) => f(i, s, d, o)))
       );
     },
     { immediate: !0, flush: "post" }
-  ), i = () => {
-    f(), s();
+  ), u = () => {
+    v(), c();
   };
-  return k(i), i;
+  return N(u), u;
 }
-function he() {
-  const e = h(!1);
-  return D() && F(() => {
+function ve() {
+  const e = b(!1);
+  return k() && I(() => {
     e.value = !0;
   }), e;
 }
-function ye(e) {
-  const n = he();
-  return G(() => (n.value, !!e()));
+function me(e) {
+  const a = ve();
+  return y(() => (a.value, !!e()));
 }
-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)));
+var $ = Object.getOwnPropertySymbols, he = Object.prototype.hasOwnProperty, be = Object.prototype.propertyIsEnumerable, ge = (e, a) => {
+  var n = {};
+  for (var t in e)
+    he.call(e, t) && a.indexOf(t) < 0 && (n[t] = e[t]);
+  if (e != null && $)
+    for (var t of $(e))
+      a.indexOf(t) < 0 && be.call(e, t) && (n[t] = e[t]);
+  return n;
+};
+function Se(e, a, n = {}) {
+  const t = n, { window: l = X } = t, r = ge(t, ["window"]);
+  let c;
+  const f = me(() => l && "ResizeObserver" in l), v = () => {
+    c && (c.disconnect(), c = void 0);
+  }, u = y(
+    () => Array.isArray(e) ? e.map((s) => E(s)) : [E(e)]
+  ), i = p(
+    u,
+    (s) => {
+      if (v(), f.value && l) {
+        c = new ResizeObserver(a);
+        for (const d of s)
+          d && c.observe(d, r);
+      }
+    },
+    { immediate: !0, flush: "post", deep: !0 }
+  ), o = () => {
+    v(), i();
+  };
+  return N(o), {
+    isSupported: f,
+    stop: o
   };
-  return S(c), k(() => s()), o;
 }
-function be(e = {}) {
+function pe(e, a = {}) {
   const {
-    window: n = M,
-    initialWidth: l = 1 / 0,
-    initialHeight: a = 1 / 0,
-    listenOrientation: t = !0,
-    includeScrollbar: o = !0
-  } = 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 (f(), fe(f), ve("resize", f, { passive: !0 }), t) {
-    const i = ge("(orientation: portrait)");
-    y(i, () => f());
+    reset: n = !0,
+    windowResize: t = !0,
+    windowScroll: l = !0,
+    immediate: r = !0
+  } = a, c = b(0), f = b(0), v = b(0), u = b(0), i = b(0), o = b(0), s = b(0), d = b(0);
+  function m() {
+    const g = E(e);
+    if (!g) {
+      n && (c.value = 0, f.value = 0, v.value = 0, u.value = 0, i.value = 0, o.value = 0, s.value = 0, d.value = 0);
+      return;
+    }
+    const h = g.getBoundingClientRect();
+    c.value = h.height, f.value = h.bottom, v.value = h.left, u.value = h.right, i.value = h.top, o.value = h.width, s.value = h.x, d.value = h.y;
   }
-  return { width: s, height: c };
+  return Se(e, m), p(() => E(e), (g) => !g && m()), l && M("scroll", m, { capture: !0, passive: !0 }), t && M("resize", m, { passive: !0 }), fe(() => {
+    r && m();
+  }), {
+    height: c,
+    bottom: f,
+    left: v,
+    right: u,
+    top: i,
+    width: o,
+    x: s,
+    y: d,
+    update: m
+  };
 }
-const Ee = /* @__PURE__ */ B({
+const z = Symbol(), Ee = /* @__PURE__ */ O({
   __name: "EffectComposer",
   props: {
     enabled: { type: Boolean, default: !0 },
     children: {},
     depthBuffer: { type: Boolean },
-    dissableNormalPass: { type: Boolean, default: !1 },
+    disableNormalPass: { type: Boolean, default: !1 },
     stencilBuffer: { type: Boolean },
     resolutionScale: {},
     autoClear: { type: Boolean, default: !0 },
@@ -126,36 +158,39 @@ const Ee = /* @__PURE__ */ B({
     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,
+    const { state: a } = A(), n = T(null), t = y(() => e.scene || a.scene), l = y(() => e.camera || a.camera);
+    let r = null, c = null;
+    const f = se();
+    Z(z, n);
+    function v() {
+      n.value && (c = new ue(t.value, l.value), c.enabled = !1, n.value.addPass(c), e.resolutionScale !== void 0 && f && (r = new oe({
+        normalBuffer: c.texture,
         resolutionScale: e.resolutionScale
-      }), o.enabled = !1, l.value.addPass(o)));
+      }), r.enabled = !1, n.value.addPass(r)));
     }
-    S(() => {
-      n.renderer && (n.renderer.setSize(f.value, i.value), n.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)), l.value = new ae(n.renderer, {
+    const u = y(() => {
+      var d;
+      return (d = a.canvas) == null ? void 0 : d.value;
+    }), { width: i, height: o } = pe(u);
+    P(() => {
+      n.value && i.value && o.value && n.value.setSize(i.value, o.value);
+    }), P(() => {
+      a.renderer && t.value && l.value && (n.value = new ae(a.renderer, {
         depthBuffer: e.depthBuffer,
         stencilBuffer: e.stencilBuffer,
-        multisampling: e.multisampling > 0 && c ? e.multisampling : 0,
+        multisampling: e.multisampling > 0 && f ? e.multisampling : 0,
         frameBufferType: e.frameBufferType
-      }), l.value.addPass(new le(a, t)), e.dissableNormalPass || r());
+      }), n.value.addPass(new le(t.value, l.value)), e.disableNormalPass || v());
     });
-    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;
+    const { onLoop: s } = ne();
+    return s(({ delta: d }) => {
+      if (e.enabled && a.renderer && n.value && i.value && o.value) {
+        const m = a.renderer.autoClear;
+        a.renderer.autoClear = e.autoClear, e.stencilBuffer && !e.autoClear && a.renderer.clearStencil(), n.value.render(d), a.renderer.autoClear = m;
       }
     }), (d, m) => _(d.$slots, "default");
   }
-}), Pe = /* @__PURE__ */ B({
+}), Be = /* @__PURE__ */ O({
   __name: "Bloom",
   props: {
     blendFunction: { default: () => W.ADD },
@@ -168,40 +203,40 @@ const Ee = /* @__PURE__ */ B({
     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({
+  setup(e, { expose: a }) {
+    const { state: n } = A(), t = C(z), l = b(null), r = b(null);
+    a({ pass: l, effect: r });
+    function c() {
+      r.value = new ie({
         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));
+      }), l.value = new L(D(n.camera), S(r.value));
     }
-    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));
+    function f() {
+      var i, o, s;
+      (i = r.value) == null || i.dispose(), (o = l.value) == null || o.dispose(), (s = t == null ? void 0 : t.value) == null || s.removePass(S(l.value));
     }
-    const f = y(
-      () => [l.camera, a == null ? void 0 : a.value],
+    const v = p(
+      () => [n.camera, t == null ? void 0 : t.value],
       () => {
-        var r;
-        l.camera && a && a.value && (s(), (r = a == null ? void 0 : a.value) == null || r.addPass(v(t.value)));
+        var i;
+        n.camera && t && t.value && (c(), (i = t == null ? void 0 : t.value) == null || i.addPass(S(l.value)));
       }
-    ), i = y(
+    ), u = p(
       () => [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)));
+        var i;
+        l.value && (f(), c(), (i = t == null ? void 0 : t.value) == null || i.addPass(S(l.value)));
       }
     );
-    return R(() => {
-      c(), f(), i();
-    }), (r, u) => null;
+    return F(() => {
+      f(), v(), u();
+    }), (i, o) => null;
   }
-}), Be = /* @__PURE__ */ B({
+}), xe = /* @__PURE__ */ O({
   __name: "Glitch",
   props: {
     blendFunction: { default: () => W.ADD },
@@ -216,11 +251,11 @@ const Ee = /* @__PURE__ */ B({
     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({
+  setup(e, { expose: a }) {
+    const { state: n } = A(), t = C(z), l = b(null), r = b(null);
+    a({ pass: l });
+    function c() {
+      r.value = new re({
         blendFunction: e.blendFunction,
         delay: e.delay,
         duration: e.duration,
@@ -229,179 +264,129 @@ const Ee = /* @__PURE__ */ B({
         columns: e.columns,
         chromaticAberrationOffset: e.chromaticAberrationOffset,
         dtSize: e.dtSize
-      }), t.value = new z(N(l.camera), v(o.value));
+      }), l.value = new L(D(n.camera), S(r.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));
+    function f() {
+      var o, s, d;
+      (o = r.value) == null || o.dispose(), (s = l.value) == null || s.dispose(), (d = t == null ? void 0 : t.value) == null || d.removePass(S(l.value));
     }
-    const f = y(
-      () => [l.camera, a == null ? void 0 : a.value],
+    const v = p(
+      () => [n.camera, t == null ? void 0 : t.value],
       () => {
-        var u;
-        l.camera && a && a.value && (s(), (u = a == null ? void 0 : a.value) == null || u.addPass(v(t.value)));
+        var o;
+        n.camera && t && t.value && (c(), (o = t == null ? void 0 : t.value) == null || o.addPass(S(l.value)));
       }
-    ), i = y(
+    ), u = p(
       () => [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)));
+        var o, s;
+        l.value && ((o = t == null ? void 0 : t.value) == null || o.removePass(S(l.value)), c(), (s = t == null ? void 0 : t.value) == null || s.addPass(S(l.value)));
       }
     );
-    S(() => {
-      t.value && (t.value.mode = e.active ? e.mode || O.SPORADIC : O.DISABLED);
+    P(() => {
+      l.value && (l.value.mode = e.active ? e.mode || j.SPORADIC : j.DISABLED);
     });
-    const r = y(
+    const i = p(
       () => e.active,
-      (u) => {
-        t.value && (t.value.enabled = u);
+      (o) => {
+        l.value && (l.value.enabled = o);
       }
     );
-    return R(() => {
-      c(), f(), i(), r();
-    }), (u, d) => null;
+    return F(() => {
+      f(), v(), u(), i();
+    }), (o, s) => null;
   }
-}), xe = B({
-  name: "Outline",
+}), Oe = /* @__PURE__ */ O({
+  __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
-    }
+    outlinedObjects: {},
+    blur: { type: Boolean },
+    xRay: { type: Boolean },
+    kernelSize: {},
+    pulseSpeed: {},
+    resolutionX: {},
+    resolutionY: {},
+    edgeStrength: {},
+    patternScale: {},
+    multisampling: {},
+    blendFunction: {},
+    patternTexture: {},
+    resolutionScale: {},
+    hiddenEdgeColor: {},
+    visibleEdgeColor: {}
   },
   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 a = e, { state: n } = A(), t = C(z), l = T(null), r = T(null), c = (u) => u !== void 0 ? R(u).getHex() : void 0, f = y(() => {
       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;
+        blur: u,
+        xRay: i,
+        kernelSize: o,
+        pulseSpeed: s,
+        resolutionX: d,
+        resolutionY: m,
+        patternScale: g,
+        edgeStrength: h,
+        multisampling: B,
+        blendFunction: x,
+        patternTexture: Y,
+        resolutionScale: K,
+        hiddenEdgeColor: U,
+        visibleEdgeColor: V
+      } = a;
       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)
+        blur: u,
+        xRay: i,
+        kernelSize: o,
+        pulseSpeed: s,
+        resolutionX: d,
+        resolutionY: m,
+        patternScale: g,
+        edgeStrength: h,
+        blendFunction: x,
+        multisampling: B,
+        patternTexture: Y,
+        resolutionScale: K,
+        hiddenEdgeColor: c(U),
+        visibleEdgeColor: c(V)
       };
-    }), 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());
+    }), v = P(() => {
+      var u;
+      n.camera && t && t.value && n.scene && (r.value = new G(n.scene, n.camera, f.value), l.value = new L(n.camera, r.value), (u = t.value) == null || u.addPass(l.value), v());
     });
-    return y(
-      [() => e.outlinedObjects, t],
+    return p(
+      [() => a.outlinedObjects, r],
       // 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 || []);
+        var u;
+        (u = r.value) == null || u.selection.set(a.outlinedObjects || []);
       },
       {
         immediate: !0
       }
-    ), S(() => {
-      if (!t.value)
+    ), P(() => {
+      if (!r.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();
-    }), () => {
-    };
+      const u = new G(), {
+        blur: i,
+        xRay: o,
+        kernelSize: s,
+        pulseSpeed: d,
+        patternScale: m,
+        edgeStrength: g,
+        multisampling: h,
+        hiddenEdgeColor: B,
+        visibleEdgeColor: x
+      } = f.value;
+      r.value.blur = i !== void 0 ? i : u.blur, r.value.xRay = o !== void 0 ? o : u.xRay, r.value.pulseSpeed = d !== void 0 ? d : u.pulseSpeed, r.value.kernelSize = s !== void 0 ? s : u.kernelSize, r.value.edgeStrength = g !== void 0 ? g : u.edgeStrength, r.value.patternScale = m !== void 0 ? m : u.patternScale, r.value.multisampling = h !== void 0 ? h : u.multisampling, r.value.hiddenEdgeColor = B !== void 0 ? R(B) : u.hiddenEdgeColor, r.value.visibleEdgeColor = x !== void 0 ? R(x) : u.visibleEdgeColor, u.dispose();
+    }), F(() => {
+      var u, i, o, s;
+      (u = r.value) == null || u.selection.clear(), l.value && ((i = t == null ? void 0 : t.value) == null || i.removePass(l.value)), (o = r.value) == null || o.dispose(), (s = l.value) == null || s.dispose();
+    }), (u, i) => null;
   }
 });
 export {
-  Pe as Bloom,
+  Be as Bloom,
   Ee as EffectComposer,
-  Be as Glitch,
-  xe as Outline
+  xe as Glitch,
+  Oe as Outline
 };

package/dist/tres-postprocessing.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.2.0
+ * version: v0.3.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(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"})});
+(function(b,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):(b=typeof globalThis<"u"?globalThis:b||self,t(b["tres-postprocessing"]={},b.Vue,b.Three,b.TresjsCore,b.Postprocessing))})(this,function(b,t,j,g,v){"use strict";function P(){const{state:e,setState:l}=t.inject("useTres",g.useTres()),a=t.inject("extend")||(()=>{});return{state:e,setState:l,extend:a}}let C;function F(){var e;if(C!==void 0)return C;try{let l;const a=document.createElement("canvas");return C=!!(window.WebGL2RenderingContext&&(l=a.getContext("webgl2"))),l&&((e=l.getExtension("WEBGL_lose_context"))==null||e.loseContext()),C}catch{return C=!1}}function R(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function x(e){return typeof e=="function"?e():t.unref(e)}const M=typeof window<"u",D=()=>{};function L(e,l=!0){t.getCurrentInstance()?t.onMounted(e):l?e():t.nextTick(e)}function E(e){var l;const a=x(e);return(l=a==null?void 0:a.$el)!=null?l:a}const A=M?window:void 0;function z(...e){let l,a,n,o;if(typeof e[0]=="string"||Array.isArray(e[0])?([a,n,o]=e,l=A):[l,a,n,o]=e,!l)return D;Array.isArray(a)||(a=[a]),Array.isArray(n)||(n=[n]);const s=[],d=()=>{s.forEach(u=>u()),s.length=0},m=(u,r,c,f)=>(u.addEventListener(r,c,f),()=>u.removeEventListener(r,c,f)),h=t.watch(()=>[E(l),x(o)],([u,r])=>{d(),u&&s.push(...a.flatMap(c=>n.map(f=>m(u,c,f,r))))},{immediate:!0,flush:"post"}),i=()=>{h(),d()};return R(i),i}function G(){const e=t.ref(!1);return t.getCurrentInstance()&&t.onMounted(()=>{e.value=!0}),e}function $(e){const l=G();return t.computed(()=>(l.value,!!e()))}var T=Object.getOwnPropertySymbols,k=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable,W=(e,l)=>{var a={};for(var n in e)k.call(e,n)&&l.indexOf(n)<0&&(a[n]=e[n]);if(e!=null&&T)for(var n of T(e))l.indexOf(n)<0&&I.call(e,n)&&(a[n]=e[n]);return a};function N(e,l,a={}){const n=a,{window:o=A}=n,s=W(n,["window"]);let d;const m=$(()=>o&&"ResizeObserver"in o),h=()=>{d&&(d.disconnect(),d=void 0)},i=t.computed(()=>Array.isArray(e)?e.map(c=>E(c)):[E(e)]),u=t.watch(i,c=>{if(h(),m.value&&o){d=new ResizeObserver(l);for(const f of c)f&&d.observe(f,s)}},{immediate:!0,flush:"post",deep:!0}),r=()=>{h(),u()};return R(r),{isSupported:m,stop:r}}function q(e,l={}){const{reset:a=!0,windowResize:n=!0,windowScroll:o=!0,immediate:s=!0}=l,d=t.ref(0),m=t.ref(0),h=t.ref(0),i=t.ref(0),u=t.ref(0),r=t.ref(0),c=t.ref(0),f=t.ref(0);function w(){const S=E(e);if(!S){a&&(d.value=0,m.value=0,h.value=0,i.value=0,u.value=0,r.value=0,c.value=0,f.value=0);return}const y=S.getBoundingClientRect();d.value=y.height,m.value=y.bottom,h.value=y.left,i.value=y.right,u.value=y.top,r.value=y.width,c.value=y.x,f.value=y.y}return N(e,w),t.watch(()=>E(e),S=>!S&&w()),o&&z("scroll",w,{capture:!0,passive:!0}),n&&z("resize",w,{passive:!0}),L(()=>{s&&w()}),{height:d,bottom:m,left:h,right:i,top:u,width:r,x:c,y:f,update:w}}const p=Symbol(),U=t.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean},disableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:8},frameBufferType:{default:()=>j.HalfFloatType},scene:{},camera:{}},setup(e){const{state:l}=P(),a=t.shallowRef(null),n=t.computed(()=>e.scene||l.scene),o=t.computed(()=>e.camera||l.camera);let s=null,d=null;const m=F();t.provide(p,a);function h(){a.value&&(d=new v.NormalPass(n.value,o.value),d.enabled=!1,a.value.addPass(d),e.resolutionScale!==void 0&&m&&(s=new v.DepthDownsamplingPass({normalBuffer:d.texture,resolutionScale:e.resolutionScale}),s.enabled=!1,a.value.addPass(s)))}const i=t.computed(()=>{var f;return(f=l.canvas)==null?void 0:f.value}),{width:u,height:r}=q(i);t.watchEffect(()=>{a.value&&u.value&&r.value&&a.value.setSize(u.value,r.value)}),t.watchEffect(()=>{l.renderer&&n.value&&o.value&&(a.value=new v.EffectComposer(l.renderer,{depthBuffer:e.depthBuffer,stencilBuffer:e.stencilBuffer,multisampling:e.multisampling>0&&m?e.multisampling:0,frameBufferType:e.frameBufferType}),a.value.addPass(new v.RenderPass(n.value,o.value)),e.disableNormalPass||h())});const{onLoop:c}=g.useRenderLoop();return c(({delta:f})=>{if(e.enabled&&l.renderer&&a.value&&u.value&&r.value){const w=l.renderer.autoClear;l.renderer.autoClear=e.autoClear,e.stencilBuffer&&!e.autoClear&&l.renderer.clearStencil(),a.value.render(f),l.renderer.autoClear=w}}),(f,w)=>t.renderSlot(f.$slots,"default")}}),H=t.defineComponent({__name:"Bloom",props:{blendFunction:{default:()=>v.BlendFunction.ADD},intensity:{default:1},blurPass:{},width:{},height:{},kernelSize:{},luminanceThreshold:{default:.9},luminanceSmoothing:{default:.025},mipmapBlur:{type:Boolean,default:!1}},setup(e,{expose:l}){const{state:a}=P(),n=t.inject(p),o=t.ref(null),s=t.ref(null);l({pass:o,effect:s});function d(){s.value=new v.BloomEffect({blendFunction:e.blendFunction,mipmapBlur:e.mipmapBlur,intensity:e.intensity,luminanceThreshold:e.luminanceThreshold,luminanceSmoothing:e.luminanceSmoothing}),o.value=new v.EffectPass(t.unref(a.camera),t.toRaw(s.value))}function m(){var u,r,c;(u=s.value)==null||u.dispose(),(r=o.value)==null||r.dispose(),(c=n==null?void 0:n.value)==null||c.removePass(t.toRaw(o.value))}const h=t.watch(()=>[a.camera,n==null?void 0:n.value],()=>{var u;a.camera&&n&&n.value&&(d(),(u=n==null?void 0:n.value)==null||u.addPass(t.toRaw(o.value)))}),i=t.watch(()=>[e.blendFunction,e.mipmapBlur,e.intensity,e.luminanceThreshold,e.luminanceSmoothing],()=>{var u;o.value&&(m(),d(),(u=n==null?void 0:n.value)==null||u.addPass(t.toRaw(o.value)))});return t.onUnmounted(()=>{m(),h(),i()}),(u,r)=>null}}),V=t.defineComponent({__name:"Glitch",props:{blendFunction:{default:()=>v.BlendFunction.ADD},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{default:.85},columns:{default:.05},chromaticAberrationOffset:{},peturbationMap:{},dtSize:{default:64}},setup(e,{expose:l}){const{state:a}=P(),n=t.inject(p),o=t.ref(null),s=t.ref(null);l({pass:o});function d(){s.value=new v.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}),o.value=new v.EffectPass(t.unref(a.camera),t.toRaw(s.value))}function m(){var r,c,f;(r=s.value)==null||r.dispose(),(c=o.value)==null||c.dispose(),(f=n==null?void 0:n.value)==null||f.removePass(t.toRaw(o.value))}const h=t.watch(()=>[a.camera,n==null?void 0:n.value],()=>{var r;a.camera&&n&&n.value&&(d(),(r=n==null?void 0:n.value)==null||r.addPass(t.toRaw(o.value)))}),i=t.watch(()=>[e.delay,e.duration,e.strength,e.ratio,e.columns,e.chromaticAberrationOffset,e.peturbationMap,e.dtSize],()=>{var r,c;o.value&&((r=n==null?void 0:n.value)==null||r.removePass(t.toRaw(o.value)),d(),(c=n==null?void 0:n.value)==null||c.addPass(t.toRaw(o.value)))});t.watchEffect(()=>{o.value&&(o.value.mode=e.active?e.mode||v.GlitchMode.SPORADIC:v.GlitchMode.DISABLED)});const u=t.watch(()=>e.active,r=>{o.value&&(o.value.enabled=r)});return t.onUnmounted(()=>{m(),h(),i(),u()}),(r,c)=>null}}),X=t.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean},xRay:{type:Boolean},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(e){const l=e,{state:a}=P(),n=t.inject(p),o=t.shallowRef(null),s=t.shallowRef(null),d=i=>i!==void 0?g.normalizeColor(i).getHex():void 0,m=t.computed(()=>{const{blur:i,xRay:u,kernelSize:r,pulseSpeed:c,resolutionX:f,resolutionY:w,patternScale:S,edgeStrength:y,multisampling:B,blendFunction:O,patternTexture:Y,resolutionScale:K,hiddenEdgeColor:J,visibleEdgeColor:Q}=l;return{blur:i,xRay:u,kernelSize:r,pulseSpeed:c,resolutionX:f,resolutionY:w,patternScale:S,edgeStrength:y,blendFunction:O,multisampling:B,patternTexture:Y,resolutionScale:K,hiddenEdgeColor:d(J),visibleEdgeColor:d(Q)}}),h=t.watchEffect(()=>{var i;a.camera&&n&&n.value&&a.scene&&(s.value=new v.OutlineEffect(a.scene,a.camera,m.value),o.value=new v.EffectPass(a.camera,s.value),(i=n.value)==null||i.addPass(o.value),h())});return t.watch([()=>l.outlinedObjects,s],()=>{var i;(i=s.value)==null||i.selection.set(l.outlinedObjects||[])},{immediate:!0}),t.watchEffect(()=>{if(!s.value)return;const i=new v.OutlineEffect,{blur:u,xRay:r,kernelSize:c,pulseSpeed:f,patternScale:w,edgeStrength:S,multisampling:y,hiddenEdgeColor:B,visibleEdgeColor:O}=m.value;s.value.blur=u!==void 0?u:i.blur,s.value.xRay=r!==void 0?r:i.xRay,s.value.pulseSpeed=f!==void 0?f:i.pulseSpeed,s.value.kernelSize=c!==void 0?c:i.kernelSize,s.value.edgeStrength=S!==void 0?S:i.edgeStrength,s.value.patternScale=w!==void 0?w:i.patternScale,s.value.multisampling=y!==void 0?y:i.multisampling,s.value.hiddenEdgeColor=B!==void 0?g.normalizeColor(B):i.hiddenEdgeColor,s.value.visibleEdgeColor=O!==void 0?g.normalizeColor(O):i.visibleEdgeColor,i.dispose()}),t.onUnmounted(()=>{var i,u,r,c;(i=s.value)==null||i.selection.clear(),o.value&&((u=n==null?void 0:n.value)==null||u.removePass(o.value)),(r=s.value)==null||r.dispose(),(c=o.value)==null||c.dispose()}),(i,u)=>null}});b.Bloom=H,b.EffectComposer=U,b.Glitch=V,b.Outline=X,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/post-processing",
   "description": "Post-processing library for TresJS",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "files": [
@@ -42,38 +42,38 @@
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
-    "@tresjs/core": "2.1.2",
-    "three": "latest",
-    "vue": "^3.3.4"
+    "@tresjs/core": ">=2.3.0",
+    "three": ">=0.133",
+    "vue": ">=3.3"
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
-    "postprocessing": "^6.31.0",
-    "three": "^0.152.2",
-    "three-stdlib": "^2.23.4",
-    "vue": "^3.3.4"
+    "@vueuse/core": "^10.2.0",
+    "postprocessing": "^6.32.1",
+    "three-stdlib": "^2.23.10"
   },
   "devDependencies": {
     "@alvarosabu/prettier-config": "^1.3.0",
     "@release-it/conventional-changelog": "^5.1.1",
-    "@tresjs/cientos": "2.1.2",
-    "@tresjs/core": "2.1.2",
+    "@tresjs/cientos": "2.1.4",
+    "@tresjs/core": "2.3.0",
     "@types/three": "^0.152.1",
-    "@vitejs/plugin-vue": "^4.1.0",
-    "gsap": "^3.11.5",
-    "kolorist": "^1.7.0",
-    "pathe": "^1.1.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "gsap": "^3.12.1",
+    "kolorist": "^1.8.0",
+    "pathe": "^1.1.1",
     "prettier": "^2.8.8",
-    "release-it": "^15.10.3",
+    "release-it": "^15.11.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-visualizer": "^5.9.0",
-    "typescript": "^5.0.4",
-    "unocss": "^0.52.5",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "three": "^0.153.0",
+    "typescript": "^5.1.3",
+    "unocss": "^0.53.3",
     "vite": "^4.3.9",
     "vite-plugin-banner": "^0.7.0",
     "vite-plugin-dts": "2.3.0",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-beta.1",
-    "vue-tsc": "^1.6.5"
+    "vitepress": "1.0.0-beta.3",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.1"
   }
 }

package/dist/core/effects/Outline.d.ts

@@ -1,134 +0,0 @@
-import type { PropType } from 'vue';
-import type { BlendFunction, KernelSize } from 'postprocessing';
-import type { Object3D, ColorRepresentation } from 'three';
-export declare const Outline: import("vue").DefineComponent<{
-    /**
-     * The objects in the scene which should have an outline.
-     */
-    outlinedObjects: {
-        type: PropType<Object3D<import("three").Event>[]>;
-        requred: boolean;
-    };
-    /**
-     * The blend function. Use `BlendFunction.ALPHA` for dark outlines.
-     */
-    blendFunction: {
-        type: PropType<BlendFunction>;
-    };
-    patternTexture: {
-        type: PropType<number>;
-    };
-    patternScale: {
-        type: PropType<number>;
-    };
-    edgeStrength: {
-        type: PropType<number>;
-    };
-    /**
-     * The pulse speed. A value of zero disables the pulse effect.
-     */
-    pulseSpeed: {
-        type: PropType<number>;
-    };
-    visibleEdgeColor: {
-        type: PropType<[r: number, g: number, b: number] | ColorRepresentation>;
-    };
-    hiddenEdgeColor: {
-        type: PropType<[r: number, g: number, b: number] | ColorRepresentation>;
-    };
-    /**
-     * The number of samples used for multisample antialiasing. Requires WebGL 2.
-     */
-    multisampling: {
-        type: PropType<number>;
-    };
-    resolutionScale: {
-        type: PropType<number>;
-    };
-    resolutionX: {
-        type: PropType<number>;
-    };
-    resolutionY: {
-        type: PropType<number>;
-    };
-    /**
-     * The blur kernel size.
-     */
-    kernelSize: {
-        type: PropType<KernelSize>;
-    };
-    blur: {
-        type: PropType<boolean>;
-    };
-    /**
-     * Whether occluded parts of selected objects should be visible
-     */
-    xRay: {
-        type: PropType<boolean>;
-    };
-}, () => void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    /**
-     * The objects in the scene which should have an outline.
-     */
-    outlinedObjects: {
-        type: PropType<Object3D<import("three").Event>[]>;
-        requred: boolean;
-    };
-    /**
-     * The blend function. Use `BlendFunction.ALPHA` for dark outlines.
-     */
-    blendFunction: {
-        type: PropType<BlendFunction>;
-    };
-    patternTexture: {
-        type: PropType<number>;
-    };
-    patternScale: {
-        type: PropType<number>;
-    };
-    edgeStrength: {
-        type: PropType<number>;
-    };
-    /**
-     * The pulse speed. A value of zero disables the pulse effect.
-     */
-    pulseSpeed: {
-        type: PropType<number>;
-    };
-    visibleEdgeColor: {
-        type: PropType<[r: number, g: number, b: number] | ColorRepresentation>;
-    };
-    hiddenEdgeColor: {
-        type: PropType<[r: number, g: number, b: number] | ColorRepresentation>;
-    };
-    /**
-     * The number of samples used for multisample antialiasing. Requires WebGL 2.
-     */
-    multisampling: {
-        type: PropType<number>;
-    };
-    resolutionScale: {
-        type: PropType<number>;
-    };
-    resolutionX: {
-        type: PropType<number>;
-    };
-    resolutionY: {
-        type: PropType<number>;
-    };
-    /**
-     * The blur kernel size.
-     */
-    kernelSize: {
-        type: PropType<KernelSize>;
-    };
-    blur: {
-        type: PropType<boolean>;
-    };
-    /**
-     * Whether occluded parts of selected objects should be visible
-     */
-    xRay: {
-        type: PropType<boolean>;
-    };
-}>>, {}, {}>;