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 04d8208

Browse files
update
1 parent 3011ba9 commit 04d8208

File tree

22 files changed

+895
-131
lines changed

22 files changed

+895
-131
lines changed

‎app/examples/v2_test/Playground.tsx‎

Lines changed: 101 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,120 @@
11
"use client";
22

33
import * as THREE from "three";
4-
import { useEffect, useRef, useState } from "react";
5-
import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
64
import {
7-
createFxMaterialImpl,
8-
createBasicFxMaterialImpl,
9-
FxMaterialImplValues,
10-
BasicFxMaterialImplValues,
11-
} from "@/packages/use-shader-fx/src";
12-
import { Float, OrbitControls, useTexture } from "@react-three/drei";
13-
import { useGaussianBlur } from "@/packages/use-shader-fx/src/hooks/blur/useGaussianBlur";
5+
Environment,
6+
MeshTransmissionMaterial,
7+
OrbitControls,
8+
useGLTF,
9+
} from "@react-three/drei";
1410

15-
const FxMaterialImpl = createFxMaterialImpl({
16-
fragmentShader: `
17-
uniform sampler2D src;
18-
void main() {
19-
vec2 vel = texture2D(src, vUv).xy;
20-
float len = length(vel);
21-
vel = vel * 0.5 + 0.5;
22-
23-
vec3 color = vec3(vel.x, vel.y, 1.0);
24-
color = mix(vec3(1.0), color, len);
11+
import { useFluid, useNoise } from "@/packages/use-shader-fx/src";
2512

26-
gl_FragColor = vec4(color, 1.0);
27-
}
28-
`,
29-
});
30-
const BasicFxMaterialImpl = createBasicFxMaterialImpl();
13+
import { useCallback, useRef } from "react";
14+
import { useFrame, useThree } from "@react-three/fiber";
3115

