@tresjs/post-processing 0.6.0 → 0.7.1

package/README.md

@@ -1,10 +1,9 @@
 ![repository-banner.png](/public/repo-banner.png)
 
 <p align="center">
-  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/post-processing?color=%2382DBCA" alt="npm package"></a>
-
-<a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
-
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/post-processing?color=FF7BAC" alt="npm package"></a>
+  <a href="https://www.npmjs.com/package/@tresjs/post-processing"><img src="https://img.shields.io/npm/dm/@tresjs/post-processing?color=FF7BAC" alt="npm downloads"></a>
+  <a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
 </p>
 <br/>
 

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

@@ -1,4 +1,6 @@
 import type { TresObject } from '@tresjs/core';
+import { EffectComposer as EffectComposerImpl } from 'postprocessing';
+import type { ShallowRef } from 'vue';
 export interface EffectComposerProps {
     enabled?: boolean;
     children?: TresObject[];
@@ -18,7 +20,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     depthBuffer: undefined;
     multisampling: number;
     stencilBuffer: undefined;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EffectComposerProps>, {
+}>, {
+    composer: ShallowRef<EffectComposerImpl | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EffectComposerProps>, {
     enabled: boolean;
     autoClear: boolean;
     frameBufferType: 1016;

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

@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<BloomEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BloomProps>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BloomProps>, {
     mipmapBlur: undefined;
 }>>>, {
     mipmapBlur: boolean;

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

@@ -32,7 +32,7 @@ export interface DepthOfFieldProps {
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<DepthOfFieldEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -92,7 +92,7 @@ export interface GlitchProps {
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<GlitchProps>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<GlitchEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<GlitchProps>>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<GlitchProps>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<NoiseEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NoiseProps>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NoiseProps>, {
     premultiply: boolean;
     blendFunction: BlendFunction;
 }>>>, {

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

@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<OutlineEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlineProps>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlineProps>, {
     blur: undefined;
     xRay: undefined;
 }>>>, {

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

@@ -8,7 +8,7 @@ export interface PixelationProps {
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PixelationProps>, {
     pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
     effect: import("vue").ShallowRef<PixelationEffect | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PixelationProps>>>, {}, {}>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PixelationProps>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
 type __VLS_TypePropsToRuntimeProps<T> = {

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

@@ -0,0 +1,47 @@
+import { BlendFunction, VignetteEffect, VignetteTechnique } from 'postprocessing';
+export interface VignetteProps {
+    /**
+     * Whether the noise should be multiplied with the input color.
+     */
+    technique?: VignetteTechnique;
+    blendFunction?: BlendFunction;
+    offset: number;
+    darkness: number;
+}
+declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VignetteProps>, {
+    technique: VignetteTechnique;
+    blendFunction: BlendFunction;
+    offset: number;
+    darkness: number;
+}>, {
+    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").ShallowRef<VignetteEffect | null>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VignetteProps>, {
+    technique: VignetteTechnique;
+    blendFunction: BlendFunction;
+    offset: number;
+    darkness: number;
+}>>>, {
+    blendFunction: BlendFunction;
+    technique: VignetteTechnique;
+    offset: number;
+    darkness: number;
+}, {}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/index.d.ts

@@ -1,8 +1,9 @@
 import Bloom from './core/effects/Bloom.vue';
+import DepthOfField from './core/effects/DepthOfField.vue';
+import EffectComposer from './core/EffectComposer.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 Vignette from './core/effects/Vignette.vue';
 import Noise from './core/effects/Noise.vue';
-import EffectComposer from './core/EffectComposer.vue';
-export { Bloom, Glitch, Outline, Pixelation, DepthOfField, EffectComposer, Noise, };
+export { Bloom, DepthOfField, EffectComposer, Glitch, Noise, Outline, Pixelation, Vignette, };

package/dist/tres-postprocessing.js

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

package/dist/tres-postprocessing.umd.cjs

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

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tresjs/post-processing",
   "type": "module",
-  "version": "0.6.0",
-  "packageManager": "pnpm@8.10.2",
+  "version": "0.7.1",
+  "packageManager": "pnpm@8.11.0",
   "description": "Post-processing library for TresJS",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
   "license": "MIT",
@@ -48,33 +48,33 @@
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@tresjs/core": "^3.5.0",
-    "@unocss/core": "^0.57.3",
+    "@tresjs/core": "^3.5.1",
+    "@unocss/core": "^0.58.0",
     "@vueuse/core": "^10.6.1",
-    "postprocessing": "^6.33.3",
-    "three-stdlib": "^2.28.5"
+    "postprocessing": "^6.33.4",
+    "three-stdlib": "^2.28.7"
   },
   "devDependencies": {
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
-    "@types/three": "^0.158.2",
-    "@vitejs/plugin-vue": "^4.4.1",
-    "gsap": "^3.12.2",
+    "@types/three": "^0.159.0",
+    "@vitejs/plugin-vue": "^4.5.1",
+    "gsap": "^3.12.3",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
     "prettier": "^3.1.0",
     "release-it": "^17.0.0",
     "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-visualizer": "^5.9.2",
-    "three": "^0.158.0",
-    "typescript": "^5.2.2",
-    "unocss": "^0.57.3",
-    "vite": "^4.5.0",
+    "rollup-plugin-visualizer": "^5.10.0",
+    "three": "^0.159.0",
+    "typescript": "^5.3.2",
+    "unocss": "^0.58.0",
+    "vite": "^5.0.4",
     "vite-plugin-banner": "^0.7.1",
-    "vite-plugin-dts": "3.6.3",
-    "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-rc.25",
-    "vue": "^3.3.8",
-    "vue-tsc": "^1.8.22"
+    "vite-plugin-dts": "3.6.4",
+    "vite-svg-loader": "^5.1.0",
+    "vitepress": "1.0.0-rc.31",
+    "vue": "^3.3.9",
+    "vue-tsc": "^1.8.24"
   }
 }

package/dist/core/composables/effect.d.ts

@@ -1,6 +0,0 @@
-import type { Effect } from 'postprocessing';
-import { EffectPass } from 'postprocessing';
-export declare const useEffect: <T extends Effect>(newEffectFunction: () => T) => {
-    pass: import("vue").ShallowRef<EffectPass | null>;
-    effect: import("vue").ShallowRef<T | null>;
-};