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

fix samplingFx #154

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 v2-samplingFx from v2-samplingFx-fix
Jan 10, 2025
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
16 changes: 8 additions & 8 deletions app/test/001/Playground.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
createBasicFxMaterialImpl,
FxMaterialImplValues,
BasicFxMaterialImplValues,
useNoise
useNoise,
} from "@/packages/use-shader-fx/src";
import { useTexture } from "@react-three/drei";

Expand All @@ -32,17 +32,17 @@ export const Playground = () => {
const noise = useNoise({
size,
dpr: 1,
scale: 10.,
timeStrength: .4,
scale: 0.02,
timeStrength: 0.4,
mixDst: {
src: app,
uvFactor: .1,
alphaFactor: 1.,
fit: 'contain',
uvFactor: 0.1,
alphaFactor: 1,
fit: "contain",
},
})
});

useFrame((state) => {
useFrame((state) => {
noise.render(state);
});

Expand Down
80 changes: 56 additions & 24 deletions app/v2/FxMaterial.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ export const FxMaterial = shaderMaterial(
u_gooey: new THREE.Texture(),
u_model: new THREE.Texture(),
u_noise: new THREE.Texture(),
u_color0: new THREE.Color(0x1974d2),
u_color1: new THREE.Color(0xff1e90),
u_fluid: new THREE.Texture(),
u_color0: new THREE.Color(0xfa1bb1),
u_color1: new THREE.Color(0x4a96ec),
},

`
Expand All @@ -42,48 +43,79 @@ export const FxMaterial = shaderMaterial(
uniform sampler2D u_gooey;
uniform sampler2D u_model;
uniform sampler2D u_noise;
uniform sampler2D u_fluid;
uniform vec3 u_color0;
uniform vec3 u_color1;

float vignetteStrength = 0.9; // 強度(0.0〜1.0)
float vignetteRadius = 0.64; // 効果が始まる半径(0.0〜1.0)

float rand(vec2 n) {
return fract(sin(dot(n ,vec2(12.9898,78.233))) * 43758.5453);
}

//// params ////

// グラデーション
float gradationColorFactor = 0.5; // color0に寄せるか、color1に寄せるか
float gradationGrainIntensity = -.02; // グラデーションに適用する粒子ノイズの強さ

// ブラー
float blurGrainIntensity = -0.16; // ブラーに加算する粒子ノイズの強さ
float blurGradationIntensity = 2.4; // ブラーに加算するグラデーションカラーの加算強度

// ビネット
float vignetteStrength = .9; // 強度(0.0〜1.0)
float vignetteRadius = 0.5; // 効果が始まる半径(0.0〜1.0)

// グーイ
float gooeyAlphaContrast = 80.0;
float gooeyAlphaOffset = -20.0;
vec2 gooeyNoisePosition = vec2(0.3, 0.3);
vec2 gooeyNoiseIntensity = vec2(0.4, 0.4);

// 流体
float fluidIntensity = 0.08;

void main() {
vec2 uv = vUv;
float grain = rand(uv); // -1.0〜1.0
float grain = rand(uv); // 0〜1

// ビネット
vec2 position = uv - 0.5;
float distance = length(position);
float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance);
vignette = mix(1.0, vignette, vignetteStrength);

// ノイズ
vec4 noise = texture2D(u_noise, uv);
vec3 noisedColor = mix(u_color0, u_color1, length(noise.rg * uv) + .1);
noisedColor -= grain * .1;
// 流体
vec4 fluid = texture2D(u_fluid, uv);
vec2 fluidUv = uv - fluid.rg * fluidIntensity;

// グラデーション
vec4 noise = texture2D(u_noise, fluidUv);
vec3 gradationColor = mix(u_color0, u_color1, length(noise.rg * fluidUv) + gradationColorFactor);
gradationColor += grain * gradationGrainIntensity;

// ブラー
vec4 blurColor = texture2D(u_blur,uv);
blurColor.rgb+=grain * .3;
blurColor.rgb+=noisedColor * 2.;
vec4 blurColor = texture2D(u_blur,fluidUv);
blurColor.rgb += grain * blurGrainIntensity;
blurColor.rgb += gradationColor * blurGradationIntensity;

// ブラーとノイズを混ぜる
vec3 mixedBlurColor = mix(noisedColor, blurColor.rgb, blurColor.a);
vec3 mixedBlurColor = mix(gradationColor, blurColor.rgb, blurColor.r);

// モデル
vec4 modelColor = texture2D(u_model,uv);
float gooeyAlpha = texture2D(u_gooey,uv).a;
vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * 80.0 - 20.0,0.,1.));
float gooeyAlpha = texture2D(u_gooey,uv).r;
vec3 mixedModelColor = mix(mixedBlurColor, vec3(0.), clamp(gooeyAlpha * gooeyAlphaContrast + gooeyAlphaOffset, 0.,1.));

vec3 finalColor = mixedModelColor * vignette;
// ビネット
vec2 position = fluidUv - .5;

gl_FragColor = vec4(finalColor, 1.0);
position.x += (noise.g - gooeyNoisePosition.x) * gooeyNoiseIntensity.x;
position.y += (noise.g - gooeyNoisePosition.y) * gooeyNoiseIntensity.y;

float distance = length(position);
float vignette = smoothstep(vignetteRadius, vignetteRadius - 0.5, distance);
vignette = mix(1.0, vignette, vignetteStrength);

vec3 finalColor = mixedModelColor * vignette;

// アウトプット
gl_FragColor = vec4(finalColor, 1.);


}
`
);
114 changes: 82 additions & 32 deletions app/v2/Playground.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,42 @@
"use client";

import * as THREE from "three";
import { useEffect, useRef, useState } from "react";
import { useFrame, useThree, extend, createPortal } from "@react-three/fiber";
import { forwardRef, useEffect, useRef, useState } from "react";
import {
useFrame,
useThree,
extend,
createPortal,
MeshProps,
} from "@react-three/fiber";
import {
useNoise,
useBoxBlur,
useSingleFBO,
useGaussianBlur,
useFluid,
} from "@/packages/use-shader-fx/src";
import { FxMaterial } from "./FxMaterial";
import { Float, OrbitControls } from "@react-three/drei";
import { Float } from "@react-three/drei";

extend({ FxMaterial });

// ここをシングルトンでメソッド化する
const newPosition = [
new THREE.Vector3(2, 1, -1),
new THREE.Vector3(-2, 2, 0),
new THREE.Vector3(1, 2, 2),
];

/** 円 */
const Sphere = forwardRef<THREE.Mesh, MeshProps>((props, ref) => {
return (
<mesh ref={ref} {...props}>
<sphereGeometry args={[2, 32, 32]} />
<meshStandardMaterial />
</mesh>
);
});

export const Playground = () => {
const { size, viewport, camera } = useThree();

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

const blur = useGaussianBlur({
size,
dpr: 1,
radius: 20,
sigma: new THREE.Vector2(2, 2),
dpr: 0.2,
texture: {
src: renderTarget.texture
}
src: renderTarget.texture,
},
});
blur.setValues({
radius: 24,
});

const gooey = useGaussianBlur({
size,
dpr: 2,
radius: 15,
sigma: new THREE.Vector2(5,5),
dpr: 1,
texture: {
src: renderTarget.texture
}
src: renderTarget.texture,
},
});
gooey.setValues({
radius: 24,
});

