@tresjs/post-processing 0.7.0 → 0.7.1
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.
- package/README.md +3 -4
- package/dist/core/EffectComposer.vue.d.ts +5 -1
- package/dist/core/effects/Bloom.vue.d.ts +1 -1
- package/dist/core/effects/DepthOfField.vue.d.ts +1 -1
- package/dist/core/effects/Glitch.vue.d.ts +1 -1
- package/dist/core/effects/Noise.vue.d.ts +1 -1
- package/dist/core/effects/Outline.vue.d.ts +1 -1
- package/dist/core/effects/Pixelation.vue.d.ts +1 -1
- package/dist/core/effects/Vignette.vue.d.ts +1 -1
- package/dist/tres-postprocessing.js +106 -106
- package/dist/tres-postprocessing.umd.cjs +3 -3
- package/package.json +19 -19
- package/dist/core/composables/effect.d.ts +0 -6
package/README.md
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|

|
|
2
2
|
|
|
3
3
|
<p align="center">
|
|
4
|
-
<a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/post-processing?color
|
|
5
|
-
|
|
6
|
-
<a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
|
|
7
|
-
|
|
4
|
+
<a href="https://www.npmjs.com/package/@tresjs/core"><img src="https://img.shields.io/npm/v/@tresjs/post-processing?color=FF7BAC" alt="npm package"></a>
|
|
5
|
+
<a href="https://www.npmjs.com/package/@tresjs/post-processing"><img src="https://img.shields.io/npm/dm/@tresjs/post-processing?color=FF7BAC" alt="npm downloads"></a>
|
|
6
|
+
<a href="https://discord.gg/UCr96AQmWn"><img src="https://img.shields.io/badge/chat-discord-purple?style=flat&logo=discord" alt="discord chat"></a>
|
|
8
7
|
</p>
|
|
9
8
|
<br/>
|
|
10
9
|
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { TresObject } from '@tresjs/core';
|
|
2
|
+
import { EffectComposer as EffectComposerImpl } from 'postprocessing';
|
|
3
|
+
import type { ShallowRef } from 'vue';
|
|
2
4
|
export interface EffectComposerProps {
|
|
3
5
|
enabled?: boolean;
|
|
4
6
|
children?: TresObject[];
|
|
@@ -18,7 +20,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
|
|
|
18
20
|
depthBuffer: undefined;
|
|
19
21
|
multisampling: number;
|
|
20
22
|
stencilBuffer: undefined;
|
|
21
|
-
}>, {
|
|
23
|
+
}>, {
|
|
24
|
+
composer: ShallowRef<EffectComposerImpl | null>;
|
|
25
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<EffectComposerProps>, {
|
|
22
26
|
enabled: boolean;
|
|
23
27
|
autoClear: boolean;
|
|
24
28
|
frameBufferType: 1016;
|
|
@@ -58,7 +58,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
58
58
|
}>, {
|
|
59
59
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
60
60
|
effect: import("vue").ShallowRef<BloomEffect | null>;
|
|
61
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
61
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<BloomProps>, {
|
|
62
62
|
mipmapBlur: undefined;
|
|
63
63
|
}>>>, {
|
|
64
64
|
mipmapBlur: boolean;
|
|
@@ -32,7 +32,7 @@ export interface DepthOfFieldProps {
|
|
|
32
32
|
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>, {
|
|
33
33
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
34
34
|
effect: import("vue").ShallowRef<DepthOfFieldEffect | null>;
|
|
35
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
35
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<DepthOfFieldProps>>>, {}, {}>;
|
|
36
36
|
export default _default;
|
|
37
37
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
38
38
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
@@ -92,7 +92,7 @@ export interface GlitchProps {
|
|
|
92
92
|
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<GlitchProps>, {
|
|
93
93
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
94
94
|
effect: import("vue").ShallowRef<GlitchEffect | null>;
|
|
95
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
95
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<GlitchProps>>>, {}, {}>;
|
|
96
96
|
export default _default;
|
|
97
97
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
98
98
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
12
12
|
}>, {
|
|
13
13
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
14
14
|
effect: import("vue").ShallowRef<NoiseEffect | null>;
|
|
15
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
15
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<NoiseProps>, {
|
|
16
16
|
premultiply: boolean;
|
|
17
17
|
blendFunction: BlendFunction;
|
|
18
18
|
}>>>, {
|
|
@@ -43,7 +43,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
43
43
|
}>, {
|
|
44
44
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
45
45
|
effect: import("vue").ShallowRef<OutlineEffect | null>;
|
|
46
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
46
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<OutlineProps>, {
|
|
47
47
|
blur: undefined;
|
|
48
48
|
xRay: undefined;
|
|
49
49
|
}>>>, {
|
|
@@ -8,7 +8,7 @@ export interface PixelationProps {
|
|
|
8
8
|
declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<PixelationProps>, {
|
|
9
9
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
10
10
|
effect: import("vue").ShallowRef<PixelationEffect | null>;
|
|
11
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
11
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<PixelationProps>>>, {}, {}>;
|
|
12
12
|
export default _default;
|
|
13
13
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
14
14
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
@@ -16,7 +16,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
|
|
|
16
16
|
}>, {
|
|
17
17
|
pass: import("vue").ShallowRef<import("postprocessing").EffectPass | null>;
|
|
18
18
|
effect: import("vue").ShallowRef<VignetteEffect | null>;
|
|
19
|
-
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").
|
|
19
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VignetteProps>, {
|
|
20
20
|
technique: VignetteTechnique;
|
|
21
21
|
blendFunction: BlendFunction;
|
|
22
22
|
offset: number;
|
|
@@ -1,64 +1,64 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/post-processing
|
|
3
|
-
* version: v0.7.
|
|
4
|
-
* (c)
|
|
3
|
+
* version: v0.7.1
|
|
4
|
+
* (c) 2024
|
|
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 h, useRenderLoop as
|
|
11
|
-
import { HalfFloatType as
|
|
12
|
-
const
|
|
13
|
-
const t =
|
|
14
|
-
|
|
8
|
+
import { inject as Y, shallowRef as C, watchEffect as w, onUnmounted as N, watch as g, defineComponent as d, provide as V, computed as L, renderSlot as U } from "vue";
|
|
9
|
+
import { EffectPass as q, BloomEffect as F, DepthOfFieldEffect as P, EffectComposer as R, RenderPass as H, NormalPass as I, DepthDownsamplingPass as K, GlitchEffect as b, GlitchMode as J, OutlineEffect as O, PixelationEffect as D, VignetteTechnique as Q, BlendFunction as $, VignetteEffect as T, NoiseEffect as z } from "postprocessing";
|
|
10
|
+
import { useTresContext as h, useRenderLoop as Z, normalizeColor as S } from "@tresjs/core";
|
|
11
|
+
import { HalfFloatType as k } from "three";
|
|
12
|
+
const G = Symbol(), m = (l) => {
|
|
13
|
+
const t = Y(G), e = C(null), n = C(null), { scene: o, camera: a } = h();
|
|
14
|
+
w(() => {
|
|
15
15
|
!a.value || !(n != null && n.value) || (n.value.mainCamera = a.value);
|
|
16
16
|
});
|
|
17
17
|
let s = () => {
|
|
18
18
|
};
|
|
19
|
-
return s =
|
|
20
|
-
!a.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = l(), e.value = new
|
|
21
|
-
}),
|
|
22
|
-
var r, i,
|
|
23
|
-
e.value && ((r = t == null ? void 0 : t.value) == null || r.removePass(e.value)), (i = n.value) == null || i.dispose(), (
|
|
19
|
+
return s = w(() => {
|
|
20
|
+
!a.value || !(t != null && t.value) || !o.value || (s(), !n.value && (n.value = l(), e.value = new q(a.value, n.value), t.value.addPass(e.value)));
|
|
21
|
+
}), N(() => {
|
|
22
|
+
var r, i, c;
|
|
23
|
+
e.value && ((r = t == null ? void 0 : t.value) == null || r.removePass(e.value)), (i = n.value) == null || i.dispose(), (c = e.value) == null || c.dispose();
|
|
24
24
|
}), {
|
|
25
25
|
pass: e,
|
|
26
26
|
effect: n
|
|
27
27
|
};
|
|
28
|
-
},
|
|
28
|
+
}, W = /([^[.\]])+/g, ee = (l, 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(W);
|
|
32
32
|
return e == null ? void 0 : e.reduce((n, o) => n && n[o], l);
|
|
33
|
-
},
|
|
34
|
-
const n = Array.isArray(t) ? t : t.match(
|
|
33
|
+
}, A = (l, t, e) => {
|
|
34
|
+
const n = Array.isArray(t) ? t : t.match(W);
|
|
35
35
|
n && n.reduce((o, a, s) => (o[a] === void 0 && (o[a] = {}), s === n.length - 1 && (o[a] = e), o[a]), l);
|
|
36
|
-
},
|
|
36
|
+
}, E = (l, t) => {
|
|
37
37
|
const e = { ...l };
|
|
38
38
|
return t.forEach((n) => delete e[n]), e;
|
|
39
|
-
},
|
|
39
|
+
}, j = (l, t, e, n, o = {}) => g(
|
|
40
40
|
l,
|
|
41
41
|
(a) => {
|
|
42
42
|
var s;
|
|
43
43
|
if (t.value)
|
|
44
44
|
if (a === void 0) {
|
|
45
45
|
const r = n();
|
|
46
|
-
|
|
46
|
+
A(t.value, e, ee(r, e)), (s = r.dispose) == null || s.call(r);
|
|
47
47
|
} else
|
|
48
|
-
|
|
48
|
+
A(t.value, e, l());
|
|
49
49
|
},
|
|
50
50
|
o
|
|
51
|
-
),
|
|
51
|
+
), x = (l, t, e) => l.map(([n, o]) => j(
|
|
52
52
|
n,
|
|
53
53
|
t,
|
|
54
54
|
o,
|
|
55
55
|
e
|
|
56
|
-
)), _ = (l, t, e) => Object.keys(l).map((n) =>
|
|
56
|
+
)), _ = (l, t, e) => Object.keys(l).map((n) => j(
|
|
57
57
|
() => l[n],
|
|
58
58
|
t,
|
|
59
59
|
n,
|
|
60
60
|
e
|
|
61
|
-
)),
|
|
61
|
+
)), ae = /* @__PURE__ */ d({
|
|
62
62
|
__name: "Bloom",
|
|
63
63
|
props: {
|
|
64
64
|
blendFunction: {},
|
|
@@ -69,8 +69,8 @@ const $ = Symbol(), m = (l) => {
|
|
|
69
69
|
mipmapBlur: { type: Boolean, default: void 0 }
|
|
70
70
|
},
|
|
71
71
|
setup(l, { expose: t }) {
|
|
72
|
-
const e = l, { pass: n, effect: o } = m(() => new
|
|
73
|
-
return t({ pass: n, effect: o }),
|
|
72
|
+
const e = l, { pass: n, effect: o } = m(() => new F(e));
|
|
73
|
+
return t({ pass: n, effect: o }), x(
|
|
74
74
|
[
|
|
75
75
|
// blendFunction is not updated, because it has no setter in BloomEffect
|
|
76
76
|
[() => e.intensity, "intensity"],
|
|
@@ -79,10 +79,10 @@ const $ = Symbol(), m = (l) => {
|
|
|
79
79
|
[() => e.luminanceThreshold, "luminanceMaterial.threshold"]
|
|
80
80
|
],
|
|
81
81
|
o,
|
|
82
|
-
() => new
|
|
82
|
+
() => new F()
|
|
83
83
|
), (a, s) => null;
|
|
84
84
|
}
|
|
85
|
-
}),
|
|
85
|
+
}), se = /* @__PURE__ */ d({
|
|
86
86
|
__name: "DepthOfField",
|
|
87
87
|
props: {
|
|
88
88
|
blendFunction: {},
|
|
@@ -96,8 +96,8 @@ const $ = Symbol(), m = (l) => {
|
|
|
96
96
|
resolutionY: {}
|
|
97
97
|
},
|
|
98
98
|
setup(l, { expose: t }) {
|
|
99
|
-
const e = l, { camera: n } = h(), { pass: o, effect: a } = m(() => new
|
|
100
|
-
return t({ pass: o, effect: a }),
|
|
99
|
+
const e = l, { camera: n } = h(), { pass: o, effect: a } = m(() => new P(n.value, e));
|
|
100
|
+
return t({ pass: o, effect: a }), x(
|
|
101
101
|
[
|
|
102
102
|
// blendFunction is not updated, because it has no setter in BloomEffect
|
|
103
103
|
[() => e.worldFocusDistance, "circleOfConfusionMaterial.worldFocusDistance"],
|
|
@@ -110,12 +110,12 @@ const $ = Symbol(), m = (l) => {
|
|
|
110
110
|
[() => e.resolutionY, "resolution.height"]
|
|
111
111
|
],
|
|
112
112
|
a,
|
|
113
|
-
() => new
|
|
113
|
+
() => new P()
|
|
114
114
|
), (s, r) => null;
|
|
115
115
|
}
|
|
116
116
|
});
|
|
117
117
|
let v;
|
|
118
|
-
function
|
|
118
|
+
function M() {
|
|
119
119
|
var l;
|
|
120
120
|
if (v !== void 0)
|
|
121
121
|
return v;
|
|
@@ -127,7 +127,7 @@ function A() {
|
|
|
127
127
|
return v = !1;
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
|
-
const
|
|
130
|
+
const re = /* @__PURE__ */ d({
|
|
131
131
|
__name: "EffectComposer",
|
|
132
132
|
props: {
|
|
133
133
|
enabled: { type: Boolean, default: !0 },
|
|
@@ -138,47 +138,47 @@ const se = /* @__PURE__ */ f({
|
|
|
138
138
|
resolutionScale: {},
|
|
139
139
|
autoClear: { type: Boolean, default: !0 },
|
|
140
140
|
multisampling: { default: 0 },
|
|
141
|
-
frameBufferType: { default:
|
|
141
|
+
frameBufferType: { default: k }
|
|
142
142
|
},
|
|
143
|
-
setup(l) {
|
|
144
|
-
const
|
|
145
|
-
let
|
|
146
|
-
|
|
147
|
-
const
|
|
148
|
-
|
|
149
|
-
normalBuffer:
|
|
150
|
-
resolutionScale:
|
|
151
|
-
}),
|
|
152
|
-
},
|
|
153
|
-
const u = new
|
|
154
|
-
depthBuffer:
|
|
155
|
-
stencilBuffer:
|
|
156
|
-
multisampling:
|
|
157
|
-
frameBufferType:
|
|
143
|
+
setup(l, { expose: t }) {
|
|
144
|
+
const e = l, { scene: n, camera: o, renderer: a, sizes: s } = h(), r = C(null);
|
|
145
|
+
let i = null, c = null;
|
|
146
|
+
V(G, r), t({ composer: r });
|
|
147
|
+
const f = () => {
|
|
148
|
+
r.value && (c = new I(n.value, o.value), c.enabled = !1, r.value.addPass(c), e.resolutionScale !== void 0 && M() && (i = new K({
|
|
149
|
+
normalBuffer: c.texture,
|
|
150
|
+
resolutionScale: e.resolutionScale
|
|
151
|
+
}), i.enabled = !1, r.value.addPass(i)));
|
|
152
|
+
}, B = L(() => {
|
|
153
|
+
const u = new R(), p = {
|
|
154
|
+
depthBuffer: e.depthBuffer !== void 0 ? e.depthBuffer : u.inputBuffer.depthBuffer,
|
|
155
|
+
stencilBuffer: e.stencilBuffer !== void 0 ? e.stencilBuffer : u.inputBuffer.stencilBuffer,
|
|
156
|
+
multisampling: M() ? e.multisampling !== void 0 ? e.multisampling : u.multisampling : 0,
|
|
157
|
+
frameBufferType: e.frameBufferType !== void 0 ? e.frameBufferType : k
|
|
158
158
|
};
|
|
159
159
|
return u.dispose(), p;
|
|
160
|
-
}),
|
|
161
|
-
!
|
|
160
|
+
}), y = () => {
|
|
161
|
+
!a.value && !n.value && !o.value || (r.value = new R(a.value, B.value), r.value.addPass(new H(n.value, o.value)), e.disableNormalPass || f());
|
|
162
162
|
};
|
|
163
|
-
g([
|
|
164
|
-
!
|
|
165
|
-
}), g(() => [
|
|
166
|
-
!u && !p || (
|
|
163
|
+
g([a, n, o, () => e.disableNormalPass], () => {
|
|
164
|
+
!s.width.value || !s.height.value || y();
|
|
165
|
+
}), g(() => [s.width.value, s.height.value], ([u, p]) => {
|
|
166
|
+
!u && !p || (r.value ? r.value.setSize(u, p) : y());
|
|
167
167
|
}, {
|
|
168
168
|
immediate: !0
|
|
169
169
|
});
|
|
170
|
-
const { onLoop:
|
|
171
|
-
return
|
|
172
|
-
if (
|
|
173
|
-
const p =
|
|
174
|
-
|
|
170
|
+
const { onLoop: X } = Z();
|
|
171
|
+
return X(({ delta: u }) => {
|
|
172
|
+
if (e.enabled && a.value && r.value && s.width.value && s.height.value) {
|
|
173
|
+
const p = a.value.autoClear;
|
|
174
|
+
a.value.autoClear = e.autoClear, e.stencilBuffer && !e.autoClear && a.value.clearStencil(), r.value.render(u), a.value.autoClear = p;
|
|
175
175
|
}
|
|
176
|
-
}),
|
|
176
|
+
}), N(() => {
|
|
177
177
|
var u;
|
|
178
|
-
(u =
|
|
179
|
-
}), (u, p) =>
|
|
178
|
+
(u = r.value) == null || u.dispose();
|
|
179
|
+
}), (u, p) => U(u.$slots, "default");
|
|
180
180
|
}
|
|
181
|
-
}),
|
|
181
|
+
}), ue = /* @__PURE__ */ d({
|
|
182
182
|
__name: "Glitch",
|
|
183
183
|
props: {
|
|
184
184
|
blendFunction: {},
|
|
@@ -194,22 +194,22 @@ const se = /* @__PURE__ */ f({
|
|
|
194
194
|
dtSize: {}
|
|
195
195
|
},
|
|
196
196
|
setup(l, { expose: t }) {
|
|
197
|
-
const e = l, { pass: n, effect: o } = m(() => new
|
|
198
|
-
return t({ pass: n, effect: o }),
|
|
197
|
+
const e = l, { pass: n, effect: o } = m(() => new b(e));
|
|
198
|
+
return t({ pass: n, effect: o }), w(() => {
|
|
199
199
|
const a = () => {
|
|
200
200
|
if (e.mode !== void 0)
|
|
201
|
-
return e.active === !1 ?
|
|
202
|
-
const s = new
|
|
201
|
+
return e.active === !1 ? J.DISABLED : e.mode;
|
|
202
|
+
const s = new b(), r = s.mode;
|
|
203
203
|
return s.dispose(), r;
|
|
204
204
|
};
|
|
205
205
|
o.value && (o.value.mode = a());
|
|
206
206
|
}), _(
|
|
207
|
-
|
|
207
|
+
E(e, ["active", "mode", "blendFunction"]),
|
|
208
208
|
o,
|
|
209
|
-
() => new
|
|
209
|
+
() => new b()
|
|
210
210
|
), (a, s) => null;
|
|
211
211
|
}
|
|
212
|
-
}),
|
|
212
|
+
}), ie = /* @__PURE__ */ d({
|
|
213
213
|
__name: "Outline",
|
|
214
214
|
props: {
|
|
215
215
|
outlinedObjects: {},
|
|
@@ -229,7 +229,7 @@ const se = /* @__PURE__ */ f({
|
|
|
229
229
|
visibleEdgeColor: {}
|
|
230
230
|
},
|
|
231
231
|
setup(l, { expose: t }) {
|
|
232
|
-
const e = l, n = (
|
|
232
|
+
const e = l, n = (f) => f !== void 0 ? S(f).getHex() : void 0, { camera: o, scene: a } = h(), s = {
|
|
233
233
|
blur: e.blur,
|
|
234
234
|
xRay: e.xRay,
|
|
235
235
|
kernelSize: e.kernelSize,
|
|
@@ -244,23 +244,23 @@ const se = /* @__PURE__ */ f({
|
|
|
244
244
|
resolutionScale: e.resolutionScale,
|
|
245
245
|
hiddenEdgeColor: n(e.hiddenEdgeColor),
|
|
246
246
|
visibleEdgeColor: n(e.visibleEdgeColor)
|
|
247
|
-
}, { pass: r, effect: i } = m(() => new
|
|
247
|
+
}, { pass: r, effect: i } = m(() => new O(a.value, o.value, s));
|
|
248
248
|
t({ pass: r, effect: i }), g(
|
|
249
249
|
[() => e.outlinedObjects, i],
|
|
250
250
|
// watchEffect is intentionally not used here as it would result in an endless loop
|
|
251
251
|
() => {
|
|
252
|
-
var
|
|
253
|
-
(
|
|
252
|
+
var f;
|
|
253
|
+
(f = i.value) == null || f.selection.set(e.outlinedObjects || []);
|
|
254
254
|
},
|
|
255
255
|
{
|
|
256
256
|
immediate: !0
|
|
257
257
|
}
|
|
258
258
|
);
|
|
259
|
-
const
|
|
260
|
-
hiddenEdgeColor: e.hiddenEdgeColor ?
|
|
261
|
-
visibleEdgeColor: e.visibleEdgeColor ?
|
|
259
|
+
const c = L(() => ({
|
|
260
|
+
hiddenEdgeColor: e.hiddenEdgeColor ? S(e.hiddenEdgeColor) : void 0,
|
|
261
|
+
visibleEdgeColor: e.visibleEdgeColor ? S(e.visibleEdgeColor) : void 0
|
|
262
262
|
}));
|
|
263
|
-
return
|
|
263
|
+
return x(
|
|
264
264
|
[
|
|
265
265
|
/* some properties are not updated because of different reasons:
|
|
266
266
|
resolutionX - has no setter in OutlineEffect
|
|
@@ -276,64 +276,64 @@ const se = /* @__PURE__ */ f({
|
|
|
276
276
|
[() => e.edgeStrength, "edgeStrength"],
|
|
277
277
|
[() => e.patternScale, "patternScale"],
|
|
278
278
|
[() => e.multisampling, "multisampling"],
|
|
279
|
-
[() =>
|
|
280
|
-
[() =>
|
|
279
|
+
[() => c.value.hiddenEdgeColor, "hiddenEdgeColor"],
|
|
280
|
+
[() => c.value.visibleEdgeColor, "visibleEdgeColor"]
|
|
281
281
|
],
|
|
282
282
|
i,
|
|
283
|
-
() => new
|
|
284
|
-
), (
|
|
283
|
+
() => new O()
|
|
284
|
+
), (f, B) => null;
|
|
285
285
|
}
|
|
286
|
-
}),
|
|
286
|
+
}), ce = /* @__PURE__ */ d({
|
|
287
287
|
__name: "Pixelation",
|
|
288
288
|
props: {
|
|
289
289
|
granularity: {}
|
|
290
290
|
},
|
|
291
291
|
setup(l, { expose: t }) {
|
|
292
|
-
const e = l, { pass: n, effect: o } = m(() => new
|
|
292
|
+
const e = l, { pass: n, effect: o } = m(() => new D(e.granularity));
|
|
293
293
|
return t({ pass: n, effect: o }), _(
|
|
294
294
|
e,
|
|
295
295
|
o,
|
|
296
|
-
() => new
|
|
296
|
+
() => new D()
|
|
297
297
|
), (a, s) => null;
|
|
298
298
|
}
|
|
299
|
-
}),
|
|
299
|
+
}), fe = /* @__PURE__ */ d({
|
|
300
300
|
__name: "Vignette",
|
|
301
301
|
props: {
|
|
302
|
-
technique: { default:
|
|
303
|
-
blendFunction: { default:
|
|
302
|
+
technique: { default: Q.DEFAULT },
|
|
303
|
+
blendFunction: { default: $.NORMAL },
|
|
304
304
|
offset: { default: 0.5 },
|
|
305
305
|
darkness: { default: 0.5 }
|
|
306
306
|
},
|
|
307
307
|
setup(l, { expose: t }) {
|
|
308
|
-
const e = l, { pass: n, effect: o } = m(() => new
|
|
308
|
+
const e = l, { pass: n, effect: o } = m(() => new T(e));
|
|
309
309
|
return t({ pass: n, effect: o }), _(
|
|
310
|
-
|
|
310
|
+
E(e, ["blendFunction"]),
|
|
311
311
|
o,
|
|
312
|
-
() => new
|
|
312
|
+
() => new T()
|
|
313
313
|
), (a, s) => null;
|
|
314
314
|
}
|
|
315
|
-
}),
|
|
315
|
+
}), de = /* @__PURE__ */ d({
|
|
316
316
|
__name: "Noise",
|
|
317
317
|
props: {
|
|
318
318
|
premultiply: { type: Boolean, default: !1 },
|
|
319
|
-
blendFunction: { default:
|
|
319
|
+
blendFunction: { default: $.SCREEN }
|
|
320
320
|
},
|
|
321
321
|
setup(l, { expose: t }) {
|
|
322
|
-
const e = l, { pass: n, effect: o } = m(() => new
|
|
322
|
+
const e = l, { pass: n, effect: o } = m(() => new z(e));
|
|
323
323
|
return t({ pass: n, effect: o }), _(
|
|
324
|
-
|
|
324
|
+
E(e, ["blendFunction"]),
|
|
325
325
|
o,
|
|
326
|
-
() => new
|
|
326
|
+
() => new z()
|
|
327
327
|
), (a, s) => null;
|
|
328
328
|
}
|
|
329
329
|
});
|
|
330
330
|
export {
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
331
|
+
ae as Bloom,
|
|
332
|
+
se as DepthOfField,
|
|
333
|
+
re as EffectComposer,
|
|
334
|
+
ue as Glitch,
|
|
335
|
+
de as Noise,
|
|
336
|
+
ie as Outline,
|
|
337
|
+
ce as Pixelation,
|
|
338
|
+
fe as Vignette
|
|
339
339
|
};
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* name: @tresjs/post-processing
|
|
3
|
-
* version: v0.7.
|
|
4
|
-
* (c)
|
|
3
|
+
* version: v0.7.1
|
|
4
|
+
* (c) 2024
|
|
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(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,r,p,S){"use strict";const g=Symbol(),v=o=>{const n=i.inject(g),e=i.shallowRef(null),t=i.shallowRef(null),{scene:l,camera:a}=p.useTresContext();i.watchEffect(()=>{!a.value||!(t!=null&&t.value)||(t.value.mainCamera=a.value)});let u=()=>{};return u=i.watchEffect(()=>{!a.value||!(n!=null&&n.value)||!l.value||(u(),!t.value&&(t.value=o(),e.value=new r.EffectPass(a.value,t.value),n.value.addPass(e.value)))}),i.onUnmounted(()=>{var s,d,m;e.value&&((s=n==null?void 0:n.value)==null||s.removePass(e.value)),(d=t.value)==null||d.dispose(),(m=e.value)==null||m.dispose()}),{pass:e,effect:t}},B=/([^[.\]])+/g,R=(o,n)=>{if(!n)return;const e=Array.isArray(n)?n:n.match(B);return e==null?void 0:e.reduce((t,l)=>t&&t[l],o)},x=(o,n,e)=>{const t=Array.isArray(n)?n:n.match(B);t&&t.reduce((l,a,u)=>(l[a]===void 0&&(l[a]={}),u===t.length-1&&(l[a]=e),l[a]),o)},w=(o,n)=>{const e={...o};return n.forEach(t=>delete e[t]),e},y=(o,n,e,t,l={})=>i.watch(o,a=>{var u;if(n.value)if(a===void 0){const s=t();x(n.value,e,R(s,e)),(u=s.dispose)==null||u.call(s)}else x(n.value,e,o())},l),b=(o,n,e)=>o.map(([t,l])=>y(t,n,l,e)),E=(o,n,e)=>Object.keys(o).map(t=>y(()=>o[t],n,t,e)),O=i.defineComponent({__name:"Bloom",props:{blendFunction:{},intensity:{},kernelSize:{},luminanceThreshold:{},luminanceSmoothing:{},mipmapBlur:{type:Boolean,default:void 0}},setup(o,{expose:n}){const e=o,{pass:t,effect:l}=v(()=>new r.BloomEffect(e));return n({pass:t,effect:l}),b([[()=>e.intensity,"intensity"],[()=>e.kernelSize,"kernelSize"],[()=>e.luminanceSmoothing,"luminanceMaterial.smoothing"],[()=>e.luminanceThreshold,"luminanceMaterial.threshold"]],l,()=>new r.BloomEffect),(a,u)=>null}}),z=i.defineComponent({__name:"DepthOfField",props:{blendFunction:{},worldFocusDistance:{},worldFocusRange:{},focusDistance:{},focusRange:{},bokehScale:{},resolutionScale:{},resolutionX:{},resolutionY:{}},setup(o,{expose:n}){const e=o,{camera:t}=p.useTresContext(),{pass:l,effect:a}=v(()=>new r.DepthOfFieldEffect(t.value,e));return n({pass:l,effect:a}),b([[()=>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 r.DepthOfFieldEffect),(u,s)=>null}});let _;function F(){var o;if(_!==void 0)return _;try{let n;const e=document.createElement("canvas");return _=!!(window.WebGL2RenderingContext&&(n=e.getContext("webgl2"))),n&&((o=n.getExtension("WEBGL_lose_context"))==null||o.loseContext()),_}catch{return _=!1}}const D=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:S.HalfFloatType}},setup(o,{expose:n}){const e=o,{scene:t,camera:l,renderer:a,sizes:u}=p.useTresContext(),s=i.shallowRef(null);let d=null,m=null;i.provide(g,s),n({composer:s});const h=()=>{s.value&&(m=new r.NormalPass(t.value,l.value),m.enabled=!1,s.value.addPass(m),e.resolutionScale!==void 0&&F()&&(d=new r.DepthDownsamplingPass({normalBuffer:m.texture,resolutionScale:e.resolutionScale}),d.enabled=!1,s.value.addPass(d)))},P=i.computed(()=>{const f=new r.EffectComposer,C={depthBuffer:e.depthBuffer!==void 0?e.depthBuffer:f.inputBuffer.depthBuffer,stencilBuffer:e.stencilBuffer!==void 0?e.stencilBuffer:f.inputBuffer.stencilBuffer,multisampling:F()?e.multisampling!==void 0?e.multisampling:f.multisampling:0,frameBufferType:e.frameBufferType!==void 0?e.frameBufferType:S.HalfFloatType};return f.dispose(),C}),T=()=>{!a.value&&!t.value&&!l.value||(s.value=new r.EffectComposer(a.value,P.value),s.value.addPass(new r.RenderPass(t.value,l.value)),e.disableNormalPass||h())};i.watch([a,t,l,()=>e.disableNormalPass],()=>{!u.width.value||!u.height.value||T()}),i.watch(()=>[u.width.value,u.height.value],([f,C])=>{!f&&!C||(s.value?s.value.setSize(f,C):T())},{immediate:!0});const{onLoop:G}=p.useRenderLoop();return G(({delta:f})=>{if(e.enabled&&a.value&&s.value&&u.width.value&&u.height.value){const C=a.value.autoClear;a.value.autoClear=e.autoClear,e.stencilBuffer&&!e.autoClear&&a.value.clearStencil(),s.value.render(f),a.value.autoClear=C}}),i.onUnmounted(()=>{var f;(f=s.value)==null||f.dispose()}),(f,C)=>i.renderSlot(f.$slots,"default")}}),k=i.defineComponent({__name:"Glitch",props:{blendFunction:{},delay:{},duration:{},strength:{},mode:{},active:{type:Boolean},ratio:{},columns:{},chromaticAberrationOffset:{},perturbationMap:{},dtSize:{}},setup(o,{expose:n}){const e=o,{pass:t,effect:l}=v(()=>new r.GlitchEffect(e));return n({pass:t,effect:l}),i.watchEffect(()=>{const a=()=>{if(e.mode!==void 0)return e.active===!1?r.GlitchMode.DISABLED:e.mode;const u=new r.GlitchEffect,s=u.mode;return u.dispose(),s};l.value&&(l.value.mode=a())}),E(w(e,["active","mode","blendFunction"]),l,()=>new r.GlitchEffect),(a,u)=>null}}),A=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(o,{expose:n}){const e=o,t=h=>h!==void 0?p.normalizeColor(h).getHex():void 0,{camera:l,scene:a}=p.useTresContext(),u={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:s,effect:d}=v(()=>new r.OutlineEffect(a.value,l.value,u));n({pass:s,effect:d}),i.watch([()=>e.outlinedObjects,d],()=>{var h;(h=d.value)==null||h.selection.set(e.outlinedObjects||[])},{immediate:!0});const m=i.computed(()=>({hiddenEdgeColor:e.hiddenEdgeColor?p.normalizeColor(e.hiddenEdgeColor):void 0,visibleEdgeColor:e.visibleEdgeColor?p.normalizeColor(e.visibleEdgeColor):void 0}));return b([[()=>e.blur,"blur"],[()=>e.xRay,"xRay"],[()=>e.pulseSpeed,"pulseSpeed"],[()=>e.kernelSize,"kernelSize"],[()=>e.edgeStrength,"edgeStrength"],[()=>e.patternScale,"patternScale"],[()=>e.multisampling,"multisampling"],[()=>m.value.hiddenEdgeColor,"hiddenEdgeColor"],[()=>m.value.visibleEdgeColor,"visibleEdgeColor"]],d,()=>new r.OutlineEffect),(h,P)=>null}}),M=i.defineComponent({__name:"Pixelation",props:{granularity:{}},setup(o,{expose:n}){const e=o,{pass:t,effect:l}=v(()=>new r.PixelationEffect(e.granularity));return n({pass:t,effect:l}),E(e,l,()=>new r.PixelationEffect),(a,u)=>null}}),N=i.defineComponent({__name:"Vignette",props:{technique:{default:r.VignetteTechnique.DEFAULT},blendFunction:{default:r.BlendFunction.NORMAL},offset:{default:.5},darkness:{default:.5}},setup(o,{expose:n}){const e=o,{pass:t,effect:l}=v(()=>new r.VignetteEffect(e));return n({pass:t,effect:l}),E(w(e,["blendFunction"]),l,()=>new r.VignetteEffect),(a,u)=>null}}),j=i.defineComponent({__name:"Noise",props:{premultiply:{type:Boolean,default:!1},blendFunction:{default:r.BlendFunction.SCREEN}},setup(o,{expose:n}){const e=o,{pass:t,effect:l}=v(()=>new r.NoiseEffect(e));return n({pass:t,effect:l}),E(w(e,["blendFunction"]),l,()=>new r.NoiseEffect),(a,u)=>null}});c.Bloom=O,c.DepthOfField=z,c.EffectComposer=D,c.Glitch=k,c.Noise=j,c.Outline=A,c.Pixelation=M,c.Vignette=N,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tresjs/post-processing",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.7.
|
|
5
|
-
"packageManager": "pnpm@8.
|
|
4
|
+
"version": "0.7.1",
|
|
5
|
+
"packageManager": "pnpm@8.11.0",
|
|
6
6
|
"description": "Post-processing library for TresJS",
|
|
7
7
|
"author": "Alvaro Saburido <hola@alvarosaburido.dev> (https://github.com/alvarosabu/)",
|
|
8
8
|
"license": "MIT",
|
|
@@ -48,33 +48,33 @@
|
|
|
48
48
|
"vue": ">=3.3"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
|
-
"@tresjs/core": "^3.5.
|
|
52
|
-
"@unocss/core": "^0.
|
|
51
|
+
"@tresjs/core": "^3.5.1",
|
|
52
|
+
"@unocss/core": "^0.58.0",
|
|
53
53
|
"@vueuse/core": "^10.6.1",
|
|
54
|
-
"postprocessing": "^6.33.
|
|
55
|
-
"three-stdlib": "^2.28.
|
|
54
|
+
"postprocessing": "^6.33.4",
|
|
55
|
+
"three-stdlib": "^2.28.7"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@release-it/conventional-changelog": "^8.0.1",
|
|
59
59
|
"@tresjs/eslint-config-vue": "^0.2.1",
|
|
60
|
-
"@types/three": "^0.
|
|
61
|
-
"@vitejs/plugin-vue": "^4.
|
|
62
|
-
"gsap": "^3.12.
|
|
60
|
+
"@types/three": "^0.159.0",
|
|
61
|
+
"@vitejs/plugin-vue": "^4.5.1",
|
|
62
|
+
"gsap": "^3.12.3",
|
|
63
63
|
"kolorist": "^1.8.0",
|
|
64
64
|
"pathe": "^1.1.1",
|
|
65
65
|
"prettier": "^3.1.0",
|
|
66
66
|
"release-it": "^17.0.0",
|
|
67
67
|
"rollup-plugin-analyzer": "^4.0.0",
|
|
68
|
-
"rollup-plugin-visualizer": "^5.
|
|
69
|
-
"three": "^0.
|
|
70
|
-
"typescript": "^5.
|
|
71
|
-
"unocss": "^0.
|
|
72
|
-
"vite": "^
|
|
68
|
+
"rollup-plugin-visualizer": "^5.10.0",
|
|
69
|
+
"three": "^0.159.0",
|
|
70
|
+
"typescript": "^5.3.2",
|
|
71
|
+
"unocss": "^0.58.0",
|
|
72
|
+
"vite": "^5.0.4",
|
|
73
73
|
"vite-plugin-banner": "^0.7.1",
|
|
74
|
-
"vite-plugin-dts": "3.6.
|
|
75
|
-
"vite-svg-loader": "^
|
|
76
|
-
"vitepress": "1.0.0-rc.
|
|
77
|
-
"vue": "^3.3.
|
|
78
|
-
"vue-tsc": "^1.8.
|
|
74
|
+
"vite-plugin-dts": "3.6.4",
|
|
75
|
+
"vite-svg-loader": "^5.1.0",
|
|
76
|
+
"vitepress": "1.0.0-rc.31",
|
|
77
|
+
"vue": "^3.3.9",
|
|
78
|
+
"vue-tsc": "^1.8.24"
|
|
79
79
|
}
|
|
80
80
|
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import type { Effect } from 'postprocessing';
|
|
2
|
-
import { EffectPass } from 'postprocessing';
|
|
3
|
-
export declare const useEffect: <T extends Effect>(newEffectFunction: () => T) => {
|
|
4
|
-
pass: import("vue").ShallowRef<EffectPass | null>;
|
|
5
|
-
effect: import("vue").ShallowRef<T | null>;
|
|
6
|
-
};
|