@tresjs/post-processing 0.5.0 → 0.6.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,39 @@
1
+ import { BlendFunction, NoiseEffect } from 'postprocessing';
2
+ export interface NoiseProps {
3
+ /**
4
+ * Whether the noise should be multiplied with the input color.
5
+ */
6
+ premultiply?: boolean;
7
+ blendFunction?: BlendFunction;
8
+ }
9
+ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NoiseProps>, {
10
+ premultiply: boolean;
11
+ blendFunction: BlendFunction;
12
+ }>, {
13
+ pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
14
+ effect: import("vue").ShallowRef<NoiseEffect | null>;
15
+ }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NoiseProps>, {
16
+ premultiply: boolean;
17
+ blendFunction: BlendFunction;
18
+ }>>>, {
19
+ blendFunction: BlendFunction;
20
+ premultiply: boolean;
21
+ }, {}>;
22
+ export default _default;
23
+ type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
24
+ type __VLS_TypePropsToRuntimeProps<T> = {
25
+ [K in keyof T]-?: {} extends Pick<T, K> ? {
26
+ type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
27
+ } : {
28
+ type: import('vue').PropType<T[K]>;
29
+ required: true;
30
+ };
31
+ };
32
+ type __VLS_WithDefaults<P, D> = {
33
+ [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
34
+ default: D[K];
35
+ }> : P[K];
36
+ };
37
+ type __VLS_Prettify<T> = {
38
+ [K in keyof T]: T[K];
39
+ } & {};
package/dist/index.d.ts CHANGED
@@ -3,5 +3,6 @@ import Glitch from './core/effects/Glitch.vue';
3
3
  import Outline from './core/effects/Outline.vue';
4
4
  import Pixelation from './core/effects/Pixelation.vue';
5
5
  import DepthOfField from './core/effects/DepthOfField.vue';
6
+ import Noise from './core/effects/Noise.vue';
6
7
  import EffectComposer from './core/EffectComposer.vue';
7
- export { Bloom, Glitch, Outline, Pixelation, DepthOfField, EffectComposer, };
8
+ export { Bloom, Glitch, Outline, Pixelation, DepthOfField, EffectComposer, Noise, };
@@ -1,64 +1,64 @@
1
1
  /**
2
2
  * name: @tresjs/post-processing
3
- * version: v0.5.0
3
+ * version: v0.6.0-next.0
4
4
  * (c) 2023
5
5
  * description: Post-processing library for TresJS
6
6
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
7
7
  */
