Skip to content

Commit 789536e

Browse files
author
takuma-hmng8
committed
11.1
1 parent bf3a82b commit 789536e

File tree

29 files changed

+757
-557
lines changed

29 files changed

+757
-557
lines changed

‎app/fx/Scene.tsx

Lines changed: 56 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from "react";
22
import * as THREE from "three";
33
import { useFrame, useLoader, extend } from "@react-three/fiber";
44
import { RippleParams, useRipple } from "./hooks/useRipple";
5-
import { useFlowmap } from "./hooks/useFlowmap";
5+
import { useFlowmap, FlowmapParams } from "./hooks/useFlowmap";
66
import { useSimpleFruid } from "./hooks/useSimpleFruid";
77
import { FruidParams, useFruid } from "./hooks/useFruid";
88
import { useBrush } from "./hooks/useBrush";
@@ -11,15 +11,14 @@ import { MainShaderMaterial, TMainShaderUniforms } from "./ShaderMaterial";
1111
import { useGUI } from "./gui/useGUI";
1212
import { CONFIG } from "./config";
1313
import { DuoToneParams, useDuoTone } from "./hooks/useDuoTone";
14-
import { useFogProjection } from "./hooks/useFogProjection";
14+
import {
15+
FogProjectionParams,
16+
useFogProjection,
17+
} from "./hooks/useFogProjection";
1518
import { usePerformanceMonitor } from "@react-three/drei";
1619

1720
extend({ MainShaderMaterial });
1821

