diff --git a/.storybook/constant.ts b/.storybook/constant.ts index 4594be4f..2e95f35f 100644 --- a/.storybook/constant.ts +++ b/.storybook/constant.ts @@ -1,5 +1,5 @@ import * as THREE from "three"; export const CONSTANT = { - imageResolution: new THREE.Vector2(1440, 1029), + textureResolution: new THREE.Vector2(1440, 1029), }; diff --git a/.storybook/stories/UseBrush.tsx b/.storybook/stories/UseBrush.tsx index 784afccf..8ce65a28 100644 --- a/.storybook/stories/UseBrush.tsx +++ b/.storybook/stories/UseBrush.tsx @@ -64,7 +64,7 @@ export const UseBrushWithTexture = (args: BrushParams) => { useFrame((props) => { const bgTexture = updateTransitionBg(props, { - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, }); const fx = updateBrush(props, { diff --git a/.storybook/stories/UseDuoTone.tsx b/.storybook/stories/UseDuoTone.tsx index 2be6ac75..05a2c977 100644 --- a/.storybook/stories/UseDuoTone.tsx +++ b/.storybook/stories/UseDuoTone.tsx @@ -36,7 +36,7 @@ export const UseDuoTone = (args: DuoToneParams) => { useFrame((props) => { const bgTexture = updateTransitionBg(props, { - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, }); const fx = updateDuoTone(props, { diff --git a/.storybook/stories/UseFluid.tsx b/.storybook/stories/UseFluid.tsx index ebc26671..256483cf 100644 --- a/.storybook/stories/UseFluid.tsx +++ b/.storybook/stories/UseFluid.tsx @@ -73,7 +73,7 @@ export const UseFluidWithTexture = (args: FluidParams) => { useFrame((props) => { const bgTexture = updateTransitionBg(props, { - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, }); diff --git a/.storybook/stories/UseFogProjection.tsx b/.storybook/stories/UseFogProjection.tsx index dfa56e8d..cc367199 100644 --- a/.storybook/stories/UseFogProjection.tsx +++ b/.storybook/stories/UseFogProjection.tsx @@ -48,7 +48,7 @@ export const UseFogProjection = (args: FogProjectionParams) => { useFrame((props) => { const bgTexture = updateTransitionBg(props, { - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, }); const noise = updateNoise(props); diff --git a/.storybook/stories/UseRipple.tsx b/.storybook/stories/UseRipple.tsx index 49a31bd8..6bfddad7 100644 --- a/.storybook/stories/UseRipple.tsx +++ b/.storybook/stories/UseRipple.tsx @@ -69,7 +69,7 @@ export const UseRippleWithTexture = (args: RippleParams) => { useFrame((props) => { const bgTexture = updateTransitionBg(props, { - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, }); const fx = updateRipple(props, setConfig()); diff --git a/.storybook/stories/UseTransitionBg.tsx b/.storybook/stories/UseTransitionBg.tsx index 172b03f5..39c3d10b 100644 --- a/.storybook/stories/UseTransitionBg.tsx +++ b/.storybook/stories/UseTransitionBg.tsx @@ -48,7 +48,7 @@ export const UseTransitionBg = (args: TransitionBgParams) => { const noise = updateNoise(props); const fx = updateTransitionBg(props, { noiseMap: noise, - imageResolution: CONSTANT.imageResolution, + textureResolution: CONSTANT.textureResolution, texture0: bg, texture1: momo, ...setConfig(), diff --git a/app/ShaderFx.tsx b/app/ShaderFx.tsx index 0c467ee3..9ba202f8 100644 --- a/app/ShaderFx.tsx +++ b/app/ShaderFx.tsx @@ -4,11 +4,8 @@ import { Suspense, useState } from "react"; import { Canvas } from "@react-three/fiber"; import { Perf } from "r3f-perf"; import { PerformanceMonitor } from "@react-three/drei"; -import { Demo } from "./_demo"; -// import CreateShaderFx from "@/CreateShaderFx"; - -export const ShaderFx = () => { +export const ShaderFx = ({ children }: { children: React.ReactNode }) => { const [dpr, setDpr] = useState(1.0); return ( @@ -18,10 +15,7 @@ export const ShaderFx = () => { console.log(`dpr:${dpr}`); setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10); }}> - - {/* When creating fx, please rewrite to CreateShaderFx */} - - + {children} diff --git a/app/_demo/config.ts b/app/_home/config.ts similarity index 100% rename from app/_demo/config.ts rename to app/_home/config.ts diff --git a/app/_demo/index.tsx b/app/_home/index.tsx similarity index 98% rename from app/_demo/index.tsx rename to app/_home/index.tsx index 404f2b1d..7c83ca8c 100644 --- a/app/_demo/index.tsx +++ b/app/_home/index.tsx @@ -15,7 +15,7 @@ import { extend({ FxTransparentMaterial }); -export const Demo = () => { +export const Home = () => { const updateGUI = useGUI(setGUI); const mainShaderRef = useRef(); @@ -90,7 +90,7 @@ the simplest demo // import { useFrame, useThree } from "@react-three/fiber"; // import { useFluid } from "@hmng8/use-shader-fx"; -// export const Demo = () => { +// export const Home = () => { // const ref = useRef(null); // const size = useThree((state) => state.size); // const dpr = useThree((state) => state.viewport.dpr); diff --git a/app/domSyncer/DomSyncer.tsx b/app/domSyncer/DomSyncer.tsx new file mode 100644 index 00000000..bcbb1c13 --- /dev/null +++ b/app/domSyncer/DomSyncer.tsx @@ -0,0 +1,79 @@ +import * as THREE from "three"; +import { useLayoutEffect, useRef } from "react"; +import { useFrame, extend, useThree, useLoader } from "@react-three/fiber"; +import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial"; +import { + useDomSyncer, + useNoise, + useTransitionBg, +} from "@/packages/use-shader-fx/src"; + +extend({ FxMaterial }); + +const CONSTANT = { + textureResolution: new THREE.Vector2(1440, 1029), +}; + +export const DomSyncer = ({ state }: { state: number }) => { + const mainShaderRef = useRef(); + + const [momo] = useLoader(THREE.TextureLoader, ["momo.jpg"]); + + const size = useThree((state) => state.size); + const dpr = useThree((state) => state.viewport.dpr); + + const [updateNoise] = useNoise({ size, dpr }); + const [updateTransitionBg] = useTransitionBg({ size, dpr }); + + const domArr = useRef<(HTMLElement | Element)[]>([]); + + const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer( + { size, dpr }, + [state] + ); + useLayoutEffect(() => { + if (state === 0) { + domArr.current = [...document.querySelectorAll(".item")!]; + } else { + domArr.current = [...document.querySelectorAll(".item2")!]; + } + setDomSyncer({ + dom: domArr.current, + boderRadius: [...Array(domArr.current.length)].map((_, i) => i * 50.0), + }); + }, [state, setDomSyncer, momo]); + + const resolutionRef = useRef(new THREE.Vector2(0, 0)); + useFrame((props) => { + const noise = updateNoise(props); + const fx = updateTransitionBg(props, { + noiseMap: noise, + textureResolution: CONSTANT.textureResolution, + texture0: momo, + texture1: momo, + noiseStrength: 0.05, + }); + + const syncedTexture = updateDomSyncer(props, { + texture: [...Array(domArr.current.length)].map(() => fx), + resolution: [...Array(domArr.current.length)].map(() => + resolutionRef.current.set(props.size.width, props.size.height) + ), + }); + + // console.log(domSyncerObj.isIntersecting(-1, false)); + + const main = mainShaderRef.current; + if (main) { + main.u_fx = syncedTexture; + main.u_alpha = 0.0; + } + }); + + return ( + + + + + ); +}; diff --git a/app/domSyncer/page.tsx b/app/domSyncer/page.tsx new file mode 100644 index 00000000..c3474fed --- /dev/null +++ b/app/domSyncer/page.tsx @@ -0,0 +1,78 @@ +"use client"; + +import { useState } from "react"; +import { ShaderFx } from "../ShaderFx"; +import { DomSyncer } from "./DomSyncer"; + +export default function Page() { + const [domSwitch, setDomSwitch] = useState(0); + return ( + <> +
+ + + +
+ +
+ {domSwitch === 0 ? ( + <> + {[...Array(4)].map((_, i) => ( +
+ ))} + + ) : ( + <> + {[...Array(2)].map((_, i) => ( +
+ ))} + + )} +
+ + ); +} diff --git a/app/layout.tsx b/app/layout.tsx index a978d9a5..a2374f8a 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -19,15 +19,7 @@ export default function RootLayout({ }) { return ( - - {children} - + {children} ); } diff --git a/app/page.tsx b/app/page.tsx index f669298a..19a49f13 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,14 @@ +"use client"; + import { ShaderFx } from "./ShaderFx"; +import { Home } from "./_home"; -export default function Home() { +export default function Page() { return (
- + + +

0.0 && distAlongLine < totalLength) || distFromStart < width || distFromEnd < width; - - return float(withinLine); -} - -vec4 createSmudge(){ - vec2 offsets[9]; - offsets[0] = vec2(-1, -1); offsets[1] = vec2( 0, -1); offsets[2] = vec2( 1, -1); - offsets[3] = vec2(-1, 0); offsets[4] = vec2( 0, 0); offsets[5] = vec2( 1, 0); - offsets[6] = vec2(-1, 1); offsets[7] = vec2( 0, 1); offsets[8] = vec2( 1, 1); - - for(int i = 0; i < 9; i++) { - offsets[i] = (offsets[i] * uSmudge) / uResolution; - } - vec4 smudgedColor = vec4(0.0); - for(int i = 0; i < 9; i++) { - smudgedColor += texture2D(uMap, vUv + offsets[i]); - } - return smudgedColor / 9.0; -} - -vec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples) { - vec4 motionBlurredColor = baseColor; - vec2 scaledVelocity = velocity * motion; - for(int i = 1; i < samples; i++) { - float t = float(i) / float(samples - 1); - vec2 offset = t * scaledVelocity / uResolution; - motionBlurredColor += texture2D(uMap, vUv + offset); - } - return motionBlurredColor / float(samples); -} - -void main() { - - vec2 st = vUv * 2.0 - 1.0; - - - vec2 velocity = uVelocity * uResolution; - - - vec4 smudgedColor = createSmudge(); - - - vec4 motionBlurredColor = createMotionBlur(smudgedColor, velocity, uMotionBlur,uMotionSample); - - vec4 bufferColor = motionBlurredColor * uDissipation; - - - float modifiedRadius = max(0.0,uRadius); - - - vec3 color = uColor; - - - vec4 textureColor = texture2D(uTexture, vUv); - vec3 finalColor = mix(color, textureColor.rgb, textureColor.a); - - float onLine = isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect); - bufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine); - - gl_FragColor = vec4(bufferColor.rgb,1.0); -}`; -const L = (n, i = !1) => { - const r = i ? n.width * i : n.width, e = i ? n.height * i : n.height; - return p( - () => new t.Vector2(r, e), - [r, e] - ); -}, E = (n, i, r) => { - const e = p( - () => new t.Mesh(i, r), - [i, r] - ); - return b(() => { - n.add(e); - }, [n, e]), b(() => () => { - n.remove(e), i.dispose(), r.dispose(); - }, [n, i, r, e]), e; -}, a = (n, i, r) => { - n.uniforms && n.uniforms[i] && r !== void 0 && r !== null ? n.uniforms[i].value = r : console.error( - `Uniform key "${String( - i - )}" does not exist in the material. or "${String( - i - )}" is null | undefined` - ); -}, ie = ({ - scene: n, - size: i, - dpr: r -}) => { - const e = p(() => new t.PlaneGeometry(2, 2), []), o = p( - () => new t.ShaderMaterial({ - uniforms: { - uMap: { value: new t.Texture() }, - uResolution: { value: new t.Vector2(0, 0) }, - uAspect: { value: 0 }, - uTexture: { value: new t.Texture() }, - uRadius: { value: 0 }, - uSmudge: { value: 0 }, - uDissipation: { value: 0 }, - uMotionBlur: { value: 0 }, - uMotionSample: { value: 0 }, - uMouse: { value: new t.Vector2(0, 0) }, - uPrevMouse: { value: new t.Vector2(0, 0) }, - uVelocity: { value: new t.Vector2(0, 0) }, - uColor: { value: new t.Color(16777215) } - }, - vertexShader: oe, - fragmentShader: ae - }), - [] - ), l = L(i, r); - return b(() => { - a(o, "uAspect", l.width / l.height), a(o, "uResolution", l.clone()); - }, [l, o]), E(n, e, o), o; -}, ue = (n, i) => { - const r = i, e = n / i, [o, l] = [r * e / 2, r / 2]; - return { width: o, height: l, near: -1e3, far: 1e3 }; -}, U = (n) => { - const i = L(n), { width: r, height: e, near: o, far: l } = ue( - i.x, - i.y - ); - return p( - () => new t.OrthographicCamera( - -r, - r, - e, - -e, - o, - l - ), - [r, e, o, l] - ); -}, G = { - minFilter: t.LinearFilter, - magFilter: t.LinearFilter, - type: t.HalfFloatType, - depthBuffer: !1, - stencilBuffer: !1 -}, D = ({ - scene: n, - camera: i, - size: r, - dpr: e = !1, - isSizeUpdate: o = !1 -}) => { - const l = S(), c = L(r, e); - l.current = p( - () => new t.WebGLRenderTarget(c.x, c.y, G), - // eslint-disable-next-line react-hooks/exhaustive-deps - [] - ), k(() => { - var s; - o && ((s = l.current) == null || s.setSize(c.x, c.y)); - }, [c, o]), b(() => { - const s = l.current; - return () => { - s == null || s.dispose(); - }; - }, []); - const u = C( - (s, v) => { - const f = l.current; - return s.setRenderTarget(f), v && v({ read: f.texture }), s.render(n, i), s.setRenderTarget(null), s.clear(), f.texture; - }, - [n, i] - ); - return [l.current, u]; -}, A = ({ - scene: n, - camera: i, - size: r, - dpr: e = !1, - isSizeUpdate: o = !1 -}) => { - const l = S({ - read: null, - write: null, - swap: function() { - let v = this.read; - this.read = this.write, this.write = v; - } - }), c = L(r, e), u = p(() => { - const v = new t.WebGLRenderTarget( - c.x, - c.y, - G - ), f = new t.WebGLRenderTarget( - c.x, - c.y, - G - ); - return { read: v, write: f }; - }, []); - l.current.read = u.read, l.current.write = u.write, k(() => { - var v, f; - o && ((v = l.current.read) == null || v.setSize(c.x, c.y), (f = l.current.write) == null || f.setSize(c.x, c.y)); - }, [c, o]), b(() => { - const v = l.current; - return () => { - var f, d; - (f = v.read) == null || f.dispose(), (d = v.write) == null || d.dispose(); - }; - }, []); - const s = C( - (v, f) => { - var m; - const d = l.current; - return v.setRenderTarget(d.write), f && f({ - read: d.read.texture, - write: d.write.texture - }), v.render(n, i), d.swap(), v.setRenderTarget(null), v.clear(), (m = d.read) == null ? void 0 : m.texture; - }, - [n, i] - ); - return [ - { read: l.current.read, write: l.current.write }, - s - ]; -}, W = () => { - const n = S(new t.Vector2(0, 0)), i = S(new t.Vector2(0, 0)), r = S(0), e = S(new t.Vector2(0, 0)), o = S(!1); - return C((c) => { - const u = performance.now(), s = c.clone(); - r.current === 0 && (r.current = u, n.current = s); - const v = Math.max(1, u - r.current); - r.current = u, e.current.copy(s).sub(n.current).divideScalar(v); - const f = e.current.length() > 0, d = o.current ? n.current.clone() : s; - return !o.current && f && (o.current = !0), n.current = s, { - currentPointer: s, - prevPointer: d, - diffPointer: i.current.subVectors(s, d), - velocity: e.current, - isVelocityUpdate: f - }; - }, []); -}, F = (n) => { - const r = S( - ((o) => Object.values(o).some((l) => typeof l == "function"))(n) ? n : structuredClone(n) - ), e = C((o) => { - for (const l in o) { - const c = l; - c in r.current && o[c] !== void 0 && o[c] !== null ? r.current[c] = o[c] : console.error( - `"${String( - c - )}" does not exist in the params. or "${String( - c - )}" is null | undefined` - ); - } - }, []); - return [r.current, e]; -}, se = { - texture: new t.Texture(), - radius: 0.05, - smudge: 0, - dissipation: 1, - motionBlur: 0, - motionSample: 5, - color: new t.Color(16777215) -}, ke = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), e = ie({ scene: r, size: n, dpr: i }), o = U(n), l = W(), [c, u] = A({ - scene: r, - camera: o, - size: n, - dpr: i - }), [s, v] = F(se); - return [ - C( - (d, m) => { - const { gl: y, pointer: h } = d; - m && v(m), a(e, "uTexture", s.texture), a(e, "uRadius", s.radius), a(e, "uSmudge", s.smudge), a(e, "uDissipation", s.dissipation), a(e, "uMotionBlur", s.motionBlur), a(e, "uMotionSample", s.motionSample), a(e, "uColor", s.color); - const { currentPointer: T, prevPointer: R, velocity: P } = l(h); - return a(e, "uMouse", T), a(e, "uPrevMouse", R), a(e, "uVelocity", P), u(y, ({ read: B }) => { - a(e, "uMap", B); - }); - }, - [e, l, u, s, v] - ), - v, - { - scene: r, - material: e, - camera: o, - renderTarget: c - } - ]; -}; -var le = `varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`, ce = `precision highp float; - -varying vec2 vUv; -uniform sampler2D uTexture; - -uniform vec3 uColor0; -uniform vec3 uColor1; - -void main() { - vec2 uv = vUv; - vec4 texColor = texture2D(uTexture, uv); - float grayscale = dot(texColor.rgb, vec3(0.299, 0.587, 0.114)); - vec3 duotone = mix(uColor0, uColor1, grayscale); - gl_FragColor = vec4(duotone, texColor.a); -}`; -const ve = (n) => { - const i = p(() => new t.PlaneGeometry(2, 2), []), r = p( - () => new t.ShaderMaterial({ - uniforms: { - uTexture: { value: new t.Texture() }, - uColor0: { value: new t.Color(16777215) }, - uColor1: { value: new t.Color(0) } - }, - vertexShader: le, - fragmentShader: ce - }), - [] - ); - return E(n, i, r), r; -}, fe = { - texture: new t.Texture(), - color0: new t.Color(16777215), - color1: new t.Color(0) -}, He = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), e = ve(r), o = U(n), [l, c] = D({ - scene: r, - camera: o, - size: n, - dpr: i - }), [u, s] = F(fe); - return [ - C( - (f, d) => { - const { gl: m } = f; - return d && s(d), a(e, "uTexture", u.texture), a(e, "uColor0", u.color0), a(e, "uColor1", u.color1), c(m); - }, - [c, e, s, u] - ), - s, - { - scene: r, - material: e, - camera: o, - renderTarget: l - } - ]; -}; -var de = `varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`, pe = `precision highp float; - -varying vec2 vUv; -uniform float uTime; -uniform sampler2D uTexture; -uniform sampler2D uNoiseMap; -uniform float distortionStrength; -uniform float fogEdge0; -uniform float fogEdge1; -uniform vec3 fogColor; - -void main() { - vec2 uv = vUv; - - float noiseMap = texture2D(uNoiseMap,uv).r; - - float noiseTextureMap = noiseMap*2.0-1.0; - uv += noiseTextureMap * distortionStrength; - vec3 textureMap = texture2D(uTexture, uv).rgb; - - float edge0 = fogEdge0; - float edge1 = fogEdge1; - float blendValue = smoothstep(edge0, edge1, noiseMap); - - vec3 outputColor = blendValue * fogColor + (1.0 - blendValue) * textureMap; - gl_FragColor = vec4(outputColor, 1.0); -}`; -const me = (n) => { - const i = p(() => new t.PlaneGeometry(2, 2), []), r = p( - () => new t.ShaderMaterial({ - uniforms: { - uTime: { value: 0 }, - uTexture: { value: new t.Texture() }, - uNoiseMap: { value: new t.Texture() }, - distortionStrength: { value: 0 }, - fogEdge0: { value: 0 }, - fogEdge1: { value: 0.9 }, - fogColor: { value: new t.Color(16777215) } - }, - vertexShader: de, - fragmentShader: pe - }), - [] - ); - return E(n, i, r), r; -}, ge = { - texture: new t.Texture(), - noiseMap: new t.Texture(), - distortionStrength: 0.03, - fogEdge0: 0, - fogEdge1: 0.9, - fogColor: new t.Color(16777215) -}, Je = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), e = me(r), o = U(n), [l, c] = D({ - scene: r, - camera: o, - size: n, - dpr: i - }), [u, s] = F(ge); - return [ - C( - (f, d) => { - const { gl: m, clock: y } = f; - return d && s(d), a(e, "uTime", y.getElapsedTime()), a(e, "uTexture", u.texture), a(e, "uNoiseMap", u.noiseMap), a(e, "distortionStrength", u.distortionStrength), a(e, "fogEdge0", u.fogEdge0), a(e, "fogEdge1", u.fogEdge1), a(e, "fogColor", u.fogColor), c(m); - }, - [c, e, s, u] - ), - s, - { - scene: r, - material: e, - camera: o, - renderTarget: l - } - ]; -}; -var _ = `varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform vec2 texelSize; - -void main () { - vUv = uv; - vL = vUv - vec2(texelSize.x, 0.0); - vR = vUv + vec2(texelSize.x, 0.0); - vT = vUv + vec2(0.0, texelSize.y); - vB = vUv - vec2(0.0, texelSize.y); - gl_Position = vec4(position, 1.0); -}`, xe = `precision highp float; - -void main(){ - gl_FragColor = vec4(0.0); -}`; -const ye = () => p( - () => new t.ShaderMaterial({ - vertexShader: _, - fragmentShader: xe, - depthTest: !1, - depthWrite: !1 - }), - [] -); -var Me = `precision highp float; - -varying vec2 vUv; -uniform sampler2D uVelocity; -uniform sampler2D uSource; -uniform vec2 texelSize; -uniform float dt; -uniform float dissipation; - -void main () { - vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; - gl_FragColor = dissipation * texture2D(uSource, coord); - gl_FragColor.a = 1.0; -}`; -const he = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uVelocity: { value: new t.Texture() }, - uSource: { value: new t.Texture() }, - texelSize: { value: new t.Vector2() }, - dt: { value: 0 }, - dissipation: { value: 0 } - }, - vertexShader: _, - fragmentShader: Me - }), - [] -); -var Te = `precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; - -vec2 sampleVelocity (in vec2 uv) { - vec2 multiplier = vec2(1.0, 1.0); - if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; } - if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; } - if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; } - if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; } - return multiplier * texture2D(uVelocity, uv).xy; -} - -void main () { - float L = sampleVelocity(vL).x; - float R = sampleVelocity(vR).x; - float T = sampleVelocity(vT).y; - float B = sampleVelocity(vB).y; - float div = 0.5 * (R - L + T - B); - gl_FragColor = vec4(div, 0.0, 0.0, 1.0); -}`; -const Se = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uVelocity: { value: null }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: Te - }), - [] -); -var we = `precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uPressure; -uniform sampler2D uDivergence; - -vec2 boundary (in vec2 uv) { - uv = min(max(uv, 0.0), 1.0); - return uv; -} - -void main () { - float L = texture2D(uPressure, boundary(vL)).x; - float R = texture2D(uPressure, boundary(vR)).x; - float T = texture2D(uPressure, boundary(vT)).x; - float B = texture2D(uPressure, boundary(vB)).x; - float C = texture2D(uPressure, vUv).x; - float divergence = texture2D(uDivergence, vUv).x; - float pressure = (L + R + B + T - divergence) * 0.25; - gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); -}`; -const Ce = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uPressure: { value: null }, - uDivergence: { value: null }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: we - }), - [] -); -var Re = `precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; - -void main () { - float L = texture2D(uVelocity, vL).y; - float R = texture2D(uVelocity, vR).y; - float T = texture2D(uVelocity, vT).x; - float B = texture2D(uVelocity, vB).x; - float vorticity = R - L - T + B; - gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); -}`; -const be = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uVelocity: { value: null }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: Re - }), - [] -); -var Ve = `precision highp float; - -varying vec2 vUv; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; -uniform sampler2D uCurl; -uniform float curl; -uniform float dt; - -void main () { - float T = texture2D(uCurl, vT).x; - float B = texture2D(uCurl, vB).x; - float C = texture2D(uCurl, vUv).x; - vec2 force = vec2(abs(T) - abs(B), 0.0); - force *= 1.0 / length(force + 0.00001) * curl * C; - vec2 vel = texture2D(uVelocity, vUv).xy; - gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); -}`; -const Pe = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uVelocity: { value: null }, - uCurl: { value: null }, - curl: { value: 0 }, - dt: { value: 0 }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: Ve - }), - [] -); -var _e = `precision highp float; - -varying vec2 vUv; -uniform sampler2D uTexture; -uniform float value; - -void main () { - gl_FragColor = value * texture2D(uTexture, vUv); -}`; -const De = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uTexture: { value: new t.Texture() }, - value: { value: 0 }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: _e - }), - [] -); -var Ue = `precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uPressure; -uniform sampler2D uVelocity; - -vec2 boundary (in vec2 uv) { - uv = min(max(uv, 0.0), 1.0); - return uv; -} - -void main () { - float L = texture2D(uPressure, boundary(vL)).x; - float R = texture2D(uPressure, boundary(vR)).x; - float T = texture2D(uPressure, boundary(vT)).x; - float B = texture2D(uPressure, boundary(vB)).x; - vec2 velocity = texture2D(uVelocity, vUv).xy; - velocity.xy -= vec2(R - L, T - B); - gl_FragColor = vec4(velocity, 0.0, 1.0); -}`; -const Fe = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uPressure: { value: new t.Texture() }, - uVelocity: { value: new t.Texture() }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: Ue - }), - [] -); -var Be = `precision highp float; - -varying vec2 vUv; -uniform sampler2D uTarget; -uniform float aspectRatio; -uniform vec3 color; -uniform vec2 point; -uniform float radius; - -void main () { - vec2 nPoint = (point + vec2(1.0)) * 0.5; - vec2 p = vUv - nPoint.xy; - p.x *= aspectRatio; - vec3 splat = exp(-dot(p, p) / radius) * color; - vec3 base = texture2D(uTarget, vUv).xyz; - gl_FragColor = vec4(base + splat, 1.0); -}`; -const Oe = () => p( - () => new t.ShaderMaterial({ - uniforms: { - uTarget: { value: new t.Texture() }, - aspectRatio: { value: 0 }, - color: { value: new t.Vector3() }, - point: { value: new t.Vector2() }, - radius: { value: 0 }, - texelSize: { value: new t.Vector2() } - }, - vertexShader: _, - fragmentShader: Be - }), - [] -), Le = ({ - scene: n, - size: i, - dpr: r -}) => { - const e = p(() => new t.PlaneGeometry(2, 2), []), o = ye(), l = o.clone(), c = be(), u = Pe(), s = he(), v = Se(), f = Ce(), d = De(), m = Fe(), y = Oe(), h = p( - () => ({ - vorticityMaterial: u, - curlMaterial: c, - advectionMaterial: s, - divergenceMaterial: v, - pressureMaterial: f, - clearMaterial: d, - gradientSubtractMaterial: m, - splatMaterial: y - }), - [ - u, - c, - s, - v, - f, - d, - m, - y - ] - ), T = L(i, r); - b(() => { - a( - h.splatMaterial, - "aspectRatio", - T.x / T.y - ); - for (const M of Object.values(h)) - a( - M, - "texelSize", - new t.Vector2(1 / T.x, 1 / T.y) - ); - }, [T, h]); - const R = E(n, e, o); - b(() => { - o.dispose(), R.material = l; - }, [o, R, l]), b(() => () => { - for (const M of Object.values(h)) - M.dispose(); - }, [h]); - const P = C( - (M) => { - R.material = M, R.material.needsUpdate = !0; - }, - [R] - ); - return [h, P]; -}, Ee = { - density_dissipation: 0.98, - velocity_dissipation: 0.99, - velocity_acceleration: 10, - pressure_dissipation: 0.9, - pressure_iterations: 20, - curl_strength: 35, - splat_radius: 2e-3, - fluid_color: new t.Vector3(1, 1, 1) -}, Ke = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), [e, o] = Le({ scene: r, size: n, dpr: i }), l = U(n), c = W(), u = p( - () => ({ - scene: r, - camera: l, - size: n - }), - [r, l, n] - ), [s, v] = A(u), [f, d] = A(u), [m, y] = D(u), [h, T] = D(u), [R, P] = A(u), M = S(0), B = S(new t.Vector2(0, 0)), $ = S(new t.Vector3(0, 0, 0)), [w, g] = F(Ee); - return [ - C( - (H, q) => { - const { gl: V, pointer: J, clock: z, size: X } = H; - q && g(q), M.current === 0 && (M.current = z.getElapsedTime()); - const Y = Math.min( - (z.getElapsedTime() - M.current) / 3, - 0.02 - ); - M.current = z.getElapsedTime(); - const N = v(V, ({ read: x }) => { - o(e.advectionMaterial), a(e.advectionMaterial, "uVelocity", x), a(e.advectionMaterial, "uSource", x), a(e.advectionMaterial, "dt", Y), a( - e.advectionMaterial, - "dissipation", - w.velocity_dissipation - ); - }), K = d(V, ({ read: x }) => { - o(e.advectionMaterial), a(e.advectionMaterial, "uVelocity", N), a(e.advectionMaterial, "uSource", x), a( - e.advectionMaterial, - "dissipation", - w.density_dissipation - ); - }), { currentPointer: Z, diffPointer: Q, isVelocityUpdate: ee, velocity: te } = c(J); - ee && (v(V, ({ read: x }) => { - o(e.splatMaterial), a(e.splatMaterial, "uTarget", x), a(e.splatMaterial, "point", Z); - const O = Q.multiply( - B.current.set(X.width, X.height).multiplyScalar(w.velocity_acceleration) - ); - a( - e.splatMaterial, - "color", - $.current.set(O.x, O.y, 1) - ), a( - e.splatMaterial, - "radius", - w.splat_radius - ); - }), d(V, ({ read: x }) => { - o(e.splatMaterial), a(e.splatMaterial, "uTarget", x); - const O = typeof w.fluid_color == "function" ? w.fluid_color(te) : w.fluid_color; - a(e.splatMaterial, "color", O); - })); - const ne = y(V, () => { - o(e.curlMaterial), a(e.curlMaterial, "uVelocity", N); - }); - v(V, ({ read: x }) => { - o(e.vorticityMaterial), a(e.vorticityMaterial, "uVelocity", x), a(e.vorticityMaterial, "uCurl", ne), a( - e.vorticityMaterial, - "curl", - w.curl_strength - ), a(e.vorticityMaterial, "dt", Y); - }); - const re = T(V, () => { - o(e.divergenceMaterial), a(e.divergenceMaterial, "uVelocity", N); - }); - P(V, ({ read: x }) => { - o(e.clearMaterial), a(e.clearMaterial, "uTexture", x), a( - e.clearMaterial, - "value", - w.pressure_dissipation - ); - }), o(e.pressureMaterial), a(e.pressureMaterial, "uDivergence", re); - let j; - for (let x = 0; x < w.pressure_iterations; x++) - j = P(V, ({ read: O }) => { - a(e.pressureMaterial, "uPressure", O); - }); - return v(V, ({ read: x }) => { - o(e.gradientSubtractMaterial), a( - e.gradientSubtractMaterial, - "uPressure", - j - ), a(e.gradientSubtractMaterial, "uVelocity", x); - }), K; - }, - [ - e, - o, - y, - d, - T, - c, - P, - v, - g, - w - ] - ), - g, - { - scene: r, - materials: e, - camera: l, - renderTarget: { - velocity: s, - density: f, - curl: m, - divergence: h, - pressure: R - } - } - ]; -}, Ae = ({ scale: n, max: i, texture: r, scene: e }) => { - const o = S([]), l = p( - () => new t.PlaneGeometry(n, n), - [n] - ), c = p( - () => new t.MeshBasicMaterial({ - map: r ?? null, - transparent: !0, - blending: t.AdditiveBlending, - depthTest: !1, - depthWrite: !1 - }), - [r] - ); - return b(() => { - for (let u = 0; u < i; u++) { - const s = new t.Mesh(l.clone(), c.clone()); - s.rotateZ(2 * Math.PI * Math.random()), s.visible = !1, e.add(s), o.current.push(s); - } - }, [l, c, e, i]), b(() => () => { - o.current.forEach((u) => { - u.geometry.dispose(), Array.isArray(u.material) ? u.material.forEach((s) => s.dispose()) : u.material.dispose(), e.remove(u); - }), o.current = []; - }, [e]), o.current; -}, $e = { - frequency: 0.01, - rotation: 0.05, - fadeout_speed: 0.9, - scale: 0.3, - alpha: 0.6 -}, Ze = ({ - texture: n, - scale: i = 64, - max: r = 100, - size: e -}) => { - const o = p(() => new t.Scene(), []), l = Ae({ - scale: i, - max: r, - texture: n, - scene: o - }), c = U(e), u = W(), [s, v] = D({ - scene: o, - camera: c, - size: e - }), [f, d] = F($e), m = S(0); - return [ - C( - (h, T) => { - const { gl: R, pointer: P, size: M } = h; - T && d(T); - const { currentPointer: B, diffPointer: $ } = u(P); - if (f.frequency < $.length()) { - const g = l[m.current]; - g.visible = !0, g.position.set( - B.x * (M.width / 2), - B.y * (M.height / 2), - 0 - ), g.scale.x = g.scale.y = 0, g.material.opacity = f.alpha, m.current = (m.current + 1) % r; - } - return l.forEach((g) => { - if (g.visible) { - const I = g.material; - g.rotation.z += f.rotation, I.opacity *= f.fadeout_speed, g.scale.x = f.fadeout_speed * g.scale.x + f.scale, g.scale.y = g.scale.x, I.opacity < 2e-3 && (g.visible = !1); - } - }), v(R); - }, - [v, l, u, r, f, d] - ), - d, - { - scene: o, - camera: c, - meshArr: l, - renderTarget: s - } - ]; -}; -var Ie = `varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`, ze = `precision highp float; - -varying vec2 vUv; -uniform vec2 uResolution; -uniform vec2 uImageResolution; - -uniform sampler2D uTexture0; -uniform sampler2D uTexture1; -uniform sampler2D uNoiseMap; -uniform float noiseStrength; -uniform float progress; -uniform float dirX; -uniform float dirY; - -void main() { - vec2 bgRatio=vec2( - min((uResolution.x/uResolution.y)/(uImageResolution.x/uImageResolution.y),1.), - min((uResolution.y/uResolution.x)/(uImageResolution.y/uImageResolution.x),1.) - ); - vec2 uv=vec2( - vUv.x*bgRatio.x+(1.-bgRatio.x)*.5, - vUv.y*bgRatio.y+(1.-bgRatio.y)*.5 - ); - - - vec2 noiseMap = texture2D(uNoiseMap, uv).rg; - noiseMap=noiseMap*2.0-1.0; - uv += noiseMap * noiseStrength; - - - vec2 centeredUV = uv - vec2(0.5); - - - float xOffsetTexture0 = 0.5 - dirX * progress; - float yOffsetTexture0 = 0.5 - dirY * progress; - vec2 samplePosTexture0 = vec2(xOffsetTexture0, yOffsetTexture0) + centeredUV; - - - float xOffsetTexture1 = 0.5 + dirX * (1.0 - progress); - float yOffsetTexture1 = 0.5 + dirY * (1.0 - progress); - vec2 samplePosTexture1 = vec2(xOffsetTexture1, yOffsetTexture1) + centeredUV; - - vec4 color0 = texture2D(uTexture0, samplePosTexture0); - vec4 color1 = texture2D(uTexture1, samplePosTexture1); - - gl_FragColor = mix(color0, color1, progress); - -}`; -const Ne = ({ - scene: n, - size: i, - dpr: r -}) => { - const e = p(() => new t.PlaneGeometry(2, 2), []), o = p( - () => new t.ShaderMaterial({ - uniforms: { - uResolution: { value: new t.Vector2() }, - uImageResolution: { value: new t.Vector2() }, - uTexture0: { value: new t.Texture() }, - uTexture1: { value: new t.Texture() }, - uNoiseMap: { value: new t.Texture() }, - noiseStrength: { value: 0 }, - progress: { value: 0 }, - dirX: { value: 0 }, - dirY: { value: 0 } - }, - vertexShader: Ie, - fragmentShader: ze - }), - [] - ), l = L(i, r); - return b(() => { - o.uniforms.uResolution.value = l.clone(); - }, [l, o]), E(n, e, o), o; -}, Ge = { - texture0: new t.Texture(), - texture1: new t.Texture(), - imageResolution: new t.Vector2(0, 0), - noiseMap: new t.Texture(), - noiseStrength: 0, - progress: 0, - dir: new t.Vector2(0, 0) -}, Qe = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), e = Ne({ scene: r, size: n, dpr: i }), o = U(n), [l, c] = D({ - scene: r, - camera: o, - dpr: i, - size: n, - isSizeUpdate: !0 - }), [u, s] = F(Ge); - return [ - C( - (f, d) => { - const { gl: m } = f; - return d && s(d), a(e, "uTexture0", u.texture0), a(e, "uTexture1", u.texture1), a(e, "uImageResolution", u.imageResolution), a(e, "uNoiseMap", u.noiseMap), a(e, "noiseStrength", u.noiseStrength), a(e, "progress", u.progress), a(e, "dirX", u.dir.x), a(e, "dirY", u.dir.y), c(m); - }, - [c, e, u, s] - ), - s, - { - scene: r, - material: e, - camera: o, - renderTarget: l - } - ]; -}; -var We = `varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`, qe = `precision highp float; - -varying vec2 vUv; -uniform float uTime; -uniform float timeStrength; -uniform int noiseOctaves; -uniform int fbmOctaves; - -const float per = 0.5; -const float PI = 3.14159265359; - -float interpolate(float a, float b, float x){ - float f = (1.0 - cos(x * PI)) * 0.5; - return a * (1.0 - f) + b * f; -} - -float rnd(vec2 p){ - vec3 p3 = fract(vec3(p.xyx) * .1995); - p3 += dot(p3, p3.yzx + 11.28); - return fract((p3.x + p3.y) * p3.z); -} - -float irnd(vec2 p){ - vec2 i = floor(p); - vec2 f = fract(p); - vec4 v = vec4(rnd(vec2(i.x,i.y)),rnd(vec2(i.x + 1.0,i.y)),rnd(vec2(i.x,i.y + 1.0)),rnd(vec2(i.x + 1.0, i.y + 1.0))); - return interpolate(interpolate(v.x, v.y, f.x), interpolate(v.z, v.w, f.x), f.y); -} - -float noise(vec2 p, float time){ - float t = 0.0; - for(int i = 0; i < noiseOctaves; i++){ - float freq = pow(2.0, float(i)); - float amp = pow(per, float(noiseOctaves - i)); - t += irnd(vec2(p.y / freq + time, p.x / freq + time)) * amp; - } - return t; -} - -float fbm(vec2 x, float time) { - float v = 0.0; - float a = 0.5; - vec2 shift = vec2(100); - mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5)); - float sign = 1.0; - for (int i = 0; i < fbmOctaves; ++i) { - v += a * noise(x, time * sign); - x = rot * x * 2.0 + shift; - a *= 0.5; - sign *= -1.0; - } - return v; -} - -void main() { - float noiseMap = fbm(gl_FragCoord.xy ,uTime * timeStrength); - gl_FragColor = vec4(noiseMap,noiseMap,noiseMap,1.0); -}`; -const Xe = (n) => { - const i = p(() => new t.PlaneGeometry(2, 2), []), r = p( - () => new t.ShaderMaterial({ - uniforms: { - uTime: { value: 0 }, - timeStrength: { value: 0 }, - noiseOctaves: { value: 0 }, - fbmOctaves: { value: 0 } - }, - vertexShader: We, - fragmentShader: qe - }), - [] - ); - return E(n, i, r), r; -}, Ye = { - timeStrength: 0.3, - noiseOctaves: 8, - fbmOctaves: 3 -}, et = ({ - size: n, - dpr: i -}) => { - const r = p(() => new t.Scene(), []), e = Xe(r), o = U(n), [l, c] = D({ - scene: r, - camera: o, - size: n, - dpr: i - }), [u, s] = F(Ye); - return [ - C( - (f, d) => { - const { gl: m, clock: y } = f; - return d && s(d), a(e, "timeStrength", u.timeStrength), a(e, "noiseOctaves", u.noiseOctaves), a(e, "fbmOctaves", u.fbmOctaves), a(e, "uTime", y.getElapsedTime()), c(m); - }, - [c, e, s, u] - ), - s, - { - scene: r, - material: e, - camera: o, - renderTarget: l - } - ]; -}; -export { - se as BRUSH_PARAMS, - fe as DUOTONE_PARAMS, - Ee as FLUID_PARAMS, - ge as FOGPROJECTION_PARAMS, - Ye as NOISE_PARAMS, - $e as RIPPLE_PARAMS, - Ge as TRANSITIONBG_PARAMS, - a as setUniform, - E as useAddMesh, - ke as useBrush, - U as useCamera, - A as useDoubleFBO, - He as useDuoTone, - Ke as useFluid, - Je as useFogProjection, - et as useNoise, - F as useParams, - W as usePointer, - L as useResolution, - Ze as useRipple, - D as useSingleFBO, - Qe as useTransitionBg -}; -//# sourceMappingURL=use-shader-fx.js.map diff --git a/packages/use-shader-fx/build/use-shader-fx.js.map b/packages/use-shader-fx/build/use-shader-fx.js.map deleted file mode 100644 index d550514b..00000000 --- a/packages/use-shader-fx/build/use-shader-fx.js.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"use-shader-fx.js","sources":["../src/hooks/useBrush/shader/main.vert","../src/hooks/useBrush/shader/main.frag","../src/utils/useResolution.ts","../src/utils/useAddMesh.ts","../src/utils/setUniforms.ts","../src/hooks/useBrush/useMesh.ts","../src/utils/useCamera.ts","../src/utils/useSingleFBO.ts","../src/utils/useDoubleFBO.ts","../src/utils/usePointer.ts","../src/utils/useParams.ts","../src/hooks/useBrush/index.ts","../src/hooks/useDuoTone/shader/main.vert","../src/hooks/useDuoTone/shader/main.frag","../src/hooks/useDuoTone/useMesh.ts","../src/hooks/useDuoTone/index.ts","../src/hooks/useFogProjection/shader/main.vert","../src/hooks/useFogProjection/shader/main.frag","../src/hooks/useFogProjection/useMesh.ts","../src/hooks/useFogProjection/index.ts","../src/hooks/useFluid/shaders/main.vert","../src/hooks/useFluid/shaders/init.frag","../src/hooks/useFluid/materials/useInitialMaterial.ts","../src/hooks/useFluid/shaders/advection.frag","../src/hooks/useFluid/materials/useAdvectionMaterial.ts","../src/hooks/useFluid/shaders/divergence.frag","../src/hooks/useFluid/materials/useDivergenceMaterial.ts","../src/hooks/useFluid/shaders/pressure.frag","../src/hooks/useFluid/materials/usePressureMaterial.ts","../src/hooks/useFluid/shaders/curl.frag","../src/hooks/useFluid/materials/useCurlMaterial.ts","../src/hooks/useFluid/shaders/vorticity.frag","../src/hooks/useFluid/materials/useVorticityMaterial.ts","../src/hooks/useFluid/shaders/clear.frag","../src/hooks/useFluid/materials/useClearMaterial.ts","../src/hooks/useFluid/shaders/gradientSubtract.frag","../src/hooks/useFluid/materials/useGradientSubtractMaterial.ts","../src/hooks/useFluid/shaders/splat.frag","../src/hooks/useFluid/materials/useSplatMaterial.ts","../src/hooks/useFluid/useMesh.ts","../src/hooks/useFluid/index.ts","../src/hooks/useRipple/useMesh.ts","../src/hooks/useRipple/index.ts","../src/hooks/useTransitionBg/shader/main.vert","../src/hooks/useTransitionBg/shader/main.frag","../src/hooks/useTransitionBg/useMesh.ts","../src/hooks/useTransitionBg/index.ts","../src/hooks/useNoise/shader/main.vert","../src/hooks/useNoise/shader/main.frag","../src/hooks/useNoise/useMesh.ts","../src/hooks/useNoise/index.ts"],"sourcesContent":["varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nuniform sampler2D uMap;\nuniform sampler2D uTexture;\nuniform float uRadius;\nuniform float uDissipation;\nuniform vec2 uResolution;\nuniform float uSmudge;\nuniform float uAspect;\nuniform vec2 uMouse;\nuniform vec2 uPrevMouse;\nuniform vec2 uVelocity;\nuniform vec3 uColor;\nuniform float uMotionBlur;\nuniform int uMotionSample;\n\nvarying vec2 vUv;\n\nfloat isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) {\n\t// make circle\n\tpoint.x *= aspect;\n\tstart.x *= aspect;\n\tend.x *= aspect;\n\n\t// unit vector in direction\n\tvec2 dir = normalize(end - start);\n\t\n\t// unit vector perpendicular to the line segment\n\tvec2 n = vec2(dir.y, -dir.x);\n\n\tvec2 p0 = point - start;\n\t\n\t// calculate distance on a line\n\tfloat distToLine = abs(dot(p0, n));\n\tfloat distAlongLine = dot(p0, dir);\n\tfloat totalLength = length(end - start);\n\n\t// Include the radius of the circle at the start and end points in the range\n\tfloat distFromStart = length(point - start);\n\tfloat distFromEnd = length(point - end);\n\t\n\tbool withinLine = (distToLine < width && distAlongLine > 0.0 && distAlongLine < totalLength) || distFromStart < width || distFromEnd < width;\n\n\treturn float(withinLine);\n}\n\nvec4 createSmudge(){\n\tvec2 offsets[9];\n\toffsets[0] = vec2(-1, -1); offsets[1] = vec2( 0, -1); offsets[2] = vec2( 1, -1);\n\toffsets[3] = vec2(-1, 0); offsets[4] = vec2( 0, 0); offsets[5] = vec2( 1, 0);\n\toffsets[6] = vec2(-1, 1); offsets[7] = vec2( 0, 1); offsets[8] = vec2( 1, 1);\n\t// Scale offset to texture size\n\tfor(int i = 0; i < 9; i++) {\n\t\toffsets[i] = (offsets[i] * uSmudge) / uResolution;\n\t}\t\n\tvec4 smudgedColor = vec4(0.0);\n\tfor(int i = 0; i < 9; i++) {\n\t\tsmudgedColor += texture2D(uMap, vUv + offsets[i]);\n\t}\n\treturn smudgedColor / 9.0;\n}\n\nvec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples) {\n\tvec4 motionBlurredColor = baseColor;\n\tvec2 scaledVelocity = velocity * motion;\n\tfor(int i = 1; i < samples; i++) {\n\t\tfloat t = float(i) / float(samples - 1);\n\t\tvec2 offset = t * scaledVelocity / uResolution;\n\t\tmotionBlurredColor += texture2D(uMap, vUv + offset);\n\t}\n\treturn motionBlurredColor / float(samples);\n}\n\n\nvoid main() {\n\t// Convert UV coordinates to range [-1, 1]\n\tvec2 st = vUv * 2.0 - 1.0;\n\t\n\t// velocity vector\n\tvec2 velocity = uVelocity * uResolution;\n\n\t// add smudge\n\tvec4 smudgedColor = createSmudge();\n\t\n\t// add motion blur\n\tvec4 motionBlurredColor = createMotionBlur(smudgedColor, velocity, uMotionBlur,uMotionSample);\n\n\tvec4 bufferColor = motionBlurredColor * uDissipation;\n\n\t// radius\n\tfloat modifiedRadius = max(0.0,uRadius);\n\n\t//\tcolor \n\tvec3 color = uColor;\n\n\t// map texture to color\n\tvec4 textureColor = texture2D(uTexture, vUv);\n\tvec3 finalColor = mix(color, textureColor.rgb, textureColor.a);\n\n\tfloat onLine = isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect);\n\tbufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine);\n\t\n\tgl_FragColor = vec4(bufferColor.rgb,1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport { Size } from \"@react-three/fiber\";\n\n/**\n * @params dpr if dpr is set, it returns the resolution which is size multiplied by dpr.\n */\nexport const useResolution = (size: Size, dpr: number | false = false) => {\n const _width = dpr ? size.width * dpr : size.width;\n const _height = dpr ? size.height * dpr : size.height;\n const resolution = useMemo(\n () => new THREE.Vector2(_width, _height),\n [_width, _height]\n );\n return resolution;\n};\n","import * as THREE from \"three\";\nimport { useEffect, useMemo } from \"react\";\n\n/** Generate mesh from geometry and material and add to scene */\nexport const useAddMesh = (\n scene: THREE.Scene,\n geometry: THREE.BufferGeometry,\n material: THREE.Material\n) => {\n const mesh = useMemo(\n () => new THREE.Mesh(geometry, material),\n [geometry, material]\n );\n\n useEffect(() => {\n scene.add(mesh);\n }, [scene, mesh]);\n\n useEffect(() => {\n return () => {\n scene.remove(mesh);\n geometry.dispose();\n material.dispose();\n };\n }, [scene, geometry, material, mesh]);\n\n return mesh;\n};\n","type UniformValue =\n | THREE.CubeTexture\n | THREE.Texture\n | Int32Array\n | Float32Array\n | THREE.Matrix4\n | THREE.Matrix3\n | THREE.Quaternion\n | THREE.Vector4\n | THREE.Vector3\n | THREE.Vector2\n | THREE.Color\n | number\n | boolean\n | Array\n | null;\ntype UniformObject = { [key: string]: { value: UniformValue } };\n\nexport const setUniform = (\n material: { uniforms: T },\n key: keyof T,\n value: UniformValue\n) => {\n if (\n material.uniforms &&\n material.uniforms[key] &&\n value !== undefined &&\n value !== null\n ) {\n material.uniforms[key].value = value;\n } else {\n console.error(\n `Uniform key \"${String(\n key\n )}\" does not exist in the material. or \"${String(\n key\n )}\" is null | undefined`\n );\n }\n};\n","import * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useEffect, useMemo } from \"react\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { Size } from \"@react-three/fiber\";\n\nexport class BrushMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uMap: { value: THREE.Texture };\n uResolution: { value: THREE.Texture };\n uAspect: { value: number };\n uTexture: { value: THREE.Texture };\n uRadius: { value: number };\n uSmudge: { value: number };\n uDissipation: { value: number };\n uMotionBlur: { value: number };\n uMotionSample: { value: number };\n uMouse: { value: number };\n uPrevMouse: { value: number };\n uVelocity: { value: number };\n uColor: { value: THREE.Color };\n };\n}\n\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uMap: { value: new THREE.Texture() },\n uResolution: { value: new THREE.Vector2(0, 0) },\n uAspect: { value: 0.0 },\n uTexture: { value: new THREE.Texture() },\n uRadius: { value: 0.0 },\n uSmudge: { value: 0.0 },\n uDissipation: { value: 0.0 },\n uMotionBlur: { value: 0.0 },\n uMotionSample: { value: 0 },\n uMouse: { value: new THREE.Vector2(0, 0) },\n uPrevMouse: { value: new THREE.Vector2(0, 0) },\n uVelocity: { value: new THREE.Vector2(0, 0) },\n uColor: { value: new THREE.Color(0xffffff) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n setUniform(material, \"uAspect\", resolution.width / resolution.height);\n setUniform(material, \"uResolution\", resolution.clone());\n }, [resolution, material]);\n\n useAddMesh(scene, geometry, material);\n\n return material as BrushMaterial;\n};\n","import * as THREE from \"three\";\nimport { useResolution } from \"./useResolution\";\nimport { useMemo } from \"react\";\nimport { Size } from \"@react-three/fiber\";\n\nconst getCameraProps = (width: number, height: number) => {\n const frustumSize = height;\n const aspect = width / height;\n const [w, h] = [(frustumSize * aspect) / 2, frustumSize / 2];\n return { width: w, height: h, near: -1000, far: 1000 };\n};\n\nexport const useCamera = (size: Size) => {\n const resolution = useResolution(size);\n const { width, height, near, far } = getCameraProps(\n resolution.x,\n resolution.y\n );\n const camera = useMemo(\n () =>\n new THREE.OrthographicCamera(\n -width,\n width,\n height,\n -height,\n near,\n far\n ),\n [width, height, near, far]\n );\n return camera;\n};\n","import * as THREE from \"three\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useResolution } from \"./useResolution\";\nimport { UseFboProps } from \"./types\";\n\nexport const FBO_OPTION = {\n minFilter: THREE.LinearFilter,\n magFilter: THREE.LinearFilter,\n type: THREE.HalfFloatType,\n depthBuffer: false,\n stencilBuffer: false,\n};\n\ntype FBOUpdateFunction = (\n gl: THREE.WebGLRenderer,\n /** call before FBO is rendered */\n onBeforeRender?: ({ read }: { read: THREE.Texture }) => void\n) => THREE.Texture;\n\ntype UseSingleFBOReturn = [THREE.WebGLRenderTarget, FBOUpdateFunction];\n\n/**\n * @param dpr If dpr is set, dpr will be multiplied, default:false\n * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false\n * @returns [THREE.WebGLRenderTarget , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.\n */\nexport const useSingleFBO = ({\n scene,\n camera,\n size,\n dpr = false,\n isSizeUpdate = false,\n}: UseFboProps): UseSingleFBOReturn => {\n const renderTarget = useRef();\n\n const resolution = useResolution(size, dpr);\n renderTarget.current = useMemo(\n () => new THREE.WebGLRenderTarget(resolution.x, resolution.y, FBO_OPTION),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n useLayoutEffect(() => {\n if (isSizeUpdate) {\n renderTarget.current?.setSize(resolution.x, resolution.y);\n }\n }, [resolution, isSizeUpdate]);\n\n useEffect(() => {\n const currentRenderTarget = renderTarget.current;\n return () => {\n currentRenderTarget?.dispose();\n };\n }, []);\n\n const updateRenderTarget: FBOUpdateFunction = useCallback(\n (gl, onBeforeRender) => {\n const fbo = renderTarget.current!;\n gl.setRenderTarget(fbo);\n onBeforeRender && onBeforeRender({ read: fbo.texture });\n gl.render(scene, camera);\n gl.setRenderTarget(null);\n gl.clear();\n return fbo.texture;\n },\n [scene, camera]\n );\n\n return [renderTarget.current, updateRenderTarget];\n};\n","import * as THREE from \"three\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { FBO_OPTION } from \"./useSingleFBO\";\nimport { useResolution } from \"./useResolution\";\nimport { DoubleRenderTarget, UseFboProps } from \"./types\";\n\ninterface RenderTarget extends DoubleRenderTarget {\n swap: () => void;\n}\n\ntype FBOUpdateFunction = (\n gl: THREE.WebGLRenderer,\n /** call before FBO is rendered */\n onBeforeRender?: ({\n read,\n write,\n }: {\n read: THREE.Texture;\n write: THREE.Texture;\n }) => void\n) => THREE.Texture;\n\ntype UseDoubleFBOReturn = [\n { read: THREE.WebGLRenderTarget; write: THREE.WebGLRenderTarget },\n FBOUpdateFunction\n];\n\n/**\n * @param dpr If dpr is set, dpr will be multiplied, default:false\n * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false\n * @returns [{read:THREE.WebGLRenderTarget,write:THREE.WebGLRenderTarget} , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.\n */\nexport const useDoubleFBO = ({\n scene,\n camera,\n size,\n dpr = false,\n isSizeUpdate = false,\n}: UseFboProps): UseDoubleFBOReturn => {\n const renderTarget = useRef({\n read: null,\n write: null,\n swap: function () {\n let temp = this.read;\n this.read = this.write;\n this.write = temp;\n },\n });\n\n const resolution = useResolution(size, dpr);\n const initRenderTargets = useMemo(() => {\n const read = new THREE.WebGLRenderTarget(\n resolution.x,\n resolution.y,\n FBO_OPTION\n );\n const write = new THREE.WebGLRenderTarget(\n resolution.x,\n resolution.y,\n FBO_OPTION\n );\n return { read, write };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n renderTarget.current.read = initRenderTargets.read;\n renderTarget.current.write = initRenderTargets.write;\n\n useLayoutEffect(() => {\n if (isSizeUpdate) {\n renderTarget.current.read?.setSize(resolution.x, resolution.y);\n renderTarget.current.write?.setSize(resolution.x, resolution.y);\n }\n }, [resolution, isSizeUpdate]);\n\n useEffect(() => {\n const currentRenderTarget = renderTarget.current;\n return () => {\n currentRenderTarget.read?.dispose();\n currentRenderTarget.write?.dispose();\n };\n }, []);\n\n const updateRenderTarget: FBOUpdateFunction = useCallback(\n (gl, onBeforeRender) => {\n const fbo = renderTarget.current;\n gl.setRenderTarget(fbo.write);\n onBeforeRender &&\n onBeforeRender({\n read: fbo.read!.texture,\n write: fbo.write!.texture,\n });\n gl.render(scene, camera);\n fbo.swap();\n gl.setRenderTarget(null);\n gl.clear();\n return fbo.read?.texture as THREE.Texture;\n },\n [scene, camera]\n );\n\n return [\n { read: renderTarget.current.read, write: renderTarget.current.write },\n updateRenderTarget,\n ];\n};\n","import * as THREE from \"three\";\nimport { useCallback, useRef } from \"react\";\n\ntype UpdatePointer = (currentPointer: THREE.Vector2) => {\n currentPointer: THREE.Vector2;\n prevPointer: THREE.Vector2;\n diffPointer: THREE.Vector2;\n velocity: THREE.Vector2;\n isVelocityUpdate: boolean;\n};\n\n/** When given the pointer vector2 from r3f's RootState, it generates an update function that returns {currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}. */\nexport const usePointer = (): UpdatePointer => {\n const prevPointer = useRef(new THREE.Vector2(0, 0));\n const diffPointer = useRef(new THREE.Vector2(0, 0));\n const lastUpdateTime = useRef(0);\n const velocity = useRef(new THREE.Vector2(0, 0));\n const isMoved = useRef(false);\n\n const updatePointer = useCallback((currentPointer: THREE.Vector2) => {\n const now = performance.now();\n const current = currentPointer.clone();\n\n // first frame\n if (lastUpdateTime.current === 0) {\n lastUpdateTime.current = now;\n prevPointer.current = current;\n }\n const deltaTime = Math.max(1, now - lastUpdateTime.current);\n lastUpdateTime.current = now;\n\n // get velocity\n velocity.current\n .copy(current)\n .sub(prevPointer.current)\n .divideScalar(deltaTime);\n const isUpdate = velocity.current.length() > 0;\n\n //set prev temp pos\n const prevTemp = isMoved.current ? prevPointer.current.clone() : current;\n if (!isMoved.current && isUpdate) {\n isMoved.current = true;\n }\n prevPointer.current = current;\n\n return {\n currentPointer: current,\n prevPointer: prevTemp,\n diffPointer: diffPointer.current.subVectors(current, prevTemp),\n velocity: velocity.current,\n isVelocityUpdate: isUpdate,\n };\n }, []);\n\n return updatePointer;\n};\n","import { useCallback, useRef } from \"react\";\n\ntype UseParamsReturn = [T, (params: Partial) => void];\n\n/**\n * @param params Receives an initial value object. With structuredClone, deep copy and set, but if the object contains a function, just set it.\n */\nexport const useParams = (params: T): UseParamsReturn => {\n const isContainsFunctions = (obj: object): boolean =>\n Object.values(obj).some((value) => typeof value === \"function\");\n const paramsRef = useRef(\n isContainsFunctions(params) ? params : structuredClone(params)\n );\n\n const setParams = useCallback((updateParams: Partial) => {\n for (const key in updateParams) {\n const paramKey = key as keyof T;\n if (\n paramKey in paramsRef.current &&\n updateParams[paramKey] !== undefined &&\n updateParams[paramKey] !== null\n ) {\n paramsRef.current[paramKey] = updateParams[paramKey]!;\n } else {\n console.error(\n `\"${String(\n paramKey\n )}\" does not exist in the params. or \"${String(\n paramKey\n )}\" is null | undefined`\n );\n }\n }\n }, []);\n return [paramsRef.current, setParams];\n};\n","import * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useDoubleFBO } from \"../../utils/useDoubleFBO\";\nimport { useCallback, useMemo } from \"react\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\nimport { DoubleRenderTarget } from \"../../utils/types\";\n\nexport type BrushParams = {\n /** Texture applied to the brush.Mixed with the value of a , default:THREE.Texture() */\n texture?: THREE.Texture;\n /** size of the stamp, percentage of the size ,default:0.05 */\n radius?: number;\n /** Strength of smudge effect , default:0.0*/\n smudge?: number;\n /** dissipation rate. If set to 1, it will remain. ,default:1.0 */\n dissipation?: number;\n /** Strength of motion blur , default:0.0 */\n motionBlur?: number;\n /** Number of motion blur samples. Affects performance default: 5 */\n motionSample?: number;\n /** brush color , default:THREE.Color(0xffffff) */\n color?: THREE.Color;\n};\n\nexport type BrushObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: DoubleRenderTarget;\n};\n\nexport const BRUSH_PARAMS: BrushParams = {\n texture: new THREE.Texture(),\n radius: 0.05,\n smudge: 0.0,\n dissipation: 1.0,\n motionBlur: 0.0,\n motionSample: 5,\n color: new THREE.Color(0xffffff),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useBrush = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n const [renderTarget, updateRenderTarget] = useDoubleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(BRUSH_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: BrushParams) => {\n const { gl, pointer } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uRadius\", params.radius!);\n setUniform(material, \"uSmudge\", params.smudge!);\n setUniform(material, \"uDissipation\", params.dissipation!);\n setUniform(material, \"uMotionBlur\", params.motionBlur!);\n setUniform(material, \"uMotionSample\", params.motionSample!);\n setUniform(material, \"uColor\", params.color!);\n\n const { currentPointer, prevPointer, velocity } =\n updatePointer(pointer);\n setUniform(material, \"uMouse\", currentPointer);\n setUniform(material, \"uPrevMouse\", prevPointer);\n setUniform(material, \"uVelocity\", velocity);\n\n const bufferTexture = updateRenderTarget(gl, ({ read }) => {\n setUniform(material, \"uMap\", read);\n });\n\n return bufferTexture;\n },\n [material, updatePointer, updateRenderTarget, params, setParams]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTexture;\n\nuniform vec3 uColor0;\nuniform vec3 uColor1;\n\nvoid main() {\n\tvec2 uv = vUv;\n\tvec4 texColor = texture2D(uTexture, uv);\n\tfloat grayscale = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));\n\tvec3 duotone = mix(uColor0, uColor1, grayscale);\n\tgl_FragColor = vec4(duotone, texColor.a);\n}","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class DuoToneMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTexture: { value: THREE.Texture };\n uColor0: { value: THREE.Color };\n uColor1: { value: THREE.Color };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTexture: { value: new THREE.Texture() },\n uColor0: { value: new THREE.Color(0xffffff) },\n uColor1: { value: new THREE.Color(0x000000) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as DuoToneMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { DuoToneMaterial, useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type DuoToneParams = {\n /** Make this texture duotone , Default:new THREE.Texture() */\n texture?: THREE.Texture;\n /** 1st color ,　Default:new THREE.Color(0xffffff) */\n color0?: THREE.Color;\n /** 2nd color , Default: new THREE.Color(0x000000) */\n color1?: THREE.Color;\n};\n\nexport type DuoToneObject = {\n scene: THREE.Scene;\n material: DuoToneMaterial;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const DUOTONE_PARAMS: DuoToneParams = {\n texture: new THREE.Texture(),\n color0: new THREE.Color(0xffffff),\n color1: new THREE.Color(0x000000),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useDuoTone = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(DUOTONE_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: DuoToneParams) => {\n const { gl } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uColor0\", params.color0!);\n setUniform(material, \"uColor1\", params.color1!);\n\n const bufferTexture = updateRenderTarget(gl);\n\n return bufferTexture;\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform float uTime;\nuniform sampler2D uTexture;\nuniform sampler2D uNoiseMap;\nuniform float distortionStrength;\nuniform float fogEdge0;\nuniform float fogEdge1;\nuniform vec3 fogColor;\n\nvoid main() {\n\tvec2 uv = vUv;\n\n\tfloat noiseMap = texture2D(uNoiseMap,uv).r;\n\t\n\tfloat noiseTextureMap = noiseMap*2.0-1.0;\n\tuv += noiseTextureMap * distortionStrength;\n\tvec3 textureMap = texture2D(uTexture, uv).rgb;\n\n\tfloat edge0 = fogEdge0;\n\tfloat edge1 = fogEdge1;\n\tfloat blendValue = smoothstep(edge0, edge1, noiseMap);\n\n\tvec3 outputColor = blendValue * fogColor + (1.0 - blendValue) * textureMap;\n\tgl_FragColor = vec4(outputColor, 1.0);\n}\n\n\n","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class FogProjectionMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTime: { value: number };\n uTexture: { value: THREE.Texture };\n uNoiseMap: { value: THREE.Texture };\n distortionStrength: { value: number };\n fogEdge0: { value: number };\n fogEdge1: { value: number };\n fogColor: { value: THREE.Color };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0.0 },\n uTexture: { value: new THREE.Texture() },\n uNoiseMap: { value: new THREE.Texture() },\n distortionStrength: { value: 0.0 },\n fogEdge0: { value: 0.0 },\n fogEdge1: { value: 0.9 },\n fogColor: { value: new THREE.Color(0xffffff) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as FogProjectionMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type FogProjectionParams = {\n /** Make this texture FogProjection , default:THREE.Texture */\n texture?: THREE.Texture;\n /** noise texture to map, default:THREE.Texture */\n noiseMap?: THREE.Texture;\n /** distortion strength , default:0.03 */\n distortionStrength?: number;\n /** value that reflects noise , default:0.0 */\n fogEdge0?: number;\n /** value that reflects noise , default:0.9 */\n fogEdge1?: number;\n /** fog color , default: THREE.Color(0xffffff) */\n fogColor?: THREE.Color;\n};\n\nexport type FogProjectionObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const FOGPROJECTION_PARAMS: FogProjectionParams = {\n texture: new THREE.Texture(),\n noiseMap: new THREE.Texture(),\n distortionStrength: 0.03,\n fogEdge0: 0.0,\n fogEdge1: 0.9,\n fogColor: new THREE.Color(0xffffff),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useFogProjection = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] =\n useParams(FOGPROJECTION_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: FogProjectionParams) => {\n const { gl, clock } = props;\n updateParams && setParams(updateParams);\n setUniform(material, \"uTime\", clock.getElapsedTime());\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uNoiseMap\", params.noiseMap!);\n setUniform(material, \"distortionStrength\", params.distortionStrength!);\n setUniform(material, \"fogEdge0\", params.fogEdge0!);\n setUniform(material, \"fogEdge1\", params.fogEdge1!);\n setUniform(material, \"fogColor\", params.fogColor!);\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform vec2 texelSize;\n\nvoid main () {\n\tvUv = uv;\n\tvL = vUv - vec2(texelSize.x, 0.0);\n\tvR = vUv + vec2(texelSize.x, 0.0);\n\tvT = vUv + vec2(0.0, texelSize.y);\n\tvB = vUv - vec2(0.0, texelSize.y);\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvoid main(){\n\tgl_FragColor = vec4(0.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/init.frag\";\n\nexport const useInitialMaterial = () => {\n const initialMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n depthTest: false,\n depthWrite: false,\n }),\n []\n );\n\n return initialMaterial as THREE.ShaderMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uVelocity;\nuniform sampler2D uSource;\nuniform vec2 texelSize;\nuniform float dt;\nuniform float dissipation;\n\nvoid main () {\n\tvec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;\n\tgl_FragColor = dissipation * texture2D(uSource, coord);\n\tgl_FragColor.a = 1.0;\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/advection.frag\";\n\nexport class AdvectionMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n uSource: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n dt: { value: number };\n dissipation: { value: number };\n };\n}\n\nexport const useAdvectionMaterial = () => {\n const advectionMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: new THREE.Texture() },\n uSource: { value: new THREE.Texture() },\n texelSize: { value: new THREE.Vector2() },\n dt: { value: 0.0 },\n dissipation: { value: 0.0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return advectionMaterial as AdvectionMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\n\nvec2 sampleVelocity (in vec2 uv) {\n\tvec2 multiplier = vec2(1.0, 1.0);\n\tif (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }\n\tif (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }\n\tif (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }\n\tif (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }\n\treturn multiplier * texture2D(uVelocity, uv).xy;\n}\n\nvoid main () {\n\tfloat L = sampleVelocity(vL).x;\n\tfloat R = sampleVelocity(vR).x;\n\tfloat T = sampleVelocity(vT).y;\n\tfloat B = sampleVelocity(vB).y;\n\tfloat div = 0.5 * (R - L + T - B);\n\tgl_FragColor = vec4(div, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/divergence.frag\";\n\nexport class DivergenceMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useDivergenceMaterial = () => {\n const divergenceMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return divergenceMaterial as DivergenceMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uPressure;\nuniform sampler2D uDivergence;\n\nvec2 boundary (in vec2 uv) {\n\tuv = min(max(uv, 0.0), 1.0);\n\treturn uv;\n}\n\nvoid main () {\n\tfloat L = texture2D(uPressure, boundary(vL)).x;\n\tfloat R = texture2D(uPressure, boundary(vR)).x;\n\tfloat T = texture2D(uPressure, boundary(vT)).x;\n\tfloat B = texture2D(uPressure, boundary(vB)).x;\n\tfloat C = texture2D(uPressure, vUv).x;\n\tfloat divergence = texture2D(uDivergence, vUv).x;\n\tfloat pressure = (L + R + B + T - divergence) * 0.25;\n\tgl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/pressure.frag\";\n\nexport class PressureMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uPressure: { value: THREE.Texture };\n uDivergence: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const usePressureMaterial = () => {\n const pressureMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uPressure: { value: null },\n uDivergence: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return pressureMaterial as PressureMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\n\nvoid main () {\n\tfloat L = texture2D(uVelocity, vL).y;\n\tfloat R = texture2D(uVelocity, vR).y;\n\tfloat T = texture2D(uVelocity, vT).x;\n\tfloat B = texture2D(uVelocity, vB).x;\n\tfloat vorticity = R - L - T + B;\n\tgl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/curl.frag\";\n\nexport class CurlMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useCurlMaterial = () => {\n const curlMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return curlMaterial as CurlMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\nuniform sampler2D uCurl;\nuniform float curl;\nuniform float dt;\n\nvoid main () {\n\tfloat T = texture2D(uCurl, vT).x;\n\tfloat B = texture2D(uCurl, vB).x;\n\tfloat C = texture2D(uCurl, vUv).x;\n\tvec2 force = vec2(abs(T) - abs(B), 0.0);\n\tforce *= 1.0 / length(force + 0.00001) * curl * C;\n\tvec2 vel = texture2D(uVelocity, vUv).xy;\n\tgl_FragColor = vec4(vel + force * dt, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/vorticity.frag\";\n\nexport class VorticityMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n uCurl: { value: THREE.Texture };\n curl: { value: number };\n dt: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useVorticityMaterial = () => {\n const vorticityMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n uCurl: { value: null },\n curl: { value: 0 },\n dt: { value: 0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return vorticityMaterial as VorticityMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTexture;\nuniform float value;\n\nvoid main () {\n\tgl_FragColor = value * texture2D(uTexture, vUv);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/clear.frag\";\n\nexport class ClearMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTexture: { value: THREE.Texture };\n value: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useClearMaterial = () => {\n const advectionMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTexture: { value: new THREE.Texture() },\n value: { value: 0.0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return advectionMaterial as ClearMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uPressure;\nuniform sampler2D uVelocity;\n\nvec2 boundary (in vec2 uv) {\n\tuv = min(max(uv, 0.0), 1.0);\n\treturn uv;\n}\n\nvoid main () {\n\tfloat L = texture2D(uPressure, boundary(vL)).x;\n\tfloat R = texture2D(uPressure, boundary(vR)).x;\n\tfloat T = texture2D(uPressure, boundary(vT)).x;\n\tfloat B = texture2D(uPressure, boundary(vB)).x;\n\tvec2 velocity = texture2D(uVelocity, vUv).xy;\n\tvelocity.xy -= vec2(R - L, T - B);\n\tgl_FragColor = vec4(velocity, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/gradientSubtract.frag\";\n\nexport class GradientSubtractMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uPressure: { value: THREE.Texture };\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useGradientSubtractMaterial = () => {\n const gradientSubtractMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uPressure: { value: new THREE.Texture() },\n uVelocity: { value: new THREE.Texture() },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return gradientSubtractMaterial as GradientSubtractMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTarget;\nuniform float aspectRatio;\nuniform vec3 color;\nuniform vec2 point;\nuniform float radius;\n\nvoid main () {\n\tvec2 nPoint = (point + vec2(1.0)) * 0.5;\n\tvec2 p = vUv - nPoint.xy;\n\tp.x *= aspectRatio;\n\tvec3 splat = exp(-dot(p, p) / radius) * color;\n\tvec3 base = texture2D(uTarget, vUv).xyz;\n\tgl_FragColor = vec4(base + splat, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/splat.frag\";\n\nexport class SplatMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTarget: { value: THREE.Texture };\n aspectRatio: { value: number };\n color: { value: THREE.Vector3 };\n point: { value: THREE.Vector2 };\n radius: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useSplateMaterial = () => {\n const splatMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTarget: { value: new THREE.Texture() },\n aspectRatio: { value: 0 },\n color: { value: new THREE.Vector3() },\n point: { value: new THREE.Vector2() },\n radius: { value: 0.0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return splatMaterial as SplatMaterial;\n};\n","import * as THREE from \"three\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport { useInitialMaterial } from \"./materials/useInitialMaterial\";\nimport {\n AdvectionMaterial,\n useAdvectionMaterial,\n} from \"./materials/useAdvectionMaterial\";\nimport {\n DivergenceMaterial,\n useDivergenceMaterial,\n} from \"./materials/useDivergenceMaterial\";\nimport {\n PressureMaterial,\n usePressureMaterial,\n} from \"./materials/usePressureMaterial\";\nimport { CurlMaterial, useCurlMaterial } from \"./materials/useCurlMaterial\";\nimport {\n VorticityMaterial,\n useVorticityMaterial,\n} from \"./materials/useVorticityMaterial\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport { ClearMaterial, useClearMaterial } from \"./materials/useClearMaterial\";\nimport {\n GradientSubtractMaterial,\n useGradientSubtractMaterial,\n} from \"./materials/useGradientSubtractMaterial\";\nimport { SplatMaterial, useSplateMaterial } from \"./materials/useSplatMaterial\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { Size } from \"@react-three/fiber\";\n\ntype TMaterials =\n | AdvectionMaterial\n | DivergenceMaterial\n | CurlMaterial\n | PressureMaterial\n | ClearMaterial\n | GradientSubtractMaterial\n | SplatMaterial;\n\nexport type FluidMaterials = {\n vorticityMaterial: VorticityMaterial;\n curlMaterial: CurlMaterial;\n advectionMaterial: AdvectionMaterial;\n divergenceMaterial: DivergenceMaterial;\n pressureMaterial: PressureMaterial;\n clearMaterial: ClearMaterial;\n gradientSubtractMaterial: GradientSubtractMaterial;\n splatMaterial: SplatMaterial;\n};\ntype TUseMeshReturnType = [FluidMaterials, (material: TMaterials) => void];\n\n/**\n * Returns the material update function in the second argument\n */\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}): TUseMeshReturnType => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const initialMaterial = useInitialMaterial();\n const updateMaterial = initialMaterial.clone();\n const curlMaterial = useCurlMaterial();\n const vorticityMaterial = useVorticityMaterial();\n const advectionMaterial = useAdvectionMaterial();\n const divergenceMaterial = useDivergenceMaterial();\n const pressureMaterial = usePressureMaterial();\n const clearMaterial = useClearMaterial();\n const gradientSubtractMaterial = useGradientSubtractMaterial();\n const splatMaterial = useSplateMaterial();\n const materials = useMemo(\n () => ({\n vorticityMaterial,\n curlMaterial,\n advectionMaterial,\n divergenceMaterial,\n pressureMaterial,\n clearMaterial,\n gradientSubtractMaterial,\n splatMaterial,\n }),\n [\n vorticityMaterial,\n curlMaterial,\n advectionMaterial,\n divergenceMaterial,\n pressureMaterial,\n clearMaterial,\n gradientSubtractMaterial,\n splatMaterial,\n ]\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n setUniform(\n materials.splatMaterial,\n \"aspectRatio\",\n resolution.x / resolution.y\n );\n for (const material of Object.values(materials)) {\n setUniform(\n material,\n \"texelSize\",\n new THREE.Vector2(1.0 / resolution.x, 1.0 / resolution.y)\n );\n }\n }, [resolution, materials]);\n\n const mesh = useAddMesh(scene, geometry, initialMaterial);\n useEffect(() => {\n initialMaterial.dispose();\n mesh.material = updateMaterial;\n }, [initialMaterial, mesh, updateMaterial]);\n\n useEffect(() => {\n return () => {\n for (const material of Object.values(materials)) {\n material.dispose();\n }\n };\n }, [materials]);\n\n const setMeshMaterial = useCallback(\n (material: TMaterials) => {\n mesh.material = material;\n mesh.material.needsUpdate = true;\n },\n [mesh]\n );\n\n return [materials, setMeshMaterial];\n};\n","import * as THREE from \"three\";\nimport { FluidMaterials, useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useDoubleFBO } from \"../../utils/useDoubleFBO\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\nimport { DoubleRenderTarget, UseFboProps } from \"../../utils/types\";\n\nexport type FluidParams = {\n /** density disspation , default:0.98 */\n density_dissipation?: number;\n /** velocity dissipation , default:0.99 */\n velocity_dissipation?: number;\n /** velocity acceleration , default:10.0 */\n velocity_acceleration?: number;\n /** pressure dissipation , default:0.9 */\n pressure_dissipation?: number;\n /** pressure iterations. affects performance , default:20 */\n pressure_iterations?: number;\n /** curl_strength , default:35 */\n curl_strength?: number;\n /** splat radius , default:0.002 */\n splat_radius?: number;\n /** Fluid Color.THREE.Vector3 Alternatively, it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */\n fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;\n};\n\nexport type FluidObject = {\n scene: THREE.Scene;\n materials: FluidMaterials;\n camera: THREE.Camera;\n renderTarget: {\n velocity: DoubleRenderTarget;\n density: DoubleRenderTarget;\n curl: THREE.WebGLRenderTarget;\n divergence: THREE.WebGLRenderTarget;\n pressure: DoubleRenderTarget;\n };\n};\n\nexport const FLUID_PARAMS: FluidParams = {\n density_dissipation: 0.98,\n velocity_dissipation: 0.99,\n velocity_acceleration: 10.0,\n pressure_dissipation: 0.9,\n pressure_iterations: 20,\n curl_strength: 35,\n splat_radius: 0.002,\n fluid_color: new THREE.Vector3(1.0, 1.0, 1.0),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useFluid = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const [materials, setMeshMaterial] = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n\n const fboProps = useMemo(\n () => ({\n scene,\n camera,\n size,\n }),\n [scene, camera, size]\n );\n const [velocityFBO, updateVelocityFBO] = useDoubleFBO(fboProps);\n const [densityFBO, updateDensityFBO] = useDoubleFBO(fboProps);\n const [curlFBO, updateCurlFBO] = useSingleFBO(fboProps);\n const [divergenceFBO, updateDivergenceFBO] = useSingleFBO(fboProps);\n const [pressureFBO, updatePressureFBO] = useDoubleFBO(fboProps);\n\n const lastTime = useRef(0);\n const scaledDiffVec = useRef(new THREE.Vector2(0, 0));\n const spaltVec = useRef(new THREE.Vector3(0, 0, 0));\n\n const [params, setParams] = useParams(FLUID_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: FluidParams) => {\n const { gl, pointer, clock, size } = props;\n\n updateParams && setParams(updateParams);\n\n if (lastTime.current === 0) {\n lastTime.current = clock.getElapsedTime();\n }\n const dt = Math.min(\n (clock.getElapsedTime() - lastTime.current) / 3,\n 0.02\n );\n lastTime.current = clock.getElapsedTime();\n\n // update velocity\n const velocityTex = updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.advectionMaterial);\n setUniform(materials.advectionMaterial, \"uVelocity\", read);\n setUniform(materials.advectionMaterial, \"uSource\", read);\n setUniform(materials.advectionMaterial, \"dt\", dt);\n setUniform(\n materials.advectionMaterial,\n \"dissipation\",\n params.velocity_dissipation!\n );\n });\n\n // update density\n const densityTex = updateDensityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.advectionMaterial);\n setUniform(materials.advectionMaterial, \"uVelocity\", velocityTex);\n setUniform(materials.advectionMaterial, \"uSource\", read);\n setUniform(\n materials.advectionMaterial,\n \"dissipation\",\n params.density_dissipation!\n );\n });\n\n // update splatting\n const { currentPointer, diffPointer, isVelocityUpdate, velocity } =\n updatePointer(pointer);\n if (isVelocityUpdate) {\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.splatMaterial);\n setUniform(materials.splatMaterial, \"uTarget\", read);\n setUniform(materials.splatMaterial, \"point\", currentPointer);\n const scaledDiff = diffPointer.multiply(\n scaledDiffVec.current\n .set(size.width, size.height)\n .multiplyScalar(params.velocity_acceleration!)\n );\n setUniform(\n materials.splatMaterial,\n \"color\",\n spaltVec.current.set(scaledDiff.x, scaledDiff.y, 1.0)\n );\n setUniform(\n materials.splatMaterial,\n \"radius\",\n params.splat_radius!\n );\n });\n updateDensityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.splatMaterial);\n setUniform(materials.splatMaterial, \"uTarget\", read);\n const color: THREE.Vector3 =\n typeof params.fluid_color === \"function\"\n ? params.fluid_color(velocity)\n : params.fluid_color!;\n setUniform(materials.splatMaterial, \"color\", color);\n });\n }\n\n // update curl\n const curlTex = updateCurlFBO(gl, () => {\n setMeshMaterial(materials.curlMaterial);\n setUniform(materials.curlMaterial, \"uVelocity\", velocityTex);\n });\n\n // update vorticity\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.vorticityMaterial);\n setUniform(materials.vorticityMaterial, \"uVelocity\", read);\n setUniform(materials.vorticityMaterial, \"uCurl\", curlTex);\n setUniform(\n materials.vorticityMaterial,\n \"curl\",\n params.curl_strength!\n );\n setUniform(materials.vorticityMaterial, \"dt\", dt);\n });\n\n // update divergence\n const divergenceTex = updateDivergenceFBO(gl, () => {\n setMeshMaterial(materials.divergenceMaterial);\n setUniform(materials.divergenceMaterial, \"uVelocity\", velocityTex);\n });\n\n // update pressure\n updatePressureFBO(gl, ({ read }) => {\n setMeshMaterial(materials.clearMaterial);\n setUniform(materials.clearMaterial, \"uTexture\", read);\n setUniform(\n materials.clearMaterial,\n \"value\",\n params.pressure_dissipation!\n );\n });\n\n // solve pressure iterative (Gauss-Seidel)\n setMeshMaterial(materials.pressureMaterial);\n setUniform(materials.pressureMaterial, \"uDivergence\", divergenceTex);\n let pressureTexTemp: THREE.Texture;\n for (let i = 0; i < params.pressure_iterations!; i++) {\n pressureTexTemp = updatePressureFBO(gl, ({ read }) => {\n setUniform(materials.pressureMaterial, \"uPressure\", read);\n });\n }\n\n // update gradienSubtract\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.gradientSubtractMaterial);\n setUniform(\n materials.gradientSubtractMaterial,\n \"uPressure\",\n pressureTexTemp\n );\n setUniform(materials.gradientSubtractMaterial, \"uVelocity\", read);\n });\n\n return densityTex;\n },\n [\n materials,\n setMeshMaterial,\n updateCurlFBO,\n updateDensityFBO,\n updateDivergenceFBO,\n updatePointer,\n updatePressureFBO,\n updateVelocityFBO,\n setParams,\n params,\n ]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n materials: materials,\n camera: camera,\n renderTarget: {\n velocity: velocityFBO,\n density: densityFBO,\n curl: curlFBO,\n divergence: divergenceFBO,\n pressure: pressureFBO,\n },\n },\n ];\n};\n","import { useEffect, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\n\ntype UseMeshProps = {\n scale: number;\n max: number;\n texture?: THREE.Texture;\n scene: THREE.Scene;\n};\n\nexport const useMesh = ({ scale, max, texture, scene }: UseMeshProps) => {\n const meshArr = useRef([]);\n const geometry = useMemo(\n () => new THREE.PlaneGeometry(scale, scale),\n [scale]\n );\n const material = useMemo(\n () =>\n new THREE.MeshBasicMaterial({\n map: texture ?? null,\n transparent: true,\n blending: THREE.AdditiveBlending,\n depthTest: false,\n depthWrite: false,\n }),\n [texture]\n );\n\n useEffect(() => {\n for (let i = 0; i < max; i++) {\n const mesh = new THREE.Mesh(geometry.clone(), material.clone());\n mesh.rotateZ(2 * Math.PI * Math.random());\n mesh.visible = false;\n scene.add(mesh);\n meshArr.current.push(mesh);\n }\n }, [geometry, material, scene, max]);\n\n useEffect(() => {\n return () => {\n meshArr.current.forEach((mesh) => {\n mesh.geometry.dispose();\n if (Array.isArray(mesh.material)) {\n mesh.material.forEach((material) => material.dispose());\n } else {\n mesh.material.dispose();\n }\n scene.remove(mesh);\n });\n meshArr.current = [];\n };\n }, [scene]);\n\n return meshArr.current;\n};\n","import { useCallback, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type RippleParams = {\n /** How often ripples appear,default:0.01 */\n frequency?: number;\n /** rotation rate,default:0.05 */\n rotation?: number;\n /** fadeout speed,default:0.9 */\n fadeout_speed?: number;\n /** scale rate,default:0.3 */\n scale?: number;\n /** alpha,default:0.6 */\n alpha?: number;\n};\n\nexport type RippleObject = {\n scene: THREE.Scene;\n meshArr: THREE.Mesh[];\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const RIPPLE_PARAMS: RippleParams = {\n frequency: 0.01,\n rotation: 0.05,\n fadeout_speed: 0.9,\n scale: 0.3,\n alpha: 0.6,\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useRipple = ({\n texture,\n scale = 64,\n max = 100,\n size,\n}: {\n /** texture applied to ripple */\n texture: THREE.Texture;\n /** ripple size, default:64 */\n scale?: number;\n /** ripple max length, default:100 */\n max?: number;\n size: Size;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const meshArr = useMesh({\n scale: scale,\n max: max,\n texture,\n scene,\n });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n });\n\n const [params, setParams] = useParams(RIPPLE_PARAMS);\n\n const currentWave = useRef(0);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: RippleParams) => {\n const { gl, pointer, size } = props;\n\n updateParams && setParams(updateParams);\n\n const { currentPointer, diffPointer } = updatePointer(pointer);\n if (params.frequency! < diffPointer.length()) {\n const mesh = meshArr[currentWave.current];\n mesh.visible = true;\n mesh.position.set(\n currentPointer.x * (size.width / 2),\n currentPointer.y * (size.height / 2),\n 0\n );\n mesh.scale.x = mesh.scale.y = 0.0;\n (mesh.material as THREE.MeshBasicMaterial).opacity = params.alpha!;\n currentWave.current = (currentWave.current + 1) % max;\n }\n meshArr.forEach((mesh) => {\n if (mesh.visible) {\n const material = mesh.material as THREE.MeshBasicMaterial;\n mesh.rotation.z += params.rotation!;\n material.opacity *= params.fadeout_speed!;\n mesh.scale.x =\n params.fadeout_speed! * mesh.scale.x + params.scale!;\n mesh.scale.y = mesh.scale.x;\n if (material.opacity < 0.002) mesh.visible = false;\n }\n });\n\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, meshArr, updatePointer, max, params, setParams]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n camera: camera,\n meshArr: meshArr,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform vec2 uResolution;\nuniform vec2 uImageResolution;\n\nuniform sampler2D uTexture0;\nuniform sampler2D uTexture1;\nuniform sampler2D uNoiseMap;\nuniform float noiseStrength;\nuniform float progress;\nuniform float dirX;\nuniform float dirY;\n\nvoid main() {\n\tvec2 bgRatio=vec2(\n\t\tmin((uResolution.x/uResolution.y)/(uImageResolution.x/uImageResolution.y),1.),\n\t\tmin((uResolution.y/uResolution.x)/(uImageResolution.y/uImageResolution.x),1.)\n\t);\n\tvec2 uv=vec2(\n\t\tvUv.x*bgRatio.x+(1.-bgRatio.x)*.5,\n\t\tvUv.y*bgRatio.y+(1.-bgRatio.y)*.5\n\t);\n\n\t// noise\n\tvec2 noiseMap = texture2D(uNoiseMap, uv).rg;\n\tnoiseMap=noiseMap*2.0-1.0;\n\tuv += noiseMap * noiseStrength;\n\n\t// center uv\n\tvec2 centeredUV = uv - vec2(0.5);\n\t\n\t// texture 0\n\tfloat xOffsetTexture0 = 0.5 - dirX * progress;\n\tfloat yOffsetTexture0 = 0.5 - dirY * progress;\n\tvec2 samplePosTexture0 = vec2(xOffsetTexture0, yOffsetTexture0) + centeredUV;\n\n\t//texture 1\n\tfloat xOffsetTexture1 = 0.5 + dirX * (1.0 - progress);\n\tfloat yOffsetTexture1 = 0.5 + dirY * (1.0 - progress);\n\tvec2 samplePosTexture1 = vec2(xOffsetTexture1, yOffsetTexture1) + centeredUV;\n\n\tvec4 color0 = texture2D(uTexture0, samplePosTexture0);\n\tvec4 color1 = texture2D(uTexture1, samplePosTexture1);\n\n\tgl_FragColor = mix(color0, color1, progress);\n\n}","import { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { Size } from \"@react-three/fiber\";\n\nexport class TransitionBgMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uResolution: { value: THREE.Vector2 };\n uImageResolution: { value: THREE.Vector2 };\n uTexture0: { value: THREE.Texture };\n uTexture1: { value: THREE.Texture };\n uNoiseMap: { value: THREE.Texture };\n noiseStrength: { value: number };\n progress: { value: number };\n dirX: { value: number };\n dirY: { value: number };\n };\n}\n\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uResolution: { value: new THREE.Vector2() },\n uImageResolution: { value: new THREE.Vector2() },\n uTexture0: { value: new THREE.Texture() },\n uTexture1: { value: new THREE.Texture() },\n uNoiseMap: { value: new THREE.Texture() },\n noiseStrength: { value: 0.0 },\n progress: { value: 0.0 },\n dirX: { value: 0.0 },\n dirY: { value: 0.0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n material.uniforms.uResolution.value = resolution.clone();\n }, [resolution, material]);\n\n useAddMesh(scene, geometry, material);\n\n return material as TransitionBgMaterial;\n};\n","import * as THREE from \"three\";\nimport { useCallback, useMemo } from \"react\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type TransitionBgParams = {\n /** 1st texture , default:THREE.Texture() */\n texture0?: THREE.Texture;\n /** 2nd texture , default:THREE.Texture() */\n texture1?: THREE.Texture;\n /** background image ratio , default:THREE.Vector2(0, 0) */\n imageResolution?: THREE.Vector2;\n /** Noise texture to be multiplied when transitioning. You can use useNoise, but you can also use noise texture exported as an image. , default:THREE.Texture() */\n noiseMap?: THREE.Texture;\n /** noise strength , default:0.0 */\n noiseStrength?: number;\n /** Switch value to switch between texture0 and texture1 */\n progress?: number;\n /** direction of transition , default: THREE.Vector2(0, 0) */\n dir?: THREE.Vector2;\n};\n\nexport type TransitionBgObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const TRANSITIONBG_PARAMS: TransitionBgParams = {\n texture0: new THREE.Texture(),\n texture1: new THREE.Texture(),\n imageResolution: new THREE.Vector2(0, 0),\n noiseMap: new THREE.Texture(),\n noiseStrength: 0.0,\n progress: 0.0,\n dir: new THREE.Vector2(0, 0),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useTransitionBg = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n dpr,\n size,\n isSizeUpdate: true,\n });\n\n const [params, setParams] =\n useParams(TRANSITIONBG_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: TransitionBgParams) => {\n const { gl } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture0\", params.texture0!);\n setUniform(material, \"uTexture1\", params.texture1!);\n setUniform(material, \"uImageResolution\", params.imageResolution!);\n setUniform(material, \"uNoiseMap\", params.noiseMap!);\n setUniform(material, \"noiseStrength\", params.noiseStrength!);\n setUniform(material, \"progress\", params.progress!);\n setUniform(material, \"dirX\", params.dir!.x);\n setUniform(material, \"dirY\", params.dir!.y);\n\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, material, params, setParams]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform float uTime;\nuniform float timeStrength;\nuniform int noiseOctaves;\nuniform int fbmOctaves;\n\nconst float per = 0.5;\nconst float PI = 3.14159265359;\n\nfloat interpolate(float a, float b, float x){\n float f = (1.0 - cos(x * PI)) * 0.5;\n return a * (1.0 - f) + b * f;\n}\n\nfloat rnd(vec2 p){\n\tvec3 p3 = fract(vec3(p.xyx) * .1995);\n\tp3 += dot(p3, p3.yzx + 11.28);\n\treturn fract((p3.x + p3.y) * p3.z);\n}\n\nfloat irnd(vec2 p){\n\tvec2 i = floor(p);\n\tvec2 f = fract(p);\n\tvec4 v = vec4(rnd(vec2(i.x,i.y)),rnd(vec2(i.x + 1.0,i.y)),rnd(vec2(i.x,i.y + 1.0)),rnd(vec2(i.x + 1.0, i.y + 1.0)));\n\treturn interpolate(interpolate(v.x, v.y, f.x), interpolate(v.z, v.w, f.x), f.y);\n}\n\n// Based on The Book of Shaders\n// https://thebookofshaders.com/13/\nfloat noise(vec2 p, float time){\n\tfloat t = 0.0;\n\tfor(int i = 0; i < noiseOctaves; i++){\n\t\tfloat freq = pow(2.0, float(i));\n\t\tfloat amp = pow(per, float(noiseOctaves - i));\n\t\tt += irnd(vec2(p.y / freq + time, p.x / freq + time)) * amp;\n\t}\n\treturn t;\n}\n\nfloat fbm(vec2 x, float time) {\n\tfloat v = 0.0;\n\tfloat a = 0.5;\n\tvec2 shift = vec2(100);\n\tmat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));\n\tfloat sign = 1.0;\n\tfor (int i = 0; i < fbmOctaves; ++i) {\n\t\tv += a * noise(x, time * sign);\n\t\tx = rot * x * 2.0 + shift;\n\t\ta *= 0.5;\n\t\tsign *= -1.0;\n\t}\n\treturn v;\n}\n\nvoid main() {\n\tfloat noiseMap = fbm(gl_FragCoord.xy ,uTime * timeStrength);\n\tgl_FragColor = vec4(noiseMap,noiseMap,noiseMap,1.0);\n}\n\n","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class NoiseMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTime: { value: number };\n timeStrength: { value: number };\n noiseOctaves: { value: number };\n fbmOctaves: { value: number };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0.0 },\n timeStrength: { value: 0.0 },\n noiseOctaves: { value: 0 },\n fbmOctaves: { value: 0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as NoiseMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { useParams } from \"../../utils/useParams\";\nimport { HooksReturn } from \"../types\";\n\nexport type NoiseParams = {\n /** time factor default:0.3 */\n timeStrength?: number;\n /** noiseOctaves, affects performance default:8 */\n noiseOctaves?: number;\n /** fbmOctaves, affects performance default:3 */\n fbmOctaves?: number;\n};\n\nexport type NoiseObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const NOISE_PARAMS: NoiseParams = {\n timeStrength: 0.3,\n noiseOctaves: 8,\n fbmOctaves: 3,\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useNoise = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(NOISE_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: NoiseParams) => {\n const { gl, clock } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"timeStrength\", params.timeStrength!);\n setUniform(material, \"noiseOctaves\", params.noiseOctaves!);\n setUniform(material, \"fbmOctaves\", params.fbmOctaves!);\n\n setUniform(material, \"uTime\", clock.getElapsedTime());\n\n return updateRenderTarget(gl);\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n"],"names":["main_default","useResolution","size","dpr","_width","_height","useMemo","THREE","useAddMesh","scene","geometry","material","mesh","useEffect","setUniform","key","value","useMesh","vertexShader","fragmentShader","resolution","getCameraProps","width","height","frustumSize","aspect","w","h","useCamera","near","far","FBO_OPTION","useSingleFBO","camera","isSizeUpdate","renderTarget","useRef","useLayoutEffect","_a","currentRenderTarget","updateRenderTarget","useCallback","gl","onBeforeRender","fbo","useDoubleFBO","temp","initRenderTargets","read","write","_b","usePointer","prevPointer","diffPointer","lastUpdateTime","velocity","isMoved","currentPointer","now","current","deltaTime","isUpdate","prevTemp","useParams","params","paramsRef","obj","setParams","updateParams","paramKey","BRUSH_PARAMS","useBrush","updatePointer","props","pointer","DUOTONE_PARAMS","useDuoTone","FOGPROJECTION_PARAMS","useFogProjection","clock","init_default","useInitialMaterial","advection_default","useAdvectionMaterial","divergence_default","useDivergenceMaterial","pressure_default","usePressureMaterial","curl_default","useCurlMaterial","vorticity_default","useVorticityMaterial","clear_default","useClearMaterial","gradientSubtract_default","useGradientSubtractMaterial","splat_default","useSplateMaterial","initialMaterial","updateMaterial","curlMaterial","vorticityMaterial","advectionMaterial","divergenceMaterial","pressureMaterial","clearMaterial","gradientSubtractMaterial","splatMaterial","materials","setMeshMaterial","FLUID_PARAMS","useFluid","fboProps","velocityFBO","updateVelocityFBO","densityFBO","updateDensityFBO","curlFBO","updateCurlFBO","divergenceFBO","updateDivergenceFBO","pressureFBO","updatePressureFBO","lastTime","scaledDiffVec","spaltVec","dt","velocityTex","densityTex","isVelocityUpdate","scaledDiff","color","curlTex","divergenceTex","pressureTexTemp","i","scale","max","texture","meshArr","RIPPLE_PARAMS","useRipple","currentWave","TRANSITIONBG_PARAMS","useTransitionBg","NOISE_PARAMS","useNoise"],"mappings":"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"} \ No newline at end of file diff --git a/packages/use-shader-fx/build/use-shader-fx.umd.cjs b/packages/use-shader-fx/build/use-shader-fx.umd.cjs deleted file mode 100644 index 04e3c04b..00000000 --- a/packages/use-shader-fx/build/use-shader-fx.umd.cjs +++ /dev/null @@ -1,434 +0,0 @@ -(function(g,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("three"),require("react")):typeof define=="function"&&define.amd?define(["exports","three","react"],E):(g=typeof globalThis<"u"?globalThis:g||self,E(g["use-shader-fx"]={},g.THREE,g.React))})(this,function(g,E,o){"use strict";function ee(t){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const e=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(a,r,e.get?e:{enumerable:!0,get:()=>t[r]})}}return a.default=t,Object.freeze(a)}const n=ee(E);var ne=`varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`,te=`precision highp float; - -uniform sampler2D uMap; -uniform sampler2D uTexture; -uniform float uRadius; -uniform float uDissipation; -uniform vec2 uResolution; -uniform float uSmudge; -uniform float uAspect; -uniform vec2 uMouse; -uniform vec2 uPrevMouse; -uniform vec2 uVelocity; -uniform vec3 uColor; -uniform float uMotionBlur; -uniform int uMotionSample; - -varying vec2 vUv; - -float isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) { - - point.x *= aspect; - start.x *= aspect; - end.x *= aspect; - - - vec2 dir = normalize(end - start); - - - vec2 n = vec2(dir.y, -dir.x); - - vec2 p0 = point - start; - - - float distToLine = abs(dot(p0, n)); - float distAlongLine = dot(p0, dir); - float totalLength = length(end - start); - - - float distFromStart = length(point - start); - float distFromEnd = length(point - end); - - bool withinLine = (distToLine < width && distAlongLine > 0.0 && distAlongLine < totalLength) || distFromStart < width || distFromEnd < width; - - return float(withinLine); -} - -vec4 createSmudge(){ - vec2 offsets[9]; - offsets[0] = vec2(-1, -1); offsets[1] = vec2( 0, -1); offsets[2] = vec2( 1, -1); - offsets[3] = vec2(-1, 0); offsets[4] = vec2( 0, 0); offsets[5] = vec2( 1, 0); - offsets[6] = vec2(-1, 1); offsets[7] = vec2( 0, 1); offsets[8] = vec2( 1, 1); - - for(int i = 0; i < 9; i++) { - offsets[i] = (offsets[i] * uSmudge) / uResolution; - } - vec4 smudgedColor = vec4(0.0); - for(int i = 0; i < 9; i++) { - smudgedColor += texture2D(uMap, vUv + offsets[i]); - } - return smudgedColor / 9.0; -} - -vec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples) { - vec4 motionBlurredColor = baseColor; - vec2 scaledVelocity = velocity * motion; - for(int i = 1; i < samples; i++) { - float t = float(i) / float(samples - 1); - vec2 offset = t * scaledVelocity / uResolution; - motionBlurredColor += texture2D(uMap, vUv + offset); - } - return motionBlurredColor / float(samples); -} - -void main() { - - vec2 st = vUv * 2.0 - 1.0; - - - vec2 velocity = uVelocity * uResolution; - - - vec4 smudgedColor = createSmudge(); - - - vec4 motionBlurredColor = createMotionBlur(smudgedColor, velocity, uMotionBlur,uMotionSample); - - vec4 bufferColor = motionBlurredColor * uDissipation; - - - float modifiedRadius = max(0.0,uRadius); - - - vec3 color = uColor; - - - vec4 textureColor = texture2D(uTexture, vUv); - vec3 finalColor = mix(color, textureColor.rgb, textureColor.a); - - float onLine = isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect); - bufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine); - - gl_FragColor = vec4(bufferColor.rgb,1.0); -}`;const O=(t,a=!1)=>{const r=a?t.width*a:t.width,e=a?t.height*a:t.height;return o.useMemo(()=>new n.Vector2(r,e),[r,e])},F=(t,a,r)=>{const e=o.useMemo(()=>new n.Mesh(a,r),[a,r]);return o.useEffect(()=>{t.add(e)},[t,e]),o.useEffect(()=>()=>{t.remove(e),a.dispose(),r.dispose()},[t,a,r,e]),e},u=(t,a,r)=>{t.uniforms&&t.uniforms[a]&&r!==void 0&&r!==null?t.uniforms[a].value=r:console.error(`Uniform key "${String(a)}" does not exist in the material. or "${String(a)}" is null | undefined`)},re=({scene:t,size:a,dpr:r})=>{const e=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),i=o.useMemo(()=>new n.ShaderMaterial({uniforms:{uMap:{value:new n.Texture},uResolution:{value:new n.Vector2(0,0)},uAspect:{value:0},uTexture:{value:new n.Texture},uRadius:{value:0},uSmudge:{value:0},uDissipation:{value:0},uMotionBlur:{value:0},uMotionSample:{value:0},uMouse:{value:new n.Vector2(0,0)},uPrevMouse:{value:new n.Vector2(0,0)},uVelocity:{value:new n.Vector2(0,0)},uColor:{value:new n.Color(16777215)}},vertexShader:ne,fragmentShader:te}),[]),c=O(a,r);return o.useEffect(()=>{u(i,"uAspect",c.width/c.height),u(i,"uResolution",c.clone())},[c,i]),F(t,e,i),i},oe=(t,a)=>{const r=a,e=t/a,[i,c]=[r*e/2,r/2];return{width:i,height:c,near:-1e3,far:1e3}},_=t=>{const a=O(t),{width:r,height:e,near:i,far:c}=oe(a.x,a.y);return o.useMemo(()=>new n.OrthographicCamera(-r,r,e,-e,i,c),[r,e,i,c])},I={minFilter:n.LinearFilter,magFilter:n.LinearFilter,type:n.HalfFloatType,depthBuffer:!1,stencilBuffer:!1},D=({scene:t,camera:a,size:r,dpr:e=!1,isSizeUpdate:i=!1})=>{const c=o.useRef(),v=O(r,e);c.current=o.useMemo(()=>new n.WebGLRenderTarget(v.x,v.y,I),[]),o.useLayoutEffect(()=>{var l;i&&((l=c.current)==null||l.setSize(v.x,v.y))},[v,i]),o.useEffect(()=>{const l=c.current;return()=>{l==null||l.dispose()}},[]);const s=o.useCallback((l,f)=>{const d=c.current;return l.setRenderTarget(d),f&&f({read:d.texture}),l.render(t,a),l.setRenderTarget(null),l.clear(),d.texture},[t,a]);return[c.current,s]},A=({scene:t,camera:a,size:r,dpr:e=!1,isSizeUpdate:i=!1})=>{const c=o.useRef({read:null,write:null,swap:function(){let f=this.read;this.read=this.write,this.write=f}}),v=O(r,e),s=o.useMemo(()=>{const f=new n.WebGLRenderTarget(v.x,v.y,I),d=new n.WebGLRenderTarget(v.x,v.y,I);return{read:f,write:d}},[]);c.current.read=s.read,c.current.write=s.write,o.useLayoutEffect(()=>{var f,d;i&&((f=c.current.read)==null||f.setSize(v.x,v.y),(d=c.current.write)==null||d.setSize(v.x,v.y))},[v,i]),o.useEffect(()=>{const f=c.current;return()=>{var d,m;(d=f.read)==null||d.dispose(),(m=f.write)==null||m.dispose()}},[]);const l=o.useCallback((f,d)=>{var p;const m=c.current;return f.setRenderTarget(m.write),d&&d({read:m.read.texture,write:m.write.texture}),f.render(t,a),m.swap(),f.setRenderTarget(null),f.clear(),(p=m.read)==null?void 0:p.texture},[t,a]);return[{read:c.current.read,write:c.current.write},l]},L=()=>{const t=o.useRef(new n.Vector2(0,0)),a=o.useRef(new n.Vector2(0,0)),r=o.useRef(0),e=o.useRef(new n.Vector2(0,0)),i=o.useRef(!1);return o.useCallback(v=>{const s=performance.now(),l=v.clone();r.current===0&&(r.current=s,t.current=l);const f=Math.max(1,s-r.current);r.current=s,e.current.copy(l).sub(t.current).divideScalar(f);const d=e.current.length()>0,m=i.current?t.current.clone():l;return!i.current&&d&&(i.current=!0),t.current=l,{currentPointer:l,prevPointer:m,diffPointer:a.current.subVectors(l,m),velocity:e.current,isVelocityUpdate:d}},[])},V=t=>{const a=i=>Object.values(i).some(c=>typeof c=="function"),r=o.useRef(a(t)?t:structuredClone(t)),e=o.useCallback(i=>{for(const c in i){const v=c;v in r.current&&i[v]!==void 0&&i[v]!==null?r.current[v]=i[v]:console.error(`"${String(v)}" does not exist in the params. or "${String(v)}" is null | undefined`)}},[]);return[r.current,e]},G={texture:new n.Texture,radius:.05,smudge:0,dissipation:1,motionBlur:0,motionSample:5,color:new n.Color(16777215)},ie=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),e=re({scene:r,size:t,dpr:a}),i=_(t),c=L(),[v,s]=A({scene:r,camera:i,size:t,dpr:a}),[l,f]=V(G);return[o.useCallback((m,p)=>{const{gl:M,pointer:T}=m;p&&f(p),u(e,"uTexture",l.texture),u(e,"uRadius",l.radius),u(e,"uSmudge",l.smudge),u(e,"uDissipation",l.dissipation),u(e,"uMotionBlur",l.motionBlur),u(e,"uMotionSample",l.motionSample),u(e,"uColor",l.color);const{currentPointer:S,prevPointer:R,velocity:P}=c(T);return u(e,"uMouse",S),u(e,"uPrevMouse",R),u(e,"uVelocity",P),s(M,({read:U})=>{u(e,"uMap",U)})},[e,c,s,l,f]),f,{scene:r,material:e,camera:i,renderTarget:v}]};var ae=`varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`,ue=`precision highp float; - -varying vec2 vUv; -uniform sampler2D uTexture; - -uniform vec3 uColor0; -uniform vec3 uColor1; - -void main() { - vec2 uv = vUv; - vec4 texColor = texture2D(uTexture, uv); - float grayscale = dot(texColor.rgb, vec3(0.299, 0.587, 0.114)); - vec3 duotone = mix(uColor0, uColor1, grayscale); - gl_FragColor = vec4(duotone, texColor.a); -}`;const se=t=>{const a=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),r=o.useMemo(()=>new n.ShaderMaterial({uniforms:{uTexture:{value:new n.Texture},uColor0:{value:new n.Color(16777215)},uColor1:{value:new n.Color(0)}},vertexShader:ae,fragmentShader:ue}),[]);return F(t,a,r),r},j={texture:new n.Texture,color0:new n.Color(16777215),color1:new n.Color(0)},le=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),e=se(r),i=_(t),[c,v]=D({scene:r,camera:i,size:t,dpr:a}),[s,l]=V(j);return[o.useCallback((d,m)=>{const{gl:p}=d;return m&&l(m),u(e,"uTexture",s.texture),u(e,"uColor0",s.color0),u(e,"uColor1",s.color1),v(p)},[v,e,l,s]),l,{scene:r,material:e,camera:i,renderTarget:c}]};var ce=`varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`,ve=`precision highp float; - -varying vec2 vUv; -uniform float uTime; -uniform sampler2D uTexture; -uniform sampler2D uNoiseMap; -uniform float distortionStrength; -uniform float fogEdge0; -uniform float fogEdge1; -uniform vec3 fogColor; - -void main() { - vec2 uv = vUv; - - float noiseMap = texture2D(uNoiseMap,uv).r; - - float noiseTextureMap = noiseMap*2.0-1.0; - uv += noiseTextureMap * distortionStrength; - vec3 textureMap = texture2D(uTexture, uv).rgb; - - float edge0 = fogEdge0; - float edge1 = fogEdge1; - float blendValue = smoothstep(edge0, edge1, noiseMap); - - vec3 outputColor = blendValue * fogColor + (1.0 - blendValue) * textureMap; - gl_FragColor = vec4(outputColor, 1.0); -}`;const fe=t=>{const a=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),r=o.useMemo(()=>new n.ShaderMaterial({uniforms:{uTime:{value:0},uTexture:{value:new n.Texture},uNoiseMap:{value:new n.Texture},distortionStrength:{value:0},fogEdge0:{value:0},fogEdge1:{value:.9},fogColor:{value:new n.Color(16777215)}},vertexShader:ce,fragmentShader:ve}),[]);return F(t,a,r),r},q={texture:new n.Texture,noiseMap:new n.Texture,distortionStrength:.03,fogEdge0:0,fogEdge1:.9,fogColor:new n.Color(16777215)},de=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),e=fe(r),i=_(t),[c,v]=D({scene:r,camera:i,size:t,dpr:a}),[s,l]=V(q);return[o.useCallback((d,m)=>{const{gl:p,clock:M}=d;return m&&l(m),u(e,"uTime",M.getElapsedTime()),u(e,"uTexture",s.texture),u(e,"uNoiseMap",s.noiseMap),u(e,"distortionStrength",s.distortionStrength),u(e,"fogEdge0",s.fogEdge0),u(e,"fogEdge1",s.fogEdge1),u(e,"fogColor",s.fogColor),v(p)},[v,e,l,s]),l,{scene:r,material:e,camera:i,renderTarget:c}]};var C=`varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform vec2 texelSize; - -void main () { - vUv = uv; - vL = vUv - vec2(texelSize.x, 0.0); - vR = vUv + vec2(texelSize.x, 0.0); - vT = vUv + vec2(0.0, texelSize.y); - vB = vUv - vec2(0.0, texelSize.y); - gl_Position = vec4(position, 1.0); -}`,me=`precision highp float; - -void main(){ - gl_FragColor = vec4(0.0); -}`;const ge=()=>o.useMemo(()=>new n.ShaderMaterial({vertexShader:C,fragmentShader:me,depthTest:!1,depthWrite:!1}),[]);var pe=`precision highp float; - -varying vec2 vUv; -uniform sampler2D uVelocity; -uniform sampler2D uSource; -uniform vec2 texelSize; -uniform float dt; -uniform float dissipation; - -void main () { - vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize; - gl_FragColor = dissipation * texture2D(uSource, coord); - gl_FragColor.a = 1.0; -}`;const xe=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uVelocity:{value:new n.Texture},uSource:{value:new n.Texture},texelSize:{value:new n.Vector2},dt:{value:0},dissipation:{value:0}},vertexShader:C,fragmentShader:pe}),[]);var ye=`precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; - -vec2 sampleVelocity (in vec2 uv) { - vec2 multiplier = vec2(1.0, 1.0); - if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; } - if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; } - if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; } - if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; } - return multiplier * texture2D(uVelocity, uv).xy; -} - -void main () { - float L = sampleVelocity(vL).x; - float R = sampleVelocity(vR).x; - float T = sampleVelocity(vT).y; - float B = sampleVelocity(vB).y; - float div = 0.5 * (R - L + T - B); - gl_FragColor = vec4(div, 0.0, 0.0, 1.0); -}`;const Me=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uVelocity:{value:null},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:ye}),[]);var he=`precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uPressure; -uniform sampler2D uDivergence; - -vec2 boundary (in vec2 uv) { - uv = min(max(uv, 0.0), 1.0); - return uv; -} - -void main () { - float L = texture2D(uPressure, boundary(vL)).x; - float R = texture2D(uPressure, boundary(vR)).x; - float T = texture2D(uPressure, boundary(vT)).x; - float B = texture2D(uPressure, boundary(vB)).x; - float C = texture2D(uPressure, vUv).x; - float divergence = texture2D(uDivergence, vUv).x; - float pressure = (L + R + B + T - divergence) * 0.25; - gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0); -}`;const Te=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uPressure:{value:null},uDivergence:{value:null},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:he}),[]);var Se=`precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; - -void main () { - float L = texture2D(uVelocity, vL).y; - float R = texture2D(uVelocity, vR).y; - float T = texture2D(uVelocity, vT).x; - float B = texture2D(uVelocity, vB).x; - float vorticity = R - L - T + B; - gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0); -}`;const we=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uVelocity:{value:null},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:Se}),[]);var Re=`precision highp float; - -varying vec2 vUv; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uVelocity; -uniform sampler2D uCurl; -uniform float curl; -uniform float dt; - -void main () { - float T = texture2D(uCurl, vT).x; - float B = texture2D(uCurl, vB).x; - float C = texture2D(uCurl, vUv).x; - vec2 force = vec2(abs(T) - abs(B), 0.0); - force *= 1.0 / length(force + 0.00001) * curl * C; - vec2 vel = texture2D(uVelocity, vUv).xy; - gl_FragColor = vec4(vel + force * dt, 0.0, 1.0); -}`;const be=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uVelocity:{value:null},uCurl:{value:null},curl:{value:0},dt:{value:0},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:Re}),[]);var Ce=`precision highp float; - -varying vec2 vUv; -uniform sampler2D uTexture; -uniform float value; - -void main () { - gl_FragColor = value * texture2D(uTexture, vUv); -}`;const Pe=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uTexture:{value:new n.Texture},value:{value:0},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:Ce}),[]);var _e=`precision highp float; - -varying vec2 vUv; -varying vec2 vL; -varying vec2 vR; -varying vec2 vT; -varying vec2 vB; -uniform sampler2D uPressure; -uniform sampler2D uVelocity; - -vec2 boundary (in vec2 uv) { - uv = min(max(uv, 0.0), 1.0); - return uv; -} - -void main () { - float L = texture2D(uPressure, boundary(vL)).x; - float R = texture2D(uPressure, boundary(vR)).x; - float T = texture2D(uPressure, boundary(vT)).x; - float B = texture2D(uPressure, boundary(vB)).x; - vec2 velocity = texture2D(uVelocity, vUv).xy; - velocity.xy -= vec2(R - L, T - B); - gl_FragColor = vec4(velocity, 0.0, 1.0); -}`;const De=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uPressure:{value:new n.Texture},uVelocity:{value:new n.Texture},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:_e}),[]);var Ve=`precision highp float; - -varying vec2 vUv; -uniform sampler2D uTarget; -uniform float aspectRatio; -uniform vec3 color; -uniform vec2 point; -uniform float radius; - -void main () { - vec2 nPoint = (point + vec2(1.0)) * 0.5; - vec2 p = vUv - nPoint.xy; - p.x *= aspectRatio; - vec3 splat = exp(-dot(p, p) / radius) * color; - vec3 base = texture2D(uTarget, vUv).xyz; - gl_FragColor = vec4(base + splat, 1.0); -}`;const Oe=()=>o.useMemo(()=>new n.ShaderMaterial({uniforms:{uTarget:{value:new n.Texture},aspectRatio:{value:0},color:{value:new n.Vector3},point:{value:new n.Vector2},radius:{value:0},texelSize:{value:new n.Vector2}},vertexShader:C,fragmentShader:Ve}),[]),Fe=({scene:t,size:a,dpr:r})=>{const e=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),i=ge(),c=i.clone(),v=we(),s=be(),l=xe(),f=Me(),d=Te(),m=Pe(),p=De(),M=Oe(),T=o.useMemo(()=>({vorticityMaterial:s,curlMaterial:v,advectionMaterial:l,divergenceMaterial:f,pressureMaterial:d,clearMaterial:m,gradientSubtractMaterial:p,splatMaterial:M}),[s,v,l,f,d,m,p,M]),S=O(a,r);o.useEffect(()=>{u(T.splatMaterial,"aspectRatio",S.x/S.y);for(const h of Object.values(T))u(h,"texelSize",new n.Vector2(1/S.x,1/S.y))},[S,T]);const R=F(t,e,i);o.useEffect(()=>{i.dispose(),R.material=c},[i,R,c]),o.useEffect(()=>()=>{for(const h of Object.values(T))h.dispose()},[T]);const P=o.useCallback(h=>{R.material=h,R.material.needsUpdate=!0},[R]);return[T,P]},W={density_dissipation:.98,velocity_dissipation:.99,velocity_acceleration:10,pressure_dissipation:.9,pressure_iterations:20,curl_strength:35,splat_radius:.002,fluid_color:new n.Vector3(1,1,1)},Ue=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),[e,i]=Fe({scene:r,size:t,dpr:a}),c=_(t),v=L(),s=o.useMemo(()=>({scene:r,camera:c,size:t}),[r,c,t]),[l,f]=A(s),[d,m]=A(s),[p,M]=D(s),[T,S]=D(s),[R,P]=A(s),h=o.useRef(0),U=o.useRef(new n.Vector2(0,0)),N=o.useRef(new n.Vector3(0,0,0)),[w,x]=V(W);return[o.useCallback((je,J)=>{const{gl:b,pointer:qe,clock:z,size:K}=je;J&&x(J),h.current===0&&(h.current=z.getElapsedTime());const Z=Math.min((z.getElapsedTime()-h.current)/3,.02);h.current=z.getElapsedTime();const k=f(b,({read:y})=>{i(e.advectionMaterial),u(e.advectionMaterial,"uVelocity",y),u(e.advectionMaterial,"uSource",y),u(e.advectionMaterial,"dt",Z),u(e.advectionMaterial,"dissipation",w.velocity_dissipation)}),We=m(b,({read:y})=>{i(e.advectionMaterial),u(e.advectionMaterial,"uVelocity",k),u(e.advectionMaterial,"uSource",y),u(e.advectionMaterial,"dissipation",w.density_dissipation)}),{currentPointer:He,diffPointer:Xe,isVelocityUpdate:Ye,velocity:Je}=v(qe);Ye&&(f(b,({read:y})=>{i(e.splatMaterial),u(e.splatMaterial,"uTarget",y),u(e.splatMaterial,"point",He);const B=Xe.multiply(U.current.set(K.width,K.height).multiplyScalar(w.velocity_acceleration));u(e.splatMaterial,"color",N.current.set(B.x,B.y,1)),u(e.splatMaterial,"radius",w.splat_radius)}),m(b,({read:y})=>{i(e.splatMaterial),u(e.splatMaterial,"uTarget",y);const B=typeof w.fluid_color=="function"?w.fluid_color(Je):w.fluid_color;u(e.splatMaterial,"color",B)}));const Ke=M(b,()=>{i(e.curlMaterial),u(e.curlMaterial,"uVelocity",k)});f(b,({read:y})=>{i(e.vorticityMaterial),u(e.vorticityMaterial,"uVelocity",y),u(e.vorticityMaterial,"uCurl",Ke),u(e.vorticityMaterial,"curl",w.curl_strength),u(e.vorticityMaterial,"dt",Z)});const Ze=S(b,()=>{i(e.divergenceMaterial),u(e.divergenceMaterial,"uVelocity",k)});P(b,({read:y})=>{i(e.clearMaterial),u(e.clearMaterial,"uTexture",y),u(e.clearMaterial,"value",w.pressure_dissipation)}),i(e.pressureMaterial),u(e.pressureMaterial,"uDivergence",Ze);let Q;for(let y=0;y{u(e.pressureMaterial,"uPressure",B)});return f(b,({read:y})=>{i(e.gradientSubtractMaterial),u(e.gradientSubtractMaterial,"uPressure",Q),u(e.gradientSubtractMaterial,"uVelocity",y)}),We},[e,i,M,m,S,v,P,f,x,w]),x,{scene:r,materials:e,camera:c,renderTarget:{velocity:l,density:d,curl:p,divergence:T,pressure:R}}]},Be=({scale:t,max:a,texture:r,scene:e})=>{const i=o.useRef([]),c=o.useMemo(()=>new n.PlaneGeometry(t,t),[t]),v=o.useMemo(()=>new n.MeshBasicMaterial({map:r??null,transparent:!0,blending:n.AdditiveBlending,depthTest:!1,depthWrite:!1}),[r]);return o.useEffect(()=>{for(let s=0;s()=>{i.current.forEach(s=>{s.geometry.dispose(),Array.isArray(s.material)?s.material.forEach(l=>l.dispose()):s.material.dispose(),e.remove(s)}),i.current=[]},[e]),i.current},H={frequency:.01,rotation:.05,fadeout_speed:.9,scale:.3,alpha:.6},Ee=({texture:t,scale:a=64,max:r=100,size:e})=>{const i=o.useMemo(()=>new n.Scene,[]),c=Be({scale:a,max:r,texture:t,scene:i}),v=_(e),s=L(),[l,f]=D({scene:i,camera:v,size:e}),[d,m]=V(H),p=o.useRef(0);return[o.useCallback((T,S)=>{const{gl:R,pointer:P,size:h}=T;S&&m(S);const{currentPointer:U,diffPointer:N}=s(P);if(d.frequency{if(x.visible){const $=x.material;x.rotation.z+=d.rotation,$.opacity*=d.fadeout_speed,x.scale.x=d.fadeout_speed*x.scale.x+d.scale,x.scale.y=x.scale.x,$.opacity<.002&&(x.visible=!1)}}),f(R)},[f,c,s,r,d,m]),m,{scene:i,camera:v,meshArr:c,renderTarget:l}]};var Ae=`varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`,Le=`precision highp float; - -varying vec2 vUv; -uniform vec2 uResolution; -uniform vec2 uImageResolution; - -uniform sampler2D uTexture0; -uniform sampler2D uTexture1; -uniform sampler2D uNoiseMap; -uniform float noiseStrength; -uniform float progress; -uniform float dirX; -uniform float dirY; - -void main() { - vec2 bgRatio=vec2( - min((uResolution.x/uResolution.y)/(uImageResolution.x/uImageResolution.y),1.), - min((uResolution.y/uResolution.x)/(uImageResolution.y/uImageResolution.x),1.) - ); - vec2 uv=vec2( - vUv.x*bgRatio.x+(1.-bgRatio.x)*.5, - vUv.y*bgRatio.y+(1.-bgRatio.y)*.5 - ); - - - vec2 noiseMap = texture2D(uNoiseMap, uv).rg; - noiseMap=noiseMap*2.0-1.0; - uv += noiseMap * noiseStrength; - - - vec2 centeredUV = uv - vec2(0.5); - - - float xOffsetTexture0 = 0.5 - dirX * progress; - float yOffsetTexture0 = 0.5 - dirY * progress; - vec2 samplePosTexture0 = vec2(xOffsetTexture0, yOffsetTexture0) + centeredUV; - - - float xOffsetTexture1 = 0.5 + dirX * (1.0 - progress); - float yOffsetTexture1 = 0.5 + dirY * (1.0 - progress); - vec2 samplePosTexture1 = vec2(xOffsetTexture1, yOffsetTexture1) + centeredUV; - - vec4 color0 = texture2D(uTexture0, samplePosTexture0); - vec4 color1 = texture2D(uTexture1, samplePosTexture1); - - gl_FragColor = mix(color0, color1, progress); - -}`;const Ie=({scene:t,size:a,dpr:r})=>{const e=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),i=o.useMemo(()=>new n.ShaderMaterial({uniforms:{uResolution:{value:new n.Vector2},uImageResolution:{value:new n.Vector2},uTexture0:{value:new n.Texture},uTexture1:{value:new n.Texture},uNoiseMap:{value:new n.Texture},noiseStrength:{value:0},progress:{value:0},dirX:{value:0},dirY:{value:0}},vertexShader:Ae,fragmentShader:Le}),[]),c=O(a,r);return o.useEffect(()=>{i.uniforms.uResolution.value=c.clone()},[c,i]),F(t,e,i),i},X={texture0:new n.Texture,texture1:new n.Texture,imageResolution:new n.Vector2(0,0),noiseMap:new n.Texture,noiseStrength:0,progress:0,dir:new n.Vector2(0,0)},Ne=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),e=Ie({scene:r,size:t,dpr:a}),i=_(t),[c,v]=D({scene:r,camera:i,dpr:a,size:t,isSizeUpdate:!0}),[s,l]=V(X);return[o.useCallback((d,m)=>{const{gl:p}=d;return m&&l(m),u(e,"uTexture0",s.texture0),u(e,"uTexture1",s.texture1),u(e,"uImageResolution",s.imageResolution),u(e,"uNoiseMap",s.noiseMap),u(e,"noiseStrength",s.noiseStrength),u(e,"progress",s.progress),u(e,"dirX",s.dir.x),u(e,"dirY",s.dir.y),v(p)},[v,e,s,l]),l,{scene:r,material:e,camera:i,renderTarget:c}]};var $e=`varying vec2 vUv; - -void main() { - vUv = uv; - gl_Position = vec4(position, 1.0); -}`,ze=`precision highp float; - -varying vec2 vUv; -uniform float uTime; -uniform float timeStrength; -uniform int noiseOctaves; -uniform int fbmOctaves; - -const float per = 0.5; -const float PI = 3.14159265359; - -float interpolate(float a, float b, float x){ - float f = (1.0 - cos(x * PI)) * 0.5; - return a * (1.0 - f) + b * f; -} - -float rnd(vec2 p){ - vec3 p3 = fract(vec3(p.xyx) * .1995); - p3 += dot(p3, p3.yzx + 11.28); - return fract((p3.x + p3.y) * p3.z); -} - -float irnd(vec2 p){ - vec2 i = floor(p); - vec2 f = fract(p); - vec4 v = vec4(rnd(vec2(i.x,i.y)),rnd(vec2(i.x + 1.0,i.y)),rnd(vec2(i.x,i.y + 1.0)),rnd(vec2(i.x + 1.0, i.y + 1.0))); - return interpolate(interpolate(v.x, v.y, f.x), interpolate(v.z, v.w, f.x), f.y); -} - -float noise(vec2 p, float time){ - float t = 0.0; - for(int i = 0; i < noiseOctaves; i++){ - float freq = pow(2.0, float(i)); - float amp = pow(per, float(noiseOctaves - i)); - t += irnd(vec2(p.y / freq + time, p.x / freq + time)) * amp; - } - return t; -} - -float fbm(vec2 x, float time) { - float v = 0.0; - float a = 0.5; - vec2 shift = vec2(100); - mat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5)); - float sign = 1.0; - for (int i = 0; i < fbmOctaves; ++i) { - v += a * noise(x, time * sign); - x = rot * x * 2.0 + shift; - a *= 0.5; - sign *= -1.0; - } - return v; -} - -void main() { - float noiseMap = fbm(gl_FragCoord.xy ,uTime * timeStrength); - gl_FragColor = vec4(noiseMap,noiseMap,noiseMap,1.0); -}`;const ke=t=>{const a=o.useMemo(()=>new n.PlaneGeometry(2,2),[]),r=o.useMemo(()=>new n.ShaderMaterial({uniforms:{uTime:{value:0},timeStrength:{value:0},noiseOctaves:{value:0},fbmOctaves:{value:0}},vertexShader:$e,fragmentShader:ze}),[]);return F(t,a,r),r},Y={timeStrength:.3,noiseOctaves:8,fbmOctaves:3},Ge=({size:t,dpr:a})=>{const r=o.useMemo(()=>new n.Scene,[]),e=ke(r),i=_(t),[c,v]=D({scene:r,camera:i,size:t,dpr:a}),[s,l]=V(Y);return[o.useCallback((d,m)=>{const{gl:p,clock:M}=d;return m&&l(m),u(e,"timeStrength",s.timeStrength),u(e,"noiseOctaves",s.noiseOctaves),u(e,"fbmOctaves",s.fbmOctaves),u(e,"uTime",M.getElapsedTime()),v(p)},[v,e,l,s]),l,{scene:r,material:e,camera:i,renderTarget:c}]};g.BRUSH_PARAMS=G,g.DUOTONE_PARAMS=j,g.FLUID_PARAMS=W,g.FOGPROJECTION_PARAMS=q,g.NOISE_PARAMS=Y,g.RIPPLE_PARAMS=H,g.TRANSITIONBG_PARAMS=X,g.setUniform=u,g.useAddMesh=F,g.useBrush=ie,g.useCamera=_,g.useDoubleFBO=A,g.useDuoTone=le,g.useFluid=Ue,g.useFogProjection=de,g.useNoise=Ge,g.useParams=V,g.usePointer=L,g.useResolution=O,g.useRipple=Ee,g.useSingleFBO=D,g.useTransitionBg=Ne,Object.defineProperty(g,Symbol.toStringTag,{value:"Module"})}); -//# sourceMappingURL=use-shader-fx.umd.cjs.map diff --git a/packages/use-shader-fx/build/use-shader-fx.umd.cjs.map b/packages/use-shader-fx/build/use-shader-fx.umd.cjs.map deleted file mode 100644 index 085ad14e..00000000 --- a/packages/use-shader-fx/build/use-shader-fx.umd.cjs.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"file":"use-shader-fx.umd.cjs","sources":["../src/hooks/useBrush/shader/main.vert","../src/hooks/useBrush/shader/main.frag","../src/utils/useResolution.ts","../src/utils/useAddMesh.ts","../src/utils/setUniforms.ts","../src/hooks/useBrush/useMesh.ts","../src/utils/useCamera.ts","../src/utils/useSingleFBO.ts","../src/utils/useDoubleFBO.ts","../src/utils/usePointer.ts","../src/utils/useParams.ts","../src/hooks/useBrush/index.ts","../src/hooks/useDuoTone/shader/main.vert","../src/hooks/useDuoTone/shader/main.frag","../src/hooks/useDuoTone/useMesh.ts","../src/hooks/useDuoTone/index.ts","../src/hooks/useFogProjection/shader/main.vert","../src/hooks/useFogProjection/shader/main.frag","../src/hooks/useFogProjection/useMesh.ts","../src/hooks/useFogProjection/index.ts","../src/hooks/useFluid/shaders/main.vert","../src/hooks/useFluid/shaders/init.frag","../src/hooks/useFluid/materials/useInitialMaterial.ts","../src/hooks/useFluid/shaders/advection.frag","../src/hooks/useFluid/materials/useAdvectionMaterial.ts","../src/hooks/useFluid/shaders/divergence.frag","../src/hooks/useFluid/materials/useDivergenceMaterial.ts","../src/hooks/useFluid/shaders/pressure.frag","../src/hooks/useFluid/materials/usePressureMaterial.ts","../src/hooks/useFluid/shaders/curl.frag","../src/hooks/useFluid/materials/useCurlMaterial.ts","../src/hooks/useFluid/shaders/vorticity.frag","../src/hooks/useFluid/materials/useVorticityMaterial.ts","../src/hooks/useFluid/shaders/clear.frag","../src/hooks/useFluid/materials/useClearMaterial.ts","../src/hooks/useFluid/shaders/gradientSubtract.frag","../src/hooks/useFluid/materials/useGradientSubtractMaterial.ts","../src/hooks/useFluid/shaders/splat.frag","../src/hooks/useFluid/materials/useSplatMaterial.ts","../src/hooks/useFluid/useMesh.ts","../src/hooks/useFluid/index.ts","../src/hooks/useRipple/useMesh.ts","../src/hooks/useRipple/index.ts","../src/hooks/useTransitionBg/shader/main.vert","../src/hooks/useTransitionBg/shader/main.frag","../src/hooks/useTransitionBg/useMesh.ts","../src/hooks/useTransitionBg/index.ts","../src/hooks/useNoise/shader/main.vert","../src/hooks/useNoise/shader/main.frag","../src/hooks/useNoise/useMesh.ts","../src/hooks/useNoise/index.ts"],"sourcesContent":["varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nuniform sampler2D uMap;\nuniform sampler2D uTexture;\nuniform float uRadius;\nuniform float uDissipation;\nuniform vec2 uResolution;\nuniform float uSmudge;\nuniform float uAspect;\nuniform vec2 uMouse;\nuniform vec2 uPrevMouse;\nuniform vec2 uVelocity;\nuniform vec3 uColor;\nuniform float uMotionBlur;\nuniform int uMotionSample;\n\nvarying vec2 vUv;\n\nfloat isOnLine(vec2 point, vec2 start, vec2 end, float width, float aspect) {\n\t// make circle\n\tpoint.x *= aspect;\n\tstart.x *= aspect;\n\tend.x *= aspect;\n\n\t// unit vector in direction\n\tvec2 dir = normalize(end - start);\n\t\n\t// unit vector perpendicular to the line segment\n\tvec2 n = vec2(dir.y, -dir.x);\n\n\tvec2 p0 = point - start;\n\t\n\t// calculate distance on a line\n\tfloat distToLine = abs(dot(p0, n));\n\tfloat distAlongLine = dot(p0, dir);\n\tfloat totalLength = length(end - start);\n\n\t// Include the radius of the circle at the start and end points in the range\n\tfloat distFromStart = length(point - start);\n\tfloat distFromEnd = length(point - end);\n\t\n\tbool withinLine = (distToLine < width && distAlongLine > 0.0 && distAlongLine < totalLength) || distFromStart < width || distFromEnd < width;\n\n\treturn float(withinLine);\n}\n\nvec4 createSmudge(){\n\tvec2 offsets[9];\n\toffsets[0] = vec2(-1, -1); offsets[1] = vec2( 0, -1); offsets[2] = vec2( 1, -1);\n\toffsets[3] = vec2(-1, 0); offsets[4] = vec2( 0, 0); offsets[5] = vec2( 1, 0);\n\toffsets[6] = vec2(-1, 1); offsets[7] = vec2( 0, 1); offsets[8] = vec2( 1, 1);\n\t// Scale offset to texture size\n\tfor(int i = 0; i < 9; i++) {\n\t\toffsets[i] = (offsets[i] * uSmudge) / uResolution;\n\t}\t\n\tvec4 smudgedColor = vec4(0.0);\n\tfor(int i = 0; i < 9; i++) {\n\t\tsmudgedColor += texture2D(uMap, vUv + offsets[i]);\n\t}\n\treturn smudgedColor / 9.0;\n}\n\nvec4 createMotionBlur(vec4 baseColor, vec2 velocity, float motion, int samples) {\n\tvec4 motionBlurredColor = baseColor;\n\tvec2 scaledVelocity = velocity * motion;\n\tfor(int i = 1; i < samples; i++) {\n\t\tfloat t = float(i) / float(samples - 1);\n\t\tvec2 offset = t * scaledVelocity / uResolution;\n\t\tmotionBlurredColor += texture2D(uMap, vUv + offset);\n\t}\n\treturn motionBlurredColor / float(samples);\n}\n\n\nvoid main() {\n\t// Convert UV coordinates to range [-1, 1]\n\tvec2 st = vUv * 2.0 - 1.0;\n\t\n\t// velocity vector\n\tvec2 velocity = uVelocity * uResolution;\n\n\t// add smudge\n\tvec4 smudgedColor = createSmudge();\n\t\n\t// add motion blur\n\tvec4 motionBlurredColor = createMotionBlur(smudgedColor, velocity, uMotionBlur,uMotionSample);\n\n\tvec4 bufferColor = motionBlurredColor * uDissipation;\n\n\t// radius\n\tfloat modifiedRadius = max(0.0,uRadius);\n\n\t//\tcolor \n\tvec3 color = uColor;\n\n\t// map texture to color\n\tvec4 textureColor = texture2D(uTexture, vUv);\n\tvec3 finalColor = mix(color, textureColor.rgb, textureColor.a);\n\n\tfloat onLine = isOnLine(st, uPrevMouse, uMouse, modifiedRadius, uAspect);\n\tbufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine);\n\t\n\tgl_FragColor = vec4(bufferColor.rgb,1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport { Size } from \"@react-three/fiber\";\n\n/**\n * @params dpr if dpr is set, it returns the resolution which is size multiplied by dpr.\n */\nexport const useResolution = (size: Size, dpr: number | false = false) => {\n const _width = dpr ? size.width * dpr : size.width;\n const _height = dpr ? size.height * dpr : size.height;\n const resolution = useMemo(\n () => new THREE.Vector2(_width, _height),\n [_width, _height]\n );\n return resolution;\n};\n","import * as THREE from \"three\";\nimport { useEffect, useMemo } from \"react\";\n\n/** Generate mesh from geometry and material and add to scene */\nexport const useAddMesh = (\n scene: THREE.Scene,\n geometry: THREE.BufferGeometry,\n material: THREE.Material\n) => {\n const mesh = useMemo(\n () => new THREE.Mesh(geometry, material),\n [geometry, material]\n );\n\n useEffect(() => {\n scene.add(mesh);\n }, [scene, mesh]);\n\n useEffect(() => {\n return () => {\n scene.remove(mesh);\n geometry.dispose();\n material.dispose();\n };\n }, [scene, geometry, material, mesh]);\n\n return mesh;\n};\n","type UniformValue =\n | THREE.CubeTexture\n | THREE.Texture\n | Int32Array\n | Float32Array\n | THREE.Matrix4\n | THREE.Matrix3\n | THREE.Quaternion\n | THREE.Vector4\n | THREE.Vector3\n | THREE.Vector2\n | THREE.Color\n | number\n | boolean\n | Array\n | null;\ntype UniformObject = { [key: string]: { value: UniformValue } };\n\nexport const setUniform = (\n material: { uniforms: T },\n key: keyof T,\n value: UniformValue\n) => {\n if (\n material.uniforms &&\n material.uniforms[key] &&\n value !== undefined &&\n value !== null\n ) {\n material.uniforms[key].value = value;\n } else {\n console.error(\n `Uniform key \"${String(\n key\n )}\" does not exist in the material. or \"${String(\n key\n )}\" is null | undefined`\n );\n }\n};\n","import * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useEffect, useMemo } from \"react\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { Size } from \"@react-three/fiber\";\n\nexport class BrushMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uMap: { value: THREE.Texture };\n uResolution: { value: THREE.Texture };\n uAspect: { value: number };\n uTexture: { value: THREE.Texture };\n uRadius: { value: number };\n uSmudge: { value: number };\n uDissipation: { value: number };\n uMotionBlur: { value: number };\n uMotionSample: { value: number };\n uMouse: { value: number };\n uPrevMouse: { value: number };\n uVelocity: { value: number };\n uColor: { value: THREE.Color };\n };\n}\n\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uMap: { value: new THREE.Texture() },\n uResolution: { value: new THREE.Vector2(0, 0) },\n uAspect: { value: 0.0 },\n uTexture: { value: new THREE.Texture() },\n uRadius: { value: 0.0 },\n uSmudge: { value: 0.0 },\n uDissipation: { value: 0.0 },\n uMotionBlur: { value: 0.0 },\n uMotionSample: { value: 0 },\n uMouse: { value: new THREE.Vector2(0, 0) },\n uPrevMouse: { value: new THREE.Vector2(0, 0) },\n uVelocity: { value: new THREE.Vector2(0, 0) },\n uColor: { value: new THREE.Color(0xffffff) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n setUniform(material, \"uAspect\", resolution.width / resolution.height);\n setUniform(material, \"uResolution\", resolution.clone());\n }, [resolution, material]);\n\n useAddMesh(scene, geometry, material);\n\n return material as BrushMaterial;\n};\n","import * as THREE from \"three\";\nimport { useResolution } from \"./useResolution\";\nimport { useMemo } from \"react\";\nimport { Size } from \"@react-three/fiber\";\n\nconst getCameraProps = (width: number, height: number) => {\n const frustumSize = height;\n const aspect = width / height;\n const [w, h] = [(frustumSize * aspect) / 2, frustumSize / 2];\n return { width: w, height: h, near: -1000, far: 1000 };\n};\n\nexport const useCamera = (size: Size) => {\n const resolution = useResolution(size);\n const { width, height, near, far } = getCameraProps(\n resolution.x,\n resolution.y\n );\n const camera = useMemo(\n () =>\n new THREE.OrthographicCamera(\n -width,\n width,\n height,\n -height,\n near,\n far\n ),\n [width, height, near, far]\n );\n return camera;\n};\n","import * as THREE from \"three\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { useResolution } from \"./useResolution\";\nimport { UseFboProps } from \"./types\";\n\nexport const FBO_OPTION = {\n minFilter: THREE.LinearFilter,\n magFilter: THREE.LinearFilter,\n type: THREE.HalfFloatType,\n depthBuffer: false,\n stencilBuffer: false,\n};\n\ntype FBOUpdateFunction = (\n gl: THREE.WebGLRenderer,\n /** call before FBO is rendered */\n onBeforeRender?: ({ read }: { read: THREE.Texture }) => void\n) => THREE.Texture;\n\ntype UseSingleFBOReturn = [THREE.WebGLRenderTarget, FBOUpdateFunction];\n\n/**\n * @param dpr If dpr is set, dpr will be multiplied, default:false\n * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false\n * @returns [THREE.WebGLRenderTarget , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.\n */\nexport const useSingleFBO = ({\n scene,\n camera,\n size,\n dpr = false,\n isSizeUpdate = false,\n}: UseFboProps): UseSingleFBOReturn => {\n const renderTarget = useRef();\n\n const resolution = useResolution(size, dpr);\n renderTarget.current = useMemo(\n () => new THREE.WebGLRenderTarget(resolution.x, resolution.y, FBO_OPTION),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n []\n );\n\n useLayoutEffect(() => {\n if (isSizeUpdate) {\n renderTarget.current?.setSize(resolution.x, resolution.y);\n }\n }, [resolution, isSizeUpdate]);\n\n useEffect(() => {\n const currentRenderTarget = renderTarget.current;\n return () => {\n currentRenderTarget?.dispose();\n };\n }, []);\n\n const updateRenderTarget: FBOUpdateFunction = useCallback(\n (gl, onBeforeRender) => {\n const fbo = renderTarget.current!;\n gl.setRenderTarget(fbo);\n onBeforeRender && onBeforeRender({ read: fbo.texture });\n gl.render(scene, camera);\n gl.setRenderTarget(null);\n gl.clear();\n return fbo.texture;\n },\n [scene, camera]\n );\n\n return [renderTarget.current, updateRenderTarget];\n};\n","import * as THREE from \"three\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { FBO_OPTION } from \"./useSingleFBO\";\nimport { useResolution } from \"./useResolution\";\nimport { DoubleRenderTarget, UseFboProps } from \"./types\";\n\ninterface RenderTarget extends DoubleRenderTarget {\n swap: () => void;\n}\n\ntype FBOUpdateFunction = (\n gl: THREE.WebGLRenderer,\n /** call before FBO is rendered */\n onBeforeRender?: ({\n read,\n write,\n }: {\n read: THREE.Texture;\n write: THREE.Texture;\n }) => void\n) => THREE.Texture;\n\ntype UseDoubleFBOReturn = [\n { read: THREE.WebGLRenderTarget; write: THREE.WebGLRenderTarget },\n FBOUpdateFunction\n];\n\n/**\n * @param dpr If dpr is set, dpr will be multiplied, default:false\n * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false\n * @returns [{read:THREE.WebGLRenderTarget,write:THREE.WebGLRenderTarget} , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument.\n */\nexport const useDoubleFBO = ({\n scene,\n camera,\n size,\n dpr = false,\n isSizeUpdate = false,\n}: UseFboProps): UseDoubleFBOReturn => {\n const renderTarget = useRef({\n read: null,\n write: null,\n swap: function () {\n let temp = this.read;\n this.read = this.write;\n this.write = temp;\n },\n });\n\n const resolution = useResolution(size, dpr);\n const initRenderTargets = useMemo(() => {\n const read = new THREE.WebGLRenderTarget(\n resolution.x,\n resolution.y,\n FBO_OPTION\n );\n const write = new THREE.WebGLRenderTarget(\n resolution.x,\n resolution.y,\n FBO_OPTION\n );\n return { read, write };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n renderTarget.current.read = initRenderTargets.read;\n renderTarget.current.write = initRenderTargets.write;\n\n useLayoutEffect(() => {\n if (isSizeUpdate) {\n renderTarget.current.read?.setSize(resolution.x, resolution.y);\n renderTarget.current.write?.setSize(resolution.x, resolution.y);\n }\n }, [resolution, isSizeUpdate]);\n\n useEffect(() => {\n const currentRenderTarget = renderTarget.current;\n return () => {\n currentRenderTarget.read?.dispose();\n currentRenderTarget.write?.dispose();\n };\n }, []);\n\n const updateRenderTarget: FBOUpdateFunction = useCallback(\n (gl, onBeforeRender) => {\n const fbo = renderTarget.current;\n gl.setRenderTarget(fbo.write);\n onBeforeRender &&\n onBeforeRender({\n read: fbo.read!.texture,\n write: fbo.write!.texture,\n });\n gl.render(scene, camera);\n fbo.swap();\n gl.setRenderTarget(null);\n gl.clear();\n return fbo.read?.texture as THREE.Texture;\n },\n [scene, camera]\n );\n\n return [\n { read: renderTarget.current.read, write: renderTarget.current.write },\n updateRenderTarget,\n ];\n};\n","import * as THREE from \"three\";\nimport { useCallback, useRef } from \"react\";\n\ntype UpdatePointer = (currentPointer: THREE.Vector2) => {\n currentPointer: THREE.Vector2;\n prevPointer: THREE.Vector2;\n diffPointer: THREE.Vector2;\n velocity: THREE.Vector2;\n isVelocityUpdate: boolean;\n};\n\n/** When given the pointer vector2 from r3f's RootState, it generates an update function that returns {currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}. */\nexport const usePointer = (): UpdatePointer => {\n const prevPointer = useRef(new THREE.Vector2(0, 0));\n const diffPointer = useRef(new THREE.Vector2(0, 0));\n const lastUpdateTime = useRef(0);\n const velocity = useRef(new THREE.Vector2(0, 0));\n const isMoved = useRef(false);\n\n const updatePointer = useCallback((currentPointer: THREE.Vector2) => {\n const now = performance.now();\n const current = currentPointer.clone();\n\n // first frame\n if (lastUpdateTime.current === 0) {\n lastUpdateTime.current = now;\n prevPointer.current = current;\n }\n const deltaTime = Math.max(1, now - lastUpdateTime.current);\n lastUpdateTime.current = now;\n\n // get velocity\n velocity.current\n .copy(current)\n .sub(prevPointer.current)\n .divideScalar(deltaTime);\n const isUpdate = velocity.current.length() > 0;\n\n //set prev temp pos\n const prevTemp = isMoved.current ? prevPointer.current.clone() : current;\n if (!isMoved.current && isUpdate) {\n isMoved.current = true;\n }\n prevPointer.current = current;\n\n return {\n currentPointer: current,\n prevPointer: prevTemp,\n diffPointer: diffPointer.current.subVectors(current, prevTemp),\n velocity: velocity.current,\n isVelocityUpdate: isUpdate,\n };\n }, []);\n\n return updatePointer;\n};\n","import { useCallback, useRef } from \"react\";\n\ntype UseParamsReturn = [T, (params: Partial) => void];\n\n/**\n * @param params Receives an initial value object. With structuredClone, deep copy and set, but if the object contains a function, just set it.\n */\nexport const useParams = (params: T): UseParamsReturn => {\n const isContainsFunctions = (obj: object): boolean =>\n Object.values(obj).some((value) => typeof value === \"function\");\n const paramsRef = useRef(\n isContainsFunctions(params) ? params : structuredClone(params)\n );\n\n const setParams = useCallback((updateParams: Partial) => {\n for (const key in updateParams) {\n const paramKey = key as keyof T;\n if (\n paramKey in paramsRef.current &&\n updateParams[paramKey] !== undefined &&\n updateParams[paramKey] !== null\n ) {\n paramsRef.current[paramKey] = updateParams[paramKey]!;\n } else {\n console.error(\n `\"${String(\n paramKey\n )}\" does not exist in the params. or \"${String(\n paramKey\n )}\" is null | undefined`\n );\n }\n }\n }, []);\n return [paramsRef.current, setParams];\n};\n","import * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useDoubleFBO } from \"../../utils/useDoubleFBO\";\nimport { useCallback, useMemo } from \"react\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\nimport { DoubleRenderTarget } from \"../../utils/types\";\n\nexport type BrushParams = {\n /** Texture applied to the brush.Mixed with the value of a , default:THREE.Texture() */\n texture?: THREE.Texture;\n /** size of the stamp, percentage of the size ,default:0.05 */\n radius?: number;\n /** Strength of smudge effect , default:0.0*/\n smudge?: number;\n /** dissipation rate. If set to 1, it will remain. ,default:1.0 */\n dissipation?: number;\n /** Strength of motion blur , default:0.0 */\n motionBlur?: number;\n /** Number of motion blur samples. Affects performance default: 5 */\n motionSample?: number;\n /** brush color , default:THREE.Color(0xffffff) */\n color?: THREE.Color;\n};\n\nexport type BrushObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: DoubleRenderTarget;\n};\n\nexport const BRUSH_PARAMS: BrushParams = {\n texture: new THREE.Texture(),\n radius: 0.05,\n smudge: 0.0,\n dissipation: 1.0,\n motionBlur: 0.0,\n motionSample: 5,\n color: new THREE.Color(0xffffff),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useBrush = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n const [renderTarget, updateRenderTarget] = useDoubleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(BRUSH_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: BrushParams) => {\n const { gl, pointer } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uRadius\", params.radius!);\n setUniform(material, \"uSmudge\", params.smudge!);\n setUniform(material, \"uDissipation\", params.dissipation!);\n setUniform(material, \"uMotionBlur\", params.motionBlur!);\n setUniform(material, \"uMotionSample\", params.motionSample!);\n setUniform(material, \"uColor\", params.color!);\n\n const { currentPointer, prevPointer, velocity } =\n updatePointer(pointer);\n setUniform(material, \"uMouse\", currentPointer);\n setUniform(material, \"uPrevMouse\", prevPointer);\n setUniform(material, \"uVelocity\", velocity);\n\n const bufferTexture = updateRenderTarget(gl, ({ read }) => {\n setUniform(material, \"uMap\", read);\n });\n\n return bufferTexture;\n },\n [material, updatePointer, updateRenderTarget, params, setParams]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTexture;\n\nuniform vec3 uColor0;\nuniform vec3 uColor1;\n\nvoid main() {\n\tvec2 uv = vUv;\n\tvec4 texColor = texture2D(uTexture, uv);\n\tfloat grayscale = dot(texColor.rgb, vec3(0.299, 0.587, 0.114));\n\tvec3 duotone = mix(uColor0, uColor1, grayscale);\n\tgl_FragColor = vec4(duotone, texColor.a);\n}","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class DuoToneMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTexture: { value: THREE.Texture };\n uColor0: { value: THREE.Color };\n uColor1: { value: THREE.Color };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTexture: { value: new THREE.Texture() },\n uColor0: { value: new THREE.Color(0xffffff) },\n uColor1: { value: new THREE.Color(0x000000) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as DuoToneMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { DuoToneMaterial, useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type DuoToneParams = {\n /** Make this texture duotone , Default:new THREE.Texture() */\n texture?: THREE.Texture;\n /** 1st color ,　Default:new THREE.Color(0xffffff) */\n color0?: THREE.Color;\n /** 2nd color , Default: new THREE.Color(0x000000) */\n color1?: THREE.Color;\n};\n\nexport type DuoToneObject = {\n scene: THREE.Scene;\n material: DuoToneMaterial;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const DUOTONE_PARAMS: DuoToneParams = {\n texture: new THREE.Texture(),\n color0: new THREE.Color(0xffffff),\n color1: new THREE.Color(0x000000),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useDuoTone = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(DUOTONE_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: DuoToneParams) => {\n const { gl } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uColor0\", params.color0!);\n setUniform(material, \"uColor1\", params.color1!);\n\n const bufferTexture = updateRenderTarget(gl);\n\n return bufferTexture;\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform float uTime;\nuniform sampler2D uTexture;\nuniform sampler2D uNoiseMap;\nuniform float distortionStrength;\nuniform float fogEdge0;\nuniform float fogEdge1;\nuniform vec3 fogColor;\n\nvoid main() {\n\tvec2 uv = vUv;\n\n\tfloat noiseMap = texture2D(uNoiseMap,uv).r;\n\t\n\tfloat noiseTextureMap = noiseMap*2.0-1.0;\n\tuv += noiseTextureMap * distortionStrength;\n\tvec3 textureMap = texture2D(uTexture, uv).rgb;\n\n\tfloat edge0 = fogEdge0;\n\tfloat edge1 = fogEdge1;\n\tfloat blendValue = smoothstep(edge0, edge1, noiseMap);\n\n\tvec3 outputColor = blendValue * fogColor + (1.0 - blendValue) * textureMap;\n\tgl_FragColor = vec4(outputColor, 1.0);\n}\n\n\n","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class FogProjectionMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTime: { value: number };\n uTexture: { value: THREE.Texture };\n uNoiseMap: { value: THREE.Texture };\n distortionStrength: { value: number };\n fogEdge0: { value: number };\n fogEdge1: { value: number };\n fogColor: { value: THREE.Color };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0.0 },\n uTexture: { value: new THREE.Texture() },\n uNoiseMap: { value: new THREE.Texture() },\n distortionStrength: { value: 0.0 },\n fogEdge0: { value: 0.0 },\n fogEdge1: { value: 0.9 },\n fogColor: { value: new THREE.Color(0xffffff) },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as FogProjectionMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type FogProjectionParams = {\n /** Make this texture FogProjection , default:THREE.Texture */\n texture?: THREE.Texture;\n /** noise texture to map, default:THREE.Texture */\n noiseMap?: THREE.Texture;\n /** distortion strength , default:0.03 */\n distortionStrength?: number;\n /** value that reflects noise , default:0.0 */\n fogEdge0?: number;\n /** value that reflects noise , default:0.9 */\n fogEdge1?: number;\n /** fog color , default: THREE.Color(0xffffff) */\n fogColor?: THREE.Color;\n};\n\nexport type FogProjectionObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const FOGPROJECTION_PARAMS: FogProjectionParams = {\n texture: new THREE.Texture(),\n noiseMap: new THREE.Texture(),\n distortionStrength: 0.03,\n fogEdge0: 0.0,\n fogEdge1: 0.9,\n fogColor: new THREE.Color(0xffffff),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useFogProjection = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] =\n useParams(FOGPROJECTION_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: FogProjectionParams) => {\n const { gl, clock } = props;\n updateParams && setParams(updateParams);\n setUniform(material, \"uTime\", clock.getElapsedTime());\n setUniform(material, \"uTexture\", params.texture!);\n setUniform(material, \"uNoiseMap\", params.noiseMap!);\n setUniform(material, \"distortionStrength\", params.distortionStrength!);\n setUniform(material, \"fogEdge0\", params.fogEdge0!);\n setUniform(material, \"fogEdge1\", params.fogEdge1!);\n setUniform(material, \"fogColor\", params.fogColor!);\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform vec2 texelSize;\n\nvoid main () {\n\tvUv = uv;\n\tvL = vUv - vec2(texelSize.x, 0.0);\n\tvR = vUv + vec2(texelSize.x, 0.0);\n\tvT = vUv + vec2(0.0, texelSize.y);\n\tvB = vUv - vec2(0.0, texelSize.y);\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvoid main(){\n\tgl_FragColor = vec4(0.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/init.frag\";\n\nexport const useInitialMaterial = () => {\n const initialMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n depthTest: false,\n depthWrite: false,\n }),\n []\n );\n\n return initialMaterial as THREE.ShaderMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uVelocity;\nuniform sampler2D uSource;\nuniform vec2 texelSize;\nuniform float dt;\nuniform float dissipation;\n\nvoid main () {\n\tvec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;\n\tgl_FragColor = dissipation * texture2D(uSource, coord);\n\tgl_FragColor.a = 1.0;\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/advection.frag\";\n\nexport class AdvectionMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n uSource: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n dt: { value: number };\n dissipation: { value: number };\n };\n}\n\nexport const useAdvectionMaterial = () => {\n const advectionMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: new THREE.Texture() },\n uSource: { value: new THREE.Texture() },\n texelSize: { value: new THREE.Vector2() },\n dt: { value: 0.0 },\n dissipation: { value: 0.0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return advectionMaterial as AdvectionMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\n\nvec2 sampleVelocity (in vec2 uv) {\n\tvec2 multiplier = vec2(1.0, 1.0);\n\tif (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }\n\tif (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }\n\tif (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }\n\tif (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }\n\treturn multiplier * texture2D(uVelocity, uv).xy;\n}\n\nvoid main () {\n\tfloat L = sampleVelocity(vL).x;\n\tfloat R = sampleVelocity(vR).x;\n\tfloat T = sampleVelocity(vT).y;\n\tfloat B = sampleVelocity(vB).y;\n\tfloat div = 0.5 * (R - L + T - B);\n\tgl_FragColor = vec4(div, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/divergence.frag\";\n\nexport class DivergenceMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useDivergenceMaterial = () => {\n const divergenceMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return divergenceMaterial as DivergenceMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uPressure;\nuniform sampler2D uDivergence;\n\nvec2 boundary (in vec2 uv) {\n\tuv = min(max(uv, 0.0), 1.0);\n\treturn uv;\n}\n\nvoid main () {\n\tfloat L = texture2D(uPressure, boundary(vL)).x;\n\tfloat R = texture2D(uPressure, boundary(vR)).x;\n\tfloat T = texture2D(uPressure, boundary(vT)).x;\n\tfloat B = texture2D(uPressure, boundary(vB)).x;\n\tfloat C = texture2D(uPressure, vUv).x;\n\tfloat divergence = texture2D(uDivergence, vUv).x;\n\tfloat pressure = (L + R + B + T - divergence) * 0.25;\n\tgl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/pressure.frag\";\n\nexport class PressureMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uPressure: { value: THREE.Texture };\n uDivergence: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const usePressureMaterial = () => {\n const pressureMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uPressure: { value: null },\n uDivergence: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return pressureMaterial as PressureMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\n\nvoid main () {\n\tfloat L = texture2D(uVelocity, vL).y;\n\tfloat R = texture2D(uVelocity, vR).y;\n\tfloat T = texture2D(uVelocity, vT).x;\n\tfloat B = texture2D(uVelocity, vB).x;\n\tfloat vorticity = R - L - T + B;\n\tgl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/curl.frag\";\n\nexport class CurlMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useCurlMaterial = () => {\n const curlMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return curlMaterial as CurlMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uVelocity;\nuniform sampler2D uCurl;\nuniform float curl;\nuniform float dt;\n\nvoid main () {\n\tfloat T = texture2D(uCurl, vT).x;\n\tfloat B = texture2D(uCurl, vB).x;\n\tfloat C = texture2D(uCurl, vUv).x;\n\tvec2 force = vec2(abs(T) - abs(B), 0.0);\n\tforce *= 1.0 / length(force + 0.00001) * curl * C;\n\tvec2 vel = texture2D(uVelocity, vUv).xy;\n\tgl_FragColor = vec4(vel + force * dt, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/vorticity.frag\";\n\nexport class VorticityMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uVelocity: { value: THREE.Texture };\n uCurl: { value: THREE.Texture };\n curl: { value: number };\n dt: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useVorticityMaterial = () => {\n const vorticityMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uVelocity: { value: null },\n uCurl: { value: null },\n curl: { value: 0 },\n dt: { value: 0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return vorticityMaterial as VorticityMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTexture;\nuniform float value;\n\nvoid main () {\n\tgl_FragColor = value * texture2D(uTexture, vUv);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/clear.frag\";\n\nexport class ClearMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTexture: { value: THREE.Texture };\n value: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useClearMaterial = () => {\n const advectionMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTexture: { value: new THREE.Texture() },\n value: { value: 0.0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return advectionMaterial as ClearMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nvarying vec2 vL;\nvarying vec2 vR;\nvarying vec2 vT;\nvarying vec2 vB;\nuniform sampler2D uPressure;\nuniform sampler2D uVelocity;\n\nvec2 boundary (in vec2 uv) {\n\tuv = min(max(uv, 0.0), 1.0);\n\treturn uv;\n}\n\nvoid main () {\n\tfloat L = texture2D(uPressure, boundary(vL)).x;\n\tfloat R = texture2D(uPressure, boundary(vR)).x;\n\tfloat T = texture2D(uPressure, boundary(vT)).x;\n\tfloat B = texture2D(uPressure, boundary(vB)).x;\n\tvec2 velocity = texture2D(uVelocity, vUv).xy;\n\tvelocity.xy -= vec2(R - L, T - B);\n\tgl_FragColor = vec4(velocity, 0.0, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/gradientSubtract.frag\";\n\nexport class GradientSubtractMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uPressure: { value: THREE.Texture };\n uVelocity: { value: THREE.Texture };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useGradientSubtractMaterial = () => {\n const gradientSubtractMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uPressure: { value: new THREE.Texture() },\n uVelocity: { value: new THREE.Texture() },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return gradientSubtractMaterial as GradientSubtractMaterial;\n};\n","precision highp float;\n\nvarying vec2 vUv;\nuniform sampler2D uTarget;\nuniform float aspectRatio;\nuniform vec3 color;\nuniform vec2 point;\nuniform float radius;\n\nvoid main () {\n\tvec2 nPoint = (point + vec2(1.0)) * 0.5;\n\tvec2 p = vUv - nPoint.xy;\n\tp.x *= aspectRatio;\n\tvec3 splat = exp(-dot(p, p) / radius) * color;\n\tvec3 base = texture2D(uTarget, vUv).xyz;\n\tgl_FragColor = vec4(base + splat, 1.0);\n}","import * as THREE from \"three\";\nimport { useMemo } from \"react\";\nimport vertexShader from \"../shaders/main.vert\";\nimport fragmentShader from \"../shaders/splat.frag\";\n\nexport class SplatMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTarget: { value: THREE.Texture };\n aspectRatio: { value: number };\n color: { value: THREE.Vector3 };\n point: { value: THREE.Vector2 };\n radius: { value: number };\n texelSize: { value: THREE.Vector2 };\n };\n}\n\nexport const useSplateMaterial = () => {\n const splatMaterial = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTarget: { value: new THREE.Texture() },\n aspectRatio: { value: 0 },\n color: { value: new THREE.Vector3() },\n point: { value: new THREE.Vector2() },\n radius: { value: 0.0 },\n texelSize: { value: new THREE.Vector2() },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n return splatMaterial as SplatMaterial;\n};\n","import * as THREE from \"three\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport { useInitialMaterial } from \"./materials/useInitialMaterial\";\nimport {\n AdvectionMaterial,\n useAdvectionMaterial,\n} from \"./materials/useAdvectionMaterial\";\nimport {\n DivergenceMaterial,\n useDivergenceMaterial,\n} from \"./materials/useDivergenceMaterial\";\nimport {\n PressureMaterial,\n usePressureMaterial,\n} from \"./materials/usePressureMaterial\";\nimport { CurlMaterial, useCurlMaterial } from \"./materials/useCurlMaterial\";\nimport {\n VorticityMaterial,\n useVorticityMaterial,\n} from \"./materials/useVorticityMaterial\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport { ClearMaterial, useClearMaterial } from \"./materials/useClearMaterial\";\nimport {\n GradientSubtractMaterial,\n useGradientSubtractMaterial,\n} from \"./materials/useGradientSubtractMaterial\";\nimport { SplatMaterial, useSplateMaterial } from \"./materials/useSplatMaterial\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { Size } from \"@react-three/fiber\";\n\ntype TMaterials =\n | AdvectionMaterial\n | DivergenceMaterial\n | CurlMaterial\n | PressureMaterial\n | ClearMaterial\n | GradientSubtractMaterial\n | SplatMaterial;\n\nexport type FluidMaterials = {\n vorticityMaterial: VorticityMaterial;\n curlMaterial: CurlMaterial;\n advectionMaterial: AdvectionMaterial;\n divergenceMaterial: DivergenceMaterial;\n pressureMaterial: PressureMaterial;\n clearMaterial: ClearMaterial;\n gradientSubtractMaterial: GradientSubtractMaterial;\n splatMaterial: SplatMaterial;\n};\ntype TUseMeshReturnType = [FluidMaterials, (material: TMaterials) => void];\n\n/**\n * Returns the material update function in the second argument\n */\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}): TUseMeshReturnType => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const initialMaterial = useInitialMaterial();\n const updateMaterial = initialMaterial.clone();\n const curlMaterial = useCurlMaterial();\n const vorticityMaterial = useVorticityMaterial();\n const advectionMaterial = useAdvectionMaterial();\n const divergenceMaterial = useDivergenceMaterial();\n const pressureMaterial = usePressureMaterial();\n const clearMaterial = useClearMaterial();\n const gradientSubtractMaterial = useGradientSubtractMaterial();\n const splatMaterial = useSplateMaterial();\n const materials = useMemo(\n () => ({\n vorticityMaterial,\n curlMaterial,\n advectionMaterial,\n divergenceMaterial,\n pressureMaterial,\n clearMaterial,\n gradientSubtractMaterial,\n splatMaterial,\n }),\n [\n vorticityMaterial,\n curlMaterial,\n advectionMaterial,\n divergenceMaterial,\n pressureMaterial,\n clearMaterial,\n gradientSubtractMaterial,\n splatMaterial,\n ]\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n setUniform(\n materials.splatMaterial,\n \"aspectRatio\",\n resolution.x / resolution.y\n );\n for (const material of Object.values(materials)) {\n setUniform(\n material,\n \"texelSize\",\n new THREE.Vector2(1.0 / resolution.x, 1.0 / resolution.y)\n );\n }\n }, [resolution, materials]);\n\n const mesh = useAddMesh(scene, geometry, initialMaterial);\n useEffect(() => {\n initialMaterial.dispose();\n mesh.material = updateMaterial;\n }, [initialMaterial, mesh, updateMaterial]);\n\n useEffect(() => {\n return () => {\n for (const material of Object.values(materials)) {\n material.dispose();\n }\n };\n }, [materials]);\n\n const setMeshMaterial = useCallback(\n (material: TMaterials) => {\n mesh.material = material;\n mesh.material.needsUpdate = true;\n },\n [mesh]\n );\n\n return [materials, setMeshMaterial];\n};\n","import * as THREE from \"three\";\nimport { FluidMaterials, useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useDoubleFBO } from \"../../utils/useDoubleFBO\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\nimport { DoubleRenderTarget, UseFboProps } from \"../../utils/types\";\n\nexport type FluidParams = {\n /** density disspation , default:0.98 */\n density_dissipation?: number;\n /** velocity dissipation , default:0.99 */\n velocity_dissipation?: number;\n /** velocity acceleration , default:10.0 */\n velocity_acceleration?: number;\n /** pressure dissipation , default:0.9 */\n pressure_dissipation?: number;\n /** pressure iterations. affects performance , default:20 */\n pressure_iterations?: number;\n /** curl_strength , default:35 */\n curl_strength?: number;\n /** splat radius , default:0.002 */\n splat_radius?: number;\n /** Fluid Color.THREE.Vector3 Alternatively, it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */\n fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3;\n};\n\nexport type FluidObject = {\n scene: THREE.Scene;\n materials: FluidMaterials;\n camera: THREE.Camera;\n renderTarget: {\n velocity: DoubleRenderTarget;\n density: DoubleRenderTarget;\n curl: THREE.WebGLRenderTarget;\n divergence: THREE.WebGLRenderTarget;\n pressure: DoubleRenderTarget;\n };\n};\n\nexport const FLUID_PARAMS: FluidParams = {\n density_dissipation: 0.98,\n velocity_dissipation: 0.99,\n velocity_acceleration: 10.0,\n pressure_dissipation: 0.9,\n pressure_iterations: 20,\n curl_strength: 35,\n splat_radius: 0.002,\n fluid_color: new THREE.Vector3(1.0, 1.0, 1.0),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useFluid = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const [materials, setMeshMaterial] = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n\n const fboProps = useMemo(\n () => ({\n scene,\n camera,\n size,\n }),\n [scene, camera, size]\n );\n const [velocityFBO, updateVelocityFBO] = useDoubleFBO(fboProps);\n const [densityFBO, updateDensityFBO] = useDoubleFBO(fboProps);\n const [curlFBO, updateCurlFBO] = useSingleFBO(fboProps);\n const [divergenceFBO, updateDivergenceFBO] = useSingleFBO(fboProps);\n const [pressureFBO, updatePressureFBO] = useDoubleFBO(fboProps);\n\n const lastTime = useRef(0);\n const scaledDiffVec = useRef(new THREE.Vector2(0, 0));\n const spaltVec = useRef(new THREE.Vector3(0, 0, 0));\n\n const [params, setParams] = useParams(FLUID_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: FluidParams) => {\n const { gl, pointer, clock, size } = props;\n\n updateParams && setParams(updateParams);\n\n if (lastTime.current === 0) {\n lastTime.current = clock.getElapsedTime();\n }\n const dt = Math.min(\n (clock.getElapsedTime() - lastTime.current) / 3,\n 0.02\n );\n lastTime.current = clock.getElapsedTime();\n\n // update velocity\n const velocityTex = updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.advectionMaterial);\n setUniform(materials.advectionMaterial, \"uVelocity\", read);\n setUniform(materials.advectionMaterial, \"uSource\", read);\n setUniform(materials.advectionMaterial, \"dt\", dt);\n setUniform(\n materials.advectionMaterial,\n \"dissipation\",\n params.velocity_dissipation!\n );\n });\n\n // update density\n const densityTex = updateDensityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.advectionMaterial);\n setUniform(materials.advectionMaterial, \"uVelocity\", velocityTex);\n setUniform(materials.advectionMaterial, \"uSource\", read);\n setUniform(\n materials.advectionMaterial,\n \"dissipation\",\n params.density_dissipation!\n );\n });\n\n // update splatting\n const { currentPointer, diffPointer, isVelocityUpdate, velocity } =\n updatePointer(pointer);\n if (isVelocityUpdate) {\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.splatMaterial);\n setUniform(materials.splatMaterial, \"uTarget\", read);\n setUniform(materials.splatMaterial, \"point\", currentPointer);\n const scaledDiff = diffPointer.multiply(\n scaledDiffVec.current\n .set(size.width, size.height)\n .multiplyScalar(params.velocity_acceleration!)\n );\n setUniform(\n materials.splatMaterial,\n \"color\",\n spaltVec.current.set(scaledDiff.x, scaledDiff.y, 1.0)\n );\n setUniform(\n materials.splatMaterial,\n \"radius\",\n params.splat_radius!\n );\n });\n updateDensityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.splatMaterial);\n setUniform(materials.splatMaterial, \"uTarget\", read);\n const color: THREE.Vector3 =\n typeof params.fluid_color === \"function\"\n ? params.fluid_color(velocity)\n : params.fluid_color!;\n setUniform(materials.splatMaterial, \"color\", color);\n });\n }\n\n // update curl\n const curlTex = updateCurlFBO(gl, () => {\n setMeshMaterial(materials.curlMaterial);\n setUniform(materials.curlMaterial, \"uVelocity\", velocityTex);\n });\n\n // update vorticity\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.vorticityMaterial);\n setUniform(materials.vorticityMaterial, \"uVelocity\", read);\n setUniform(materials.vorticityMaterial, \"uCurl\", curlTex);\n setUniform(\n materials.vorticityMaterial,\n \"curl\",\n params.curl_strength!\n );\n setUniform(materials.vorticityMaterial, \"dt\", dt);\n });\n\n // update divergence\n const divergenceTex = updateDivergenceFBO(gl, () => {\n setMeshMaterial(materials.divergenceMaterial);\n setUniform(materials.divergenceMaterial, \"uVelocity\", velocityTex);\n });\n\n // update pressure\n updatePressureFBO(gl, ({ read }) => {\n setMeshMaterial(materials.clearMaterial);\n setUniform(materials.clearMaterial, \"uTexture\", read);\n setUniform(\n materials.clearMaterial,\n \"value\",\n params.pressure_dissipation!\n );\n });\n\n // solve pressure iterative (Gauss-Seidel)\n setMeshMaterial(materials.pressureMaterial);\n setUniform(materials.pressureMaterial, \"uDivergence\", divergenceTex);\n let pressureTexTemp: THREE.Texture;\n for (let i = 0; i < params.pressure_iterations!; i++) {\n pressureTexTemp = updatePressureFBO(gl, ({ read }) => {\n setUniform(materials.pressureMaterial, \"uPressure\", read);\n });\n }\n\n // update gradienSubtract\n updateVelocityFBO(gl, ({ read }) => {\n setMeshMaterial(materials.gradientSubtractMaterial);\n setUniform(\n materials.gradientSubtractMaterial,\n \"uPressure\",\n pressureTexTemp\n );\n setUniform(materials.gradientSubtractMaterial, \"uVelocity\", read);\n });\n\n return densityTex;\n },\n [\n materials,\n setMeshMaterial,\n updateCurlFBO,\n updateDensityFBO,\n updateDivergenceFBO,\n updatePointer,\n updatePressureFBO,\n updateVelocityFBO,\n setParams,\n params,\n ]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n materials: materials,\n camera: camera,\n renderTarget: {\n velocity: velocityFBO,\n density: densityFBO,\n curl: curlFBO,\n divergence: divergenceFBO,\n pressure: pressureFBO,\n },\n },\n ];\n};\n","import { useEffect, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\n\ntype UseMeshProps = {\n scale: number;\n max: number;\n texture?: THREE.Texture;\n scene: THREE.Scene;\n};\n\nexport const useMesh = ({ scale, max, texture, scene }: UseMeshProps) => {\n const meshArr = useRef([]);\n const geometry = useMemo(\n () => new THREE.PlaneGeometry(scale, scale),\n [scale]\n );\n const material = useMemo(\n () =>\n new THREE.MeshBasicMaterial({\n map: texture ?? null,\n transparent: true,\n blending: THREE.AdditiveBlending,\n depthTest: false,\n depthWrite: false,\n }),\n [texture]\n );\n\n useEffect(() => {\n for (let i = 0; i < max; i++) {\n const mesh = new THREE.Mesh(geometry.clone(), material.clone());\n mesh.rotateZ(2 * Math.PI * Math.random());\n mesh.visible = false;\n scene.add(mesh);\n meshArr.current.push(mesh);\n }\n }, [geometry, material, scene, max]);\n\n useEffect(() => {\n return () => {\n meshArr.current.forEach((mesh) => {\n mesh.geometry.dispose();\n if (Array.isArray(mesh.material)) {\n mesh.material.forEach((material) => material.dispose());\n } else {\n mesh.material.dispose();\n }\n scene.remove(mesh);\n });\n meshArr.current = [];\n };\n }, [scene]);\n\n return meshArr.current;\n};\n","import { useCallback, useMemo, useRef } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { usePointer } from \"../../utils/usePointer\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type RippleParams = {\n /** How often ripples appear,default:0.01 */\n frequency?: number;\n /** rotation rate,default:0.05 */\n rotation?: number;\n /** fadeout speed,default:0.9 */\n fadeout_speed?: number;\n /** scale rate,default:0.3 */\n scale?: number;\n /** alpha,default:0.6 */\n alpha?: number;\n};\n\nexport type RippleObject = {\n scene: THREE.Scene;\n meshArr: THREE.Mesh[];\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const RIPPLE_PARAMS: RippleParams = {\n frequency: 0.01,\n rotation: 0.05,\n fadeout_speed: 0.9,\n scale: 0.3,\n alpha: 0.6,\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useRipple = ({\n texture,\n scale = 64,\n max = 100,\n size,\n}: {\n /** texture applied to ripple */\n texture: THREE.Texture;\n /** ripple size, default:64 */\n scale?: number;\n /** ripple max length, default:100 */\n max?: number;\n size: Size;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const meshArr = useMesh({\n scale: scale,\n max: max,\n texture,\n scene,\n });\n const camera = useCamera(size);\n const updatePointer = usePointer();\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n });\n\n const [params, setParams] = useParams(RIPPLE_PARAMS);\n\n const currentWave = useRef(0);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: RippleParams) => {\n const { gl, pointer, size } = props;\n\n updateParams && setParams(updateParams);\n\n const { currentPointer, diffPointer } = updatePointer(pointer);\n if (params.frequency! < diffPointer.length()) {\n const mesh = meshArr[currentWave.current];\n mesh.visible = true;\n mesh.position.set(\n currentPointer.x * (size.width / 2),\n currentPointer.y * (size.height / 2),\n 0\n );\n mesh.scale.x = mesh.scale.y = 0.0;\n (mesh.material as THREE.MeshBasicMaterial).opacity = params.alpha!;\n currentWave.current = (currentWave.current + 1) % max;\n }\n meshArr.forEach((mesh) => {\n if (mesh.visible) {\n const material = mesh.material as THREE.MeshBasicMaterial;\n mesh.rotation.z += params.rotation!;\n material.opacity *= params.fadeout_speed!;\n mesh.scale.x =\n params.fadeout_speed! * mesh.scale.x + params.scale!;\n mesh.scale.y = mesh.scale.x;\n if (material.opacity < 0.002) mesh.visible = false;\n }\n });\n\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, meshArr, updatePointer, max, params, setParams]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n camera: camera,\n meshArr: meshArr,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform vec2 uResolution;\nuniform vec2 uImageResolution;\n\nuniform sampler2D uTexture0;\nuniform sampler2D uTexture1;\nuniform sampler2D uNoiseMap;\nuniform float noiseStrength;\nuniform float progress;\nuniform float dirX;\nuniform float dirY;\n\nvoid main() {\n\tvec2 bgRatio=vec2(\n\t\tmin((uResolution.x/uResolution.y)/(uImageResolution.x/uImageResolution.y),1.),\n\t\tmin((uResolution.y/uResolution.x)/(uImageResolution.y/uImageResolution.x),1.)\n\t);\n\tvec2 uv=vec2(\n\t\tvUv.x*bgRatio.x+(1.-bgRatio.x)*.5,\n\t\tvUv.y*bgRatio.y+(1.-bgRatio.y)*.5\n\t);\n\n\t// noise\n\tvec2 noiseMap = texture2D(uNoiseMap, uv).rg;\n\tnoiseMap=noiseMap*2.0-1.0;\n\tuv += noiseMap * noiseStrength;\n\n\t// center uv\n\tvec2 centeredUV = uv - vec2(0.5);\n\t\n\t// texture 0\n\tfloat xOffsetTexture0 = 0.5 - dirX * progress;\n\tfloat yOffsetTexture0 = 0.5 - dirY * progress;\n\tvec2 samplePosTexture0 = vec2(xOffsetTexture0, yOffsetTexture0) + centeredUV;\n\n\t//texture 1\n\tfloat xOffsetTexture1 = 0.5 + dirX * (1.0 - progress);\n\tfloat yOffsetTexture1 = 0.5 + dirY * (1.0 - progress);\n\tvec2 samplePosTexture1 = vec2(xOffsetTexture1, yOffsetTexture1) + centeredUV;\n\n\tvec4 color0 = texture2D(uTexture0, samplePosTexture0);\n\tvec4 color1 = texture2D(uTexture1, samplePosTexture1);\n\n\tgl_FragColor = mix(color0, color1, progress);\n\n}","import { useEffect, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useResolution } from \"../../utils/useResolution\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\nimport { Size } from \"@react-three/fiber\";\n\nexport class TransitionBgMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uResolution: { value: THREE.Vector2 };\n uImageResolution: { value: THREE.Vector2 };\n uTexture0: { value: THREE.Texture };\n uTexture1: { value: THREE.Texture };\n uNoiseMap: { value: THREE.Texture };\n noiseStrength: { value: number };\n progress: { value: number };\n dirX: { value: number };\n dirY: { value: number };\n };\n}\n\nexport const useMesh = ({\n scene,\n size,\n dpr,\n}: {\n scene: THREE.Scene;\n size: Size;\n dpr: number;\n}) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uResolution: { value: new THREE.Vector2() },\n uImageResolution: { value: new THREE.Vector2() },\n uTexture0: { value: new THREE.Texture() },\n uTexture1: { value: new THREE.Texture() },\n uNoiseMap: { value: new THREE.Texture() },\n noiseStrength: { value: 0.0 },\n progress: { value: 0.0 },\n dirX: { value: 0.0 },\n dirY: { value: 0.0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n\n const resolution = useResolution(size, dpr);\n useEffect(() => {\n material.uniforms.uResolution.value = resolution.clone();\n }, [resolution, material]);\n\n useAddMesh(scene, geometry, material);\n\n return material as TransitionBgMaterial;\n};\n","import * as THREE from \"three\";\nimport { useCallback, useMemo } from \"react\";\nimport { useMesh } from \"./useMesh\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { HooksReturn } from \"../types\";\nimport { useParams } from \"../../utils/useParams\";\n\nexport type TransitionBgParams = {\n /** 1st texture , default:THREE.Texture() */\n texture0?: THREE.Texture;\n /** 2nd texture , default:THREE.Texture() */\n texture1?: THREE.Texture;\n /** background image ratio , default:THREE.Vector2(0, 0) */\n imageResolution?: THREE.Vector2;\n /** Noise texture to be multiplied when transitioning. You can use useNoise, but you can also use noise texture exported as an image. , default:THREE.Texture() */\n noiseMap?: THREE.Texture;\n /** noise strength , default:0.0 */\n noiseStrength?: number;\n /** Switch value to switch between texture0 and texture1 */\n progress?: number;\n /** direction of transition , default: THREE.Vector2(0, 0) */\n dir?: THREE.Vector2;\n};\n\nexport type TransitionBgObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const TRANSITIONBG_PARAMS: TransitionBgParams = {\n texture0: new THREE.Texture(),\n texture1: new THREE.Texture(),\n imageResolution: new THREE.Vector2(0, 0),\n noiseMap: new THREE.Texture(),\n noiseStrength: 0.0,\n progress: 0.0,\n dir: new THREE.Vector2(0, 0),\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useTransitionBg = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh({ scene, size, dpr });\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n dpr,\n size,\n isSizeUpdate: true,\n });\n\n const [params, setParams] =\n useParams(TRANSITIONBG_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: TransitionBgParams) => {\n const { gl } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"uTexture0\", params.texture0!);\n setUniform(material, \"uTexture1\", params.texture1!);\n setUniform(material, \"uImageResolution\", params.imageResolution!);\n setUniform(material, \"uNoiseMap\", params.noiseMap!);\n setUniform(material, \"noiseStrength\", params.noiseStrength!);\n setUniform(material, \"progress\", params.progress!);\n setUniform(material, \"dirX\", params.dir!.x);\n setUniform(material, \"dirY\", params.dir!.y);\n\n const bufferTexture = updateRenderTarget(gl);\n return bufferTexture;\n },\n [updateRenderTarget, material, params, setParams]\n );\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n","varying vec2 vUv;\n\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4(position, 1.0);\n}","precision highp float;\n\nvarying vec2 vUv;\nuniform float uTime;\nuniform float timeStrength;\nuniform int noiseOctaves;\nuniform int fbmOctaves;\n\nconst float per = 0.5;\nconst float PI = 3.14159265359;\n\nfloat interpolate(float a, float b, float x){\n float f = (1.0 - cos(x * PI)) * 0.5;\n return a * (1.0 - f) + b * f;\n}\n\nfloat rnd(vec2 p){\n\tvec3 p3 = fract(vec3(p.xyx) * .1995);\n\tp3 += dot(p3, p3.yzx + 11.28);\n\treturn fract((p3.x + p3.y) * p3.z);\n}\n\nfloat irnd(vec2 p){\n\tvec2 i = floor(p);\n\tvec2 f = fract(p);\n\tvec4 v = vec4(rnd(vec2(i.x,i.y)),rnd(vec2(i.x + 1.0,i.y)),rnd(vec2(i.x,i.y + 1.0)),rnd(vec2(i.x + 1.0, i.y + 1.0)));\n\treturn interpolate(interpolate(v.x, v.y, f.x), interpolate(v.z, v.w, f.x), f.y);\n}\n\n// Based on The Book of Shaders\n// https://thebookofshaders.com/13/\nfloat noise(vec2 p, float time){\n\tfloat t = 0.0;\n\tfor(int i = 0; i < noiseOctaves; i++){\n\t\tfloat freq = pow(2.0, float(i));\n\t\tfloat amp = pow(per, float(noiseOctaves - i));\n\t\tt += irnd(vec2(p.y / freq + time, p.x / freq + time)) * amp;\n\t}\n\treturn t;\n}\n\nfloat fbm(vec2 x, float time) {\n\tfloat v = 0.0;\n\tfloat a = 0.5;\n\tvec2 shift = vec2(100);\n\tmat2 rot = mat2(cos(0.5), sin(0.5), -sin(0.5), cos(0.5));\n\tfloat sign = 1.0;\n\tfor (int i = 0; i < fbmOctaves; ++i) {\n\t\tv += a * noise(x, time * sign);\n\t\tx = rot * x * 2.0 + shift;\n\t\ta *= 0.5;\n\t\tsign *= -1.0;\n\t}\n\treturn v;\n}\n\nvoid main() {\n\tfloat noiseMap = fbm(gl_FragCoord.xy ,uTime * timeStrength);\n\tgl_FragColor = vec4(noiseMap,noiseMap,noiseMap,1.0);\n}\n\n","import { useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport vertexShader from \"./shader/main.vert\";\nimport fragmentShader from \"./shader/main.frag\";\nimport { useAddMesh } from \"../../utils/useAddMesh\";\n\nexport class NoiseMaterial extends THREE.ShaderMaterial {\n uniforms!: {\n uTime: { value: number };\n timeStrength: { value: number };\n noiseOctaves: { value: number };\n fbmOctaves: { value: number };\n };\n}\n\nexport const useMesh = (scene: THREE.Scene) => {\n const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);\n const material = useMemo(\n () =>\n new THREE.ShaderMaterial({\n uniforms: {\n uTime: { value: 0.0 },\n timeStrength: { value: 0.0 },\n noiseOctaves: { value: 0 },\n fbmOctaves: { value: 0 },\n },\n vertexShader: vertexShader,\n fragmentShader: fragmentShader,\n }),\n []\n );\n useAddMesh(scene, geometry, material);\n return material as NoiseMaterial;\n};\n","import { useCallback, useMemo } from \"react\";\nimport * as THREE from \"three\";\nimport { useMesh } from \"./useMesh\";\nimport { RootState, Size } from \"@react-three/fiber\";\nimport { useCamera } from \"../../utils/useCamera\";\nimport { useSingleFBO } from \"../../utils/useSingleFBO\";\nimport { setUniform } from \"../../utils/setUniforms\";\nimport { useParams } from \"../../utils/useParams\";\nimport { HooksReturn } from \"../types\";\n\nexport type NoiseParams = {\n /** time factor default:0.3 */\n timeStrength?: number;\n /** noiseOctaves, affects performance default:8 */\n noiseOctaves?: number;\n /** fbmOctaves, affects performance default:3 */\n fbmOctaves?: number;\n};\n\nexport type NoiseObject = {\n scene: THREE.Scene;\n material: THREE.Material;\n camera: THREE.Camera;\n renderTarget: THREE.WebGLRenderTarget;\n};\n\nexport const NOISE_PARAMS: NoiseParams = {\n timeStrength: 0.3,\n noiseOctaves: 8,\n fbmOctaves: 3,\n};\n\n/**\n * @link https://github.com/takuma-hmng8/use-shader-fx#usage\n */\nexport const useNoise = ({\n size,\n dpr,\n}: {\n size: Size;\n dpr: number;\n}): HooksReturn => {\n const scene = useMemo(() => new THREE.Scene(), []);\n const material = useMesh(scene);\n const camera = useCamera(size);\n const [renderTarget, updateRenderTarget] = useSingleFBO({\n scene,\n camera,\n size,\n dpr,\n });\n\n const [params, setParams] = useParams(NOISE_PARAMS);\n\n const updateFx = useCallback(\n (props: RootState, updateParams?: NoiseParams) => {\n const { gl, clock } = props;\n\n updateParams && setParams(updateParams);\n\n setUniform(material, \"timeStrength\", params.timeStrength!);\n setUniform(material, \"noiseOctaves\", params.noiseOctaves!);\n setUniform(material, \"fbmOctaves\", params.fbmOctaves!);\n\n setUniform(material, \"uTime\", clock.getElapsedTime());\n\n return updateRenderTarget(gl);\n },\n [updateRenderTarget, material, setParams, params]\n );\n\n return [\n updateFx,\n setParams,\n {\n scene: scene,\n material: material,\n camera: camera,\n renderTarget: renderTarget,\n },\n ];\n};\n"],"names":["main_default","useResolution","size","dpr","_width","_height","useMemo","THREE","useAddMesh","scene","geometry","material","mesh","useEffect","setUniform","key","value","useMesh","vertexShader","fragmentShader","resolution","getCameraProps","width","height","frustumSize","aspect","w","h","useCamera","near","far","FBO_OPTION","useSingleFBO","camera","isSizeUpdate","renderTarget","useRef","useLayoutEffect","_a","currentRenderTarget","updateRenderTarget","useCallback","gl","onBeforeRender","fbo","useDoubleFBO","temp","initRenderTargets","read","write","_b","usePointer","prevPointer","diffPointer","lastUpdateTime","velocity","isMoved","currentPointer","now","current","deltaTime","isUpdate","prevTemp","useParams","params","isContainsFunctions","obj","paramsRef","setParams","updateParams","paramKey","BRUSH_PARAMS","useBrush","updatePointer","props","pointer","DUOTONE_PARAMS","useDuoTone","FOGPROJECTION_PARAMS","useFogProjection","clock","init_default","useInitialMaterial","advection_default","useAdvectionMaterial","divergence_default","useDivergenceMaterial","pressure_default","usePressureMaterial","curl_default","useCurlMaterial","vorticity_default","useVorticityMaterial","clear_default","useClearMaterial","gradientSubtract_default","useGradientSubtractMaterial","splat_default","useSplateMaterial","initialMaterial","updateMaterial","curlMaterial","vorticityMaterial","advectionMaterial","divergenceMaterial","pressureMaterial","clearMaterial","gradientSubtractMaterial","splatMaterial","materials","setMeshMaterial","FLUID_PARAMS","useFluid","fboProps","velocityFBO","updateVelocityFBO","densityFBO","updateDensityFBO","curlFBO","updateCurlFBO","divergenceFBO","updateDivergenceFBO","pressureFBO","updatePressureFBO","lastTime","scaledDiffVec","spaltVec","dt","velocityTex","densityTex","isVelocityUpdate","scaledDiff","color","curlTex","divergenceTex","pressureTexTemp","i","scale","max","texture","meshArr","RIPPLE_PARAMS","useRipple","currentWave","TRANSITIONBG_PARAMS","useTransitionBg","NOISE_PARAMS","useNoise"],"mappings":"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"} \ No newline at end of file diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/index.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/index.ts new file mode 100644 index 00000000..d7e63b26 --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/index.ts @@ -0,0 +1,133 @@ +import * as THREE from "three"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useCamera } from "../../utils/useCamera"; +import { RootState, Size } from "@react-three/fiber"; +import { useSingleFBO } from "../../utils/useSingleFBO"; +import { HooksReturn } from "../types"; +import { useParams } from "../../utils/useParams"; +import { errorHandler } from "./utils/errorHandler"; +import { createMesh } from "./utils/createMesh"; +import { useIntersectionHandler } from "./utils/useIntersectionHandler"; +import { updateRect } from "./utils/updateRect"; +import { useIsIntersecting, IsIntersecting } from "./utils/useIsIntersecting"; + +export type DomSyncerParams = { + texture?: THREE.Texture[]; + dom?: (HTMLElement | Element | null)[]; + resolution?: THREE.Vector2[]; + boderRadius?: number[]; +}; + +export type DomSyncerObject = { + scene: THREE.Scene; + camera: THREE.Camera; + renderTarget: THREE.WebGLRenderTarget; + /** + * The syncing DOM also returns a crossing decision. + * @param index - Index of the dom for which you want to return an intersection decision. -1 will return the entire array. + * @param once - If set to true, it will continue to return true once crossed. + */ + isIntersecting: IsIntersecting; +}; + +export const DOMSYNCER_PARAMS: DomSyncerParams = { + texture: [], + dom: [], + resolution: [], + boderRadius: [], +}; + +/** + * @link https://github.com/takuma-hmng8/use-shader-fx#usage + */ +export const useDomSyncer = ( + { + size, + dpr, + }: { + size: Size; + dpr: number; + }, + dependencies: React.DependencyList = [] +): HooksReturn => { + const scene = useMemo(() => new THREE.Scene(), []); + const camera = useCamera(size); + const [renderTarget, updateRenderTarget] = useSingleFBO({ + scene, + camera, + size, + dpr, + }); + const [params, setParams] = useParams(DOMSYNCER_PARAMS); + + // Avoid instancing vec2 every frame + const resolutionRef = useRef(new THREE.Vector2(0, 0)); + + // Update monitored doms according to the dependency array + const [refreshTrigger, setRefreshTrigger] = useState(true); + useEffect(() => { + setRefreshTrigger(true); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, dependencies); + + const intersectionHandler = useIntersectionHandler(); + const { isIntersectingOnceRef, isIntersectingRef, isIntersecting } = + useIsIntersecting(); + + const updateFx = useCallback( + (props: RootState, updateParams?: DomSyncerParams) => { + const { gl, size } = props; + + updateParams && setParams(updateParams); + + errorHandler(params); + + if (refreshTrigger) { + createMesh({ + params, + size, + scene, + }); + + intersectionHandler({ + isIntersectingRef, + isIntersectingOnceRef, + params, + }); + + setRefreshTrigger(false); + } + + updateRect({ + params, + size, + resolutionRef, + scene, + isIntersectingRef, + }); + + return updateRenderTarget(gl); + }, + [ + updateRenderTarget, + setParams, + intersectionHandler, + refreshTrigger, + scene, + params, + isIntersectingOnceRef, + isIntersectingRef, + ] + ); + + return [ + updateFx, + setParams, + { + scene: scene, + camera: camera, + renderTarget: renderTarget, + isIntersecting: isIntersecting, + }, + ]; +}; diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.frag b/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.frag new file mode 100644 index 00000000..c89e2a9f --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.frag @@ -0,0 +1,37 @@ +precision highp float; + +varying vec2 vUv; +uniform sampler2D u_texture; +uniform vec2 u_textureResolution; +uniform vec2 u_resolution; +uniform float u_borderRadius; + +void main() { + // texuture color + vec2 ratio = vec2( + min((u_resolution.x / u_resolution.y) / (u_textureResolution.x / u_textureResolution.y), 1.0), + min((u_resolution.y / u_resolution.x) / (u_textureResolution.y / u_textureResolution.x), 1.0) + ); + vec2 adjustedUv = vUv * ratio + (1.0 - ratio) * 0.5; + vec3 textureColor = texture2D(u_texture, adjustedUv).rgb; + + // Based on https://mofu-dev.com/en/blog/three-dom-alignment/ + float maxSide = max(u_resolution.x, u_resolution.y); + float minSide = min(u_resolution.x, u_resolution.y); + vec2 aspect = u_resolution / maxSide; + vec2 alphaUv = vUv - 0.5; + + float borderRadius = min(u_borderRadius, minSide * 0.5); + vec2 offset = vec2(borderRadius) / u_resolution; + vec2 alphaXY = smoothstep(vec2(0.5 - offset), vec2(0.5 - offset - 0.001), abs(alphaUv)); + float alpha = min(1.0, alphaXY.x + alphaXY.y); + + vec2 alphaUv2 = abs(vUv - 0.5); + float radius = borderRadius / maxSide; + alphaUv2 = (alphaUv2 - 0.5) * aspect + radius; + float roundAlpha = smoothstep(radius + 0.001, radius, length(alphaUv2)); + + alpha = min(1.0, alpha + roundAlpha); + + gl_FragColor = vec4(textureColor, alpha); +} diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.vert b/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.vert new file mode 100644 index 00000000..a27a65c8 --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/shader/main.vert @@ -0,0 +1,6 @@ +varying vec2 vUv; + +void main() { + vUv = uv; + gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0); +} \ No newline at end of file diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/utils/createMesh.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/createMesh.ts new file mode 100644 index 00000000..80484e95 --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/createMesh.ts @@ -0,0 +1,46 @@ +import * as THREE from "three"; +import { DomSyncerParams } from "../"; +import { Size } from "@react-three/fiber"; +import vertexShader from "../shader/main.vert"; +import fragmentShader from "../shader/main.frag"; + +export const createMesh = ({ + params, + size, + scene, +}: { + params: DomSyncerParams; + size: Size; + scene: THREE.Scene; +}) => { + if (scene.children.length > 0) { + scene.children.forEach((child) => { + if (child instanceof THREE.Mesh) { + child.geometry.dispose(); + child.material.dispose(); + } + }); + scene.remove(...scene.children); + } + + params.texture!.forEach((texture, i) => { + const mesh = new THREE.Mesh( + new THREE.PlaneGeometry(1, 1), + new THREE.ShaderMaterial({ + vertexShader: vertexShader, + fragmentShader: fragmentShader, + transparent: true, + uniforms: { + u_texture: { value: texture }, + u_textureResolution: { value: new THREE.Vector2(0, 0) }, + u_resolution: { value: new THREE.Vector2(0, 0) }, + u_borderRadius: { + value: params.boderRadius![i] ? params.boderRadius![i] : 0.0, + }, + }, + }) + ); + + scene.add(mesh); + }); +}; diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/utils/errorHandler.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/errorHandler.ts new file mode 100644 index 00000000..b33aca2b --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/errorHandler.ts @@ -0,0 +1,15 @@ +import { DomSyncerParams } from ".."; + +export const errorHandler = (params: DomSyncerParams) => { + const domLength = params.dom?.length; + const textureLength = params.texture?.length; + const resolutionLength = params.resolution?.length; + + if (!domLength || !textureLength || !resolutionLength) { + throw new Error("No dom or texture or resolution is set"); + } + + if (domLength !== textureLength || domLength !== resolutionLength) { + throw new Error("Match dom, texture and resolution length"); + } +}; diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/utils/updateRect.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/updateRect.ts new file mode 100644 index 00000000..60b266d9 --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/updateRect.ts @@ -0,0 +1,43 @@ +import * as THREE from "three"; +import { DomSyncerParams } from "../"; +import { Size } from "@react-three/fiber"; +import { setUniform } from "../../../utils/setUniforms"; + +export const updateRect = ({ + params, + size, + resolutionRef, + scene, + isIntersectingRef, +}: { + params: DomSyncerParams; + size: Size; + resolutionRef: React.MutableRefObject; + scene: THREE.Scene; + isIntersectingRef: React.MutableRefObject; +}) => { + scene.children.forEach((mesh, i) => { + const domElement = params.dom![i]; + if (!domElement) { + throw new Error("DOM is null."); + } + if (isIntersectingRef.current[i]) { + const rect = domElement.getBoundingClientRect(); + mesh.scale.set(rect.width, rect.height, 1.0); + mesh.position.set( + rect.left + rect.width * 0.5 - size.width * 0.5, + -rect.top - rect.height * 0.5 + size.height * 0.5, + 0.0 + ); + if (mesh instanceof THREE.Mesh) { + const material = mesh.material; + setUniform( + material, + "u_resolution", + resolutionRef.current.set(rect.width, rect.height) + ); + setUniform(material, "u_textureResolution", params.resolution![i]); + } + } + }); +}; diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIntersectionHandler.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIntersectionHandler.ts new file mode 100644 index 00000000..fc22f5c4 --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIntersectionHandler.ts @@ -0,0 +1,47 @@ +import { useRef } from "react"; +import { DomSyncerParams } from ".."; + +export const useIntersectionHandler = () => { + const intersectionObserverRef = useRef([]); + const intersectionDomRef = useRef<(HTMLElement | Element | null)[]>([]); + + const intersectionHandler = ({ + isIntersectingRef, + isIntersectingOnceRef, + params, + }: { + isIntersectingRef: React.MutableRefObject; + isIntersectingOnceRef: React.MutableRefObject; + params: DomSyncerParams; + }) => { + if (intersectionObserverRef.current.length > 0) { + intersectionObserverRef.current.forEach((observer, i) => { + observer.unobserve(intersectionDomRef.current[i]!); + }); + } + + intersectionDomRef.current = []; + intersectionObserverRef.current = []; + + const newArr = new Array(params.dom!.length).fill(false); + isIntersectingRef.current = [...newArr]; + isIntersectingOnceRef.current = [...newArr]; + + params.dom!.forEach((dom, i) => { + const callback = (entries: IntersectionObserverEntry[]) => { + entries.forEach((entry) => { + isIntersectingRef.current[i] = entry.isIntersecting; + }); + }; + const observer = new IntersectionObserver(callback, { + rootMargin: "0px", + threshold: 0, + }); + observer.observe(dom!); + intersectionObserverRef.current.push(observer); + intersectionDomRef.current.push(dom!); + }); + }; + + return intersectionHandler; +}; diff --git a/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIsIntersecting.ts b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIsIntersecting.ts new file mode 100644 index 00000000..6e31717c --- /dev/null +++ b/packages/use-shader-fx/src/hooks/useDomSyncer/utils/useIsIntersecting.ts @@ -0,0 +1,28 @@ +import { useRef } from "react"; + +export type IsIntersecting = ( + index: number, + once?: boolean +) => boolean[] | boolean; + +export const useIsIntersecting = () => { + const isIntersectingRef = useRef([]); + const isIntersectingOnceRef = useRef([]); + const isIntersecting: IsIntersecting = (index, once = false) => { + isIntersectingRef.current.forEach((value, i) => { + if (value) { + isIntersectingOnceRef.current[i] = true; + } + }); + const temp = once + ? [...isIntersectingOnceRef.current] + : [...isIntersectingRef.current]; + return index < 0 ? temp : temp[index]; + }; + + return { + isIntersectingRef, + isIntersectingOnceRef, + isIntersecting, + }; +}; diff --git a/packages/use-shader-fx/src/hooks/useTransitionBg/index.ts b/packages/use-shader-fx/src/hooks/useTransitionBg/index.ts index 83e55345..71d1254a 100644 --- a/packages/use-shader-fx/src/hooks/useTransitionBg/index.ts +++ b/packages/use-shader-fx/src/hooks/useTransitionBg/index.ts @@ -13,8 +13,8 @@ export type TransitionBgParams = { texture0?: THREE.Texture; /** 2nd texture , default:THREE.Texture() */ texture1?: THREE.Texture; - /** background image ratio , default:THREE.Vector2(0, 0) */ - imageResolution?: THREE.Vector2; + /** background texture resolution , default:THREE.Vector2(0, 0) */ + textureResolution?: THREE.Vector2; /** Noise texture to be multiplied when transitioning. You can use useNoise, but you can also use noise texture exported as an image. , default:THREE.Texture() */ noiseMap?: THREE.Texture; /** noise strength , default:0.0 */ @@ -35,7 +35,7 @@ export type TransitionBgObject = { export const TRANSITIONBG_PARAMS: TransitionBgParams = { texture0: new THREE.Texture(), texture1: new THREE.Texture(), - imageResolution: new THREE.Vector2(0, 0), + textureResolution: new THREE.Vector2(0, 0), noiseMap: new THREE.Texture(), noiseStrength: 0.0, progress: 0.0, @@ -74,7 +74,7 @@ export const useTransitionBg = ({ setUniform(material, "uTexture0", params.texture0!); setUniform(material, "uTexture1", params.texture1!); - setUniform(material, "uImageResolution", params.imageResolution!); + setUniform(material, "uTextureResolution", params.textureResolution!); setUniform(material, "uNoiseMap", params.noiseMap!); setUniform(material, "noiseStrength", params.noiseStrength!); setUniform(material, "progress", params.progress!); diff --git a/packages/use-shader-fx/src/hooks/useTransitionBg/shader/main.frag b/packages/use-shader-fx/src/hooks/useTransitionBg/shader/main.frag index aee88e1e..6fffa586 100644 --- a/packages/use-shader-fx/src/hooks/useTransitionBg/shader/main.frag +++ b/packages/use-shader-fx/src/hooks/useTransitionBg/shader/main.frag @@ -2,7 +2,7 @@ precision highp float; varying vec2 vUv; uniform vec2 uResolution; -uniform vec2 uImageResolution; +uniform vec2 uTextureResolution; uniform sampler2D uTexture0; uniform sampler2D uTexture1; @@ -14,8 +14,8 @@ uniform float dirY; void main() { vec2 bgRatio=vec2( - min((uResolution.x/uResolution.y)/(uImageResolution.x/uImageResolution.y),1.), - min((uResolution.y/uResolution.x)/(uImageResolution.y/uImageResolution.x),1.) + min((uResolution.x/uResolution.y)/(uTextureResolution.x/uTextureResolution.y),1.), + min((uResolution.y/uResolution.x)/(uTextureResolution.y/uTextureResolution.x),1.) ); vec2 uv=vec2( vUv.x*bgRatio.x+(1.-bgRatio.x)*.5, diff --git a/packages/use-shader-fx/src/hooks/useTransitionBg/useMesh.ts b/packages/use-shader-fx/src/hooks/useTransitionBg/useMesh.ts index 23d8c5f8..74d5163e 100644 --- a/packages/use-shader-fx/src/hooks/useTransitionBg/useMesh.ts +++ b/packages/use-shader-fx/src/hooks/useTransitionBg/useMesh.ts @@ -9,7 +9,7 @@ import { Size } from "@react-three/fiber"; export class TransitionBgMaterial extends THREE.ShaderMaterial { uniforms!: { uResolution: { value: THREE.Vector2 }; - uImageResolution: { value: THREE.Vector2 }; + uTextureResolution: { value: THREE.Vector2 }; uTexture0: { value: THREE.Texture }; uTexture1: { value: THREE.Texture }; uNoiseMap: { value: THREE.Texture }; @@ -35,7 +35,7 @@ export const useMesh = ({ new THREE.ShaderMaterial({ uniforms: { uResolution: { value: new THREE.Vector2() }, - uImageResolution: { value: new THREE.Vector2() }, + uTextureResolution: { value: new THREE.Vector2() }, uTexture0: { value: new THREE.Texture() }, uTexture1: { value: new THREE.Texture() }, uNoiseMap: { value: new THREE.Texture() }, diff --git a/packages/use-shader-fx/src/index.js b/packages/use-shader-fx/src/index.js index 4203c63b..eaa9d31d 100644 --- a/packages/use-shader-fx/src/index.js +++ b/packages/use-shader-fx/src/index.js @@ -9,6 +9,7 @@ export { useFluid, FLUID_PARAMS } from "./hooks/useFluid"; export { useRipple, RIPPLE_PARAMS } from "./hooks/useRipple"; export { useTransitionBg, TRANSITIONBG_PARAMS } from "./hooks/useTransitionBg"; export { useNoise, NOISE_PARAMS } from "./hooks/useNoise"; +export { useDomSyncer, DOMSYNCER_PARAMS } from "./hooks/useDomSyncer"; export { useSimpleBlur, SIMPLEBLUR_PARAMS } from './hooks/useSimpleBlur' // utils diff --git a/packages/use-shader-fx/types/hooks/types/index.d.ts b/packages/use-shader-fx/types/hooks/types/index.d.ts deleted file mode 100644 index feb96da2..00000000 --- a/packages/use-shader-fx/types/hooks/types/index.d.ts +++ /dev/null @@ -1,28 +0,0 @@ -import * as THREE from "three"; -import { RootState } from "@react-three/fiber"; -/** - * @returns {HooksReturn} - * updateFx - A function to be called inside `useFrame` that returns a `THREE.Texture`. - * setParams - A function to update the parameters, useful for performance tuning, etc. - * fxObject - An object containing various FX components such as scene, camera, material, and render target. - * - * @template T The type for the parameters of the hooks. - * @template O The type for the FX object. - */ -export type HooksReturn = [ - /** - * An update function that returns THREE.Texture. Call it inside useFrame - * @param props RootState - * @param params params of hooks - */ - (props: RootState, updateParams?: T) => THREE.Texture, - /** - * Function to update params. It can be used for performance control, etc. - * @param params params of hooks - */ - (params: T) => void, - /** - * Contains each part of FX such as scene, camera, material, render target, etc. - */ - O -]; diff --git a/packages/use-shader-fx/types/hooks/useBrush/index.d.ts b/packages/use-shader-fx/types/hooks/useBrush/index.d.ts deleted file mode 100644 index ed18111d..00000000 --- a/packages/use-shader-fx/types/hooks/useBrush/index.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -import { DoubleRenderTarget } from "../../utils/types"; -export type BrushParams = { - /** Texture applied to the brush.Mixed with the value of a , default:THREE.Texture() */ - texture?: THREE.Texture; - /** size of the stamp, percentage of the size ,default:0.05 */ - radius?: number; - /** Strength of smudge effect , default:0.0*/ - smudge?: number; - /** dissipation rate. If set to 1, it will remain. ,default:1.0 */ - dissipation?: number; - /** Strength of motion blur , default:0.0 */ - motionBlur?: number; - /** Number of motion blur samples. Affects performance default: 5 */ - motionSample?: number; - /** brush color , default:THREE.Color(0xffffff) */ - color?: THREE.Color; -}; -export type BrushObject = { - scene: THREE.Scene; - material: THREE.Material; - camera: THREE.Camera; - renderTarget: DoubleRenderTarget; -}; -export declare const BRUSH_PARAMS: BrushParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useBrush: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useBrush/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useBrush/useMesh.d.ts deleted file mode 100644 index abc361fc..00000000 --- a/packages/use-shader-fx/types/hooks/useBrush/useMesh.d.ts +++ /dev/null @@ -1,50 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -export declare class BrushMaterial extends THREE.ShaderMaterial { - uniforms: { - uMap: { - value: THREE.Texture; - }; - uResolution: { - value: THREE.Texture; - }; - uAspect: { - value: number; - }; - uTexture: { - value: THREE.Texture; - }; - uRadius: { - value: number; - }; - uSmudge: { - value: number; - }; - uDissipation: { - value: number; - }; - uMotionBlur: { - value: number; - }; - uMotionSample: { - value: number; - }; - uMouse: { - value: number; - }; - uPrevMouse: { - value: number; - }; - uVelocity: { - value: number; - }; - uColor: { - value: THREE.Color; - }; - }; -} -export declare const useMesh: ({ scene, size, dpr, }: { - scene: THREE.Scene; - size: Size; - dpr: number; -}) => BrushMaterial; diff --git a/packages/use-shader-fx/types/hooks/useDuoTone/index.d.ts b/packages/use-shader-fx/types/hooks/useDuoTone/index.d.ts deleted file mode 100644 index 33a329e3..00000000 --- a/packages/use-shader-fx/types/hooks/useDuoTone/index.d.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as THREE from "three"; -import { DuoToneMaterial } from "./useMesh"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -export type DuoToneParams = { - /** Make this texture duotone , Default:new THREE.Texture() */ - texture?: THREE.Texture; - /** 1st color ,　Default:new THREE.Color(0xffffff) */ - color0?: THREE.Color; - /** 2nd color , Default: new THREE.Color(0x000000) */ - color1?: THREE.Color; -}; -export type DuoToneObject = { - scene: THREE.Scene; - material: DuoToneMaterial; - camera: THREE.Camera; - renderTarget: THREE.WebGLRenderTarget; -}; -export declare const DUOTONE_PARAMS: DuoToneParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useDuoTone: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useDuoTone/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useDuoTone/useMesh.d.ts deleted file mode 100644 index d2136dda..00000000 --- a/packages/use-shader-fx/types/hooks/useDuoTone/useMesh.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as THREE from "three"; -export declare class DuoToneMaterial extends THREE.ShaderMaterial { - uniforms: { - uTexture: { - value: THREE.Texture; - }; - uColor0: { - value: THREE.Color; - }; - uColor1: { - value: THREE.Color; - }; - }; -} -export declare const useMesh: (scene: THREE.Scene) => DuoToneMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/index.d.ts b/packages/use-shader-fx/types/hooks/useFluid/index.d.ts deleted file mode 100644 index 0577b8f5..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/index.d.ts +++ /dev/null @@ -1,43 +0,0 @@ -import * as THREE from "three"; -import { FluidMaterials } from "./useMesh"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -import { DoubleRenderTarget } from "../../utils/types"; -export type FluidParams = { - /** density disspation , default:0.98 */ - density_dissipation?: number; - /** velocity dissipation , default:0.99 */ - velocity_dissipation?: number; - /** velocity acceleration , default:10.0 */ - velocity_acceleration?: number; - /** pressure dissipation , default:0.9 */ - pressure_dissipation?: number; - /** pressure iterations. affects performance , default:20 */ - pressure_iterations?: number; - /** curl_strength , default:35 */ - curl_strength?: number; - /** splat radius , default:0.002 */ - splat_radius?: number; - /** Fluid Color.THREE.Vector3 Alternatively, it accepts a function that returns THREE.Vector3.The function takes velocity:THREE.Vector2 as an argument. , default:THREE.Vector3(1.0, 1.0, 1.0) */ - fluid_color?: ((velocity: THREE.Vector2) => THREE.Vector3) | THREE.Vector3; -}; -export type FluidObject = { - scene: THREE.Scene; - materials: FluidMaterials; - camera: THREE.Camera; - renderTarget: { - velocity: DoubleRenderTarget; - density: DoubleRenderTarget; - curl: THREE.WebGLRenderTarget; - divergence: THREE.WebGLRenderTarget; - pressure: DoubleRenderTarget; - }; -}; -export declare const FLUID_PARAMS: FluidParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useFluid: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useAdvectionMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useAdvectionMaterial.d.ts deleted file mode 100644 index 54b0eecd..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useAdvectionMaterial.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as THREE from "three"; -export declare class AdvectionMaterial extends THREE.ShaderMaterial { - uniforms: { - uVelocity: { - value: THREE.Texture; - }; - uSource: { - value: THREE.Texture; - }; - texelSize: { - value: THREE.Vector2; - }; - dt: { - value: number; - }; - dissipation: { - value: number; - }; - }; -} -export declare const useAdvectionMaterial: () => AdvectionMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useClearMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useClearMaterial.d.ts deleted file mode 100644 index be11109d..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useClearMaterial.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as THREE from "three"; -export declare class ClearMaterial extends THREE.ShaderMaterial { - uniforms: { - uTexture: { - value: THREE.Texture; - }; - value: { - value: number; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useClearMaterial: () => ClearMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useCurlMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useCurlMaterial.d.ts deleted file mode 100644 index 72e61bb3..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useCurlMaterial.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as THREE from "three"; -export declare class CurlMaterial extends THREE.ShaderMaterial { - uniforms: { - uVelocity: { - value: THREE.Texture; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useCurlMaterial: () => CurlMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useDivergenceMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useDivergenceMaterial.d.ts deleted file mode 100644 index 7f4b2bd7..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useDivergenceMaterial.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as THREE from "three"; -export declare class DivergenceMaterial extends THREE.ShaderMaterial { - uniforms: { - uVelocity: { - value: THREE.Texture; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useDivergenceMaterial: () => DivergenceMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useGradientSubtractMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useGradientSubtractMaterial.d.ts deleted file mode 100644 index 07061758..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useGradientSubtractMaterial.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as THREE from "three"; -export declare class GradientSubtractMaterial extends THREE.ShaderMaterial { - uniforms: { - uPressure: { - value: THREE.Texture; - }; - uVelocity: { - value: THREE.Texture; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useGradientSubtractMaterial: () => GradientSubtractMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useInitialMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useInitialMaterial.d.ts deleted file mode 100644 index 6322827a..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useInitialMaterial.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -import * as THREE from "three"; -export declare const useInitialMaterial: () => THREE.ShaderMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/usePressureMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/usePressureMaterial.d.ts deleted file mode 100644 index 23309d4b..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/usePressureMaterial.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import * as THREE from "three"; -export declare class PressureMaterial extends THREE.ShaderMaterial { - uniforms: { - uPressure: { - value: THREE.Texture; - }; - uDivergence: { - value: THREE.Texture; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const usePressureMaterial: () => PressureMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useSplatMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useSplatMaterial.d.ts deleted file mode 100644 index 820cca7c..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useSplatMaterial.d.ts +++ /dev/null @@ -1,24 +0,0 @@ -import * as THREE from "three"; -export declare class SplatMaterial extends THREE.ShaderMaterial { - uniforms: { - uTarget: { - value: THREE.Texture; - }; - aspectRatio: { - value: number; - }; - color: { - value: THREE.Vector3; - }; - point: { - value: THREE.Vector2; - }; - radius: { - value: number; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useSplateMaterial: () => SplatMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/materials/useVorticityMaterial.d.ts b/packages/use-shader-fx/types/hooks/useFluid/materials/useVorticityMaterial.d.ts deleted file mode 100644 index 63c5b16e..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/materials/useVorticityMaterial.d.ts +++ /dev/null @@ -1,21 +0,0 @@ -import * as THREE from "three"; -export declare class VorticityMaterial extends THREE.ShaderMaterial { - uniforms: { - uVelocity: { - value: THREE.Texture; - }; - uCurl: { - value: THREE.Texture; - }; - curl: { - value: number; - }; - dt: { - value: number; - }; - texelSize: { - value: THREE.Vector2; - }; - }; -} -export declare const useVorticityMaterial: () => VorticityMaterial; diff --git a/packages/use-shader-fx/types/hooks/useFluid/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useFluid/useMesh.d.ts deleted file mode 100644 index 5e56c04f..00000000 --- a/packages/use-shader-fx/types/hooks/useFluid/useMesh.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as THREE from "three"; -import { AdvectionMaterial } from "./materials/useAdvectionMaterial"; -import { DivergenceMaterial } from "./materials/useDivergenceMaterial"; -import { PressureMaterial } from "./materials/usePressureMaterial"; -import { CurlMaterial } from "./materials/useCurlMaterial"; -import { VorticityMaterial } from "./materials/useVorticityMaterial"; -import { ClearMaterial } from "./materials/useClearMaterial"; -import { GradientSubtractMaterial } from "./materials/useGradientSubtractMaterial"; -import { SplatMaterial } from "./materials/useSplatMaterial"; -import { Size } from "@react-three/fiber"; -type TMaterials = AdvectionMaterial | DivergenceMaterial | CurlMaterial | PressureMaterial | ClearMaterial | GradientSubtractMaterial | SplatMaterial; -export type FluidMaterials = { - vorticityMaterial: VorticityMaterial; - curlMaterial: CurlMaterial; - advectionMaterial: AdvectionMaterial; - divergenceMaterial: DivergenceMaterial; - pressureMaterial: PressureMaterial; - clearMaterial: ClearMaterial; - gradientSubtractMaterial: GradientSubtractMaterial; - splatMaterial: SplatMaterial; -}; -type TUseMeshReturnType = [FluidMaterials, (material: TMaterials) => void]; -/** - * Returns the material update function in the second argument - */ -export declare const useMesh: ({ scene, size, dpr, }: { - scene: THREE.Scene; - size: Size; - dpr: number; -}) => TUseMeshReturnType; -export {}; diff --git a/packages/use-shader-fx/types/hooks/useFogProjection/index.d.ts b/packages/use-shader-fx/types/hooks/useFogProjection/index.d.ts deleted file mode 100644 index c3d5d9f7..00000000 --- a/packages/use-shader-fx/types/hooks/useFogProjection/index.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -export type FogProjectionParams = { - /** Make this texture FogProjection , default:THREE.Texture */ - texture?: THREE.Texture; - /** noise texture to map, default:THREE.Texture */ - noiseMap?: THREE.Texture; - /** distortion strength , default:0.03 */ - distortionStrength?: number; - /** value that reflects noise , default:0.0 */ - fogEdge0?: number; - /** value that reflects noise , default:0.9 */ - fogEdge1?: number; - /** fog color , default: THREE.Color(0xffffff) */ - fogColor?: THREE.Color; -}; -export type FogProjectionObject = { - scene: THREE.Scene; - material: THREE.Material; - camera: THREE.Camera; - renderTarget: THREE.WebGLRenderTarget; -}; -export declare const FOGPROJECTION_PARAMS: FogProjectionParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useFogProjection: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useFogProjection/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useFogProjection/useMesh.d.ts deleted file mode 100644 index 436f376f..00000000 --- a/packages/use-shader-fx/types/hooks/useFogProjection/useMesh.d.ts +++ /dev/null @@ -1,27 +0,0 @@ -import * as THREE from "three"; -export declare class FogProjectionMaterial extends THREE.ShaderMaterial { - uniforms: { - uTime: { - value: number; - }; - uTexture: { - value: THREE.Texture; - }; - uNoiseMap: { - value: THREE.Texture; - }; - distortionStrength: { - value: number; - }; - fogEdge0: { - value: number; - }; - fogEdge1: { - value: number; - }; - fogColor: { - value: THREE.Color; - }; - }; -} -export declare const useMesh: (scene: THREE.Scene) => FogProjectionMaterial; diff --git a/packages/use-shader-fx/types/hooks/useNoise/index.d.ts b/packages/use-shader-fx/types/hooks/useNoise/index.d.ts deleted file mode 100644 index e8076c54..00000000 --- a/packages/use-shader-fx/types/hooks/useNoise/index.d.ts +++ /dev/null @@ -1,25 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -export type NoiseParams = { - /** time factor default:0.3 */ - timeStrength?: number; - /** noiseOctaves, affects performance default:8 */ - noiseOctaves?: number; - /** fbmOctaves, affects performance default:3 */ - fbmOctaves?: number; -}; -export type NoiseObject = { - scene: THREE.Scene; - material: THREE.Material; - camera: THREE.Camera; - renderTarget: THREE.WebGLRenderTarget; -}; -export declare const NOISE_PARAMS: NoiseParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useNoise: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useNoise/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useNoise/useMesh.d.ts deleted file mode 100644 index eee0606e..00000000 --- a/packages/use-shader-fx/types/hooks/useNoise/useMesh.d.ts +++ /dev/null @@ -1,18 +0,0 @@ -import * as THREE from "three"; -export declare class NoiseMaterial extends THREE.ShaderMaterial { - uniforms: { - uTime: { - value: number; - }; - timeStrength: { - value: number; - }; - noiseOctaves: { - value: number; - }; - fbmOctaves: { - value: number; - }; - }; -} -export declare const useMesh: (scene: THREE.Scene) => NoiseMaterial; diff --git a/packages/use-shader-fx/types/hooks/useRipple/index.d.ts b/packages/use-shader-fx/types/hooks/useRipple/index.d.ts deleted file mode 100644 index 0d1acf40..00000000 --- a/packages/use-shader-fx/types/hooks/useRipple/index.d.ts +++ /dev/null @@ -1,34 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -export type RippleParams = { - /** How often ripples appear,default:0.01 */ - frequency?: number; - /** rotation rate,default:0.05 */ - rotation?: number; - /** fadeout speed,default:0.9 */ - fadeout_speed?: number; - /** scale rate,default:0.3 */ - scale?: number; - /** alpha,default:0.6 */ - alpha?: number; -}; -export type RippleObject = { - scene: THREE.Scene; - meshArr: THREE.Mesh[]; - camera: THREE.Camera; - renderTarget: THREE.WebGLRenderTarget; -}; -export declare const RIPPLE_PARAMS: RippleParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useRipple: ({ texture, scale, max, size, }: { - /** texture applied to ripple */ - texture: THREE.Texture; - /** ripple size, default:64 */ - scale?: number | undefined; - /** ripple max length, default:100 */ - max?: number | undefined; - size: Size; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useRipple/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useRipple/useMesh.d.ts deleted file mode 100644 index 23aee107..00000000 --- a/packages/use-shader-fx/types/hooks/useRipple/useMesh.d.ts +++ /dev/null @@ -1,9 +0,0 @@ -import * as THREE from "three"; -type UseMeshProps = { - scale: number; - max: number; - texture?: THREE.Texture; - scene: THREE.Scene; -}; -export declare const useMesh: ({ scale, max, texture, scene }: UseMeshProps) => THREE.Mesh, THREE.Material | THREE.Material[]>[]; -export {}; diff --git a/packages/use-shader-fx/types/hooks/useTransitionBg/index.d.ts b/packages/use-shader-fx/types/hooks/useTransitionBg/index.d.ts deleted file mode 100644 index c36528ca..00000000 --- a/packages/use-shader-fx/types/hooks/useTransitionBg/index.d.ts +++ /dev/null @@ -1,33 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -import { HooksReturn } from "../types"; -export type TransitionBgParams = { - /** 1st texture , default:THREE.Texture() */ - texture0?: THREE.Texture; - /** 2nd texture , default:THREE.Texture() */ - texture1?: THREE.Texture; - /** background image ratio , default:THREE.Vector2(0, 0) */ - imageResolution?: THREE.Vector2; - /** Noise texture to be multiplied when transitioning. You can use useNoise, but you can also use noise texture exported as an image. , default:THREE.Texture() */ - noiseMap?: THREE.Texture; - /** noise strength , default:0.0 */ - noiseStrength?: number; - /** Switch value to switch between texture0 and texture1 */ - progress?: number; - /** direction of transition , default: THREE.Vector2(0, 0) */ - dir?: THREE.Vector2; -}; -export type TransitionBgObject = { - scene: THREE.Scene; - material: THREE.Material; - camera: THREE.Camera; - renderTarget: THREE.WebGLRenderTarget; -}; -export declare const TRANSITIONBG_PARAMS: TransitionBgParams; -/** - * @link https://github.com/takuma-hmng8/use-shader-fx#usage - */ -export declare const useTransitionBg: ({ size, dpr, }: { - size: Size; - dpr: number; -}) => HooksReturn; diff --git a/packages/use-shader-fx/types/hooks/useTransitionBg/useMesh.d.ts b/packages/use-shader-fx/types/hooks/useTransitionBg/useMesh.d.ts deleted file mode 100644 index 3823db18..00000000 --- a/packages/use-shader-fx/types/hooks/useTransitionBg/useMesh.d.ts +++ /dev/null @@ -1,38 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -export declare class TransitionBgMaterial extends THREE.ShaderMaterial { - uniforms: { - uResolution: { - value: THREE.Vector2; - }; - uImageResolution: { - value: THREE.Vector2; - }; - uTexture0: { - value: THREE.Texture; - }; - uTexture1: { - value: THREE.Texture; - }; - uNoiseMap: { - value: THREE.Texture; - }; - noiseStrength: { - value: number; - }; - progress: { - value: number; - }; - dirX: { - value: number; - }; - dirY: { - value: number; - }; - }; -} -export declare const useMesh: ({ scene, size, dpr, }: { - scene: THREE.Scene; - size: Size; - dpr: number; -}) => TransitionBgMaterial; diff --git a/packages/use-shader-fx/types/index.d.ts b/packages/use-shader-fx/types/index.d.ts deleted file mode 100644 index 8192568d..00000000 --- a/packages/use-shader-fx/types/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -export { setUniform } from "./utils/setUniforms"; -export { useAddMesh } from "./utils/useAddMesh"; -export { useCamera } from "./utils/useCamera"; -export { useDoubleFBO } from "./utils/useDoubleFBO"; -export { useParams } from "./utils/useParams"; -export { usePointer } from "./utils/usePointer"; -export { useResolution } from "./utils/useResolution"; -export { useSingleFBO } from "./utils/useSingleFBO"; -export { useBrush, BRUSH_PARAMS } from "./hooks/useBrush"; -export { useDuoTone, DUOTONE_PARAMS } from "./hooks/useDuoTone"; -export { useFogProjection, FOGPROJECTION_PARAMS } from "./hooks/useFogProjection"; -export { useFluid, FLUID_PARAMS } from "./hooks/useFluid"; -export { useRipple, RIPPLE_PARAMS } from "./hooks/useRipple"; -export { useTransitionBg, TRANSITIONBG_PARAMS } from "./hooks/useTransitionBg"; -export { useNoise, NOISE_PARAMS } from "./hooks/useNoise"; diff --git a/packages/use-shader-fx/types/utils/setUniforms.d.ts b/packages/use-shader-fx/types/utils/setUniforms.d.ts deleted file mode 100644 index aed67f45..00000000 --- a/packages/use-shader-fx/types/utils/setUniforms.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -type UniformValue = THREE.CubeTexture | THREE.Texture | Int32Array | Float32Array | THREE.Matrix4 | THREE.Matrix3 | THREE.Quaternion | THREE.Vector4 | THREE.Vector3 | THREE.Vector2 | THREE.Color | number | boolean | Array | null; -type UniformObject = { - [key: string]: { - value: UniformValue; - }; -}; -export declare const setUniform: (material: { - uniforms: T; -}, key: keyof T, value: UniformValue) => void; -export {}; diff --git a/packages/use-shader-fx/types/utils/types/index.d.ts b/packages/use-shader-fx/types/utils/types/index.d.ts deleted file mode 100644 index ae4a4c8e..00000000 --- a/packages/use-shader-fx/types/utils/types/index.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Size } from "@react-three/fiber"; -import * as THREE from "three"; -export type DoubleRenderTarget = { - read: THREE.WebGLRenderTarget | null; - write: THREE.WebGLRenderTarget | null; -}; -export type UseFboProps = { - scene: THREE.Scene; - camera: THREE.Camera; - size: Size; - /** If dpr is set, dpr will be multiplied, default:false */ - dpr?: number | false; - /** Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false */ - isSizeUpdate?: boolean; -}; diff --git a/packages/use-shader-fx/types/utils/useAddMesh.d.ts b/packages/use-shader-fx/types/utils/useAddMesh.d.ts deleted file mode 100644 index 04b96f7f..00000000 --- a/packages/use-shader-fx/types/utils/useAddMesh.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as THREE from "three"; -/** Generate mesh from geometry and material and add to scene */ -export declare const useAddMesh: (scene: THREE.Scene, geometry: THREE.BufferGeometry, material: THREE.Material) => THREE.Mesh, THREE.Material>; diff --git a/packages/use-shader-fx/types/utils/useCamera.d.ts b/packages/use-shader-fx/types/utils/useCamera.d.ts deleted file mode 100644 index acd518d4..00000000 --- a/packages/use-shader-fx/types/utils/useCamera.d.ts +++ /dev/null @@ -1,3 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -export declare const useCamera: (size: Size) => THREE.OrthographicCamera; diff --git a/packages/use-shader-fx/types/utils/useDoubleFBO.d.ts b/packages/use-shader-fx/types/utils/useDoubleFBO.d.ts deleted file mode 100644 index 421b979f..00000000 --- a/packages/use-shader-fx/types/utils/useDoubleFBO.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as THREE from "three"; -import { UseFboProps } from "./types"; -type FBOUpdateFunction = (gl: THREE.WebGLRenderer, -/** call before FBO is rendered */ -onBeforeRender?: ({ read, write, }: { - read: THREE.Texture; - write: THREE.Texture; -}) => void) => THREE.Texture; -type UseDoubleFBOReturn = [ - { - read: THREE.WebGLRenderTarget; - write: THREE.WebGLRenderTarget; - }, - FBOUpdateFunction -]; -/** - * @param dpr If dpr is set, dpr will be multiplied, default:false - * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false - * @returns [{read:THREE.WebGLRenderTarget,write:THREE.WebGLRenderTarget} , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument. - */ -export declare const useDoubleFBO: ({ scene, camera, size, dpr, isSizeUpdate, }: UseFboProps) => UseDoubleFBOReturn; -export {}; diff --git a/packages/use-shader-fx/types/utils/useParams.d.ts b/packages/use-shader-fx/types/utils/useParams.d.ts deleted file mode 100644 index 72c28355..00000000 --- a/packages/use-shader-fx/types/utils/useParams.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -type UseParamsReturn = [T, (params: Partial) => void]; -/** - * @param params Receives an initial value object. With structuredClone, deep copy and set, but if the object contains a function, just set it. - */ -export declare const useParams: (params: T) => UseParamsReturn; -export {}; diff --git a/packages/use-shader-fx/types/utils/usePointer.d.ts b/packages/use-shader-fx/types/utils/usePointer.d.ts deleted file mode 100644 index 45699a33..00000000 --- a/packages/use-shader-fx/types/utils/usePointer.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as THREE from "three"; -type UpdatePointer = (currentPointer: THREE.Vector2) => { - currentPointer: THREE.Vector2; - prevPointer: THREE.Vector2; - diffPointer: THREE.Vector2; - velocity: THREE.Vector2; - isVelocityUpdate: boolean; -}; -/** When given the pointer vector2 from r3f's RootState, it generates an update function that returns {currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}. */ -export declare const usePointer: () => UpdatePointer; -export {}; diff --git a/packages/use-shader-fx/types/utils/useResolution.d.ts b/packages/use-shader-fx/types/utils/useResolution.d.ts deleted file mode 100644 index 7216df87..00000000 --- a/packages/use-shader-fx/types/utils/useResolution.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -import * as THREE from "three"; -import { Size } from "@react-three/fiber"; -/** - * @params dpr if dpr is set, it returns the resolution which is size multiplied by dpr. - */ -export declare const useResolution: (size: Size, dpr?: number | false) => THREE.Vector2; diff --git a/packages/use-shader-fx/types/utils/useSingleFBO.d.ts b/packages/use-shader-fx/types/utils/useSingleFBO.d.ts deleted file mode 100644 index 15938c6f..00000000 --- a/packages/use-shader-fx/types/utils/useSingleFBO.d.ts +++ /dev/null @@ -1,22 +0,0 @@ -import * as THREE from "three"; -import { UseFboProps } from "./types"; -export declare const FBO_OPTION: { - minFilter: 1006; - magFilter: 1006; - type: 1016; - depthBuffer: boolean; - stencilBuffer: boolean; -}; -type FBOUpdateFunction = (gl: THREE.WebGLRenderer, -/** call before FBO is rendered */ -onBeforeRender?: ({ read }: { - read: THREE.Texture; -}) => void) => THREE.Texture; -type UseSingleFBOReturn = [THREE.WebGLRenderTarget, FBOUpdateFunction]; -/** - * @param dpr If dpr is set, dpr will be multiplied, default:false - * @param isSizeUpdate Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false - * @returns [THREE.WebGLRenderTarget , updateFBO] -Receives the RenderTarget as the first argument and the update function as the second argument. - */ -export declare const useSingleFBO: ({ scene, camera, size, dpr, isSizeUpdate, }: UseFboProps) => UseSingleFBOReturn; -export {}; diff --git a/tsconfig.json b/tsconfig.json index dc5ba4bc..e11bd808 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,6 +2,7 @@ "compilerOptions": { "target": "es5", "lib": ["dom", "dom.iterable", "esnext"], + "downlevelIteration": true, "allowJs": true, "skipLibCheck": true, "strict": true, diff --git a/utils/fxMaterial.tsx b/utils/fxMaterial.tsx index 3a742066..00581514 100644 --- a/utils/fxMaterial.tsx +++ b/utils/fxMaterial.tsx @@ -11,11 +11,14 @@ declare global { export type FxMaterialProps = { u_fx: THREE.Texture | null; + /** Set it to 0.0 if you want it to be transparent. */ + u_alpha: number | null; }; export const FxMaterial = shaderMaterial( { u_fx: null, + u_alpha: 1.0, }, ` varying vec2 vUv; @@ -28,11 +31,14 @@ export const FxMaterial = shaderMaterial( precision highp float; varying vec2 vUv; uniform sampler2D u_fx; + uniform float u_alpha; void main() { vec2 uv = vUv; gl_FragColor = texture2D(u_fx, uv); - gl_FragColor.a = 1.0; + if(u_alpha > 0.0){ + gl_FragColor.a = u_alpha; + } } ` );