const noise = useNoise({
size,
dpr: 0.05,
dpr: 0.1,
});
noise.setValues({
scale: 0.03,
timeStrength: 0.3,
});

const fluid = useFluid({
size,
dpr: 0.3,
});

const mesh0 = useRef<THREE.Mesh>(null);
const mesh1 = useRef<THREE.Mesh>(null);
const mesh2 = useRef<THREE.Mesh>(null);
const spheres = [mesh0, mesh1, mesh2];

// これもシングルトンでメソッド化
const lerpSpheresPosition = (
position: THREE.Vector3[],
alpha: number = 0.03
) => {
spheres.forEach((sphere, i) => {
sphere.current!.position.lerp(position[i], alpha);
});
};

useFrame((state) => {
blur.render(state);
gooey.render(state);
noise.render(state);
fluid.render(state);
updateRenderTarget({ gl: state.gl });
mesh0.current!.position.x -=
Math.sin(state.clock.getElapsedTime()) * 0.02;
// mesh0.current!.position.x -=
// Math.sin(state.clock.getElapsedTime()) * 0.02;

// positionの設定
lerpSpheresPosition(newPosition);
});

return (
Expand All @@ -74,27 +123,28 @@ export const Playground = () => {
u_gooey={gooey.texture}
u_model={renderTarget.texture}
u_noise={noise.texture}
u_fluid={fluid.texture}
key={FxMaterial.key}
/>
</mesh>
{createPortal(
<Float rotationIntensity={2} floatIntensity={2} speed={2}>
<mesh ref={mesh0} scale={0.8} position={[2, 0, 0]}>
<torusKnotGeometry args={[1.8, 0.5, 400, 32]} />
<ambientLight intensity={2} />
<directionalLight intensity={2} />
<meshStandardMaterial />
</mesh>
<mesh ref={mesh1} scale={0.8} position={[-2, 0, 0]}>
<sphereGeometry args={[2, 64, 64]} />
<ambientLight intensity={2} />
<directionalLight intensity={2} />
<meshStandardMaterial />
</mesh>
<OrbitControls />
</Float>,
<>
<ambientLight intensity={2} />
<color attach="background" args={["#000000"]} />
<Float rotationIntensity={2} floatIntensity={2} speed={2}>
<Sphere ref={mesh0} scale={1.2} position={[1, 0, 0]} />
<Sphere ref={mesh1} scale={1} position={[2, 2, 0]} />
<Sphere ref={mesh2} scale={0.5} position={[-2, -1, 0]} />
</Float>
</>,
offscreenScene
)}
</>
);
};

