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 d522ff1

Browse files
Merge pull request #116 from FunTechInc/v1.1.28
V1.1.28
2 parents 9f46b26 + 29b0cc5 commit d522ff1

File tree

43 files changed

+593
-377
lines changed

Some content is hidden

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

43 files changed

+593
-377
lines changed

‎app/_home/Playground.tsx‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -112,21 +112,22 @@ export const Playground = ({
112112
}),
113113
[hsv, marble]
114114
),
115-
onBeforeCompile: useCallback((shader: THREE.Shader) => {
116-
shader.fragmentShader = shader.fragmentShader.replace(
117-
"#usf <uniforms>",
118-
`
115+
onBeforeCompile: useCallback(
116+
(shader: THREE.WebGLProgramParametersWithUniforms) => {
117+
shader.fragmentShader = shader.fragmentShader.replace(
118+
"#usf <uniforms>",
119+
`
119120
uniform sampler2D u_noise;
120121
uniform float u_noiseIntensity;
121122
uniform sampler2D u_colorStrata;
122123
float rand(vec2 n) {
123124
return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
124125
}
125126
`
126-
);
127-
shader.fragmentShader = shader.fragmentShader.replace(
128-
"#usf <main>",
129-
`
127+
);
128+
shader.fragmentShader = shader.fragmentShader.replace(
129+
"#usf <main>",
130+
`
130131
vec2 uv = vUv;
131132
float grain=rand(uv+sin(uTime))*.4;
132133
grain=grain*.5+.5;
@@ -135,8 +136,10 @@ export const Playground = ({
135136
vec4 colorStrata = texture2D(u_colorStrata,uv);
136137
usf_FragColor = colorStrata*grain;
137138
`
138-
);
139-
}, []),
139+
);
140+
},
141+
[]
142+
),
140143
});
141144

142145
// set fxs

‎app/bananaStickers/Playground.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
"use client";
2+
3+
import { Environment } from "@react-three/drei";
4+
import { useStickers } from "./useStickers";
5+
6+
export const Playground = () => {
7+
const { sticker, setStickerState } = useStickers();
8+
9+
return (
10+
<mesh
11+
// geometry={balloon.nodes.ball.geometry}
12+
onClick={(e) => {
13+
setStickerState(e.uv!);
14+
}}>
15+
<Environment preset="city" />
16+
<icosahedronGeometry args={[2, 20]} />
17+
<meshPhysicalMaterial
18+
map={sticker}
19+
// ここからの設定はmapのalphaを乗算することでmapだけに適用される仕組み
20+
roughness={1}
21+
clearcoat={1}
22+
iridescence={1}
23+
metalness={1}
24+
iridescenceIOR={1}
25+
iridescenceThicknessRange={[0, 1400]}
26+
// ここまで
27+
// onBeforeCompile={(shader) => {
28+
// //mapのalphaをfloat変数に格納;
29+
// shader.fragmentShader = shader.fragmentShader.replace(
30+
// "#include <map_fragment>",
31+
// `
32+
// #include <map_fragment>
33+
// float customMapAlpha = sampledDiffuseColor.a;
34+
// `
35+
// );
36+
// // iridescenceにmapのalphaをかける(mapだけiridescenceする)
37+
// shader.fragmentShader = shader.fragmentShader.replace(
38+
// "#include <lights_fragment_begin>",
39+
// `
40+
// #include <lights_fragment_begin>
41+
// material.iridescenceFresnel *= customMapAlpha;
42+
// material.iridescenceF0 *= customMapAlpha;
43+
// `
44+
// );
45+
// // クリアコートにmapのalphaをかける(mapだけclearcoatする)
46+
// shader.fragmentShader = shader.fragmentShader.replace(
47+
// "outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + ( clearcoatSpecularDirect + clearcoatSpecularIndirect ) * material.clearcoat;",
48+
// `
49+
// outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + ( clearcoatSpecularDirect + clearcoatSpecularIndirect ) * material.clearcoat * customMapAlpha;
50+
// `
51+
// );
52+
// // roughnessにmapのalphaをかける(mapだけroughnessする)
53+
// shader.fragmentShader = shader.fragmentShader.replace(
54+
// "#include <lights_physical_fragment>",
55+
// `
56+
// #include <lights_physical_fragment>
57+
// material.roughness = clamp(material.roughness * customMapAlpha,.24,1.);
58+
// `
59+
// );
60+
// // metalnessにmapのalphaをかける(mapだけmetalnessする。あるいは強くする)
61+
// shader.fragmentShader = shader.fragmentShader.replace(
62+
// "#include <metalnessmap_fragment>",
63+
// `
64+
// #include <metalnessmap_fragment>
65+
// metalnessFactor *= customMapAlpha;
66+
// `
67+
// );
68+
// console.log(shader.fragmentShader);
69+
// }}
70+
/>
71+
</mesh>
72+
);
73+
};

