Fully simplified management of uniforms

vhiribarren · Dec 12, 2023 · 0a029ec · 0a029ec
1 parent 4f6c4cc
commit 0a029ec
Show file tree

Hide file tree

Showing 10 changed files with 35 additions and 125 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -22,6 +22,12 @@
     "@stylistic/js/quotes": [
       "warn",
       "double"
+    ],
+    "no-unused-vars": [
+      "error",
+      {
+        "argsIgnorePattern": "^_"
+      }
     ]
   }
 }
diff --git a/src/app/deformation/circle-grid/page.tsx b/src/app/deformation/circle-grid/page.tsx
@@ -6,28 +6,11 @@ import { NumberInput } from "@mantine/core";
 import styles from "../../../styles/shaderControl.module.css";
 import { useUniform, useUniformClock } from "@/components/shaders/uniforms";
 
-const UNIFORMS = {
-  u_frequence: {
-      value: 30.0,
-  },
-  u_amplitude: {
-      value: 0.1,
-  },
-  u_speed: {
-    value: 0.3,
-  },
-  u_time: {
-      value: 0.0,
-  },
-};
-
 function CircleGridControl({controlUiTunnel}: FragmentLogic) {
-
   useUniformClock("u_time");
-  const [frequence, setFrequence] = useUniform("u_frequence", UNIFORMS.u_frequence.value);
-  const [amplitude, setAmplitude] = useUniform("u_amplitude", UNIFORMS.u_amplitude.value);
-  const [speed, setSpeed] = useUniform("u_speed",UNIFORMS.u_speed.value);
-
+  const [frequence, setFrequence] = useUniform("u_frequence", 30.0);
+  const [amplitude, setAmplitude] = useUniform("u_amplitude", 0.1);
+  const [speed, setSpeed] = useUniform("u_speed", 0.3);
   const ControlUiTunnel = controlUiTunnel;
 
   return (
@@ -41,14 +24,12 @@ function CircleGridControl({controlUiTunnel}: FragmentLogic) {
     );
 }
 
-
 export default function Page() {
   return (
     <FragmentView
       title="Circle Grid"
       autoRender={true}
       fragmentShader={fragmentShader}
-      uniforms={UNIFORMS}
       withUi={true}
       control={CircleGridControl} />
   );

diff --git a/src/app/deformation/ripple/page.tsx b/src/app/deformation/ripple/page.tsx
@@ -3,36 +3,16 @@
 import fragmentShader from "./fragment.glsl";
 import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
 import { useUniform, useUniformClock } from "@/components/shaders/uniforms";
-
 import { NumberInput } from "@mantine/core";
 import styles from "../../../styles/shaderControl.module.css";
 
-const UNIFORMS = {
-  u_frequence: {
-      value: 20.0,
-  },
-  u_amplitude: {
-      value: 0.1,
-  },
-  u_decrease: {
-      value: 10.0,
-  },
-  u_speed: {
-    value: 0.1,
-  },
-  u_time: {
-      value: 0.0,
-  },
-};
-
 function RippleControl({controlUiTunnel}: FragmentLogic) {
 
   useUniformClock("u_time");
-  const [frequence, setFrequence] = useUniform("u_frequence", UNIFORMS.u_frequence.value);
-  const [amplitude, setAmplitude] = useUniform("u_amplitude", UNIFORMS.u_amplitude.value);
-  const [decrease, setDecrease] = useUniform("u_decrease", UNIFORMS.u_decrease.value);
-  const [speed, setSpeed] = useUniform("u_speed",UNIFORMS.u_speed.value);
-
+  const [frequence, setFrequence] = useUniform("u_frequence", 20.0);
+  const [amplitude, setAmplitude] = useUniform("u_amplitude", 0.1);
+  const [decrease, setDecrease] = useUniform("u_decrease", 10.0);
+  const [speed, setSpeed] = useUniform("u_speed", 0.1);
   const ControlUiTunnel = controlUiTunnel;
 
     // TODO: when click, trigger a pulse
@@ -49,14 +29,12 @@ function RippleControl({controlUiTunnel}: FragmentLogic) {
     );
 }
 
-
 export default function Page() {
   return (
     <FragmentView
       title="Ripple Effect"
       autoRender={true}
       fragmentShader={fragmentShader}
-      uniforms={UNIFORMS}
       withUi={true}
       control={RippleControl} />
   );

diff --git a/src/app/noise/value-noise/page.tsx b/src/app/noise/value-noise/page.tsx
@@ -6,35 +6,14 @@ import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
 import styles from "../../../styles/shaderControl.module.css";
 import { useUniform } from "@/components/shaders/uniforms";
 
-const UNIFORMS = {
-    u_freq_count: {
-        value: 1,
-    },
-    u_freq_base: {
-        value: 2.0,
-    },
-    u_lacunarity: {
-        value: 2.0,
-    },
-    u_gain: {
-        value: 0.5,
-    },
-    u_shift_x: {
-        value: 0.0,
-    },
-    u_shift_y: {
-        value: 0.0,
-    },
-};
-
 function ValueNoiseControl({controlUiTunnel}: FragmentLogic) {
 
-    const [freqCount, setFreqCount] = useUniform("u_freq_count", UNIFORMS.u_freq_count.value);
-    const [freqBase, setFreqBase] = useUniform("u_freq_base", UNIFORMS.u_freq_base.value);
-    const [lacunarity, setLacunarity] = useUniform("u_lacunarity", UNIFORMS.u_lacunarity.value);
-    const [gain, setGain] = useUniform("u_gain", UNIFORMS.u_gain.value);
-    const [shiftX, setShiftX] = useUniform("u_shift_x", UNIFORMS.u_shift_x.value);
-    const [shiftY, setShiftY] = useUniform("u_shift_y", UNIFORMS.u_shift_y.value);
+    const [freqCount, setFreqCount] = useUniform("u_freq_count", 1);
+    const [freqBase, setFreqBase] = useUniform("u_freq_base", 2.0);
+    const [lacunarity, setLacunarity] = useUniform("u_lacunarity", 2.0);
+    const [gain, setGain] = useUniform("u_gain", 0.5);
+    const [shiftX, setShiftX] = useUniform("u_shift_x", 0.0);
+    const [shiftY, setShiftY] = useUniform("u_shift_y", 0.0);
     const ControlUiTunnel = controlUiTunnel;
 
     return (
@@ -51,13 +30,11 @@ function ValueNoiseControl({controlUiTunnel}: FragmentLogic) {
     );
 }
 
-
 export default function Page() {
     return (
         <FragmentView
             title="Value Noise"
             fragmentShader={fragmentShader}
-            uniforms={UNIFORMS}
             withUi={true}
             control={ValueNoiseControl} />
     );

diff --git a/src/app/noise/voronoi/page.tsx b/src/app/noise/voronoi/page.tsx
@@ -6,16 +6,9 @@ import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
 import styles from "../../../styles/shaderControl.module.css";
 import { useUniform } from "@/components/shaders/uniforms";
 
-const UNIFORMS = {
-    u_cell_count: {
-        value: 20,
-    },
-};
 
 function VoronoiNoiseControl({controlUiTunnel}: FragmentLogic) {
-
-    const [cellCount, setCellCount] = useUniform("u_cell_count", UNIFORMS.u_cell_count.value);
-
+    const [cellCount, setCellCount] = useUniform("u_cell_count", 20);
     const ControlUiTunnel = controlUiTunnel;
 
     return (
@@ -33,7 +26,6 @@ export default function Page() {
         <FragmentView
             title="Voronoi Noise"
             fragmentShader={fragmentShader}
-            uniforms={UNIFORMS}
             withUi={true}
             control={VoronoiNoiseControl} />
     );

diff --git a/src/app/noise/white-noise/page.tsx b/src/app/noise/white-noise/page.tsx
@@ -5,15 +5,8 @@ import fragmentShader from "./fragment.glsl";
 import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
 import { useUniform } from "@/components/shaders/uniforms";
 
-const UNIFORMS = {
-    u_frequence: {
-        value: 4.0,
-    },
-};
-
 function WhiteNoiseControl({ controlUiTunnel }: FragmentLogic) {
-
-    const [frequence, setFrequence] = useUniform("u_frequence", UNIFORMS.u_frequence.value);
+    const [frequence, setFrequence] = useUniform("u_frequence", 4.0);
     const ControlUiTunnel = controlUiTunnel;
 
     return (
@@ -35,7 +28,6 @@ export default function Page() {
             title="White Noise"
             description="Simple raw white noise without any processing. Frequency can be modified."
             fragmentShader={fragmentShader}
-            uniforms={UNIFORMS}
             withUi={true}
             control={WhiteNoiseControl} />
     );

diff --git a/src/app/noise/worley-random/page.tsx b/src/app/noise/worley-random/page.tsx
@@ -6,19 +6,10 @@ import { FragmentLogic, FragmentView } from "@/components/shaders/FragmentView";
 import styles from "../../../styles/shaderControl.module.css";
 import { useUniform } from "@/components/shaders/uniforms";
 
-const UNIFORMS = {
-    u_cell_count: {
-        value: 20,
-    },
-    u_luminosity: {
-        value: 2.0,
-    },
-};
-
 function VoronoidNoiseControl({controlUiTunnel}: FragmentLogic) {
 
-    const [cellCount, setCellCount] = useUniform("u_cell_count", UNIFORMS.u_cell_count.value);
-    const [luminosity, setLuminosity] = useUniform("u_luminosity", UNIFORMS.u_luminosity.value);
+    const [cellCount, setCellCount] = useUniform("u_cell_count", 20);
+    const [luminosity, setLuminosity] = useUniform("u_luminosity", 2.0);
 
     const ControlUiTunnel = controlUiTunnel;
 
@@ -32,13 +23,11 @@ function VoronoidNoiseControl({controlUiTunnel}: FragmentLogic) {
     );
 }
 
-
 export default function Page() {
     return (
         <FragmentView
             title="Random Worley Noise"
             fragmentShader={fragmentShader}
-            uniforms={UNIFORMS}
             withUi={true}
             control={VoronoidNoiseControl} />
     );

diff --git a/src/components/shaders/FragmentView.tsx b/src/components/shaders/FragmentView.tsx
@@ -21,7 +21,6 @@ export type FragmentLogic = {
 
 type FragmentViewProps = {
     fragmentShader: string,
-    uniforms?: any,
     title?: string,
     description?: string,
     autoRender?: boolean,
@@ -48,21 +47,19 @@ export function FragmentView({
     const Control = control;
     const ui = tunnel();
 
+    const [loadFragment, setLoadFragment] = useState(control ? false : true);
     const [uniforms, setUniforms] = useState({});
-    const addUniform = (uniformName, defaultValue) => {
-        console.log("adduniform")
+    const addUniform = (uniformName: string, defaultValue: any) => {
         if (uniformName in uniforms) {
             return;
         }
         setUniforms((state) => ({... state, [uniformName]: {value: defaultValue}}));
     };
-
-    const [loadFragment, setLoadFragment] = useState(control ? false : true);
     useEffect(() => {
-        console.log("load fragment, was: ", loadFragment);
-        console.log(uniforms);
-        setLoadFragment(true);
-    }, []);
+        if (Object.keys(uniforms).length !== 0) {
+            setLoadFragment(true);
+        }
+    }, [uniforms]);
 
     return (
 

diff --git a/src/components/shaders/ManagedFragmentShader.tsx b/src/components/shaders/ManagedFragmentShader.tsx
@@ -10,12 +10,6 @@ type ManagedFragmentShaderProps = {
   description?: string,
 }
 
-const UNIFORMS = {
-  u_time: {
-    value: 1.0,
-  },
-};
-
 function ManagedFragmentShaderControl() {
   useUniformClock("u_time");
   return null;
@@ -27,7 +21,6 @@ export default function ManagedFragmentShader({ fragmentShader, withTime, title,
       title={title}
       description={description}
       autoRender={withTime}
-      uniforms={UNIFORMS}
       fragmentShader={fragmentShader}
       control={ManagedFragmentShaderControl} />
   );

diff --git a/src/components/shaders/uniforms.ts b/src/components/shaders/uniforms.ts
@@ -2,7 +2,12 @@ import { useFrame } from "@react-three/fiber";
 import { Dispatch, MutableRefObject, SetStateAction, createContext, useContext, useEffect, useState } from "react";
 import { FragmentHandle } from "./Fragment";
 
-export const UniformsContext = createContext<MutableRefObject<FragmentHandle>>(null!);
+type UniformsContextType = {
+  fragmentRef: MutableRefObject<FragmentHandle>,
+  addUniform: (_uniformName: string, _defaultValue: any) => void,
+}
+
+export const UniformsContext = createContext<UniformsContextType>(null!);
 
 export function useFragmentRef(): MutableRefObject<FragmentHandle> {
     return useContext(UniformsContext).fragmentRef;