Merge pull request #93 from FunTechInc/v1.1.10

Remove unnecessary useEffect

Author: takuma-hmng8

Diff for: app/_home/Playground.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useEffect, useRef } from "react";
+import { useMemo, useRef } from "react";
 import { useFrame, useThree, extend } from "@react-three/fiber";
 import {
    useNoise,
@@ -115,7 +115,7 @@ export const Playground = ({
       dpr: viewport.dpr,
    });
 
-   useEffect(() => {
+   useMemo(() => {
       CONFIG.random();
       setNoise({
          scale: 1000,

Diff for: app/obscurus/Playground.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as THREE from "three";
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import { useFrame, useThree, extend, useLoader } from "@react-three/fiber";
 import {
    useCreateWobble3D,
@@ -139,10 +139,10 @@ export const Playground = () => {
       dpr: viewport.dpr,
       geometry: useMemo(() => new THREE.IcosahedronGeometry(0.8, 10), []),
    });
-   useEffect(() => {
+   useMemo(() => {
       particles.points.material.blending = THREE.NormalBlending;
       camera.position.z = 8;
-   }, [noise, updateParticle, particles.points.material, camera]);
+   }, [particles.points.material, camera]);
    useFrame((props) => {
       updateWobble(props, {
          ...setWobbleConfig(),

Diff for: app/playground/FxMaterial.tsx

@@ -0,0 +1,38 @@
+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() {
+			gl_FragColor = texture2D(u_fx,vUv);
+			// gl_FragColor = vec4(1.,1.,0.,1.);
+		}
+	`
+);

Diff for: app/playground/Playground.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import * as THREE from "three";
+import { useEffect, useMemo } 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, viewport, camera } = useThree();
+
+   const [updateFluid, , { output }] = useFluid({ size, dpr: viewport.dpr });
+
+   useFrame((props) => {
+      updateFluid(props);
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial u_fx={output} key={FxMaterial.key} />
+      </mesh>
+   );
+};

Diff for: app/playground/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>
+   );
+}