You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`use-shader-fx` is a library designed to easily implement shader effects such as fluid simulations and noise. It relies on [react-three-fiber](https://github.com/pmndrs/react-three-fiber) and has been designed with performance control in mind, especially when combined with [drei](https://github.com/pmndrs/drei).
From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in array format. The `config` is an object, which varies for each Hook, containing details such as `size` and `dpr`.
6
8
7
-
-updateFx - A function to be called inside `useFrame` that returns a `THREE.Texture`.
8
-
-setParams - A function to update the parameters, useful for performance tuning, etc.
9
-
-fxObject - An object containing various FX components such as scene, camera, material, and render target.
9
+
1.`updateFx` - A function to be invoked inside `useFrame`, returning a `THREE.Texture`.
10
+
2.`setParams` - A function to refresh the parameters, beneficial for performance tweaking, etc.
11
+
3.`fxObject` - An object that holds various FX components, such as scene, camera, material, and renderTarget.
Execute `updateFx` in `useFrame`. The first argument receives the RootState from `useFrame`, and the second one takes `HookPrams`. Each fx has its `HookPrams`, and each type is exported.
16
18
17
19
```js
18
20
useFrame((props) => {
@@ -24,57 +26,96 @@ useFrame((props) => {
24
26
});
25
27
```
26
28
27
-
# How to make "custom fx hook"
29
+
# Performance
30
+
31
+
You can control the `dpr` using the `PerformanceMonitor` from [drei](https://github.com/pmndrs/drei). For more details, please refer to the [scaling-performance](https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance) of r3f.
By using the `PerformanceMonitor`, you can subscribe to performance changes with `usePerformanceMonitor`. For more details, refer to [drei](https://github.com/pmndrs/drei#performancemonitor).
55
+
56
+
With `setParams` received from `fxHooks`, it's possible to independently control high-load items such as iteration counts.
57
+
58
+
```js
59
+
usePerformanceMonitor({
60
+
onChange({ factor }) {
61
+
setParams({
62
+
pressure_iterations:Math.round(20* factor),
63
+
});
64
+
},
65
+
});
66
+
```
67
+
68
+
# How to make "custom fxHooks"
28
69
29
-
カスタムフック開発に便利な utils をいくつか用意しています
30
-
詳細は既存の hook を参照してください
70
+
With some functions provided by `use-shader-fx`, creating a custom hook is straightforward (the challenging part is only the shader!). Please refer to existing `fxHooks` for details.
Generates FBO and returns a double-buffered buffer texture after swapping. The `useFBO` of `drei` by default performs `setSize` for `THREE.WebGLRenderTarget` upon changes in `dpr` and `size`, making it challenging to handle buffer textures during changes like dpr adjustments. Therefore, a non-reactive hook against updates of dpr and size was created. It's possible to make them reactive individually through options. If you want to `setSize` at a custom timing, the `fxObject` that the fxHook receives as the third argument also stores `renderTarget`.
36
75
37
-
- isDpr: Whether to multiply dpr, default:false
38
-
- isSizeUpdate: Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false
76
+
```ts
77
+
typeUseFboProps= {
78
+
scene:THREE.Scene;
79
+
camera:THREE.Camera;
80
+
size:Size;
81
+
/** If dpr is set, dpr will be multiplied, default:false */
82
+
dpr?:number|false;
83
+
/** Whether to resize on resizes. If isDpr is true, set FBO to setSize even if dpr is changed, default:false */
When you call the update function, it returns a double-buffered texture. The second argument gets a function called before `gl.render()`, allowing for operations like swapping materials or setting uniforms.
When given the `pointer` vector2 from r3f's `RootState`, it generates an update function that returns {currentPointer,prevPointer, diffPointer, isVelocityUpdate, velocity}.
0 commit comments