‎app/bananaStickers/page.tsx‎

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

‎app/bananaStickers/useStickers.ts‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
import * as THREE from "three";
2+
import { useMemo, useCallback, useReducer } from "react";
3+
import { useFrame, useThree, useLoader } from "@react-three/fiber";
4+
import { useBlank } from "@/packages/use-shader-fx/src";
5+
6+
type StickersState = {
7+
point: THREE.Vector2;
8+
sticker?: THREE.Texture;
9+
size?: number;
10+
};
11+
12+
const STICKERSIZE = {
13+
min: 0.04,
14+
max: 0.1,
15+
};
16+
17+
export const useStickers = () => {
18+
const stickers = useLoader(THREE.TextureLoader, [
19+
"/stickers/sticker0.png",
20+
"/stickers/sticker1.png",
21+
"/stickers/sticker2.png",
22+
"/stickers/sticker3.png",
23+
"/stickers/sticker4.png",
24+
"/stickers/sticker5.png",
25+
"/stickers/sticker6.png",
26+
"/stickers/sticker8.png",
27+
"/stickers/sticker9.png",
28+
"/stickers/sticker10.png",
29+
"/stickers/sticker11.png",
30+
"/stickers/sticker12.png",
31+
"/stickers/sticker13.png",
32+
"/stickers/sticker14.png",
33+
"/stickers/sticker15.png",
34+
"/stickers/sticker16.png",
35+
]);
36+
const { size } = useThree();
37+
38+
const [updateBlank, _, { output: sticker }] = useBlank({
39+
size,
40+
dpr: 4,
41+
uniforms: useMemo(
42+
() => ({
43+
uStampPoint: {
44+
value: new THREE.Vector2(0),
45+
},
46+
uRandomSize: {
47+
value: STICKERSIZE.min,
48+
},
49+
}),
50+
[]
51+
),
52+
onBeforeCompile: useCallback((shader: any) => {
53+
shader.fragmentShader = shader.fragmentShader.replace(
54+
"#usf <uniforms>",
55+
`
56+
uniform vec2 uStampPoint;
57+
uniform float uRandomSize;
58+
`
59+
);
60+
61+
shader.fragmentShader = shader.fragmentShader.replace(
62+
"#usf <main>",
63+
`
64+
vec2 uv = vUv;
65+
vec2 stamp = uStampPoint;
66+
67+
// バッファー取得
68+
vec4 backColor = texture2D(uBackbuffer,uv);
69+
70+
uv.x *= 2.;
71+
stamp.x *= 2.;
72+
73+
// 距離と半径
74+
float d = distance(uv, stamp);
75+
float r = uRandomSize;
76+
77+
// スタンプ
78+
vec4 stampColor = texture2D(uTexture,(uv-stamp)/(r*2.)+.5);
79+
80+
// 最終色
81+
vec4 finalColor = d<r ? mix(backColor,stampColor,stampColor.a) : backColor;
82+
83+
usf_FragColor = finalColor;
84+
`
85+
);
86+
}, []),
87+
});
88+
89+
const [stickerState, setStickerState] = useReducer(
90+
(state: StickersState, point: THREE.Vector2): StickersState => {
91+
return {
92+
...state,
93+
point: point,
94+
sticker: stickers[Math.floor(Math.random() * stickers.length)],
95+
size:
96+
Math.random() * (STICKERSIZE.max - STICKERSIZE.min) +
97+
STICKERSIZE.min,
98+
};
99+
},
100+
{
101+
point: new THREE.Vector2(0, 0),
102+
sticker: stickers[0],
103+
size: STICKERSIZE.max,
104+
}
105+
);
106+
107+
useFrame((state) => {
108+
updateBlank(
109+
state,
110+
{
111+
texture: stickerState.sticker,
112+
},
113+
{
114+
uStampPoint: stickerState.point,
115+
uRandomSize: stickerState.size,
116+
}
117+
);
118+
});
119+
120+
return { sticker, setStickerState };
121+
};

0 commit comments

Comments
(0)

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