Skip to content

Commit c6a22ed

Browse files
author
takuma-hmng8
committed
v1.1.30
1 parent 29b0cc5 commit c6a22ed

File tree

196 files changed

+67941
-9628
lines changed

Some content is hidden

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

196 files changed

+67941
-9628
lines changed

‎.storybook/stories/UseBlank.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import * as React from "react";
2-
import * as THREE from "three";
32
import { useFrame, extend, useThree } from "@react-three/fiber";
43
import { FxMaterial } from "../../utils/fxMaterial";
5-
64
import { useBlank } from "../../packages/use-shader-fx/src";
75
import { BlankParams } from "../../packages/use-shader-fx/src/fxs/misc/useBlank";
6+
import { OnBeforeInitParameters } from "../../packages/use-shader-fx/src/fxs/types";
87

98
extend({ FxMaterial });
109

@@ -25,7 +24,7 @@ export const UseBlank = (args: BlankParams) => {
2524
const [updateBlank, _, { output: blank }] = useBlank({
2625
size,
2726
dpr: dpr,
28-
onBeforeCompile: React.useCallback((shader: THREE.Shader) => {
27+
onBeforeInit: React.useCallback((shader: OnBeforeInitParameters) => {
2928
shader.fragmentShader = shader.fragmentShader.replace(
3029
"#usf <main>",
3130
`float t=uTime,c;vec2 z,n=vec2(cos(t),sin(t));z=vUv*2.-1.;for(int i=0;i<12;i++){if(dot(z,z)>8.)discard;z=vec2(z.x*z.x-z.y*z.y,z.x*z.y)+n;}c=cos(length(z)+log(length(z)));usf_FragColor=vec4(vec3(c),1.);`

‎.storybook/stories/UseBlending.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@ export const UseBlending = (args: BlendingParams) => {
5050
const colorVec = React.useMemo(() => new THREE.Vector3(), []);
5151

5252
setFluid({
53-
density_dissipation: 0.92,
54-
velocity_dissipation: 0.99,
55-
velocity_acceleration: 12.0,
56-
splat_radius: 0.015,
57-
curl_strength: 5.0,
58-
pressure_iterations: 4,
59-
fluid_color: (velocity: THREE.Vector2) => {
53+
densityDissipation: 0.92,
54+
velocityDissipation: 0.99,
55+
velocityAcceleration: 12.0,
56+
splatRadius: 0.015,
57+
curlStrength: 5.0,
58+
pressureIterations: 4,
59+
fluidColor: (velocity: THREE.Vector2) => {
6060
const rCol = Math.max(0.0, Math.abs(velocity.x) * 150);
6161
const gCol = Math.max(0.0, Math.abs(velocity.y) * 150);
6262
const bCol = Math.max(0.1, (rCol + gCol) / 2);

‎.storybook/stories/UseFluid.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ extend({ FxMaterial });
1818

1919
const CONFIG: FluidParams = structuredClone(FLUID_PARAMS);
2020
const setGUI = (gui: GUI) => {
21-
gui.add(CONFIG, "density_dissipation", 0, 1, 0.01);
22-
gui.add(CONFIG, "velocity_dissipation", 0, 1, 0.01);
23-
gui.add(CONFIG, "velocity_acceleration", 0, 100, 1);
24-
gui.add(CONFIG, "pressure_dissipation", 0, 1, 0.01);
25-
gui.add(CONFIG, "pressure_iterations", 0, 30, 1);
26-
gui.add(CONFIG, "curl_strength", 0, 100, 1);
27-
gui.add(CONFIG, "splat_radius", 0, 0.2, 0.001);
21+
gui.add(CONFIG, "densityDissipation", 0, 1, 0.01);
22+
gui.add(CONFIG, "velocityDissipation", 0, 1, 0.01);
23+
gui.add(CONFIG, "velocityAcceleration", 0, 100, 1);
24+
gui.add(CONFIG, "pressureDissipation", 0, 1, 0.01);
25+
gui.add(CONFIG, "pressureIterations", 0, 30, 1);
26+
gui.add(CONFIG, "curlStrength", 0, 100, 1);
27+
gui.add(CONFIG, "splatRadius", 0, 0.2, 0.001);
2828
};
2929
const setConfig = () => {
3030
return {
@@ -44,8 +44,8 @@ export const UseFluid = (args: FluidParams) => {
4444
dpr,
4545
customFluidProps: {
4646
curl: {
47-
onBeforeCompile: React.useCallback((shader: THREE.Shader) => {
48-
// console.log(shader.fragmentShader);
47+
onBeforeInit: React.useCallback((shader: any) => {
48+
console.log(shader.fragmentShader);
4949
}, []),
5050
},
5151
},

‎.storybook/stories/UseRipple.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,15 @@ import {
99
RippleParams,
1010
RIPPLE_PARAMS,
1111
} from "../../packages/use-shader-fx/src/fxs/simulations/useRipple";
12+
import { OnBeforeInitParameters } from "../../packages/use-shader-fx/src/fxs/types";
1213

1314
extend({ FxMaterial });
1415

1516
const CONFIG: RippleParams = structuredClone(RIPPLE_PARAMS);
1617
const setGUI = (gui: GUI) => {
1718
gui.add(CONFIG, "frequency", 0, 0.1, 0.01);
1819
gui.add(CONFIG, "rotation", 0, 1, 0.01);
19-
gui.add(CONFIG, "fadeout_speed", 0, 0.99, 0.01);
20+
gui.add(CONFIG, "fadeoutSpeed", 0, 0.99, 0.01);
2021
gui.add(CONFIG, "scale", 0, 1, 0.01);
2122
gui.add(CONFIG, "alpha", 0, 1, 0.01);
2223
};
@@ -36,13 +37,10 @@ export const UseRipple = (args: RippleParams) => {
3637
texture: ripple,
3738
dpr: viewport.dpr,
3839
max: 80,
39-
uniforms: React.useMemo(
40-
() => ({
40+
onBeforeInit: React.useCallback((shader: OnBeforeInitParameters) => {
41+
Object.assign(shader.uniforms, {
4142
testtest: { value: 0 },
42-
}),
43-
[]
44-
),
45-
onBeforeCompile: React.useCallback((shader: THREE.Shader) => {
43+
});
4644
shader.fragmentShader = shader.fragmentShader.replace(
4745
"void main() {",
4846
`

‎README.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in ar
8484
1. `updateFx` - Functions to update parameters and render.
8585
2. `updateParams` - Function to update parameters only.
8686
3. `fxObject` - An object that holds various FX components, such as scene, camera, mesh, renderTarget, and `output`(final rendered texture).
87-
4. `HooksProps` - `size`,`dpr`,`samples`,`isSizeUpdate`,`uniforms`,`onBeforeCompile`but may also be hook specific. ※ `isSizeUpdate` : Whether to `setSize` the FBO when updating size or dpr(default : `false`).
87+
4. `HooksProps` - `size`,`dpr`,`samples`,`isSizeUpdate`,`onBeforeInit` but may also be hook specific. ※ `isSizeUpdate` : Whether to `setSize` the FBO when updating size or dpr(default : `false`).
8888

8989
```js
9090
const [updateFx, updateParams, fxObject] = useSomeFx(HooksProps);
@@ -503,18 +503,18 @@ return (
503503

504504
# useBlank
505505

506-
By default, it is a blank canvas with nothing drawn on it. You can customise the shaders using `onBeforeCompile`.
506+
By default, it is a blank canvas with nothing drawn on it. You can customise the shaders using `onBeforeInit`.
507507

508508
Fragment shaders have `uTexture`,`uBackbuffer`,`uTime`,`uPointer` and `uResolution` as default uniforms.
509509

510510
```tsx
511511
const [updateBlank, _, { output: blank, material }] = useBlank({
512512
size,
513513
dpr: viewport.dpr,
514-
uniforms: {
515-
hoge: { value: 0 },
516-
},
517-
onBeforeCompile: useCallback((shader: THREE.Shader) => {
514+
onBeforeInit: useCallback((shader: OnBeforeInitParameters) => {
515+
Object.assign(shader.uniforms, {
516+
hoge: { value: 0 },
517+
});
518518
shader.fragmentShader = shader.fragmentShader.replace(
519519
"#usf <uniforms>",
520520
"uniform float hoge;"

‎app/ShaderFx.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { Suspense, useState } from "react";
44
import { Canvas } from "@react-three/fiber";
5-
// import { Perf } from "r3f-perf";
5+
import { Perf } from "r3f-perf";
66
import { PerformanceMonitor } from "@react-three/drei";
77

88
const Loading = () => {
@@ -54,7 +54,7 @@ export const ShaderFx = ({
5454
setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
5555
}}>
5656
{children}
57-
{/* <Perf position={"bottom-left"} minimal={false} /> */}
57+
<Perf position={"bottom-left"} minimal={false} />
5858
</PerformanceMonitor>
5959
</Canvas>
6060
</Suspense>

‎app/_home/Playground.tsx

+14-19
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
} from "@/packages/use-shader-fx/src";
1616

1717
import { Environment, OrbitControls } from "@react-three/drei";
18+
import { OnBeforeInitParameters } from "@/packages/use-shader-fx/src/fxs/types";
1819

1920
export const CONFIG = {
2021
marble: {
@@ -98,8 +99,8 @@ export const Playground = ({
9899
const [updateBlank, _, { output: blank }] = useBlank({
99100
size,
100101
dpr: viewport.dpr,
101-
uniforms: useMemo(
102-
() => ({
102+
onBeforeInit: useCallback((params: OnBeforeInitParameters) => {
103+
Object.assign(params.uniforms, {
103104
u_noise: {
104105
value: marble,
105106
},
@@ -109,25 +110,21 @@ export const Playground = ({
109110
u_colorStrata: {
110111
value: hsv,
111112
},
112-
}),
113-
[hsv, marble]
114-
),
115-
onBeforeCompile: useCallback(
116-
(shader: THREE.WebGLProgramParametersWithUniforms) => {
117-
shader.fragmentShader = shader.fragmentShader.replace(
118-
"#usf <uniforms>",
119-
`
113+
});
114+
params.fragmentShader = params.fragmentShader.replace(
115+
"#usf <uniforms>",
116+
`
120117
uniform sampler2D u_noise;
121118
uniform float u_noiseIntensity;
122119
uniform sampler2D u_colorStrata;
123120
float rand(vec2 n) {
124121
return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
125122
}
126123
`
127-
);
128-
shader.fragmentShader = shader.fragmentShader.replace(
129-
"#usf <main>",
130-
`
124+
);
125+
params.fragmentShader = params.fragmentShader.replace(
126+
"#usf <main>",
127+
`
131128
vec2 uv = vUv;
132129
float grain=rand(uv+sin(uTime))*.4;
133130
grain=grain*.5+.5;
@@ -136,10 +133,8 @@ export const Playground = ({
136133
vec4 colorStrata = texture2D(u_colorStrata,uv);
137134
usf_FragColor = colorStrata*grain;
138135
`
139-
);
140-
},
141-
[]
142-
),
136+
);
137+
}, []),
143138
});
144139

145140
// set fxs
@@ -207,7 +202,7 @@ export const Playground = ({
207202
metalness={0.4}
208203
/>
209204
</mesh>
210-
<Environment preset="warehouse" environmentIntensity={0.1} />
205+
<Environment preset="warehouse" environmentIntensity={0.5} />
211206
<OrbitControls />
212207
</mesh>
213208
);

‎app/balloonStickers/Playground.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
"use client";
2+
3+
import * as THREE from "three";
4+
import { Environment, OrbitControls, useGLTF, useFBX } from "@react-three/drei";
5+
import { useFrame, useThree, useLoader } from "@react-three/fiber";
6+
import { useStickers } from "./useStickers";
7+
8+
export const Playground = () => {
9+
const { stickerMap, setStickerState, normalMap } = useStickers();
10+
// const normalMap = useLoader(THREE.TextureLoader, [
11+
// "/stickers/decal-normal.jpg",
12+
// ]);
13+
// const banana = useFBX(`/model/apple.fbx`) as any;
14+
// const { nodes } = useGLTF(
15+
// "https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf"
16+
// );
17+
// console.log(nodes.Suzanne);
18+
19+
return (
20+
<mesh>
21+
<mesh onClick={(e) => setStickerState(e.uv!)}>
22+
<icosahedronGeometry args={[2, 20]} />
23+
<meshPhysicalMaterial
24+
map={stickerMap}
25+
normalMap={normalMap}
26+
normalScale={new THREE.Vector2(1, 1)}
27+
// displacementMap={normalMap}
28+
// displacementScale={2}
29+
// ここからの設定はmapのalphaを乗算することでmapだけに適用される仕組み
30+
roughness={1}
31+
clearcoat={1}
32+
iridescence={1}
33+
metalness={1}
34+
iridescenceIOR={1}
35+
iridescenceThicknessRange={[0, 1400]}
36+
// ここまで
37+
onBeforeCompile={(shader) => {
38+
// mapのalphaをfloat変数に格納
39+
shader.fragmentShader = shader.fragmentShader.replace(
40+
"#include <map_fragment>",
41+
`
42+
#include <map_fragment>
43+
float customMapAlpha = sampledDiffuseColor.a;
44+
`
45+
);
46+
// iridescenceにmapのalphaをかける（mapだけiridescenceする）
47+
shader.fragmentShader = shader.fragmentShader.replace(
48+
"#include <lights_fragment_begin>",
49+
`
50+
#include <lights_fragment_begin>
51+
material.iridescenceFresnel *= customMapAlpha;
52+
material.iridescenceF0 *= customMapAlpha;
53+
`
54+
);
55+
// クリアコートにmapのalphaをかける（mapだけclearcoatする）
56+
shader.fragmentShader = shader.fragmentShader.replace(
57+
"outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + ( clearcoatSpecularDirect + clearcoatSpecularIndirect ) * material.clearcoat;",
58+
`
59+
outgoingLight = outgoingLight * ( 1.0 - material.clearcoat * Fcc ) + ( clearcoatSpecularDirect + clearcoatSpecularIndirect ) * material.clearcoat * customMapAlpha;
60+
`
61+
);
62+
// roughnessにmapのalphaをかける（mapだけroughnessする）
63+
shader.fragmentShader = shader.fragmentShader.replace(
64+
"#include <lights_physical_fragment>",
65+
`
66+
#include <lights_physical_fragment>
67+
material.roughness = clamp(material.roughness * customMapAlpha,.24,1.);
68+
`
69+
);
70+
71+
// metalnessにmapのalphaをかける（mapだけmetalnessする。あるいは強くする）
72+
shader.fragmentShader = shader.fragmentShader.replace(
73+
"#include <metalnessmap_fragment>",
74+
`
75+
#include <metalnessmap_fragment>
76+
metalnessFactor *= customMapAlpha;
77+
`
78+
);
79+
}}
80+
/>
81+
</mesh>
82+
<Environment preset="warehouse" environmentIntensity={0.8} />
83+
{/* <mesh scale={100}>
84+
<sphereGeometry args={[2, 64, 64]} />
85+
<meshBasicMaterial map={sticker} side={THREE.BackSide} />
86+
</mesh> */}
87+
<OrbitControls />
88+
</mesh>
89+
);
90+
};

‎app/bananaStickers/page.tsx ‎app/balloonStickers/page.tsx

File renamed without changes.

0 commit comments

Comments
 (0)