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

package/dist/pmndrs.js

@@ -0,0 +1,352 @@
+/**
+ * name: @tresjs/post-processing
+ * version: v1.0.0
+ * (c) 2024
+ * description: Post-processing library for TresJS
+ * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
+ */
+import { defineComponent as f, shallowRef as E, provide as U, computed as z, watch as b, onUnmounted as A, renderSlot as X, inject as V, watchEffect as y, nextTick as H } from "vue";
+import { EffectComposer as G, RenderPass as I, NormalPass as q, DepthDownsamplingPass as K, EffectPass as J, BloomEffect as L, DepthOfFieldEffect as P, GlitchEffect as C, GlitchMode as Q, BlendFunction as D, NoiseEffect as R, OutlineEffect as W, PixelationEffect as M, VignetteTechnique as Z, VignetteEffect as k } from "postprocessing";
+import { m as x, a as h, o as B } from "./prop-BjrXLDuj.js";
+import { useTresContext as w, useLoop as _, normalizeColor as S } from "@tresjs/core";
+import { HalfFloatType as T } from "three";
+class O {
+  static isWebGL2Available() {
+    try {
+      const o = document.createElement("canvas");
+      return !!(window.WebGL2RenderingContext && o.getContext("webgl2"));
+    } catch {
+      return !1;
+    }
+  }
+  static isColorSpaceAvailable(o) {
+    try {
+      const e = document.createElement("canvas"), t = window.WebGL2RenderingContext && e.getContext("webgl2");
+      return t.drawingBufferColorSpace = o, t.drawingBufferColorSpace === o;
+    } catch {
+      return !1;
+    }
+  }
+  static getWebGL2ErrorMessage() {
+    return this.getErrorMessage(2);
+  }
+  static getErrorMessage(o) {
+    const e = {
+      1: "WebGL",
+      2: "WebGL 2"
+    }, t = {
+      1: window.WebGLRenderingContext,
+      2: window.WebGL2RenderingContext
+    };
+    let n = 'Your $0 does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">$1</a>';
+    const a = document.createElement("div");
+    return a.id = "webglmessage", a.style.fontFamily = "monospace", a.style.fontSize = "13px", a.style.fontWeight = "normal", a.style.textAlign = "center", a.style.background = "#fff", a.style.color = "#000", a.style.padding = "1.5em", a.style.width = "400px", a.style.margin = "5em auto 0", t[o] ? n = n.replace("$0", "graphics card") : n = n.replace("$0", "browser"), n = n.replace("$1", e[o]), a.innerHTML = n, a;
+  }
+  // @deprecated, r168
+  static isWebGLAvailable() {
+    console.warn("isWebGLAvailable() has been deprecated and will be removed in r178. Use isWebGL2Available() instead.");
+    try {
+      const o = document.createElement("canvas");
+      return !!(window.WebGLRenderingContext && (o.getContext("webgl") || o.getContext("experimental-webgl")));
+    } catch {
+      return !1;
+    }
+  }
+  static getWebGLErrorMessage() {
+    return console.warn("getWebGLErrorMessage() has been deprecated and will be removed in r178. Use getWebGL2ErrorMessage() instead."), this.getErrorMessage(1);
+  }
+}
+const $ = Symbol("effectComposer"), le = /* @__PURE__ */ f({
+  __name: "EffectComposer",
+  props: {
+    enabled: { type: Boolean, default: !0 },
+    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: T }
+  },
+  emits: ["render"],
+  setup(s, { expose: o, emit: e }) {
+    const t = s, n = e, { scene: a, camera: r, renderer: u, sizes: c, render: d } = w(), l = E(null);
+    let m = null, g = null;
+    U($, l), o({ composer: l });
+    const N = () => {
+      l.value && (g = new q(a.value, r.value), g.enabled = !1, l.value.addPass(g), t.resolutionScale !== void 0 && O.isWebGL2Available() && (m = new K({
+        normalBuffer: g.texture,
+        resolutionScale: t.resolutionScale
+      }), m.enabled = !1, l.value.addPass(m)));
+    }, Y = z(() => {
+      const i = new G(), v = {
+        depthBuffer: t.depthBuffer !== void 0 ? t.depthBuffer : i.inputBuffer.depthBuffer,
+        stencilBuffer: t.stencilBuffer !== void 0 ? t.stencilBuffer : i.inputBuffer.stencilBuffer,
+        multisampling: O.isWebGL2Available() ? t.multisampling !== void 0 ? t.multisampling : i.multisampling : 0,
+        frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : T
+      };
+      return i.dispose(), v;
+    }), F = () => {
+      var i;
+      !u.value && !a.value && !r.value || ((i = l.value) == null || i.dispose(), l.value = new G(u.value, Y.value), l.value.addPass(new I(a.value, r.value)), t.disableNormalPass || N());
+    };
+    b([u, a, r, () => t.disableNormalPass], () => {
+      !c.width.value || !c.height.value || F();
+    }), b(() => [c.width.value, c.height.value], ([i, v]) => {
+      !i && !v || (l.value ? l.value.setSize(i, v) : F());
+    }, {
+      immediate: !0
+    });
+    const { render: j } = _();
+    return j(() => {
+      if (t.enabled && u.value && l.value && c.width.value && c.height.value && d.frames.value > 0) {
+        const i = u.value.autoClear;
+        u.value.autoClear = t.autoClear, t.stencilBuffer && !t.autoClear && u.value.clearStencil(), l.value.render(), n("render", l.value), u.value.autoClear = i;
+      }
+      d.frames.value = d.mode.value === "always" ? 1 : Math.max(0, d.frames.value - 1);
+    }), A(() => {
+      var i;
+      (i = l.value) == null || i.dispose();
+    }), (i, v) => X(i.$slots, "default");
+  }
+}), p = (s, o) => {
+  const e = V($), t = E(null), n = E(null), { scene: a, camera: r, invalidate: u } = w();
+  o && b(o, () => u()), y(() => {
+    !r.value || !(n != null && n.value) || (n.value.mainCamera = r.value);
+  });
+  const c = y(() => {
+    !r.value || !(e != null && e.value) || !a.value || (H(() => c()), !n.value && (n.value = s(), t.value = new J(r.value, n.value), e.value.addPass(t.value)));
+  });
+  return A(() => {
+    var d, l, m;
+    t.value && ((d = e == null ? void 0 : e.value) == null || d.removePass(t.value)), (l = n.value) == null || l.dispose(), (m = t.value) == null || m.dispose();
+  }), {
+    pass: t,
+    effect: n
+  };
+}, se = /* @__PURE__ */ f({
+  __name: "Bloom",
+  props: {
+    blendFunction: {},
+    intensity: {},
+    kernelSize: {},
+    luminanceThreshold: {},
+    luminanceSmoothing: {},
+    mipmapBlur: { type: Boolean, default: void 0 }
+  },
+  setup(s, { expose: o }) {
+    const e = s, { pass: t, effect: n } = p(() => new L(e), e);
+    return o({ pass: t, effect: n }), x(
+      [
+        // 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"]
+      ],
+      n,
+      () => new L()
+    ), () => {
+    };
+  }
+}), re = /* @__PURE__ */ f({
+  __name: "DepthOfField",
+  props: {
+    blendFunction: {},
+    worldFocusDistance: {},
+    worldFocusRange: {},
+    focusDistance: {},
+    focusRange: {},
+    bokehScale: {},
+    resolutionScale: {},
+    resolutionX: {},
+    resolutionY: {}
+  },
+  setup(s, { expose: o }) {
+    const e = s, { camera: t } = w(), { pass: n, effect: a } = p(() => new P(t.value, e), e);
+    return o({ pass: n, effect: a }), x(
+      [
+        // blendFunction is not updated, because it has no setter in BloomEffect
+        [() => e.worldFocusDistance, "circleOfConfusionMaterial.worldFocusDistance"],
+        [() => e.focusDistance, "circleOfConfusionMaterial.focusDistance"],
+        [() => e.worldFocusRange, "circleOfConfusionMaterial.worldFocusRange"],
+        [() => e.focusRange, "circleOfConfusionMaterial.focusRange"],
+        [() => e.bokehScale, "bokehScale"],
+        [() => e.resolutionScale, "blurPass.resolution.scale"],
+        [() => e.resolutionX, "resolution.width"],
+        [() => e.resolutionY, "resolution.height"]
+      ],
+      a,
+      () => new P()
+    ), () => {
+    };
+  }
+}), ie = /* @__PURE__ */ f({
+  __name: "Glitch",
+  props: {
+    blendFunction: {},
+    delay: {},
+    duration: {},
+    strength: {},
+    mode: {},
+    active: { type: Boolean },
+    ratio: {},
+    columns: {},
+    chromaticAberrationOffset: {},
+    perturbationMap: {},
+    dtSize: {}
+  },
+  setup(s, { expose: o }) {
+    const e = s, { pass: t, effect: n } = p(() => new C(e), e);
+    o({ pass: t, effect: n });
+    const { onBeforeRender: a } = _();
+    return a(({ invalidate: r }) => r()), y(() => {
+      const r = () => {
+        if (e.mode !== void 0)
+          return e.active === !1 ? Q.DISABLED : e.mode;
+        const u = new C(), c = u.mode;
+        return u.dispose(), c;
+      };
+      n.value && (n.value.mode = r());
+    }), h(
+      B(e, ["active", "mode", "blendFunction"]),
+      n,
+      () => new C()
+    ), () => {
+    };
+  }
+}), ue = /* @__PURE__ */ f({
+  __name: "Noise",
+  props: {
+    premultiply: { type: Boolean, default: !1 },
+    blendFunction: { default: D.SCREEN }
+  },
+  setup(s, { expose: o }) {
+    const e = s, { pass: t, effect: n } = p(() => new R(e), e);
+    o({ pass: t, effect: n });
+    const { onBeforeRender: a } = _();
+    return a(({ invalidate: r }) => r()), h(
+      B(e, ["blendFunction"]),
+      n,
+      () => new R()
+    ), () => {
+    };
+  }
+}), ce = /* @__PURE__ */ f({
+  __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(s, { expose: o }) {
+    const e = s, t = (l) => l !== void 0 ? S(l).getHex() : void 0, { camera: n, scene: a } = w(), r = {
+      blur: e.blur,
+      xRay: e.xRay,
+      kernelSize: e.kernelSize,
+      pulseSpeed: e.pulseSpeed,
+      resolutionX: e.resolutionX,
+      resolutionY: e.resolutionY,
+      patternScale: e.patternScale,
+      edgeStrength: e.edgeStrength,
+      blendFunction: e.blendFunction,
+      multisampling: e.multisampling,
+      patternTexture: e.patternTexture,
+      resolutionScale: e.resolutionScale,
+      hiddenEdgeColor: t(e.hiddenEdgeColor),
+      visibleEdgeColor: t(e.visibleEdgeColor)
+    }, { pass: u, effect: c } = p(() => new W(a.value, n.value, r), e);
+    o({ pass: u, effect: c }), b(
+      [() => e.outlinedObjects, c],
+      // watchEffect is intentionally not used here as it would result in an endless loop
+      () => {
+        var l;
+        (l = c.value) == null || l.selection.set(e.outlinedObjects || []);
+      },
+      {
+        immediate: !0
+      }
+    );
+    const d = z(() => ({
+      hiddenEdgeColor: e.hiddenEdgeColor ? S(e.hiddenEdgeColor) : void 0,
+      visibleEdgeColor: e.visibleEdgeColor ? S(e.visibleEdgeColor) : void 0
+    }));
+    return x(
+      [
+        /* 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"]
+      ],
+      c,
+      () => new W()
+    ), () => {
+    };
+  }
+}), de = /* @__PURE__ */ f({
+  __name: "Pixelation",
+  props: {
+    granularity: {}
+  },
+  setup(s, { expose: o }) {
+    const e = s, { pass: t, effect: n } = p(() => new M(e.granularity), e);
+    return o({ pass: t, effect: n }), h(
+      e,
+      n,
+      () => new M()
+    ), () => {
+    };
+  }
+}), fe = /* @__PURE__ */ f({
+  __name: "Vignette",
+  props: {
+    technique: { default: Z.DEFAULT },
+    blendFunction: { default: D.NORMAL },
+    offset: { default: 0.5 },
+    darkness: { default: 0.5 }
+  },
+  setup(s, { expose: o }) {
+    const e = s, { pass: t, effect: n } = p(() => new k(e), e);
+    return o({ pass: t, effect: n }), h(
+      B(e, ["blendFunction"]),
+      n,
+      () => new k()
+    ), () => {
+    };
+  }
+});
+export {
+  se as Bloom,
+  re as DepthOfField,
+  le as EffectComposer,
+  ie as Glitch,
+  ue as Noise,
+  ce as Outline,
+  de as Pixelation,
+  fe as Vignette,
+  p as useEffect
+};

package/dist/prop-BjrXLDuj.js

@@ -0,0 +1,43 @@
+/**
+ * name: @tresjs/post-processing
+ * version: v1.0.0
+ * (c) 2024
+ * description: Post-processing library for TresJS
+ * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
+ */
+import { watch as f } from "vue";
+const m = /([^[.\]])+/g, d = (r, s) => {
+  if (!s)
+    return;
+  const e = Array.isArray(s) ? s : s.match(m);
+  return e == null ? void 0 : e.reduce((o, n) => o && o[n], r);
+}, a = (r, s, e) => {
+  const o = Array.isArray(s) ? s : s.match(m);
+  o && o.reduce((n, t, c) => (n[t] === void 0 && (n[t] = {}), c === o.length - 1 && (n[t] = e), n[t]), r);
+}, v = (r, s) => {
+  const e = { ...r };
+  return s.forEach((o) => delete e[o]), e;
+}, u = (r, s, e, o, n = {}) => f(r, (t) => {
+  var c;
+  if (s.value)
+    if (t === void 0) {
+      const i = o();
+      a(s.value, e, d(i, e)), (c = i.dispose) == null || c.call(i);
+    } else
+      a(s.value, e, r());
+}, n), A = (r, s, e) => r.map(([o, n]) => u(
+  o,
+  s,
+  n,
+  e
+)), g = (r, s, e) => Object.keys(r).map((o) => u(
+  () => r[o],
+  s,
+  o,
+  e
+));
+export {
+  g as a,
+  A as m,
+  v as o
+};

package/dist/three.d.ts

@@ -0,0 +1,2 @@
+export * from './core/three/index'
+export {}