math-pixel/La-Fabrik
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

update: debug overlay layout controls

Browse Source
This commit is contained in:
Tom Boullay
2026-05-01 23:39:04 +02:00
parent 1a783f1867
commit eef39ab53d
20 changed files with 581 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/technical/architecture.md
+4
View File
@@ -39,8 +39,12 @@ This document describes the code that exists today in the repository.
- `src/utils/debug/Debug.ts` owns the `lil-gui` instance and debug controls.
- `src/hooks/debug/useCameraMode.ts` and `src/hooks/debug/useSceneMode.ts` subscribe to debug state.
- `src/components/debug/DebugPerf.tsx` lazily mounts `r3f-perf` in debug mode.
- `src/components/ui/debug/DebugOverlayLayout.tsx` mounts the compact HTML debug overlay when enabled from `lil-gui`.
- `src/components/ui/debug/GameStateDebugPanel.tsx` exposes current game state, main/sub-state switching, previous/next step controls, and reset.
- `src/components/ui/debug/HandTrackingDebugPanel.tsx` shows hand tracking status, usage, model-loaded placeholder, hand count, and fist state while hand tracking is active.
- `src/components/debug/scene/DebugHelpers.tsx` mounts debug helpers.
- `src/components/debug/scene/DebugCameraControls.tsx` mounts the free debug camera.
- `lil-gui` global debug controls include camera mode, scene mode, `R3F Perf`, and `Debug Overlay`; interaction-specific controls live in the `Interaction` folder.
## 3D Component Domains
docs/technical/hand-tracking.md
+2 -2
View File
@@ -104,12 +104,12 @@ The final hold distance is clamped between the configured grab minimum and maxim
The current debug UI includes:
- `HandTrackingOverlay` for status, usage, server state, hand count, and fist state
- `HandTrackingDebugPanel` inside `DebugOverlayLayout` for status, usage, model-loaded placeholder, server state, hand count, and fist state
- `HandTrackingVisualizer` for the SVG landmark wireframe
- `r3f-perf` for render performance
- `lil-gui` for scene, camera, lighting, interaction, and grab controls
The hand tracking overlay is an HTML overlay outside the canvas. The hand wireframe is also HTML/SVG, not a 3D hand model.
The hand tracking debug panel is a compact HTML grid outside the canvas. `Model loaded` is currently hardcoded to `none` until model-loading information is wired into the hand tracking flow. The hand wireframe is also HTML/SVG, not a 3D hand model.
## Known Limitations
docs/technical/zustand.md
+2 -1
View File
@@ -143,7 +143,8 @@ In React Three Fiber, mounting and unmounting JSX controls what appears in the T
Current overlays:
- `GameStateHUD`: debug-only progression panel shown with `?debug`
- `DebugOverlayLayout`: debug-only overlay shown with `?debug`, including the `GameStateDebugPanel` progression panel
- `GameStateDebugPanel`: compact debug UI for viewing and switching main/sub states, stepping backward or forward, and resetting the store
- `Crosshair`: player aiming helper
- `InteractPrompt`: interaction prompt
docs/user/features.md
+2 -1
View File
@@ -33,7 +33,8 @@ This document lists features that are implemented in the current codebase.
## Debug Tooling
- `?debug` query param enables the debug panel
- `lil-gui` controls for camera mode, scene mode, and interaction spheres
- `lil-gui` controls for camera mode, scene mode, `R3F Perf`, `Debug Overlay`, and interaction tuning
- Compact debug overlay for game state controls and hand tracking status
- Debug scene helpers
- Free debug camera
- `r3f-perf` overlay