From 60bb2451b797bd65fcf6df1dd41056e1627a5424 Mon Sep 17 00:00:00 2001 From: takuma-hmng8 Date: Wed, 29 Nov 2023 13:42:33 +0900 Subject: [PATCH] demo update --- app/ShaderFx.tsx | 2 +- app/_demo/config.ts | 48 +++++----------------------- app/_demo/index.tsx | 55 +++++++++++---------------------- app/layout.tsx | 15 ++++++--- app/page.tsx | 17 ++++++++++ utils/fxTransparentMaterial.tsx | 42 +++++++++++++++++++++++++ 6 files changed, 96 insertions(+), 83 deletions(-) create mode 100644 utils/fxTransparentMaterial.tsx diff --git a/app/ShaderFx.tsx b/app/ShaderFx.tsx index a22e447d..0c467ee3 100644 --- a/app/ShaderFx.tsx +++ b/app/ShaderFx.tsx @@ -9,7 +9,7 @@ import { Demo } from "./_demo"; // import CreateShaderFx from "@/CreateShaderFx"; export const ShaderFx = () => { - const [dpr, setDpr] = useState(0.5); + const [dpr, setDpr] = useState(1.0); return ( { - CONFIG.transitionBg.transformDir *= -1; - const tl = gsap.timeline({ - defaults: { duration: 2 }, - }); - tl.to(CONFIG.transitionBg, { - noiseStrength: 0.2, - progress: 0.5, - ease: "power2.in", - }); - tl.to(CONFIG.transitionBg, { - noiseStrength: 0.0, - progress: CONFIG.transitionBg.transformDir > 0 ? 0.0 : 1.0, - ease: "power2.out", - }); - }, - }, fogProjection: { ...structuredClone(FOGPROJECTION_PARAMS), - fogColor: new THREE.Color(0xd5cea3), - active: true, + fogColor: new THREE.Color(0xffffff), + fogEdge0: 0.5, + fogEdge1: 1.0, + distortionStrength: 0.2, }, fruid: { ...structuredClone(FRUID_PARAMS), fruidVec: new THREE.Vector3(), fruid_color: (velocity: THREE.Vector2) => { - const rCol = Math.max(0.0, velocity.x * 100); - const gCol = Math.max(0.0, velocity.y * 100); - const bCol = (rCol + gCol) / 2; + const rCol = Math.max(0.2, velocity.x * 100); + const gCol = Math.max(0.2, velocity.y * 100); + const bCol = Math.max(0.4, (rCol + gCol) / 2); return CONFIG.fruid.fruidVec.set(rCol, gCol, bCol); }, }, }; export const setGUI = (gui: GUI) => { - const transitionBg = gui.addFolder("transitionBg"); - transitionBg.add(CONFIG.transitionBg, "noiseStrength", 0, 1, 0.01); - transitionBg.add(CONFIG.transitionBg, "progress", 0, 1, 0.01); - if (CONFIG.transitionBg.dir) { - transitionBg.add(CONFIG.transitionBg.dir, "x", 0, 1, 0.01); - transitionBg.add(CONFIG.transitionBg.dir, "y", 0, 1, 0.01); - } - transitionBg.add(CONFIG.transitionBg, "transform"); - transitionBg.add(CONFIG.transitionBg, "active"); - const fogProjection = gui.addFolder("fogProjection"); fogProjection.add(CONFIG.fogProjection, "distortionStrength", 0, 10, 0.01); fogProjection.add(CONFIG.fogProjection, "fogEdge0", 0, 1, 0.01); fogProjection.add(CONFIG.fogProjection, "fogEdge1", 0, 1, 0.01); fogProjection.addColor(CONFIG.fogProjection, "fogColor"); - fogProjection.add(CONFIG.fogProjection, "active"); const fruid = gui.addFolder("fruid"); fruid.add(CONFIG.fruid, "density_dissipation", 0, 1, 0.01); diff --git a/app/_demo/index.tsx b/app/_demo/index.tsx index 148938e6..6cc91e3a 100644 --- a/app/_demo/index.tsx +++ b/app/_demo/index.tsx @@ -1,29 +1,23 @@ import { useRef } from "react"; -import * as THREE from "three"; -import { useFrame, useLoader, extend, useThree } from "@react-three/fiber"; +import { useFrame, extend, useThree } from "@react-three/fiber"; import { usePerformanceMonitor } from "@react-three/drei"; import { CONFIG, setGUI } from "./config"; import { useGUI } from "@/utils/useGUI"; import { - FxTextureMaterial, - FxTextureMaterialProps, -} from "@/utils/fxTextureMaterial"; + FxTransparentMaterial, + FxTransparentMaterialProps, +} from "@/utils/fxTransparentMaterial"; import { useFruid, - useTransitionBg, useFogProjection, useNoise, } from "@/packages/use-shader-fx/src"; -extend({ FxTextureMaterial }); +extend({ FxTransparentMaterial }); export const Demo = () => { - const [bg, bg2] = useLoader(THREE.TextureLoader, [ - "thumbnail.jpg", - "momo.jpg", - ]); const updateGUI = useGUI(setGUI); - const mainShaderRef = useRef(); + const mainShaderRef = useRef(); const size = useThree((state) => state.size); const dpr = useThree((state) => state.viewport.dpr); @@ -35,7 +29,6 @@ export const Demo = () => { dpr, }); - const [updateTransitionBg] = useTransitionBg({ size, dpr }); const [updateFogProjection] = useFogProjection({ size, dpr }); usePerformanceMonitor({ @@ -48,9 +41,7 @@ export const Demo = () => { useFrame((props) => { const noise = updateNoise(props, { - timeStrength: 0.3, - noiseOctaves: 8, - fbmOctaves: 3, + timeStrength: 0.4, }); const fx = updateFruid(props, { @@ -63,31 +54,18 @@ export const Demo = () => { fruid_color: CONFIG.fruid.fruid_color, }); - let postFx = updateTransitionBg(props, { - imageResolution: CONFIG.transitionBg.imageResolution, - noiseStrength: CONFIG.transitionBg.noiseStrength, - progress: CONFIG.transitionBg.progress, - dir: CONFIG.transitionBg.dir, - texture0: bg, - texture1: bg2, + const postFx = updateFogProjection(props, { + distortionStrength: CONFIG.fogProjection.distortionStrength, + fogEdge0: CONFIG.fogProjection.fogEdge0, + fogEdge1: CONFIG.fogProjection.fogEdge1, + fogColor: CONFIG.fogProjection.fogColor, + texture: fx, noiseMap: noise, }); - if (CONFIG.fogProjection.active) { - postFx = updateFogProjection(props, { - distortionStrength: CONFIG.fogProjection.distortionStrength, - fogEdge0: CONFIG.fogProjection.fogEdge0, - fogEdge1: CONFIG.fogProjection.fogEdge1, - fogColor: CONFIG.fogProjection.fogColor, - texture: postFx, - noiseMap: noise, - }); - } - const main = mainShaderRef.current; if (main) { - main.u_fx = fx; - main.u_postFx = postFx; + main.u_fx = postFx; } updateGUI(); }); @@ -95,7 +73,10 @@ export const Demo = () => { return ( - + ); }; diff --git a/app/layout.tsx b/app/layout.tsx index e074ecdb..a978d9a5 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,8 +1,11 @@ import "the-new-css-reset/css/reset.css"; import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Playfair_Display } from "next/font/google"; -const inter = Inter({ subsets: ["latin"] }); +const playfair = Playfair_Display({ + subsets: ["latin"], + variable: "--font-playfair", +}); const metadata: Metadata = { title: "use-shader-fx", @@ -17,8 +20,12 @@ export default function RootLayout({ return ( + className={playfair.className} + style={{ + overflow: "hidden", + height: "100svh", + // background: "#f8f8f8", + }}> {children} diff --git a/app/page.tsx b/app/page.tsx index b8d5c6b7..f669298a 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -4,6 +4,23 @@ export default function Home() { return (
+

+ use-shader-fx +

); } diff --git a/utils/fxTransparentMaterial.tsx b/utils/fxTransparentMaterial.tsx new file mode 100644 index 00000000..995a18e2 --- /dev/null +++ b/utils/fxTransparentMaterial.tsx @@ -0,0 +1,42 @@ +import * as THREE from "three"; +import { shaderMaterial } from "@react-three/drei"; + +declare global { + namespace JSX { + interface IntrinsicElements { + fxTransparentMaterial: any; + } + } +} + +export type FxTransparentMaterialProps = { + u_fx: THREE.Texture | null; +}; + +export const FxTransparentMaterial = shaderMaterial( + { + u_fx: null, + }, + ` + varying vec2 vUv; + void main() { + vUv = uv; + gl_Position = vec4(position, 1.0); + } + `, + ` + precision highp float; + varying vec2 vUv; + uniform sampler2D u_fx; + + void main() { + vec2 uv = vUv; + vec3 color = texture2D(u_fx, uv).rgb; + float brightness = dot(color, vec3(.2, .2, .2)); + float minVal = 0.0; + float maxVal = 1.0; + float alpha = smoothstep(minVal, maxVal, brightness); + gl_FragColor = vec4(color, alpha); + } + ` +);