fixbug

Author: takuma-hmng8

app/cream/FxMaterial.tsx

@@ -0,0 +1,41 @@
+import * as THREE from "three";
+import { shaderMaterial } from "@react-three/drei";
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         fxMaterial: any;
+      }
+   }
+}
+
+export type FxMaterialProps = {
+   u_fx: THREE.Texture;
+};
+
+export const FxMaterial = shaderMaterial(
+   {
+      u_fx: new THREE.Texture(),
+   },
+
+   `
+		varying vec2 vUv;
+		void main() {
+			vUv = uv;
+			gl_Position = vec4(position, 1.0);
+		}
+	`,
+   `
+		precision highp float;
+		varying vec2 vUv;
+		uniform sampler2D u_fx;
+
+		void main() {
+			vec2 uv = vUv;
+			vec4 color = texture2D(u_fx, uv);
+			gl_FragColor = color;
+			// gl_FragColor.rgb = color.rgb;
+			// gl_FragColor.a = color.r + color.g + color.b;
+		}
+	`
+);

app/cream/Playground.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import * as THREE from "three";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
+import { useFluid } from "@/packages/use-shader-fx/src";
+import { FxMaterial } from "./FxMaterial";
+
+extend({ FxMaterial });
+
+export const Playground = () => {
+   const { size } = useThree();
+   const [updateFluid, setFluid, { output: fluid }] = useFluid({
+      size,
+      dpr: {
+         dpr: 0.08,
+         effect: {
+            fbo: false,
+         },
+      },
+   });
+
+   setFluid({
+      density_dissipation: 0.99,
+      velocity_dissipation: 0.99,
+      splat_radius: 0.001,
+   });
+
+   useFrame((props) => {
+      updateFluid(props);
+   });
+
+   return (
+      <>
+         <mesh>
+            <planeGeometry args={[2, 2]} />
+            <fxMaterial u_fx={fluid} key={FxMaterial.key} />
+         </mesh>
+      </>
+   );
+};

app/cream/page.tsx

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

app/playground/Playground.tsx

@@ -3,28 +3,13 @@
 import * as THREE from "three";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
-import {
-   useCoverTexture,
-   useFluid,
-   useSingleFBO,
-} from "@/packages/use-shader-fx/src";
+import { useFluid } from "@/packages/use-shader-fx/src";
 import { FxMaterial } from "./FxMaterial";
 
 extend({ FxMaterial });
 
 export const Playground = () => {
-   const { size, viewport, camera } = useThree();
-
-   const [funkun] = useLoader(THREE.TextureLoader, ["/funkun.jpg"]);
-
-   const [updateCover, setCover, { output: cover }] = useCoverTexture({
-      size,
-      dpr: 0.01,
-   });
-   setCover({
-      texture: funkun,
-   });
-
+   const { size } = useThree();
    const [updateFluid, setFluid, { output: fluid }] = useFluid({
       size,
       dpr: {
@@ -42,15 +27,14 @@ export const Playground = () => {
    });
 
    useFrame((props) => {
-      updateCover(props);
-      // updateFluid(props);
+      updateFluid(props);
    });
 
    return (
       <>
          <mesh>
             <planeGeometry args={[2, 2]} />
-            <fxMaterial u_fx={cover} key={FxMaterial.key} />
+            <fxMaterial u_fx={fluid} key={FxMaterial.key} />
          </mesh>
       </>
    );

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

@@ -1,6 +1,6 @@
 {
    "name": "@funtech-inc/use-shader-fx",
-   "version": "1.1.13",
+   "version": "1.1.14",
    "description": "⚡️ More FXs, Less GLSL",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

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

@@ -41,7 +41,7 @@ export const useAlphaBlending = ({
    const _dpr = getDpr(dpr);
 
    const scene = useMemo(() => new THREE.Scene(), []);
-   const { material, mesh } = useMesh({ scene, size, dpr: _dpr.shader });
+   const { material, mesh } = useMesh({ scene, size });
    const camera = useCamera(size);
 
    const [renderTarget, updateRenderTarget] = useSingleFBO({

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

@@ -15,11 +15,9 @@ export class AlphaBlendingMaterial extends THREE.ShaderMaterial {
 export const useMesh = ({
    scene,
    size,
-   dpr,
 }: {
    scene: THREE.Scene;
    size: Size;
-   dpr: number | false;
 }) => {
    const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
    const material = useMemo(

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

@@ -44,7 +44,7 @@ export const useHSV = ({
    const _dpr = getDpr(dpr);
 
    const scene = useMemo(() => new THREE.Scene(), []);
-   const { material, mesh } = useMesh({ scene, size, dpr: _dpr.shader });
+   const { material, mesh } = useMesh({ scene, size });
    const camera = useCamera(size);
 
    const [renderTarget, updateRenderTarget] = useSingleFBO({

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

@@ -16,11 +16,9 @@ export class HSVMaterial extends THREE.ShaderMaterial {
 export const useMesh = ({
    scene,
    size,
-   dpr,
 }: {
    scene: THREE.Scene;
    size: Size;
-   dpr: number | false;
 }) => {
    const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
    const material = useMemo(

packages/use-shader-fx/package.json

@@ -10,10 +10,9 @@ export declare class AlphaBlendingMaterial extends THREE.ShaderMaterial {
         };
     };
 }
-export declare const useMesh: ({ scene, size, dpr, }: {
+export declare const useMesh: ({ scene, size, }: {
     scene: THREE.Scene;
     size: Size;
-    dpr: number | false;
 }) => {
     material: AlphaBlendingMaterial;
     mesh: THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, AlphaBlendingMaterial>;

packages/use-shader-fx/src/fxs/utils/useAlphaBlending/index.ts

@@ -13,10 +13,9 @@ export declare class HSVMaterial extends THREE.ShaderMaterial {
         };
     };
 }
-export declare const useMesh: ({ scene, size, dpr, }: {
+export declare const useMesh: ({ scene, size, }: {
     scene: THREE.Scene;
     size: Size;
-    dpr: number | false;
 }) => {
     material: HSVMaterial;
     mesh: THREE.Mesh<THREE.BufferGeometry<THREE.NormalBufferAttributes>, HSVMaterial>;