little refactoring

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

@@ -479,7 +479,7 @@ float warp(vec2 x, float g,float time){
 void main() {
 	float noise = warp(gl_FragCoord.xy * scale ,warpStrength,uTime * timeStrength);
 	gl_FragColor = vec4(vec3(noise),1.0);
-}`;const Je=t=>{const s=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),o=u.useMemo(()=>new n.ShaderMaterial({uniforms:{uTime:{value:0},scale:{value:0},timeStrength:{value:0},noiseOctaves:{value:0},fbmOctaves:{value:0},warpOctaves:{value:0},warpDirection:{value:new n.Vector2},warpStrength:{value:0}},vertexShader:Ke,fragmentShader:Ze}),[]);return U(t,s,o),o},ee={scale:.004,timeStrength:.3,noiseOctaves:2,fbmOctaves:2,warpOctaves:2,warpDirection:new n.Vector2(2,2),warpStrength:8},Qe=({size:t,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=Je(a),l=b(t),[v,f]=C({scene:a,camera:l,size:t,dpr:s,samples:o}),[r,c]=D(ee);return[u.useCallback((p,d)=>{const{gl:g,clock:h}=p;return d&&c(d),i(e,"scale",r.scale),i(e,"timeStrength",r.timeStrength),i(e,"noiseOctaves",r.noiseOctaves),i(e,"fbmOctaves",r.fbmOctaves),i(e,"warpOctaves",r.warpOctaves),i(e,"warpDirection",r.warpDirection),i(e,"warpStrength",r.warpStrength),i(e,"uTime",h.getElapsedTime()),f(g)},[f,e,c,r]),c,{scene:a,material:e,camera:l,renderTarget:v,output:v.texture}]},W=process.env.NODE_ENV==="development",en=t=>{var e,l,v;const s=(e=t.dom)==null?void 0:e.length,o=(l=t.texture)==null?void 0:l.length,a=(v=t.resolution)==null?void 0:v.length;return!s||!o||!a?(W&&console.warn("No dom or texture or resolution is set"),!1):s!==o||s!==a?(W&&console.warn("not Match dom , texture and resolution length"),!1):!0};var nn=`varying vec2 vUv;
+}`;const Je=t=>{const s=u.useMemo(()=>new n.PlaneGeometry(2,2),[]),o=u.useMemo(()=>new n.ShaderMaterial({uniforms:{uTime:{value:0},scale:{value:0},timeStrength:{value:0},noiseOctaves:{value:0},fbmOctaves:{value:0},warpOctaves:{value:0},warpDirection:{value:new n.Vector2},warpStrength:{value:0}},vertexShader:Ke,fragmentShader:Ze}),[]);return U(t,s,o),o},ee={scale:.004,timeStrength:.3,noiseOctaves:2,fbmOctaves:2,warpOctaves:2,warpDirection:new n.Vector2(2,2),warpStrength:8},Qe=({size:t,dpr:s,samples:o=0})=>{const a=u.useMemo(()=>new n.Scene,[]),e=Je(a),l=b(t),[v,f]=C({scene:a,camera:l,size:t,dpr:s,samples:o}),[r,c]=D(ee);return[u.useCallback((p,d)=>{const{gl:g,clock:h}=p;return d&&c(d),i(e,"scale",r.scale),i(e,"timeStrength",r.timeStrength),i(e,"noiseOctaves",r.noiseOctaves),i(e,"fbmOctaves",r.fbmOctaves),i(e,"warpOctaves",r.warpOctaves),i(e,"warpDirection",r.warpDirection),i(e,"warpStrength",r.warpStrength),i(e,"uTime",h.getElapsedTime()),f(g)},[f,e,c,r]),c,{scene:a,material:e,camera:l,renderTarget:v,output:v.texture}]},W=process.env.NODE_ENV==="development",en=t=>{var e,l,v;const s=(e=t.dom)==null?void 0:e.length,o=(l=t.texture)==null?void 0:l.length,a=(v=t.resolution)==null?void 0:v.length;return!s||!o||!a?(W&&console.warn("No dom or texture or resolution is set"),!0):s!==o||s!==a?(W&&console.warn("not Match dom , texture and resolution length"),!0):!1};var nn=`varying vec2 vUv;
 
 void main() {
 	vUv = uv;
@@ -527,7 +527,7 @@ void main() {
 	alpha *= textureAlpha;
 
 	gl_FragColor = vec4(textureColor, alpha);
-}`;const rn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(a=>{a instanceof n.Mesh&&(a.geometry.dispose(),a.material.dispose())}),o.remove(...o.children)),t.texture.forEach((a,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:nn,fragmentShader:tn,transparent:!0,uniforms:{u_texture:{value:a},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},on=()=>{const t=u.useRef([]),s=u.useRef([]);return u.useCallback(({isIntersectingRef:a,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((f,r)=>{f.unobserve(s.current[r])}),s.current=[],t.current=[];const v=new Array(l.dom.length).fill(!1);a.current=[...v],e.current=[...v],l.dom.forEach((f,r)=>{const c=p=>{p.forEach(d=>{l.onIntersect[r]&&l.onIntersect[r](d),a.current[r]=d.isIntersecting})},m=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});m.observe(f),t.current.push(m),s.current.push(f)})},[])},un=()=>{const t=u.useRef([]),s=u.useCallback(({params:o,size:a,resolutionRef:e,scene:l,isIntersectingRef:v})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((f,r)=>{const c=o.dom[r];if(!c){W&&console.warn("DOM is null.");return}const m=c.getBoundingClientRect();if(t.current[r]=m,f.scale.set(m.width,m.height,1),f.position.set(m.left+m.width*.5-a.width*.5,-m.top-m.height*.5+a.height*.5,0),v.current[r]&&(o.rotation[r]&&f.rotation.copy(o.rotation[r]),f instanceof n.Mesh)){const p=f.material;i(p,"u_texture",o.texture[r]),i(p,"u_textureResolution",o.resolution[r]),i(p,"u_resolution",e.current.set(m.width,m.height)),i(p,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=u.useRef([]),s=u.useRef([]),o=u.useCallback((a,e=!1)=>{t.current.forEach((v,f)=>{v&&(s.current[f]=!0)});const l=e?[...s.current]:[...t.current];return a<0?l:l[a]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},sn=t=>({onView:o,onHidden:a})=>{const e=u.useRef(!1);u.useEffect(()=>{let l;const v=()=>{t.current.some(f=>f)?e.current||(o&&o(),e.current=!0):e.current&&(a&&a(),e.current=!1),l=requestAnimationFrame(v)};return l=requestAnimationFrame(v),()=>{cancelAnimationFrame(l)}},[o,a])},ne={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},ln=({size:t,dpr:s,samples:o=0},a=[],e)=>{const l=u.useMemo(()=>new n.Scene,[]),v=b(t),[f,r]=C({scene:l,camera:v,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[c,m]=D({...ne,updateKey:e}),[p,d]=un(),g=u.useRef(new n.Vector2(0,0)),[h,y]=u.useState(!0);u.useEffect(()=>{y(!0)},a);const M=u.useRef(null),_=u.useMemo(()=>new n.Texture,[]),T=on(),{isIntersectingOnceRef:P,isIntersectingRef:A,isIntersecting:E}=an(),R=sn(A);return[u.useCallback((z,k)=>{const{gl:j,size:V}=z;if(k&&m(k),!en(c))return _;if(h){if(M.current===c.updateKey)return _;M.current=c.updateKey}return h&&(rn({params:c,size:V,scene:l}),T({isIntersectingRef:A,isIntersectingOnceRef:P,params:c}),y(!1)),d({params:c,size:V,resolutionRef:g,scene:l,isIntersectingRef:A}),r(j)},[r,m,T,d,h,l,c,P,A,_]),m,{scene:l,camera:v,renderTarget:f,output:f.texture,isIntersecting:E,DOMRects:p,intersections:A.current,useDomView:R}]};var cn=`precision mediump float;
+}`;const rn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(a=>{a instanceof n.Mesh&&(a.geometry.dispose(),a.material.dispose())}),o.remove(...o.children)),t.texture.forEach((a,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:nn,fragmentShader:tn,transparent:!0,uniforms:{u_texture:{value:a},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},on=()=>{const t=u.useRef([]),s=u.useRef([]);return u.useCallback(({isIntersectingRef:a,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((f,r)=>{f.unobserve(s.current[r])}),s.current=[],t.current=[];const v=new Array(l.dom.length).fill(!1);a.current=[...v],e.current=[...v],l.dom.forEach((f,r)=>{const c=p=>{p.forEach(d=>{l.onIntersect[r]&&l.onIntersect[r](d),a.current[r]=d.isIntersecting})},m=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});m.observe(f),t.current.push(m),s.current.push(f)})},[])},un=()=>{const t=u.useRef([]),s=u.useCallback(({params:o,size:a,resolutionRef:e,scene:l,isIntersectingRef:v})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((f,r)=>{const c=o.dom[r];if(!c){W&&console.warn("DOM is null.");return}const m=c.getBoundingClientRect();if(t.current[r]=m,f.scale.set(m.width,m.height,1),f.position.set(m.left+m.width*.5-a.width*.5,-m.top-m.height*.5+a.height*.5,0),v.current[r]&&(o.rotation[r]&&f.rotation.copy(o.rotation[r]),f instanceof n.Mesh)){const p=f.material;i(p,"u_texture",o.texture[r]),i(p,"u_textureResolution",o.resolution[r]),i(p,"u_resolution",e.current.set(m.width,m.height)),i(p,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=u.useRef([]),s=u.useRef([]),o=u.useCallback((a,e=!1)=>{t.current.forEach((v,f)=>{v&&(s.current[f]=!0)});const l=e?[...s.current]:[...t.current];return a<0?l:l[a]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},sn=t=>({onView:o,onHidden:a})=>{const e=u.useRef(!1);u.useEffect(()=>{let l;const v=()=>{t.current.some(f=>f)?e.current||(o&&o(),e.current=!0):e.current&&(a&&a(),e.current=!1),l=requestAnimationFrame(v)};return l=requestAnimationFrame(v),()=>{cancelAnimationFrame(l)}},[o,a])},ne={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},ln=({size:t,dpr:s,samples:o=0},a=[],e)=>{const l=u.useMemo(()=>new n.Scene,[]),v=b(t),[f,r]=C({scene:l,camera:v,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[c,m]=D({...ne,updateKey:e}),[p,d]=un(),g=u.useRef(new n.Vector2(0,0)),[h,y]=u.useState(!0);u.useEffect(()=>{y(!0)},a);const M=u.useRef(null),_=u.useMemo(()=>new n.Texture,[]),T=on(),{isIntersectingOnceRef:P,isIntersectingRef:A,isIntersecting:E}=an(),R=sn(A);return[u.useCallback((z,k)=>{const{gl:j,size:V}=z;if(k&&m(k),en(c))return _;if(h){if(M.current===c.updateKey)return _;M.current=c.updateKey}return h&&(rn({params:c,size:V,scene:l}),T({isIntersectingRef:A,isIntersectingOnceRef:P,params:c}),y(!1)),d({params:c,size:V,resolutionRef:g,scene:l,isIntersectingRef:A}),r(j)},[r,m,T,d,h,l,c,P,A,_]),m,{scene:l,camera:v,renderTarget:f,output:f.texture,isIntersecting:E,DOMRects:p,intersections:A.current,useDomView:R}]};var cn=`precision mediump float;
 
 varying vec2 vUv;
 

packages/use-shader-fx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.46",
+   "version": "1.0.47",
    "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/src/hooks/useDomSyncer/index.ts

@@ -113,7 +113,7 @@ export const useDomSyncer = (
 
          updateParams && setParams(updateParams);
 
-         if (!errorHandler(params)) {
+         if (errorHandler(params)) {
             return emptyTexture;
          }
 

packages/use-shader-fx/src/hooks/useDomSyncer/utils/errorHandler.ts

@@ -8,13 +8,13 @@ export const errorHandler = (params: DomSyncerParams) => {
 
    if (!domLength || !textureLength || !resolutionLength) {
       ISDEV && console.warn("No dom or texture or resolution is set");
-      return false;
+      return true;
    }
 
    if (domLength !== textureLength || domLength !== resolutionLength) {
       ISDEV && console.warn("not Match dom , texture and resolution length");
-      return false;
+      return true;
    }
 
-   return true;
+   return false;
 };