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

V1.1.24 #111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
takuma-hmng8 merged 2 commits into main from v1.1.24
May 8, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions .storybook/stories/UseFluid.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
import { FxMaterial, FxMaterialProps } from "../../utils/fxMaterial";
import GUI from "lil-gui";
import { useGUI } from "../../utils/useGUI";
import { useFluid, useFxTexture } from "../../packages/use-shader-fx/src";
import {
useFPSLimiter,
useFluid,
useFxTexture,
} from "../../packages/use-shader-fx/src";
import {
FLUID_PARAMS,
FluidParams,
Expand Down Expand Up @@ -38,7 +42,7 @@ export const UseFluid = (args: FluidParams) => {
const [updateFluid] = useFluid({
size,
dpr,
fluidOnBeforeCompile: {
customFluidProps: {
curl: {
onBeforeCompile: React.useCallback((shader: THREE.Shader) => {
console.log(shader.fragmentShader);
Expand Down
5 changes: 3 additions & 2 deletions .storybook/stories/UseRipple.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,11 @@ export const UseRipple = (args: RippleParams) => {
const updateGUI = useGUI(setGUI);
const fxRef = React.useRef<FxMaterialProps>();
const { size, viewport } = useThree();
const [updateRipple] = useRipple({
const [updateRipple, setRipple] = useRipple({
size,
texture: ripple,
dpr: viewport.dpr,
max: 20,
max: 80,
uniforms: React.useMemo(
() => ({
testtest: { value: 0 },
Expand All @@ -60,6 +60,7 @@ export const UseRipple = (args: RippleParams) => {
);
}, []),
});

useFrame((props) => {
const fx = updateRipple(props, setConfig(), {
testtest: props.clock.getElapsedTime(),
Expand Down
15 changes: 4 additions & 11 deletions .storybook/utils/Setup.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,11 @@ import { Perf } from "r3f-perf";
import { PerformanceMonitor } from "@react-three/drei";

export const Setup = ({ children }: { children: React.ReactNode }) => {
const [dpr, setDpr] = useState(1.5);
// const [dpr, setDpr] = useState(1.5);s
return (
<Canvas dpr={dpr}>
<PerformanceMonitor
factor={1}
onChange={({ factor }) => {
console.log(`dpr:${dpr}`);
setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
}}>
{children}
<Perf position={"bottom-left"} minimal={false} />
</PerformanceMonitor>
<Canvas>
{children}
<Perf position={"bottom-left"} minimal={false} />
</Canvas>
);
};
48 changes: 10 additions & 38 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,24 +81,20 @@ npm install @funtech-inc/use-shader-fx

From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in array format. `HooksProps` are objects that are different for each hook and contain values such as `size`, `dpr` ... etc.

1. `updateFx` - A function to be invoked inside `useFrame`, returning a `THREE.Texture`.
2. `setParams` - A function to refresh the parameters, beneficial for performance tweaking, etc.
3. `fxObject` - An object that holds various FX components, such as scene, camera, material,renderTarget, and `output`(final rendered texture).
1. `updateFx` - Functions to update parameters and render.
2. `updateParams` - Function to update parameters only.
3. `fxObject` - An object that holds various FX components, such as scene, camera, mesh, renderTarget, and `output`(final rendered texture).
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`).

```js
const [updateFx, setParams, fxObject] = useSomeFx(HooksProps);
const [updateFx, updateParams, fxObject] = useSomeFx(HooksProps);
```

invoke `updateFx` in `useFrame`. The first argument receives the RootState from `useFrame`, and the second one takes `HookPrams`. Each fx has its `HookPrams`, and each type is exported.
Call `updateFx` on `useFrame`. The first argument is the RootState of `useFrame` and the second argument is `HookParams`. The third argument can be `CustomParams` customised by the user. Each FX has `HookParams` and each type is exported.

```js
useFrame((props) => {
const texture = updateFx(props, HookPrams, customParams);
const main = mainShaderRef.current;
if (main) {
main.u_bufferTexture = texture;
}
const texture = updateFx(props, HookParams, CustomParams);
});
```

Expand All @@ -119,37 +115,13 @@ import { useFrame, useThree } from "@react-three/fiber";
import { useFluid } from "@funtech-inc/use-shader-fx";

export const Home = () => {
const ref = useRef<THREE.ShaderMaterial>(null);
const { size, viewport } = useThree();
const [updateFluid, , { output }] = useFluid({ size, dpr: viewport.dpr });
const { size } = useThree();
const [updateFluid, , { output }] = useFluid({ size, dpr: 1 });
useFrame((props) => updateFluid(props));

return (
<mesh>
<planeGeometry args={[2, 2]} />
<shaderMaterial
ref={ref}
vertexShader={`
varying vec2 vUv;
void main() {
vUv = uv;
gl_Position = vec4(position, 1.0);
}
`}
fragmentShader={`
precision highp float;
varying vec2 vUv;
uniform sampler2D u_fx;

void main() {
vec2 uv = vUv;
gl_FragColor = texture2D(u_fx, uv);
}
`}
uniforms={{
u_fx: { value: output },
}}
/>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial map={output} roughness={0.05} metalness={0.4} />
</mesh>
);
};
Expand Down
42 changes: 0 additions & 42 deletions app/_home/FxMaterial.tsx
View file Open in desktop

This file was deleted.

141 changes: 83 additions & 58 deletions app/_home/Playground.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
import * as THREE from "three";
import { useMemo, useRef } from "react";
import { useFrame, useThree, extend } from "@react-three/fiber";
import { useCallback, useMemo, useRef } from "react";
import { useFrame, useThree } from "@react-three/fiber";
import {
useColorStrata,
useMarble,
useHSV,
useBeat,
useCoverTexture,
useFPSLimiter,
EasingTypes,
ColorStrataParams,
HSVParams,
MarbleParams,
useFluid,
useBlank,
} from "@/packages/use-shader-fx/src";

import { FxMaterial, FxMaterialProps } from "./FxMaterial";
import { useVideoTexture } from "@react-three/drei";

extend({ FxMaterial });
import { Environment, OrbitControls } from "@react-three/drei";

export const CONFIG = {
marble: {
Expand Down Expand Up @@ -86,19 +82,9 @@ export const Playground = ({
bpm: number;
easing: EasingTypes;
}) => {
const ref = useRef<FxMaterialProps>();
const { size, viewport } = useThree();

const funkun = useVideoTexture("/FT_Ch02-comp.mp4", {
width: 1280,
height: 780,
});
const [updateCover, setCover, { output: cover }] = useCoverTexture({
size,
dpr: viewport.dpr,
});
setCover({ texture: funkun });

// init fxs
const [updateColorStrata, setColorStrata, { output: colorStrata }] =
useColorStrata({ size, dpr: viewport.dpr });
const [updateMarble, setMarble, { output: marble }] = useMarble({
Expand All @@ -109,47 +95,78 @@ export const Playground = ({
size,
dpr: viewport.dpr,
});
const [updateFluid, setFluid, { output: brush }] = useFluid({
const [updateBlank, _, { output: blank }] = useBlank({
size,
dpr: 0.06,
dpr: viewport.dpr,
uniforms: useMemo(
() => ({
u_noise: {
value: marble,
},
u_noiseIntensity: {
value: CONFIG.noiseIntensity,
},
u_colorStrata: {
value: hsv,
},
}),
[hsv, marble]
),
onBeforeCompile: useCallback((shader: THREE.Shader) => {
shader.fragmentShader = shader.fragmentShader.replace(
"#usf uniforms",
`
uniform sampler2D u_noise;
uniform float u_noiseIntensity;
uniform sampler2D u_colorStrata;
float rand(vec2 n) {
return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
}
`
);
shader.fragmentShader = shader.fragmentShader.replace(
"#usf main",
`
vec2 uv = vUv;
float grain=rand(uv+sin(uTime))*.4;
grain=grain*.5+.5;
vec4 noise = texture2D(u_noise, uv);
uv += noise.rg * u_noiseIntensity;
vec4 colorStrata = texture2D(u_colorStrata,uv);
usf_FragColor = colorStrata*grain;
`
);
}, []),
});

// set fxs
setMarble({
...setConfig("marble"),
timeStrength: 0.5,
});
setColorStrata({
...setConfig("colorStrata"),
timeStrength: new THREE.Vector2(0, 0),
});
setHSV({
...setConfig("hsv"),
texture: colorStrata,
});

useMemo(() => {
CONFIG.random();

setMarble({
...setConfig("marble"),
timeStrength: 0.5,
});

setColorStrata({
...setConfig("colorStrata"),
timeStrength: new THREE.Vector2(0, 0),
});

setHSV({
...setConfig("hsv"),
texture: colorStrata,
});

setFluid({
density_dissipation: 0.96,
velocity_dissipation: 0.96,
splat_radius: 0.001,
pressure_iterations: 2,
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const beting = useBeat(bpm, easing);
const limiter = useFPSLimiter(40);
const hashMemo = useRef(0);
const meshRef = useRef<THREE.Mesh>(null);

useFrame((props) => {
if (!limiter(props.clock)) {
return;
}
const { beat, hash } = beting(props.clock);
const { beat, hash, fract } = beting(props.clock);
if (hash !== hashMemo.current) {
hashMemo.current = hash;
CONFIG.random();
Expand All @@ -164,23 +181,31 @@ export const Playground = ({
...(setConfig("marble") as MarbleParams),
beat: beat,
});
updateFluid(props);
updateCover(props);
ref.current!.u_noiseIntensity = CONFIG.noiseIntensity;
ref.current!.u_time = props.clock.getElapsedTime();
updateBlank(
props,
{},
{
u_noiseIntensity: CONFIG.noiseIntensity,
}
);
meshRef.current!.rotation.x += 0.03 * fract;
meshRef.current!.rotation.y += 0.04 * fract;
meshRef.current!.rotation.z += 0.05 * fract;
meshRef.current!.position.z = Math.sin(fract) * 0.08;
});

return (
<mesh>
<planeGeometry args={[2, 2]} />
<fxMaterial
key={FxMaterial.key}
u_noise={marble}
u_colorStrata={hsv}
u_brush={brush}
u_funkun={cover}
ref={ref}
/>
<mesh ref={meshRef}>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial
map={blank}
roughness={0.05}
metalness={0.4}
/>
</mesh>
<Environment preset="warehouse" environmentIntensity={0.1} />
<OrbitControls />
</mesh>
);
};
Loading

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