|
| 1 | +"use client"; |
| 2 | + |
| 3 | +import * as THREE from "three"; |
| 4 | +import { useRef } from "react"; |
| 5 | +import { useFrame, useThree } from "@react-three/fiber"; |
| 6 | +import { |
| 7 | + useNoise, |
| 8 | + useFluid, |
| 9 | + useFxBlending, |
| 10 | + useColorStrata, |
| 11 | + useBrightnessPicker, |
| 12 | +} from "@/packages/use-shader-fx/src"; |
| 13 | +import { |
| 14 | + NoiseParams, |
| 15 | + NOISE_PARAMS, |
| 16 | +} from "@/packages/use-shader-fx/src/hooks/useNoise"; |
| 17 | +import { |
| 18 | + ColorStrataParams, |
| 19 | + COLORSTRATA_PARAMS, |
| 20 | +} from "@/packages/use-shader-fx/src/hooks/useColorStrata"; |
| 21 | +import GUI from "lil-gui"; |
| 22 | +import { useGUI } from "@/utils/useGUI"; |
| 23 | + |
| 24 | +const CONFIG = { |
| 25 | + noise: structuredClone(NOISE_PARAMS) as NoiseParams, |
| 26 | + colorStrata: { |
| 27 | + ...structuredClone(COLORSTRATA_PARAMS), |
| 28 | + laminateLayer: 20, |
| 29 | + laminateInterval: new THREE.Vector2(0.1, 0.1), |
| 30 | + laminateDetail: new THREE.Vector2(0.7, 0.7), |
| 31 | + distortion: new THREE.Vector2(10.0, 10.0), |
| 32 | + colorFactor: new THREE.Vector3(1, 1, 1), |
| 33 | + timeStrength: new THREE.Vector2(1, 1), |
| 34 | + noiseStrength: new THREE.Vector2(1, 1), |
| 35 | + } as ColorStrataParams, |
| 36 | +}; |
| 37 | + |
| 38 | +const setGUI = (gui: GUI) => { |
| 39 | + // noise |
| 40 | + const noise = gui.addFolder("noise"); |
| 41 | + noise.add(CONFIG.noise, "scale", 0, 0.1, 0.0001); |
| 42 | + noise.add(CONFIG.noise, "timeStrength", 0, 10, 0.01); |
| 43 | + noise.add(CONFIG.noise, "noiseOctaves", 1, 10, 1); |
| 44 | + noise.add(CONFIG.noise, "fbmOctaves", 1, 10, 1); |
| 45 | + noise.add(CONFIG.noise, "warpOctaves", 1, 10, 1); |
| 46 | + const warpDirection = noise.addFolder("warpDirection"); |
| 47 | + warpDirection.add(CONFIG.noise.warpDirection!, "x", 1, 10, 0.1); |
| 48 | + warpDirection.add(CONFIG.noise.warpDirection!, "y", 1, 10, 0.1); |
| 49 | + noise.add(CONFIG.noise, "warpStrength", 1, 50, 0.1); |
| 50 | + //color strata |
| 51 | + const colorStrata = gui.addFolder("colorStrata"); |
| 52 | + colorStrata.add(CONFIG.colorStrata, "laminateLayer", 0, 20, 1); |
| 53 | + colorStrata.add(CONFIG.colorStrata, "scale", 0, 1, 0.01); |
| 54 | + const laminateInterval = colorStrata.addFolder("laminateInterval"); |
| 55 | + laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "x", 0, 2, 0.01); |
| 56 | + laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "y", 0, 2, 0.01); |
| 57 | + const laminateDetail = colorStrata.addFolder("laminateDetail"); |
| 58 | + laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "x", 0, 10, 0.1); |
| 59 | + laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "y", 0, 10, 0.1); |
| 60 | + const distortion = colorStrata.addFolder("distortion"); |
| 61 | + distortion.add(CONFIG.colorStrata.distortion!, "x", 0, 10, 0.01); |
| 62 | + distortion.add(CONFIG.colorStrata.distortion!, "y", 0, 10, 0.01); |
| 63 | + const colorFactor = colorStrata.addFolder("colorFactor"); |
| 64 | + colorFactor.add(CONFIG.colorStrata.colorFactor!, "x", 0, 10, 0.01); |
| 65 | + colorFactor.add(CONFIG.colorStrata.colorFactor!, "y", 0, 10, 0.01); |
| 66 | + colorFactor.add(CONFIG.colorStrata.colorFactor!, "z", 0, 10, 0.01); |
| 67 | + const timeStrength = colorStrata.addFolder("timeStrength"); |
| 68 | + timeStrength.add(CONFIG.colorStrata.timeStrength!, "x", 0, 2, 0.01); |
| 69 | + timeStrength.add(CONFIG.colorStrata.timeStrength!, "y", 0, 2, 0.01); |
| 70 | + const noiseStrength = colorStrata.addFolder("noiseStrength"); |
| 71 | + noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "x", 0, 5, 0.01); |
| 72 | + noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "y", 0, 5, 0.01); |
| 73 | +}; |
| 74 | + |
| 75 | +const setConfig = () => { |
| 76 | + return { |
| 77 | + noise: { ...CONFIG.noise }, |
| 78 | + colorStrata: { ...CONFIG.colorStrata }, |
| 79 | + }; |
| 80 | +}; |
| 81 | + |
| 82 | +export const Playground = () => { |
| 83 | + const updateGUI = useGUI(setGUI); |
| 84 | + |
| 85 | + const ref = useRef<THREE.ShaderMaterial>(null); |
| 86 | + const { size, dpr } = useThree((state) => { |
| 87 | + return { size: state.size, dpr: state.viewport.dpr }; |
| 88 | + }); |
| 89 | + const [updateNoise] = useNoise({ size, dpr }); |
| 90 | + const [updateFluid] = useFluid({ size, dpr }); |
| 91 | + const [updateFxBlending, setFxBlending] = useFxBlending({ size, dpr }); |
| 92 | + const [updateColorStrata] = useColorStrata({ size, dpr }); |
| 93 | + // const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr }); |
| 94 | + |
| 95 | + useFrame((props) => { |
| 96 | + const noise = updateNoise(props, { |
| 97 | + ...setConfig().noise, |
| 98 | + }); |
| 99 | + // const fluid = updateFluid(props); |
| 100 | + // const blending = updateFxBlending(props, { |
| 101 | + // texture: fluid, |
| 102 | + // map: noise, |
| 103 | + // }); |
| 104 | + const colorStrata = updateColorStrata(props, { |
| 105 | + ...setConfig().colorStrata, |
| 106 | + texture: false, |
| 107 | + noise: false, |
| 108 | + }); |
| 109 | + ref.current!.uniforms.u_fx.value = colorStrata; |
| 110 | + updateGUI(); |
| 111 | + }); |
| 112 | + |
| 113 | + return ( |
| 114 | + <mesh> |
| 115 | + <planeGeometry args={[2, 2]} /> |
| 116 | + <shaderMaterial |
| 117 | + ref={ref} |
| 118 | + vertexShader={` |
| 119 | + varying vec2 vUv; |
| 120 | + void main() { |
| 121 | + vUv = uv; |
| 122 | + gl_Position = vec4(position, 1.0); |
| 123 | + } |
| 124 | + `} |
| 125 | + fragmentShader={` |
| 126 | + precision highp float; |
| 127 | + varying vec2 vUv; |
| 128 | + uniform sampler2D u_fx; |
| 129 | + |
| 130 | + void main() { |
| 131 | + vec2 uv = vUv; |
| 132 | + gl_FragColor = texture2D(u_fx, uv); |
| 133 | + } |
| 134 | + `} |
| 135 | + uniforms={{ |
| 136 | + u_fx: { value: null }, |
| 137 | + }} |
| 138 | + /> |
| 139 | + </mesh> |
| 140 | + ); |
| 141 | +}; |
0 commit comments