Merge pull request #57 from takuma-hmng8/update-FBO-utils

update FBO utils

Author: takuma-hmng8

app/_home/index.tsx

@@ -20,6 +20,7 @@ function Box(props: any) {
    useFrame((state, delta) => {
       meshRef.current!.rotation.x += delta;
       meshRef.current!.rotation.y -= delta;
+      meshRef.current!.position.y = Math.sin(state.clock.getElapsedTime());
    });
    // Return view, these are regular three.js elements expressed in JSX
    return (

packages/use-shader-fx/build/use-shader-fx.js

@@ -105,7 +105,7 @@ void main() {
 	bufferColor.rgb = mix(bufferColor.rgb, finalColor, onLine);
 	
 	gl_FragColor = vec4(bufferColor.rgb,1.0);
-}`;const F=(r,s=!1)=>{const o=s?r.width*s:r.width,a=s?r.height*s:r.height;return u.useMemo(()=>new n.Vector2(o,a),[o,a])},P=(r,s,o)=>{const a=u.useMemo(()=>new n.Mesh(s,o),[s,o]);return u.useEffect(()=>{r.add(a)},[r,a]),u.useEffect(()=>()=>{r.remove(a),s.dispose(),o.dispose()},[r,s,o,a]),a},i=(r,s,o)=>{r.uniforms&&r.uniforms[s]&&o!==void 0&&o!==null?r.uniforms[s].value=o:console.error(`Uniform key "${String(s)}" does not exist in the material. or "${String(s)}" is null | undefined`)},ve=({scene:r,size:s,dpr:o})=>{const a=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),e=u.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:le,fragmentShader:ce}),[]),l=F(s,o);return u.useEffect(()=>{i(e,"uAspect",l.width/l.height),i(e,"uResolution",l.clone())},[l,e]),P(r,a,e),e},fe=(r,s)=>{const o=s,a=r/s,[e,l]=[o*a/2,o/2];return{width:e,height:l,near:-1e3,far:1e3}},b=r=>{const s=F(r),{width:o,height:a,near:e,far:l}=fe(s.x,s.y);return u.useMemo(()=>new n.OrthographicCamera(-o,o,a,-a,e,l),[o,a,e,l])},$=()=>{const r=u.useRef(new n.Vector2(0,0)),s=u.useRef(new n.Vector2(0,0)),o=u.useRef(0),a=u.useRef(new n.Vector2(0,0)),e=u.useRef(!1);return u.useCallback(d=>{const f=performance.now(),t=d.clone();o.current===0&&(o.current=f,r.current=t);const c=Math.max(1,f-o.current);o.current=f,a.current.copy(t).sub(r.current).divideScalar(c);const p=a.current.length()>0,m=e.current?r.current.clone():t;return!e.current&&p&&(e.current=!0),r.current=t,{currentPointer:t,prevPointer:m,diffPointer:s.current.subVectors(t,m),velocity:a.current,isVelocityUpdate:p}},[])},C=r=>{const s=e=>Object.values(e).some(l=>typeof l=="function"),o=u.useRef(s(r)?r:structuredClone(r)),a=u.useCallback(e=>{for(const l in e){const d=l;d in o.current&&e[d]!==void 0&&e[d]!==null?o.current[d]=e[d]:console.error(`"${String(d)}" does not exist in the params. or "${String(d)}" is null | undefined`)}},[]);return[o.current,a]},N={minFilter:n.LinearFilter,magFilter:n.LinearFilter,type:n.HalfFloatType,stencilBuffer:!1},D=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1})=>{const t=u.useRef(),c=F(o,a);t.current=u.useMemo(()=>{const m=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d});return f&&(m.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType)),m},[]),u.useLayoutEffect(()=>{var m;e&&((m=t.current)==null||m.setSize(c.x,c.y))},[c,e]),u.useEffect(()=>{const m=t.current;return()=>{m==null||m.dispose()}},[]);const p=u.useCallback((m,v)=>{const g=t.current;return m.setRenderTarget(g),v&&v({read:g.texture}),m.render(r,s),m.setRenderTarget(null),m.clear(),g.texture},[r,s]);return[t.current,p]},I=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1})=>{const t=u.useRef({read:null,write:null,swap:function(){let v=this.read;this.read=this.write,this.write=v}}),c=F(o,a),p=u.useMemo(()=>{const v=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d}),g=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d});return f&&(v.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType),g.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType)),{read:v,write:g}},[]);t.current.read=p.read,t.current.write=p.write,u.useLayoutEffect(()=>{var v,g;e&&((v=t.current.read)==null||v.setSize(c.x,c.y),(g=t.current.write)==null||g.setSize(c.x,c.y))},[c,e]),u.useEffect(()=>{const v=t.current;return()=>{var g,h;(g=v.read)==null||g.dispose(),(h=v.write)==null||h.dispose()}},[]);const m=u.useCallback((v,g)=>{var y;const h=t.current;return v.setRenderTarget(h.write),g&&g({read:h.read.texture,write:h.write.texture}),v.render(r,s),h.swap(),v.setRenderTarget(null),v.clear(),(y=h.read)==null?void 0:y.texture},[r,s]);return[{read:t.current.read,write:t.current.write},m]},W={texture:new n.Texture,radius:.05,smudge:0,dissipation:1,motionBlur:0,motionSample:5,color:new n.Color(16777215)},de=({size:r,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=ve({scene:a,size:r,dpr:s}),l=b(r),d=$(),[f,t]=I({scene:a,camera:l,size:r,dpr:s,samples:o}),[c,p]=C(W);return[u.useCallback((v,g)=>{const{gl:h,pointer:y}=v;g&&p(g),i(e,"uTexture",c.texture),i(e,"uRadius",c.radius),i(e,"uSmudge",c.smudge),i(e,"uDissipation",c.dissipation),i(e,"uMotionBlur",c.motionBlur),i(e,"uMotionSample",c.motionSample),i(e,"uColor",c.color);const{currentPointer:M,prevPointer:w,velocity:T}=d(y);return i(e,"uMouse",M),i(e,"uPrevMouse",w),i(e,"uVelocity",T),t(h,({read:U})=>{i(e,"uMap",U)})},[e,d,t,c,p]),p,{scene:a,material:e,camera:l,renderTarget:f}]};var me=`varying vec2 vUv;
+}`;const F=(r,s=!1)=>{const o=s?r.width*s:r.width,a=s?r.height*s:r.height;return u.useMemo(()=>new n.Vector2(o,a),[o,a])},P=(r,s,o)=>{const a=u.useMemo(()=>new n.Mesh(s,o),[s,o]);return u.useEffect(()=>{r.add(a)},[r,a]),u.useEffect(()=>()=>{r.remove(a),s.dispose(),o.dispose()},[r,s,o,a]),a},i=(r,s,o)=>{r.uniforms&&r.uniforms[s]&&o!==void 0&&o!==null?r.uniforms[s].value=o:console.error(`Uniform key "${String(s)}" does not exist in the material. or "${String(s)}" is null | undefined`)},ve=({scene:r,size:s,dpr:o})=>{const a=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),e=u.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:le,fragmentShader:ce}),[]),l=F(s,o);return u.useEffect(()=>{i(e,"uAspect",l.width/l.height),i(e,"uResolution",l.clone())},[l,e]),P(r,a,e),e},fe=(r,s)=>{const o=s,a=r/s,[e,l]=[o*a/2,o/2];return{width:e,height:l,near:-1e3,far:1e3}},b=r=>{const s=F(r),{width:o,height:a,near:e,far:l}=fe(s.x,s.y);return u.useMemo(()=>new n.OrthographicCamera(-o,o,a,-a,e,l),[o,a,e,l])},$=()=>{const r=u.useRef(new n.Vector2(0,0)),s=u.useRef(new n.Vector2(0,0)),o=u.useRef(0),a=u.useRef(new n.Vector2(0,0)),e=u.useRef(!1);return u.useCallback(d=>{const f=performance.now(),t=d.clone();o.current===0&&(o.current=f,r.current=t);const c=Math.max(1,f-o.current);o.current=f,a.current.copy(t).sub(r.current).divideScalar(c);const p=a.current.length()>0,m=e.current?r.current.clone():t;return!e.current&&p&&(e.current=!0),r.current=t,{currentPointer:t,prevPointer:m,diffPointer:s.current.subVectors(t,m),velocity:a.current,isVelocityUpdate:p}},[])},C=r=>{const s=e=>Object.values(e).some(l=>typeof l=="function"),o=u.useRef(s(r)?r:structuredClone(r)),a=u.useCallback(e=>{for(const l in e){const d=l;d in o.current&&e[d]!==void 0&&e[d]!==null?o.current[d]=e[d]:console.error(`"${String(d)}" does not exist in the params. or "${String(d)}" is null | undefined`)}},[]);return[o.current,a]},N={minFilter:n.LinearFilter,magFilter:n.LinearFilter,type:n.HalfFloatType,stencilBuffer:!1},D=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1})=>{const t=u.useRef(),c=F(o,a);t.current=u.useMemo(()=>{const m=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d});return f&&(m.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType)),m},[]),u.useLayoutEffect(()=>{var m;e&&((m=t.current)==null||m.setSize(c.x,c.y))},[c,e]),u.useEffect(()=>{const m=t.current;return()=>{m==null||m.dispose()}},[]);const p=u.useCallback((m,v)=>{const g=t.current;return m.setRenderTarget(g),v&&v({read:g.texture}),m.clear(),m.render(r,s),m.setRenderTarget(null),m.clear(),g.texture},[r,s]);return[t.current,p]},I=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1})=>{const t=u.useRef({read:null,write:null,swap:function(){let v=this.read;this.read=this.write,this.write=v}}),c=F(o,a),p=u.useMemo(()=>{const v=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d}),g=new n.WebGLRenderTarget(c.x,c.y,{...N,samples:l,depthBuffer:d});return f&&(v.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType),g.depthTexture=new n.DepthTexture(c.x,c.y,n.FloatType)),{read:v,write:g}},[]);t.current.read=p.read,t.current.write=p.write,u.useLayoutEffect(()=>{var v,g;e&&((v=t.current.read)==null||v.setSize(c.x,c.y),(g=t.current.write)==null||g.setSize(c.x,c.y))},[c,e]),u.useEffect(()=>{const v=t.current;return()=>{var g,h;(g=v.read)==null||g.dispose(),(h=v.write)==null||h.dispose()}},[]);const m=u.useCallback((v,g)=>{var y;const h=t.current;return v.setRenderTarget(h.write),g&&g({read:h.read.texture,write:h.write.texture}),v.clear(),v.render(r,s),h.swap(),v.setRenderTarget(null),v.clear(),(y=h.read)==null?void 0:y.texture},[r,s]);return[{read:t.current.read,write:t.current.write},m]},W={texture:new n.Texture,radius:.05,smudge:0,dissipation:1,motionBlur:0,motionSample:5,color:new n.Color(16777215)},de=({size:r,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=ve({scene:a,size:r,dpr:s}),l=b(r),d=$(),[f,t]=I({scene:a,camera:l,size:r,dpr:s,samples:o}),[c,p]=C(W);return[u.useCallback((v,g)=>{const{gl:h,pointer:y}=v;g&&p(g),i(e,"uTexture",c.texture),i(e,"uRadius",c.radius),i(e,"uSmudge",c.smudge),i(e,"uDissipation",c.dissipation),i(e,"uMotionBlur",c.motionBlur),i(e,"uMotionSample",c.motionSample),i(e,"uColor",c.color);const{currentPointer:M,prevPointer:w,velocity:T}=d(y);return i(e,"uMouse",M),i(e,"uPrevMouse",w),i(e,"uVelocity",T),t(h,({read:U})=>{i(e,"uMap",U)})},[e,d,t,c,p]),p,{scene:a,material:e,camera:l,renderTarget:f}]};var me=`varying vec2 vUv;
 
 void main() {
 	vUv = uv;
@@ -697,5 +697,5 @@ void main() {
 	uv = (uv + 1.0) / 2.0;
 
 	gl_FragColor = texture2D(u_texture, uv);
-}`;const Rn=r=>{const s=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),o=u.useMemo(()=>new n.ShaderMaterial({uniforms:{u_texture:{value:new n.Texture},u_map:{value:new n.Texture},u_mapIntensity:{value:0}},vertexShader:wn,fragmentShader:_n}),[]);return P(r,s,o),o},re={texture:new n.Texture,map:new n.Texture,mapIntensity:.3},bn=({size:r,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=Rn(a),l=b(r),[d,f]=D({scene:a,camera:l,size:r,dpr:s,samples:o}),[t,c]=C(re);return[u.useCallback((m,v)=>{const{gl:g}=m;return v&&c(v),i(e,"u_texture",t.texture),i(e,"u_map",t.map),i(e,"u_mapIntensity",t.mapIntensity),f(g)},[f,e,c,t]),c,{scene:a,material:e,camera:l,renderTarget:d}]},Cn=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1},t)=>{const c=u.useRef([]),p=F(o,a);c.current=u.useMemo(()=>Array.from({length:t},()=>{const v=new n.WebGLRenderTarget(p.x,p.y,{...N,samples:l,depthBuffer:d});return f&&(v.depthTexture=new n.DepthTexture(p.x,p.y,n.FloatType)),v}),[t]),u.useLayoutEffect(()=>{e&&c.current.forEach(v=>v.setSize(p.x,p.y))},[p,e]),u.useEffect(()=>{const v=c.current;return()=>{v.forEach(g=>g.dispose())}},[t]);const m=u.useCallback((v,g,h)=>{const y=c.current[g];return v.setRenderTarget(y),h&&h({read:y.texture}),v.render(r,s),v.setRenderTarget(null),v.clear(),y.texture},[r,s]);return[c.current,m]};x.BLENDING_PARAMS=H,x.BRIGHTNESSPICKER_PARAMS=ne,x.BRUSH_PARAMS=W,x.COLORSTRATA_PARAMS=te,x.DOMSYNCER_PARAMS=J,x.DUOTONE_PARAMS=X,x.FLUID_PARAMS=Y,x.FXBLENDING_PARAMS=re,x.FXTEXTURE_PARAMS=K,x.NOISE_PARAMS=Z,x.RIPPLE_PARAMS=q,x.SIMPLEBLUR_PARAMS=Q,x.WAVE_PARAMS=ee,x.setUniform=i,x.useAddMesh=P,x.useBlending=Te,x.useBrightnessPicker=hn,x.useBrush=de,x.useCamera=b,x.useColorStrata=Sn,x.useCopyTexture=Cn,x.useDomSyncer=un,x.useDoubleFBO=I,x.useDuoTone=xe,x.useFluid=Ne,x.useFxBlending=bn,x.useFxTexture=He,x.useNoise=Ze,x.useParams=C,x.usePointer=$,x.useResolution=F,x.useRipple=je,x.useSimpleBlur=cn,x.useSingleFBO=D,x.useWave=mn,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
+}`;const Rn=r=>{const s=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),o=u.useMemo(()=>new n.ShaderMaterial({uniforms:{u_texture:{value:new n.Texture},u_map:{value:new n.Texture},u_mapIntensity:{value:0}},vertexShader:wn,fragmentShader:_n}),[]);return P(r,s,o),o},re={texture:new n.Texture,map:new n.Texture,mapIntensity:.3},bn=({size:r,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=Rn(a),l=b(r),[d,f]=D({scene:a,camera:l,size:r,dpr:s,samples:o}),[t,c]=C(re);return[u.useCallback((m,v)=>{const{gl:g}=m;return v&&c(v),i(e,"u_texture",t.texture),i(e,"u_map",t.map),i(e,"u_mapIntensity",t.mapIntensity),f(g)},[f,e,c,t]),c,{scene:a,material:e,camera:l,renderTarget:d}]},Cn=({scene:r,camera:s,size:o,dpr:a=!1,isSizeUpdate:e=!1,samples:l=0,depthBuffer:d=!1,depthTexture:f=!1},t)=>{const c=u.useRef([]),p=F(o,a);c.current=u.useMemo(()=>Array.from({length:t},()=>{const v=new n.WebGLRenderTarget(p.x,p.y,{...N,samples:l,depthBuffer:d});return f&&(v.depthTexture=new n.DepthTexture(p.x,p.y,n.FloatType)),v}),[t]),u.useLayoutEffect(()=>{e&&c.current.forEach(v=>v.setSize(p.x,p.y))},[p,e]),u.useEffect(()=>{const v=c.current;return()=>{v.forEach(g=>g.dispose())}},[t]);const m=u.useCallback((v,g,h)=>{const y=c.current[g];return v.setRenderTarget(y),h&&h({read:y.texture}),v.clear(),v.render(r,s),v.setRenderTarget(null),v.clear(),y.texture},[r,s]);return[c.current,m]};x.BLENDING_PARAMS=H,x.BRIGHTNESSPICKER_PARAMS=ne,x.BRUSH_PARAMS=W,x.COLORSTRATA_PARAMS=te,x.DOMSYNCER_PARAMS=J,x.DUOTONE_PARAMS=X,x.FLUID_PARAMS=Y,x.FXBLENDING_PARAMS=re,x.FXTEXTURE_PARAMS=K,x.NOISE_PARAMS=Z,x.RIPPLE_PARAMS=q,x.SIMPLEBLUR_PARAMS=Q,x.WAVE_PARAMS=ee,x.setUniform=i,x.useAddMesh=P,x.useBlending=Te,x.useBrightnessPicker=hn,x.useBrush=de,x.useCamera=b,x.useColorStrata=Sn,x.useCopyTexture=Cn,x.useDomSyncer=un,x.useDoubleFBO=I,x.useDuoTone=xe,x.useFluid=Ne,x.useFxBlending=bn,x.useFxTexture=He,x.useNoise=Ze,x.useParams=C,x.usePointer=$,x.useResolution=F,x.useRipple=je,x.useSimpleBlur=cn,x.useSingleFBO=D,x.useWave=mn,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=use-shader-fx.umd.cjs.map

packages/use-shader-fx/build/use-shader-fx.js.map

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.34",
+   "version": "1.0.35",
    "description": "The only difficult part is coding the shaders",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

packages/use-shader-fx/build/use-shader-fx.umd.cjs

@@ -85,6 +85,7 @@ export const useCopyTexture = (
          const fbo = renderTargetArr.current[index];
          gl.setRenderTarget(fbo);
          onBeforeRender && onBeforeRender({ read: fbo.texture });
+         gl.clear();
          gl.render(scene, camera);
          gl.setRenderTarget(null);
          gl.clear();

packages/use-shader-fx/build/use-shader-fx.umd.cjs.map

@@ -118,6 +118,7 @@ export const useDoubleFBO = ({
                read: fbo.read!.texture,
                write: fbo.write!.texture,
             });
+         gl.clear();
          gl.render(scene, camera);
          fbo.swap();
          gl.setRenderTarget(null);

packages/use-shader-fx/node_modules/.package-lock.json

@@ -101,6 +101,7 @@ export const useSingleFBO = ({
          const fbo = renderTarget.current!;
          gl.setRenderTarget(fbo);
          onBeforeRender && onBeforeRender({ read: fbo.texture });
+         gl.clear();
          gl.render(scene, camera);
          gl.setRenderTarget(null);
          gl.clear();