Skip to content

Commit 76a619e

Browse files
author
takuma-hmng8
committed
2.25
1 parent 89f01c3 commit 76a619e

File tree

17 files changed

+470
-79
lines changed

17 files changed

+470
-79
lines changed

‎app/comingsoon/FxMaterial.tsx‎

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

‎app/comingsoon/Playground.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
"use client";
2+
3+
import * as THREE from "three";
4+
import { useEffect, useRef } from "react";
5+
import { useFrame, useThree, extend } from "@react-three/fiber";
6+
import {
7+
useNoise,
8+
useColorStrata,
9+
useMarble,
10+
useHSV,
11+
useBeat,
12+
} from "@/packages/use-shader-fx/src";
13+
import { FxMaterial, FxMaterialProps } from "./FxMaterial";
14+
import { useFBX } from "@react-three/drei";
15+
16+
extend({ FxMaterial });
17+
18+
const CONFIG = {
19+
marble: {
20+
pattern: 10,
21+
complexity: 1.5,
22+
complexityAttenuation: 0.2,
23+
scale: 0.002,
24+
},
25+
colorStrata: {
26+
laminateLayer: 6,
27+
scale: 0.2,
28+
laminateInterval: new THREE.Vector2(0.55, 0.23),
29+
laminateDetail: new THREE.Vector2(0, 3.5),
30+
distortion: new THREE.Vector2(1.64, 4.22),
31+
colorFactor: new THREE.Vector3(0.6, 0.1, 0),
32+
},
33+
hsv: {
34+
brightness: 0.8,
35+
saturation: 0.8,
36+
},
37+
noiseIntensity: 2,
38+
random: () => {
39+
CONFIG.marble.pattern = Math.random() * 1000;
40+
CONFIG.marble.complexity = Math.random() * 10;
41+
CONFIG.marble.complexityAttenuation = Math.random();
42+
CONFIG.marble.scale = Math.random() * 0.001;
43+
CONFIG.colorStrata.laminateLayer = Math.random() * 100;
44+
CONFIG.colorStrata.scale = Math.max(Math.random(), 0.1);
45+
CONFIG.colorStrata.laminateInterval = new THREE.Vector2(
46+
Math.max(Math.random(), 0.2),
47+
Math.max(Math.random(), 0.2)
48+
);
49+
CONFIG.colorStrata.laminateDetail = new THREE.Vector2(
50+
Math.random() * 8,
51+
Math.random() * 8
52+
);
53+
CONFIG.colorStrata.distortion = new THREE.Vector2(
54+
Math.random() * 10,
55+
Math.random() * 10
56+
);
57+
CONFIG.colorStrata.colorFactor = new THREE.Vector3(
58+
Math.random(),
59+
Math.random(),
60+
Math.random()
61+
);
62+
CONFIG.noiseIntensity = Math.random() * 10;
63+
},
64+
save: () => {},
65+
};
66+
67+
const setConfig = (key: "marble" | "colorStrata" | "hsv") => {
68+
return {
69+
...CONFIG[key],
70+
};
71+
};
72+
73+
// function FunKun() {
74+
// let fbx = useFBX("/funkun.fbx");
75+
// return <primitive object={fbx} scale={0.1} />;
76+
// }
77+
78+
export const Playground = () => {
79+
const ref = useRef<FxMaterialProps>();
80+
81+
useEffect(() => {
82+
CONFIG.random();
83+
}, []);
84+
85+
const { size, viewport } = useThree();
86+
const [updateNoise, setNoise, { output: noise }] = useNoise({
87+
size,
88+
dpr: viewport.dpr,
89+
});
90+
const [updateColorStrata, setColorStrata, { output: colorStrata }] =
91+
useColorStrata({ size, dpr: viewport.dpr });
92+
const [updateMarble, setMarble, { output: marble }] = useMarble({
93+
size,
94+
dpr: viewport.dpr,
95+
});
96+
const [updateHSV, setHSV, { output: hsv }] = useHSV({
97+
size,
98+
dpr: viewport.dpr,
99+
});
100+
101+
setNoise({
102+
scale: 1000,
103+
warpOctaves: 1,
104+
noiseOctaves: 1,
105+
fbmOctaves: 1,
106+
timeStrength: 1,
107+
});
108+
109+
setMarble({
110+
...setConfig("marble"),
111+
timeStrength: 0.5,
112+
});
113+
114+
setColorStrata({
115+
...setConfig("colorStrata"),
116+
timeStrength: new THREE.Vector2(0, 0),
117+
});
118+
119+
setHSV({
120+
...setConfig("hsv"),
121+
texture: colorStrata,
122+
});
123+
124+
const beting = useBeat(110);
125+
const hashMemo = useRef(0);
126+
127+
useFrame((props) => {
128+
const { beat, hash } = beting(props.clock);
129+
if (hash !== hashMemo.current) {
130+
hashMemo.current = hash;
131+
CONFIG.random();
132+
}
133+
updateNoise(props);
134+
updateColorStrata(props, {
135+
...(setConfig("colorStrata") as any),
136+
});
137+
updateHSV(props, {
138+
...(setConfig("hsv") as any),
139+
});
140+
updateMarble(props, {
141+
...(setConfig("marble") as any),
142+
beat: beat,
143+
});
144+
ref.current!.u_noiseIntensity = CONFIG.noiseIntensity;
145+
});
146+
147+
return (
148+
// <mesh>
149+
// <ambientLight />
150+
// <pointLight position={[10, 10, 10]} />
151+
// <FunKun />
152+
// </mesh>
153+
<mesh>
154+
<planeGeometry args={[2, 2]} />
155+
<fxMaterial
156+
key={FxMaterial.key}
157+
u_noise={marble}
158+
u_grain={noise}
159+
u_colorStrata={hsv}
160+
ref={ref}
161+
/>
162+
</mesh>
163+
);
164+
};