32-
extend({ FxMaterialImpl, BasicFxMaterialImpl });
33-
34-
export const Playground = () => {
35-
const { size, viewport, camera } = useThree();
16+
const Model = ({ children }: { children?: React.ReactNode }) => {
17+
const ref = useRef<THREE.Mesh>(null);
18+
const { nodes, materials } = useGLTF("/ANRI_LOGO_WEB_EXPORT_V01.gltf");
19+
return (
20+
<mesh
21+
ref={ref}
22+
castShadow
23+
receiveShadow
24+
scale={10}
25+
geometry={nodes["OBJECTS"].children[0].geometry}>
26+
{children}
27+
</mesh>
28+
);
29+
};
3630

37-
const [app] = useTexture(["/app-head.jpg"]);
31+
const Light = () => {
32+
return (
33+
<Environment
34+
// resolution={256}
35+
files={"/snowpark.exr"}
36+
background
37+
// preset="park"
38+
backgroundIntensity={1}
39+
backgroundBlurriness={0}></Environment>
40+
);
41+
};
3842

39-
const blur = useGaussianBlur({
43+
export const Playground = () => {
44+
const { size } = useThree();
45+
const fluid = useFluid({
4046
size,
41-
dpr: 1,
42-
radius: 21,
43-
// blurIteration: 1,
44-
// src: app,
45-
texture: {
46-
src: app,
47+
dpr: 0.3,
48+
scale: new THREE.Vector2(10, 10),
49+
colorBalance: {
50+
factor: new THREE.Vector3(1, 0, 0),
51+
},
52+
hsv: {
53+
saturation: 5,
4754
},
4855
});
49-
50-
blur.setValues({
51-
radius: 41,
52-
// blurIteration: 20,
53-
});
54-
56+
const materialRef = useRef<any>(null);
5557
useFrame((state) => {
56-
blur.render(state);
58+
fluid.render(state);
59+
materialRef.current.userData.time.value = state.clock.getElapsedTime();
60+
state.camera.position.lerp(
61+
{ x: state.pointer.x * 0.8, y: state.pointer.y * 0.8, z: 6 },
62+
0.05
63+
);
5764
});
58-
5965
return (
6066
<mesh>
61-
<planeGeometry args={[2, 2]} />
62-
<fxMaterialImpl key={FxMaterialImpl.key} src={blur.texture} />
67+
<Model>
68+
<MeshTransmissionMaterial
69+
ref={materialRef}
70+
map={fluid.texture}
71+
clearcoat={0.3}
72+
metalness={0.6}
73+
roughness={0.2}
74+
userData={{
75+
time: { value: 0 },
76+
}}
77+
onBeforeCompile={useCallback((shader: any) => {
78+
Object.assign(shader.uniforms, materialRef.current.userData);
79+
shader.vertexShader = shader.vertexShader.replace(
80+
"#include <beginnormal_vertex>",
81+
`
82+
vec3 objectNormal = custom_Normal;
83+
#ifdef USE_TANGENT
84+
vec3 objectTangent = vec3( tangent.xyz );
85+
#endif
86+
`
87+
);
88+
89+
shader.vertexShader = shader.vertexShader.replace(
90+
"#include <begin_vertex>",
91+
`
92+
vec3 transformed = custom_Position;
93+
#ifdef USE_ALPHAHASH
94+
vPosition = vec3( position );
95+
#endif
96+
`
97+
);
98+
99+
shader.vertexShader = shader.vertexShader.replace(
100+
"void main() {",
101+
`
102+
uniform float time;
103+
104+
void main() {
105+
106+
vec3 custom_Position = position;
107+
vec3 custom_Normal = normal;
108+
109+
custom_Position += custom_Normal * (sin(time) * .5 + .5) * 0.05;
110+
111+
`
112+
);
113+
}, [])}
114+
/>
115+
</Model>
116+
<OrbitControls />
117+
<Light />
63118
</mesh>
64119
);
65120
};

‎app/examples/v2_test/page.tsx‎

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,10 @@
1-
import { ShaderFx } from "../ShaderFx";
1+
import { ShaderFx } from "../../ShaderFx";
22
import { Playground } from "./Playground";
3-
import Image from "next/image";
43

54
export default function Page() {
65
return (
7-
<div
8-
style={{
9-
position: "fixed",
10-
width: "100%",
11-
height: "100svh",
12-
pointerEvents: "none",
13-
}}>
14-
{/* <div
15-
style={{
16-
width: "400px",
17-
height: "400px",
18-
backgroundColor: "white",
19-
position: "fixed",
20-
inset: 0,
21-
margin: "auto",
22-
zIndex: 1000,
23-
mixBlendMode: "hard-light",
24-
}}>
25-
<Image
26-
priority
27-
src="/momo.jpg"
28-
alt=""
29-
fill
30-
sizes={"100%"}
31-
style={{ objectFit: "cover" }}
32-
/>
33-
</div> */}
34-
<ShaderFx isDprUpdate={false}>
35-
<Playground />
36-
</ShaderFx>
37-
</div>
6+
<ShaderFx isDprUpdate={false}>
7+
<Playground />
8+
</ShaderFx>
389
);
3910
}

‎app/layout.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,12 @@ export default function RootLayout({
3131
backgroundRepeat: "repeat",
3232
touchAction: "none",
3333
userSelect: "none",
34+
height: "100svh",
3435
}}>
3536
<body className={oswald.className}>
36-
{children}
37+
<div style={{ position: "fixed", width: "100%", height: "100%" }}>
38+
{children}
39+
</div>
3740
<UI />
3841
</body>
3942
</html>
Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
"use client";
2+
3+
import { useFrame, useThree, extend } from "@react-three/fiber";
4+
import {
5+
createFxMaterialImpl,
6+
useFluid,
7+
useBuffer,
8+
useBlank,
9+
} from "@/packages/use-shader-fx/src";
10+
import { useBasicFxGUI } from "../_utils/useBasicFxGUI";
11+
import { useTexture } from "@react-three/drei";
12+
13+
const FxMaterialImpl = createFxMaterialImpl();
14+
extend({ FxMaterialImpl });
15+
16+
export const Playground = () => {
17+
const { size } = useThree();
18+
19+
const [mask] = useTexture(["/momo.jpg"]);
20+
21+
const fluid = useFluid({
22+
size,
23+
dpr: 0.25,
24+
});
25+
26+
const blank = useBlank({
27+
size,
28+
dpr: 1.5,
29+
pointerLerp: 0.1,
30+
vertexShader: `
31+
void main() {
32+
gl_Position = vec4(position, 1.0);
33+
}
34+
`,
35+
fragmentShader: `
36+
precision mediump float;
37+
#define GLSLIFY 1
38+
39+
vec2 rotate2D(vec2 p, float angle) {
40+
float s = sin(angle), c = cos(angle);
41+
return mat2(c, -s, s, c) * p;
42+
}
43+
44+
float gridPattern(vec2 p) {
45+
vec2 grid = abs(fract(p - 0.5) - 0.5) / fwidth(p);
46+
return min(grid.x, grid.y);
47+
}
48+
49+
float isoGrid(vec2 p) {
50+
p = rotate2D(p, 3.14159 / 4.0);
51+
vec2 grid1 = p;
52+
vec2 grid2 = rotate2D(p, 3.14159 / 3.0);
53+
return min(gridPattern(grid1 * 8.0), gridPattern(grid2 * 8.0));
54+
}
55+
56+
void main() {
57+
vec2 uv = vUv;
58+
59+
vec2 nPointer = pointer * .5 + .5;
60+
61+
uv.x *= aspectRatio;
62+
nPointer.x *= aspectRatio;
63+
64+
vec2 mouseInfluence = nPointer - uv;
65+
float mouseDist = length(mouseInfluence);
66+
float distortionAmount = smoothstep(0.3, 0.0, mouseDist) * 0.2;
67+
68+
vec2 distortedUV = uv + normalize(mouseInfluence) * distortionAmount;
69+
70+
float grid = isoGrid(distortedUV + time * 0.1);
71+
72+
vec3 color1 = vec3(0.2, 0.4, 0.8);
73+
vec3 color2 = vec3(0.9, 0.3, 0.5);
74+
vec3 bgColor = vec3(0., 0., 0.);
75+
76+
float gridLines = smoothstep(0.8, 0.2, grid);
77+
vec3 finalColor = mix(bgColor, mix(color1, color2, sin(time) * 0.5 + 0.5), gridLines);
78+
float alpha = mix(0., 1., gridLines);
79+
gl_FragColor = vec4(finalColor, alpha);
80+
81+
#include <colorspace_fragment>
82+
}
83+
`,
84+
});
85+
86+
const basic = useBuffer({
87+
size,
88+
dpr: 1.5,
89+
texture: {
90+
src: mask,
91+
fit: "fill",
92+
},
93+
});
94+
95+
const { updateBasicFxGUI, setBasicFxGUIValues } = useBasicFxGUI(
96+
basic.setValues,
97+
{
98+
mixSrc: blank.texture,
99+
mixDst: fluid.texture,
100+
mixMap: fluid.texture,
101+
}
102+
);
103+
104+
useFrame((state) => {
105+
basic.render(state, {
106+
...setBasicFxGUIValues(),
107+
});
108+
blank.render(state);
109+
fluid.render(state);
110+
updateBasicFxGUI();
111+
});
112+
113+
return (
114+
<mesh>
115+
<planeGeometry args={[2, 2]} />
116+
<fxMaterialImpl key={FxMaterialImpl.key} src={basic.texture} />
117+
</mesh>
118+
);
119+
};
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ShaderFx } from "../../ShaderFx";
2+
import { Playground } from "./Playground";
3+
4+
export default function Page() {
5+
return (
6+
<ShaderFx isDprUpdate={false}>
7+
<Playground />
8+
</ShaderFx>
9+
);
10+
}

0 commit comments

Comments
(0)

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