WebXR Hand Tracking: Berührungslose Interfaces erstellen

XR Performance: Real-Time Inference Optimization

Optimizing AI inference for XR devices — model quantization, NPU acceleration, hierarchical serving, bandwidth optimization for real-time 60fps rendering.

WebXR + AI in 2026: Where the Platform Actually Is Today

WebGPU hit Baseline, Safari finally shipped WebXR, AI-assisted XR development landed from Meta and Google, and adoption surged 40%. A no-hype look at the immersive web ecosystem in mid-2026.

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.