WebXR Hand Tracking: Berührungslose Interfaces erstellen

Einführung in Virtual Reality

Eine umfassende Einführung in die Virtual Reality, die die Grundlagen der Computergrafik, stereoskopisches Sehen, die Geschichte von VR, Gerätekategorien, Motion Tracking und das Reality-Virtuality-Kontinuum abdeckt.

Integrationsmuster für AI + XR

Praktische Patterns für die Integration von LLMs, VLMs und neuronalen Netzen in immersive XR-Umgebungen — von räumlichen KI-Assistenten bis hin zum Echtzeit-Szenenverständnis.

Hand-Tracking in WebXR ermöglicht natürliche, berührungslose Interaktionen. Die WebXR Hand Tracking API stellt Gelenkpositionen bereit, um gestenbasierte Benutzeroberflächen zu erstellen.

Browser-Unterstützung

Grundlegende Einrichtung

Session-Konfiguration

const session = await navigator.xr.requestSession('immersive-vr', {
  requiredFeatures: ['local', 'hand-tracking']
});
```text

### Zugriff auf Handdaten

```javascript
function onXRFrame(time, frame) {
  const session = frame.session;

  for (const source of session.inputSources) {
    if (source.hand) {
      processHand(source.hand, source.handedness);
    }
  }
}
```text

## Gelenkpositionen

Die API stellt 25 Gelenke pro Hand bereit:

```javascript
const WRIST = 0;
const THUMB_TIP = 4;
const INDEX_TIP = 9;
const MIDDLE_TIP = 14;
const RING_TIP = 19;
const PINKY_TIP = 24;

function getJointPosition(hand, jointIndex) {
  const joint = hand.get(jointIndex);
  return joint?.pose?.position;
}
```text

## Gestenerkennung

### Pinch-Erkennung

```javascript
function detectPinch(hand) {
  const thumbTip = getJointPosition(hand, THUMB_TIP);
  const indexTip = getJointPosition(hand, INDEX_TIP);

  const distance = thumbTip.distanceTo(indexTip);
  return distance < 0.02; // 2cm threshold
}
```text

### Zeigegeste

```javascript
function detectPoint(hand) {
  const indexExtended = isFingerExtended(hand, 'index');
  const othersCurled = ['middle', 'ring', 'pinky'].every(
    finger => !isFingerExtended(hand, finger)
  );

  return indexExtended && othersCurled;
}
```text

## Erstellung interaktiver Elemente

### Raycasting von der Hand

```javascript
function handRaycast(hand, scene) {
  const wristPos = getJointPosition(hand, WRIST);
  const indexPos = getJointPosition(hand, INDEX_TIP);

  const direction = indexPos.clone().sub(wristPos).normalize();
  const raycaster = new THREE.Raycaster(wristPos, direction);

  return raycaster.intersectObjects(scene.children);
}
```text

## Überlegungen zur Barrierefreiheit

1. **Alternativen bereitstellen** – Nicht alle Nutzer können Hand-Tracking verwenden.
2. **Visuelles Feedback** – Handposition und Gestenstatus anzeigen.
3. **Haptisches Feedback** – Vibrationen zur Bestätigung nutzen.
4. **Ruhepositionen** – Ermüdung durch neutrale Posen vermeiden.

## Performance-Tipps

- Hand-Meshes mit maximal 30 fps aktualisieren.
- Einfache Collision-Shapes verwenden.
- Gelenk-Updates bündeln (Batching).
- Gestenerkennung debouncen.

## Fazit

Hand-Tracking eröffnet neue Interaktionsparadigmen. Beginnen Sie mit einfachen Gesten, steigern Sie die Komplexität schrittweise und bieten Sie stets Fallbacks an.