Merge pull request #55 from takuma-hmng8/dev

v1.0.34

Author: takuma-hmng8

.storybook/stories/UseRipple.tsx

@@ -58,7 +58,7 @@ export const UseRippleWithTexture = (args: RippleParams) => {
       return { size: state.size, dpr: state.viewport.dpr };
    });
    const [updateFxTexture] = useFxTexture({ size, dpr });
-   const [updateRipple] = useRipple({ size, texture: ripple });
+   const [updateRipple] = useRipple({ size, dpr, texture: ripple });
 
    useFrame((props) => {
       const fx = updateRipple(props, setConfig());

.storybook/utils/Setup.tsx

@@ -13,7 +13,7 @@ export const Setup = ({ children }: { children: React.ReactNode }) => {
             factor={1}
             onChange={({ factor }) => {
                console.log(`dpr:${dpr}`);
-               setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
+               setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
             {children}
             <Perf position={"bottom-left"} minimal={false} />

README.md

@@ -11,7 +11,7 @@ npm install @hmng8/use-shader-fx
 
 # Usage
 
-From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in array format. The `config` is an object, which varies for each Hook, containing details such as `size` and `dpr`.
+From each `fxHooks`, you can receive [`updateFx`, `setParams`, `fxObject`] in array format. The `config` is an object, which varies for each Hook, containing details such as `size`,`dpr` and `samples`.
 
 1. `updateFx` - A function to be invoked inside `useFrame`, returning a `THREE.Texture`.
 2. `setParams` - A function to refresh the parameters, beneficial for performance tweaking, etc.
@@ -45,9 +45,8 @@ import { useFluid } from "@hmng8/use-shader-fx";
 
 export const Demo = () => {
    const ref = useRef<THREE.ShaderMaterial>(null);
-   const size = useThree((state) => state.size);
-   const dpr = useThree((state) => state.viewport.dpr);
-   const [updateFluid] = useFluid({ size, dpr });
+   const { size, viewport } = useThree();
+   const [updateFluid] = useFluid({ size, dpr: viewport.dpr });
    useFrame((props) => {
       ref.current!.uniforms.u_fx.value = updateFluid(props);
    });
@@ -83,6 +82,135 @@ export const Demo = () => {
 };
 ```
 
+## Integrate with r3f scenes.
+
+You can use `r3f/createPortal` to make some mesh render off-screen. All that remains is to combine the generated textures with FX!
+
+```tsx
+import * as THREE from "three";
+import { useMemo, useRef, useState } from "react";
+import { useFrame, useThree, createPortal } from "@react-three/fiber";
+import { useNoise, useSingleFBO } from "@hmng8/use-shader-fx";
+
+function Box(props: any) {
+   // This reference will give us direct access to the mesh
+   const meshRef = useRef<THREE.Mesh>();
+   // Set up state for the hovered and active state
+   const [hovered, setHover] = useState(false);
+   const [active, setActive] = useState(false);
+   // Subscribe this component to the render-loop, rotate the mesh every frame
+   useFrame((state, delta) => {
+      meshRef.current!.rotation.x += delta;
+      meshRef.current!.rotation.y -= delta;
+   });
+   // Return view, these are regular three.js elements expressed in JSX
+   return (
+      <mesh
+         {...props}
+         ref={meshRef}
+         scale={active ? 2 : 1.5}
+         onClick={(event) => setActive(!active)}
+         onPointerOver={(event) => setHover(true)}
+         onPointerOut={(event) => setHover(false)}>
+         <boxGeometry args={[1, 1, 1]} />
+         <meshStandardMaterial color={hovered ? "hotpink" : "orange"} />
+      </mesh>
+   );
+}
+
+export const Home = () => {
+   const ref = useRef<THREE.ShaderMaterial>(null);
+   const { size, viewport, camera } = useThree();
+   const [updateNoise, setNoise] = useNoise({ size, dpr: viewport.dpr });
+
+   setNoise({
+      scale: 0.01,
+      warpOctaves: 1,
+      noiseOctaves: 1,
+      fbmOctaves: 1,
+      timeStrength: 1.2,
+      warpStrength: 20.0,
+   });
+
+   // This scene is rendered offscreen
+   const offscreenScene = useMemo(() => new THREE.Scene(), []);
+
+   // create FBO for offscreen rendering
+   const [_, updateRenderTarget] = useSingleFBO({
+      scene: offscreenScene,
+      camera,
+      size,
+      dpr: viewport.dpr,
+      samples: 4,
+   });
+
+   useFrame((props) => {
+      const noise = updateNoise(props);
+      ref.current!.uniforms.u_fx.value = noise;
+      ref.current!.uniforms.u_texture.value = updateRenderTarget(props.gl);
+   });
+
+   return (
+      <>
+         {createPortal(
+            <mesh>
+               <ambientLight intensity={Math.PI} />
+               <spotLight
+                  position={[10, 10, 10]}
+                  angle={0.15}
+                  penumbra={1}
+                  decay={0}
+                  intensity={Math.PI}
+               />
+               <pointLight
+                  position={[-10, -10, -10]}
+                  decay={0}
+                  intensity={Math.PI}
+               />
+               <Box position={[-1.5, 0, 0]} />
+               <Box position={[1.5, 0, 0]} />
+            </mesh>,
+            offscreenScene
+         )}
+         <mesh>
+            <planeGeometry args={[2, 2]} />
+            <shaderMaterial
+               ref={ref}
+               transparent
+               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;
+						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: null },
+                  u_fx: { value: null },
+               }}
+            />
+         </mesh>
+      </>
+   );
+};
+```
+
 # Performance
 
 You can control the `dpr` using the `PerformanceMonitor` from [drei](https://github.com/pmndrs/drei). For more details, please refer to the [scaling-performance](https://docs.pmnd.rs/react-three-fiber/advanced/scaling-performance) of r3f.
@@ -146,8 +274,14 @@ type UseFboProps = {
    size: Size;
    /** If dpr is set, dpr will be multiplied, default:false */
    dpr?: number | false;
-   /** Whether to resize on resizes. If isDpr is true, set FBO to setSize even if dpr is changed, default:false */
+   /** Whether to resize when resizing occurs. If isDpr is true, set FBO to setSize even if dpr is changed, default:false */
    isSizeUpdate?: boolean;
+   /** Defines the count of MSAA samples. Can only be used with WebGL 2. Default is 0. */
+   samples?: number;
+   /** Renders to the depth buffer. Unlike the three.js,　Default is false. */
+   depthBuffer?: boolean;
+   /** If set, the scene depth will be rendered to this texture. Default is false. */
+   depthTexture?: boolean;
 };
 
 const [velocityFBO, updateVelocityFBO] = useDoubleFBO(UseFboProps);
@@ -230,10 +364,7 @@ const [params, setParams] = useParams<HooksParams>;
 Generate an FBO array to copy the texture.
 
 ```tsx
-const [renderTargets, copyTexture] = useCopyTexture(
-   { scene, camera, size, dpr },
-   length
-);
+const [renderTargets, copyTexture] = useCopyTexture(UseFboProps, length);
 copyTexture(gl, index); // return texture
 ```
 

app/ShaderFx.tsx

@@ -16,7 +16,7 @@ export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
                setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>{children}</Suspense>
-            {/* <Perf position={"bottom-left"} minimal={false} /> */}
+            <Perf position={"bottom-left"} minimal={false} />
          </PerformanceMonitor>
       </Canvas>
    );

app/_home/index.tsx

@@ -162,7 +162,7 @@ export const Home = () => {
 							vec3 color = mix(texColor,noiseMap,0.5);
 
 							float luminance = length(color);
-							
+
 							float edge0 = 0.0;
 							float edge1 = .2;
 							float alpha = smoothstep(edge0, edge1, luminance);
@@ -180,3 +180,69 @@ export const Home = () => {
       </>
    );
 };
+
+// import * as THREE from "three";
+// import { useEffect, useMemo, useRef, useState } from "react";
+// import { useFrame, useThree, createPortal } from "@react-three/fiber";
+// import {
+//    useNoise,
+//    useFluid,
+//    useFxBlending,
+//    useColorStrata,
+//    useBrightnessPicker,
+//    useSingleFBO,
+// } from "@/packages/use-shader-fx/src";
+
+// export const Home = () => {
+//    const ref = useRef<THREE.ShaderMaterial>(null);
+//    const { size, viewport, camera } = useThree();
+//    const dpr = viewport.dpr;
+
+//    const [updateFluid, setFluid] = useFluid({ size, dpr });
+
+//    setFluid({
+//       density_dissipation: 0.96,
+//       velocity_dissipation: 0.99,
+//       curl_strength: 0.0,
+//       splat_radius: 0.0045,
+//       pressure_iterations: 1,
+//    });
+
+//    useFrame((props) => {
+//       const fluid = updateFluid(props);
+
+//       ref.current!.uniforms.u_fx.value = fluid;
+//    });
+
+//    return (
+//       <>
+//          <mesh>
+//             <planeGeometry args={[2, 2]} />
+//             <shaderMaterial
+//                ref={ref}
+//                transparent
+//                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/playground/Playground.tsx

@@ -24,14 +24,20 @@ import { useGUI } from "@/utils/useGUI";
 const CONFIG = {
    colorStrata: {
       ...structuredClone(COLORSTRATA_PARAMS),
-      laminateLayer: 20,
+      laminateLayer: 10,
       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,
+   color: {
+      color0: new THREE.Color(0xff0000),
+      color1: new THREE.Color(0x0000ff),
+      color2: new THREE.Color(0x00ff00),
+      color3: new THREE.Color(0xffff00),
+   },
 };
 
 const setGUI = (gui: GUI) => {
@@ -58,11 +64,18 @@ const setGUI = (gui: GUI) => {
    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);
+   // color
+   const color = gui.addFolder("color");
+   color.addColor(CONFIG.color, "color0");
+   color.addColor(CONFIG.color, "color1");
+   color.addColor(CONFIG.color, "color2");
+   color.addColor(CONFIG.color, "color3");
 };
 
 const setConfig = () => {
    return {
       colorStrata: { ...CONFIG.colorStrata },
+      color: { ...CONFIG.color },
    };
 };
 
@@ -83,6 +96,10 @@ export const Playground = () => {
          noise: false,
       });
       ref.current!.uniforms.u_fx.value = colorStrata;
+      ref.current!.uniforms.u_color0.value = setConfig().color.color0;
+      ref.current!.uniforms.u_color1.value = setConfig().color.color1;
+      ref.current!.uniforms.u_color2.value = setConfig().color.color2;
+      ref.current!.uniforms.u_color3.value = setConfig().color.color3;
       updateGUI();
    });
 
@@ -102,14 +119,32 @@ export const Playground = () => {
 						precision highp float;
 						varying vec2 vUv;
 						uniform sampler2D u_fx;
+						uniform vec3 u_color0;
+						uniform vec3 u_color1;
+						uniform vec3 u_color2;
+						uniform vec3 u_color3;
 						
 						void main() {
 							vec2 uv = vUv;
-							gl_FragColor = texture2D(u_fx, uv);
+							
+							vec2 map = texture2D(u_fx, uv).rg;
+							vec2 normalizedMap = map * 2.0 - 1.0;
+							
+							uv = uv * 2.0 - 1.0;
+							uv *= mix(vec2(1.0), abs(normalizedMap), 3.0);
+							uv = (uv + 1.0) / 2.0;
+
+							vec3 col = mix(mix(u_color0, u_color1, uv.x), mix(u_color2, u_color3, uv.x), uv.y);
+							
+							gl_FragColor = vec4(col, 1.0);
 						}
 					`}
             uniforms={{
                u_fx: { value: null },
+               u_color0: { value: null },
+               u_color1: { value: null },
+               u_color2: { value: null },
+               u_color3: { value: null },
             }}
          />
       </mesh>