@react-three/postprocessing 2.9.0 → 2.9.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/dist/effects/Pixelation.d.ts +2 -2
- package/dist/index.cjs +480 -678
- package/dist/index.js +391 -587
- package/package.json +2 -7
package/dist/index.cjs
CHANGED
|
@@ -1,743 +1,545 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var postprocessing = require('postprocessing');
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
7
|
-
var React$1 = require('react');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
8
6
|
var THREE = require('three');
|
|
9
7
|
var fiber = require('@react-three/fiber');
|
|
10
8
|
var threeStdlib = require('three-stdlib');
|
|
11
|
-
var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
|
|
12
9
|
var screenSpaceReflections = require('screen-space-reflections');
|
|
13
10
|
|
|
14
11
|
function _interopNamespaceDefault(e) {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
12
|
+
var n = Object.create(null);
|
|
13
|
+
if (e) {
|
|
14
|
+
Object.keys(e).forEach(function (k) {
|
|
15
|
+
if (k !== 'default') {
|
|
16
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
17
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () { return e[k]; }
|
|
20
|
+
});
|
|
21
|
+
}
|
|
23
22
|
});
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
n.default = e;
|
|
28
|
-
return Object.freeze(n);
|
|
23
|
+
}
|
|
24
|
+
n.default = e;
|
|
25
|
+
return Object.freeze(n);
|
|
29
26
|
}
|
|
30
27
|
|
|
31
28
|
var THREE__namespace = /*#__PURE__*/_interopNamespaceDefault(THREE);
|
|
32
29
|
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
var wrapEffect = function wrapEffect(effect, defaults) {
|
|
40
|
-
return /* @__PURE__ */React$1.forwardRef(function Effect(_ref, ref) {
|
|
41
|
-
var _ref$blendFunction = _ref.blendFunction,
|
|
42
|
-
blendFunction = _ref$blendFunction === void 0 ? defaults == null ? void 0 : defaults.blendFunction : _ref$blendFunction,
|
|
43
|
-
_ref$opacity = _ref.opacity,
|
|
44
|
-
opacity = _ref$opacity === void 0 ? defaults == null ? void 0 : defaults.opacity : _ref$opacity,
|
|
45
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
46
|
-
var Component = components.get(effect);
|
|
30
|
+
const resolveRef = (ref) => typeof ref === 'object' && ref != null && 'current' in ref ? ref.current : ref;
|
|
31
|
+
let i = 0;
|
|
32
|
+
const components = new WeakMap();
|
|
33
|
+
const wrapEffect = (effect, defaults) =>
|
|
34
|
+
/* @__PURE__ */ React.forwardRef(function Effect({ blendFunction = defaults === null || defaults === void 0 ? void 0 : defaults.blendFunction, opacity = defaults === null || defaults === void 0 ? void 0 : defaults.opacity, ...props }, ref) {
|
|
35
|
+
let Component = components.get(effect);
|
|
47
36
|
if (!Component) {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
components.set(effect, Component = key);
|
|
37
|
+
const key = `@react-three/postprocessing/${effect.name}-${i++}`;
|
|
38
|
+
fiber.extend({ [key]: effect });
|
|
39
|
+
components.set(effect, (Component = key));
|
|
52
40
|
}
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
});
|
|
56
|
-
var args = React$1.useMemo(function () {
|
|
57
|
-
var _defaults$args, _props$args;
|
|
58
|
-
return [].concat((_defaults$args = defaults == null ? void 0 : defaults.args) != null ? _defaults$args : [], (_props$args = props.args) != null ? _props$args : [_extends({}, defaults, props)]);
|
|
59
|
-
},
|
|
41
|
+
const camera = fiber.useThree((state) => state.camera);
|
|
42
|
+
const args = React.useMemo(() => { var _a, _b; return [...((_a = defaults === null || defaults === void 0 ? void 0 : defaults.args) !== null && _a !== void 0 ? _a : []), ...((_b = props.args) !== null && _b !== void 0 ? _b : [{ ...defaults, ...props }])]; },
|
|
60
43
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
61
44
|
[JSON.stringify(props)]);
|
|
62
|
-
return
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
return React$1.useMemo(function () {
|
|
75
|
-
if (typeof value === 'number') return new THREE__namespace.Vector2(value, value);else if (value) return _construct(THREE__namespace.Vector2, value);else return new THREE__namespace.Vector2();
|
|
76
|
-
}, [value]);
|
|
45
|
+
return (jsxRuntime.jsx(Component, { camera: camera, "blendMode-blendFunction": blendFunction, "blendMode-opacity": opacity, ...props, ref: ref, args: args }));
|
|
46
|
+
});
|
|
47
|
+
const useVector2 = (props, key) => {
|
|
48
|
+
const value = props[key];
|
|
49
|
+
return React.useMemo(() => {
|
|
50
|
+
if (typeof value === 'number')
|
|
51
|
+
return new THREE__namespace.Vector2(value, value);
|
|
52
|
+
else if (value)
|
|
53
|
+
return new THREE__namespace.Vector2(...value);
|
|
54
|
+
else
|
|
55
|
+
return new THREE__namespace.Vector2();
|
|
56
|
+
}, [value]);
|
|
77
57
|
};
|
|
78
58
|
|
|
79
|
-
|
|
80
|
-
blendFunction: postprocessing.BlendFunction.ADD
|
|
81
|
-
});
|
|
59
|
+
const Bloom = wrapEffect(postprocessing.BloomEffect, { blendFunction: postprocessing.BlendFunction.ADD });
|
|
82
60
|
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
var effect = React$1.useMemo(function () {
|
|
90
|
-
return new postprocessing.ChromaticAberrationEffect(_extends({}, props, {
|
|
91
|
-
offset: offset
|
|
92
|
-
}));
|
|
93
|
-
}, [offset, props]);
|
|
94
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
95
|
-
ref: ref,
|
|
96
|
-
object: effect,
|
|
97
|
-
dispose: null
|
|
98
|
-
});
|
|
61
|
+
const BrightnessContrast = wrapEffect(postprocessing.BrightnessContrastEffect);
|
|
62
|
+
|
|
63
|
+
const ChromaticAberration = React.forwardRef(function ChromaticAberration(props, ref) {
|
|
64
|
+
const offset = useVector2(props, 'offset');
|
|
65
|
+
const effect = React.useMemo(() => new postprocessing.ChromaticAberrationEffect({ ...props, offset }), [offset, props]);
|
|
66
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
99
67
|
});
|
|
100
68
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
var effect = React$1.useMemo(function () {
|
|
106
|
-
return new postprocessing.ColorAverageEffect(blendFunction);
|
|
107
|
-
}, [blendFunction]);
|
|
108
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
109
|
-
ref: ref,
|
|
110
|
-
object: effect,
|
|
111
|
-
dispose: null
|
|
112
|
-
});
|
|
69
|
+
const ColorAverage = React.forwardRef(function ColorAverage({ blendFunction = postprocessing.BlendFunction.NORMAL }, ref) {
|
|
70
|
+
/** Because ColorAverage blendFunction is not an object but a number, we have to define a custom prop "blendFunction" */
|
|
71
|
+
const effect = React.useMemo(() => new postprocessing.ColorAverageEffect(blendFunction), [blendFunction]);
|
|
72
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
113
73
|
});
|
|
114
74
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
// Initialize composer
|
|
148
|
-
var effectComposer = new postprocessing.EffectComposer(gl, {
|
|
149
|
-
depthBuffer: depthBuffer,
|
|
150
|
-
stencilBuffer: stencilBuffer,
|
|
151
|
-
multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
|
|
152
|
-
frameBufferType: frameBufferType
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
// Add render pass
|
|
156
|
-
effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
|
|
157
|
-
|
|
158
|
-
// Create normal pass
|
|
159
|
-
var downSamplingPass = null;
|
|
160
|
-
var normalPass = null;
|
|
161
|
-
if (!disableNormalPass) {
|
|
162
|
-
normalPass = new postprocessing.NormalPass(scene, camera);
|
|
163
|
-
normalPass.enabled = false;
|
|
164
|
-
effectComposer.addPass(normalPass);
|
|
165
|
-
if (resolutionScale !== undefined && webGL2Available) {
|
|
166
|
-
downSamplingPass = new postprocessing.DepthDownsamplingPass({
|
|
167
|
-
normalBuffer: normalPass.texture,
|
|
168
|
-
resolutionScale: resolutionScale
|
|
169
|
-
});
|
|
170
|
-
downSamplingPass.enabled = false;
|
|
171
|
-
effectComposer.addPass(downSamplingPass);
|
|
75
|
+
const ColorDepth = wrapEffect(postprocessing.ColorDepthEffect);
|
|
76
|
+
|
|
77
|
+
const Depth = wrapEffect(postprocessing.DepthEffect);
|
|
78
|
+
|
|
79
|
+
const EffectComposerContext = React.createContext(null);
|
|
80
|
+
const EffectComposer = React.memo(React.forwardRef(({ children, camera: _camera, scene: _scene, resolutionScale, enabled = true, renderPriority = 1, autoClear = true, depthBuffer, disableNormalPass, stencilBuffer, multisampling = 8, frameBufferType = THREE.HalfFloatType, }, ref) => {
|
|
81
|
+
const { gl, scene: defaultScene, camera: defaultCamera, size } = fiber.useThree();
|
|
82
|
+
const scene = _scene || defaultScene;
|
|
83
|
+
const camera = _camera || defaultCamera;
|
|
84
|
+
const [composer, normalPass, downSamplingPass] = React.useMemo(() => {
|
|
85
|
+
const webGL2Available = threeStdlib.isWebGL2Available();
|
|
86
|
+
// Initialize composer
|
|
87
|
+
const effectComposer = new postprocessing.EffectComposer(gl, {
|
|
88
|
+
depthBuffer,
|
|
89
|
+
stencilBuffer,
|
|
90
|
+
multisampling: multisampling > 0 && webGL2Available ? multisampling : 0,
|
|
91
|
+
frameBufferType,
|
|
92
|
+
});
|
|
93
|
+
// Add render pass
|
|
94
|
+
effectComposer.addPass(new postprocessing.RenderPass(scene, camera));
|
|
95
|
+
// Create normal pass
|
|
96
|
+
let downSamplingPass = null;
|
|
97
|
+
let normalPass = null;
|
|
98
|
+
if (!disableNormalPass) {
|
|
99
|
+
normalPass = new postprocessing.NormalPass(scene, camera);
|
|
100
|
+
normalPass.enabled = false;
|
|
101
|
+
effectComposer.addPass(normalPass);
|
|
102
|
+
if (resolutionScale !== undefined && webGL2Available) {
|
|
103
|
+
downSamplingPass = new postprocessing.DepthDownsamplingPass({ normalBuffer: normalPass.texture, resolutionScale });
|
|
104
|
+
downSamplingPass.enabled = false;
|
|
105
|
+
effectComposer.addPass(downSamplingPass);
|
|
106
|
+
}
|
|
172
107
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
};
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
React$1.useImperativeHandle(ref, function () {
|
|
220
|
-
return composer;
|
|
221
|
-
}, [composer]);
|
|
222
|
-
return /*#__PURE__*/React$1.createElement(EffectComposerContext.Provider, {
|
|
223
|
-
value: state
|
|
224
|
-
}, /*#__PURE__*/React$1.createElement("group", {
|
|
225
|
-
ref: group
|
|
226
|
-
}, children));
|
|
108
|
+
return [effectComposer, normalPass, downSamplingPass];
|
|
109
|
+
}, [
|
|
110
|
+
camera,
|
|
111
|
+
gl,
|
|
112
|
+
depthBuffer,
|
|
113
|
+
stencilBuffer,
|
|
114
|
+
multisampling,
|
|
115
|
+
frameBufferType,
|
|
116
|
+
scene,
|
|
117
|
+
disableNormalPass,
|
|
118
|
+
resolutionScale,
|
|
119
|
+
]);
|
|
120
|
+
React.useEffect(() => composer === null || composer === void 0 ? void 0 : composer.setSize(size.width, size.height), [composer, size]);
|
|
121
|
+
fiber.useFrame((_, delta) => {
|
|
122
|
+
if (enabled) {
|
|
123
|
+
gl.autoClear = autoClear;
|
|
124
|
+
composer.render(delta);
|
|
125
|
+
}
|
|
126
|
+
}, enabled ? renderPriority : 0);
|
|
127
|
+
const group = React.useRef(null);
|
|
128
|
+
const instance = fiber.useInstanceHandle(group);
|
|
129
|
+
React.useLayoutEffect(() => {
|
|
130
|
+
let effectPass;
|
|
131
|
+
if (group.current && instance.current && composer) {
|
|
132
|
+
effectPass = new postprocessing.EffectPass(camera, ...instance.current.objects);
|
|
133
|
+
effectPass.renderToScreen = true;
|
|
134
|
+
composer.addPass(effectPass);
|
|
135
|
+
if (normalPass)
|
|
136
|
+
normalPass.enabled = true;
|
|
137
|
+
if (downSamplingPass)
|
|
138
|
+
downSamplingPass.enabled = true;
|
|
139
|
+
}
|
|
140
|
+
return () => {
|
|
141
|
+
if (effectPass)
|
|
142
|
+
composer === null || composer === void 0 ? void 0 : composer.removePass(effectPass);
|
|
143
|
+
if (normalPass)
|
|
144
|
+
normalPass.enabled = false;
|
|
145
|
+
if (downSamplingPass)
|
|
146
|
+
downSamplingPass.enabled = false;
|
|
147
|
+
};
|
|
148
|
+
}, [composer, children, camera, normalPass, downSamplingPass, instance]);
|
|
149
|
+
// Memoize state, otherwise it would trigger all consumers on every render
|
|
150
|
+
const state = React.useMemo(() => ({ composer, normalPass, downSamplingPass, resolutionScale, camera, scene }), [composer, normalPass, downSamplingPass, resolutionScale, camera, scene]);
|
|
151
|
+
// Expose the composer
|
|
152
|
+
React.useImperativeHandle(ref, () => composer, [composer]);
|
|
153
|
+
return (jsxRuntime.jsx(EffectComposerContext.Provider, { value: state, children: jsxRuntime.jsx("group", { ref: group, children: children }) }));
|
|
227
154
|
}));
|
|
228
155
|
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
effect.target = vec;
|
|
246
|
-
}
|
|
247
|
-
if (depthTexture) effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
|
|
248
|
-
invalidate();
|
|
249
|
-
}, [target, depthTexture, effect]);
|
|
250
|
-
return /*#__PURE__*/React.createElement("primitive", {
|
|
251
|
-
ref: ref,
|
|
252
|
-
object: effect,
|
|
253
|
-
dispose: null
|
|
254
|
-
});
|
|
156
|
+
const DepthOfField = React.forwardRef(function DepthOfField({ target, depthTexture, ...props }, ref) {
|
|
157
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
158
|
+
const { camera } = React.useContext(EffectComposerContext);
|
|
159
|
+
const effect = React.useMemo(() => new postprocessing.DepthOfFieldEffect(camera, props), [camera, props]);
|
|
160
|
+
React.useLayoutEffect(() => {
|
|
161
|
+
if (target && typeof target !== 'number') {
|
|
162
|
+
const vec = target instanceof THREE.Vector3
|
|
163
|
+
? new THREE.Vector3().set(target.x, target.y, target.z)
|
|
164
|
+
: new THREE.Vector3().set(target[0], target[1], target[2]);
|
|
165
|
+
effect.target = vec;
|
|
166
|
+
}
|
|
167
|
+
if (depthTexture)
|
|
168
|
+
effect.setDepthTexture(depthTexture.texture, depthTexture.packing);
|
|
169
|
+
invalidate();
|
|
170
|
+
}, [target, depthTexture, effect]);
|
|
171
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
255
172
|
});
|
|
256
173
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
var effect = React$1.useMemo(function () {
|
|
271
|
-
return new postprocessing.GlitchEffect(_extends({}, props, {
|
|
272
|
-
delay: delay,
|
|
273
|
-
duration: duration,
|
|
274
|
-
strength: strength
|
|
275
|
-
}));
|
|
276
|
-
}, [delay, duration, props, strength]);
|
|
277
|
-
React$1.useLayoutEffect(function () {
|
|
278
|
-
effect.mode = active ? props.mode || postprocessing.GlitchMode.SPORADIC : postprocessing.GlitchMode.DISABLED;
|
|
279
|
-
invalidate();
|
|
280
|
-
}, [active, effect, invalidate, props.mode]);
|
|
281
|
-
return /*#__PURE__*/React.createElement("primitive", {
|
|
282
|
-
ref: ref,
|
|
283
|
-
object: effect,
|
|
284
|
-
dispose: null
|
|
285
|
-
});
|
|
174
|
+
const DotScreen = wrapEffect(postprocessing.DotScreenEffect);
|
|
175
|
+
|
|
176
|
+
const Glitch = React.forwardRef(function Glitch({ active = true, ...props }, ref) {
|
|
177
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
178
|
+
const delay = useVector2(props, 'delay');
|
|
179
|
+
const duration = useVector2(props, 'duration');
|
|
180
|
+
const strength = useVector2(props, 'strength');
|
|
181
|
+
const effect = React.useMemo(() => new postprocessing.GlitchEffect({ ...props, delay, duration, strength }), [delay, duration, props, strength]);
|
|
182
|
+
React.useLayoutEffect(() => {
|
|
183
|
+
effect.mode = active ? props.mode || postprocessing.GlitchMode.SPORADIC : postprocessing.GlitchMode.DISABLED;
|
|
184
|
+
invalidate();
|
|
185
|
+
}, [active, effect, invalidate, props.mode]);
|
|
186
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
286
187
|
});
|
|
287
188
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
return new postprocessing.GodRaysEffect(camera, props.sun, props);
|
|
293
|
-
}, [camera, props]);
|
|
294
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
295
|
-
ref: ref,
|
|
296
|
-
object: effect,
|
|
297
|
-
dispose: null
|
|
298
|
-
});
|
|
189
|
+
const GodRays = React.forwardRef(function GodRays(props, ref) {
|
|
190
|
+
const { camera } = React.useContext(EffectComposerContext);
|
|
191
|
+
const effect = React.useMemo(() => new postprocessing.GodRaysEffect(camera, props.sun, props), [camera, props]);
|
|
192
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
299
193
|
});
|
|
300
194
|
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
return
|
|
310
|
-
}, [props]);
|
|
311
|
-
React$1.useLayoutEffect(function () {
|
|
312
|
-
if (size) effect.setSize(size.width, size.height);
|
|
313
|
-
invalidate();
|
|
314
|
-
}, [effect, size]);
|
|
315
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
316
|
-
ref: ref,
|
|
317
|
-
object: effect,
|
|
318
|
-
dispose: null
|
|
319
|
-
});
|
|
195
|
+
const Grid = React.forwardRef(function Grid({ size, ...props }, ref) {
|
|
196
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
197
|
+
const effect = React.useMemo(() => new postprocessing.GridEffect(props), [props]);
|
|
198
|
+
React.useLayoutEffect(() => {
|
|
199
|
+
if (size)
|
|
200
|
+
effect.setSize(size.width, size.height);
|
|
201
|
+
invalidate();
|
|
202
|
+
}, [effect, size]);
|
|
203
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
320
204
|
});
|
|
321
205
|
|
|
322
|
-
|
|
206
|
+
const HueSaturation = wrapEffect(postprocessing.HueSaturationEffect);
|
|
323
207
|
|
|
324
|
-
|
|
325
|
-
blendFunction: postprocessing.BlendFunction.COLOR_DODGE
|
|
326
|
-
});
|
|
208
|
+
const Noise = wrapEffect(postprocessing.NoiseEffect, { blendFunction: postprocessing.BlendFunction.COLOR_DODGE });
|
|
327
209
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
enabled = _ref$enabled === void 0 ? true : _ref$enabled;
|
|
334
|
-
var _useState = React$1.useState([]),
|
|
335
|
-
selected = _useState[0],
|
|
336
|
-
select = _useState[1];
|
|
337
|
-
var value = React$1.useMemo(function () {
|
|
338
|
-
return {
|
|
339
|
-
selected: selected,
|
|
340
|
-
select: select,
|
|
341
|
-
enabled: enabled
|
|
342
|
-
};
|
|
343
|
-
}, [selected, select, enabled]);
|
|
344
|
-
return /*#__PURE__*/React$1.createElement(selectionContext.Provider, {
|
|
345
|
-
value: value
|
|
346
|
-
}, children);
|
|
210
|
+
const selectionContext = React.createContext(null);
|
|
211
|
+
function Selection({ children, enabled = true }) {
|
|
212
|
+
const [selected, select] = React.useState([]);
|
|
213
|
+
const value = React.useMemo(() => ({ selected, select, enabled }), [selected, select, enabled]);
|
|
214
|
+
return jsxRuntime.jsx(selectionContext.Provider, { value: value, children: children });
|
|
347
215
|
}
|
|
348
|
-
function Select(
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
group.current.traverse(function (o) {
|
|
360
|
-
o.type === 'Mesh' && current.push(o);
|
|
361
|
-
if (api.selected.indexOf(o) === -1) changed = true;
|
|
362
|
-
});
|
|
363
|
-
if (changed) {
|
|
364
|
-
api.select(function (state) {
|
|
365
|
-
return [].concat(state, current);
|
|
366
|
-
});
|
|
367
|
-
return function () {
|
|
368
|
-
api.select(function (state) {
|
|
369
|
-
return state.filter(function (selected) {
|
|
370
|
-
return !current.includes(selected);
|
|
216
|
+
function Select({ enabled = false, children, ...props }) {
|
|
217
|
+
const group = React.useRef(null);
|
|
218
|
+
const api = React.useContext(selectionContext);
|
|
219
|
+
React.useEffect(() => {
|
|
220
|
+
if (api && enabled) {
|
|
221
|
+
let changed = false;
|
|
222
|
+
const current = [];
|
|
223
|
+
group.current.traverse((o) => {
|
|
224
|
+
o.type === 'Mesh' && current.push(o);
|
|
225
|
+
if (api.selected.indexOf(o) === -1)
|
|
226
|
+
changed = true;
|
|
371
227
|
});
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
228
|
+
if (changed) {
|
|
229
|
+
api.select((state) => [...state, ...current]);
|
|
230
|
+
return () => {
|
|
231
|
+
api.select((state) => state.filter((selected) => !current.includes(selected)));
|
|
232
|
+
};
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
}, [enabled, children, api]);
|
|
236
|
+
return (jsxRuntime.jsx("group", { ref: group, ...props, children: children }));
|
|
380
237
|
}
|
|
381
238
|
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
effect.selection.clear();
|
|
430
|
-
invalidate();
|
|
431
|
-
};
|
|
432
|
-
}
|
|
433
|
-
}, [effect, selection, api, invalidate]);
|
|
434
|
-
React$1.useEffect(function () {
|
|
435
|
-
effect.selectionLayer = selectionLayer;
|
|
436
|
-
invalidate();
|
|
437
|
-
}, [effect, invalidate, selectionLayer]);
|
|
438
|
-
React$1.useRef();
|
|
439
|
-
React$1.useEffect(function () {
|
|
440
|
-
if (api && api.enabled) {
|
|
441
|
-
var _api$selected;
|
|
442
|
-
if ((_api$selected = api.selected) != null && _api$selected.length) {
|
|
443
|
-
effect.selection.set(api.selected);
|
|
239
|
+
const Outline = React.forwardRef(function Outline({ selection = [], selectionLayer = 10, blendFunction, patternTexture, edgeStrength, pulseSpeed, visibleEdgeColor, hiddenEdgeColor, width, height, kernelSize, blur, xRay, ...props }, forwardRef) {
|
|
240
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
241
|
+
const { scene, camera } = React.useContext(EffectComposerContext);
|
|
242
|
+
const effect = React.useMemo(() => new postprocessing.OutlineEffect(scene, camera, {
|
|
243
|
+
blendFunction,
|
|
244
|
+
patternTexture,
|
|
245
|
+
edgeStrength,
|
|
246
|
+
pulseSpeed,
|
|
247
|
+
visibleEdgeColor,
|
|
248
|
+
hiddenEdgeColor,
|
|
249
|
+
width,
|
|
250
|
+
height,
|
|
251
|
+
kernelSize,
|
|
252
|
+
blur,
|
|
253
|
+
xRay,
|
|
254
|
+
...props,
|
|
255
|
+
}), [
|
|
256
|
+
blendFunction,
|
|
257
|
+
blur,
|
|
258
|
+
camera,
|
|
259
|
+
edgeStrength,
|
|
260
|
+
height,
|
|
261
|
+
hiddenEdgeColor,
|
|
262
|
+
kernelSize,
|
|
263
|
+
patternTexture,
|
|
264
|
+
props,
|
|
265
|
+
pulseSpeed,
|
|
266
|
+
scene,
|
|
267
|
+
visibleEdgeColor,
|
|
268
|
+
width,
|
|
269
|
+
xRay,
|
|
270
|
+
]);
|
|
271
|
+
const api = React.useContext(selectionContext);
|
|
272
|
+
React.useEffect(() => {
|
|
273
|
+
// Do not allow array selection if declarative selection is active
|
|
274
|
+
// TODO: array selection should probably be deprecated altogether
|
|
275
|
+
if (!api && selection) {
|
|
276
|
+
effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
|
|
277
|
+
invalidate();
|
|
278
|
+
return () => {
|
|
279
|
+
effect.selection.clear();
|
|
280
|
+
invalidate();
|
|
281
|
+
};
|
|
282
|
+
}
|
|
283
|
+
}, [effect, selection, api, invalidate]);
|
|
284
|
+
React.useEffect(() => {
|
|
285
|
+
effect.selectionLayer = selectionLayer;
|
|
444
286
|
invalidate();
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
287
|
+
}, [effect, invalidate, selectionLayer]);
|
|
288
|
+
React.useRef();
|
|
289
|
+
React.useEffect(() => {
|
|
290
|
+
var _a;
|
|
291
|
+
if (api && api.enabled) {
|
|
292
|
+
if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
|
|
293
|
+
effect.selection.set(api.selected);
|
|
294
|
+
invalidate();
|
|
295
|
+
return () => {
|
|
296
|
+
effect.selection.clear();
|
|
297
|
+
invalidate();
|
|
298
|
+
};
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}, [api, effect.selection, invalidate]);
|
|
302
|
+
return jsxRuntime.jsx("primitive", { ref: forwardRef, object: effect });
|
|
456
303
|
});
|
|
457
304
|
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
var effect = React$1.useMemo(function () {
|
|
463
|
-
return new postprocessing.PixelationEffect(granularity);
|
|
464
|
-
}, [granularity]);
|
|
465
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
466
|
-
ref: ref,
|
|
467
|
-
object: effect,
|
|
468
|
-
dispose: null
|
|
469
|
-
});
|
|
305
|
+
const Pixelation = React.forwardRef(function Pixelation({ granularity = 5 }, ref) {
|
|
306
|
+
/** Because GlitchEffect granularity is not an object but a number, we have to define a custom prop "granularity" */
|
|
307
|
+
const effect = React.useMemo(() => new postprocessing.PixelationEffect(granularity), [granularity]);
|
|
308
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
470
309
|
});
|
|
471
310
|
|
|
472
|
-
|
|
473
|
-
blendFunction: postprocessing.BlendFunction.OVERLAY
|
|
474
|
-
});
|
|
311
|
+
const Scanline = wrapEffect(postprocessing.ScanlineEffect, { blendFunction: postprocessing.BlendFunction.OVERLAY });
|
|
475
312
|
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
return light.layers.disable(effect.selection.layer);
|
|
482
|
-
};
|
|
483
|
-
var SelectiveBloom = /*#__PURE__*/React$1.forwardRef(function SelectiveBloom(_ref, forwardRef) {
|
|
484
|
-
var _ref$selection = _ref.selection,
|
|
485
|
-
selection = _ref$selection === void 0 ? [] : _ref$selection,
|
|
486
|
-
_ref$selectionLayer = _ref.selectionLayer,
|
|
487
|
-
selectionLayer = _ref$selectionLayer === void 0 ? 10 : _ref$selectionLayer,
|
|
488
|
-
_ref$lights = _ref.lights,
|
|
489
|
-
lights = _ref$lights === void 0 ? [] : _ref$lights,
|
|
490
|
-
luminanceThreshold = _ref.luminanceThreshold,
|
|
491
|
-
luminanceSmoothing = _ref.luminanceSmoothing,
|
|
492
|
-
intensity = _ref.intensity,
|
|
493
|
-
width = _ref.width,
|
|
494
|
-
height = _ref.height,
|
|
495
|
-
kernelSize = _ref.kernelSize,
|
|
496
|
-
mipmapBlur = _ref.mipmapBlur,
|
|
497
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
498
|
-
if (lights.length === 0) {
|
|
499
|
-
console.warn('SelectiveBloom requires lights to work.');
|
|
500
|
-
}
|
|
501
|
-
var invalidate = fiber.useThree(function (state) {
|
|
502
|
-
return state.invalidate;
|
|
503
|
-
});
|
|
504
|
-
var _useContext = React$1.useContext(EffectComposerContext),
|
|
505
|
-
scene = _useContext.scene,
|
|
506
|
-
camera = _useContext.camera;
|
|
507
|
-
var effect = React$1.useMemo(function () {
|
|
508
|
-
return new postprocessing.SelectiveBloomEffect(scene, camera, _extends({
|
|
509
|
-
blendFunction: postprocessing.BlendFunction.ADD,
|
|
510
|
-
luminanceThreshold: luminanceThreshold,
|
|
511
|
-
luminanceSmoothing: luminanceSmoothing,
|
|
512
|
-
intensity: intensity,
|
|
513
|
-
width: width,
|
|
514
|
-
height: height,
|
|
515
|
-
kernelSize: kernelSize,
|
|
516
|
-
mipmapBlur: mipmapBlur
|
|
517
|
-
}, props));
|
|
518
|
-
}, [scene, camera, luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, props]);
|
|
519
|
-
var api = React$1.useContext(selectionContext);
|
|
520
|
-
React$1.useEffect(function () {
|
|
521
|
-
// Do not allow array selection if declarative selection is active
|
|
522
|
-
// TODO: array selection should probably be deprecated altogether
|
|
523
|
-
if (!api && selection) {
|
|
524
|
-
effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
|
|
525
|
-
invalidate();
|
|
526
|
-
return function () {
|
|
527
|
-
effect.selection.clear();
|
|
528
|
-
invalidate();
|
|
529
|
-
};
|
|
530
|
-
}
|
|
531
|
-
}, [effect, selection, api, invalidate]);
|
|
532
|
-
React$1.useEffect(function () {
|
|
533
|
-
effect.selection.layer = selectionLayer;
|
|
534
|
-
invalidate();
|
|
535
|
-
}, [effect, invalidate, selectionLayer]);
|
|
536
|
-
React$1.useEffect(function () {
|
|
537
|
-
if (lights && lights.length > 0) {
|
|
538
|
-
lights.forEach(function (light) {
|
|
539
|
-
return addLight(resolveRef(light), effect);
|
|
540
|
-
});
|
|
541
|
-
invalidate();
|
|
542
|
-
return function () {
|
|
543
|
-
lights.forEach(function (light) {
|
|
544
|
-
return removeLight(resolveRef(light), effect);
|
|
545
|
-
});
|
|
546
|
-
invalidate();
|
|
547
|
-
};
|
|
313
|
+
const addLight = (light, effect) => light.layers.enable(effect.selection.layer);
|
|
314
|
+
const removeLight = (light, effect) => light.layers.disable(effect.selection.layer);
|
|
315
|
+
const SelectiveBloom = React.forwardRef(function SelectiveBloom({ selection = [], selectionLayer = 10, lights = [], luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, ...props }, forwardRef) {
|
|
316
|
+
if (lights.length === 0) {
|
|
317
|
+
console.warn('SelectiveBloom requires lights to work.');
|
|
548
318
|
}
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
319
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
320
|
+
const { scene, camera } = React.useContext(EffectComposerContext);
|
|
321
|
+
const effect = React.useMemo(() => new postprocessing.SelectiveBloomEffect(scene, camera, {
|
|
322
|
+
blendFunction: postprocessing.BlendFunction.ADD,
|
|
323
|
+
luminanceThreshold,
|
|
324
|
+
luminanceSmoothing,
|
|
325
|
+
intensity,
|
|
326
|
+
width,
|
|
327
|
+
height,
|
|
328
|
+
kernelSize,
|
|
329
|
+
mipmapBlur,
|
|
330
|
+
...props,
|
|
331
|
+
}), [scene, camera, luminanceThreshold, luminanceSmoothing, intensity, width, height, kernelSize, mipmapBlur, props]);
|
|
332
|
+
const api = React.useContext(selectionContext);
|
|
333
|
+
React.useEffect(() => {
|
|
334
|
+
// Do not allow array selection if declarative selection is active
|
|
335
|
+
// TODO: array selection should probably be deprecated altogether
|
|
336
|
+
if (!api && selection) {
|
|
337
|
+
effect.selection.set(Array.isArray(selection) ? selection.map(resolveRef) : [resolveRef(selection)]);
|
|
338
|
+
invalidate();
|
|
339
|
+
return () => {
|
|
340
|
+
effect.selection.clear();
|
|
341
|
+
invalidate();
|
|
342
|
+
};
|
|
343
|
+
}
|
|
344
|
+
}, [effect, selection, api, invalidate]);
|
|
345
|
+
React.useEffect(() => {
|
|
346
|
+
effect.selection.layer = selectionLayer;
|
|
556
347
|
invalidate();
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
348
|
+
}, [effect, invalidate, selectionLayer]);
|
|
349
|
+
React.useEffect(() => {
|
|
350
|
+
if (lights && lights.length > 0) {
|
|
351
|
+
lights.forEach((light) => addLight(resolveRef(light), effect));
|
|
352
|
+
invalidate();
|
|
353
|
+
return () => {
|
|
354
|
+
lights.forEach((light) => removeLight(resolveRef(light), effect));
|
|
355
|
+
invalidate();
|
|
356
|
+
};
|
|
357
|
+
}
|
|
358
|
+
}, [effect, invalidate, lights, selectionLayer]);
|
|
359
|
+
React.useRef();
|
|
360
|
+
React.useEffect(() => {
|
|
361
|
+
var _a;
|
|
362
|
+
if (api && api.enabled) {
|
|
363
|
+
if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
|
|
364
|
+
effect.selection.set(api.selected);
|
|
365
|
+
invalidate();
|
|
366
|
+
return () => {
|
|
367
|
+
effect.selection.clear();
|
|
368
|
+
invalidate();
|
|
369
|
+
};
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
}, [api, effect.selection, invalidate]);
|
|
373
|
+
return jsxRuntime.jsx("primitive", { ref: forwardRef, object: effect, dispose: null });
|
|
569
374
|
});
|
|
570
375
|
|
|
571
|
-
|
|
376
|
+
const Sepia = wrapEffect(postprocessing.SepiaEffect);
|
|
572
377
|
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
resolutionScale: resolutionScale != null ? resolutionScale : 1,
|
|
602
|
-
depthAwareUpsampling: true
|
|
603
|
-
}, props));
|
|
604
|
-
}, [camera, normalPass, props]);
|
|
605
|
-
return /*#__PURE__*/React.createElement("primitive", {
|
|
606
|
-
ref: ref,
|
|
607
|
-
object: effect,
|
|
608
|
-
dispose: null
|
|
609
|
-
});
|
|
378
|
+
const SSAO = React.forwardRef(function SSAO(props, ref) {
|
|
379
|
+
const { camera, normalPass, downSamplingPass, resolutionScale } = React.useContext(EffectComposerContext);
|
|
380
|
+
const effect = React.useMemo(() => {
|
|
381
|
+
if (normalPass === null && downSamplingPass === null) {
|
|
382
|
+
console.error('Please enable the NormalPass in the EffectComposer in order to use SSAO.');
|
|
383
|
+
return {};
|
|
384
|
+
}
|
|
385
|
+
return new postprocessing.SSAOEffect(camera, normalPass && !downSamplingPass ? normalPass.texture : null, {
|
|
386
|
+
blendFunction: postprocessing.BlendFunction.MULTIPLY,
|
|
387
|
+
samples: 30,
|
|
388
|
+
rings: 4,
|
|
389
|
+
distanceThreshold: 1.0,
|
|
390
|
+
distanceFalloff: 0.0,
|
|
391
|
+
rangeThreshold: 0.5,
|
|
392
|
+
rangeFalloff: 0.1,
|
|
393
|
+
luminanceInfluence: 0.9,
|
|
394
|
+
radius: 20,
|
|
395
|
+
bias: 0.5,
|
|
396
|
+
intensity: 1.0,
|
|
397
|
+
color: undefined,
|
|
398
|
+
// @ts-ignore
|
|
399
|
+
normalDepthBuffer: downSamplingPass ? downSamplingPass.texture : null,
|
|
400
|
+
resolutionScale: resolutionScale !== null && resolutionScale !== void 0 ? resolutionScale : 1,
|
|
401
|
+
depthAwareUpsampling: true,
|
|
402
|
+
...props,
|
|
403
|
+
});
|
|
404
|
+
}, [camera, normalPass, props]);
|
|
405
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
610
406
|
});
|
|
611
407
|
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
var _excluded$2 = ["textureSrc", "texture"];
|
|
615
|
-
var Texture = /*#__PURE__*/React$1.forwardRef(function Texture(_ref, ref) {
|
|
616
|
-
var textureSrc = _ref.textureSrc,
|
|
617
|
-
texture = _ref.texture,
|
|
618
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
619
|
-
var t = fiber.useLoader(THREE.TextureLoader, textureSrc);
|
|
620
|
-
React$1.useLayoutEffect(function () {
|
|
621
|
-
t.encoding = THREE.sRGBEncoding;
|
|
622
|
-
t.wrapS = t.wrapT = THREE.RepeatWrapping;
|
|
623
|
-
}, [t]);
|
|
624
|
-
var effect = React$1.useMemo(function () {
|
|
625
|
-
return new postprocessing.TextureEffect(_extends({}, props, {
|
|
626
|
-
texture: t || texture
|
|
627
|
-
}));
|
|
628
|
-
}, [props, t, texture]);
|
|
629
|
-
return /*#__PURE__*/React.createElement("primitive", {
|
|
630
|
-
ref: ref,
|
|
631
|
-
object: effect,
|
|
632
|
-
dispose: null
|
|
633
|
-
});
|
|
634
|
-
});
|
|
408
|
+
const SMAA = wrapEffect(postprocessing.SMAAEffect);
|
|
635
409
|
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
var lut = _ref.lut,
|
|
645
|
-
tetrahedralInterpolation = _ref.tetrahedralInterpolation,
|
|
646
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
647
|
-
var effect = React$1.useMemo(function () {
|
|
648
|
-
return new postprocessing.LUT3DEffect(lut, props);
|
|
649
|
-
}, [lut, props]);
|
|
650
|
-
var invalidate = fiber.useThree(function (state) {
|
|
651
|
-
return state.invalidate;
|
|
652
|
-
});
|
|
653
|
-
React$1.useLayoutEffect(function () {
|
|
654
|
-
if (tetrahedralInterpolation) effect.tetrahedralInterpolation = tetrahedralInterpolation;
|
|
655
|
-
if (lut) effect.lut = lut;
|
|
656
|
-
invalidate();
|
|
657
|
-
}, [effect, invalidate, lut, tetrahedralInterpolation]);
|
|
658
|
-
return /*#__PURE__*/React$1.createElement("primitive", {
|
|
659
|
-
ref: ref,
|
|
660
|
-
object: effect,
|
|
661
|
-
dispose: null
|
|
662
|
-
});
|
|
410
|
+
const Texture = React.forwardRef(function Texture({ textureSrc, texture, ...props }, ref) {
|
|
411
|
+
const t = fiber.useLoader(THREE.TextureLoader, textureSrc);
|
|
412
|
+
React.useLayoutEffect(() => {
|
|
413
|
+
t.encoding = THREE.sRGBEncoding;
|
|
414
|
+
t.wrapS = t.wrapT = THREE.RepeatWrapping;
|
|
415
|
+
}, [t]);
|
|
416
|
+
const effect = React.useMemo(() => new postprocessing.TextureEffect({ ...props, texture: t || texture }), [props, t, texture]);
|
|
417
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
663
418
|
});
|
|
664
419
|
|
|
665
|
-
|
|
666
|
-
blendFunction: postprocessing.BlendFunction.ADD
|
|
667
|
-
});
|
|
420
|
+
const ToneMapping = wrapEffect(postprocessing.ToneMappingEffect);
|
|
668
421
|
|
|
669
|
-
|
|
670
|
-
fragmentShader: "\n\n // original shader by Evan Wallace\n\n #define MAX_ITERATIONS 100\n\n uniform float blur;\n uniform float taper;\n uniform vec2 start;\n uniform vec2 end;\n uniform vec2 direction;\n uniform int samples;\n\n float random(vec3 scale, float seed) {\n /* use the fragment position for a different seed per-pixel */\n return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);\n }\n\n void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {\n vec4 color = vec4(0.0);\n float total = 0.0;\n vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);\n vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);\n float f_samples = float(samples);\n float half_samples = f_samples / 2.0;\n\n // use screen diagonal to normalize blur radii\n float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance\n float gradientRadius = taper * (maxScreenDistance);\n float blurRadius = blur * (maxScreenDistance / 16.0);\n\n /* randomize the lookup values to hide the fixed number of samples */\n float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);\n vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));\n float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;\n\n #pragma unroll_loop_start\n for (int i = 0; i <= MAX_ITERATIONS; i++) {\n if (i >= samples) { break; } // return early if over sample count\n float f_i = float(i);\n float s_i = -half_samples + f_i;\n float percent = (s_i + offset - 0.5) / half_samples;\n float weight = 1.0 - abs(percent);\n vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);\n /* switch to pre-multiplied alpha to correctly blur transparent images */\n sample_i.rgb *= sample_i.a;\n color += sample_i * weight;\n total += weight;\n }\n #pragma unroll_loop_end\n\n outputColor = color / total;\n\n /* switch back from pre-multiplied alpha */\n outputColor.rgb /= outputColor.a + 0.00001;\n }\n "
|
|
671
|
-
};
|
|
672
|
-
var TiltShiftEffect = /*#__PURE__*/function (_Effect) {
|
|
673
|
-
_inheritsLoose(TiltShiftEffect, _Effect);
|
|
674
|
-
function TiltShiftEffect(_temp) {
|
|
675
|
-
var _ref = _temp === void 0 ? {} : _temp,
|
|
676
|
-
_ref$blendFunction = _ref.blendFunction,
|
|
677
|
-
blendFunction = _ref$blendFunction === void 0 ? postprocessing.BlendFunction.NORMAL : _ref$blendFunction,
|
|
678
|
-
_ref$blur = _ref.blur,
|
|
679
|
-
blur = _ref$blur === void 0 ? 0.15 : _ref$blur,
|
|
680
|
-
_ref$taper = _ref.taper,
|
|
681
|
-
taper = _ref$taper === void 0 ? 0.5 : _ref$taper,
|
|
682
|
-
_ref$start = _ref.start,
|
|
683
|
-
start = _ref$start === void 0 ? [0.5, 0.0] : _ref$start,
|
|
684
|
-
_ref$end = _ref.end,
|
|
685
|
-
end = _ref$end === void 0 ? [0.5, 1.0] : _ref$end,
|
|
686
|
-
_ref$samples = _ref.samples,
|
|
687
|
-
samples = _ref$samples === void 0 ? 10.0 : _ref$samples,
|
|
688
|
-
_ref$direction = _ref.direction,
|
|
689
|
-
direction = _ref$direction === void 0 ? [1, 1] : _ref$direction;
|
|
690
|
-
return _Effect.call(this, 'TiltShiftEffect', TiltShiftShader.fragmentShader, {
|
|
691
|
-
blendFunction: blendFunction,
|
|
692
|
-
attributes: postprocessing.EffectAttribute.CONVOLUTION,
|
|
693
|
-
uniforms: new Map([['blur', new THREE.Uniform(blur)], ['taper', new THREE.Uniform(taper)], ['start', new THREE.Uniform(start)], ['end', new THREE.Uniform(end)], ['samples', new THREE.Uniform(samples)], ['direction', new THREE.Uniform(direction)]])
|
|
694
|
-
}) || this;
|
|
695
|
-
}
|
|
696
|
-
return TiltShiftEffect;
|
|
697
|
-
}(postprocessing.Effect);
|
|
698
|
-
var TiltShift2 = wrapEffect(TiltShiftEffect, {
|
|
699
|
-
blendFunction: postprocessing.BlendFunction.NORMAL
|
|
700
|
-
});
|
|
422
|
+
const Vignette = wrapEffect(postprocessing.VignetteEffect);
|
|
701
423
|
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
var _useThree = fiber.useThree(),
|
|
713
|
-
invalidate = _useThree.invalidate;
|
|
714
|
-
var _useContext = React$1.useContext(EffectComposerContext),
|
|
715
|
-
scene = _useContext.scene,
|
|
716
|
-
camera = _useContext.camera;
|
|
717
|
-
var effect = React$1.useMemo(function () {
|
|
718
|
-
return new screenSpaceReflections.SSREffect(scene, camera, _extends({
|
|
719
|
-
ENABLE_BLUR: ENABLE_BLUR,
|
|
720
|
-
USE_MRT: USE_MRT
|
|
721
|
-
}, props));
|
|
722
|
-
}, [scene, camera, ENABLE_BLUR, USE_MRT, props]);
|
|
723
|
-
var api = React$1.useContext(selectionContext);
|
|
724
|
-
React$1.useEffect(function () {
|
|
725
|
-
if (api && api.enabled) {
|
|
726
|
-
var _api$selected;
|
|
727
|
-
if ((_api$selected = api.selected) != null && _api$selected.length) {
|
|
728
|
-
effect.selection.set(api.selected);
|
|
424
|
+
const ShockWave = wrapEffect(postprocessing.ShockWaveEffect);
|
|
425
|
+
|
|
426
|
+
const LUT = React.forwardRef(function LUT({ lut, tetrahedralInterpolation, ...props }, ref) {
|
|
427
|
+
const effect = React.useMemo(() => new postprocessing.LUT3DEffect(lut, props), [lut, props]);
|
|
428
|
+
const invalidate = fiber.useThree((state) => state.invalidate);
|
|
429
|
+
React.useLayoutEffect(() => {
|
|
430
|
+
if (tetrahedralInterpolation)
|
|
431
|
+
effect.tetrahedralInterpolation = tetrahedralInterpolation;
|
|
432
|
+
if (lut)
|
|
433
|
+
effect.lut = lut;
|
|
729
434
|
invalidate();
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
435
|
+
}, [effect, invalidate, lut, tetrahedralInterpolation]);
|
|
436
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, dispose: null });
|
|
437
|
+
});
|
|
438
|
+
|
|
439
|
+
const TiltShift = wrapEffect(postprocessing.TiltShiftEffect, { blendFunction: postprocessing.BlendFunction.ADD });
|
|
440
|
+
|
|
441
|
+
const TiltShiftShader = {
|
|
442
|
+
fragmentShader: `
|
|
443
|
+
|
|
444
|
+
// original shader by Evan Wallace
|
|
445
|
+
|
|
446
|
+
#define MAX_ITERATIONS 100
|
|
447
|
+
|
|
448
|
+
uniform float blur;
|
|
449
|
+
uniform float taper;
|
|
450
|
+
uniform vec2 start;
|
|
451
|
+
uniform vec2 end;
|
|
452
|
+
uniform vec2 direction;
|
|
453
|
+
uniform int samples;
|
|
454
|
+
|
|
455
|
+
float random(vec3 scale, float seed) {
|
|
456
|
+
/* use the fragment position for a different seed per-pixel */
|
|
457
|
+
return fract(sin(dot(gl_FragCoord.xyz + seed, scale)) * 43758.5453 + seed);
|
|
735
458
|
}
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
459
|
+
|
|
460
|
+
void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
|
|
461
|
+
vec4 color = vec4(0.0);
|
|
462
|
+
float total = 0.0;
|
|
463
|
+
vec2 startPixel = vec2(start.x * resolution.x, start.y * resolution.y);
|
|
464
|
+
vec2 endPixel = vec2(end.x * resolution.x, end.y * resolution.y);
|
|
465
|
+
float f_samples = float(samples);
|
|
466
|
+
float half_samples = f_samples / 2.0;
|
|
467
|
+
|
|
468
|
+
// use screen diagonal to normalize blur radii
|
|
469
|
+
float maxScreenDistance = distance(vec2(0.0), resolution); // diagonal distance
|
|
470
|
+
float gradientRadius = taper * (maxScreenDistance);
|
|
471
|
+
float blurRadius = blur * (maxScreenDistance / 16.0);
|
|
472
|
+
|
|
473
|
+
/* randomize the lookup values to hide the fixed number of samples */
|
|
474
|
+
float offset = random(vec3(12.9898, 78.233, 151.7182), 0.0);
|
|
475
|
+
vec2 normal = normalize(vec2(startPixel.y - endPixel.y, endPixel.x - startPixel.x));
|
|
476
|
+
float radius = smoothstep(0.0, 1.0, abs(dot(uv * resolution - startPixel, normal)) / gradientRadius) * blurRadius;
|
|
477
|
+
|
|
478
|
+
#pragma unroll_loop_start
|
|
479
|
+
for (int i = 0; i <= MAX_ITERATIONS; i++) {
|
|
480
|
+
if (i >= samples) { break; } // return early if over sample count
|
|
481
|
+
float f_i = float(i);
|
|
482
|
+
float s_i = -half_samples + f_i;
|
|
483
|
+
float percent = (s_i + offset - 0.5) / half_samples;
|
|
484
|
+
float weight = 1.0 - abs(percent);
|
|
485
|
+
vec4 sample_i = texture2D(inputBuffer, uv + normalize(direction) / resolution * percent * radius);
|
|
486
|
+
/* switch to pre-multiplied alpha to correctly blur transparent images */
|
|
487
|
+
sample_i.rgb *= sample_i.a;
|
|
488
|
+
color += sample_i * weight;
|
|
489
|
+
total += weight;
|
|
490
|
+
}
|
|
491
|
+
#pragma unroll_loop_end
|
|
492
|
+
|
|
493
|
+
outputColor = color / total;
|
|
494
|
+
|
|
495
|
+
/* switch back from pre-multiplied alpha */
|
|
496
|
+
outputColor.rgb /= outputColor.a + 0.00001;
|
|
497
|
+
}
|
|
498
|
+
`,
|
|
499
|
+
};
|
|
500
|
+
class TiltShiftEffect extends postprocessing.Effect {
|
|
501
|
+
constructor({ blendFunction = postprocessing.BlendFunction.NORMAL, blur = 0.15, // [0, 1], can go beyond 1 for extra
|
|
502
|
+
taper = 0.5, // [0, 1], can go beyond 1 for extra
|
|
503
|
+
start = [0.5, 0.0], // [0,1] percentage x,y of screenspace
|
|
504
|
+
end = [0.5, 1.0], // [0,1] percentage x,y of screenspace
|
|
505
|
+
samples = 10.0, // number of blur samples
|
|
506
|
+
direction = [1, 1], // direction of blur
|
|
507
|
+
} = {}) {
|
|
508
|
+
super('TiltShiftEffect', TiltShiftShader.fragmentShader, {
|
|
509
|
+
blendFunction,
|
|
510
|
+
attributes: postprocessing.EffectAttribute.CONVOLUTION,
|
|
511
|
+
uniforms: new Map([
|
|
512
|
+
['blur', new THREE.Uniform(blur)],
|
|
513
|
+
['taper', new THREE.Uniform(taper)],
|
|
514
|
+
['start', new THREE.Uniform(start)],
|
|
515
|
+
['end', new THREE.Uniform(end)],
|
|
516
|
+
['samples', new THREE.Uniform(samples)],
|
|
517
|
+
['direction', new THREE.Uniform(direction)],
|
|
518
|
+
]),
|
|
519
|
+
});
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
const TiltShift2 = wrapEffect(TiltShiftEffect, { blendFunction: postprocessing.BlendFunction.NORMAL });
|
|
523
|
+
|
|
524
|
+
const SSR = React.forwardRef(function SSR({ ENABLE_BLUR = true, USE_MRT = true, ...props }, ref) {
|
|
525
|
+
const { invalidate } = fiber.useThree();
|
|
526
|
+
const { scene, camera } = React.useContext(EffectComposerContext);
|
|
527
|
+
const effect = React.useMemo(() => new screenSpaceReflections.SSREffect(scene, camera, { ENABLE_BLUR, USE_MRT, ...props }), [scene, camera, ENABLE_BLUR, USE_MRT, props]);
|
|
528
|
+
const api = React.useContext(selectionContext);
|
|
529
|
+
React.useEffect(() => {
|
|
530
|
+
var _a;
|
|
531
|
+
if (api && api.enabled) {
|
|
532
|
+
if ((_a = api.selected) === null || _a === void 0 ? void 0 : _a.length) {
|
|
533
|
+
effect.selection.set(api.selected);
|
|
534
|
+
invalidate();
|
|
535
|
+
return () => {
|
|
536
|
+
effect.selection.clear();
|
|
537
|
+
invalidate();
|
|
538
|
+
};
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
}, [api]);
|
|
542
|
+
return jsxRuntime.jsx("primitive", { ref: ref, object: effect, ...props });
|
|
741
543
|
});
|
|
742
544
|
|
|
743
545
|
exports.Bloom = Bloom;
|