@tresjs/post-processing 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022-present, (alvarosabu) Alvaro Saburido and Tres contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+![repository-banner.png](/public/repo-banner.png)
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/core?color=%2382DBCA" alt="npm package"></a>
+
+<a href="https://discord.gg/tfY9aSNT"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
+
+</p>
+<br/>
+
+# Post-Processing
+
+> Collection of useful helpers and fully functional, ready-made abstractions for Tres
+
+- 💡 Build a 3D scene working only with Vue components.
+- ⚡️ Powered by Vite
+- 🥰 It brings all the updated features of ThreeJS right awayregardless the version
+- 🦾 Fully Typed
+
+Cientos (Spanish word for "hundreds", pronounced /θjentos/ ) is is a collection of useful ready-to-go helpers and components that are not part of the core package. The name uses the word uses in spanish to multiply by 100, to refer to the potential reach of the package to hold a amazing abstractions.
+
+The postprocessing package uses three-stdlib module under the hood instead of the three/examples/jsm module. This means that you don't need to extend the catalogue of components using the extend method from the `core`, postprocessing does it for you.
+
+It just works. 💯
+
+## Installation
+
+```bash
+pnpm i @tresjs/post-processing
+```
+
+## Docs
+
+Checkout the [docs](https://cientos.tresjs.org/)
+
+## Demos
+
+- [Stackblitz Collection](https://stackblitz.com/@alvarosabu/collections/tresjs)
+
+## Contributing
+
+We are open to contributions, please read the [contributing guide](/CONTRIBUTING.md) to get started.
+
+### Build
+
+To build the package run:
+
+```bash
+pnpm run build
+```
+
+### Playground
+
+To run the playground run, its a great way to test the components and helpers locally:
+
+First install dependencies
+
+```
+pnpm i
+```
+
+And then to run the development server on http://localhost:5173
+
+```bash
+pnpm run playground
+```
+
+### Test
+
+TODO...
+
+### Docs
+
+To run de docs in dev mode
+
+```bash
+pnpm run docs:dev
+```
+
+To build them
+
+```bash
+pnpm run docs:build
+```
+
+## License
+
+[MIT](/LICENSE)
+
+## Sponsors
+
+Be the first to support this project [here](https://github.com/sponsors/alvarosabu) ☺️

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

@@ -0,0 +1,69 @@
+import { BlurPass, KernelSize } from 'postprocessing';
+export interface BloomProps {
+    /**
+     * The intensity of the bloom effect.
+     *
+     * @default 1
+     * @type {number}
+     * @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.
+     *
+     * @default KernelSize.LARGE
+     *
+     * @type {KernelSize}
+     * @memberof BloomProps
+     */
+    kernelSize?: KernelSize;
+    /**
+     * The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1].
+     *
+     * @default 0.9
+     *
+     * @type {number}
+     * @memberof BloomProps
+     */
+    luminanceThreshold?: number;
+    /**
+     * Controls the smoothness of the luminance threshold. Range is [0, 1].
+     *
+     * @default 0.025
+     *
+     * @type {number}
+     * @memberof BloomProps
+     */
+    luminanceSmoothing?: number;
+    /**
+     * Enables mip map blur.
+     *
+     * @default false
+     *
+     * @type {boolean}
+     * @memberof BloomProps
+     */
+    mipMapBlur?: boolean;
+}
+export declare const Bloom: import("vue").DefineComponent<BloomProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<BloomProps>, {}>;

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

@@ -0,0 +1,90 @@
+import { Texture, Vector2 } from 'three';
+import { GlitchMode } from 'postprocessing';
+export interface GlitchProps {
+    /**
+     *  The minimum and maximum delay between glitch activations in seconds.
+     *
+     * @default [1.5, 3.5]
+     *
+     * @type {Vector2}
+     * @memberof GlitchProps
+     */
+    delay?: Vector2;
+    /**
+     * The minimum and maximum duration of a glitch in seconds.
+     *
+     * @default [0.6, 1.0]
+     *
+     * @type {Vector2}
+     * @memberof GlitchProps
+     */
+    duration?: Vector2;
+    /**
+     * The strength of weak and strong glitches.
+     *
+     * @default [0.3, 1.0]
+     *
+     * @type {Vector2}
+     * @memberof GlitchProps
+     */
+    strength?: Vector2;
+    /**
+     * The glitch mode. Can be DISABLED | SPORADIC | CONSTANT_MILD | CONSTANT_WILD .
+     *
+     * @default GlitchMode.SPORADIC
+     *
+     * @type {GlitchMode}
+     * @memberof GlitchProps
+     */
+    mode?: GlitchMode;
+    /**
+     * Turn the effect on and off.
+     *
+     * @type {boolean}
+     * @memberof GlitchProps
+     */
+    active?: boolean;
+    /**
+     *
+     * The threshold for strong glitches.
+     *
+     * @default 0.85
+     *
+     * @type {number}
+     * @memberof GlitchProps
+     */
+    ratio?: number;
+    /**
+     * The scale of the blocky glitch columns.
+     *
+     * @default 0.05
+     *
+     * @type {number}
+     * @memberof GlitchProps
+     */
+    columns?: number;
+    /**
+     * A chromatic aberration offset. If provided, the glitch effect will influence this offset.
+     *
+     * @type {Vector2}
+     * @memberof GlitchProps
+     */
+    chromaticAberrationOffset?: Vector2;
+    /**
+     * A perturbation map. If none is provided, a noise texture will be created.
+     *
+     * @type {Texture}
+     * @memberof GlitchProps
+     */
+    peturbationMap?: Texture;
+    /**
+     * The size of the generated noise map. Will be ignored if a perturbation map is provided.
+     *
+     * @default 64
+     *
+     * @type {number}
+     * @memberof GlitchProps
+     */
+    dtSize?: number;
+}
+export declare const Glitch: import("vue").DefineComponent<GlitchProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<GlitchProps>, {}>;

package/dist/core/useCore.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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;
+};

package/dist/core/useEffectComposer/component.d.ts

@@ -0,0 +1,119 @@
+import { Camera } from '@tresjs/core';
+import { Scene } from 'three';
+export interface EffectComposerProps {
+    /**
+     * Whether the effect composer is enabled.
+     * @default true
+     * @type {boolean}
+     * @memberof EffectComposerProps
+     * @name enabled
+     *
+     **/
+    enabled?: boolean;
+    /**
+     * The children of the effect composer.
+     * @default []
+     * @type {Array}
+     * @memberof EffectComposerProps
+     * @name children
+     *
+     **/
+    children?: Array<any>;
+    /**
+     * Whether the depth buffer is enabled.
+     * @default true
+     * @type {boolean}
+     * @memberof EffectComposerProps
+     * @name depthBuffer
+     *
+     **/
+    depthBuffer?: boolean;
+    /**
+     *
+     * @default false
+     * @type {boolean}
+     * @memberof EffectComposerProps
+     * @name dissableNormalPass
+     *
+     **/
+    dissableNormalPass?: boolean;
+    /**
+     *
+     * Stencil buffer.
+     *
+     * @type {boolean}
+     * @memberof EffectComposerProps
+     * @name stencilBuffer
+     *
+     **/
+    stencilBuffer?: boolean;
+    /**
+     *
+     * Whether the effect composer should clear the buffers before rendering.
+     *
+     * @type {boolean}
+     * @memberof EffectComposerProps
+     * @name autoClear
+     *
+     **/
+    autoClear?: boolean;
+    /**
+     *
+     * The resolution scale.
+     *
+     * @type {number}
+     * @memberof EffectComposerProps
+     * @name resolutionScale
+     *
+     **/
+    resolutionScale?: number;
+    /**
+     *
+     * The multisampling.
+     *
+     * @type {number}
+     * @memberof EffectComposerProps
+     * @name multisampling
+     *
+     **/
+    multisampling?: number;
+    /**
+     *
+     * The frame buffer type.
+     *
+     * @type {number}
+     * @memberof EffectComposerProps
+     * @name frameBufferType
+     *
+     **/
+    frameBufferType?: number;
+    /**
+     *
+     * The render priority.
+     *
+     * @type {number}
+     * @memberof EffectComposerProps
+     * @name renderPriority
+     *
+     **/
+    renderPriority?: number;
+    /**
+     *
+     * A camera to use for rendering.
+     *
+     * @type {Camera}
+     * @memberof EffectComposerProps
+     * @name camera
+     *
+     **/
+    camera?: Camera;
+    /**
+     * A scene to use for rendering.
+     * @type {Scene}
+     * @memberof EffectComposerProps
+     * @name scene
+     *
+     **/
+    scene?: Scene;
+}
+export declare const EffectComposer: import("vue").DefineComponent<EffectComposerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<EffectComposerProps>, {}>;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import { EffectComposer } from './core/useEffectComposer/component';
+import { Bloom } from './core/effects/Bloom';
+import { Glitch } from './core/effects/Glitch';
+export { EffectComposer, Bloom, Glitch };

package/dist/tres-postprocessing.js

@@ -0,0 +1,215 @@
+/**
+ * name: @tresjs/post-processing
+ * version: v0.1.0
+ * (c) 2023
+ * description: Post-processing library for Tres
+ * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
+ */
+import { getCurrentInstance as L, onMounted as S, nextTick as H, getCurrentScope as N, onScopeDispose as O, unref as P, toRef as I, readonly as k, customRef as Q, ref as v, watch as y, watchEffect as b, computed as j, inject as w, defineComponent as g, toRefs as F, shallowRef as V, provide as _, toRaw as M } from "vue";
+import { useTres as $, useRenderLoop as q } from "@tresjs/core";
+import { HalfFloatType as J } from "three";
+import { EffectComposer as K, RenderPass as U, NormalPass as X, DepthDownsamplingPass as Y, EffectPass as R, BloomEffect as Z, GlitchEffect as ee } from "postprocessing";
+function x(e) {
+  return N() ? (O(e), !0) : !1;
+}
+function A(e) {
+  return typeof e == "function" ? e() : P(e);
+}
+const te = typeof window < "u", B = () => {
+};
+function ne(...e) {
+  if (e.length !== 1)
+    return I(...e);
+  const t = e[0];
+  return typeof t == "function" ? k(Q(() => ({ get: t, set: B }))) : v(t);
+}
+function ae(e, t = !0) {
+  L() ? S(e) : t ? e() : H(e);
+}
+function re(e) {
+  var t;
+  const n = A(e);
+  return (t = n == null ? void 0 : n.$el) != null ? t : n;
+}
+const E = te ? window : void 0;
+function oe(...e) {
+  let t, n, r, a;
+  if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([n, r, a] = e, t = E) : [t, n, r, a] = e, !t)
+    return B;
+  Array.isArray(n) || (n = [n]), Array.isArray(r) || (r = [r]);
+  const o = [], l = () => {
+    o.forEach((c) => c()), o.length = 0;
+  }, s = (c, m, d, f) => (c.addEventListener(m, d, f), () => c.removeEventListener(m, d, f)), u = y(
+    () => [re(t), A(a)],
+    ([c, m]) => {
+      l(), c && o.push(
+        ...n.flatMap((d) => r.map((f) => s(c, d, f, m)))
+      );
+    },
+    { immediate: !0, flush: "post" }
+  ), i = () => {
+    u(), l();
+  };
+  return x(i), i;
+}
+function ie() {
+  const e = v(!1);
+  return L() && S(() => {
+    e.value = !0;
+  }), e;
+}
+function se(e) {
+  const t = ie();
+  return j(() => (t.value, !!e()));
+}
+function ue(e, t = {}) {
+  const { window: n = E } = t, r = se(() => n && "matchMedia" in n && typeof n.matchMedia == "function");
+  let a;
+  const o = v(!1), l = () => {
+    a && ("removeEventListener" in a ? a.removeEventListener("change", s) : a.removeListener(s));
+  }, s = () => {
+    r.value && (l(), a = n.matchMedia(ne(e).value), o.value = !!(a != null && a.matches), a && ("addEventListener" in a ? a.addEventListener("change", s) : a.addListener(s)));
+  };
+  return b(s), x(() => l()), o;
+}
+function le(e = {}) {
+  const {
+    window: t = E,
+    initialWidth: n = 1 / 0,
+    initialHeight: r = 1 / 0,
+    listenOrientation: a = !0,
+    includeScrollbar: o = !0
+  } = e, l = v(n), s = v(r), u = () => {
+    t && (o ? (l.value = t.innerWidth, s.value = t.innerHeight) : (l.value = t.document.documentElement.clientWidth, s.value = t.document.documentElement.clientHeight));
+  };
+  if (u(), ae(u), oe("resize", u, { passive: !0 }), a) {
+    const i = ue("(orientation: portrait)");
+    y(i, () => u());
+  }
+  return { width: l, height: s };
+}
+let p;
+function ce() {
+  if (p !== void 0)
+    return p;
+  try {
+    var e;
+    let t;
+    const n = document.createElement("canvas");
+    return p = !!(window.WebGL2RenderingContext && (t = n.getContext("webgl2"))), t && ((e = t.getExtension("WEBGL_lose_context")) === null || e === void 0 || e.loseContext()), p;
+  } catch {
+    return p = !1;
+  }
+}
+function C() {
+  const { state: e, setState: t } = w("useTres", $()), n = w("extend") || (() => {
+  });
+  return {
+    state: e,
+    setState: t,
+    extend: n
+  };
+}
+const pe = g({
+  name: "EffectComposer",
+  props: [
+    "enabled",
+    "children",
+    "depthBuffer",
+    "dissableNormalPass",
+    "stencilBuffer",
+    "autoClear",
+    "resolutionScale",
+    "multisampling",
+    "frameBufferType",
+    "renderPriority",
+    "camera",
+    "scene"
+  ],
+  setup(e, { slots: t }) {
+    const { state: n } = C(), {
+      enabled: r = !0,
+      renderPriority: a = 1,
+      autoClear: o = !0,
+      multisampling: l = 8,
+      frameBufferType: s = J,
+      resolutionScale: u
+    } = F(e), i = V(null), c = e.scene || n.scene, m = e.camera || n.camera;
+    let d = null, f = null;
+    const W = ce();
+    _("effectComposer", i);
+    const { width: G, height: T } = le();
+    function z() {
+      i.value && (f = new X(c, m), f.enabled = !1, i.value.addPass(f), u.value !== void 0 && W && (d = new Y({
+        normalBuffer: f.texture,
+        resolutionScale: u == null ? void 0 : u.value
+      }), d.enabled = !1, i.value.addPass(d)));
+    }
+    b(() => {
+      n.renderer && n.scene && n.camera && (n.renderer.setSize(G.value, T.value), n.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)), i.value = new K(n.renderer), i.value.addPass(new U(c, m)), e.dissableNormalPass || z());
+    }), y(
+      () => e.enabled,
+      (h) => {
+        i.value && (i.value.enabled = h);
+      }
+    );
+    const { onLoop: D } = q();
+    return D(() => {
+      i.value && i.value.render();
+    }), () => {
+      var h;
+      return (h = t.default) == null ? void 0 : h.call(t);
+    };
+  }
+}), he = g({
+  name: "Bloom",
+  props: [
+    "intensity",
+    "blurPass",
+    "width",
+    "height",
+    "kernelSize",
+    "luminanceThreshold",
+    "luminanceSmoothing"
+  ],
+  async setup(e, { expose: t }) {
+    const { state: n } = C(), r = w("effectComposer"), a = v(null);
+    return t({ getPass: () => a.value }), b(() => {
+      var o;
+      n.camera && r && r.value && (a.value = new R(P(n.camera), new Z(e)), (o = r == null ? void 0 : r.value) == null || o.addPass(M(a.value)));
+    }), () => {
+    };
+  }
+}), we = g({
+  name: "Glitch",
+  props: [
+    "delay",
+    "duration",
+    "strength",
+    "mode",
+    "active",
+    "ratio",
+    "columns",
+    "chromaticAberrationOffset",
+    "peturbationMap",
+    "dtSize"
+  ],
+  async setup(e, { expose: t }) {
+    const { state: n } = C(), r = w("effectComposer"), a = v(null);
+    return t({ getPass: () => a.value }), b(() => {
+      var o;
+      n.camera && r && r.value && (a.value = new R(P(n.camera), new ee(e)), (o = r == null ? void 0 : r.value) == null || o.addPass(M(a.value)));
+    }), y(
+      () => e.active,
+      (o) => {
+        a.value && (a.value.enabled = o);
+      }
+    ), () => {
+    };
+  }
+});
+export {
+  he as Bloom,
+  pe as EffectComposer,
+  we as Glitch
+};

