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 4465af5

Browse files
Merge pull request #154 from FunTechInc/v2-samplingFx-fix
fix samplingFx
2 parents 0c4619a + e01fa9d commit 4465af5

File tree

9 files changed

+344
-252
lines changed

9 files changed

+344
-252
lines changed

‎app/test/001/Playground.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
createBasicFxMaterialImpl,
88
FxMaterialImplValues,
99
BasicFxMaterialImplValues,
10-
useNoise
10+
useNoise,
1111
} from "@/packages/use-shader-fx/src";
1212
import { useTexture } from "@react-three/drei";
1313

@@ -32,17 +32,17 @@ export const Playground = () => {
3232
const noise = useNoise({
3333
size,
3434
dpr: 1,
35-
scale: 10.,
36-
timeStrength: .4,
35+
scale: 0.02,
36+
timeStrength: 0.4,
3737
mixDst: {
3838
src: app,
39-
uvFactor: .1,
40-
alphaFactor: 1.,
41-
fit: 'contain',
39+
uvFactor: 0.1,
40+
alphaFactor: 1,
41+
fit: "contain",
4242
},
43-
})
43+
});
4444

45-
useFrame((state) => {
45+
useFrame((state) => {
4646
noise.render(state);
4747
});
4848

‎app/v2/FxMaterial.tsx‎

Lines changed: 56 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,9 @@ export const FxMaterial = shaderMaterial(
2424
u_gooey: new THREE.Texture(),
2525
u_model: new THREE.Texture(),
2626
u_noise: new THREE.Texture(),
27-
u_color0: new THREE.Color(0x1974d2),
28-
u_color1: new THREE.Color(0xff1e90),
27+
u_fluid: new THREE.Texture(),
28+
u_color0: new THREE.Color(0xfa1bb1),
29+
u_color1: new THREE.Color(0x4a96ec),
2930
},
3031

3132
`
@@ -42,48 +43,79 @@ export const FxMaterial = shaderMaterial(
4243
uniform sampler2D u_gooey;
4344
uniform sampler2D u_model;
4445
uniform sampler2D u_noise;
46+
uniform sampler2D u_fluid;
4547
uniform vec3 u_color0;
4648
uniform vec3 u_color1;
4749
48-
float vignetteStrength = 0.9; // 強度(0.0〜1.0)
49-
float vignetteRadius = 0.64; // 効果が始まる半径(0.0〜1.0)
50-
5150
float rand(vec2 n) {
5251
return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
5352
}
5453
54+
//// params ////
55+
56+
// グラデーション
57+
float gradationColorFactor = 0.5; // color0に寄せるか、color1に寄せるか
58+
float gradationGrainIntensity = -.02; // グラデーションに適用する粒子ノイズの強さ
59+
60+
// ブラー
61+
float blurGrainIntensity = -0.16; // ブラーに加算する粒子ノイズの強さ
62+
float blurGradationIntensity = 2.4; // ブラーに加算するグラデーションカラーの加算強度
63+
64+
// ビネット
65+
float vignetteStrength = .9; // 強度(0.0〜1.0)
66+
float vignetteRadius = 0.5; // 効果が始まる半径(0.0〜1.0)
67+
68+
// グーイ
69+
float gooeyAlphaContrast = 80.0;
70+
float gooeyAlphaOffset = -20.0;
71+
vec2 gooeyNoisePosition = vec2(0.3, 0.3);
72+
vec2 gooeyNoiseIntensity = vec2(0.4, 0.4);
73+
74+
// 流体
75+
float fluidIntensity = 0.08;
76+
5577
void main() {
5678
vec2 uv = vUv;
57-
float grain = rand(uv); // -1.0〜1.0
79+
float grain = rand(uv); // 0〜1
5880
59-
// ビネット
60-
vec2 position = uv - 0.5;
61-
float distance = length(position);
62-
float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance);
63-
vignette = mix(1.0, vignette, vignetteStrength);
64-
65-
// ノイズ
66-
vec4 noise = texture2D(u_noise, uv);
67-
vec3 noisedColor = mix(u_color0, u_color1, length(noise.rg * uv) + .1);
68-
noisedColor -= grain * .1;
81+
// 流体
82+
vec4 fluid = texture2D(u_fluid, uv);
83+
vec2 fluidUv = uv - fluid.rg * fluidIntensity;
84+
85+
// グラデーション
86+
vec4 noise = texture2D(u_noise, fluidUv);
87+
vec3 gradationColor = mix(u_color0, u_color1, length(noise.rg * fluidUv) + gradationColorFactor);
88+
gradationColor += grain * gradationGrainIntensity;
6989
7090
// ブラー
71-
vec4 blurColor = texture2D(u_blur,uv);
72-
blurColor.rgb+=grain * .3;
73-
blurColor.rgb+=noisedColor * 2.;
91+
vec4 blurColor = texture2D(u_blur,fluidUv);
92+
blurColor.rgb += grain * blurGrainIntensity;
93+
blurColor.rgb += gradationColor * blurGradationIntensity;
7494
7595
// ブラーとノイズを混ぜる
76-
vec3 mixedBlurColor = mix(noisedColor, blurColor.rgb, blurColor.a);
96+
vec3 mixedBlurColor = mix(gradationColor, blurColor.rgb, blurColor.r);
7797
7898
// モデル
7999
vec4 modelColor = texture2D(u_model,uv);
80-
float gooeyAlpha = texture2D(u_gooey,uv).a;
81-
vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * 80.0 - 20.0,0.,1.));
100+
float gooeyAlpha = texture2D(u_gooey,uv).r;
101+
vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * gooeyAlphaContrast + gooeyAlphaOffset, 0.,1.));
82102
83-
vec3 finalColor = mixedModelColor * vignette;
103+
// ビネット
104+
vec2 position = fluidUv - .5;
84105
85-
gl_FragColor = vec4(finalColor, 1.0);
106+
position.x += (noise.g - gooeyNoisePosition.x) * gooeyNoiseIntensity.x;
107+
position.y += (noise.g - gooeyNoisePosition.y) * gooeyNoiseIntensity.y;
108+
109+
float distance = length(position);
110+
float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance);
111+
vignette = mix(1.0, vignette, vignetteStrength);
112+
113+
vec3 finalColor = mixedModelColor * vignette;
114+
115+
// アウトプット
116+
gl_FragColor = vec4(finalColor, 1.);
86117
118+
87119
}
88120
`
89121
);

‎app/v2/Playground.tsx‎

Lines changed: 82 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,42 @@
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";
4+
import { forwardRef, useEffect, useRef, useState } from "react";
5+
import {
6+
useFrame,
7+
useThree,
8+
extend,
9+
createPortal,
10+
MeshProps,
11+
} from "@react-three/fiber";
612
import {
713
useNoise,
8-
useBoxBlur,
914
useSingleFBO,
1015
useGaussianBlur,
16+
useFluid,
1117
} from "@/packages/use-shader-fx/src";
1218
import { FxMaterial } from "./FxMaterial";
13-
import { Float,OrbitControls } from "@react-three/drei";
19+
import { Float } from "@react-three/drei";
1420

1521
extend({ FxMaterial });
1622

23+
// ここをシングルトンでメソッド化する
24+
const newPosition = [
25+
new THREE.Vector3(2, 1, -1),
26+
new THREE.Vector3(-2, 2, 0),
27+
new THREE.Vector3(1, 2, 2),
28+
];
29+
30+
/** 円 */
31+
const Sphere = forwardRef<THREE.Mesh, MeshProps>((props, ref) => {
32+
return (
33+
<mesh ref={ref} {...props}>
34+
<sphereGeometry args={[2, 32, 32]} />
35+
<meshStandardMaterial />
36+
</mesh>
37+
);
38+
});
39+
1740
export const Playground = () => {
1841
const { size, viewport, camera } = useThree();
1942

@@ -29,40 +52,66 @@ export const Playground = () => {
2952

3053
const blur = useGaussianBlur({
3154
size,
32-
dpr: 1,
33-
radius: 20,
34-
sigma: new THREE.Vector2(2, 2),
55+
dpr: 0.2,
3556
texture: {
36-
src: renderTarget.texture
37-
}
57+
src: renderTarget.texture,
58+
},
59+
});
60+
blur.setValues({
61+
radius: 24,
3862
});
3963

4064
const gooey = useGaussianBlur({
4165
size,
42-
dpr: 2,
43-
radius: 15,
44-
sigma: new THREE.Vector2(5,5),
66+
dpr: 1,
4567
texture: {
46-
src: renderTarget.texture
47-
}
68+
src: renderTarget.texture,
69+
},
70+
});
71+
gooey.setValues({
72+
radius: 24,
4873
});
4974

5075
const noise = useNoise({
5176
size,
52-
dpr: 0.05,
77+
dpr: 0.1,
78+
});
79+
noise.setValues({
5380
scale: 0.03,
81+
timeStrength: 0.3,
82+
});
83+
84+
const fluid = useFluid({
85+
size,
86+
dpr: 0.3,
5487
});
5588

5689
const mesh0 = useRef<THREE.Mesh>(null);
5790
const mesh1 = useRef<THREE.Mesh>(null);
91+
const mesh2 = useRef<THREE.Mesh>(null);
92+
const spheres = [mesh0, mesh1, mesh2];
93+
94+
// これもシングルトンでメソッド化
95+
const lerpSpheresPosition = (
96+
position: THREE.Vector3[],
97+
alpha: number = 0.03
98+
) => {
99+
spheres.forEach((sphere, i) => {
100+
sphere.current!.position.lerp(position[i], alpha);
101+
});
102+
};
58103

59104
useFrame((state) => {
60105
blur.render(state);
61106
gooey.render(state);
62107
noise.render(state);
108+
fluid.render(state);
63109
updateRenderTarget({ gl: state.gl });
64-
mesh0.current!.position.x -=
65-
Math.sin(state.clock.getElapsedTime()) * 0.02;
110+
// mesh0.current!.position.x -=
111+
// Math.sin(state.clock.getElapsedTime()) * 0.02;
112+
113+
// positionの設定
114+
lerpSpheresPosition(newPosition);
66115
});
67116

68117
return (
@@ -74,27 +123,28 @@ export const Playground = () => {
74123
u_gooey={gooey.texture}
75124
u_model={renderTarget.texture}
76125
u_noise={noise.texture}
126+
u_fluid={fluid.texture}
77127
key={FxMaterial.key}
78128
/>
79129
</mesh>
80130
{createPortal(
81-
<Float rotationIntensity={2} floatIntensity={2} speed={2}>
82-
<mesh ref={mesh0} scale={0.8} position={[2, 0, 0]}>
83-
<torusKnotGeometry args={[1.8, 0.5, 400, 32]} />
84-
<ambientLight intensity={2} />
85-
<directionalLight intensity={2} />
86-
<meshStandardMaterial />
87-
</mesh>
88-
<mesh ref={mesh1} scale={0.8} position={[-2, 0, 0]}>
89-
<sphereGeometry args={[2, 64, 64]} />
90-
<ambientLight intensity={2} />
91-
<directionalLight intensity={2} />
92-
<meshStandardMaterial />
93-
</mesh>
94-
<OrbitControls />
95-
</Float>,
131+
<>
132+
<ambientLight intensity={2} />
133+
<color attach="background" args={["#000000"]} />
134+
<Float rotationIntensity={2} floatIntensity={2} speed={2}>
135+
<Sphere ref={mesh0} scale={1.2} position={[1, 0, 0]} />
136+
<Sphere ref={mesh1} scale={1} position={[2, 2, 0]} />
137+
<Sphere ref={mesh2} scale={0.5} position={[-2, -1, 0]} />
138+
</Float>
139+
</>,
96140
offscreenScene
97141
)}
98142
</>
99143
);
100144
};
145+
146+
/*===============================================
147+
必要な機能
148+
1. マウスでカメラ視点の操作
149+
2. 数字を与えるとその数字でランダムで位置とカメラワークがlerpする的なの
150+
===============================================*/

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const useGaussianBlur = ({
2424
fboAutoSetSize,
2525
renderTargetOptions,
2626
materialParameters,
27-
radius = 1,
27+
radius = 1,
2828
...uniformValues
2929
}: GaussianBlurProps): HooksReturn<
3030
GaussianBlurValuesAndConfig,
@@ -75,7 +75,7 @@ export const useGaussianBlur = ({
7575
const render = useCallback(
7676
(rootState: RootState, newValues?: GaussianBlurValuesAndConfig) => {
7777
const { gl } = rootState;
78-
newValues && setValues(newValues);
78+
newValues && setValues(newValues);
7979

8080
updateRenderTarget({ gl }, () => {
8181
material.uniforms.renderCount.value = 0;
@@ -86,12 +86,18 @@ export const useGaussianBlur = ({
8686
updateRenderTarget({ gl }, ({ read }) => {
8787
material.uniforms.texture_src.value = read;
8888
material.uniforms.stepSize.value.set(1, 0);
89-
material.uniforms.renderCount.value = 1;
89+
material.uniforms.renderCount.value = 1;
9090
});
9191

9292
return renderTarget.read.texture;
9393
},
94-
[setValues, updateRenderTarget, material, renderTarget, uniformValues.texture?.src]
94+
[
95+
setValues,
96+
updateRenderTarget,
97+
material,
98+
renderTarget,
99+
uniformValues.texture?.src,
100+
]
95101
);
96102

97103
return {

‎packages/use-shader-fx/src/materials/core/FxMaterial.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export type FxMaterialProps<T = {}> = {
2323
export class FxMaterial extends THREE.ShaderMaterial {
2424
public static readonly key: string = THREE.MathUtils.generateUUID();
2525

26-
2726
constructor({
2827
uniformValues,
2928
materialParameters = {},
@@ -39,7 +38,7 @@ export class FxMaterial extends THREE.ShaderMaterial {
3938
texelSize: { value: new THREE.Vector2() },
4039
aspectRatio: { value: 0 },
4140
maxAspect: { value: new THREE.Vector2() },
42-
renderCount: { value: 0 }
41+
renderCount: { value: 0 },
4342
},
4443
uniforms || {},
4544
]) as DefaultUniforms;

0 commit comments

Comments
(0)

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