domSyncerのDOMRect更新をintersect外でも実行するように変更

app/playground/Playground.tsx

@@ -22,7 +22,6 @@ import GUI from "lil-gui";
 import { useGUI } from "@/utils/useGUI";
 
 const CONFIG = {
-   noise: structuredClone(NOISE_PARAMS) as NoiseParams,
    colorStrata: {
       ...structuredClone(COLORSTRATA_PARAMS),
       laminateLayer: 20,
@@ -36,17 +35,6 @@ const CONFIG = {
 };
 
 const setGUI = (gui: GUI) => {
-   // noise
-   const noise = gui.addFolder("noise");
-   noise.add(CONFIG.noise, "scale", 0, 0.1, 0.0001);
-   noise.add(CONFIG.noise, "timeStrength", 0, 10, 0.01);
-   noise.add(CONFIG.noise, "noiseOctaves", 1, 10, 1);
-   noise.add(CONFIG.noise, "fbmOctaves", 1, 10, 1);
-   noise.add(CONFIG.noise, "warpOctaves", 1, 10, 1);
-   const warpDirection = noise.addFolder("warpDirection");
-   warpDirection.add(CONFIG.noise.warpDirection!, "x", 1, 10, 0.1);
-   warpDirection.add(CONFIG.noise.warpDirection!, "y", 1, 10, 0.1);
-   noise.add(CONFIG.noise, "warpStrength", 1, 50, 0.1);
    //color strata
    const colorStrata = gui.addFolder("colorStrata");
    colorStrata.add(CONFIG.colorStrata, "laminateLayer", 0, 20, 1);
@@ -74,7 +62,6 @@ const setGUI = (gui: GUI) => {
 
 const setConfig = () => {
    return {
-      noise: { ...CONFIG.noise },
       colorStrata: { ...CONFIG.colorStrata },
    };
 };
@@ -86,21 +73,10 @@ export const Playground = () => {
    const { size, dpr } = useThree((state) => {
       return { size: state.size, dpr: state.viewport.dpr };
    });
-   const [updateNoise] = useNoise({ size, dpr });
-   const [updateFluid] = useFluid({ size, dpr });
-   const [updateFxBlending, setFxBlending] = useFxBlending({ size, dpr });
+
    const [updateColorStrata] = useColorStrata({ size, dpr });
-   // const [updateBrightnessPicker] = useBrightnessPicker({ size, dpr });
 
    useFrame((props) => {
-      const noise = updateNoise(props, {
-         ...setConfig().noise,
-      });
-      // const fluid = updateFluid(props);
-      // const blending = updateFxBlending(props, {
-      //    texture: fluid,
-      //    map: noise,
-      // });
       const colorStrata = updateColorStrata(props, {
          ...setConfig().colorStrata,
          texture: false,

app/playground2/Playground.tsx

@@ -0,0 +1,142 @@
+"use client";
+
+import * as THREE from "three";
+import { useRef } from "react";
+import { useFrame, useThree } from "@react-three/fiber";
+import {
+   useFluid,
+   useFxBlending,
+   useColorStrata,
+} from "@/packages/use-shader-fx/src";
+import {
+   FluidParams,
+   FLUID_PARAMS,
+} from "@/packages/use-shader-fx/src/hooks/useFluid";
+import {
+   ColorStrataParams,
+   COLORSTRATA_PARAMS,
+} from "@/packages/use-shader-fx/src/hooks/useColorStrata";
+import {
+   FxBlendingParams,
+   FXBLENDING_PARAMS,
+} from "@/packages/use-shader-fx/src/hooks/useFxBlending";
+import GUI from "lil-gui";
+import { useGUI } from "@/utils/useGUI";
+
+const CONFIG = {
+   fluid: structuredClone(FLUID_PARAMS) as FluidParams,
+   colorStrata: {
+      ...structuredClone(COLORSTRATA_PARAMS),
+      laminateLayer: 20,
+      laminateInterval: new THREE.Vector2(0.1, 0.1),
+      laminateDetail: new THREE.Vector2(0.7, 0.7),
+      distortion: new THREE.Vector2(10.0, 10.0),
+      colorFactor: new THREE.Vector3(1, 1, 1),
+      timeStrength: new THREE.Vector2(1, 1),
+      noiseStrength: new THREE.Vector2(1, 1),
+   } as ColorStrataParams,
+   fxBlending: structuredClone(FXBLENDING_PARAMS) as FxBlendingParams,
+};
+
+const setGUI = (gui: GUI) => {
+   //fluid
+   const fluid = gui.addFolder("fluid");
+   fluid.add(CONFIG.fluid, "density_dissipation", 0, 1, 0.01);
+   fluid.add(CONFIG.fluid, "velocity_dissipation", 0, 1, 0.01);
+   fluid.add(CONFIG.fluid, "velocity_acceleration", 0, 100, 1);
+   fluid.add(CONFIG.fluid, "pressure_dissipation", 0, 1, 0.01);
+   fluid.add(CONFIG.fluid, "pressure_iterations", 0, 30, 1);
+   fluid.add(CONFIG.fluid, "curl_strength", 0, 100, 1);
+   fluid.add(CONFIG.fluid, "splat_radius", 0, 0.2, 0.001);
+   //color strata
+   const colorStrata = gui.addFolder("colorStrata");
+   colorStrata.add(CONFIG.colorStrata, "laminateLayer", 0, 20, 1);
+   colorStrata.add(CONFIG.colorStrata, "scale", 0, 1, 0.01);
+   const laminateInterval = colorStrata.addFolder("laminateInterval");
+   laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "x", 0, 2, 0.01);
+   laminateInterval.add(CONFIG.colorStrata.laminateInterval!, "y", 0, 2, 0.01);
+   const laminateDetail = colorStrata.addFolder("laminateDetail");
+   laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "x", 0, 10, 0.1);
+   laminateDetail.add(CONFIG.colorStrata.laminateDetail!, "y", 0, 10, 0.1);
+   const distortion = colorStrata.addFolder("distortion");
+   distortion.add(CONFIG.colorStrata.distortion!, "x", 0, 10, 0.01);
+   distortion.add(CONFIG.colorStrata.distortion!, "y", 0, 10, 0.01);
+   const colorFactor = colorStrata.addFolder("colorFactor");
+   colorFactor.add(CONFIG.colorStrata.colorFactor!, "x", 0, 10, 0.01);
+   colorFactor.add(CONFIG.colorStrata.colorFactor!, "y", 0, 10, 0.01);
+   colorFactor.add(CONFIG.colorStrata.colorFactor!, "z", 0, 10, 0.01);
+   const timeStrength = colorStrata.addFolder("timeStrength");
+   timeStrength.add(CONFIG.colorStrata.timeStrength!, "x", 0, 2, 0.01);
+   timeStrength.add(CONFIG.colorStrata.timeStrength!, "y", 0, 2, 0.01);
+   const noiseStrength = colorStrata.addFolder("noiseStrength");
+   noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "x", 0, 5, 0.01);
+   noiseStrength.add(CONFIG.colorStrata.noiseStrength!, "y", 0, 5, 0.01);
+   // fx blending
+   const fxBlending = gui.addFolder("fxBlending");
+   fxBlending.add(CONFIG.fxBlending, "mapIntensity", 0, 10, 0.01);
+};
+
+const setConfig = () => {
+   return {
+      fluid: { ...CONFIG.fluid },
+      colorStrata: { ...CONFIG.colorStrata },
+      fxBlending: { ...CONFIG.fxBlending },
+   };
+};
+
+export const Playground = () => {
+   const updateGUI = useGUI(setGUI);
+
+   const ref = useRef<THREE.ShaderMaterial>(null);
+   const { size, dpr } = useThree((state) => {
+      return { size: state.size, dpr: state.viewport.dpr };
+   });
+   const [updateFluid] = useFluid({ size, dpr });
+   const [updateFxBlending] = useFxBlending({ size, dpr });
+   const [updateColorStrata] = useColorStrata({ size, dpr });
+
+   useFrame((props) => {
+      const fluid = updateFluid(props, {
+         ...setConfig().fluid,
+      });
+      const colorStrata = updateColorStrata(props, {
+         ...setConfig().colorStrata,
+      });
+      const blending = updateFxBlending(props, {
+         ...setConfig().fxBlending,
+         texture: colorStrata,
+         map: fluid,
+      });
+      ref.current!.uniforms.u_fx.value = blending;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <shaderMaterial
+            ref={ref}
+            vertexShader={`
+					varying vec2 vUv;
+						void main() {
+							vUv = uv;
+							gl_Position = vec4(position, 1.0);
+						}
+						`}
+            fragmentShader={`
+						precision highp float;
+						varying vec2 vUv;
+						uniform sampler2D u_fx;
+
+						void main() {
+							vec2 uv = vUv;
+							gl_FragColor = texture2D(u_fx, uv);
+						}
+					`}
+            uniforms={{
+               u_fx: { value: null },
+            }}
+         />
+      </mesh>
+   );
+};

app/playground2/page.tsx

@@ -0,0 +1,12 @@
+import { ShaderFx } from "../ShaderFx";
+import { Playground } from "./Playground";
+
+export default function Page() {
+   return (
+      <div style={{ width: "100%", height: "100svh", overflow: "hidden" }}>
+         <ShaderFx>
+            <Playground />
+         </ShaderFx>
+      </div>
+   );
+}

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

@@ -515,7 +515,7 @@ void main() {
 	alpha *= textureAlpha;
 
 	gl_FragColor = vec4(textureColor, alpha);
-}`;const Qe=({params:t,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof n.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),t.texture.forEach((e,a)=>{const c=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:Ze,fragmentShader:Je,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[a]?t.boderRadius[a]:0}}}));r.add(c)})},en=()=>{const t=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:a,params:c})=>{t.current.length>0&&t.current.forEach((o,l)=>{o.unobserve(i.current[l])}),i.current=[],t.current=[];const v=new Array(c.dom.length).fill(!1);e.current=[...v],a.current=[...v],c.dom.forEach((o,l)=>{const d=m=>{m.forEach(g=>{c.onIntersect[l]&&c.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(o),t.current.push(f),i.current.push(o)})},[])},nn=()=>{const t=u.useRef([]),i=u.useCallback(({params:r,size:e,resolutionRef:a,scene:c,isIntersectingRef:v})=>{c.children.length!==t.current.length&&(t.current=new Array(c.children.length)),c.children.forEach((o,l)=>{const d=r.dom[l];if(!d)throw new Error("DOM is null.");if(v.current[l]){const f=d.getBoundingClientRect();if(t.current[l]=f,o.scale.set(f.width,f.height,1),o.position.set(f.left+f.width*.5-e.width*.5,-f.top-f.height*.5+e.height*.5,0),r.rotation[l]&&o.rotation.copy(r.rotation[l]),o instanceof n.Mesh){const m=o.material;s(m,"u_texture",r.texture[l]),s(m,"u_textureResolution",r.resolution[l]),s(m,"u_resolution",a.current.set(f.width,f.height)),s(m,"u_borderRadius",r.boderRadius[l]?r.boderRadius[l]:0)}}})},[]);return[t.current,i]},tn=()=>{const t=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,a=!1)=>{t.current.forEach((v,o)=>{v&&(i.current[o]=!0)});const c=a?[...i.current]:[...t.current];return e<0?c:c[e]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:i,isIntersecting:r}},K={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},rn=({size:t,dpr:i},r=[])=>{const e=u.useMemo(()=>new n.Scene,[]),a=_(t),[c,v]=R({scene:e,camera:a,size:t,dpr:i,isSizeUpdate:!0}),[o,l]=b(K),[d,f]=nn(),m=u.useRef(new n.Vector2(0,0)),[g,x]=u.useState(!0);u.useEffect(()=>{x(!0)},r);const M=en(),{isIntersectingOnceRef:y,isIntersectingRef:T,isIntersecting:C}=tn();return[u.useCallback((U,O)=>{const{gl:D,size:h}=U;return O&&l(O),Ke(o),g&&(Qe({params:o,size:h,scene:e}),M({isIntersectingRef:T,isIntersectingOnceRef:y,params:o}),x(!1)),f({params:o,size:h,resolutionRef:m,scene:e,isIntersectingRef:T}),v(D)},[v,l,M,f,g,e,o,y,T]),l,{scene:e,camera:a,renderTarget:c,isIntersecting:C,DOMRects:d}]};var on=`precision mediump float;
+}`;const Qe=({params:t,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof n.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),t.texture.forEach((e,a)=>{const c=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:Ze,fragmentShader:Je,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[a]?t.boderRadius[a]:0}}}));r.add(c)})},en=()=>{const t=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:a,params:c})=>{t.current.length>0&&t.current.forEach((o,l)=>{o.unobserve(i.current[l])}),i.current=[],t.current=[];const v=new Array(c.dom.length).fill(!1);e.current=[...v],a.current=[...v],c.dom.forEach((o,l)=>{const d=m=>{m.forEach(g=>{c.onIntersect[l]&&c.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(o),t.current.push(f),i.current.push(o)})},[])},nn=()=>{const t=u.useRef([]),i=u.useCallback(({params:r,size:e,resolutionRef:a,scene:c,isIntersectingRef:v})=>{c.children.length!==t.current.length&&(t.current=new Array(c.children.length)),c.children.forEach((o,l)=>{const d=r.dom[l];if(!d)throw new Error("DOM is null.");const f=d.getBoundingClientRect();if(t.current[l]=f,v.current[l]&&(o.scale.set(f.width,f.height,1),o.position.set(f.left+f.width*.5-e.width*.5,-f.top-f.height*.5+e.height*.5,0),r.rotation[l]&&o.rotation.copy(r.rotation[l]),o instanceof n.Mesh)){const m=o.material;s(m,"u_texture",r.texture[l]),s(m,"u_textureResolution",r.resolution[l]),s(m,"u_resolution",a.current.set(f.width,f.height)),s(m,"u_borderRadius",r.boderRadius[l]?r.boderRadius[l]:0)}})},[]);return[t.current,i]},tn=()=>{const t=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,a=!1)=>{t.current.forEach((v,o)=>{v&&(i.current[o]=!0)});const c=a?[...i.current]:[...t.current];return e<0?c:c[e]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:i,isIntersecting:r}},K={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},rn=({size:t,dpr:i},r=[])=>{const e=u.useMemo(()=>new n.Scene,[]),a=_(t),[c,v]=R({scene:e,camera:a,size:t,dpr:i,isSizeUpdate:!0}),[o,l]=b(K),[d,f]=nn(),m=u.useRef(new n.Vector2(0,0)),[g,x]=u.useState(!0);u.useEffect(()=>{x(!0)},r);const M=en(),{isIntersectingOnceRef:y,isIntersectingRef:T,isIntersecting:C}=tn();return[u.useCallback((U,O)=>{const{gl:D,size:h}=U;return O&&l(O),Ke(o),g&&(Qe({params:o,size:h,scene:e}),M({isIntersectingRef:T,isIntersectingOnceRef:y,params:o}),x(!1)),f({params:o,size:h,resolutionRef:m,scene:e,isIntersectingRef:T}),v(D)},[v,l,M,f,g,e,o,y,T]),l,{scene:e,camera:a,renderTarget:c,isIntersecting:C,DOMRects:d}]};var on=`precision mediump float;
 
 varying vec2 vUv;
 

packages/use-shader-fx/package.json

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.26",
+   "version": "1.0.27",
    "description": "wide variety of shader effects for React",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

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

@@ -26,6 +26,7 @@ export const useUpdateDomRect = (): UseUpdateDomRectReturn => {
 
    const updateDomRects: UpdateDomRect = useCallback(
       ({ params, size, resolutionRef, scene, isIntersectingRef }) => {
+         // Initialize domRects if the number of children in the scene is different from the number of DOMRect
          if (scene.children.length !== domRects.current!.length) {
             domRects.current = new Array(scene.children.length);
          }
@@ -36,10 +37,11 @@ export const useUpdateDomRect = (): UseUpdateDomRectReturn => {
                throw new Error("DOM is null.");
             }
 
-            if (isIntersectingRef.current[i]) {
-               const rect = domElement.getBoundingClientRect();
-               domRects.current[i] = rect;
+            // DOMRect is updated even outside the intersection
+            const rect = domElement.getBoundingClientRect();
+            domRects.current[i] = rect;
 
+            if (isIntersectingRef.current[i]) {
                mesh.scale.set(rect.width, rect.height, 1.0);
                mesh.position.set(
                   rect.left + rect.width * 0.5 - size.width * 0.5,