/*===============================================
必要な機能
1. マウスでカメラ視点の操作
2. 数字を与えるとその数字でランダムで位置とカメラワークがlerpする的なの
===============================================*/
14 changes: 10 additions & 4 deletions packages/use-shader-fx/src/hooks/blur/useGaussianBlur/index.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const useGaussianBlur = ({
fboAutoSetSize,
renderTargetOptions,
materialParameters,
radius = 1,
radius = 1,
...uniformValues
}: GaussianBlurProps): HooksReturn<
GaussianBlurValuesAndConfig,
Expand Down Expand Up @@ -75,7 +75,7 @@ export const useGaussianBlur = ({
const render = useCallback(
(rootState: RootState, newValues?: GaussianBlurValuesAndConfig) => {
const { gl } = rootState;
newValues && setValues(newValues);
newValues && setValues(newValues);

updateRenderTarget({ gl }, () => {
material.uniforms.renderCount.value = 0;
Expand All @@ -86,12 +86,18 @@ export const useGaussianBlur = ({
updateRenderTarget({ gl }, ({ read }) => {
material.uniforms.texture_src.value = read;
material.uniforms.stepSize.value.set(1, 0);
material.uniforms.renderCount.value = 1;
material.uniforms.renderCount.value = 1;
});

return renderTarget.read.texture;
},
[setValues, updateRenderTarget, material, renderTarget, uniformValues.texture?.src]
[
setValues,
updateRenderTarget,
material,
renderTarget,
uniformValues.texture?.src,
]
);

return {
Expand Down
3 changes: 1 addition & 2 deletions packages/use-shader-fx/src/materials/core/FxMaterial.ts
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ export type FxMaterialProps<T = {}> = {
export class FxMaterial extends THREE.ShaderMaterial {
public static readonly key: string = THREE.MathUtils.generateUUID();


constructor({
uniformValues,
materialParameters = {},
Expand All @@ -39,7 +38,7 @@ export class FxMaterial extends THREE.ShaderMaterial {
texelSize: { value: new THREE.Vector2() },
aspectRatio: { value: 0 },
maxAspect: { value: new THREE.Vector2() },
renderCount: { value: 0 }
renderCount: { value: 0 },
},
uniforms || {},
]) as DefaultUniforms;
Expand Down
Loading

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