Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 25ea910

Browse files
Merge pull request #109 from FunTechInc/v1.1.18
fix:remove `wobbleMap`
2 parents aacdf7c + 00fbf6b commit 25ea910

File tree

14 files changed

+726
-820
lines changed

14 files changed

+726
-820
lines changed

‎app/expo2025/Playground.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
import { FxMaterial } from "./FxMaterial";
1212
import GUI from "lil-gui";
1313
import { useGUI } from "@/utils/useGUI";
14+
import { Environment } from "@react-three/drei";
1415

1516
extend({ FxMaterial });
1617

@@ -20,8 +21,6 @@ const CONFIG: Wobble3DParams = {
2021
wobbleTimeFrequency: 0.2,
2122
warpStrength: 0.0,
2223
colorMix: 0,
23-
edgeThreshold: 0.2,
24-
edgeColor: new THREE.Color(0xff9286),
2524
};
2625

2726
const setGUI = (gui: GUI) => {
@@ -31,8 +30,6 @@ const setGUI = (gui: GUI) => {
3130
gui.addColor(CONFIG, "color3");
3231
gui.add(CONFIG, "wobbleStrength", 0, 2, 0.01);
3332
gui.add(CONFIG, "colorMix", 0, 1, 0.01);
34-
gui.add(CONFIG, "edgeThreshold", 0, 1, 0.01);
35-
gui.addColor(CONFIG, "edgeColor");
3633
return gui;
3734
};
3835
const setConfig = () => {
@@ -43,11 +40,12 @@ const setConfig = () => {
4340

4441
const MyakuMyaku = (props: MeshProps) => {
4542
const [updateWobble, wobble] = useCreateWobble3D({
46-
geometry: useMemo(() => new THREE.SphereGeometry(2, 20, 20), []),
47-
baseMaterial: THREE.MeshToonMaterial,
43+
baseMaterial: THREE.MeshStandardMaterial,
4844
materialParameters: useMemo(
4945
() => ({
5046
color: new THREE.Color(0xd53220),
47+
metalness: 0.16,
48+
roughness: 0.16,
5149
}),
5250
[]
5351
),
@@ -123,7 +121,7 @@ export const Playground = () => {
123121

124122
return (
125123
<mesh>
126-
<directionalLightposition={[0.25,2,3]}intensity={3} />
124+
<Environmentpreset="warehouse" />
127125
<MyakuMyaku position={[-6, 0, 0]} scale={[1, 1, 1]} />
128126
<MyakuMyaku
129127
position={[-4, 3.5, 0]}

‎app/playground/Playground.tsx‎

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {
1818
useSimpleBlur,
1919
usePointer,
2020
useNoise,
21+
useCreateWobble3D,
2122
} from "@/packages/use-shader-fx/src";
2223
import { FxMaterial } from "./FxMaterial";
2324
import { OrbitControls, useVideoTexture } from "@react-three/drei";
@@ -35,63 +36,49 @@ export const Playground = () => {
3536
});
3637
const [funkun] = useLoader(THREE.TextureLoader, ["/funkun.jpg"]);
3738

38-
const [updateCover,setCover, { output: cover }] = useCoverTexture({
39+
const [updateNoise,setNoise, { output: noise }] = useNoise({
3940
size,
40-
dpr: 0.01,
41+
dpr: 0.2,
4142
});
42-
setCover({
43-
texture: funkun_mov,
43+
setNoise({
44+
noiseOctaves: 1,
45+
fbmOctaves: 1,
46+
warpOctaves: 1,
47+
timeStrength: 1,
48+
scale: 2000,
4449
});
4550

46-
const [updateMotionBlur, setMotionBlur, { output: motionblur }] =
47-
useMotionBlur({
48-
size,
49-
dpr: 0.1,
50-
onBeforeCompile: useCallback((shader: THREE.Shader) => {
51-
// shader.fragmentShader = shader.fragmentShader.replace(
52-
// "gl_FragColor = mixed;",
53-
// "gl_FragColor = vec4(0.2,1.,0.2,1.);"
54-
// );
55-
console.log(shader.fragmentShader);
56-
}, []),
57-
});
58-
setMotionBlur({
59-
texture: cover,
60-
strength: 0.95,
51+
const [updateWobble, wobble] = useCreateWobble3D({
52+
materialParameters: {
53+
color: "hotpink",
54+
// displacementMap: noise,
55+
// displacementScale: 2,
56+
},
6157
});
6258

63-
const [updateBlur, setBlur, { output: blur }] = useSimpleBlur({
64-
size,
65-
dpr: 0.06,
66-
});
67-
setBlur({
68-
texture: motionblur,
69-
blurSize: 1,
70-
blurPower: 5,
71-
});
72-
73-
const [updateNoise, , { output: noise }] = useNoise({
74-
size,
75-
dpr: 0.2,
59+
updateWobble(null, {
60+
// wobbleStrength: 0.0,
61+
// colorMix: 0,
7662
});
7763

78-
const updatePointer = usePointer();
7964
useFrame((props) => {
80-
// const pointer = updatePointer(props.pointer);
81-
// updateCover(props);
82-
// updateMotionBlur(props, {
83-
// begin: pointer.prevPointer.divideScalar(3),
84-
// end: pointer.currentPointer.divideScalar(3),
85-
// });
86-
// updateBlur(props);
87-
updateNoise(props);
65+
updateWobble(props);
66+
// updateNoise(props);
8867
});
8968

9069
return (
9170
<>
9271
<mesh>
93-
<planeGeometry args={[2, 2]} />
94-
<fxMaterial u_fx={noise} key={FxMaterial.key} />
72+
<directionalLight
73+
color={"white"}
74+
position={[0.25, 2, 3]}
75+
intensity={2}
76+
/>
77+
<ambientLight intensity={1} />
78+
<primitive object={wobble.mesh} />
79+
{/* <icosahedronGeometry args={[2, 20]} />
80+
<meshPhysicalMaterial color={"hotpink"} displacementMap={noise} /> */}
81+
<OrbitControls />
9582
</mesh>
9683
</>
9784
);

‎app/playground/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+
<ShaderFxisDprUpdate={false}>
1414
<Playground />
1515
</ShaderFx>
1616
</div>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /