Skip to content

Commit 7700e1a

Browse files
author
takuma-hmng8
committed
v1.1.8
1 parent 0838580 commit 7700e1a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+897
-891
lines changed

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

‎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/playground/CanvasConfig.ts‎

Lines changed: 0 additions & 146 deletions
This file was deleted.

0 commit comments

Comments
 (0)