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

fix hand tracking glove rendering

Browse Source
This commit is contained in:
Tom Boullay
2026-05-02 11:32:00 +02:00
parent bdc06f772f
commit fe662ebe7d
16 changed files with 319 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/HandTrackingVisualizer.tsx
+6 -1
View File
@@ -1,4 +1,5 @@
import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
import { useHandTrackingGloveStatus } from "@/hooks/handTracking/useHandTrackingGloveStatus";
const HAND_CONNECTIONS: Array<[number, number]> = [
[0, 1],
@@ -26,8 +27,12 @@ const HAND_CONNECTIONS: Array<[number, number]> = [
export function HandTrackingVisualizer(): React.JSX.Element | null {
const { hands, status } = useHandTrackingSnapshot();
const gloves = useHandTrackingGloveStatus((state) => state.gloves);
const shouldShowSvgFallback = Object.values(gloves).some(
(gloveStatus) => gloveStatus === "error" || gloveStatus === "idle",
);
if (status === "idle" || hands.length === 0) {
if (status === "idle" || hands.length === 0 || !shouldShowSvgFallback) {
return null;
}
src/components/ui/debug/HandTrackingDebugPanel.tsx
+13 -7
View File
@@ -1,4 +1,5 @@
import { useHandTrackingSnapshot } from "@/hooks/handTracking/useHandTrackingSnapshot";
import { useHandTrackingGloveStatus } from "@/hooks/handTracking/useHandTrackingGloveStatus";
import type { HandTrackingStatus } from "@/types/handTracking/handTracking";
const STATUS_LABELS: Record<HandTrackingStatus, string> = {
@@ -15,22 +16,23 @@ const STATUS_LABELS: Record<HandTrackingStatus, string> = {
export function HandTrackingDebugPanel(): React.JSX.Element | null {
const { hands, status, usageStatus, serverStatus, error } =
useHandTrackingSnapshot();
const gloves = useHandTrackingGloveStatus((state) => state.gloves);
if (status === "idle") {
return null;
}
const fist = hands.some((hand) => hand.isFist);
const hasLeftHand = hands.some(
(hand) => hand.handedness.toLowerCase() === "left",
);
const hasRightHand = hands.some(
(hand) => hand.handedness.toLowerCase() === "right",
);
const modelLoaded =
[hasLeftHand ? "gant_l" : null, hasRightHand ? "gant_r" : null]
[
gloves.left === "loaded" ? "gant_l" : null,
gloves.right === "loaded" ? "gant_r" : null,
]
.filter(Boolean)
.join(", ") || "none";
const modelFallback = Object.values(gloves).some(
(gloveStatus) => gloveStatus === "error",
);
return (
<section
@@ -51,6 +53,10 @@ export function HandTrackingDebugPanel(): React.JSX.Element | null {
<dt>Model loaded</dt>
<dd>{modelLoaded}</dd>
</div>
<div>
<dt>SVG fallback</dt>
<dd>{modelFallback ? "yes" : "no"}</dd>
</div>
{serverStatus ? (
<div>
<dt>Server</dt>