@tresjs/post-processing 0.5.0 → 0.6.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.
|
|
3
|
+
* version: v0.6.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
|
|
9
|
-
import { EffectPass as
|
|
10
|
-
import { useTresContext as
|
|
11
|
-
import { HalfFloatType as
|
|
12
|
-
const
|
|
13
|
-
const t =
|
|
14
|
-
|
|
8
|
+
import { inject as j, shallowRef as _, watchEffect as v, onUnmounted as A, watch as w, defineComponent as f, computed as M, provide as X, renderSlot as Y } from "vue";
|
|
9
|
+
import { EffectPass as H, BloomEffect as y, GlitchEffect as S, GlitchMode as I, OutlineEffect as P, PixelationEffect as F, DepthOfFieldEffect as R, BlendFunction as U, NoiseEffect as O, EffectComposer as z, RenderPass as K, NormalPass as q, DepthDownsamplingPass as J } from "postprocessing";
|
|
10
|
+
import { useTresContext as b, normalizeColor as C, useRenderLoop as Q } from "@tresjs/core";
|
|
11
|
+
import { HalfFloatType as D } from "three";
|
|
12
|
+
const N = Symbol(), p = (a) => {
|
|
13
|
+
const t = j(N), e = _(null), n = _(null), { scene: o, camera: l } = b();
|
|
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 =
|
|
20
|
-
!l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new
|
|
21
|
-
}),
|
|
19
|
+
return s = v(() => {
|
|
20
|
+
!l.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = a(), e.value = new H(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
|
-
},
|
|
28
|
+
}, G = /([^[.\]])+/g, V = (a, t) => {
|
|
29
29
|
if (!t)
|
|
30
30
|
return;
|
|
31
|
-
const e = Array.isArray(t) ? t : t.match(
|
|
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
|
-
},
|
|
34
|
-
const n = Array.isArray(t) ? t : t.match(
|
|
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
|
-
},
|
|
36
|
+
}, L = (a, t) => {
|
|
37
37
|
const e = { ...a };
|
|
38
38
|
return t.forEach((n) => delete e[n]), e;
|
|
39
|
-
},
|
|
39
|
+
}, $ = (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
|
-
|
|
46
|
+
T(t.value, e, V(r, e)), (s = r.dispose) == null || s.call(r);
|
|
47
47
|
} else
|
|
48
|
-
|
|
48
|
+
T(t.value, e, a());
|
|
49
49
|
},
|
|
50
50
|
o
|
|
51
|
-
), E = (a, t, e) => a.map(([n, o]) =>
|
|
51
|
+
), E = (a, t, e) => a.map(([n, o]) => $(
|
|
52
52
|
n,
|
|
53
53
|
t,
|
|
54
54
|
o,
|
|
55
55
|
e
|
|
56
|
-
)),
|
|
56
|
+
)), B = (a, t, e) => Object.keys(a).map((n) => $(
|
|
57
57
|
() => a[n],
|
|
58
58
|
t,
|
|
59
59
|
n,
|
|
60
60
|
e
|
|
61
|
-
)),
|
|
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 } =
|
|
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
|
|
82
|
+
() => new y()
|
|
83
83
|
), (l, s) => null;
|
|
84
84
|
}
|
|
85
|
-
}),
|
|
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 } =
|
|
102
|
-
return t({ pass: n, effect: o }),
|
|
101
|
+
const e = a, { pass: n, effect: o } = p(() => new S(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 ?
|
|
106
|
-
const s = new
|
|
105
|
+
return e.active === !1 ? I.DISABLED : e.mode;
|
|
106
|
+
const s = new S(), r = s.mode;
|
|
107
107
|
return s.dispose(), r;
|
|
108
108
|
};
|
|
109
109
|
o.value && (o.value.mode = l());
|
|
110
|
-
}),
|
|
111
|
-
|
|
110
|
+
}), B(
|
|
111
|
+
L(e, ["active", "mode", "blendFunction"]),
|
|
112
112
|
o,
|
|
113
|
-
() => new
|
|
113
|
+
() => new S()
|
|
114
114
|
), (l, s) => null;
|
|
115
115
|
}
|
|
116
|
-
}),
|
|
116
|
+
}), ae = /* @__PURE__ */ f({
|
|
117
117
|
__name: "Outline",
|
|
118
118
|
props: {
|
|
119
119
|
outlinedObjects: {},
|
|
@@ -133,7 +133,7 @@ const A = Symbol(), v = (a) => {
|
|
|
133
133
|
visibleEdgeColor: {}
|
|
134
134
|
},
|
|
135
135
|
setup(a, { expose: t }) {
|
|
136
|
-
const e = a, n = (c) => c !== void 0 ? C(c).getHex() : void 0, { camera: o, scene: l } =
|
|
136
|
+
const e = a, n = (c) => c !== void 0 ? C(c).getHex() : void 0, { camera: o, scene: l } = b(), s = {
|
|
137
137
|
blur: e.blur,
|
|
138
138
|
xRay: e.xRay,
|
|
139
139
|
kernelSize: e.kernelSize,
|
|
@@ -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 } =
|
|
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 =
|
|
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
|
|
188
|
-
), (c,
|
|
187
|
+
() => new P()
|
|
188
|
+
), (c, x) => null;
|
|
189
189
|
}
|
|
190
|
-
}),
|
|
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 } =
|
|
197
|
-
return t({ pass: n, effect: o }),
|
|
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
|
|
200
|
+
() => new F()
|
|
201
201
|
), (l, s) => null;
|
|
202
202
|
}
|
|
203
|
-
}),
|
|
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 } =
|
|
217
|
+
const e = a, { camera: n } = b(), { 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
|
|
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: U.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
|
+
L(e, ["blendFunction"]),
|
|
244
|
+
o,
|
|
245
|
+
() => new O()
|
|
246
|
+
), (l, s) => null;
|
|
247
|
+
}
|
|
234
248
|
});
|
|
235
|
-
let
|
|
236
|
-
function
|
|
249
|
+
let m;
|
|
250
|
+
function k() {
|
|
237
251
|
var a;
|
|
238
|
-
if (
|
|
239
|
-
return
|
|
252
|
+
if (m !== void 0)
|
|
253
|
+
return m;
|
|
240
254
|
try {
|
|
241
255
|
let t;
|
|
242
256
|
const e = document.createElement("canvas");
|
|
243
|
-
return
|
|
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
|
|
259
|
+
return m = !1;
|
|
246
260
|
}
|
|
247
261
|
}
|
|
248
|
-
const
|
|
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:
|
|
273
|
+
frameBufferType: { default: D }
|
|
260
274
|
},
|
|
261
275
|
setup(a) {
|
|
262
|
-
const t = a, { scene: e, camera: n, renderer: o, sizes: l } =
|
|
276
|
+
const t = a, { scene: e, camera: n, renderer: o, sizes: l } = b(), s = _(null);
|
|
263
277
|
let r = null, i = null;
|
|
264
|
-
|
|
278
|
+
X(N, s);
|
|
265
279
|
const d = () => {
|
|
266
|
-
s.value && (i = new
|
|
280
|
+
s.value && (i = new q(e.value, n.value), i.enabled = !1, s.value.addPass(i), t.resolutionScale !== void 0 && k() && (r = new J({
|
|
267
281
|
normalBuffer: i.texture,
|
|
268
282
|
resolutionScale: t.resolutionScale
|
|
269
283
|
}), r.enabled = !1, s.value.addPass(r)));
|
|
270
284
|
};
|
|
271
|
-
|
|
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 =
|
|
275
|
-
const u = new
|
|
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:
|
|
279
|
-
frameBufferType: t.frameBufferType !== void 0 ? t.frameBufferType :
|
|
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
|
-
}),
|
|
283
|
-
!o.value && !e.value && !n.value || (s.value = new
|
|
296
|
+
}), x = () => {
|
|
297
|
+
!o.value && !e.value && !n.value || (s.value = new z(o.value, c.value), s.value.addPass(new K(e.value, n.value)), t.disableNormalPass || d());
|
|
284
298
|
};
|
|
285
299
|
let h = () => {
|
|
286
300
|
};
|
|
287
|
-
h =
|
|
288
|
-
!l.height.value && !l.width.value || (
|
|
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 } =
|
|
306
|
+
const { onLoop: W } = Q();
|
|
293
307
|
return W(({ 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
|
-
}),
|
|
312
|
+
}), A(() => {
|
|
299
313
|
var u;
|
|
300
314
|
(u = s.value) == null || u.dispose();
|
|
301
|
-
}), (u, g) =>
|
|
315
|
+
}), (u, g) => Y(u.$slots, "default");
|
|
302
316
|
}
|
|
303
317
|
});
|
|
304
318
|
export {
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
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.
|
|
3
|
+
* version: v0.6.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(
|
|
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,b){"use strict";const _=Symbol(),v=a=>{const t=i.inject(_),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,R=(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)},x=(a,t)=>{const e={...a};return t.forEach(n=>delete e[n]),e},P=(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,R(c,e)),(r=c.dispose)==null||r.call(c)}else y(t.value,e,a())},l),E=(a,t,e)=>a.map(([n,l])=>P(n,t,l,e)),S=(a,t,e)=>Object.keys(a).map(n=>P(()=>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(x(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,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}),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(x(e,["blendFunction"]),l,()=>new u.NoiseEffect),(o,r)=>null}});let C;function F(){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:b.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(_,r);const h=()=>{r.value&&(f=new u.NormalPass(e.value,n.value),f.enabled=!1,r.value.addPass(f),t.resolutionScale!==void 0&&F()&&(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:F()?0:t.multisampling!==void 0?t.multisampling:d.multisampling,frameBufferType:t.frameBufferType!==void 0?t.frameBufferType:b.HalfFloatType};return d.dispose(),g}),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 w=()=>{};w=i.watch([o.height,o.width],()=>{!o.height.value&&!o.width.value||(i.watchEffect(T),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,16 +1,20 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/post-processing",
|
|
3
|
-
"description": "Post-processing library for TresJS",
|
|
4
|
-
"version": "0.5.0",
|
|
5
3
|
"type": "module",
|
|
4
|
+
"version": "0.6.0",
|
|
5
|
+
"packageManager": "pnpm@8.10.2",
|
|
6
|
+
"description": "Post-processing library for TresJS",
|
|
6
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
7
|
-
"files": [
|
|
8
|
-
"dist",
|
|
9
|
-
"*.d.ts"
|
|
10
|
-
],
|
|
11
8
|
"license": "MIT",
|
|
12
|
-
"
|
|
13
|
-
|
|
9
|
+
"keywords": [
|
|
10
|
+
"vue",
|
|
11
|
+
"3d",
|
|
12
|
+
"threejs",
|
|
13
|
+
"three",
|
|
14
|
+
"post-processing",
|
|
15
|
+
"effects",
|
|
16
|
+
"fx"
|
|
17
|
+
],
|
|
14
18
|
"exports": {
|
|
15
19
|
".": {
|
|
16
20
|
"types": "./dist/index.d.ts",
|
|
@@ -18,20 +22,17 @@
|
|
|
18
22
|
},
|
|
19
23
|
"./*": "./*"
|
|
20
24
|
},
|
|
25
|
+
"main": "./dist/tres-postprocessing.js",
|
|
26
|
+
"module": "./dist/tres-postprocessing.js",
|
|
27
|
+
"files": [
|
|
28
|
+
"dist",
|
|
29
|
+
"*.d.ts"
|
|
30
|
+
],
|
|
21
31
|
"publishConfig": {
|
|
22
32
|
"access": "public"
|
|
23
33
|
},
|
|
24
|
-
"keywords": [
|
|
25
|
-
"vue",
|
|
26
|
-
"3d",
|
|
27
|
-
"threejs",
|
|
28
|
-
"three",
|
|
29
|
-
"post-processing",
|
|
30
|
-
"effects",
|
|
31
|
-
"fx"
|
|
32
|
-
],
|
|
33
34
|
"scripts": {
|
|
34
|
-
"dev": "
|
|
35
|
+
"dev": "cd playground && npm run dev",
|
|
35
36
|
"playground": "cd playground && npm run dev",
|
|
36
37
|
"build": "vite build",
|
|
37
38
|
"preview": "vite preview",
|
|
@@ -47,33 +48,33 @@
|
|
|
47
48
|
"vue": ">=3.3"
|
|
48
49
|
},
|
|
49
50
|
"dependencies": {
|
|
50
|
-
"@tresjs/core": "^3.
|
|
51
|
-
"@unocss/core": "^0.57.
|
|
52
|
-
"@vueuse/core": "^10.
|
|
53
|
-
"postprocessing": "^6.33.
|
|
54
|
-
"three-stdlib": "^2.28.
|
|
51
|
+
"@tresjs/core": "^3.5.0",
|
|
52
|
+
"@unocss/core": "^0.57.3",
|
|
53
|
+
"@vueuse/core": "^10.6.1",
|
|
54
|
+
"postprocessing": "^6.33.3",
|
|
55
|
+
"three-stdlib": "^2.28.5"
|
|
55
56
|
},
|
|
56
57
|
"devDependencies": {
|
|
57
|
-
"@release-it/conventional-changelog": "^
|
|
58
|
+
"@release-it/conventional-changelog": "^8.0.1",
|
|
58
59
|
"@tresjs/eslint-config-vue": "^0.2.1",
|
|
59
|
-
"@types/three": "^0.
|
|
60
|
-
"@vitejs/plugin-vue": "^4.4.
|
|
60
|
+
"@types/three": "^0.158.2",
|
|
61
|
+
"@vitejs/plugin-vue": "^4.4.1",
|
|
61
62
|
"gsap": "^3.12.2",
|
|
62
63
|
"kolorist": "^1.8.0",
|
|
63
64
|
"pathe": "^1.1.1",
|
|
64
|
-
"prettier": "^3.0
|
|
65
|
-
"release-it": "^
|
|
65
|
+
"prettier": "^3.1.0",
|
|
66
|
+
"release-it": "^17.0.0",
|
|
66
67
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
67
68
|
"rollup-plugin-visualizer": "^5.9.2",
|
|
68
69
|
"three": "^0.158.0",
|
|
69
70
|
"typescript": "^5.2.2",
|
|
70
|
-
"unocss": "^0.57.
|
|
71
|
+
"unocss": "^0.57.3",
|
|
71
72
|
"vite": "^4.5.0",
|
|
72
73
|
"vite-plugin-banner": "^0.7.1",
|
|
73
|
-
"vite-plugin-dts": "3.6.
|
|
74
|
+
"vite-plugin-dts": "3.6.3",
|
|
74
75
|
"vite-svg-loader": "^4.0.0",
|
|
75
|
-
"vitepress": "1.0.0-rc.
|
|
76
|
-
"vue": "^3.3.
|
|
76
|
+
"vitepress": "1.0.0-rc.25",
|
|
77
|
+
"vue": "^3.3.8",
|
|
77
78
|
"vue-tsc": "^1.8.22"
|
|
78
79
|
}
|
|
79
80
|
}
|