package/dist/tres-postprocessing.umd.cjs

@@ -0,0 +1,8 @@
+/**
+ * name: @tresjs/post-processing
+ * version: v0.1.0
+ * (c) 2023
+ * description: Post-processing library for Tres
+ * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
+ */
+(function(c,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("@tresjs/core"),require("three"),require("postprocessing")):typeof define=="function"&&define.amd?define(["exports","vue","@tresjs/core","three","postprocessing"],t):(c=typeof globalThis<"u"?globalThis:c||self,t(c["tres-postprocessing"]={},c.Vue,c.TresjsCore,c.Three,c.Postprocessing))})(this,function(c,t,C,S,h){"use strict";function b(e){return t.getCurrentScope()?(t.onScopeDispose(e),!0):!1}function g(e){return typeof e=="function"?e():t.unref(e)}const M=typeof window<"u",L=()=>{};function R(...e){if(e.length!==1)return t.toRef(...e);const n=e[0];return typeof n=="function"?t.readonly(t.customRef(()=>({get:n,set:L}))):t.ref(n)}function T(e,n=!0){t.getCurrentInstance()?t.onMounted(e):n?e():t.nextTick(e)}function B(e){var n;const r=g(e);return(n=r==null?void 0:r.$el)!=null?n:r}const E=M?window:void 0;function A(...e){let n,r,i,a;if(typeof e[0]=="string"||Array.isArray(e[0])?([r,i,a]=e,n=E):[n,r,i,a]=e,!n)return L;Array.isArray(r)||(r=[r]),Array.isArray(i)||(i=[i]);const o=[],u=()=>{o.forEach(d=>d()),o.length=0},l=(d,w,p,m)=>(d.addEventListener(w,p,m),()=>d.removeEventListener(w,p,m)),f=t.watch(()=>[B(n),g(a)],([d,w])=>{u(),d&&o.push(...r.flatMap(p=>i.map(m=>l(d,p,m,w))))},{immediate:!0,flush:"post"}),s=()=>{f(),u()};return b(s),s}function j(){const e=t.ref(!1);return t.getCurrentInstance()&&t.onMounted(()=>{e.value=!0}),e}function x(e){const n=j();return t.computed(()=>(n.value,!!e()))}function G(e,n={}){const{window:r=E}=n,i=x(()=>r&&"matchMedia"in r&&typeof r.matchMedia=="function");let a;const o=t.ref(!1),u=()=>{a&&("removeEventListener"in a?a.removeEventListener("change",l):a.removeListener(l))},l=()=>{i.value&&(u(),a=r.matchMedia(R(e).value),o.value=!!(a!=null&&a.matches),a&&("addEventListener"in a?a.addEventListener("change",l):a.addListener(l)))};return t.watchEffect(l),b(()=>u()),o}function W(e={}){const{window:n=E,initialWidth:r=1/0,initialHeight:i=1/0,listenOrientation:a=!0,includeScrollbar:o=!0}=e,u=t.ref(r),l=t.ref(i),f=()=>{n&&(o?(u.value=n.innerWidth,l.value=n.innerHeight):(u.value=n.document.documentElement.clientWidth,l.value=n.document.documentElement.clientHeight))};if(f(),T(f),A("resize",f,{passive:!0}),a){const s=G("(orientation: portrait)");t.watch(s,()=>f())}return{width:u,height:l}}let y;function z(){if(y!==void 0)return y;try{var e;let n;const r=document.createElement("canvas");return y=!!(window.WebGL2RenderingContext&&(n=r.getContext("webgl2"))),n&&((e=n.getExtension("WEBGL_lose_context"))===null||e===void 0||e.loseContext()),y}catch{return y=!1}}function P(){const{state:e,setState:n}=t.inject("useTres",C.useTres()),r=t.inject("extend")||(()=>{});return{state:e,setState:n,extend:r}}const O=t.defineComponent({name:"EffectComposer",props:["enabled","children","depthBuffer","dissableNormalPass","stencilBuffer","autoClear","resolutionScale","multisampling","frameBufferType","renderPriority","camera","scene"],setup(e,{slots:n}){const{state:r}=P(),{enabled:i=!0,renderPriority:a=1,autoClear:o=!0,multisampling:u=8,frameBufferType:l=S.HalfFloatType,resolutionScale:f}=t.toRefs(e),s=t.shallowRef(null),d=e.scene||r.scene,w=e.camera||r.camera;let p=null,m=null;const H=z();t.provide("effectComposer",s);const{width:I,height:N}=W();function k(){s.value&&(m=new h.NormalPass(d,w),m.enabled=!1,s.value.addPass(m),f.value!==void 0&&H&&(p=new h.DepthDownsamplingPass({normalBuffer:m.texture,resolutionScale:f==null?void 0:f.value}),p.enabled=!1,s.value.addPass(p)))}t.watchEffect(()=>{r.renderer&&r.scene&&r.camera&&(r.renderer.setSize(I.value,N.value),r.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2)),s.value=new h.EffectComposer(r.renderer),s.value.addPass(new h.RenderPass(d,w)),e.dissableNormalPass||k())}),t.watch(()=>e.enabled,v=>{s.value&&(s.value.enabled=v)});const{onLoop:Q}=C.useRenderLoop();return Q(()=>{s.value&&s.value.render()}),()=>{var v;return(v=n.default)==null?void 0:v.call(n)}}}),q=t.defineComponent({name:"Bloom",props:["intensity","blurPass","width","height","kernelSize","luminanceThreshold","luminanceSmoothing"],async setup(e,{expose:n}){const{state:r}=P(),i=t.inject("effectComposer"),a=t.ref(null);return n({getPass:()=>a.value}),t.watchEffect(()=>{var o;r.camera&&i&&i.value&&(a.value=new h.EffectPass(t.unref(r.camera),new h.BloomEffect(e)),(o=i==null?void 0:i.value)==null||o.addPass(t.toRaw(a.value)))}),()=>{}}}),D=t.defineComponent({name:"Glitch",props:["delay","duration","strength","mode","active","ratio","columns","chromaticAberrationOffset","peturbationMap","dtSize"],async setup(e,{expose:n}){const{state:r}=P(),i=t.inject("effectComposer"),a=t.ref(null);return n({getPass:()=>a.value}),t.watchEffect(()=>{var o;r.camera&&i&&i.value&&(a.value=new h.EffectPass(t.unref(r.camera),new h.GlitchEffect(e)),(o=i==null?void 0:i.value)==null||o.addPass(t.toRaw(a.value)))}),t.watch(()=>e.active,o=>{a.value&&(a.value.enabled=o)}),()=>{}}});c.Bloom=q,c.EffectComposer=O,c.Glitch=D,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@tresjs/post-processing",
+  "description": "Post-processing library for TresJS",
+  "version": "0.1.0",
+  "type": "module",
+  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "main": "./dist/tres-postprocessing.umd.cjs",
+  "module": "./dist/tres-postprocessing.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/tres-postprocessing.js",
+      "require": "./dist/tres-postprocessing.umd.cjs"
+    },
+    "./styles": "./dist/style.css",
+    "./*": "./dist/tres-postprocessing.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite",
+    "playground": "cd playground && nr dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "release": "release-it",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
+  },
+  "peerDependencies": {
+    "@tresjs/core": "2.0.0-beta.8",
+    "three": "latest",
+    "vue": "^3.2.47"
+  },
+  "dependencies": {
+    "@vueuse/core": "^10.0.2",
+    "postprocessing": "^6.30.2",
+    "three": "^0.151.3",
+    "three-stdlib": "^2.21.8",
+    "vue": "^3.2.47"
+  },
+  "devDependencies": {
+    "@alvarosabu/prettier-config": "^1.3.0",
+    "@release-it/conventional-changelog": "^5.1.1",
+    "@tresjs/core": "2.0.0-beta.9",
+    "@types/three": "^0.150.1",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "kolorist": "^1.7.0",
+    "pathe": "^1.1.0",
+    "prettier": "^2.8.7",
+    "release-it": "^15.10.1",
+    "rollup-plugin-analyzer": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "typescript": "^5.0.4",
+    "unocss": "^0.51.4",
+    "vite": "^4.2.1",
+    "vite-plugin-banner": "^0.7.0",
+    "vite-plugin-dts": "2.3.0",
+    "vitepress": "1.0.0-alpha.72",
+    "vue-tsc": "^1.2.0"
+  }
+}