npm install @funtech-inc/use-shader-fx

Click for the demo! 🤩

Hooks Index

FXs

Misc

Usage

const[updateFx,updateParams,fxObject]=useSomeFx(HooksProps);

useFrame((rootState)=>{consttexture=updateFx(rootState,HookParams,CustomParams);});

Starter template with Next.js + TypeScript 🎨

The simplest example

import*asTHREEfrom"three";import{useRef}from"react";import{useFrame,useThree}from"@react-three/fiber";import{useFluid}from"@funtech-inc/use-shader-fx";exportconstHome=()=>{const{ size}=useThree();const[updateFluid,,{ output}]=useFluid({size:{width:size.width,height:size.height,},dpr:1,});useFrame((rootState)=>updateFluid(rootState));return(<mesh><boxGeometryargs={[3,3,3]}/><meshStandardMaterialmap={output}roughness={0.05}metalness={0.4}/></mesh>);};

Integrate with r3f scenes.

import*asTHREEfrom"three";import{useMemo,useRef,useState}from"react";import{useFrame,useThree,createPortal}from"@react-three/fiber";import{useNoise,useSingleFBO}from"@hmng8/use-shader-fx";functionBox(props:any){// This reference will give us direct access to the meshconstmeshRef=useRef<THREE.Mesh>();// Set up state for the hovered and active stateconst[hovered,setHover]=useState(false);const[active,setActive]=useState(false);// Subscribe this component to the render-loop, rotate the mesh every frameuseFrame((state,delta)=>{meshRef.current!.rotation.x+=delta;meshRef.current!.rotation.y-=delta;});// Return view, these are regular three.js elements expressed in JSXreturn(<mesh{...props}ref={meshRef}scale={active ?2 :1.5}onClick={(event)=>setActive(!active)}onPointerOver={(event)=>setHover(true)}onPointerOut={(event)=>setHover(false)}><boxGeometryargs={[1,1,1]}/><meshStandardMaterialcolor={hovered ?"hotpink" :"orange"}/></mesh>);}exportconstHome=()=>{constref=useRef<THREE.ShaderMaterial>(null);const{ size, viewport, camera}=useThree();const[updateNoise,,{ output}]=useNoise({      size,dpr:viewport.dpr,});// This scene is rendered offscreenconstoffscreenScene=useMemo(()=>newTHREE.Scene(),[]);// create FBO for offscreen renderingconst[boxView,updateRenderTarget]=useSingleFBO({scene:offscreenScene,      camera,      size,dpr:viewport.dpr,});useFrame((rootState)=>{updateNoise(rootState);updateRenderTarget(rootState.gl);});return(<>{createPortal(<mesh><ambientLightintensity={Math.PI}/><spotLightposition={[10,10,10]}angle={0.15}penumbra={1}decay={0}intensity={Math.PI}/><pointLightposition={[-10,-10,-10]}decay={0}intensity={Math.PI}/><Boxposition={[-1.5,0,0]}/><Boxposition={[1.5,0,0]}/></mesh>,offscreenScene)}<mesh><planeGeometryargs={[2,2]}/><shaderMaterialref={ref}transparentvertexShader={`varying vec2 vUv;void main() {vUv = uv;gl_Position = vec4(position, 1.0);}`}fragmentShader={`precision highp float;varying vec2 vUv;uniform sampler2D u_fx;uniform sampler2D u_texture;void main() {vec2 uv = vUv;vec3 noiseMap = texture2D(u_fx, uv).rgb;vec3 nNoiseMap = noiseMap * 2.0 - 1.0;uv = uv * 2.0 - 1.0;uv *= mix(vec2(1.0), abs(nNoiseMap.rg), .6);uv = (uv + 1.0) / 2.0;gl_FragColor = texture2D(u_texture, uv);}`}uniforms={{u_texture:{value:boxView.texture},u_fx:{value:output},}}/></mesh></>);};

Performance

exportconstFx=()=>{const[dpr,setDpr]=useState(1.5);return(<Canvasdpr={dpr}><PerformanceMonitorfactor={1}onChange={({ factor})=>{console.log(`dpr:${dpr}`);setDpr(Math.round((0.5+1.5*factor)*10)/10);}}><Suspensefallback={null}><Scene/></Suspense><Perfposition={"bottom-right"}minimal={false}/></PerformanceMonitor></Canvas>);};

usePerformanceMonitor({onChange({ factor}){setParams({pressure_iterations:Math.round(20*factor),});},});

const[updateFx,setParams,fxObject]=useSomeFx({ size,dpr:0.01});

typeDpr=|number|{/** you can set whether `dpr` affects `shader`. default : `false` */shader?:false|number;/** you can set whether `dpr` affects `fbo`. default : `false` */fbo?:false|number;};

Misc

useDomSyncer

const[updateDomSyncer,setDomSyncer,domSyncerObj]=useDomSyncer({ size, dpr},[state]);useLayoutEffect(()=>{if(state===0){domArr.current=[...document.querySelectorAll(".item")!];}else{domArr.current=[...document.querySelectorAll(".item2")!];}setDomSyncer({// Because DOM rendering and React updates occur asynchronously, there may be a lag between updating dependent arrays and setting DOM arrays. That's what the Key is for. If the dependent array is updated but the Key is not, the loop will skip and return an empty texture. By updating the timing key when DOM acquisition is complete, you can perfectly synchronize DOM and Mesh updates.updateKey must be a unique value for each update, for example `performance.now()updateKey:performance.now(),dom:domArr.current,boderRadius:[...Array(domArr.current.length)].map((_,i)=>i*50.0),onIntersect:[...Array(domArr.current.length)].map((_,i)=>(entry)=>{if(entry.isIntersecting&&!domSyncerObj.isIntersecting(i,true)){// some callback}}),});},[state]);const[,copyTexture]=useCopyTexture({scene:fxTextureObj.scene,camera:fxTextureObj.camera, size, dpr},domArr.current.length);useFrame((rootState)=>{constsyncedTexture=updateDomSyncer(rootState,{texture:[...Array(domArr.current.length)].map((_,i)=>{if(domSyncerObj.isIntersecting(i,false)){textureRef.current=updateFxTexture(rootState,{map:someFx,texture0:someTexture,});returncopyTexture(rootState.gl,i);}}),});});

typeDomSyncerObject={scene:THREE.Scene;camera:THREE.Camera;renderTarget:THREE.WebGLRenderTarget;output:THREE.Texture;/**    * A function that returns a determination whether the DOM intersects or not.    * The boolean will be updated after executing the onIntersect function.    *@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;/** target's DOMRect[] */DOMRects:DOMRect[];/** target's intersetions boolean[] */intersections:boolean[];/** You can set callbacks for when at least one DOM is visible and when it is completely hidden. */useDomView:UseDomView;};

typeDomSyncerParams={/** DOM array you want to synchronize */dom?:(HTMLElement|Element|null)[];/** Texture array that you want to synchronize with the DOM rectangle */texture?:THREE.Texture[];/** default:0.0[] */boderRadius?:number[];/** the angle you want to rotate */rotation?:THREE.Euler[];/** Array of callback functions when crossed */onIntersect?:((entry:IntersectionObserverEntry)=>void)[];/** Because DOM rendering and React updates occur asynchronously, there may be a lag between updating dependent arrays and setting DOM arrays. That's what the Key is for. If the dependent array is updated but the Key is not, the loop will skip and return an empty texture. By updating the timing key when DOM acquisition is complete, you can perfectly synchronize DOM and Mesh updates. */updateKey?:Key;};

usePointer

constupdatePointer=usePointer(lerp);const{ currentPointer, prevPointer, diffPointer, isVelocityUpdate, velocity}=updatePointer(pointer);

useFrame((rootState)=>{constpointerValues=updatePointer(rootState.pointer);updateBrush(rootState,{pointerValues:pointerValues,});});

useBeat

constbeting=useBeat(bpm,"easeOutQuad");useFrame((rootState)=>{const{ beat, hash}=beting(rootState.clock);updateMarble(rootState,{beat:beat,});});

typeBeatValues={beat:number;floor:number;fract:number;/** unique hash specific to the beat */hash:number;};

useFPSLimiter

constlimiter=useFPSLimiter(30);useFrame((rootState)=>{if(!limiter(rootState.clock)){return;}});

useCopyTexture

const[renderTargets,copyTexture]=useCopyTexture(UseFboProps,length);copyTexture(gl,index);// return texture

3D

const[updateWobble,wobble]=useCreateWobble3D({baseMaterial:THREE.MeshPhysicalMaterial,materialParameters:{roughness:0.0,transmission:1,thickness:1,},});useFrame((rootState)=>updateWobble(rootState));return(<mesh><Environmentpreset="warehouse"background/><primitiveobject={wobble.mesh}/></mesh>);

useBlank / useRawBlank

const[updateBlank,_,{output:blank, material}]=useBlank({   size,dpr:viewport.dpr,onBeforeInit:useCallback((shader:OnBeforeInitParameters)=>{Object.assign(shader.uniforms,{hoge:{value:0},});shader.fragmentShader=shader.fragmentShader.replace("#usf <uniforms>","uniform float hoge;");shader.fragmentShader=shader.fragmentShader.replace("#usf <main>",`usf_FragColor=vec4(vec3(1.,hoge,1.),1.);`);},[]),});useFrame((rootState)=>{updateBlank(rootState,{},{hoge:Math.sin(rootState.clock.getElapsedTime()),});});