refactor(debug): rename hand-tracking SVG toggle to Model

The debug control now reflects what it actually gates: the 3D hand
model rendering (used by World.tsx to decide whether to show the
hand-tracking gloves), not the legacy SVG visualizer.

- Debug.ts: rename showHandTrackingSvg → showHandTrackingModel
  (state, GUI label "Show Model", getter/setter)
- World.tsx: gate showHandTrackingGloves on the new toggle and
  drop the unused HandTrackingGloveHandedness import
This commit is contained in:
Tom Boullay
2026-06-03 00:03:44 +02:00
parent 83194df14f
commit c6283d492c
2 changed files with 18 additions and 12 deletions
+9 -9
View File
@@ -85,7 +85,7 @@ export class Debug {
fogEnabled: boolean; fogEnabled: boolean;
handTrackingSource: HandTrackingSource; handTrackingSource: HandTrackingSource;
showDebugOverlay: boolean; showDebugOverlay: boolean;
showHandTrackingSvg: boolean; showHandTrackingModel: boolean;
showInteractionSpheres: boolean; showInteractionSpheres: boolean;
showPerf: boolean; showPerf: boolean;
sceneMode: SceneMode; sceneMode: SceneMode;
@@ -108,7 +108,7 @@ export class Debug {
fogEnabled: FOG_CONFIG.enabled, fogEnabled: FOG_CONFIG.enabled,
handTrackingSource: storedControls.handTrackingSource ?? "browser", handTrackingSource: storedControls.handTrackingSource ?? "browser",
showDebugOverlay: true, showDebugOverlay: true,
showHandTrackingSvg: false, showHandTrackingModel: false,
showInteractionSpheres: false, showInteractionSpheres: false,
showPerf: true, showPerf: true,
sceneMode: storedControls.sceneMode ?? "game", sceneMode: storedControls.sceneMode ?? "game",
@@ -156,10 +156,10 @@ export class Debug {
const handTrackingFolder = this.createFolder("Hand Tracking"); const handTrackingFolder = this.createFolder("Hand Tracking");
handTrackingFolder handTrackingFolder
?.add(this.controls, "showHandTrackingSvg") ?.add(this.controls, "showHandTrackingModel")
.name("Show SVG") .name("Show Model")
.onChange((value: boolean) => { .onChange((value: boolean) => {
this.controls.showHandTrackingSvg = value; this.controls.showHandTrackingModel = value;
this.emit(); this.emit();
}); });
@@ -281,12 +281,12 @@ export class Debug {
return this.controls.showInteractionSpheres; return this.controls.showInteractionSpheres;
} }
getShowHandTrackingSvg(): boolean { getShowHandTrackingModel(): boolean {
return this.controls.showHandTrackingSvg; return this.controls.showHandTrackingModel;
} }
setShowHandTrackingSvg(value: boolean): void { setShowHandTrackingModel(value: boolean): void {
this.controls.showHandTrackingSvg = value; this.controls.showHandTrackingModel = value;
this.emit(); this.emit();
} }
+9 -3
View File
@@ -6,6 +6,7 @@ import {
} from "@/data/player/playerConfig"; } from "@/data/player/playerConfig";
import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig"; import { LA_FABRIK_INITIAL_LOOK_AT } from "@/data/world/laFabrikConfig";
import { useCameraMode } from "@/hooks/debug/useCameraMode"; import { useCameraMode } from "@/hooks/debug/useCameraMode";
import { useDebugStore } from "@/hooks/debug/useDebugStore";
import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug"; import { useEnvironmentDebug } from "@/hooks/debug/useEnvironmentDebug";
import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug"; import { useMapPerformanceDebug } from "@/hooks/debug/useMapPerformanceDebug";
import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug"; import { useCharacterDebug } from "@/hooks/debug/useCharacterDebug";
@@ -32,7 +33,6 @@ import { CharacterSystem } from "@/world/characters/CharacterSystem";
import { Player } from "@/world/player/Player"; import { Player } from "@/world/player/Player";
import { TestMap } from "@/world/debug/TestMap"; import { TestMap } from "@/world/debug/TestMap";
import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading"; import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
import type { HandTrackingGloveHandedness } from "@/hooks/handTracking/useHandTrackingGloveStatus";
import type { HandTrackingHand } from "@/types/handTracking/handTracking"; import type { HandTrackingHand } from "@/types/handTracking/handTracking";
interface WorldProps { interface WorldProps {
@@ -41,7 +41,7 @@ interface WorldProps {
function hasTrackedHand( function hasTrackedHand(
hands: HandTrackingHand[], hands: HandTrackingHand[],
handedness: HandTrackingGloveHandedness, handedness: "left" | "right",
): boolean { ): boolean {
return hands.some((hand) => hand.handedness.toLowerCase() === handedness); return hands.some((hand) => hand.handedness.toLowerCase() === handedness);
} }
@@ -60,6 +60,9 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
(state) => state.showPlayerModel, (state) => state.showPlayerModel,
); );
const showDebugOctree = useDebugVisualsStore((state) => state.showOctree); const showDebugOctree = useDebugVisualsStore((state) => state.showOctree);
const showHandTrackingModel = useDebugStore((debug) =>
debug.getShowHandTrackingModel(),
);
const { hands, status, usageStatus } = useHandTrackingSnapshot(); const { hands, status, usageStatus } = useHandTrackingSnapshot();
const { const {
octree, octree,
@@ -74,7 +77,10 @@ export function World({ onLoadingStateChange }: WorldProps): React.JSX.Element {
? PLAYER_SPAWN_POSITION_GAME ? PLAYER_SPAWN_POSITION_GAME
: PLAYER_SPAWN_POSITION_PHYSICS; : PLAYER_SPAWN_POSITION_PHYSICS;
const showHandTrackingGloves = const showHandTrackingGloves =
status === "connected" && usageStatus !== "inactive" && hands.length > 0; showHandTrackingModel &&
status === "connected" &&
usageStatus !== "inactive" &&
hands.length > 0;
const showLeftHandTrackingGlove = const showLeftHandTrackingGlove =
showHandTrackingGloves && hasTrackedHand(hands, "left"); showHandTrackingGloves && hasTrackedHand(hands, "left");
const showRightHandTrackingGlove = const showRightHandTrackingGlove =