@tresjs/post-processing 0.3.0 → 0.5.0

package/dist/tres-postprocessing.js

@@ -1,307 +1,124 @@
 /**
  * name: @tresjs/post-processing
- * version: v0.3.0
+ * version: v0.5.0
  * (c) 2023
  * description: Post-processing library for TresJS
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
  */
-import { inject as C, getCurrentInstance as k, onMounted as I, nextTick as q, getCurrentScope as J, onScopeDispose as Q, unref as D, ref as b, watch as p, computed as y, defineComponent as O, shallowRef as T, provide as Z, watchEffect as P, renderSlot as _, toRaw as S, onUnmounted as F } from "vue";
-import { HalfFloatType as ee } from "three";
-import { useTres as te, useRenderLoop as ne, normalizeColor as R } from "@tresjs/core";
-import { EffectComposer as ae, RenderPass as le, NormalPass as ue, DepthDownsamplingPass as oe, BlendFunction as W, BloomEffect as ie, EffectPass as L, GlitchMode as j, GlitchEffect as re, OutlineEffect as G } from "postprocessing";
-function A() {
-  const { state: e, setState: a } = C("useTres", te()), n = C("extend") || (() => {
+import { inject as $, shallowRef as w, watchEffect as m, onUnmounted as T, watch as _, defineComponent as f, computed as k, provide as j, renderSlot as N } from "vue";
+import { EffectPass as X, BloomEffect as x, GlitchEffect as b, GlitchMode as Y, OutlineEffect as y, PixelationEffect as P, DepthOfFieldEffect as F, EffectComposer as R, RenderPass as H, NormalPass as I, DepthDownsamplingPass as U } from "postprocessing";
+import { useTresContext as S, normalizeColor as C, useRenderLoop as K } from "@tresjs/core";
+import { HalfFloatType as O } from "three";
+const A = Symbol(), v = (a) => {
+  const t = $(A), e = w(null), n = w(null), { scene: o, camera: l } = S();
+  m(() => {
+    !l.value || !(n != null && n.value) || (n.value.mainCamera = l.value);
   });
-  return {
-    state: e,
-    setState: a,
-    extend: n
+  let s = () => {
   };
-}
-let w;
-function se() {
-  var e;
-  if (w !== void 0)
-    return w;
-  try {
-    let a;
-    const n = document.createElement("canvas");
-    return w = !!(window.WebGL2RenderingContext && (a = n.getContext("webgl2"))), a && ((e = a.getExtension("WEBGL_lose_context")) == null || e.loseContext()), w;
-  } catch {
-    return w = !1;
-  }
-}
-function N(e) {
-  return J() ? (Q(e), !0) : !1;
-}
-function H(e) {
-  return typeof e == "function" ? e() : D(e);
-}
-const ce = typeof window < "u", de = () => {
-};
-function fe(e, a = !0) {
-  k() ? I(e) : a ? e() : q(e);
-}
-function E(e) {
-  var a;
-  const n = H(e);
-  return (a = n == null ? void 0 : n.$el) != null ? a : n;
-}
-const X = ce ? window : void 0;
-function M(...e) {
-  let a, n, t, l;
-  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, t, l] = e, a = X) : [a, n, t, l] = e, !a)
-    return de;
-  Array.isArray(n) || (n = [n]), Array.isArray(t) || (t = [t]);
-  const r = [], c = () => {
-    r.forEach((i) => i()), r.length = 0;
-  }, f = (i, o, s, d) => (i.addEventListener(o, s, d), () => i.removeEventListener(o, s, d)), v = p(
-    () => [E(a), H(l)],
-    ([i, o]) => {
-      c(), i && r.push(
-        ...n.flatMap((s) => t.map((d) => f(i, s, d, o)))
-      );
-    },
-    { immediate: !0, flush: "post" }
-  ), u = () => {
-    v(), c();
-  };
-  return N(u), u;
-}
-function ve() {
-  const e = b(!1);
-  return k() && I(() => {
-    e.value = !0;
-  }), e;
-}
-function me(e) {
-  const a = ve();
-  return y(() => (a.value, !!e()));
-}
-var $ = Object.getOwnPropertySymbols, he = Object.prototype.hasOwnProperty, be = Object.prototype.propertyIsEnumerable, ge = (e, a) => {
-  var n = {};
-  for (var t in e)
-    he.call(e, t) && a.indexOf(t) < 0 && (n[t] = e[t]);
-  if (e != null && $)
-    for (var t of $(e))
-      a.indexOf(t) < 0 && be.call(e, t) && (n[t] = e[t]);
-  return n;
-};
-function Se(e, a, n = {}) {
-  const t = n, { window: l = X } = t, r = ge(t, ["window"]);
-  let c;
-  const f = me(() => l && "ResizeObserver" in l), v = () => {
-    c && (c.disconnect(), c = void 0);
-  }, u = y(
-    () => Array.isArray(e) ? e.map((s) => E(s)) : [E(e)]
-  ), i = p(
-    u,
-    (s) => {
-      if (v(), f.value && l) {
-        c = new ResizeObserver(a);
-        for (const d of s)
-          d && c.observe(d, r);
-      }
-    },
-    { immediate: !0, flush: "post", deep: !0 }
-  ), o = () => {
-    v(), i();
-  };
-  return N(o), {
-    isSupported: f,
-    stop: o
-  };
-}
-function pe(e, a = {}) {
-  const {
-    reset: n = !0,
-    windowResize: t = !0,
-    windowScroll: l = !0,
-    immediate: r = !0
-  } = a, c = b(0), f = b(0), v = b(0), u = b(0), i = b(0), o = b(0), s = b(0), d = b(0);
-  function m() {
-    const g = E(e);
-    if (!g) {
-      n && (c.value = 0, f.value = 0, v.value = 0, u.value = 0, i.value = 0, o.value = 0, s.value = 0, d.value = 0);
-      return;
-    }
-    const h = g.getBoundingClientRect();
-    c.value = h.height, f.value = h.bottom, v.value = h.left, u.value = h.right, i.value = h.top, o.value = h.width, s.value = h.x, d.value = h.y;
-  }
-  return Se(e, m), p(() => E(e), (g) => !g && m()), l && M("scroll", m, { capture: !0, passive: !0 }), t && M("resize", m, { passive: !0 }), fe(() => {
-    r && m();
+  return s = m(() => {
+    !l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new X(l.value, n.value), t.value.addPass(e.value)));
+  }), T(() => {
+    var r, i, d;
+    e.value && ((r = t == null ? void 0 : t.value) == null || r.removePass(e.value)), (i = n.value) == null || i.dispose(), (d = e.value) == null || d.dispose();
   }), {
-    height: c,
-    bottom: f,
-    left: v,
-    right: u,
-    top: i,
-    width: o,
-    x: s,
-    y: d,
-    update: m
+    pass: e,
+    effect: n
   };
-}
-const z = Symbol(), Ee = /* @__PURE__ */ O({
-  __name: "EffectComposer",
-  props: {
-    enabled: { type: Boolean, default: !0 },
-    children: {},
-    depthBuffer: { type: Boolean },
-    disableNormalPass: { type: Boolean, default: !1 },
-    stencilBuffer: { type: Boolean },
-    resolutionScale: {},
-    autoClear: { type: Boolean, default: !0 },
-    multisampling: { default: 8 },
-    frameBufferType: { default: () => ee },
-    scene: {},
-    camera: {}
+}, M = /([^[.\]])+/g, q = (a, t) => {
+  if (!t)
+    return;
+  const e = Array.isArray(t) ? t : t.match(M);
+  return e == null ? void 0 : e.reduce((n, o) => n && n[o], a);
+}, z = (a, t, e) => {
+  const n = Array.isArray(t) ? t : t.match(M);
+  n && n.reduce((o, l, s) => (o[l] === void 0 && (o[l] = {}), s === n.length - 1 && (o[l] = e), o[l]), a);
+}, J = (a, t) => {
+  const e = { ...a };
+  return t.forEach((n) => delete e[n]), e;
+}, G = (a, t, e, n, o = {}) => _(
+  a,
+  (l) => {
+    var s;
+    if (t.value)
+      if (l === void 0) {
+        const r = n();
+        z(t.value, e, q(r, e)), (s = r.dispose) == null || s.call(r);
+      } else
+        z(t.value, e, a());
   },
-  setup(e) {
-    const { state: a } = A(), n = T(null), t = y(() => e.scene || a.scene), l = y(() => e.camera || a.camera);
-    let r = null, c = null;
-    const f = se();
-    Z(z, n);
-    function v() {
-      n.value && (c = new ue(t.value, l.value), c.enabled = !1, n.value.addPass(c), e.resolutionScale !== void 0 && f && (r = new oe({
-        normalBuffer: c.texture,
-        resolutionScale: e.resolutionScale
-      }), r.enabled = !1, n.value.addPass(r)));
-    }
-    const u = y(() => {
-      var d;
-      return (d = a.canvas) == null ? void 0 : d.value;
-    }), { width: i, height: o } = pe(u);
-    P(() => {
-      n.value && i.value && o.value && n.value.setSize(i.value, o.value);
-    }), P(() => {
-      a.renderer && t.value && l.value && (n.value = new ae(a.renderer, {
-        depthBuffer: e.depthBuffer,
-        stencilBuffer: e.stencilBuffer,
-        multisampling: e.multisampling > 0 && f ? e.multisampling : 0,
-        frameBufferType: e.frameBufferType
-      }), n.value.addPass(new le(t.value, l.value)), e.disableNormalPass || v());
-    });
-    const { onLoop: s } = ne();
-    return s(({ delta: d }) => {
-      if (e.enabled && a.renderer && n.value && i.value && o.value) {
-        const m = a.renderer.autoClear;
-        a.renderer.autoClear = e.autoClear, e.stencilBuffer && !e.autoClear && a.renderer.clearStencil(), n.value.render(d), a.renderer.autoClear = m;
-      }
-    }), (d, m) => _(d.$slots, "default");
-  }
-}), Be = /* @__PURE__ */ O({
+  o
+), E = (a, t, e) => a.map(([n, o]) => G(
+  n,
+  t,
+  o,
+  e
+)), L = (a, t, e) => Object.keys(a).map((n) => G(
+  () => a[n],
+  t,
+  n,
+  e
+)), te = /* @__PURE__ */ f({
   __name: "Bloom",
   props: {
-    blendFunction: { 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, default: void 0 }
   },
-  setup(e, { expose: a }) {
-    const { state: n } = A(), t = C(z), l = b(null), r = b(null);
-    a({ pass: l, effect: r });
-    function c() {
-      r.value = new ie({
-        blendFunction: e.blendFunction,
-        mipmapBlur: e.mipmapBlur,
-        intensity: e.intensity,
-        luminanceThreshold: e.luminanceThreshold,
-        luminanceSmoothing: e.luminanceSmoothing
-      }), l.value = new L(D(n.camera), S(r.value));
-    }
-    function f() {
-      var i, o, s;
-      (i = r.value) == null || i.dispose(), (o = l.value) == null || o.dispose(), (s = t == null ? void 0 : t.value) == null || s.removePass(S(l.value));
-    }
-    const v = p(
-      () => [n.camera, t == null ? void 0 : t.value],
-      () => {
-        var i;
-        n.camera && t && t.value && (c(), (i = t == null ? void 0 : t.value) == null || i.addPass(S(l.value)));
-      }
-    ), u = p(
-      () => [e.blendFunction, e.mipmapBlur, e.intensity, e.luminanceThreshold, e.luminanceSmoothing],
-      () => {
-        var i;
-        l.value && (f(), c(), (i = t == null ? void 0 : t.value) == null || i.addPass(S(l.value)));
-      }
-    );
-    return F(() => {
-      f(), v(), u();
-    }), (i, o) => null;
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = v(() => new x(e));
+    return t({ pass: n, effect: o }), E(
+      [
+        // blendFunction is not updated, because it has no setter in BloomEffect
+        [() => e.intensity, "intensity"],
+        [() => e.kernelSize, "kernelSize"],
+        [() => e.luminanceSmoothing, "luminanceMaterial.smoothing"],
+        [() => e.luminanceThreshold, "luminanceMaterial.threshold"]
+      ],
+      o,
+      () => new x()
+    ), (l, s) => null;
   }
-}), xe = /* @__PURE__ */ O({
+}), ne = /* @__PURE__ */ f({
   __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: a }) {
-    const { state: n } = A(), t = C(z), l = b(null), r = b(null);
-    a({ pass: l });
-    function c() {
-      r.value = new re({
-        blendFunction: e.blendFunction,
-        delay: e.delay,
-        duration: e.duration,
-        strength: e.strength,
-        ratio: e.ratio,
-        columns: e.columns,
-        chromaticAberrationOffset: e.chromaticAberrationOffset,
-        dtSize: e.dtSize
-      }), l.value = new L(D(n.camera), S(r.value));
-    }
-    function f() {
-      var o, s, d;
-      (o = r.value) == null || o.dispose(), (s = l.value) == null || s.dispose(), (d = t == null ? void 0 : t.value) == null || d.removePass(S(l.value));
-    }
-    const v = p(
-      () => [n.camera, t == null ? void 0 : t.value],
-      () => {
-        var o;
-        n.camera && t && t.value && (c(), (o = t == null ? void 0 : t.value) == null || o.addPass(S(l.value)));
-      }
-    ), u = p(
-      () => [e.delay, e.duration, e.strength, e.ratio, e.columns, e.chromaticAberrationOffset, e.peturbationMap, e.dtSize],
-      () => {
-        var o, s;
-        l.value && ((o = t == null ? void 0 : t.value) == null || o.removePass(S(l.value)), c(), (s = t == null ? void 0 : t.value) == null || s.addPass(S(l.value)));
-      }
-    );
-    P(() => {
-      l.value && (l.value.mode = e.active ? e.mode || j.SPORADIC : j.DISABLED);
-    });
-    const i = p(
-      () => e.active,
-      (o) => {
-        l.value && (l.value.enabled = o);
-      }
-    );
-    return F(() => {
-      f(), v(), u(), i();
-    }), (o, s) => null;
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = v(() => new b(e));
+    return t({ pass: n, effect: o }), m(() => {
+      const l = () => {
+        if (e.mode !== void 0)
+          return e.active === !1 ? Y.DISABLED : e.mode;
+        const s = new b(), r = s.mode;
+        return s.dispose(), r;
+      };
+      o.value && (o.value.mode = l());
+    }), L(
+      J(e, ["active", "mode", "blendFunction"]),
+      o,
+      () => new b()
+    ), (l, s) => null;
   }
-}), Oe = /* @__PURE__ */ O({
+}), oe = /* @__PURE__ */ f({
   __name: "Outline",
   props: {
     outlinedObjects: {},
-    blur: { type: Boolean },
-    xRay: { type: Boolean },
+    blur: { type: Boolean, default: void 0 },
+    xRay: { type: Boolean, default: void 0 },
     kernelSize: {},
     pulseSpeed: {},
     resolutionX: {},
@@ -315,78 +132,180 @@ const z = Symbol(), Ee = /* @__PURE__ */ O({
     hiddenEdgeColor: {},
     visibleEdgeColor: {}
   },
-  setup(e) {
-    const a = e, { state: n } = A(), t = C(z), l = T(null), r = T(null), c = (u) => u !== void 0 ? R(u).getHex() : void 0, f = y(() => {
-      const {
-        blur: u,
-        xRay: i,
-        kernelSize: o,
-        pulseSpeed: s,
-        resolutionX: d,
-        resolutionY: m,
-        patternScale: g,
-        edgeStrength: h,
-        multisampling: B,
-        blendFunction: x,
-        patternTexture: Y,
-        resolutionScale: K,
-        hiddenEdgeColor: U,
-        visibleEdgeColor: V
-      } = a;
-      return {
-        blur: u,
-        xRay: i,
-        kernelSize: o,
-        pulseSpeed: s,
-        resolutionX: d,
-        resolutionY: m,
-        patternScale: g,
-        edgeStrength: h,
-        blendFunction: x,
-        multisampling: B,
-        patternTexture: Y,
-        resolutionScale: K,
-        hiddenEdgeColor: c(U),
-        visibleEdgeColor: c(V)
-      };
-    }), v = P(() => {
-      var u;
-      n.camera && t && t.value && n.scene && (r.value = new G(n.scene, n.camera, f.value), l.value = new L(n.camera, r.value), (u = t.value) == null || u.addPass(l.value), v());
-    });
-    return p(
-      [() => a.outlinedObjects, r],
-      // whatchEffect is intentionally not used here as it would result in an endless loop
+  setup(a, { expose: t }) {
+    const e = a, n = (c) => c !== void 0 ? C(c).getHex() : void 0, { camera: o, scene: l } = S(), s = {
+      blur: e.blur,
+      xRay: e.xRay,
+      kernelSize: e.kernelSize,
+      pulseSpeed: e.pulseSpeed,
+      resolutionX: e.resolutionX,
+      resolutionY: e.resolutionY,
+      patternScale: e.patternScale,
+      edgeStrength: e.edgeStrength,
+      blendFunction: e.blendFunction,
+      multisampling: e.multisampling,
+      patternTexture: e.patternTexture,
+      resolutionScale: e.resolutionScale,
+      hiddenEdgeColor: n(e.hiddenEdgeColor),
+      visibleEdgeColor: n(e.visibleEdgeColor)
+    }, { pass: r, effect: i } = v(() => new y(l.value, o.value, s));
+    t({ pass: r, effect: i }), _(
+      [() => e.outlinedObjects, i],
+      // watchEffect is intentionally not used here as it would result in an endless loop
       () => {
-        var u;
-        (u = r.value) == null || u.selection.set(a.outlinedObjects || []);
+        var c;
+        (c = i.value) == null || c.selection.set(e.outlinedObjects || []);
       },
       {
         immediate: !0
       }
-    ), P(() => {
-      if (!r.value)
-        return;
-      const u = new G(), {
-        blur: i,
-        xRay: o,
-        kernelSize: s,
-        pulseSpeed: d,
-        patternScale: m,
-        edgeStrength: g,
-        multisampling: h,
-        hiddenEdgeColor: B,
-        visibleEdgeColor: x
-      } = f.value;
-      r.value.blur = i !== void 0 ? i : u.blur, r.value.xRay = o !== void 0 ? o : u.xRay, r.value.pulseSpeed = d !== void 0 ? d : u.pulseSpeed, r.value.kernelSize = s !== void 0 ? s : u.kernelSize, r.value.edgeStrength = g !== void 0 ? g : u.edgeStrength, r.value.patternScale = m !== void 0 ? m : u.patternScale, r.value.multisampling = h !== void 0 ? h : u.multisampling, r.value.hiddenEdgeColor = B !== void 0 ? R(B) : u.hiddenEdgeColor, r.value.visibleEdgeColor = x !== void 0 ? R(x) : u.visibleEdgeColor, u.dispose();
-    }), F(() => {
-      var u, i, o, s;
-      (u = r.value) == null || u.selection.clear(), l.value && ((i = t == null ? void 0 : t.value) == null || i.removePass(l.value)), (o = r.value) == null || o.dispose(), (s = l.value) == null || s.dispose();
-    }), (u, i) => null;
+    );
+    const d = k(() => ({
+      hiddenEdgeColor: e.hiddenEdgeColor ? C(e.hiddenEdgeColor) : void 0,
+      visibleEdgeColor: e.visibleEdgeColor ? C(e.visibleEdgeColor) : void 0
+    }));
+    return E(
+      [
+        /* some properties are not updated because of different reasons:
+            resolutionX - has no setter in OutlineEffect
+            resolutionY - has no setter in OutlineEffect
+            blendFunction - has no setter in OutlineEffect
+            patternTexture - different type in constructor and in setter
+            resolutionScale - has no setter in OutlineEffect
+          */
+        [() => e.blur, "blur"],
+        [() => e.xRay, "xRay"],
+        [() => e.pulseSpeed, "pulseSpeed"],
+        [() => e.kernelSize, "kernelSize"],
+        [() => e.edgeStrength, "edgeStrength"],
+        [() => e.patternScale, "patternScale"],
+        [() => e.multisampling, "multisampling"],
+        [() => d.value.hiddenEdgeColor, "hiddenEdgeColor"],
+        [() => d.value.visibleEdgeColor, "visibleEdgeColor"]
+      ],
+      i,
+      () => new y()
+    ), (c, B) => null;
+  }
+}), le = /* @__PURE__ */ f({
+  __name: "Pixelation",
+  props: {
+    granularity: {}
+  },
+  setup(a, { expose: t }) {
+    const e = a, { pass: n, effect: o } = v(() => new P(e.granularity));
+    return t({ pass: n, effect: o }), L(
+      e,
+      o,
+      () => new P()
+    ), (l, s) => null;
+  }
+}), ae = /* @__PURE__ */ f({
+  __name: "DepthOfField",
+  props: {
+    blendFunction: {},
+    worldFocusDistance: {},
+    worldFocusRange: {},
+    focusDistance: {},
+    focusRange: {},
+    bokehScale: {},
+    resolutionScale: {},
+    resolutionX: {},
+    resolutionY: {}
+  },
+  setup(a, { expose: t }) {
+    const e = a, { camera: n } = S(), { pass: o, effect: l } = v(() => new F(n.value, e));
+    return t({ pass: o, effect: l }), E(
+      [
+        // blendFunction is not updated, because it has no setter in BloomEffect
+        [() => e.worldFocusDistance, "circleOfConfusionMaterial.worldFocusDistance"],
+        [() => e.focusDistance, "circleOfConfusionMaterial.focusDistance"],
+        [() => e.worldFocusRange, "circleOfConfusionMaterial.worldFocusRange"],
+        [() => e.focusRange, "circleOfConfusionMaterial.focusRange"],
+        [() => e.bokehScale, "bokehScale"],
+        [() => e.resolutionScale, "blurPass.resolution.scale"],
+        [() => e.resolutionX, "resolution.width"],
+        [() => e.resolutionY, "resolution.height"]
+      ],
+      l,
+      () => new F()
+    ), (s, r) => null;
+  }
+});
+let p;
+function D() {
+  var a;
+  if (p !== void 0)
+    return p;
+  try {
+    let t;
+    const e = document.createElement("canvas");
+    return p = !!(window.WebGL2RenderingContext && (t = e.getContext("webgl2"))), t && ((a = t.getExtension("WEBGL_lose_context")) == null || a.loseContext()), p;
+  } catch {
+    return p = !1;
+  }
+}
+const se = /* @__PURE__ */ f({
+  __name: "EffectComposer",
+  props: {
+    enabled: { type: Boolean, default: !0 },
+    children: {},
+    depthBuffer: { type: Boolean, default: void 0 },
+    disableNormalPass: { type: Boolean, default: !1 },
+    stencilBuffer: { type: Boolean, default: void 0 },
+    resolutionScale: {},
+    autoClear: { type: Boolean, default: !0 },
+    multisampling: { default: 0 },
+    frameBufferType: { default: O }
+  },
+  setup(a) {
+    const t = a, { scene: e, camera: n, renderer: o, sizes: l } = S(), s = w(null);
+    let r = null, i = null;
+    j(A, s);
+    const d = () => {
+      s.value && (i = new I(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && D() && (r = new U({
+        normalBuffer: i.texture,
+        resolutionScale: t.resolutionScale
+      }), r.enabled = !1, s.value.addPass(r)));
+    };
+    m(() => {
+      s.value && l.width.value && l.height.value && s.value.setSize(l.width.value, l.height.value);
+    });
+    const c = k(() => {
+      const u = new R(), g = {
+        depthBuffer: t.depthBuffer !== void 0 ? t.depthBuffer : u.inputBuffer.depthBuffer,
+        stencilBuffer: t.stencilBuffer !== void 0 ? t.stencilBuffer : u.inputBuffer.stencilBuffer,
+        multisampling: D() ? 0 : t.multisampling !== void 0 ? t.multisampling : u.multisampling,
+        frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : O
+      };
+      return u.dispose(), g;
+    }), B = () => {
+      !o.value && !e.value && !n.value || (s.value = new R(o.value, c.value), s.value.addPass(new H(e.value, n.value)), t.disableNormalPass || d());
+    };
+    let h = () => {
+    };
+    h = _([l.height, l.width], () => {
+      !l.height.value && !l.width.value || (m(B), h == null || h());
+    }, {
+      immediate: !0
+    });
+    const { onLoop: W } = K();
+    return W(({ delta: u }) => {
+      if (t.enabled && o.value && s.value && l.width.value && l.height.value) {
+        const g = o.value.autoClear;
+        o.value.autoClear = t.autoClear, t.stencilBuffer && !t.autoClear && o.value.clearStencil(), s.value.render(u), o.value.autoClear = g;
+      }
+    }), T(() => {
+      var u;
+      (u = s.value) == null || u.dispose();
+    }), (u, g) => N(u.$slots, "default");
   }
 });
 export {
-  Be as Bloom,
-  Ee as EffectComposer,
-  xe as Glitch,
-  Oe as Outline
+  te as Bloom,
+  ae as DepthOfField,
+  se as EffectComposer,
+  ne as Glitch,
+  oe as Outline,
+  le as Pixelation
 };