11.6

Author: takuma-hmng8

CONTRIBUTING.md

@@ -0,0 +1,11 @@
+コントリビュートするフロー
+
+### fx を新しくつくる場合
+
+-  フォークする
+-  依存をインストール
+-  ブランチを切ってください！
+-  \_shaderFx/Create Kit を編集することができます。
+   -  gui の例や基本的なカスタムフックの構成など、ベースを用意しています。
+   -  useSample を編集して hook を作成してください！
+-  できたら、PR！

CreateKit/config.ts

@@ -0,0 +1,5 @@
+export const CONFIG = {
+   sampleFx: {
+      someValue: 0.0,
+   },
+};

CreateKit/fxMaterial.tsx

@@ -0,0 +1,24 @@
+import * as THREE from "three";
+import vertexShader from "./shader/main.vert";
+import fragmentShader from "./shader/main.frag";
+import { shaderMaterial } from "@react-three/drei";
+
+declare global {
+   namespace JSX {
+      interface IntrinsicElements {
+         fxMaterial: any;
+      }
+   }
+}
+
+export type TFxMaterial = {
+   u_fx: THREE.Texture | null;
+};
+
+export const FxMaterial = shaderMaterial(
+   {
+      u_fx: null,
+   },
+   vertexShader,
+   fragmentShader
+);

CreateKit/index.tsx

@@ -0,0 +1,44 @@
+import { useRef } from "react";
+import * as THREE from "three";
+import { useFrame, extend, useThree } from "@react-three/fiber";
+import { FxMaterial, TFxMaterial } from "./fxMaterial";
+import { usePerformanceMonitor } from "@react-three/drei";
+import { useGUI } from "./useGUI";
+import { CONFIG } from "./config";
+import { useSample } from "./useSample";
+
+// dreiのshaderMaterialを使うことで、key={FxMaterial.key}を有効にすることができ、hotReloadが使えます。
+extend({ FxMaterial });
+
+/**
+ * 新しいFXを作成するためのシーンです。CONFIGのisCreateをtrueにすることで、development環境でのみレンダリングされます。
+ */
+export const CreateKit = () => {
+   const updateGUI = useGUI();
+   const fxRef = useRef<TFxMaterial>();
+
+   const size = useThree((state) => state.size);
+   const dpr = useThree((state) => state.viewport.dpr);
+
+   const [updateSample, setSample, sampleObj] = useSample({ size, dpr });
+
+   // factorに応じたパフォーマンスコントロールを考慮して、setParams関数は作成してください。
+   usePerformanceMonitor({
+      onChange({ factor }) {
+         setSample({ someValue: factor });
+      },
+   });
+
+   useFrame((props) => {
+      const fx = updateSample(props, { someValue: CONFIG.sampleFx.someValue });
+      fxRef.current!.u_fx = fx;
+      updateGUI();
+   });
+
+   return (
+      <mesh>
+         <planeGeometry args={[2, 2]} />
+         <fxMaterial key={FxMaterial.key} ref={fxRef} />
+      </mesh>
+   );
+};

CreateKit/shader/main.frag

@@ -0,0 +1,8 @@
+precision mediump float;
+varying vec2 vUv;
+uniform sampler2D u_fx;
+
+void main() {
+	vec2 uv = vUv;
+	gl_FragColor = texture2D(u_fx, uv);
+}

app/fx/shader/main.vert renamed to CreateKit/shader/main.vert

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useMemo } from "react";
+import { CONFIG } from "./config";
+import GUI from "lil-gui";
+
+export const useGUI = () => {
+   const gui = useMemo(
+      () => new GUI({ closeFolders: true, title: "shader-fx" }),
+      []
+   );
+
+   useEffect(() => {
+      const sample = gui.addFolder("sample");
+      sample.add(CONFIG.sampleFx, "someValue", 0, 1, 0.01);
+   }, [gui]);
+
+   const updateDisplays = useCallback(() => {
+      gui.folders.forEach((folder) =>
+         folder.controllers.forEach((controller) => controller.updateDisplay())
+      );
+   }, [gui]);
+
+   return updateDisplays;
+};

CreateKit/useGUI.ts

