Skip to content

Commit c701f33

Browse files
takuma-hmng8takuma-hmng8
authored
Merge pull request #89 from FunTechInc/v1.1.10
V1.1.10
2 parents 732add5 + 2c71e8f commit c701f33

30 files changed

+1463
-922
lines changed

‎app/ShaderFx.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,29 @@ import { PerformanceMonitor } from "@react-three/drei";
88
export const ShaderFx = ({
99
children,
1010
preserveDrawingBuffer = false,
11+
shadows = false,
12+
isDprUpdate = true,
1113
}: {
1214
children: React.ReactNode;
1315
preserveDrawingBuffer?: boolean;
16+
shadows?: boolean;
17+
isDprUpdate?: boolean;
1418
}) => {
1519
const [dpr, setDpr] = useState(1.5);
1620
return (
1721
<Canvas
1822
dpr={dpr}
1923
gl={{ preserveDrawingBuffer: preserveDrawingBuffer }}
20-
shadows>
24+
shadows={shadows}>
2125
<PerformanceMonitor
2226
factor={1}
2327
onChange={({ factor }) => {
2428
if (preserveDrawingBuffer) {
2529
return;
2630
}
31+
if (!isDprUpdate) {
32+
return;
33+
}
2734
console.log(`dpr:${dpr}`);
2835
setDpr(Math.round((1.0 + 1.0 * factor) * 10) / 10);
2936
}}>

‎app/obscurus/FxMaterial.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as THREE from "three";
2+
import { shaderMaterial } from "@react-three/drei";
3+
4+
declare global {
5+
namespace JSX {
6+
interface IntrinsicElements {
7+
fxMaterial: any;
8+
}
9+
}
10+
}
11+
12+
export type FxMaterialProps = {
13+
u_fx: THREE.Texture;
14+
};
15+
16+
export const FxMaterial = shaderMaterial(
17+
{
18+
u_fx: new THREE.Texture(),
19+
},
20+
21+
`
22+
varying vec2 vUv;
23+
void main() {
24+
vUv = uv;
25+
gl_Position = vec4(position, 1.0);
26+
}
27+
`,
28+
`
29+
precision highp float;
30+
varying vec2 vUv;
31+
uniform sampler2D u_fx;
32+
33+
void main() {
34+
gl_FragColor = texture2D(u_fx,vUv);
35+
// gl_FragColor = vec4(1.,1.,0.,1.);
36+
}
37+
`
38+
);

‎app/obscurus/Playground.tsx‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
"use client";
2+
3+
import * as THREE from "three";
4+
import { useEffect, useMemo } from "react";
5+
import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
6+
import {
7+
useCreateWobble3D,
8+
Wobble3DParams,
9+
WOBBLE3D_PARAMS,
10+
useCreateMorphParticles,
11+
MorphParticlesParams,
12+
MORPHPARTICLES_PARAMS,
13+
} from "@/packages/use-shader-fx/src";
14+
import { FxMaterial } from "./FxMaterial";
15+
import GUI from "lil-gui";
16+
import { useGUI } from "@/utils/useGUI";
17+
import { OrbitControls, Environment } from "@react-three/drei";
18+
19+
extend({ FxMaterial });
20+
21+
const WOBBLE_CONFIG: Wobble3DParams = {
22+
...structuredClone(WOBBLE3D_PARAMS),
23+
color0: new THREE.Color(0x000000),
24+
color1: new THREE.Color(0x000000),
25+
color2: new THREE.Color(0x000000),
26+
color3: new THREE.Color(0x000000),
27+
wobbleStrength: 0.35,
28+
wobbleTimeFrequency: 0.2,
29+
warpStrength: 0.2,
30+
colorMix: 0.3,
31+
chromaticAberration: 0.05,
32+
anisotropicBlur: 0.2,
33+
distortion: 0.3,
34+
distortionScale: 0.5,
35+
temporalDistortion: 0.3,
36+
};
37+
38+
const MATERIAL_CONFIG: THREE.MeshPhysicalMaterialParameters = {
39+
iridescence: 0.1,
40+
metalness: 0.0,
41+
roughness: 0.0,
42+
transmission: 2,
43+
thickness: 1.2,
44+
transparent: true,
45+
};
46+
47+
const PARTICLE_CONFIG: MorphParticlesParams = {
48+
...structuredClone(MORPHPARTICLES_PARAMS),
49+
blurAlpha: 0.01,
50+
blurRadius: 0.6,
51+
pointSize: 0.4,
52+
sizeRandomIntensity: 1,
53+
sizeRandomMax: 2.5,
54+
sizeRandomMin: 0.8,
55+
sizeRandomTimeFrequency: 1,
56+
color0: new THREE.Color(0x000000),
57+
color1: new THREE.Color(0x000000),
58+
color2: new THREE.Color(0x000000),
59+
color3: new THREE.Color(0x000000),
60+
wobbleStrength: 0.4,
61+
warpStrength: 2.6,
62+
wobblePositionFrequency: 0.4,
63+
wobbleTimeFrequency: 0.4,
64+
warpTimeFrequency: 0.2,
65+
};
66+
67+
const setGUI = (gui: GUI) => {
68+
const wobble = gui.addFolder("Wobble3D");
69+
wobble.addColor(WOBBLE_CONFIG, "color0");
70+
wobble.addColor(WOBBLE_CONFIG, "color1");
71+
wobble.addColor(WOBBLE_CONFIG, "color2");
72+
wobble.addColor(WOBBLE_CONFIG, "color3");
73+
wobble.add(WOBBLE_CONFIG, "wobbleStrength", 0, 10, 0.01);
74+
wobble.add(WOBBLE_CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
75+
wobble.add(WOBBLE_CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
76+
wobble.add(WOBBLE_CONFIG, "warpStrength", 0, 10, 0.01);
77+
wobble.add(WOBBLE_CONFIG, "warpPositionFrequency", 0, 10, 0.01);
78+
wobble.add(WOBBLE_CONFIG, "warpTimeFrequency", 0, 10, 0.01);
79+
wobble.add(WOBBLE_CONFIG, "wobbleShine", 0, 5, 0.01);
80+
wobble.add(WOBBLE_CONFIG, "samples", 0, 10, 1);
81+
wobble.add(WOBBLE_CONFIG, "colorMix", 0, 1, 0.01);
82+
wobble.add(WOBBLE_CONFIG, "chromaticAberration", 0, 10, 0.01);
83+
wobble.add(WOBBLE_CONFIG, "anisotropicBlur", 0, 10, 0.01);
84+
wobble.add(WOBBLE_CONFIG, "distortion", 0, 10, 0.01);
85+
wobble.add(WOBBLE_CONFIG, "distortionScale", 0, 10, 0.01);
86+
wobble.add(WOBBLE_CONFIG, "temporalDistortion", 0, 10, 0.01);
87+
88+
const mpm = gui.addFolder("MeshPhysicalMaterial");
89+
mpm.add(MATERIAL_CONFIG, "iridescence", 0, 1, 0.01);
90+
mpm.add(MATERIAL_CONFIG, "metalness", 0, 1, 0.01);
91+
mpm.add(MATERIAL_CONFIG, "roughness", 0, 1, 0.01);
92+
mpm.add(MATERIAL_CONFIG, "transmission", 0, 10, 0.01);
93+
mpm.add(MATERIAL_CONFIG, "thickness", 0, 10, 0.01);
94+
95+
const particle = gui.addFolder("MorphParticles");
96+
particle.add(PARTICLE_CONFIG, "blurAlpha", 0, 1, 0.01);
97+
particle.add(PARTICLE_CONFIG, "blurRadius", 0, 2, 0.01);
98+
particle.add(PARTICLE_CONFIG, "pointSize", 0.01, 2, 0.01);
99+
particle.addColor(PARTICLE_CONFIG, "color0");
100+
particle.addColor(PARTICLE_CONFIG, "color1");
101+
particle.addColor(PARTICLE_CONFIG, "color2");
102+
particle.addColor(PARTICLE_CONFIG, "color3");
103+
particle.add(PARTICLE_CONFIG, "wobbleStrength", 0, 10, 0.01);
104+
particle.add(PARTICLE_CONFIG, "wobblePositionFrequency", 0, 10, 0.01);
105+
particle.add(PARTICLE_CONFIG, "wobbleTimeFrequency", 0, 10, 0.01);
106+
particle.add(PARTICLE_CONFIG, "warpStrength", 0, 10, 0.01);
107+
particle.add(PARTICLE_CONFIG, "warpPositionFrequency", 0, 10, 0.01);
108+
particle.add(PARTICLE_CONFIG, "warpTimeFrequency", 0, 10, 0.01);
109+
particle.add(PARTICLE_CONFIG, "displacementIntensity", 0, 10, 0.01);
110+
particle.add(PARTICLE_CONFIG, "displacementColorIntensity", 0, 40, 0.01);
111+
particle.add(PARTICLE_CONFIG, "sizeRandomIntensity", 0, 10, 0.01);
112+
particle.add(PARTICLE_CONFIG, "sizeRandomTimeFrequency", 0, 3, 0.01);
113+
particle.add(PARTICLE_CONFIG, "sizeRandomMin", 0, 1, 0.01);
114+
particle.add(PARTICLE_CONFIG, "sizeRandomMax", 1, 2, 0.01);
115+
particle.add(PARTICLE_CONFIG, "divergence", -2, 2, 0.1);
116+
return gui;
117+
};
118+
const setParticleConfig = () => {
119+
return {
120+
...PARTICLE_CONFIG,
121+
} as MorphParticlesParams;
122+
};
123+
const setWobbleConfig = () => {
124+
return {
125+
...WOBBLE_CONFIG,
126+
} as Wobble3DParams;
127+
};
128+
129+
export const Playground = () => {
130+
useGUI(setGUI);
131+
const [noise] = useLoader(THREE.TextureLoader, ["/noise.jpg"]);
132+
const { size, viewport } = useThree();
133+
const [updateWobble, wobble] = useCreateWobble3D({
134+
baseMaterial: THREE.MeshPhysicalMaterial,
135+
geometry: useMemo(() => new THREE.IcosahedronGeometry(2.4, 10), []),
136+
materialParameters: MATERIAL_CONFIG,
137+
});
138+
const [updateParticle, particles] = useCreateMorphParticles({
139+
size,
140+
dpr: viewport.dpr,
141+
geometry: useMemo(() => new THREE.IcosahedronGeometry(0.8, 10), []),
142+
});
143+
useEffect(() => {
144+
const particleMat = particles.points.material as THREE.ShaderMaterial;
145+
particleMat.blending = THREE.NormalBlending;
146+
}, [noise, updateParticle, particles.points.material]);
147+
148+
useFrame((props) => {
149+
updateWobble(props, {
150+
...setWobbleConfig(),
151+
});
152+
const mat = wobble.mesh.material as THREE.MeshPhysicalMaterial;
153+
mat.iridescence = MATERIAL_CONFIG.iridescence!;
154+
mat.metalness = MATERIAL_CONFIG.metalness!;
155+
mat.roughness = MATERIAL_CONFIG.roughness!;
156+
mat.transmission = MATERIAL_CONFIG.transmission!;
157+
mat.thickness = MATERIAL_CONFIG.thickness!;
158+
updateParticle(props, {
159+
...setParticleConfig(),
160+
alphaMap: noise,
161+
});
162+
});
163+
164+
return (
165+
<mesh>
166+
<OrbitControls />
167+
<Environment files={"/snowpark.exr"} background={true} />
168+
<primitive object={wobble.mesh} />
169+
<primitive object={particles.points} />
170+
</mesh>
171+
);
172+
};

‎app/obscurus/page.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { ShaderFx } from "../ShaderFx";
2+
import { Playground } from "./Playground";
3+
4+
export default function Page() {
5+
return (
6+
<div
7+
style={{
8+
position: "fixed",
9+
width: "100%",
10+
height: "100svh",
11+
pointerEvents: "none",
12+
}}>
13+
<ShaderFx>
14+
<Playground />
15+
</ShaderFx>
16+
</div>
17+
);
18+
}

‎app/useMorphParticles/Playground.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ const setGUI = (gui: GUI) => {
4242
gui.add(CONFIG, "warpTimeFrequency", 0, 10, 0.01);
4343
gui.add(CONFIG, "displacementIntensity", 0, 10, 0.01);
4444
gui.add(CONFIG, "displacementColorIntensity", 0, 40, 0.01);
45+
gui.add(CONFIG, "sizeRandomIntensity", 0, 10, 0.01);
46+
gui.add(CONFIG, "sizeRandomTimeFrequency", 0, 3, 0.01);
47+
gui.add(CONFIG, "sizeRandomMin", 0, 1, 0.01);
48+
gui.add(CONFIG, "sizeRandomMax", 1, 2, 0.01);
49+
gui.add(CONFIG, "divergence", -2, 2, 0.1);
4550
};
4651
const setConfig = () => {
4752
return {

‎app/useWobble3D/Playground.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ export const Playground = () => {
100100
===============================================*/
101101
const [updateWobble, wobble] = useCreateWobble3D({
102102
baseMaterial: THREE.MeshPhysicalMaterial,
103-
materialParameters: { ...MATERIAL_CONFIG },
103+
materialParameters: MATERIAL_CONFIG,
104104
});
105105

106106
useEffect(() => {
@@ -134,7 +134,7 @@ export const Playground = () => {
134134
castShadow
135135
/>
136136
<OrbitControls />
137-
<Environment preset="warehouse" background />
137+
<Environment preset="warehouse" background={true} />
138138
<primitive object={wobble.mesh} />
139139
<mesh receiveShadow position={[0, -4, -8]}>
140140
<planeGeometry args={[15, 15, 15]} />

‎app/useWobble3D/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function Page() {
1010
height: "100svh",
1111
pointerEvents: "none",
1212
}}>
13-
<ShaderFx>
13+
<ShaderFx shadows={true}>
1414
<Playground />
1515
</ShaderFx>
1616
</div>

0 commit comments

Comments
 (0)