@tresjs/post-processing 0.2.1 → 0.4.0

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

@@ -1,23 +1,21 @@
 import type { PropType as __PropType } from 'vue';
-import { Scene } from 'three';
-import { TresCamera, TresObject } from '@tresjs/core';
+import { TresObject } from '@tresjs/core';
 export type EffectComposerProps = {
     enabled?: boolean;
     children?: TresObject[];
     depthBuffer?: boolean;
-    dissableNormalPass?: boolean;
+    disableNormalPass?: boolean;
     stencilBuffer?: boolean;
     resolutionScale?: number;
     autoClear?: boolean;
     multisampling?: number;
     frameBufferType?: number;
-    scene?: Scene;
-    camera?: TresCamera;
 };
 declare const _sfc_main: import("vue").DefineComponent<{
     enabled: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     children: {
         type: __PropType<TresObject[] | undefined>;
@@ -26,14 +24,17 @@ declare const _sfc_main: import("vue").DefineComponent<{
     depthBuffer: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: undefined;
     };
-    dissableNormalPass: {
+    disableNormalPass: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     stencilBuffer: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: undefined;
     };
     resolutionScale: {
         type: __PropType<number | undefined>;
@@ -42,27 +43,23 @@ declare const _sfc_main: import("vue").DefineComponent<{
     autoClear: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     multisampling: {
         type: __PropType<number | undefined>;
         required: false;
+        default: number;
     };
     frameBufferType: {
         type: __PropType<number | undefined>;
         required: false;
-    };
-    scene: {
-        type: __PropType<Scene | undefined>;
-        required: false;
-    };
-    camera: {
-        type: __PropType<TresCamera | undefined>;
-        required: false;
+        default: 1016;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     enabled: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     children: {
         type: __PropType<TresObject[] | undefined>;
@@ -71,14 +68,17 @@ declare const _sfc_main: import("vue").DefineComponent<{
     depthBuffer: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: undefined;
     };
-    dissableNormalPass: {
+    disableNormalPass: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     stencilBuffer: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: undefined;
     };
     resolutionScale: {
         type: __PropType<number | undefined>;
@@ -87,22 +87,25 @@ declare const _sfc_main: import("vue").DefineComponent<{
     autoClear: {
         type: __PropType<boolean | undefined>;
         required: false;
+        default: boolean;
     };
     multisampling: {
         type: __PropType<number | undefined>;
         required: false;
+        default: number;
     };
     frameBufferType: {
         type: __PropType<number | undefined>;
         required: false;
-    };
-    scene: {
-        type: __PropType<Scene | undefined>;
-        required: false;
-    };
-    camera: {
-        type: __PropType<TresCamera | undefined>;
-        required: false;
-    };
-}>>, {}, {}>;
+        default: 1016;
+    };
+}>>, {
+    enabled: boolean | undefined;
+    depthBuffer: boolean | undefined;
+    disableNormalPass: boolean | undefined;
+    stencilBuffer: boolean | undefined;
+    autoClear: boolean | undefined;
+    multisampling: number | undefined;
+    frameBufferType: number | undefined;
+}, {}>;
 export default _sfc_main;

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

@@ -1,5 +1,5 @@
 import type { PropType as __PropType } from 'vue';
-import { BlurPass, KernelSize, BlendFunction } from 'postprocessing';
+import { KernelSize, BlendFunction } from 'postprocessing';
 export type BloomProps = {
     blendFunction?: BlendFunction;
     /**
@@ -10,27 +10,6 @@ export type BloomProps = {
      * @memberof BloomProps
      */
     intensity?: number;
-    /**
-     *  An efficient, incremental blur pass.
-     *
-     * @type {BlurPass}
-     * @memberof BloomProps
-     */
-    blurPass?: BlurPass;
-    /**
-     * The width of the render
-     *
-     * @type {number}
-     * @memberof BloomProps
-     */
-    width?: number;
-    /**
-     * The height of the render
-     *
-     * @type {number}
-     * @memberof BloomProps
-     */
-    height?: number;
     /**
      * The kernel size.
      *
@@ -77,18 +56,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<number | undefined>;
         required: false;
     };
-    blurPass: {
-        type: __PropType<import("postprocessing").KawaseBlurPass | undefined>;
-        required: false;
-    };
-    width: {
-        type: __PropType<number | undefined>;
-        required: false;
-    };
-    height: {
-        type: __PropType<number | undefined>;
-        required: false;
-    };
     kernelSize: {
         type: __PropType<KernelSize | undefined>;
         required: false;
@@ -114,18 +81,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<number | undefined>;
         required: false;
     };
-    blurPass: {
-        type: __PropType<import("postprocessing").KawaseBlurPass | undefined>;
-        required: false;
-    };
-    width: {
-        type: __PropType<number | undefined>;
-        required: false;
-    };
-    height: {
-        type: __PropType<number | undefined>;
-        required: false;
-    };
     kernelSize: {
         type: __PropType<KernelSize | undefined>;
         required: false;

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

@@ -78,7 +78,7 @@ export interface GlitchProps {
      * @type {Texture}
      * @memberof GlitchProps
      */
-    peturbationMap?: Texture;
+    perturbationMap?: Texture;
     /**
      * The size of the generated noise map. Will be ignored if a perturbation map is provided.
      *
@@ -126,7 +126,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<Vector2 | undefined>;
         required: false;
     };
-    peturbationMap: {
+    perturbationMap: {
         type: __PropType<Texture | undefined>;
         required: false;
     };
@@ -171,7 +171,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: __PropType<Vector2 | undefined>;
         required: false;
     };
-    peturbationMap: {
+    perturbationMap: {
         type: __PropType<Texture | undefined>;
         required: false;
     };

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

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

package/dist/core/injectionKeys.d.ts

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

package/dist/index.d.ts

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

package/dist/tres-postprocessing.js

@@ -1,407 +1,229 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.2.1
+ * version: v0.4.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { inject as b, getCurrentInstance as D, onMounted as F, nextTick as Y, getCurrentScope as q, onScopeDispose as U, unref as N, toRef as V, readonly as J, customRef as K, ref as h, watch as y, watchEffect as S, computed as G, defineComponent as B, shallowRef as L, provide as Z, renderSlot as _, toRaw as v, onUnmounted as R } from "vue";
-import { HalfFloatType as ee, Color as A } from "three";
-import { useTres as te, useRenderLoop as ne } from "@tresjs/core";
-import { EffectComposer as ae, RenderPass as le, NormalPass as ie, DepthDownsamplingPass as ue, BlendFunction as W, BloomEffect as re, EffectPass as z, GlitchMode as O, GlitchEffect as oe, OutlineEffect as T } from "postprocessing";
-function x() {
-  const { state: e, setState: n } = b("useTres", te()), l = b("extend") || (() => {
-  });
-  return {
-    state: e,
-    setState: n,
-    extend: l
-  };
-}
-let g;
-function se() {
-  var e;
-  if (g !== void 0)
-    return g;
-  try {
-    let n;
-    const l = document.createElement("canvas");
-    return g = !!(window.WebGL2RenderingContext && (n = l.getContext("webgl2"))), n && ((e = n.getExtension("WEBGL_lose_context")) == null || e.loseContext()), g;
-  } catch {
-    return g = !1;
-  }
-}
-function k(e) {
-  return q() ? (U(e), !0) : !1;
-}
-function H(e) {
-  return typeof e == "function" ? e() : N(e);
-}
-const ce = typeof window < "u", I = () => {
-};
-function de(...e) {
-  if (e.length !== 1)
-    return V(...e);
-  const n = e[0];
-  return typeof n == "function" ? J(K(() => ({ get: n, set: I }))) : h(n);
-}
-function fe(e, n = !0) {
-  D() ? F(e) : n ? e() : Y(e);
-}
-function me(e) {
-  var n;
-  const l = H(e);
-  return (n = l == null ? void 0 : l.$el) != null ? n : l;
-}
-const M = ce ? window : void 0;
-function ve(...e) {
-  let n, l, a, t;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([l, a, t] = e, n = M) : [n, l, a, t] = e, !n)
-    return I;
-  Array.isArray(l) || (l = [l]), Array.isArray(a) || (a = [a]);
-  const o = [], s = () => {
-    o.forEach((r) => r()), o.length = 0;
-  }, c = (r, u, d, m) => (r.addEventListener(u, d, m), () => r.removeEventListener(u, d, m)), f = y(
-    () => [me(n), H(t)],
-    ([r, u]) => {
-      s(), r && o.push(
-        ...l.flatMap((d) => a.map((m) => c(r, d, m, u)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), i = () => {
-    f(), s();
-  };
-  return k(i), i;
-}
-function he() {
-  const e = h(!1);
-  return D() && F(() => {
-    e.value = !0;
-  }), e;
-}
-function ye(e) {
-  const n = he();
-  return G(() => (n.value, !!e()));
-}
-function ge(e, n = {}) {
-  const { window: l = M } = n, a = ye(() => l && "matchMedia" in l && typeof l.matchMedia == "function");
-  let t;
-  const o = h(!1), s = () => {
-    t && ("removeEventListener" in t ? t.removeEventListener("change", c) : t.removeListener(c));
-  }, c = () => {
-    a.value && (s(), t = l.matchMedia(de(e).value), o.value = !!(t != null && t.matches), t && ("addEventListener" in t ? t.addEventListener("change", c) : t.addListener(c)));
-  };
-  return S(c), k(() => s()), o;
-}
-function be(e = {}) {
-  const {
-    window: n = M,
-    initialWidth: l = 1 / 0,
-    initialHeight: a = 1 / 0,
-    listenOrientation: t = !0,
-    includeScrollbar: o = !0
-  } = e, s = h(l), c = h(a), f = () => {
-    n && (o ? (s.value = n.innerWidth, c.value = n.innerHeight) : (s.value = n.document.documentElement.clientWidth, c.value = n.document.documentElement.clientHeight));
-  };
-  if (f(), fe(f), ve("resize", f, { passive: !0 }), t) {
-    const i = ge("(orientation: portrait)");
-    y(i, () => f());
-  }
-  return { width: s, height: c };
-}
-const Ee = /* @__PURE__ */ B({
-  __name: "EffectComposer",
-  props: {
-    enabled: { type: Boolean, default: !0 },
-    children: {},
-    depthBuffer: { type: Boolean },
-    dissableNormalPass: { type: Boolean, default: !1 },
-    stencilBuffer: { type: Boolean },
-    resolutionScale: {},
-    autoClear: { type: Boolean, default: !0 },
-    multisampling: { default: 8 },
-    frameBufferType: { default: () => ee },
-    scene: {},
-    camera: {}
-  },
-  setup(e) {
-    const { state: n } = x(), l = L(null), a = e.scene || n.scene, t = e.camera || n.camera;
-    let o = null, s = null;
-    const c = se();
-    Z("effectComposer", l);
-    const { width: f, height: i } = be();
-    function r() {
-      l.value && (s = new ie(e.scene, e.camera), s.enabled = !1, l.value.addPass(s), e.resolutionScale !== void 0 && c && (o = new ue({
-        normalBuffer: s.texture,
-        resolutionScale: e.resolutionScale
-      }), o.enabled = !1, l.value.addPass(o)));
-    }
-    S(() => {
-      n.renderer && (n.renderer.setSize(f.value, i.value), n.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)), l.value = new ae(n.renderer, {
-        depthBuffer: e.depthBuffer,
-        stencilBuffer: e.stencilBuffer,
-        multisampling: e.multisampling > 0 && c ? e.multisampling : 0,
-        frameBufferType: e.frameBufferType
-      }), l.value.addPass(new le(a, t)), e.dissableNormalPass || r());
-    });
-    const { onLoop: u } = ne();
-    return u(() => {
-      l.value && l.value.render();
-    }), u(({ delta: d }) => {
-      if (e.enabled && n.renderer && l.value) {
-        const m = n.renderer.autoClear;
-        n.renderer.autoClear = e.autoClear, e.stencilBuffer && !e.autoClear && n.renderer.clearStencil(), l.value.render(d), n.renderer.autoClear = m;
-      }
-    }), (d, m) => _(d.$slots, "default");
-  }
-}), Pe = /* @__PURE__ */ B({
+import { defineComponent as _, inject as T, shallowRef as g, watchEffect as h, onUnmounted as w, computed as j, watch as F, provide as H, renderSlot as I } from "vue";
+import { useTresContext as P, normalizeColor as z, useRenderLoop as X } from "@tresjs/core";
+import { BloomEffect as O, EffectPass as M, GlitchEffect as k, GlitchMode as Y, OutlineEffect as A, EffectComposer as R, RenderPass as K, NormalPass as U, DepthDownsamplingPass as q } from "postprocessing";
+import { HalfFloatType as G } from "three";
+const x = Symbol(), ee = /* @__PURE__ */ _({
   __name: "Bloom",
   props: {
-    blendFunction: { default: () => W.ADD },
-    intensity: { default: 1 },
-    blurPass: {},
-    width: {},
-    height: {},
+    blendFunction: {},
+    intensity: {},
     kernelSize: {},
-    luminanceThreshold: { default: 0.9 },
-    luminanceSmoothing: { default: 0.025 },
-    mipmapBlur: { type: Boolean, default: !1 }
+    luminanceThreshold: {},
+    luminanceSmoothing: {},
+    mipmapBlur: { type: Boolean }
   },
-  setup(e, { expose: n }) {
-    const { state: l } = x(), a = b("effectComposer"), t = h(null), o = h(null);
-    n({ pass: t, effect: o });
-    function s() {
-      o.value = new re({
-        blendFunction: e.blendFunction,
-        mipmapBlur: e.mipmapBlur,
-        intensity: e.intensity,
-        luminanceThreshold: e.luminanceThreshold,
-        luminanceSmoothing: e.luminanceSmoothing
-      }), t.value = new z(N(l.camera), v(o.value));
-    }
-    function c() {
-      var r, u;
-      (r = o.value) == null || r.dispose(), (u = t.value) == null || u.dispose(), a == null || a.value.removePass(v(t.value));
-    }
-    const f = y(
-      () => [l.camera, a == null ? void 0 : a.value],
-      () => {
-        var r;
-        l.camera && a && a.value && (s(), (r = a == null ? void 0 : a.value) == null || r.addPass(v(t.value)));
-      }
-    ), i = y(
-      () => [e.blendFunction, e.mipmapBlur, e.intensity, e.luminanceThreshold, e.luminanceSmoothing],
-      () => {
-        var r;
-        t.value && (c(), s(), (r = a == null ? void 0 : a.value) == null || r.addPass(v(t.value)));
-      }
-    );
-    return R(() => {
-      c(), f(), i();
-    }), (r, u) => null;
+  setup(f, { expose: o }) {
+    const l = f, n = T(x), t = g(null), e = g(null);
+    o({ pass: t, effect: e });
+    const { camera: i } = P();
+    let s;
+    return s = h(() => {
+      !i.value || !(n != null && n.value) || (s == null || s(), !e.value && (e.value = new O(l), t.value = new M(i.value, e.value), n.value.addPass(t.value)));
+    }), h(() => {
+      if (!e.value)
+        return;
+      const a = new O();
+      e.value.intensity = l.intensity !== void 0 ? l.intensity : a.intensity, e.value.kernelSize = l.kernelSize !== void 0 ? l.kernelSize : a.kernelSize, e.value.luminanceMaterial.smoothing = l.luminanceSmoothing !== void 0 ? l.luminanceSmoothing : a.luminanceMaterial.smoothing, e.value.luminanceMaterial.threshold = l.luminanceThreshold !== void 0 ? l.luminanceThreshold : a.luminanceMaterial.threshold, a.dispose();
+    }), w(() => {
+      var a, d, v;
+      t.value && ((a = n == null ? void 0 : n.value) == null || a.removePass(t.value)), (d = e.value) == null || d.dispose(), (v = t.value) == null || v.dispose();
+    }), (a, d) => null;
   }
-}), Be = /* @__PURE__ */ B({
+}), le = /* @__PURE__ */ _({
   __name: "Glitch",
   props: {
-    blendFunction: { default: () => W.ADD },
+    blendFunction: {},
     delay: {},
     duration: {},
     strength: {},
     mode: {},
     active: { type: Boolean },
-    ratio: { default: 0.85 },
-    columns: { default: 0.05 },
+    ratio: {},
+    columns: {},
     chromaticAberrationOffset: {},
-    peturbationMap: {},
-    dtSize: { default: 64 }
+    perturbationMap: {},
+    dtSize: {}
   },
-  setup(e, { expose: n }) {
-    const { state: l } = x(), a = b("effectComposer"), t = h(null), o = h(null);
-    n({ pass: t });
-    function s() {
-      o.value = new oe({
-        blendFunction: e.blendFunction,
-        delay: e.delay,
-        duration: e.duration,
-        strength: e.strength,
-        ratio: e.ratio,
-        columns: e.columns,
-        chromaticAberrationOffset: e.chromaticAberrationOffset,
-        dtSize: e.dtSize
-      }), t.value = new z(N(l.camera), v(o.value));
-    }
-    function c() {
-      var u, d;
-      (u = o.value) == null || u.dispose(), (d = t.value) == null || d.dispose(), a == null || a.value.removePass(v(t.value));
-    }
-    const f = y(
-      () => [l.camera, a == null ? void 0 : a.value],
-      () => {
-        var u;
-        l.camera && a && a.value && (s(), (u = a == null ? void 0 : a.value) == null || u.addPass(v(t.value)));
-      }
-    ), i = y(
-      () => [e.delay, e.duration, e.strength, e.ratio, e.columns, e.chromaticAberrationOffset, e.peturbationMap, e.dtSize],
-      () => {
-        var u;
-        t.value && (a == null || a.value.removePass(v(t.value)), s(), (u = a == null ? void 0 : a.value) == null || u.addPass(v(t.value)));
-      }
-    );
-    S(() => {
-      t.value && (t.value.mode = e.active ? e.mode || O.SPORADIC : O.DISABLED);
-    });
-    const r = y(
-      () => e.active,
-      (u) => {
-        t.value && (t.value.enabled = u);
-      }
-    );
-    return R(() => {
-      c(), f(), i(), r();
-    }), (u, d) => null;
+  setup(f, { expose: o }) {
+    const l = f, n = T(x), t = g(null), e = g(null);
+    o({ pass: t, effect: e });
+    const { camera: i } = P();
+    let s;
+    return s = h(() => {
+      !i.value || !(n != null && n.value) || (s == null || s(), !e.value && (e.value = new k(l), t.value = new M(i.value, e.value), n.value.addPass(t.value)));
+    }), h(() => {
+      if (!e.value)
+        return;
+      const a = new k(), d = () => l.mode !== void 0 ? l.active === !1 ? Y.DISABLED : l.mode : a.mode;
+      e.value.mode = d(), e.value.ratio = l.ratio !== void 0 ? l.ratio : a.ratio, e.value.delay = l.delay !== void 0 ? l.delay : a.delay, e.value.columns = l.columns !== void 0 ? l.columns : a.columns, e.value.duration = l.duration !== void 0 ? l.duration : a.duration, e.value.strength = l.strength !== void 0 ? l.strength : a.strength, e.value.perturbationMap = l.perturbationMap !== void 0 ? l.perturbationMap : a.perturbationMap, e.value.chromaticAberrationOffset = l.chromaticAberrationOffset !== void 0 ? l.chromaticAberrationOffset : a.chromaticAberrationOffset;
+    }), w(() => {
+      var a, d, v;
+      t.value && ((a = n == null ? void 0 : n.value) == null || a.removePass(t.value)), (d = e.value) == null || d.dispose(), (v = t.value) == null || v.dispose();
+    }), (a, d) => null;
   }
-}), xe = B({
-  name: "Outline",
+}), ae = /* @__PURE__ */ _({
+  __name: "Outline",
   props: {
-    /**
-     * The objects in the scene which should have an outline.
-     */
-    outlinedObjects: {
-      type: Array,
-      requred: !0
-    },
-    /**
-     * The blend function. Use `BlendFunction.ALPHA` for dark outlines.
-     */
-    blendFunction: {
-      type: Number
-    },
-    patternTexture: {
-      type: Number
-    },
-    patternScale: {
-      type: Number
-    },
-    edgeStrength: {
-      type: Number
-    },
-    /**
-     * The pulse speed. A value of zero disables the pulse effect.
-     */
-    pulseSpeed: {
-      type: Number
-    },
-    visibleEdgeColor: {
-      type: [String, Number, Array]
-    },
-    hiddenEdgeColor: {
-      type: [String, Number, Array]
-    },
-    /**
-     * The number of samples used for multisample antialiasing. Requires WebGL 2.
-     */
-    multisampling: {
-      type: Number
-    },
-    resolutionScale: {
-      type: Number
-    },
-    resolutionX: {
-      type: Number
-    },
-    resolutionY: {
-      type: Number
-    },
-    /**
-     * The blur kernel size.
-     */
-    kernelSize: {
-      type: Number
-    },
-    blur: {
-      type: Boolean
-    },
-    /**
-     * Whether occluded parts of selected objects should be visible
-     */
-    xRay: {
-      type: Boolean
-    }
+    outlinedObjects: {},
+    blur: { type: Boolean },
+    xRay: { type: Boolean },
+    kernelSize: {},
+    pulseSpeed: {},
+    resolutionX: {},
+    resolutionY: {},
+    edgeStrength: {},
+    patternScale: {},
+    multisampling: {},
+    blendFunction: {},
+    patternTexture: {},
+    resolutionScale: {},
+    hiddenEdgeColor: {},
+    visibleEdgeColor: {}
   },
-  setup(e) {
-    const { state: n } = x(), l = b("effectComposer"), a = L(null), t = L(null), o = (i) => i instanceof A ? i : Array.isArray(i) ? new A(...i) : new A(i), s = (i) => i !== void 0 ? o(i).getHex() : void 0, c = G(() => {
+  setup(f, { expose: o }) {
+    const l = f, n = T(x), t = g(null), e = g(null);
+    o({ pass: t, effect: e });
+    const i = (u) => u !== void 0 ? z(u).getHex() : void 0, s = j(() => {
       const {
-        blur: i,
-        xRay: r,
-        kernelSize: u,
-        pulseSpeed: d,
+        blur: u,
+        xRay: c,
+        kernelSize: p,
+        pulseSpeed: r,
         resolutionX: m,
-        resolutionY: p,
-        patternScale: w,
+        resolutionY: S,
+        patternScale: B,
         edgeStrength: C,
+        multisampling: y,
         blendFunction: E,
-        multisampling: P,
-        patternTexture: $,
-        resolutionScale: j,
-        hiddenEdgeColor: Q,
-        visibleEdgeColor: X
-      } = e;
+        patternTexture: N,
+        resolutionScale: D,
+        hiddenEdgeColor: $,
+        visibleEdgeColor: W
+      } = l;
       return {
-        blur: i,
-        xRay: r,
-        kernelSize: u,
-        pulseSpeed: d,
+        blur: u,
+        xRay: c,
+        kernelSize: p,
+        pulseSpeed: r,
         resolutionX: m,
-        resolutionY: p,
-        patternScale: w,
+        resolutionY: S,
+        patternScale: B,
         edgeStrength: C,
         blendFunction: E,
-        multisampling: P,
-        patternTexture: $,
-        resolutionScale: j,
-        hiddenEdgeColor: s(Q),
-        visibleEdgeColor: s(X)
+        multisampling: y,
+        patternTexture: N,
+        resolutionScale: D,
+        hiddenEdgeColor: i($),
+        visibleEdgeColor: i(W)
       };
-    }), f = S(() => {
-      var i;
-      n.camera && l && l.value && n.scene && (t.value = new T(n.scene, n.camera, c.value), a.value = new z(n.camera, t.value), (i = l.value) == null || i.addPass(a.value), f());
-    });
-    return y(
-      [() => e.outlinedObjects, t],
-      // whatchEffect is intentionally not used here as it would result in an endless loop
+    }), { camera: a, scene: d } = P();
+    let v;
+    return v = h(() => {
+      !a.value || !(n != null && n.value) || !d.value || (v == null || v(), !e.value && (e.value = new A(d.value, a.value, s.value), t.value = new M(a.value, e.value), n.value.addPass(t.value)));
+    }), F(
+      [() => l.outlinedObjects, e],
+      // watchEffect is intentionally not used here as it would result in an endless loop
       () => {
-        var i;
-        (i = t.value) == null || i.selection.set(e.outlinedObjects || []);
+        var u;
+        (u = e.value) == null || u.selection.set(l.outlinedObjects || []);
       },
       {
         immediate: !0
       }
-    ), S(() => {
-      if (!t.value)
+    ), h(() => {
+      if (!e.value)
         return;
-      const i = new T(), {
-        blur: r,
-        xRay: u,
-        kernelSize: d,
+      const u = new A(), {
+        blur: c,
+        xRay: p,
+        kernelSize: r,
         pulseSpeed: m,
-        patternScale: p,
-        edgeStrength: w,
+        patternScale: S,
+        edgeStrength: B,
         multisampling: C,
-        hiddenEdgeColor: E,
-        visibleEdgeColor: P
-      } = c.value;
-      t.value.blur = r !== void 0 ? r : i.blur, t.value.xRay = u !== void 0 ? u : i.xRay, t.value.pulseSpeed = m !== void 0 ? m : i.pulseSpeed, t.value.kernelSize = d !== void 0 ? d : i.kernelSize, t.value.edgeStrength = w !== void 0 ? w : i.edgeStrength, t.value.patternScale = p !== void 0 ? p : i.patternScale, t.value.multisampling = C !== void 0 ? C : i.multisampling, t.value.hiddenEdgeColor = E !== void 0 ? o(E) : i.hiddenEdgeColor, t.value.visibleEdgeColor = P !== void 0 ? o(P) : i.visibleEdgeColor, i.dispose();
-    }), R(() => {
-      var i, r, u, d;
-      (i = t.value) == null || i.selection.clear(), (r = l.value) == null || r.removePass(a.value), (u = t.value) == null || u.dispose(), (d = a.value) == null || d.dispose();
-    }), () => {
+        hiddenEdgeColor: y,
+        visibleEdgeColor: E
+      } = s.value;
+      e.value.blur = c !== void 0 ? c : u.blur, e.value.xRay = p !== void 0 ? p : u.xRay, e.value.pulseSpeed = m !== void 0 ? m : u.pulseSpeed, e.value.kernelSize = r !== void 0 ? r : u.kernelSize, e.value.edgeStrength = B !== void 0 ? B : u.edgeStrength, e.value.patternScale = S !== void 0 ? S : u.patternScale, e.value.multisampling = C !== void 0 ? C : u.multisampling, e.value.hiddenEdgeColor = y !== void 0 ? z(y) : u.hiddenEdgeColor, e.value.visibleEdgeColor = E !== void 0 ? z(E) : u.visibleEdgeColor, u.dispose();
+    }), w(() => {
+      var u, c, p, r;
+      (u = e.value) == null || u.selection.clear(), t.value && ((c = n == null ? void 0 : n.value) == null || c.removePass(t.value)), (p = e.value) == null || p.dispose(), (r = t.value) == null || r.dispose();
+    }), (u, c) => null;
+  }
+});
+let b;
+function L() {
+  var f;
+  if (b !== void 0)
+    return b;
+  try {
+    let o;
+    const l = document.createElement("canvas");
+    return b = !!(window.WebGL2RenderingContext && (o = l.getContext("webgl2"))), o && ((f = o.getExtension("WEBGL_lose_context")) == null || f.loseContext()), b;
+  } catch {
+    return b = !1;
+  }
+}
+const te = /* @__PURE__ */ _({
+  __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 }
+  },
+  setup(f) {
+    const o = f, { scene: l, camera: n, renderer: t, sizes: e } = P(), i = g(null);
+    let s = null, a = null;
+    H(x, i);
+    const d = () => {
+      i.value && (a = new U(l.value, n.value), a.enabled = !1, i.value.addPass(a), o.resolutionScale !== void 0 && L() && (s = new q({
+        normalBuffer: a.texture,
+        resolutionScale: o.resolutionScale
+      }), s.enabled = !1, i.value.addPass(s)));
     };
+    h(() => {
+      i.value && e.width.value && e.height.value && i.value.setSize(e.width.value, e.height.value);
+    });
+    const v = j(() => {
+      const r = new R(), m = {
+        depthBuffer: o.depthBuffer !== void 0 ? o.depthBuffer : r.inputBuffer.depthBuffer,
+        stencilBuffer: o.stencilBuffer !== void 0 ? o.stencilBuffer : r.inputBuffer.stencilBuffer,
+        multisampling: L() ? 0 : o.multisampling !== void 0 ? o.multisampling : r.multisampling,
+        frameBufferType: o.frameBufferType !== void 0 ? o.frameBufferType : G
+      };
+      return r.dispose(), m;
+    }), u = () => {
+      !t.value && !l.value && !n.value || (i.value = new R(t.value, v.value), i.value.addPass(new K(l.value, n.value)), o.disableNormalPass || d());
+    }, c = F([e.height, e.width], () => {
+      !e.height.value && !e.width.value || (h(u), c == null || c());
+    }), { onLoop: p } = X();
+    return p(({ delta: r }) => {
+      if (o.enabled && t.value && i.value && e.width.value && e.height.value) {
+        const m = t.value.autoClear;
+        t.value.autoClear = o.autoClear, o.stencilBuffer && !o.autoClear && t.value.clearStencil(), i.value.render(r), t.value.autoClear = m;
+      }
+    }), w(() => {
+      var r;
+      (r = i.value) == null || r.dispose();
+    }), (r, m) => I(r.$slots, "default");
   }
 });
 export {
-  Pe as Bloom,
-  Ee as EffectComposer,
-  Be as Glitch,
-  xe as Outline
+  ee as Bloom,
+  te as EffectComposer,
+  le as Glitch,
+  ae as Outline
 };

package/dist/tres-postprocessing.umd.cjs

@@ -1,8 +1,8 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.2.1
+ * version: v0.4.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-(function(v,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("three"),require("@tresjs/core"),require("postprocessing")):typeof define=="function"&&define.amd?define(["exports","vue","three","@tresjs/core","postprocessing"],t):(v=typeof globalThis<"u"?globalThis:v||self,t(v["tres-postprocessing"]={},v.Vue,v.Three,v.TresjsCore,v.Postprocessing))})(this,function(v,t,b,A,m){"use strict";function S(){const{state:e,setState:a}=t.inject("useTres",A.useTres()),i=t.inject("extend")||(()=>{});return{state:e,setState:a,extend:i}}let w;function M(){var e;if(w!==void 0)return w;try{let a;const i=document.createElement("canvas");return w=!!(window.WebGL2RenderingContext&&(a=i.getContext("webgl2"))),a&&((e=a.getExtension("WEBGL_lose_context"))==null||e.loseContext()),w}catch{return w=!1}}function R(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function x(e){return typeof e=="function"?e():t.unref(e)}const N=typeof window<"u",L=()=>{};function O(...e){if(e.length!==1)return t.toRef(...e);const a=e[0];return typeof a=="function"?t.readonly(t.customRef(()=>({get:a,set:L}))):t.ref(a)}function T(e,a=!0){t.getCurrentInstance()?t.onMounted(e):a?e():t.nextTick(e)}function z(e){var a;const i=x(e);return(a=i==null?void 0:i.$el)!=null?a:i}const p=N?window:void 0;function j(...e){let a,i,l,n;if(typeof e[0]=="string"||Array.isArray(e[0])?([i,l,n]=e,a=p):[a,i,l,n]=e,!a)return L;Array.isArray(i)||(i=[i]),Array.isArray(l)||(l=[l]);const c=[],s=()=>{c.forEach(u=>u()),c.length=0},d=(u,o,f,y)=>(u.addEventListener(o,f,y),()=>u.removeEventListener(o,f,y)),h=t.watch(()=>[z(a),x(n)],([u,o])=>{s(),u&&c.push(...i.flatMap(f=>l.map(y=>d(u,f,y,o))))},{immediate:!0,flush:"post"}),r=()=>{h(),s()};return R(r),r}function F(){const e=t.ref(!1);return t.getCurrentInstance()&&t.onMounted(()=>{e.value=!0}),e}function D(e){const a=F();return t.computed(()=>(a.value,!!e()))}function G(e,a={}){const{window:i=p}=a,l=D(()=>i&&"matchMedia"in i&&typeof i.matchMedia=="function");let n;const c=t.ref(!1),s=()=>{n&&("removeEventListener"in n?n.removeEventListener("change",d):n.removeListener(d))},d=()=>{l.value&&(s(),n=i.matchMedia(O(e).value),c.value=!!(n!=null&&n.matches),n&&("addEventListener"in n?n.addEventListener("change",d):n.addListener(d)))};return t.watchEffect(d),R(()=>s()),c}function W(e={}){const{window:a=p,initialWidth:i=1/0,initialHeight:l=1/0,listenOrientation:n=!0,includeScrollbar:c=!0}=e,s=t.ref(i),d=t.ref(l),h=()=>{a&&(c?(s.value=a.innerWidth,d.value=a.innerHeight):(s.value=a.document.documentElement.clientWidth,d.value=a.document.documentElement.clientHeight))};if(h(),T(h),j("resize",h,{passive:!0}),n){const r=G("(orientation: portrait)");t.watch(r,()=>h())}return{width:s,height:d}}const k=t.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean},dissableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:8},frameBufferType:{default:()=>b.HalfFloatType},scene:{},camera:{}},setup(e){const{state:a}=S(),i=t.shallowRef(null),l=e.scene||a.scene,n=e.camera||a.camera;let c=null,s=null;const d=M();t.provide("effectComposer",i);const{width:h,height:r}=W();function u(){i.value&&(s=new m.NormalPass(e.scene,e.camera),s.enabled=!1,i.value.addPass(s),e.resolutionScale!==void 0&&d&&(c=new m.DepthDownsamplingPass({normalBuffer:s.texture,resolutionScale:e.resolutionScale}),c.enabled=!1,i.value.addPass(c)))}t.watchEffect(()=>{a.renderer&&(a.renderer.setSize(h.value,r.value),a.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),i.value=new m.EffectComposer(a.renderer,{depthBuffer:e.depthBuffer,stencilBuffer:e.stencilBuffer,multisampling:e.multisampling>0&&d?e.multisampling:0,frameBufferType:e.frameBufferType}),i.value.addPass(new m.RenderPass(l,n)),e.dissableNormalPass||u())});const{onLoop:o}=A.useRenderLoop();return o(()=>{i.value&&i.value.render()}),o(({delta:f})=>{if(e.enabled&&a.renderer&&i.value){const y=a.renderer.autoClear;a.renderer.autoClear=e.autoClear,e.stencilBuffer&&!e.autoClear&&a.renderer.clearStencil(),i.value.render(f),a.renderer.autoClear=y}}),(f,y)=>t.renderSlot(f.$slots,"default")}}),I=t.defineComponent({__name:"Bloom",props:{blendFunction:{default:()=>m.BlendFunction.ADD},intensity:{default:1},blurPass:{},width:{},height:{},kernelSize:{},luminanceThreshold:{default:.9},luminanceSmoothing:{default:.025},mipmapBlur:{type:Boolean,default:!1}},setup(e,{expose:a}){const{state:i}=S(),l=t.inject("effectComposer"),n=t.ref(null),c=t.ref(null);a({pass:n,effect:c});function s(){c.value=new m.BloomEffect({blendFunction:e.blendFunction,mipmapBlur:e.mipmapBlur,intensity:e.intensity,luminanceThreshold:e.luminanceThreshold,luminanceSmoothing:e.luminanceSmoothing}),n.value=new m.EffectPass(t.unref(i.camera),t.toRaw(c.value))}function d(){var u,o;(u=c.value)==null||u.dispose(),(o=n.value)==null||o.dispose(),l==null||l.value.removePass(t.toRaw(n.value))}const h=t.watch(()=>[i.camera,l==null?void 0:l.value],()=>{var u;i.camera&&l&&l.value&&(s(),(u=l==null?void 0:l.value)==null||u.addPass(t.toRaw(n.value)))}),r=t.watch(()=>[e.blendFunction,e.mipmapBlur,e.intensity,e.luminanceThreshold,e.luminanceSmoothing],()=>{var u;n.value&&(d(),s(),(u=l==null?void 0:l.value)==null||u.addPass(t.toRaw(n.value)))});return t.onUnmounted(()=>{d(),h(),r()}),(u,o)=>null}}),q=t.defineComponent({__name:"Glitch",props:{blendFunction:{default:()=>m.BlendFunction.ADD},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{default:.85},columns:{default:.05},chromaticAberrationOffset:{},peturbationMap:{},dtSize:{default:64}},setup(e,{expose:a}){const{state:i}=S(),l=t.inject("effectComposer"),n=t.ref(null),c=t.ref(null);a({pass:n});function s(){c.value=new m.GlitchEffect({blendFunction:e.blendFunction,delay:e.delay,duration:e.duration,strength:e.strength,ratio:e.ratio,columns:e.columns,chromaticAberrationOffset:e.chromaticAberrationOffset,dtSize:e.dtSize}),n.value=new m.EffectPass(t.unref(i.camera),t.toRaw(c.value))}function d(){var o,f;(o=c.value)==null||o.dispose(),(f=n.value)==null||f.dispose(),l==null||l.value.removePass(t.toRaw(n.value))}const h=t.watch(()=>[i.camera,l==null?void 0:l.value],()=>{var o;i.camera&&l&&l.value&&(s(),(o=l==null?void 0:l.value)==null||o.addPass(t.toRaw(n.value)))}),r=t.watch(()=>[e.delay,e.duration,e.strength,e.ratio,e.columns,e.chromaticAberrationOffset,e.peturbationMap,e.dtSize],()=>{var o;n.value&&(l==null||l.value.removePass(t.toRaw(n.value)),s(),(o=l==null?void 0:l.value)==null||o.addPass(t.toRaw(n.value)))});t.watchEffect(()=>{n.value&&(n.value.mode=e.active?e.mode||m.GlitchMode.SPORADIC:m.GlitchMode.DISABLED)});const u=t.watch(()=>e.active,o=>{n.value&&(n.value.enabled=o)});return t.onUnmounted(()=>{d(),h(),r(),u()}),(o,f)=>null}}),$=t.defineComponent({name:"Outline",props:{outlinedObjects:{type:Array,requred:!0},blendFunction:{type:Number},patternTexture:{type:Number},patternScale:{type:Number},edgeStrength:{type:Number},pulseSpeed:{type:Number},visibleEdgeColor:{type:[String,Number,Array]},hiddenEdgeColor:{type:[String,Number,Array]},multisampling:{type:Number},resolutionScale:{type:Number},resolutionX:{type:Number},resolutionY:{type:Number},kernelSize:{type:Number},blur:{type:Boolean},xRay:{type:Boolean}},setup(e){const{state:a}=S(),i=t.inject("effectComposer"),l=t.shallowRef(null),n=t.shallowRef(null),c=r=>r instanceof b.Color?r:Array.isArray(r)?new b.Color(...r):new b.Color(r),s=r=>r!==void 0?c(r).getHex():void 0,d=t.computed(()=>{const{blur:r,xRay:u,kernelSize:o,pulseSpeed:f,resolutionX:y,resolutionY:g,patternScale:C,edgeStrength:E,blendFunction:P,multisampling:B,patternTexture:U,resolutionScale:H,hiddenEdgeColor:Q,visibleEdgeColor:V}=e;return{blur:r,xRay:u,kernelSize:o,pulseSpeed:f,resolutionX:y,resolutionY:g,patternScale:C,edgeStrength:E,blendFunction:P,multisampling:B,patternTexture:U,resolutionScale:H,hiddenEdgeColor:s(Q),visibleEdgeColor:s(V)}}),h=t.watchEffect(()=>{var r;a.camera&&i&&i.value&&a.scene&&(n.value=new m.OutlineEffect(a.scene,a.camera,d.value),l.value=new m.EffectPass(a.camera,n.value),(r=i.value)==null||r.addPass(l.value),h())});return t.watch([()=>e.outlinedObjects,n],()=>{var r;(r=n.value)==null||r.selection.set(e.outlinedObjects||[])},{immediate:!0}),t.watchEffect(()=>{if(!n.value)return;const r=new m.OutlineEffect,{blur:u,xRay:o,kernelSize:f,pulseSpeed:y,patternScale:g,edgeStrength:C,multisampling:E,hiddenEdgeColor:P,visibleEdgeColor:B}=d.value;n.value.blur=u!==void 0?u:r.blur,n.value.xRay=o!==void 0?o:r.xRay,n.value.pulseSpeed=y!==void 0?y:r.pulseSpeed,n.value.kernelSize=f!==void 0?f:r.kernelSize,n.value.edgeStrength=C!==void 0?C:r.edgeStrength,n.value.patternScale=g!==void 0?g:r.patternScale,n.value.multisampling=E!==void 0?E:r.multisampling,n.value.hiddenEdgeColor=P!==void 0?c(P):r.hiddenEdgeColor,n.value.visibleEdgeColor=B!==void 0?c(B):r.visibleEdgeColor,r.dispose()}),t.onUnmounted(()=>{var r,u,o,f;(r=n.value)==null||r.selection.clear(),(u=i.value)==null||u.removePass(l.value),(o=n.value)==null||o.dispose(),(f=l.value)==null||f.dispose()}),()=>{}}});v.Bloom=I,v.EffectComposer=k,v.Glitch=q,v.Outline=$,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
+(function(v,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue"),require("@tresjs/core"),require("postprocessing"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","@tresjs/core","postprocessing","three"],l):(v=typeof globalThis<"u"?globalThis:v||self,l(v["tres-postprocessing"]={},v.Vue,v.TresjsCore,v.Postprocessing,v.Three))})(this,function(v,l,S,d,x){"use strict";const E=Symbol(),z=l.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const{camera:r}=S.useTresContext();let f;return f=l.watchEffect(()=>{!r.value||!(o!=null&&o.value)||(f==null||f(),!e.value&&(e.value=new d.BloomEffect(t),n.value=new d.EffectPass(r.value,e.value),o.value.addPass(n.value)))}),l.watchEffect(()=>{if(!e.value)return;const a=new d.BloomEffect;e.value.intensity=t.intensity!==void 0?t.intensity:a.intensity,e.value.kernelSize=t.kernelSize!==void 0?t.kernelSize:a.kernelSize,e.value.luminanceMaterial.smoothing=t.luminanceSmoothing!==void 0?t.luminanceSmoothing:a.luminanceMaterial.smoothing,e.value.luminanceMaterial.threshold=t.luminanceThreshold!==void 0?t.luminanceThreshold:a.luminanceMaterial.threshold,a.dispose()}),l.onUnmounted(()=>{var a,c,m;n.value&&((a=o==null?void 0:o.value)==null||a.removePass(n.value)),(c=e.value)==null||c.dispose(),(m=n.value)==null||m.dispose()}),(a,c)=>null}}),R=l.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const{camera:r}=S.useTresContext();let f;return f=l.watchEffect(()=>{!r.value||!(o!=null&&o.value)||(f==null||f(),!e.value&&(e.value=new d.GlitchEffect(t),n.value=new d.EffectPass(r.value,e.value),o.value.addPass(n.value)))}),l.watchEffect(()=>{if(!e.value)return;const a=new d.GlitchEffect,c=()=>t.mode!==void 0?t.active===!1?d.GlitchMode.DISABLED:t.mode:a.mode;e.value.mode=c(),e.value.ratio=t.ratio!==void 0?t.ratio:a.ratio,e.value.delay=t.delay!==void 0?t.delay:a.delay,e.value.columns=t.columns!==void 0?t.columns:a.columns,e.value.duration=t.duration!==void 0?t.duration:a.duration,e.value.strength=t.strength!==void 0?t.strength:a.strength,e.value.perturbationMap=t.perturbationMap!==void 0?t.perturbationMap:a.perturbationMap,e.value.chromaticAberrationOffset=t.chromaticAberrationOffset!==void 0?t.chromaticAberrationOffset:a.chromaticAberrationOffset}),l.onUnmounted(()=>{var a,c,m;n.value&&((a=o==null?void 0:o.value)==null||a.removePass(n.value)),(c=e.value)==null||c.dispose(),(m=n.value)==null||m.dispose()}),(a,c)=>null}}),O=l.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean},xRay:{type:Boolean},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(h,{expose:i}){const t=h,o=l.inject(E),n=l.shallowRef(null),e=l.shallowRef(null);i({pass:n,effect:e});const r=u=>u!==void 0?S.normalizeColor(u).getHex():void 0,f=l.computed(()=>{const{blur:u,xRay:p,kernelSize:g,pulseSpeed:s,resolutionX:C,resolutionY:w,patternScale:y,edgeStrength:B,multisampling:P,blendFunction:_,patternTexture:M,resolutionScale:k,hiddenEdgeColor:A,visibleEdgeColor:G}=t;return{blur:u,xRay:p,kernelSize:g,pulseSpeed:s,resolutionX:C,resolutionY:w,patternScale:y,edgeStrength:B,blendFunction:_,multisampling:P,patternTexture:M,resolutionScale:k,hiddenEdgeColor:r(A),visibleEdgeColor:r(G)}}),{camera:a,scene:c}=S.useTresContext();let m;return m=l.watchEffect(()=>{!a.value||!(o!=null&&o.value)||!c.value||(m==null||m(),!e.value&&(e.value=new d.OutlineEffect(c.value,a.value,f.value),n.value=new d.EffectPass(a.value,e.value),o.value.addPass(n.value)))}),l.watch([()=>t.outlinedObjects,e],()=>{var u;(u=e.value)==null||u.selection.set(t.outlinedObjects||[])},{immediate:!0}),l.watchEffect(()=>{if(!e.value)return;const u=new d.OutlineEffect,{blur:p,xRay:g,kernelSize:s,pulseSpeed:C,patternScale:w,edgeStrength:y,multisampling:B,hiddenEdgeColor:P,visibleEdgeColor:_}=f.value;e.value.blur=p!==void 0?p:u.blur,e.value.xRay=g!==void 0?g:u.xRay,e.value.pulseSpeed=C!==void 0?C:u.pulseSpeed,e.value.kernelSize=s!==void 0?s:u.kernelSize,e.value.edgeStrength=y!==void 0?y:u.edgeStrength,e.value.patternScale=w!==void 0?w:u.patternScale,e.value.multisampling=B!==void 0?B:u.multisampling,e.value.hiddenEdgeColor=P!==void 0?S.normalizeColor(P):u.hiddenEdgeColor,e.value.visibleEdgeColor=_!==void 0?S.normalizeColor(_):u.visibleEdgeColor,u.dispose()}),l.onUnmounted(()=>{var u,p,g,s;(u=e.value)==null||u.selection.clear(),n.value&&((p=o==null?void 0:o.value)==null||p.removePass(n.value)),(g=e.value)==null||g.dispose(),(s=n.value)==null||s.dispose()}),(u,p)=>null}});let b;function T(){var h;if(b!==void 0)return b;try{let i;const t=document.createElement("canvas");return b=!!(window.WebGL2RenderingContext&&(i=t.getContext("webgl2"))),i&&((h=i.getExtension("WEBGL_lose_context"))==null||h.loseContext()),b}catch{return b=!1}}const j=l.defineComponent({__name:"EffectComposer",props:{enabled:{type:Boolean,default:!0},children:{},depthBuffer:{type:Boolean,default:void 0},disableNormalPass:{type:Boolean,default:!1},stencilBuffer:{type:Boolean,default:void 0},resolutionScale:{},autoClear:{type:Boolean,default:!0},multisampling:{default:0},frameBufferType:{default:x.HalfFloatType}},setup(h){const i=h,{scene:t,camera:o,renderer:n,sizes:e}=S.useTresContext(),r=l.shallowRef(null);let f=null,a=null;l.provide(E,r);const c=()=>{r.value&&(a=new d.NormalPass(t.value,o.value),a.enabled=!1,r.value.addPass(a),i.resolutionScale!==void 0&&T()&&(f=new d.DepthDownsamplingPass({normalBuffer:a.texture,resolutionScale:i.resolutionScale}),f.enabled=!1,r.value.addPass(f)))};l.watchEffect(()=>{r.value&&e.width.value&&e.height.value&&r.value.setSize(e.width.value,e.height.value)});const m=l.computed(()=>{const s=new d.EffectComposer,C={depthBuffer:i.depthBuffer!==void 0?i.depthBuffer:s.inputBuffer.depthBuffer,stencilBuffer:i.stencilBuffer!==void 0?i.stencilBuffer:s.inputBuffer.stencilBuffer,multisampling:T()?0:i.multisampling!==void 0?i.multisampling:s.multisampling,frameBufferType:i.frameBufferType!==void 0?i.frameBufferType:x.HalfFloatType};return s.dispose(),C}),u=()=>{!n.value&&!t.value&&!o.value||(r.value=new d.EffectComposer(n.value,m.value),r.value.addPass(new d.RenderPass(t.value,o.value)),i.disableNormalPass||c())},p=l.watch([e.height,e.width],()=>{!e.height.value&&!e.width.value||(l.watchEffect(u),p==null||p())}),{onLoop:g}=S.useRenderLoop();return g(({delta:s})=>{if(i.enabled&&n.value&&r.value&&e.width.value&&e.height.value){const C=n.value.autoClear;n.value.autoClear=i.autoClear,i.stencilBuffer&&!i.autoClear&&n.value.clearStencil(),r.value.render(s),n.value.autoClear=C}}),l.onUnmounted(()=>{var s;(s=r.value)==null||s.dispose()}),(s,C)=>l.renderSlot(s.$slots,"default")}});v.Bloom=z,v.EffectComposer=j,v.Glitch=R,v.Outline=O,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json

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

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

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

package/dist/core/useCore.d.ts

@@ -1,11 +0,0 @@
-/**
- * Allows to use and extend the state of the core package.
- *
- * @export
- * @return {*}
- */
-export declare function useCore(): {
-    state: import("@tresjs/core").TresState;
-    setState: (key: string, value: any) => void;
-    extend: (objects: any) => void;
-};