@@ -0,0 +1,83 @@
+import { useCallback, useMemo } from "react";
+import * as THREE from "three";
+import { useMesh } from "./useMesh";
+import { RootState, Size } from "@react-three/fiber";
+import {
+   useCamera,
+   usePointer,
+   useSingleFBO,
+   setUniform,
+   useParams,
+} from "@/packages/use-shader-fx/src";
+import { HooksReturn } from "@/packages/use-shader-fx/types/hooks/types";
+
+export type SampleParams = {
+   /** some comments */
+   someValue: number;
+};
+
+export type SampleObject = {
+   scene: THREE.Scene;
+   material: THREE.Material;
+   camera: THREE.Camera;
+   renderTarget: THREE.WebGLRenderTarget;
+};
+
+export const useSample = ({
+   size,
+   dpr,
+}: {
+   size: Size;
+   dpr: number;
+}): HooksReturn<SampleParams, SampleObject> => {
+   const scene = useMemo(() => new THREE.Scene(), []);
+   const material = useMesh(scene);
+   const camera = useCamera(size);
+   const updatePointer = usePointer();
+   const [renderTarget, updateRenderTarget] = useSingleFBO({
+      scene,
+      camera,
+      size,
+      dpr,
+   });
+
+   const [params, setParams] = useParams<SampleParams>({
+      someValue: 0.0,
+   });
+
+   const updateFx = useCallback(
+      (props: RootState, updateParams: SampleParams) => {
+         const { gl, clock, pointer } = props;
+
+         // ここでparamsを更新
+         setParams(updateParams);
+         setUniform(material, "uSomeValue", params.someValue!);
+
+         setUniform(material, "uTime", clock.getElapsedTime());
+
+         // usePointerは{currentPointer,prevPointer,diffPointer,velocity,isVelocityUpdate}を返します
+         const { velocity } = updatePointer(pointer);
+         setUniform(
+            material,
+            "uVelocity",
+            Math.min(1.0, velocity.length() * 500)
+         );
+
+         // FBOに焼き付けて、textureをreturnします
+         const outPutTexture = updateRenderTarget(gl);
+         return outPutTexture;
+      },
+      [updateRenderTarget, material, setParams, params, updatePointer]
+   );
+
+   return [
+      updateFx,
+      setParams,
+      {
+         scene: scene,
+         material: material,
+         camera: camera,
+         renderTarget: renderTarget,
+      },
+   ];
+};

CreateKit/useSample/index.ts

@@ -0,0 +1,12 @@
+precision mediump float;
+
+varying vec2 vUv;
+
+uniform float uTime;
+uniform float uVelocity;
+uniform float uSomeValue;
+
+void main() {
+	vec2 uv = vUv;
+	gl_FragColor = vec4(sin(uTime),uVelocity,uSomeValue,1.0);
+}

CreateKit/useSample/shader/main.frag

@@ -0,0 +1,6 @@
+varying vec2 vUv;
+
+void main() {
+	vUv = uv;
+	gl_Position = vec4(position, 1.0);
+}

CreateKit/useSample/shader/main.vert

@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import * as THREE from "three";
+import vertexShader from "./shader/main.vert";
+import fragmentShader from "./shader/main.frag";
+import { useAddMesh } from "@/packages/use-shader-fx/src";
+
+type TUniforms = {
+   uTime: { value: number };
+   uVelocity: { value: number };
+   uSomeValue: { value: number };
+};
+
+export class SampleMaterial extends THREE.ShaderMaterial {
+   uniforms!: TUniforms;
+}
+
+export const useMesh = (scene: THREE.Scene) => {
+   const geometry = useMemo(() => new THREE.PlaneGeometry(2, 2), []);
+   const material = useMemo(
+      () =>
+         new THREE.ShaderMaterial({
+            uniforms: {
+               uTime: { value: 0.0 },
+               uVelocity: { value: 0.0 },
+               uSomeValue: { value: 0.0 },
+            },
+            vertexShader: vertexShader,
+            fragmentShader: fragmentShader,
+         }),
+      []
+   );
+   useAddMesh(scene, geometry, material);
+   return material as SampleMaterial;
+};

CreateKit/useSample/useMesh.ts

@@ -3,7 +3,7 @@ import gsap from "gsap";
 
 export const CONFIG = {
    /*===============================================
-	post fx
+	post fx : textureを受け取り、そのテクスチャーにfxをかけて、テクスチャーを返します
 	===============================================*/
    transitionBg: {
       noiseStrength: 0.0,
@@ -44,7 +44,7 @@ export const CONFIG = {
       active: false,
    },
    /*===============================================
-	fx
+	fx : 流体やrippleなど、単体で動作するfxです
 	===============================================*/
    ripple: {
       frequency: 0.01,

app/fx/config.ts renamed to Demo/config.ts

@@ -6,18 +6,18 @@ import { shaderMaterial } from "@react-three/drei";
 declare global {
    namespace JSX {
       interface IntrinsicElements {
-         mainShaderMaterial: any;
+         fxMaterial: 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,