8
- 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";
9
- 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";
10
- import { useTresContext as S, normalizeColor as C, useRenderLoop as K } from "@tresjs/core";
11
- import { HalfFloatType as O } from "three";
12
- const A = Symbol(), v = (a) => {
13
- const t = $(A), e = w(null), n = w(null), { scene: o, camera: l } = S();
14
- m(() => {
8
+ import { inject as W, shallowRef as _, watchEffect as v, onUnmounted as A, watch as w, defineComponent as f, computed as M, provide as j, renderSlot as X } from "vue";
9
+ import { EffectPass as Y, BloomEffect as y, GlitchEffect as b, GlitchMode as H, OutlineEffect as P, PixelationEffect as F, DepthOfFieldEffect as R, BlendFunction as I, NoiseEffect as O, EffectComposer as z, RenderPass as U, NormalPass as K, DepthDownsamplingPass as q } from "postprocessing";
10
+ import { useTresContext as S, normalizeColor as C, useRenderLoop as J } from "@tresjs/core";
11
+ import { HalfFloatType as D } from "three";
12
+ const N = Symbol(), p = (a) => {
13
+ const t = W(N), e = _(null), n = _(null), { scene: o, camera: l } = S();
14
+ v(() => {
15
15
  !l.value || !(n != null && n.value) || (n.value.mainCamera = l.value);
16
16
  });
17
17
  let s = () => {
18
18
  };
19
- return s = m(() => {
20
- !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)));
21
- }), T(() => {
19
+ return s = v(() => {
20
+ !l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new Y(l.value, n.value), t.value.addPass(e.value)));
21
+ }), A(() => {
22
22
  var r, i, d;
23
23
  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();
24
24
  }), {
25
25
  pass: e,
26
26
  effect: n
27
27
  };
28
- }, M = /([^[.\]])+/g, q = (a, t) => {
28
+ }, G = /([^[.\]])+/g, Q = (a, t) => {
29
29
  if (!t)
30
30
  return;
31
- const e = Array.isArray(t) ? t : t.match(M);
31
+ const e = Array.isArray(t) ? t : t.match(G);
32
32
  return e == null ? void 0 : e.reduce((n, o) => n && n[o], a);
33
- }, z = (a, t, e) => {
34
- const n = Array.isArray(t) ? t : t.match(M);
33
+ }, T = (a, t, e) => {
34
+ const n = Array.isArray(t) ? t : t.match(G);
35
35
  n && n.reduce((o, l, s) => (o[l] === void 0 && (o[l] = {}), s === n.length - 1 && (o[l] = e), o[l]), a);
36
- }, J = (a, t) => {
36
+ }, V = (a, t) => {
37
37
  const e = { ...a };
38
38
  return t.forEach((n) => delete e[n]), e;
39
- }, G = (a, t, e, n, o = {}) => _(
39
+ }, L = (a, t, e, n, o = {}) => w(
40
40
  a,
41
41
  (l) => {
42
42
  var s;
43
43
  if (t.value)
44
44
  if (l === void 0) {
45
45
  const r = n();
46
- z(t.value, e, q(r, e)), (s = r.dispose) == null || s.call(r);
46
+ T(t.value, e, Q(r, e)), (s = r.dispose) == null || s.call(r);
47
47
  } else
48
- z(t.value, e, a());
48
+ T(t.value, e, a());
49
49
  },
50
50
  o
51
- ), E = (a, t, e) => a.map(([n, o]) => G(
51
+ ), E = (a, t, e) => a.map(([n, o]) => L(
52
52
  n,
53
53
  t,
54
54
  o,
55
55
  e
56
- )), L = (a, t, e) => Object.keys(a).map((n) => G(
56
+ )), B = (a, t, e) => Object.keys(a).map((n) => L(
57
57
  () => a[n],
58
58
  t,
59
59
  n,
60
60
  e
61
- )), te = /* @__PURE__ */ f({
61
+ )), oe = /* @__PURE__ */ f({
62
62
  __name: "Bloom",
63
63
  props: {
64
64
  blendFunction: {},
@@ -69,7 +69,7 @@ const A = Symbol(), v = (a) => {
69
69
  mipmapBlur: { type: Boolean, default: void 0 }
70
70
  },
71
71
  setup(a, { expose: t }) {
72
- const e = a, { pass: n, effect: o } = v(() => new x(e));
72
+ const e = a, { pass: n, effect: o } = p(() => new y(e));
73
73
  return t({ pass: n, effect: o }), E(
74
74
  [
75
75
  // blendFunction is not updated, because it has no setter in BloomEffect
@@ -79,10 +79,10 @@ const A = Symbol(), v = (a) => {
79
79
  [() => e.luminanceThreshold, "luminanceMaterial.threshold"]
80
80
  ],
81
81
  o,
82
- () => new x()
82
+ () => new y()
83
83
  ), (l, s) => null;
84
84
  }
85
- }), ne = /* @__PURE__ */ f({
85
+ }), le = /* @__PURE__ */ f({
86
86
  __name: "Glitch",
87
87
  props: {
88
88
  blendFunction: {},
@@ -98,22 +98,22 @@ const A = Symbol(), v = (a) => {
98
98
  dtSize: {}
99
99
  },
100
100
  setup(a, { expose: t }) {
101
- const e = a, { pass: n, effect: o } = v(() => new b(e));
102
- return t({ pass: n, effect: o }), m(() => {
101
+ const e = a, { pass: n, effect: o } = p(() => new b(e));
102
+ return t({ pass: n, effect: o }), v(() => {
103
103
  const l = () => {
104
104
  if (e.mode !== void 0)
105
- return e.active === !1 ? Y.DISABLED : e.mode;
105
+ return e.active === !1 ? H.DISABLED : e.mode;
106
106
  const s = new b(), r = s.mode;
107
107
  return s.dispose(), r;
108
108
  };
109
109
  o.value && (o.value.mode = l());
110
- }), L(
111
- J(e, ["active", "mode", "blendFunction"]),
110
+ }), B(
111
+ V(e, ["active", "mode", "blendFunction"]),
112
112
  o,
113
113
  () => new b()
114
114
  ), (l, s) => null;
115
115
  }
116
- }), oe = /* @__PURE__ */ f({
116
+ }), ae = /* @__PURE__ */ f({
117
117
  __name: "Outline",
118
118
  props: {
119
119
  outlinedObjects: {},
@@ -148,8 +148,8 @@ const A = Symbol(), v = (a) => {
148
148
  resolutionScale: e.resolutionScale,
149
149
  hiddenEdgeColor: n(e.hiddenEdgeColor),
150
150
  visibleEdgeColor: n(e.visibleEdgeColor)
151
- }, { pass: r, effect: i } = v(() => new y(l.value, o.value, s));
152
- t({ pass: r, effect: i }), _(
151
+ }, { pass: r, effect: i } = p(() => new P(l.value, o.value, s));
152
+ t({ pass: r, effect: i }), w(
153
153
  [() => e.outlinedObjects, i],
154
154
  // watchEffect is intentionally not used here as it would result in an endless loop
155
155
  () => {
@@ -160,7 +160,7 @@ const A = Symbol(), v = (a) => {
160
160
  immediate: !0
161
161
  }
162
162
  );
163
- const d = k(() => ({
163
+ const d = M(() => ({
164
164
  hiddenEdgeColor: e.hiddenEdgeColor ? C(e.hiddenEdgeColor) : void 0,
165
165
  visibleEdgeColor: e.visibleEdgeColor ? C(e.visibleEdgeColor) : void 0
166
166
  }));
@@ -184,23 +184,23 @@ const A = Symbol(), v = (a) => {
184
184
  [() => d.value.visibleEdgeColor, "visibleEdgeColor"]
185
185
  ],
186
186
  i,
187
- () => new y()
188
- ), (c, B) => null;
187
+ () => new P()
188
+ ), (c, x) => null;
189
189
  }
190
- }), le = /* @__PURE__ */ f({
190
+ }), se = /* @__PURE__ */ f({
191
191
  __name: "Pixelation",
192
192
  props: {
193
193
  granularity: {}
194
194
  },
195
195
  setup(a, { expose: t }) {
196
- const e = a, { pass: n, effect: o } = v(() => new P(e.granularity));
197
- return t({ pass: n, effect: o }), L(
196
+ const e = a, { pass: n, effect: o } = p(() => new F(e.granularity));
197
+ return t({ pass: n, effect: o }), B(
198
198
  e,
199
199
  o,
200
- () => new P()
200
+ () => new F()
201
201
  ), (l, s) => null;
202
202
  }
203
- }), ae = /* @__PURE__ */ f({
203
+ }), re = /* @__PURE__ */ f({
204
204
  __name: "DepthOfField",
205
205
  props: {
206
206
  blendFunction: {},
@@ -214,7 +214,7 @@ const A = Symbol(), v = (a) => {
214
214
  resolutionY: {}
215
215
  },
216
216
  setup(a, { expose: t }) {
217
- const e = a, { camera: n } = S(), { pass: o, effect: l } = v(() => new F(n.value, e));
217
+ const e = a, { camera: n } = S(), { pass: o, effect: l } = p(() => new R(n.value, e));
218
218
  return t({ pass: o, effect: l }), E(
219
219
  [
220
220
  // blendFunction is not updated, because it has no setter in BloomEffect
@@ -228,24 +228,38 @@ const A = Symbol(), v = (a) => {
228
228
  [() => e.resolutionY, "resolution.height"]
229
229
  ],
230
230
  l,
231
- () => new F()
231
+ () => new R()
232
232
  ), (s, r) => null;
233
233
  }
234
+ }), ie = /* @__PURE__ */ f({
235
+ __name: "Noise",
236
+ props: {
237
+ premultiply: { type: Boolean, default: !1 },
238
+ blendFunction: { default: I.SCREEN }
239
+ },
240
+ setup(a, { expose: t }) {
241
+ const e = a, { pass: n, effect: o } = p(() => new O(e));
242
+ return t({ pass: n, effect: o }), B(
243
+ e,
244
+ o,
245
+ () => new O()
246
+ ), (l, s) => null;
247
+ }
234
248
  });
235
- let p;
236
- function D() {
249
+ let m;
250
+ function k() {
237
251
  var a;
238
- if (p !== void 0)
239
- return p;
252
+ if (m !== void 0)
253
+ return m;
240
254
  try {
241
255
  let t;
242
256
  const e = document.createElement("canvas");
243
- return p = !!(window.WebGL2RenderingContext && (t = e.getContext("webgl2"))), t && ((a = t.getExtension("WEBGL_lose_context")) == null || a.loseContext()), p;
257
+ return m = !!(window.WebGL2RenderingContext && (t = e.getContext("webgl2"))), t && ((a = t.getExtension("WEBGL_lose_context")) == null || a.loseContext()), m;
244
258
  } catch {
245
- return p = !1;
259
+ return m = !1;
246
260
  }
247
261
  }
248
- const se = /* @__PURE__ */ f({
262
+ const ue = /* @__PURE__ */ f({
249
263
  __name: "EffectComposer",
250
264
  props: {
251
265
  enabled: { type: Boolean, default: !0 },
@@ -256,56 +270,57 @@ const se = /* @__PURE__ */ f({
256
270
  resolutionScale: {},
257
271
  autoClear: { type: Boolean, default: !0 },
258
272
  multisampling: { default: 0 },
259
- frameBufferType: { default: O }
273
+ frameBufferType: { default: D }
260
274
  },
261
275
  setup(a) {
262
- const t = a, { scene: e, camera: n, renderer: o, sizes: l } = S(), s = w(null);
276
+ const t = a, { scene: e, camera: n, renderer: o, sizes: l } = S(), s = _(null);
263
277
  let r = null, i = null;
264
- j(A, s);
278
+ j(N, s);
265
279
  const d = () => {
266
- s.value && (i = new I(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && D() && (r = new U({
280
+ s.value && (i = new K(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && k() && (r = new q({
267
281
  normalBuffer: i.texture,
268
282
  resolutionScale: t.resolutionScale
269
283
  }), r.enabled = !1, s.value.addPass(r)));
270
284
  };
271
- m(() => {
285
+ v(() => {
272
286
  s.value && l.width.value && l.height.value && s.value.setSize(l.width.value, l.height.value);
273
287
  });
274
- const c = k(() => {
275
- const u = new R(), g = {
288
+ const c = M(() => {
289
+ const u = new z(), g = {
276
290
  depthBuffer: t.depthBuffer !== void 0 ? t.depthBuffer : u.inputBuffer.depthBuffer,
277
291
  stencilBuffer: t.stencilBuffer !== void 0 ? t.stencilBuffer : u.inputBuffer.stencilBuffer,
278
- multisampling: D() ? 0 : t.multisampling !== void 0 ? t.multisampling : u.multisampling,
279
- frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : O
292
+ multisampling: k() ? 0 : t.multisampling !== void 0 ? t.multisampling : u.multisampling,
293
+ frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType : D
280
294
  };
281
295
  return u.dispose(), g;
282
- }), B = () => {
283
- !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());
296
+ }), x = () => {
297
+ !o.value && !e.value && !n.value || (s.value = new z(o.value, c.value), s.value.addPass(new U(e.value, n.value)), t.disableNormalPass || d());
284
298
  };
285
299
  let h = () => {
286
300
  };
287
- h = _([l.height, l.width], () => {
288
- !l.height.value && !l.width.value || (m(B), h == null || h());
301
+ h = w([l.height, l.width], () => {
302
+ !l.height.value && !l.width.value || (v(x), h == null || h());
289
303
  }, {
290
304
  immediate: !0
291
305
  });
292
- const { onLoop: W } = K();
293
- return W(({ delta: u }) => {
306
+ const { onLoop: $ } = J();
307
+ return $(({ delta: u }) => {
294
308
  if (t.enabled && o.value && s.value && l.width.value && l.height.value) {
295
309
  const g = o.value.autoClear;
296
310
  o.value.autoClear = t.autoClear, t.stencilBuffer && !t.autoClear && o.value.clearStencil(), s.value.render(u), o.value.autoClear = g;
297
311
  }
298
- }), T(() => {
312
+ }), A(() => {
299
313
  var u;
300
314
  (u = s.value) == null || u.dispose();
301
- }), (u, g) => N(u.$slots, "default");
315
+ }), (u, g) => X(u.$slots, "default");
302
316
  }
303
317
  });
304
318
  export {
305
- te as Bloom,
306
- ae as DepthOfField,
307
- se as EffectComposer,
308
- ne as Glitch,
309
- oe as Outline,
310
- le as Pixelation
319
+ oe as Bloom,
320
+ re as DepthOfField,
321
+ ue as EffectComposer,
322
+ le as Glitch,
323
+ ie as Noise,
324
+ ae as Outline,
325
+ se as Pixelation
311
326
  };
@@ -1,8 +1,8 @@
1
1
  /**
2
2
  * name: @tresjs/post-processing
3
- * version: v0.5.0
3
+ * version: v0.6.0-next.0
4
4
  * (c) 2023
5
5
  * description: Post-processing library for TresJS
6
6
  * author: Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)
7
7
  */
8
- (function(c,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("postprocessing"),require("@tresjs/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","postprocessing","@tresjs/core","three"],i):(c=typeof globalThis<"u"?globalThis:c||self,i(c["tres-postprocessing"]={},c.Vue,c.Postprocessing,c.TresjsCore,c.Three))})(this,function(c,i,u,m,E){"use strict";const b=Symbol(),v=a=>{const t=i.inject(b),e=i.shallowRef(null),n=i.shallowRef(null),{scene:l,camera:o}=m.useTresContext();i.watchEffect(()=>{!o.value||!(n!=null&&n.value)||(n.value.mainCamera=o.value)});let r=()=>{};return r=i.watchEffect(()=>{!o.value||!(t!=null&&t.value)||!l.value||(r(),!n.value&&(n.value=a(),e.value=new u.EffectPass(o.value,n.value),t.value.addPass(e.value)))}),i.onUnmounted(()=>{var s,f,h;e.value&&((s=t==null?void 0:t.value)==null||s.removePass(e.value)),(f=n.value)==null||f.dispose(),(h=e.value)==null||h.dispose()}),{pass:e,effect:n}},_=/([^[.\]])+/g,F=(a,t)=>{if(!t)return;const e=Array.isArray(t)?t:t.match(_);return e==null?void 0:e.reduce((n,l)=>n&&n[l],a)},B=(a,t,e)=>{const n=Array.isArray(t)?t:t.match(_);n&&n.reduce((l,o,r)=>(l[o]===void 0&&(l[o]={}),r===n.length-1&&(l[o]=e),l[o]),a)},O=(a,t)=>{const e={...a};return t.forEach(n=>delete e[n]),e},y=(a,t,e,n,l={})=>i.watch(a,o=>{var r;if(t.value)if(o===void 0){const s=n();B(t.value,e,F(s,e)),(r=s.dispose)==null||r.call(s)}else B(t.value,e,a())},l),S=(a,t,e)=>a.map(([n,l])=>y(n,t,l,e)),x=(a,t,e)=>Object.keys(a).map(n=>y(()=>a[n],t,n,e)),R=i.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean,default:void 0}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.BloomEffect(e));return t({pass:n,effect:l}),S([[()=>e.intensity,"intensity"],[()=>e.kernelSize,"kernelSize"],[()=>e.luminanceSmoothing,"luminanceMaterial.smoothing"],[()=>e.luminanceThreshold,"luminanceMaterial.threshold"]],l,()=>new u.BloomEffect),(o,r)=>null}}),z=i.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.GlitchEffect(e));return t({pass:n,effect:l}),i.watchEffect(()=>{const o=()=>{if(e.mode!==void 0)return e.active===!1?u.GlitchMode.DISABLED:e.mode;const r=new u.GlitchEffect,s=r.mode;return r.dispose(),s};l.value&&(l.value.mode=o())}),x(O(e,["active","mode","blendFunction"]),l,()=>new u.GlitchEffect),(o,r)=>null}}),D=i.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean,default:void 0},xRay:{type:Boolean,default:void 0},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(a,{expose:t}){const e=a,n=p=>p!==void 0?m.normalizeColor(p).getHex():void 0,{camera:l,scene:o}=m.useTresContext(),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:n(e.hiddenEdgeColor),visibleEdgeColor:n(e.visibleEdgeColor)},{pass:s,effect:f}=v(()=>new u.OutlineEffect(o.value,l.value,r));t({pass:s,effect:f}),i.watch([()=>e.outlinedObjects,f],()=>{var p;(p=f.value)==null||p.selection.set(e.outlinedObjects||[])},{immediate:!0});const h=i.computed(()=>({hiddenEdgeColor:e.hiddenEdgeColor?m.normalizeColor(e.hiddenEdgeColor):void 0,visibleEdgeColor:e.visibleEdgeColor?m.normalizeColor(e.visibleEdgeColor):void 0}));return S([[()=>e.blur,"blur"],[()=>e.xRay,"xRay"],[()=>e.pulseSpeed,"pulseSpeed"],[()=>e.kernelSize,"kernelSize"],[()=>e.edgeStrength,"edgeStrength"],[()=>e.patternScale,"patternScale"],[()=>e.multisampling,"multisampling"],[()=>h.value.hiddenEdgeColor,"hiddenEdgeColor"],[()=>h.value.visibleEdgeColor,"visibleEdgeColor"]],f,()=>new u.OutlineEffect),(p,T)=>null}}),k=i.defineComponent({__name:"Pixelation",props:{granularity:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.PixelationEffect(e.granularity));return t({pass:n,effect:l}),x(e,l,()=>new u.PixelationEffect),(o,r)=>null}}),M=i.defineComponent({__name:"DepthOfField",props:{blendFunction:{},worldFocusDistance:{},worldFocusRange:{},focusDistance:{},focusRange:{},bokehScale:{},resolutionScale:{},resolutionX:{},resolutionY:{}},setup(a,{expose:t}){const e=a,{camera:n}=m.useTresContext(),{pass:l,effect:o}=v(()=>new u.DepthOfFieldEffect(n.value,e));return t({pass:l,effect:o}),S([[()=>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"]],o,()=>new u.DepthOfFieldEffect),(r,s)=>null}});let C;function P(){var a;if(C!==void 0)return C;try{let t;const e=document.createElement("canvas");return C=!!(window.WebGL2RenderingContext&&(t=e.getContext("webgl2"))),t&&((a=t.getExtension("WEBGL_lose_context"))==null||a.loseContext()),C}catch{return C=!1}}const j=i.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:E.HalfFloatType}},setup(a){const t=a,{scene:e,camera:n,renderer:l,sizes:o}=m.useTresContext(),r=i.shallowRef(null);let s=null,f=null;i.provide(b,r);const h=()=>{r.value&&(f=new u.NormalPass(e.value,n.value),f.enabled=!1,r.value.addPass(f),t.resolutionScale!==void 0&&P()&&(s=new u.DepthDownsamplingPass({normalBuffer:f.texture,resolutionScale:t.resolutionScale}),s.enabled=!1,r.value.addPass(s)))};i.watchEffect(()=>{r.value&&o.width.value&&o.height.value&&r.value.setSize(o.width.value,o.height.value)});const p=i.computed(()=>{const d=new u.EffectComposer,w={depthBuffer:t.depthBuffer!==void 0?t.depthBuffer:d.inputBuffer.depthBuffer,stencilBuffer:t.stencilBuffer!==void 0?t.stencilBuffer:d.inputBuffer.stencilBuffer,multisampling:P()?0:t.multisampling!==void 0?t.multisampling:d.multisampling,frameBufferType:t.frameBufferType!==void 0?t.frameBufferType:E.HalfFloatType};return d.dispose(),w}),T=()=>{!l.value&&!e.value&&!n.value||(r.value=new u.EffectComposer(l.value,p.value),r.value.addPass(new u.RenderPass(e.value,n.value)),t.disableNormalPass||h())};let g=()=>{};g=i.watch([o.height,o.width],()=>{!o.height.value&&!o.width.value||(i.watchEffect(T),g==null||g())},{immediate:!0});const{onLoop:A}=m.useRenderLoop();return A(({delta:d})=>{if(t.enabled&&l.value&&r.value&&o.width.value&&o.height.value){const w=l.value.autoClear;l.value.autoClear=t.autoClear,t.stencilBuffer&&!t.autoClear&&l.value.clearStencil(),r.value.render(d),l.value.autoClear=w}}),i.onUnmounted(()=>{var d;(d=r.value)==null||d.dispose()}),(d,w)=>i.renderSlot(d.$slots,"default")}});c.Bloom=R,c.DepthOfField=M,c.EffectComposer=j,c.Glitch=z,c.Outline=D,c.Pixelation=k,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
8
+ (function(s,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue"),require("postprocessing"),require("@tresjs/core"),require("three")):typeof define=="function"&&define.amd?define(["exports","vue","postprocessing","@tresjs/core","three"],i):(s=typeof globalThis<"u"?globalThis:s||self,i(s["tres-postprocessing"]={},s.Vue,s.Postprocessing,s.TresjsCore,s.Three))})(this,function(s,i,u,m,_){"use strict";const b=Symbol(),v=a=>{const t=i.inject(b),e=i.shallowRef(null),n=i.shallowRef(null),{scene:l,camera:o}=m.useTresContext();i.watchEffect(()=>{!o.value||!(n!=null&&n.value)||(n.value.mainCamera=o.value)});let r=()=>{};return r=i.watchEffect(()=>{!o.value||!(t!=null&&t.value)||!l.value||(r(),!n.value&&(n.value=a(),e.value=new u.EffectPass(o.value,n.value),t.value.addPass(e.value)))}),i.onUnmounted(()=>{var c,f,h;e.value&&((c=t==null?void 0:t.value)==null||c.removePass(e.value)),(f=n.value)==null||f.dispose(),(h=e.value)==null||h.dispose()}),{pass:e,effect:n}},B=/([^[.\]])+/g,T=(a,t)=>{if(!t)return;const e=Array.isArray(t)?t:t.match(B);return e==null?void 0:e.reduce((n,l)=>n&&n[l],a)},y=(a,t,e)=>{const n=Array.isArray(t)?t:t.match(B);n&&n.reduce((l,o,r)=>(l[o]===void 0&&(l[o]={}),r===n.length-1&&(l[o]=e),l[o]),a)},R=(a,t)=>{const e={...a};return t.forEach(n=>delete e[n]),e},x=(a,t,e,n,l={})=>i.watch(a,o=>{var r;if(t.value)if(o===void 0){const c=n();y(t.value,e,T(c,e)),(r=c.dispose)==null||r.call(c)}else y(t.value,e,a())},l),E=(a,t,e)=>a.map(([n,l])=>x(n,t,l,e)),S=(a,t,e)=>Object.keys(a).map(n=>x(()=>a[n],t,n,e)),O=i.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean,default:void 0}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.BloomEffect(e));return t({pass:n,effect:l}),E([[()=>e.intensity,"intensity"],[()=>e.kernelSize,"kernelSize"],[()=>e.luminanceSmoothing,"luminanceMaterial.smoothing"],[()=>e.luminanceThreshold,"luminanceMaterial.threshold"]],l,()=>new u.BloomEffect),(o,r)=>null}}),z=i.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.GlitchEffect(e));return t({pass:n,effect:l}),i.watchEffect(()=>{const o=()=>{if(e.mode!==void 0)return e.active===!1?u.GlitchMode.DISABLED:e.mode;const r=new u.GlitchEffect,c=r.mode;return r.dispose(),c};l.value&&(l.value.mode=o())}),S(R(e,["active","mode","blendFunction"]),l,()=>new u.GlitchEffect),(o,r)=>null}}),D=i.defineComponent({__name:"Outline",props:{outlinedObjects:{},blur:{type:Boolean,default:void 0},xRay:{type:Boolean,default:void 0},kernelSize:{},pulseSpeed:{},resolutionX:{},resolutionY:{},edgeStrength:{},patternScale:{},multisampling:{},blendFunction:{},patternTexture:{},resolutionScale:{},hiddenEdgeColor:{},visibleEdgeColor:{}},setup(a,{expose:t}){const e=a,n=p=>p!==void 0?m.normalizeColor(p).getHex():void 0,{camera:l,scene:o}=m.useTresContext(),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:n(e.hiddenEdgeColor),visibleEdgeColor:n(e.visibleEdgeColor)},{pass:c,effect:f}=v(()=>new u.OutlineEffect(o.value,l.value,r));t({pass:c,effect:f}),i.watch([()=>e.outlinedObjects,f],()=>{var p;(p=f.value)==null||p.selection.set(e.outlinedObjects||[])},{immediate:!0});const h=i.computed(()=>({hiddenEdgeColor:e.hiddenEdgeColor?m.normalizeColor(e.hiddenEdgeColor):void 0,visibleEdgeColor:e.visibleEdgeColor?m.normalizeColor(e.visibleEdgeColor):void 0}));return E([[()=>e.blur,"blur"],[()=>e.xRay,"xRay"],[()=>e.pulseSpeed,"pulseSpeed"],[()=>e.kernelSize,"kernelSize"],[()=>e.edgeStrength,"edgeStrength"],[()=>e.patternScale,"patternScale"],[()=>e.multisampling,"multisampling"],[()=>h.value.hiddenEdgeColor,"hiddenEdgeColor"],[()=>h.value.visibleEdgeColor,"visibleEdgeColor"]],f,()=>new u.OutlineEffect),(p,F)=>null}}),k=i.defineComponent({__name:"Pixelation",props:{granularity:{}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.PixelationEffect(e.granularity));return t({pass:n,effect:l}),S(e,l,()=>new u.PixelationEffect),(o,r)=>null}}),M=i.defineComponent({__name:"DepthOfField",props:{blendFunction:{},worldFocusDistance:{},worldFocusRange:{},focusDistance:{},focusRange:{},bokehScale:{},resolutionScale:{},resolutionX:{},resolutionY:{}},setup(a,{expose:t}){const e=a,{camera:n}=m.useTresContext(),{pass:l,effect:o}=v(()=>new u.DepthOfFieldEffect(n.value,e));return t({pass:l,effect:o}),E([[()=>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"]],o,()=>new u.DepthOfFieldEffect),(r,c)=>null}}),j=i.defineComponent({__name:"Noise",props:{premultiply:{type:Boolean,default:!1},blendFunction:{default:u.BlendFunction.SCREEN}},setup(a,{expose:t}){const e=a,{pass:n,effect:l}=v(()=>new u.NoiseEffect(e));return t({pass:n,effect:l}),S(e,l,()=>new u.NoiseEffect),(o,r)=>null}});let C;function P(){var a;if(C!==void 0)return C;try{let t;const e=document.createElement("canvas");return C=!!(window.WebGL2RenderingContext&&(t=e.getContext("webgl2"))),t&&((a=t.getExtension("WEBGL_lose_context"))==null||a.loseContext()),C}catch{return C=!1}}const A=i.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:_.HalfFloatType}},setup(a){const t=a,{scene:e,camera:n,renderer:l,sizes:o}=m.useTresContext(),r=i.shallowRef(null);let c=null,f=null;i.provide(b,r);const h=()=>{r.value&&(f=new u.NormalPass(e.value,n.value),f.enabled=!1,r.value.addPass(f),t.resolutionScale!==void 0&&P()&&(c=new u.DepthDownsamplingPass({normalBuffer:f.texture,resolutionScale:t.resolutionScale}),c.enabled=!1,r.value.addPass(c)))};i.watchEffect(()=>{r.value&&o.width.value&&o.height.value&&r.value.setSize(o.width.value,o.height.value)});const p=i.computed(()=>{const d=new u.EffectComposer,g={depthBuffer:t.depthBuffer!==void 0?t.depthBuffer:d.inputBuffer.depthBuffer,stencilBuffer:t.stencilBuffer!==void 0?t.stencilBuffer:d.inputBuffer.stencilBuffer,multisampling:P()?0:t.multisampling!==void 0?t.multisampling:d.multisampling,frameBufferType:t.frameBufferType!==void 0?t.frameBufferType:_.HalfFloatType};return d.dispose(),g}),F=()=>{!l.value&&!e.value&&!n.value||(r.value=new u.EffectComposer(l.value,p.value),r.value.addPass(new u.RenderPass(e.value,n.value)),t.disableNormalPass||h())};let w=()=>{};w=i.watch([o.height,o.width],()=>{!o.height.value&&!o.width.value||(i.watchEffect(F),w==null||w())},{immediate:!0});const{onLoop:N}=m.useRenderLoop();return N(({delta:d})=>{if(t.enabled&&l.value&&r.value&&o.width.value&&o.height.value){const g=l.value.autoClear;l.value.autoClear=t.autoClear,t.stencilBuffer&&!t.autoClear&&l.value.clearStencil(),r.value.render(d),l.value.autoClear=g}}),i.onUnmounted(()=>{var d;(d=r.value)==null||d.dispose()}),(d,g)=>i.renderSlot(d.$slots,"default")}});s.Bloom=O,s.DepthOfField=M,s.EffectComposer=A,s.Glitch=z,s.Noise=j,s.Outline=D,s.Pixelation=k,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tresjs/post-processing",
3
3
  "description": "Post-processing library for TresJS",
4
- "version": "0.5.0",
4
+ "version": "0.6.0-next.0",
5
5
  "type": "module",
6
6
  "author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
7
7
  "files": [