19-
/*===============================================
20-
TODO*useFruidの整理から！
21-
===============================================*/
22-
2322
export const Scene = () => {
2423
const [bg, bg2, smoke, ripple, noise, pNoise] = useLoader(
2524
THREE.TextureLoader,
@@ -35,34 +34,27 @@ export const Scene = () => {
3534
const updateGUI = useGUI();
3635
const mainShaderRef = useRef<TMainShaderUniforms>();
3736

38-
//fx
39-
const updateRipple = useRipple({ texture: smoke, max: 100, size: 64 });
40-
const updateFruid = useFruid();
41-
const updateFlowmap = useFlowmap();
42-
const updateSimpleFruid = useSimpleFruid();
43-
const updateBrush = useBrush(smoke);
37+
// fx
38+
const { updateFx: updateRipple } = useRipple({ texture: smoke });
39+
const { updateFx: updateFruid, setParams: setFruid } = useFruid();
40+
const { updateFx: updateFlowmap } = useFlowmap();
41+
const { updateFx: updateSimpleFruid } = useSimpleFruid();
42+
const { updateFx: updateBrush } = useBrush();
43+
44+
// post fx
45+
const { updateFx: updateTransitionBg } = useTransitionBg();
46+
const { updateFx: updateDuoTone } = useDuoTone();
47+
const { updateFx: updateFogProjection } = useFogProjection();
4448

45-
//post fx
46-
const updateTransitionBg = useTransitionBg();
47-
const updateDuoTone = useDuoTone();
48-
/*===============================================
49-
TODO*これ配列じゃなくてオブジェクトにしよっ
50-
そんでシーンとかマテリアルとか、FBOの配列とかを受けられるようにして、こっからでもサイズを変更できるような仕組みにしよっt
51-
===============================================*/
52-
const [updateFogProjection, setFogProjectionUniform, fogObject] =
53-
useFogProjection();
54-
/*===============================================
55-
performance
56-
===============================================*/
57-
// usePerformanceMonitor({
58-
// onChange: () => {
59-
// setFogProjectionUniform({});
60-
// }
61-
// });
49+
// Monitor performance changes and execute update functions of params
50+
usePerformanceMonitor({
51+
onChange(api) {
52+
setFruid({
53+
pressure_iterations: Math.round(20 * api.factor),
54+
});
55+
},
56+
});
6257

63-
/*===============================================
64-
frame
65-
===============================================*/
6658
useFrame((props) => {
6759
// fx
6860
let fx = null;
@@ -82,12 +74,40 @@ export const Scene = () => {
8274
velocity_dissipation: CONFIG.fruid.velocity_dissipation,
8375
velocity_acceleration: CONFIG.fruid.velocity_acceleration,
8476
pressure_dissipation: CONFIG.fruid.pressure_dissipation,
85-
pressure_iterations: CONFIG.fruid.pressure_iterations,
8677
curl_strength: CONFIG.fruid.curl_strength,
8778
splat_radius: CONFIG.fruid.splat_radius,
8879
fruid_color: CONFIG.fruid.fruid_color,
8980
});
9081
break;
82+
case 2:
83+
fx = updateBrush(props, {
84+
texture: smoke,
85+
radius: CONFIG.brush.radius,
86+
alpha: CONFIG.brush.alpha,
87+
smudge: CONFIG.brush.smudge,
88+
dissipation: CONFIG.brush.dissipation,
89+
magnification: CONFIG.brush.magnification,
90+
motionBlur: CONFIG.brush.motionBlur,
91+
});
92+
break;
93+
case 3:
94+
fx = updateFlowmap(props, {
95+
radius: CONFIG.flowmap.radius,
96+
magnification: CONFIG.flowmap.magnification,
97+
alpha: CONFIG.flowmap.alpha,
98+
dissipation: CONFIG.flowmap.dissipation,
99+
});
100+
break;
101+
case 4:
102+
fx = updateSimpleFruid(props, {
103+
attenuation: CONFIG.simpleFruid.attenuation,
104+
alpha: CONFIG.simpleFruid.alpha,
105+
beta: CONFIG.simpleFruid.beta,
106+
viscosity: CONFIG.simpleFruid.viscosity,
107+
forceRadius: CONFIG.simpleFruid.forceRadius,
108+
forceCoefficient: CONFIG.simpleFruid.forceCoefficient,
109+
});
110+
break;
91111
default:
92112
break;
93113
}
@@ -99,15 +119,16 @@ export const Scene = () => {
99119
noiseStrength: CONFIG.transitionBg.noiseStrength,
100120
progress: CONFIG.transitionBg.progress,
101121
dir: CONFIG.transitionBg.dir,
102-
texture: [bg, bg2],
122+
texture0: bg,
123+
texture1: bg2,
103124
noise: noise,
104125
});
105126

106127
if (CONFIG.duoTone.active) {
107128
postFx = updateDuoTone(props, {
129+
texture: postFx,
108130
color0: CONFIG.duoTone.color0,
109131
color1: CONFIG.duoTone.color1,
110-
texture: postFx,
111132
});
112133
}
113134

‎app/fx/config.ts

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,12 @@ export const CONFIG = {
55
/*===============================================
66
post fx
77
===============================================*/
8-
//transitionBg
98
transitionBg: {
10-
texture: [new THREE.Texture()],
11-
noise: new THREE.Texture(),
129
noiseStrength: 0.0,
1310
progress: 0.0,
1411
dir: new THREE.Vector2(0.3, 0.2),
1512
imageResolution: new THREE.Vector2(1440, 1440),
16-
active: true,
13+
active: false,
1714
transformDir: 1,
1815
transform: () => {
1916
CONFIG.transitionBg.transformDir =
@@ -33,22 +30,19 @@ export const CONFIG = {
3330
});
3431
},
3532
},
36-
//duoTone
3733
duoTone: {
3834
color0: new THREE.Color(0xffffff),
3935
color1: new THREE.Color(0x000000),
4036
active: false,
4137
},
42-
//fogProjection
4338
fogProjection: {
4439
timeStrength: 0.2,
4540
distortionStrength: 0.1,
4641
fogEdge0: 0.0,
4742
fogEdge1: 0.9,
4843
fogColor: new THREE.Color(0xffffff),
49-
active: true,
44+
active: false,
5045
},
51-
5246
/*===============================================
5347
fx
5448
===============================================*/
@@ -64,7 +58,6 @@ export const CONFIG = {
6458
velocity_dissipation: 0.99,
6559
velocity_acceleration: 8.0,
6660
pressure_dissipation: 0.9,
67-
pressure_iterations: 20,
6861
curl_strength: 4,
6962
splat_radius: 0.002,
7063
fruidVec: new THREE.Vector3(),
@@ -75,5 +68,27 @@ export const CONFIG = {
7568
return CONFIG.fruid.fruidVec.set(rCol, gCol, bCol);
7669
},
7770
},
71+
brush: {
72+
radius: 0.02,
73+
alpha: 0.1,
74+
smudge: 0.0,
75+
dissipation: 0.98,
76+
magnification: 0.0,
77+
motionBlur: 0.0,
78+
},
79+
flowmap: {
80+
radius: 0.1,
81+
magnification: 0.0,
82+
alpha: 0.1,
83+
dissipation: 0.98,
84+
},
85+
simpleFruid: {
86+
attenuation: 1.0,
87+
alpha: 1.0,
88+
beta: 1.0,
89+
viscosity: 0.99,
90+
forceRadius: 90,
91+
forceCoefficient: 1.0,
92+
},
7893
selectEffect: 1,
7994
};

‎app/fx/gui/useGUI.ts

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import { useCallback, useEffect, useMemo } from "react";
22
import { CONFIG } from "../config";
33
import GUI from "lil-gui";
44

5-
/**
6-
* @returns updateDisplays コントローラーをupdateDisplayする関数を返します
7-
*/
85
export const useGUI = () => {
96
const gui = useMemo(
107
() => new GUI({ closeFolders: true, title: "shader-fx" }),
@@ -50,17 +47,40 @@ export const useGUI = () => {
5047
/*===============================================
5148
fx
5249
===============================================*/
50+
// fruid
5351
const fruid2 = gui.addFolder("fruid(fx)");
5452
fruid2.add(CONFIG.fruid, "density_dissipation", 0, 1, 0.01);
5553
fruid2.add(CONFIG.fruid, "velocity_dissipation", 0, 1, 0.01);
5654
fruid2.add(CONFIG.fruid, "pressure_dissipation", 0, 1, 0.01);
5755
fruid2.add(CONFIG.fruid, "velocity_acceleration", 0, 100, 1);
58-
fruid2.add(CONFIG.fruid, "pressure_iterations", 0, 30, 1);
5956
fruid2.add(CONFIG.fruid, "curl_strength", 0, 100, 1);
6057
fruid2.add(CONFIG.fruid, "splat_radius", 0, 0.1, 0.001);
6158

59+
//brush
60+
const brush = gui.addFolder("brush(fx)");
61+
brush.add(CONFIG.brush, "radius", 0, 0.5, 0.01);
62+
brush.add(CONFIG.brush, "alpha", 0, 1, 0.01);
63+
brush.add(CONFIG.brush, "smudge", 0, 1, 0.01);
64+
brush.add(CONFIG.brush, "dissipation", 0, 1, 0.01);
65+
brush.add(CONFIG.brush, "magnification", 0, 1, 0.01);
66+
brush.add(CONFIG.brush, "motionBlur", 0, 1, 0.01);
67+
68+
// simple fruid
69+
const simpleFruid = gui.addFolder("simpleFruid(fx)");
70+
simpleFruid.add(CONFIG.simpleFruid, "attenuation", 0, 1, 0.01);
71+
simpleFruid.add(CONFIG.simpleFruid, "alpha", 0, 1, 0.01);
72+
simpleFruid.add(CONFIG.simpleFruid, "beta", 0, 1, 0.01);
73+
simpleFruid.add(CONFIG.simpleFruid, "viscosity", 0, 1, 0.01);
74+
simpleFruid.add(CONFIG.simpleFruid, "forceRadius", 0, 100, 0.1);
75+
simpleFruid.add(CONFIG.simpleFruid, "forceCoefficient", 0, 1, 0.1);
76+
6277
//effect selector
63-
gui.add(CONFIG, "selectEffect", { Ripple: 0, fruid: 1 });
78+
gui.add(CONFIG, "selectEffect", {
79+
Ripple: 0,
80+
fruid: 1,
81+
brush: 2,
82+
simpleFruid: 3,
83+
});
6484
}, [gui]);
6585

6686
const updateDisplays = useCallback(() => {

‎app/fx/hooks/types/index.ts

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,29 @@
1+
import * as THREE from "three";
12
import { RootState } from "@react-three/fiber";
23

3-
export type HooksReturn<T, O> = [
4+
/**
5+
* @returns {HooksReturn<T, O>}
6+
* updateFx - A function to be called inside `useFrame` that returns a `THREE.Texture`.
7+
* setParams - A function to update the parameters, useful for performance tuning, etc.
8+
* fxObject - An object containing various FX components such as scene, camera, material, and render target.
9+
*
10+
* @template T The type for the parameters of the hooks.
11+
* @template O The type for the FX object.
12+
*/
13+
export type HooksReturn<T, O> = {
414
/**
515
* An update function that returns THREE.Texture. Call it inside useFrame
616
* @param props RootState
717
* @param params params of hooks
818
*/
9-
(props: RootState, params: T) => THREE.Texture,
19+
updateFx: (props: RootState, params: T) => THREE.Texture;
1020
/**
21+
* Function to update params. It can be used for performance control, etc.
1122
* @param params params of hooks
1223
*/
13-
(params: T) => void,
14-
fxObject: O
15-
];
24+
setParams: (params: T) => void;
25+
/**
26+
* Contains each part of FX such as scene, camera, material, render target, etc.
27+
*/
28+
fxObject: O;
29+
};

0 commit comments

Comments
 (0)