@tresjs/post-processing 0.7.0 → 1.0.0-next.0

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/>
 
@@ -24,7 +23,7 @@ pnpm i @tresjs/post-processing
 
 ## Docs
 
-Checkout the [docs](https://postprocessing.tresjs.org/)
+Checkout the [docs](https://post-processing.tresjs.org/)
 
 ## Demos
 

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,11 @@ 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, {
+    render: (...args: any[]) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EffectComposerProps>, {
     enabled: boolean;
     autoClear: boolean;
     frameBufferType: 1016;
@@ -26,7 +32,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     depthBuffer: undefined;
     multisampling: number;
     stencilBuffer: undefined;
-}>>>, {
+}>>> & {
+    onRender?: ((...args: any[]) => any) | undefined;
+}, {
     enabled: boolean;
     depthBuffer: boolean;
     disableNormalPass: boolean;

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

@@ -1,6 +1,6 @@
 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>;
+    pass: import("vue").Ref<EffectPass | null> | import("vue").ShallowRef<EffectPass | null>;
+    effect: import("vue").Ref<T | null> | import("vue").ShallowRef<T | null>;
 };

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

@@ -1,5 +1,5 @@
 import { BloomEffect } from 'postprocessing';
-import type { KernelSize, BlendFunction } from 'postprocessing';
+import type { BlendFunction, KernelSize } from 'postprocessing';
 export interface BloomProps {
     /**
      * The blend function of this effect. This prop is not reactive.
@@ -56,8 +56,8 @@ export interface BloomProps {
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BloomProps>, {
     mipmapBlur: undefined;
 }>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<BloomEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<BloomEffect | null> | 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>, {
     mipmapBlur: undefined;
 }>>>, {

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

@@ -30,8 +30,8 @@ export interface DepthOfFieldProps {
     resolutionY?: number;
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<DepthOfFieldEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<DepthOfFieldEffect | null> | 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>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -1,6 +1,6 @@
-import { GlitchMode, GlitchEffect } from 'postprocessing';
+import { GlitchEffect, GlitchMode } from 'postprocessing';
 import type { BlendFunction } from 'postprocessing';
-import type { Vector2, Texture } from 'three';
+import type { Texture, Vector2 } from 'three';
 export interface GlitchProps {
     blendFunction?: BlendFunction;
     /**
@@ -90,8 +90,8 @@ export interface GlitchProps {
     dtSize?: number;
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<GlitchProps>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<GlitchEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<GlitchEffect | null> | 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>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -10,8 +10,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     premultiply: boolean;
     blendFunction: BlendFunction;
 }>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<NoiseEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<NoiseEffect | null> | 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>, {
     premultiply: boolean;
     blendFunction: BlendFunction;

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

@@ -41,8 +41,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     blur: undefined;
     xRay: undefined;
 }>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<OutlineEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<OutlineEffect | null> | 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>, {
     blur: undefined;
     xRay: undefined;

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

@@ -6,8 +6,8 @@ export interface PixelationProps {
     granularity?: number;
 }
 declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PixelationProps>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<PixelationEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<PixelationEffect | null> | 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>>>, {}, {}>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

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

@@ -14,8 +14,8 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     offset: number;
     darkness: number;
 }>, {
-    pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
-    effect: import("vue").ShallowRef<VignetteEffect | null>;
+    pass: import("vue").Ref<import("postprocessing").EffectPass | null> | import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
+    effect: import("vue").Ref<VignetteEffect | null> | import("vue").ShallowRef<VignetteEffect | 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<VignetteProps>, {
     technique: VignetteTechnique;
     blendFunction: BlendFunction;

package/dist/index.d.ts

@@ -6,4 +6,5 @@ import Outline from './core/effects/Outline.vue';
 import Pixelation from './core/effects/Pixelation.vue';
 import Vignette from './core/effects/Vignette.vue';
 import Noise from './core/effects/Noise.vue';
-export { Bloom, DepthOfField, EffectComposer, Glitch, Noise, Outline, Pixelation, Vignette, };
+import { useEffect } from './core/composables/effect.ts';
+export { Bloom, DepthOfField, EffectComposer, Glitch, Noise, Outline, Pixelation, Vignette, useEffect, };

package/dist/tres-postprocessing.js

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

package/dist/tres-postprocessing.umd.cjs

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

package/dist/util/prop.d.ts

@@ -11,7 +11,7 @@ import type { Ref, WatchOptions } from 'vue';
  * @param {WatchOptions} watchOptions - The options for watch.
  */
 export declare const makePropWatcher: <T, E>(propGetter: () => T, target: Ref<E>, propertyPath: string, newPlainObjectFunction: () => E & {
-    dispose?(): void;
+    dispose?: (() => void) | undefined;
 }, watchOptions?: WatchOptions) => import("vue").WatchStopHandle;
 /**
  * Creates multiple prop watchers for monitoring changes to multiple properties and updating a target object.
@@ -23,7 +23,7 @@ export declare const makePropWatcher: <T, E>(propGetter: () => T, target: Ref<E>
  * @param {() => E & { dispose?(): void }} newPlainObjectFunction - A function that creates a new plain object to retrieve the defaults from with an optional "dispose" method for cleanup.
  */
 export declare const makePropWatchers: <E>(propGettersAndPropertyPaths: (string | (() => any))[][], target: Ref<E>, newPlainObjectFunction: () => E & {
-    dispose?(): void;
+    dispose?: (() => void) | undefined;
 }) => import("vue").WatchStopHandle[];
 /**
  * Creates multiple prop watchers via the props object for monitoring changes to multiple properties and updating a target object.
@@ -36,5 +36,5 @@ export declare const makePropWatchers: <E>(propGettersAndPropertyPaths: (string
 export declare const makePropWatchersUsingAllProps: <E>(props: {
     [key: string]: any;
 }, target: Ref<E>, newPlainObjectFunction: () => E & {
-    dispose?(): void;
+    dispose?: (() => void) | undefined;
 }) => import("vue").WatchStopHandle[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tresjs/post-processing",
   "type": "module",
-  "version": "0.7.0",
+  "version": "1.0.0-next.0",
   "packageManager": "pnpm@8.10.2",
   "description": "Post-processing library for TresJS",
   "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
@@ -25,8 +25,8 @@
   "main": "./dist/tres-postprocessing.js",
   "module": "./dist/tres-postprocessing.js",
   "files": [
-    "dist",
-    "*.d.ts"
+    "*.d.ts",
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -37,44 +37,45 @@
     "build": "vite build",
     "preview": "vite preview",
     "release": "release-it",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
-    "lint:fix": "pnpm run lint --fix",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
   "peerDependencies": {
+    "@tresjs/core": ">=4.0",
     "three": ">=0.133",
     "vue": ">=3.3"
   },
   "dependencies": {
-    "@tresjs/core": "^3.5.0",
-    "@unocss/core": "^0.57.3",
     "@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",
+    "@tresjs/core": "^4.0.0-rc.1",
+    "@tresjs/eslint-config": "^1.1.0",
+    "@types/three": "^0.159.0",
+    "@unocss/core": "^0.58.0",
+    "@vitejs/plugin-vue": "^4.5.1",
+    "eslint": "^9.3.0",
+    "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"
   }
 }