create-kit

app/fx/Scene.tsx → app/fx/Demo.tsx

@@ -9,29 +9,32 @@ import { useTransitionBg } from "@/packages/use-shader-fx/src";
 import { useDuoTone } from "@/packages/use-shader-fx/src";
 import { useFogProjection } from "@/packages/use-shader-fx/src";
 import { useFrame, useLoader, extend, useThree } from "@react-three/fiber";
-import { MainShaderMaterial, TMainShaderUniforms } from "./ShaderMaterial";
 import { usePerformanceMonitor } from "@react-three/drei";
 import { useGUI } from "./gui/useGUI";
 import { CONFIG } from "./config";
-
-extend({ MainShaderMaterial });
+import { FxMaterial, TFxMaterial } from "./FxMaterial";
+extend({ FxMaterial });
 
 /*===============================================
 TODO*
 - 初期値とGUIの整理
 - renderTargetをclean upさせる
 - cameraとか諸々clean upさせないとか〜〜
+- create kit branchつくる
+
+
+create kit test
 ===============================================*/
 
-export const Scene = () => {
+export const Demo = () => {
    const [bg, bg2, ripple, noise] = useLoader(THREE.TextureLoader, [
       "thumbnail.jpg",
       "momo.jpg",
       "ripple.png",
       "noise.png",
    ]);
    const updateGUI = useGUI();
-   const mainShaderRef = useRef<TMainShaderUniforms>();
+   const fxMaterialRef = useRef<TFxMaterial>();
 
    const size = useThree((state) => state.size);
    const dpr = useThree((state) => state.viewport.dpr);
@@ -148,19 +151,19 @@ export const Scene = () => {
          });
       }
 
-      const main = mainShaderRef.current;
-      if (main) {
-         main.u_fx = fx;
-         main.u_postFx = postFx;
-         main.isBgActive = CONFIG.transitionBg.active;
+      const fxMaterial = fxMaterialRef.current;
+      if (fxMaterial) {
+         fxMaterial.u_fx = fx;
+         fxMaterial.u_postFx = postFx;
+         fxMaterial.isBgActive = CONFIG.transitionBg.active;
       }
       updateGUI();
    });
 
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />
-         <mainShaderMaterial key={MainShaderMaterial.key} ref={mainShaderRef} />
+         <fxMaterial key={FxMaterial.key} ref={fxMaterialRef} />
       </mesh>
    );
 };

app/fx/ShaderMaterial.tsx → app/fx/FxMaterial.tsx

@@ -3,21 +3,13 @@ import vertexShader from "./shader/main.vert";
 import fragmentShader from "./shader/main.frag";
 import { shaderMaterial } from "@react-three/drei";
 
-declare global {
-   namespace JSX {
-      interface IntrinsicElements {
-         mainShaderMaterial: any;
-      }
-   }
-}
-
-export type TMainShaderUniforms = {
+export type TFxMaterial = {
    u_fx: THREE.Texture | null;
    u_postFx: THREE.Texture;
    isBgActive: boolean;
 };
 
-export const MainShaderMaterial = shaderMaterial(
+export const FxMaterial = shaderMaterial(
    {
       u_fx: null,
       u_postFx: null,
@@ -26,3 +18,11 @@ export const MainShaderMaterial = shaderMaterial(
    vertexShader,
    fragmentShader
 );
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         fxMaterial: any;
+      }
+   }
+}

app/fx/index.tsx

@@ -2,7 +2,7 @@
 
 import { Suspense, useState } from "react";
 import { Canvas } from "@react-three/fiber";
-import { Scene } from "./Scene";
+import { Demo } from "./Demo";
 import { Perf } from "r3f-perf";
 import { PerformanceMonitor } from "@react-three/drei";
 
@@ -17,7 +17,7 @@ export const Fx = () => {
                setDpr(Math.round((0.5 + 1.5 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>
-               <Scene />
+               <Demo />
             </Suspense>
             <Perf position={"bottom-right"} minimal={false} />
          </PerformanceMonitor>