‎app/comingsoon/main.frag‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
precision highp float;
2+
varying vec2 vUv;
3+
uniform sampler2D u_noise;
4+
uniform float u_noiseIntensity;
5+
uniform sampler2D u_colorStrata;
6+
uniform sampler2D u_grain;
7+
8+
void main() {
9+
10+
vec2 uv = vUv;
11+
vec4 grain = texture2D(u_grain, uv);
12+
vec4 noise = texture2D(u_noise, uv);
13+
14+
uv += grain.rg;
15+
uv += noise.rg * u_noiseIntensity;
16+
vec4 colorStrata = texture2D(u_colorStrata,uv);
17+
18+
gl_FragColor = colorStrata;
19+
gl_FragColor.a = 1.0;
20+
}

‎app/comingsoon/page.tsx‎

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

‎app/useBrush/Playground.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
Easing,
2020
usePointer,
2121
useAlphaBlending,
22+
useCoverTexture,
2223
} from "@/packages/use-shader-fx/src";
2324

2425
import { FxMaterial, FxMaterialProps } from "./FxMaterial";
@@ -52,6 +53,16 @@ export const Playground = () => {
5253
dpr: viewport.dpr,
5354
});
5455

56+
const [updateCover, setCover, { output: cover }] = useCoverTexture({
57+
size,
58+
dpr: viewport.dpr,
59+
});
60+
61+
setCover({
62+
texture: bbbb,
63+
textureResolution: new THREE.Vector2(2952, 1510),
64+
});
65+
5566
setCS({
5667
laminateLayer: 20,
5768
scale: 0.48,
@@ -95,6 +106,7 @@ export const Playground = () => {
95106
updateBrush(props, {
96107
pointerValues: pointerValues,
97108
});
109+
// updateCover(props);
98110
// updateMarble(props);
99111
// updateAlphaBlending(props);
100112
// const { beat, fract, floor, hash } = updateBeat(props.clock);

‎packages/use-shader-fx/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
{
22
"name": "@hmng8/use-shader-fx",
33
"version": "1.0.50",
4-
"description": "The only difficult part is coding the shaders",
4+
"description": "More FXs, Less GLSL",
55
"main": "./build/use-shader-fx.umd.cjs",
66
"module": "./build/use-shader-fx.js",
77
"types": "./types/index.d.ts",
8+
"sideEffects": false,
89
"exports": {
910
".": {
1011
"types": "./types/index.d.ts",
@@ -26,7 +27,7 @@
2627
"react",
2728
"next"
2829
],
29-
"author": "HASHIMOTO Takuma",
30+
"author": "HASHIMOTO Takuma (https://github.com/takuma-hmng8) from FunTech (https://github.com/FunTechInc)",
3031
"license": "MIT",
3132
"files": [
3233
"build",

‎packages/use-shader-fx/src/fxs/effects/useSimpleBlur/index.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import type { HooksProps, HooksReturn } from "../../types";
1212

1313
export type SimpleBlurParams = {
1414
/** Make this texture blur , Default:new THREE.Texture() */
15-
texture: THREE.Texture;
15+
texture?: THREE.Texture;
1616
/** blurSize, default:3 */
17-
blurSize: number;
17+
blurSize?: number;
1818
/** blurPower, affects performance default:5 */
19-
blurPower: number;
19+
blurPower?: number;
2020
};
2121

2222
export type SimpleBlurObject = {
@@ -62,16 +62,16 @@ export const useSimpleBlur = ({
6262

6363
updateParams && setParams(updateParams);
6464

65-
setUniform(material, "uTexture", params.texture);
65+
setUniform(material, "uTexture", params.texture!);
6666
setUniform(material, "uResolution", [
67-
params.texture.source.data.width,
68-
params.texture.source.data.height,
67+
params.texture!.source.data.width,
68+
params.texture!.source.data.height,
6969
]);
70-
setUniform(material, "uBlurSize", params.blurSize);
70+
setUniform(material, "uBlurSize", params.blurSize!);
7171

7272
let _tempTexture: THREE.Texture = updateTempTexture(gl);
7373

74-
const iterations = params.blurPower;
74+
const iterations = params.blurPower!;
7575
for (let i = 0; i < iterations; i++) {
7676
setUniform(material, "uTexture", _tempTexture);
7777
_tempTexture = updateTempTexture(gl);

‎packages/use-shader-fx/src/fxs/interactions/useBrush/index.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,11 @@ import { useParams } from "../../../utils/useParams";
1010
import { DoubleRenderTarget, useDoubleFBO } from "../../../utils/useDoubleFBO";
1111

1212
export type BrushParams = {
13-
/** Texture applied to the brush, textureがtrueの場合はcolorよりも優先するよ , default:false */
13+
/** Texture applied to the brush, If texture is true, it will take precedence over color , default:false */
1414
texture?: THREE.Texture | false;
15-
/** fxマップをつけられるよ , default:false */
15+
/** You can attach an fx map , default:false */
1616
map?: THREE.Texture | false;
17-
/** default:0.1 */
17+
/** map intensity , default:0.1 */
1818
mapIntensity?: number;
1919
/** size of the stamp, percentage of the size ,default:0.05 */
2020
radius?: number;
@@ -28,9 +28,9 @@ export type BrushParams = {
2828
motionSample?: number;
2929
/** brush color , it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */
3030
color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;
31-
/** 速度が失ってもカーソルに追従する */
31+
/** Follows the cursor even if it loses speed , default:false */
3232
isCursor?: boolean;
33-
/** 筆圧 , default : 1.0 */
33+
/** brush pressure (0 to 1) , default : 1.0 */
3434
pressure?: number;
3535
/** When calling usePointer in a frame loop, setting PointerValues ​​to this value prevents double calls , default:null */
3636
pointerValues?: PointerValues | null;

‎packages/use-shader-fx/src/fxs/noises/useMarble/index.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ import { HooksProps, HooksReturn } from "../../types";
99
import { useParams } from "../../../utils/useParams";
1010

1111
export type MarbleParams = {
12-
/** 0 */
12+
/** You can add random patterns to noise by passing random numbers ,default:0 */
1313
pattern?: number;
14-
/** 2 */
14+
/** default:2 */
1515
complexity?: number;
16-
/** .2 */
16+
/** default:.2 */
1717
complexityAttenuation?: number;
18-
/** 8 */
18+
/** default:8 */
1919
iterations?: number;
20-
/** .2 */
20+
/** default:.2 */
2121
timeStrength?: number;
22-
/** 0.002 */
22+
/** default:0.002 */
2323
scale?: number;
2424
/** you can get into the rhythm ♪ , default:null */
2525
beat?: number | null;

‎packages/use-shader-fx/src/fxs/utils/useAlphaBlending/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ import { useParams } from "../../../utils/useParams";
99
import { useSingleFBO } from "../../../utils/useSingleFBO";
1010

1111
export type AlphaBlendingParams = {
12-
/** , default: */
12+
/** default:THREE.Texture()*/
1313
texture?: THREE.Texture;
14-
/** , default: */
14+
/** alpha map , default:THREE.Texture() */
1515
map?: THREE.Texture;
1616
};
1717

0 commit comments

Comments
 (0)