Skip to content

Commit a5c5f87

Browse files
author
takuma-hmng8
committed
2.16
1 parent 539a7b3 commit a5c5f87

File tree

13 files changed

+261
-19
lines changed

13 files changed

+261
-19
lines changed

‎app/ShaderFx.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,8 @@ export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
1212
<PerformanceMonitor
1313
factor={1}
1414
onChange={({ factor }) => {
15-
// console.log(`dpr:${dpr}`);
16-
setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
15+
console.log(`dpr:${dpr}`);
16+
// setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
1717
}}>
1818
<Suspense fallback={null}>{children}</Suspense>
1919
<Perf position={"bottom-left"} minimal={false} />

‎app/useBeat/FxMaterial.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ export type FxMaterialProps = {
1616
u_fx: THREE.Texture;
1717
u_noise: THREE.Texture;
1818
u_noiseIntensity: number;
19+
u_hash: number;
20+
u_fract: number;
21+
u_bbbb: THREE.Texture;
1922
};
2023

2124
export const FxMaterial = shaderMaterial(
@@ -24,6 +27,9 @@ export const FxMaterial = shaderMaterial(
2427
u_resolution: new THREE.Vector2(0, 0),
2528
u_fx: new THREE.Texture(),
2629
u_noise: new THREE.Texture(),
30+
u_bbbb: new THREE.Texture(),
31+
u_hash: 0,
32+
u_fract: 0,
2733
u_noiseIntensity: 0,
2834
},
2935

‎app/useBeat/Playground.tsx‎

Lines changed: 54 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import {
1111
useBrightnessPicker,
1212
useChromaKey,
1313
useBeat,
14+
useRipple,
15+
useMarble,
1416
useFxTexture,
1517
} from "@/packages/use-shader-fx/src";
1618
import {
@@ -33,30 +35,74 @@ export const Playground = () => {
3335
const ref = useRef<FxMaterialProps>();
3436

3537
const { size, viewport } = useThree();
36-
const video = useVideoTexture("/gorilla.mov");
37-
const glitch = useVideoTexture("/glitch.mov");
38+
const bbbb = useVideoTexture("/bbbb.mov");
39+
// const glitch = useVideoTexture("/glitch.mov");
3840

3941
const [updateNoise, set, { output: noise }] = useNoise({
4042
size,
4143
dpr: viewport.dpr,
4244
});
4345

46+
const [updateChromaKey, setChromaKey, { output: chromaKey }] = useChromaKey({
47+
size,
48+
dpr: viewport.dpr,
49+
});
50+
51+
setChromaKey({
52+
texture: bbbb,
53+
textureResolution: new THREE.Vector2(2952, 1510),
54+
keyColor: new THREE.Color(1.0, 1.0, 0.0),
55+
similarity: 0.2,
56+
contrast: 5,
57+
spill: 0.5,
58+
});
59+
60+
const [updateRipple, setRipple, { output: ripple }] = useRipple({
61+
texture: noise,
62+
size,
63+
dpr: viewport.dpr,
64+
});
65+
66+
const [updateMarble, setMarble, { output: marble }] = useMarble({
67+
size,
68+
dpr: viewport.dpr,
69+
});
70+
4471
const updateBeat = useBeat(157);
4572

4673
useFrame((props) => {
47-
const { beat, fract, hash } = updateBeat(props.clock);
48-
updateNoise(props, {
74+
// updateRipple(props);
75+
// updateNoise(props);
76+
const { beat, fract, floor, hash } = updateBeat(props.clock);
77+
updateChromaKey(props);
78+
updateMarble(props, {
4979
beat: beat,
80+
timeStrength: fract * 0.05,
81+
scale: Math.max(hash * 0.01, 0.002),
82+
complexity: Math.max(hash * 2, 1),
83+
complexityAttenuation: hash,
84+
pattern: hash * 10,
5085
});
51-
ref.current!.u_noiseIntensity =
52-
hash > 0.5 ? hash * fract : hash * fract * -1;
53-
ref.current!.u_fx = hash > 0.5 ? glitch : video;
86+
ref.current!.u_hash = hash;
87+
ref.current!.u_fract = fract;
88+
// updateNoise(props, {
89+
// beat: beat,
90+
// });
91+
// ref.current!.u_noiseIntensity =
92+
// hash > 0.5 ? hash * fract : hash * fract * -1;
93+
// ref.current!.u_fx = hash > 0.5 ? glitch : noise;
5494
});
5595

5696
return (
5797
<mesh>
5898
<planeGeometry args={[2, 2]} />
59-
<fxMaterial key={FxMaterial.key} u_noise={noise} ref={ref} />
99+
<fxMaterial
100+
key={FxMaterial.key}
101+
u_fx={marble}
102+
u_noise={noise}
103+
u_bbbb={chromaKey}
104+
ref={ref}
105+
/>
60106
</mesh>
61107
);
62108
};

‎app/useBeat/main.frag‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,30 @@ precision highp float;
22
varying vec2 vUv;
33
uniform sampler2D u_fx;
44
uniform sampler2D u_noise;
5+
uniform sampler2D u_bbbb;
6+
uniform float u_hash;
57
uniform float u_noiseIntensity;
8+
uniform float u_fract;
9+
10+
vec3 color0 = vec3(0.2,0.2,0.2);
11+
vec3 color1 = vec3(1.,1.,0.);
12+
vec3 color2 = vec3(1.,1.,0.);
13+
vec3 color3 = vec3(1.,1.,0.);
614

715
void main() {
816
vec2 uv = vUv;
17+
18+
vec4 fx = texture2D(u_fx, uv);
919

10-
vec4 noise = texture2D(u_noise, uv);
20+
uv += fx.rg * (1.-u_fract) ;
21+
vec4 bbbb = texture2D(u_bbbb, uv);
1122

12-
uv += noise.rg * u_noiseIntensity;
23+
vec3 finalCol = mix(mix(color0, color1, fx.r), mix(color2, color3, fx.g), fx.b);
1324

14-
vec4 fx = texture2D(u_fx, uv);
25+
vec4 mixColor = mix(vec4(finalCol, 1.0),bbbb, u_hash > 0.7 ? bbbb.a : 0.);
26+
27+
mixColor.rgb*=smoothstep(.7,.3,length(uv-.5));
1528

16-
gl_FragColor = fx;
29+
gl_FragColor = mixColor;
30+
// gl_FragColor = vec4(finalCol, 1.0);
1731
}

‎next.config.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3+
// basePath: "/takuma/out",
4+
// output: "export",
35
webpack: (config, { isServer }) => {
46
// GLSLファイル用のルールを追加
57
config.module.rules.push({

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

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { useCallback, useMemo } from "react";
2+
import * as THREE from "three";
3+
import { useMesh } from "./useMesh";
4+
import { useCamera } from "../../utils/useCamera";
5+
import { RootState } from "@react-three/fiber";
6+
import { useSingleFBO } from "../../utils/useSingleFBO";
7+
import { setUniform } from "../../utils/setUniforms";
8+
import { HooksProps, HooksReturn } from "../types";
9+
import { useParams } from "../../utils/useParams";
10+
11+
export type MarbleParams = {
12+
pattern?: number;
13+
complexity?: number;
14+
complexityAttenuation?: number;
15+
iterations?: number;
16+
timeStrength?: number;
17+
scale?: number;
18+
/** you can get into the rhythm ♪ , default:null */
19+
beat?: number | null;
20+
};
21+
22+
export type MarbleObject = {
23+
scene: THREE.Scene;
24+
material: THREE.Material;
25+
camera: THREE.Camera;
26+
renderTarget: THREE.WebGLRenderTarget;
27+
output: THREE.Texture;
28+
};
29+
30+
export const MARBLE_PARAMS: MarbleParams = {
31+
pattern: 0,
32+
complexity: 2,
33+
complexityAttenuation: 0.2,
34+
iterations: 8,
35+
timeStrength: 0.2,
36+
scale: 0.002,
37+
beat: null,
38+
};
39+
40+
/**
41+
* @link https://github.com/takuma-hmng8/use-shader-fx#usage
42+
*/
43+
export const useMarble = ({
44+
size,
45+
dpr,
46+
samples = 0,
47+
}: HooksProps): HooksReturn<MarbleParams, MarbleObject> => {
48+
const scene = useMemo(() => new THREE.Scene(), []);
49+
const material = useMesh(scene);
50+
const camera = useCamera(size);
51+
const [renderTarget, updateRenderTarget] = useSingleFBO({
52+
scene,
53+
camera,
54+
size,
55+
dpr,
56+
samples,
57+
});
58+
59+
const [params, setParams] = useParams<MarbleParams>(MARBLE_PARAMS);
60+
61+
const updateFx = useCallback(
62+
(props: RootState, updateParams?: MarbleParams) => {
63+
const { gl, clock } = props;
64+
updateParams && setParams(updateParams);
65+
66+
setUniform(material, "u_pattern", params.pattern!);
67+
setUniform(material, "u_complexity", params.complexity!);
68+
setUniform(
69+
material,
70+
"u_complexityAttenuation",
71+
params.complexityAttenuation!
72+
);
73+
setUniform(material, "u_iterations", params.iterations!);
74+
setUniform(material, "u_timeStrength", params.timeStrength!);
75+
setUniform(material, "u_scale", params.scale!);
76+
77+
setUniform(material, "u_time", params.beat ?? clock.getElapsedTime());
78+
79+
return updateRenderTarget(gl);
80+
},
81+
[updateRenderTarget, material, setParams, params]
82+
);
83+
84+
return [
85+
updateFx,
86+
setParams,
87+
{
88+
scene: scene,
89+
material: material,
90+
camera: camera,
91+
renderTarget: renderTarget,
92+
output: renderTarget.texture,
93+
},
94+
];
95+
};

‎packages/use-shader-fx/src/hooks/useMarble/shader/main.frag‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
precision highp float;
2+
3+
varying vec2 vUv;
4+
uniform float u_time;
5+
uniform float u_pattern;
6+
uniform float u_complexity;
7+
uniform float u_complexityAttenuation;
8+
uniform float u_iterations;
9+
uniform float u_timeStrength;
10+
uniform float u_scale;
11+
12+
vec3 marble(vec3 p){
13+
vec4 n;
14+
float rand = u_pattern;
15+
float complexity = u_complexity;
16+
float complexityAttenuation = u_complexityAttenuation;
17+
float noiseIterations = u_iterations;
18+
19+
for(float i;i<u_iterations;i++){
20+
p+=sin(p.yzx + rand);
21+
n=complexity*n+vec4(cross(cos(p + rand),sin(p.zxy + rand)),1.)*(1.+i*complexityAttenuation);
22+
p*=complexity;
23+
}
24+
return n.xyz/n.w;
25+
}
26+
27+
void main() {
28+
float time = u_time * u_timeStrength;
29+
vec3 color = clamp(marble(vec3(gl_FragCoord.xy*u_scale,time)),0.,1.);
30+
gl_FragColor = vec4(color,1.);
31+
}
32+

‎packages/use-shader-fx/src/hooks/useMarble/shader/main.vert‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
varying vec2 vUv;
2+
3+
void main() {
4+
vUv = uv;
5+
gl_Position = vec4(position, 1.0);
6+
}

‎packages/use-shader-fx/src/hooks/useMarble/useMesh.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { useMemo } from "react";
2+
import * as THREE from "three";
3+
import vertexShader from "./shader/main.vert";
4+
import fragmentShader from "./shader/main.frag";
5+
import { useAddMesh } from "../../utils/useAddMesh";
6+
7+
export class MarbleMaterial extends THREE.ShaderMaterial {
8+
uniforms!: {
9+
u_time: { value: number };
10+
u_pattern: { value: number };
11+
u_complexity: { value: number };
12+
u_complexityAttenuation: { value: number };
13+
u_iterations: { value: number };
14+
u_timeStrength: { value: number };
15+
u_scale: { value: number };
16+
};
17+
}
18+
19+
export const useMesh = (scene: THREE.Scene) => {
20+
const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
21+
const material = useMemo(
22+
() =>
23+
new THREE.ShaderMaterial({
24+
uniforms: {
25+
u_time: { value: 0 },
26+
u_pattern: { value: 0 },
27+
u_complexity: { value: 0 },
28+
u_complexityAttenuation: { value: 0 },
29+
u_iterations: { value: 0 },
30+
u_timeStrength: { value: 0 },
31+
u_scale: { value: 0 },
32+
},
33+
vertexShader: vertexShader,
34+
fragmentShader: fragmentShader,
35+
}),
36+
[]
37+
);
38+
useAddMesh(scene, geometry, material);
39+
return material as MarbleMaterial;
40+
};

‎packages/use-shader-fx/src/hooks/useRipple/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const RIPPLE_PARAMS: RippleParams = {
3939

4040
interface UseRippleProps extends HooksProps {
4141
/** texture applied to ripple */
42-
texture: THREE.Texture;
42+
texture?: THREE.Texture;
4343
/** ripple size, default:64 */
4444
scale?: number;
4545
/** ripple max length, default:100 */
@@ -50,7 +50,7 @@ interface UseRippleProps extends HooksProps {
5050
* @link https://github.com/takuma-hmng8/use-shader-fx#usage
5151
*/
5252
export const useRipple = ({
53-
texture,
53+
texture = new THREE.Texture(),
5454
scale = 64,
5555
max = 100,
5656
size,

0 commit comments

Comments
 (0)