WebXR Anchors: Erstellung persistenter AR-Erlebnisse

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.

Android XR wird erwachsen: Auto-Spatialization, Enterprise und das SDK, das Sie kennen sollten

Google und Samsung haben gerade das größte Android XR-Update seit dem Launch veröffentlicht. Auto-Spatialization verwandelt jede 2D-App in 3D, Android Enterprise ermöglicht Fleet-Deployments und das SDK unterstützt nun fünf Engines.

Anchors lösen ein grundlegendes AR-Problem: die Verknüpfung von virtuellen Inhalten mit realen Standorten. Ohne Anchors driften AR-Objekte weg, während man sich bewegt.

Das Anchor-Problem

Traditionelles AR platziert Objekte relativ zur Kamera. Wenn man sich im Raum bewegt:

• Bleiben Objekte nicht an realen Orten „fixiert“
• Beim Zurückkehren an einen Ort werden vorherige Inhalte nicht angezeigt
• Multi-User-Erlebnisse sind nahezu unmöglich

Anchors lösen all drei Probleme.

Anchor API

Unterstützung prüfen

const session = await navigator.xr.requestSession('immersive-ar', {
  requiredFeatures: ['anchors']
});

const anchorsSupported = session.enabledFeatures?.includes('anchors');
```text

### Anchor erstellen

```javascript
async function createAnchor(position, orientation) {
  const anchor = await session.addAnchor(
    new XRRigidTransform(position, orientation)
  );
  return anchor;
}
```text

### Anchor aus Hit Test

```javascript
async function placeAnchorAtTap() {
  const hitTestSource = await session.requestHitTestSource({ space: viewerSpace });

  session.requestAnimationFrame((time, frame) => {
    const results = frame.getHitTestResults(hitTestSource);

    if (results.length > 0) {
      const pose = results[0].getPose(referenceSpace);
      const anchor = await frame.createAnchor(pose, referenceSpace);
      placeObjectAtAnchor(anchor);
    }
  });
}
```text

## Arbeiten mit Anchors

### Anchor Pose speichern

```javascript
const anchors = new Map();

function trackAnchor(anchor, objectId) {
  anchors.set(anchor, {
    id: objectId,
    createdAt: Date.now()
  });
}

function updateAnchors(frame, referenceSpace) {
  for (const [anchor, data] of anchors) {
    const pose = frame.getPose(anchor.anchorSpace, referenceSpace);
    if (pose) {
      updateObjectPosition(data.id, pose.transform);
    }
  }
}
```text

### Anchor entfernen

```javascript
function removeAnchor(anchor) {
  anchor.delete();
  anchors.delete(anchor);
}
```text

## Persistenz über Sessions hinweg

### Anchor-Daten speichern

```javascript
async function saveAnchors() {
  const anchorData = [];

  for (const [anchor, data] of anchors) {
    // Get current pose
    const pose = frame.getPose(anchor.anchorSpace, referenceSpace);

    anchorData.push({
      id: data.id,
      position: pose.transform.position,
      orientation: pose.transform.orientation,
      timestamp: Date.now()
    });
  }

  // Save to localStorage or cloud
  localStorage.setItem('arAnchors', JSON.stringify(anchorData));
}
```text

### Anchors wiederherstellen

```javascript
async function restoreAnchors() {
const savedData = JSON.parse(localStorage.getItem('arAnchors') |  | '[]');

  for (const data of savedData) {
    const transform = new XRRigidTransform(
data.position,
      data.orientation
    );

    const anchor = await frame.createAnchor(transform, referenceSpace);

    placeObjectAtAnchor(anchor, data.id);
  }
}
```text

## World Tracking

### Persistent Anchor IDs

Some devices support persistent anchor IDs:

```javascript
async function checkPersistence() {
  if ('requestPersistentAnchor' in session) {
    // Persistente Anchors werden unterstützt
    const anchor = await session.requestPersistentAnchor('room-center');
  }
}
```text

### Cloud Anchor Services

For cross-device persistence:

```javascript
// Verwendung eines Cloud-Anchor-Dienstes
async function shareAnchor(anchor) {
  const pose = frame.getPose(anchor.anchorSpace, referenceSpace);

  const response = await fetch('/api/anchors', {
    method: 'POST',
    body: JSON.stringify({
      position: pose.transform.position,
      orientation: pose.transform.orientation,
      environmentData: await captureEnvironmentMap()
    })
  });

  const { anchorId } = await response.json();
  return anchorId;
}
```text

## Complete Example

```javascript
class ARAnchorManager {
  constructor(session) {
    this.session = session;
    this.anchors = new Map();
    this.objects = new Map();
  }

  async placeObject(position, object) {
    const transform = new XRRigidTransform(position);
    const anchor = await this.session.addAnchor(transform);

    this.anchors.set(anchor, object);
    this.objects.set(object.id, anchor);

    return anchor;
  }

  update(frame, referenceSpace) {
    for (const [anchor, object] of this.anchors) {
      const pose = frame.getPose(anchor.anchorSpace, referenceSpace);
      if (pose) {
        object.position.copy(pose.transform.position);
        object.quaternion.copy(pose.transform.orientation);
      }
    }
  }

  removeObject(objectId) {
    const anchor = this.objects.get(objectId);
    if (anchor) {
      anchor.delete();
      this.anchors.delete(anchor);
      this.objects.delete(objectId);
    }
  }

  save() {
    const data = [];
    for (const [anchor, object] of this.anchors) {
      data.push({
        objectId: object.id,
        // Position in Weltkoordinaten
      });
    }
    localStorage.setItem('arAnchors', JSON.stringify(data));
  }
}
```text

## Browser Support

| Feature | Chrome | Safari | Edge |
| --------- | -------- | -------- | ------ |
| Basic Anchors | 85+ | 16+ | 85+ |
| Persistent Anchors | Limited | 16+ | Limited |
| Hit Test | 79+ | 16+ | 79+ |

## Best Practices

1. **Create anchors sparingly** - They consume resources
2. **Clean up deleted anchors** - Call `anchor.delete()`
3. **Handle tracking loss** - Anchors may become invalid
4. **Test on real devices** - Desktop AR doesn't exist

## Conclusion

Anchors transform AR from a novelty into a practical technology. Content that persists in real locations enables navigation, gaming, and industrial applications.
```
Please provide the text you would like me to translate.