add hand tracking source debug switch

src/providers/gameplay/HandTrackingProvider.tsx

@@ -1,10 +1,12 @@
 import type { ReactNode } from "react";
 import { useSceneMode } from "@/hooks/debug/useSceneMode";
+import { useDebugStore } from "@/hooks/debug/useDebugStore";
 import { useInteraction } from "@/hooks/interaction/useInteraction";
 import {
   HAND_TRACKING_IDLE_SNAPSHOT,
   HandTrackingContext,
 } from "@/hooks/handTracking/useHandTrackingSnapshot";
+import { useBrowserHandTracking } from "@/hooks/handTracking/useBrowserHandTracking";
 import { useRemoteHandTracking } from "@/hooks/handTracking/useRemoteHandTracking";
 
 export function HandTrackingProvider({
@@ -13,9 +15,19 @@ export function HandTrackingProvider({
   children: ReactNode;
 }): React.JSX.Element {
   const sceneMode = useSceneMode();
+  const handTrackingSource = useDebugStore((debug) =>
+    debug.getHandTrackingSource(),
+  );
   const { nearby, holding, handHolding } = useInteraction();
   const enabled = sceneMode === "physics" && (nearby || holding || handHolding);
-  const snapshot = useRemoteHandTracking({ enabled });
+  const backendSnapshot = useRemoteHandTracking({
+    enabled: enabled && handTrackingSource === "backend",
+  });
+  const browserSnapshot = useBrowserHandTracking({
+    enabled: enabled && handTrackingSource === "browser",
+  });
+  const snapshot =
+    handTrackingSource === "browser" ? browserSnapshot : backendSnapshot;
 
   return (
     <HandTrackingContext

src/utils/debug/Debug.ts

@@ -1,5 +1,6 @@
 import GUI from "lil-gui";
 import type { CameraMode, SceneMode } from "@/types/debug/debug";
+import type { HandTrackingSource } from "@/types/handTracking/handTracking";
 import { isDebugEnabled } from "@/utils/debug/isDebugEnabled";
 
 const DEBUG_CONTROLS_STORAGE_KEY = "la-fabrik-debug-controls";
@@ -52,6 +53,7 @@ export class Debug {
   private readonly listeners = new Set<() => void>();
   private readonly controls: {
     cameraMode: CameraMode;
+    handTrackingSource: HandTrackingSource;
     showDebugOverlay: boolean;
     showHandTrackingSvg: boolean;
     showInteractionSpheres: boolean;
@@ -73,6 +75,7 @@ export class Debug {
 
     this.controls = {
       cameraMode: storedControls.cameraMode ?? "player",
+      handTrackingSource: "backend",
       showDebugOverlay: true,
       showHandTrackingSvg: false,
       showInteractionSpheres: false,
@@ -123,11 +126,22 @@ export class Debug {
 
       handTrackingFolder
         ?.add(this.controls, "showHandTrackingSvg")
-        .name("Afficher SVG")
+        .name("Show SVG")
         .onChange((value: boolean) => {
           this.controls.showHandTrackingSvg = value;
           this.emit();
         });
+
+      handTrackingFolder
+        ?.add(this.controls, "handTrackingSource", {
+          Backend: "backend",
+          "Browser JS": "browser",
+        })
+        .name("Source")
+        .onChange((value: HandTrackingSource) => {
+          this.controls.handTrackingSource = value;
+          this.emit();
+        });
     }
   }
 
@@ -187,6 +201,10 @@ export class Debug {
     return this.active && this.controls.showDebugOverlay;
   }
 
+  getHandTrackingSource(): HandTrackingSource {
+    return this.controls.handTrackingSource;
+  }
+
   getShowInteractionSpheres(): boolean {
     return this.controls.showInteractionSpheres;
   }