Das Fundament des Spatial Web: Ein tiefer Einblick in WebXR Persistent Anchors

Stellen Sie sich vor, Sie platzieren mit Ihrem Smartphone ein virtuelles Möbelstück in Ihrem Wohnzimmer. Sie passen es an, gehen darum herum und sehen, wie es passt. Stellen Sie sich nun vor, Sie schließen den Browser, und wenn Sie morgen zurückkehren, steht das virtuelle Möbelstück genau dort, wo Sie es verlassen haben. Ihr Partner kann sogar dieselbe Webseite auf seinem Gerät öffnen und dasselbe Möbelstück an derselben Stelle sehen. Das ist der Zauber der Persistenz in Augmented Reality, und sie ist nicht länger das ausschließliche Gebiet nativer Anwendungen. Willkommen in der Welt der WebXR Persistent Anchors.

Seit Jahren ist webbasierte Augmented Reality (WebAR) eine faszinierende, aber oft flüchtige Erfahrung. Digitale Objekte erschienen, aber in dem Moment, in dem die Sitzung endete, verschwanden sie im digitalen Äther. Dies beschränkte WebAR auf kurzlebige Marketingkampagnen oder einfache Demonstrationen. Persistente Anker ändern dieses Paradigma vollständig. Sie sind eine grundlegende Technologie, die es ermöglicht, digitale Inhalte in der realen Welt zu 'speichern' und so sinnvolle, sitzungsübergreifende Erlebnisse zu schaffen, auf die jeder mit einem Webbrowser zugreifen kann.

Dieser umfassende Leitfaden richtet sich an Entwickler, Produktmanager und Technologiebegeisterte auf der ganzen Welt. Wir werden untersuchen, was persistente Anker sind, wie sie funktionieren, wie man sie mit der WebXR Device API implementiert und welche unglaublichen Anwendungen sie für ein wirklich globales, immersives Web erschließen.

Was genau sind WebXR-Anker?

Bevor wir uns mit der Persistenz befassen, wollen wir klären, was ein Anker im Kontext von XR (Extended Reality) ist. Ein Anker ist ein spezifischer, fester Punkt und eine feste Ausrichtung in der realen Welt, die das Tracking-System eines Geräts überwachen kann. Stellen Sie sich das wie eine digitale Reiszwecke vor, die Sie an einem realen Ort anbringen.

Ihr AR-fähiges Gerät analysiert ständig seine Umgebung mithilfe seiner Kameras und Sensoren, ein Prozess, der oft als SLAM (Simultaneous Localization and Mapping) bezeichnet wird. Es identifiziert eindeutige Merkmalspunkte – Ecken von Möbeln, Muster an einer Wand, Texturen auf dem Boden –, um seine eigene Position und Ausrichtung innerhalb eines Raums zu verstehen. Ein Anker ist ein Punkt, der mit diesem Verständnis der Welt verbunden ist. Während Sie sich bewegen, aktualisiert das Gerät kontinuierlich die Position Ihrer virtuellen Objekte relativ zum Anker und stellt so sicher, dass sie stabil und fest in der realen Welt erscheinen.

Transiente vs. Persistente Anker: Der entscheidende Unterschied

Die Unterscheidung zwischen Ankertypen ist entscheidend für das Verständnis ihrer Leistungsfähigkeit:

• Transiente Anker (Sitzungsbasiert): Dies sind die Standardanker, die in WebXR schon seit einiger Zeit verfügbar sind. Sie werden erstellt und existieren nur für die Dauer einer einzigen XR-Sitzung. Wenn der Benutzer den Tab schließt oder wegnavigiert, gehen der Anker und sein Bezug zur realen Welt für immer verloren. Sie sind perfekt für spontane Erlebnisse, wie zum Beispiel ein schnelles Spiel auf einem Tisch.
• Persistente Anker (Sitzungsübergreifend): Das ist der Game-Changer. Ein persistenter Anker ist ein Anker, der vom Browser gespeichert und in einer zukünftigen Sitzung wiederhergestellt werden kann. Das Gerät speichert die Position des Ankers relativ zur realen Welt. Wenn Sie eine neue AR-Sitzung im selben physischen Raum starten, können Sie den Browser bitten, diesen Anker zu 'laden', und Ihre virtuellen Inhalte erscheinen genau dort wieder, wo Sie sie verlassen haben.

Analogie: Ein transienter Anker ist wie das Schreiben auf eine Tafel, die am Ende des Tages gelöscht wird. Ein persistenter Anker ist wie das Gravieren dieser Informationen auf einer dauerhaften Plakette, die an der Wand befestigt ist.

Das 'Persistenzproblem' und warum es für ein globales Web wichtig ist

Das Fehlen von Persistenz war ein grundlegendes Hindernis für die Entwicklung von tiefgreifenden und ansprechenden AR-Anwendungen. Ohne sie ist jede Erfahrung ein 'One-Shot'-Deal, der jedes Mal auf Null zurückgesetzt wird. Diese Einschränkung verhindert die Entwicklung von Anwendungen, die im Laufe der Zeit einen Mehrwert schaffen.

Berücksichtigen Sie diese Szenarien, die im Web bisher unmöglich waren:

• Kollaboratives Design: Ein Architektenteam in Tokio und ein Kunde in Berlin möchten ein 3D-Modell auf einem physischen Besprechungsraumtisch überprüfen. Ohne Persistenz müssten sie das Modell jedes Mal manuell neu ausrichten, wenn sie die Anwendung öffneten.
• Industrielle Schulung: Ein Techniker muss virtuelle Anweisungen auf einem komplexen Gerät für den nächsten Schichtarbeiter hinterlassen. Ohne Persistenz würden diese Anweisungen verschwinden, wenn die Sitzung des ersten Technikers endet.
• Personalisierte Räume: Ein Benutzer möchte sein Zuhause mit virtueller Kunst dekorieren. Sie würden alle ihre sorgfältig platzierten Kunstwerke jedes Mal verlieren, wenn sie den Browser schließen.

Persistente Anker lösen dieses Problem, indem sie eine Brücke zwischen digitalen Sitzungen schaffen, die in der physischen Welt verankert sind. Dies ermöglicht eine neue Klasse von Anwendungen, die kontextbezogen, kollaborativ und kontinuierlich sind und die Bausteine des 'Spatial Web' oder 'Metaverse' bilden – einer Welt, in der digitale Informationen nahtlos in unsere physische Umgebung integriert sind.

Wie Persistent Anchors funktionieren: Ein Blick unter die Haube

Die Technologie hinter persistenten Ankern ist ein Wunderwerk der Computer Vision und des Spatial Computing. Während die API einen Großteil der Komplexität abstrahiert, ist das Verständnis der Kernkonzepte für Entwickler hilfreich.

1. Kartierung der Welt: Wenn Sie eine AR-Sitzung starten, beginnt Ihr Gerät mit dem Aufbau einer Karte seiner Umgebung. Es ist keine fotografische Karte, sondern eine Wolke aus eindeutigen Merkmalspunkten. Diese Karte ist eine mathematische Darstellung der Geometrie des Raums.
2. Erstellen eines Ankers: Wenn Sie die Erstellung eines Ankers an einer bestimmten Position anfordern, verknüpft das System die Koordinaten dieses Ankers mit der zugrunde liegenden Feature-Point-Karte.
3. Generieren einer UUID: Für einen persistenten Anker generiert das System einen Universally Unique Identifier (UUID) – eine lange, eindeutige Zeichenkette –, die als permanente ID des Ankers dient. Diese UUID wird Ihrer Webanwendung gegeben.
4. Speichern der UUID: Es liegt in der Verantwortung Ihrer Anwendung, diese UUID zu speichern. Sie können sie im localStorage des Browsers für ein Einzelbenutzer-, Einzelgerät-Erlebnis speichern, oder Sie können sie an einen Server senden, um sie mit anderen Benutzern zu teilen oder von anderen Geräten aus darauf zuzugreifen.
5. Re-Lokalisierung: Wenn Sie eine neue Sitzung am selben physischen Ort starten, beginnt das Gerät erneut mit der Kartierung seiner Umgebung. Es vergleicht die neue Karte mit zuvor gespeicherten Karten. Wenn es eine Übereinstimmung findet, 're-lokalisiert' es sich erfolgreich.
6. Wiederherstellen des Ankers: Ihre Anwendung stellt der WebXR API die gespeicherten UUID(s) zur Verfügung. Wenn sich das Gerät erfolgreich in dem Bereich re-lokalisiert hat, in dem dieser Anker erstellt wurde, kann das System die aktuelle Position des Ankers bestimmen und ihn für Ihre Anwendung zur Verwendung wiederherstellen.

Ein Hinweis zum Datenschutz: Dieser Prozess ist auf den Datenschutz ausgelegt. Die vom Gerät gespeicherten Feature-Point-Karten sind abstrakte Daten, keine lesbaren Bilder oder Videos der Umgebung des Benutzers. Die WebXR-Spezifikation erfordert die ausdrückliche Zustimmung des Benutzers zur Verwendung von Funktionen wie Ankern, um sicherzustellen, dass der Benutzer immer die Kontrolle hat.

Implementierung persistenter Anker: Ein praktischer Leitfaden für Entwickler

Lassen Sie uns praktisch werden. Die Implementierung persistenter Anker umfasst einige wichtige Schritte innerhalb des WebXR Device API-Lebenszyklus. Die folgenden Beispiele verwenden JavaScript und setzen eine grundlegende Vertrautheit mit der Einrichtung einer WebXR-Sitzung voraus.

1. Feature-Erkennung und Sitzungsanfrage

Zuerst müssen Sie das `anchors`-Feature anfordern, wenn Sie Ihre XR-Sitzung erstellen. Dies ist ein erforderliches Feature, was bedeutet, dass die Sitzung nicht gestartet werden kann, wenn der Browser es nicht unterstützt.

            
async function activateXR() {
  // Check for WebXR support
  if (!navigator.xr) {
    console.error("WebXR is not available.");
    return;
  }

  // Request an immersive-ar session with the 'anchors' feature
  try {
    const session = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['anchors']
    });
    
    // ... session setup ...
  } catch (error) {
    console.error("Failed to start AR session:", error);
  }
}

            

              
                Copy
              
            
          

2. Erstellen und Speichern eines neuen Ankers

Sobald Ihre Sitzung läuft, können Sie einen Anker erstellen. Dies geschieht typischerweise als Reaktion auf eine Benutzeraktion, wie z. B. ein Bildschirmtippen. Sie führen einen Hit-Test durch, um eine reale Oberfläche zu finden, und erstellen dann einen Anker an dieser Position.

            
// Inside your render loop or event handler
async function onSelect(event) {
  const frame = event.frame;
  const session = frame.session;

  // Create a hit test source
  const hitTestSource = await session.requestHitTestSource({ space: event.inputSource.targetRaySpace });
  const hitTestResults = frame.getHitTestResults(hitTestSource);

  if (hitTestResults.length > 0) {
    const hitPose = hitTestResults[0].getPose(xrReferenceSpace);

    try {
      // Create the anchor at the hit-tested position
      const anchor = await frame.createAnchor(hitPose.transform);
      console.log("Anchor created successfully.");

      // THE CRITICAL STEP: Store the anchor's UUID
      // The anchor object has a UUID if persistence is supported.
      if (anchor.anchorUUID) {
        saveAnchorUUID(anchor.anchorUUID);
      }

    } catch (error) {
      console.error("Could not create anchor:", error);
    }
  }
}

// Example function to save the UUID to localStorage
function saveAnchorUUID(uuid) {
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  if (!savedAnchors.includes(uuid)) {
    savedAnchors.push(uuid);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
    console.log(`Saved anchor UUID: ${uuid}`);
  }
}

            

              
                Copy
              
            
          

3. Wiederherstellen von Ankern in einer neuen Sitzung

Wenn eine neue Sitzung beginnt, besteht Ihre erste Aufgabe darin, Ihre gespeicherten UUIDs zu laden und das System aufzufordern, sie wiederherzustellen. Der Browser wird dann versuchen, sie in der Umgebung zu finden.

            
// When your session starts
async function onSessionStarted(session) {
  // ... other setup ...

  // Restore previously saved anchors
  await restoreSavedAnchors(session);
}

async function restoreSavedAnchors(session) {
  const savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');

  if (savedAnchors.length === 0) {
    console.log("No anchors to restore.");
    return;
  }

  console.log(`Attempting to restore ${savedAnchors.length} anchors...`);

  try {
    // The restoreAnchor method returns a promise that resolves when the anchor is found
    const restoredAnchors = await Promise.all(
      savedAnchors.map(uuid => session.restoreAnchor(uuid))
    );

    restoredAnchors.forEach(anchor => {
      if (anchor) {
        console.log(`Successfully restored anchor with UUID: ${anchor.anchorUUID}`);
        // Now you can attach your 3D model to this restored anchor
        add3DObjectToAnchor(anchor);
      }
    });

  } catch (error) {
    console.error("An error occurred while restoring anchors:", error);
  }
}

            

              
                Copy
              
            
          

4. Verwalten und Löschen von Ankern

Ihre Anwendung sollte auch das Löschen von Ankern behandeln, sowohl aus Ihrer Szene als auch aus Ihrem persistenten Speicher. Die Eigenschaft `trackedAnchors` der Sitzung ist ein `Set`, das alle Anker (sowohl neu erstellte als auch wiederhergestellte) enthält, die gerade verfolgt werden.

            
// To delete an anchor
function deleteAnchor(anchor) {
  // Remove from persistent storage
  const uuid = anchor.anchorUUID;
  let savedAnchors = JSON.parse(localStorage.getItem('my-ar-app-anchors') || '[]');
  const index = savedAnchors.indexOf(uuid);
  if (index > -1) {
    savedAnchors.splice(index, 1);
    localStorage.setItem('my-ar-app-anchors', JSON.stringify(savedAnchors));
  }

  // Tell the system to stop tracking it
  anchor.delete();
  console.log(`Deleted anchor with UUID: ${uuid}`);
}

// You can iterate through all tracked anchors in your render loop
function render(time, frame) {
  for (const anchor of frame.session.trackedAnchors) {
    // Get the anchor's pose and update your 3D object's position
    const anchorPose = frame.getPose(anchor.anchorSpace, xrReferenceSpace);
    if (anchorPose) {
      // Update 3D model matrix
    }
  }
}

            

              
                Copy
              
            
          

Globale Anwendungsfälle und Anwendungen, die durch Persistenz erschlossen werden

Persistente Anker erheben WebAR von einer Neuheit zu einem Werkzeug und eröffnen leistungsstarke Anwendungen in unzähligen Branchen weltweit.

E-Commerce und Einzelhandel

Globale Marken können 'Vor dem Kauf ausprobieren'-Erlebnisse anbieten, die persistent sind. Ein Benutzer in Brasilien kann einen virtuellen Fernseher einer koreanischen Elektronikmarke an seine Wand stellen. Sie können den Browser schließen, ihn mit ihrer Familie besprechen und ihn später wieder öffnen, um ihn genau an derselben Stelle zu sehen. Dies schafft ein viel überzeugenderes und nützlicheres Einkaufserlebnis.

Industrielle und Enterprise-Lösungen

Ein Wartungsingenieur in einem deutschen Automobilwerk kann eine Web-App verwenden, um persistente digitale Markierungen auf einer Maschine zu platzieren, die auf Punkte hinweisen, die gewartet werden müssen. Ein Techniker in der nächsten Schicht, vielleicht ein Auftragnehmer aus einem anderen Land, der eine andere Sprache spricht, kann denselben Weblink auf seinem Tablet öffnen und sofort die AR-Anmerkungen sehen, die perfekt auf die reale Ausrüstung ausgerichtet sind, wodurch Kommunikationslücken überbrückt und die Effizienz verbessert wird.

Architektur, Ingenieurwesen und Bauwesen (AEC)

Ein Architekturbüro in den Vereinigten Staaten kann einen Link mit einem Kunden in Dubai teilen. Der Kunde kann ein virtuelles Modell des vorgeschlagenen Gebäudes im Maßstab 1:1 auf der tatsächlichen Baustelle platzieren. Das Modell bleibt bestehen, sodass sie es durchgehen und über mehrere Tage Feedback geben können, während sie die Pläne überprüfen.

Navigation und Wegweisung

Große, komplexe Veranstaltungsorte wie internationale Flughäfen, Messeflächen oder Universitätscampusse können eine persistente AR-Wegweisung einsetzen. Besucher können eine Webseite laden und einen persistenten virtuellen Pfad sehen, der sie zu ihrem Gate, Stand oder Hörsaal führt. Dies ist weitaus intuitiver, als zu versuchen, einer 2D-Karte zu folgen.

Bildung und Kultur

Museen können persistente AR-Ausstellungen erstellen. Ein Besucher könnte sein Telefon auf ein Dinosaurierskelett richten und eine persistente Informationsschicht, Animationen und Anmerkungen sehen, die an Ort und Stelle bleiben, während er darum herumgeht. Schüler in einem Klassenzimmer könnten gemeinsam einen virtuellen Frosch auf ihren Tischen sezieren, wobei das Modell für die Dauer der Lektion bestehen bleibt.

Kunst und Unterhaltung

Künstler können öffentliche digitale Kunstinstallationen erstellen, die mit bestimmten realen Orten verbunden sind. Benutzer können einen Park oder einen Stadtplatz besuchen, eine URL öffnen und eine persistente virtuelle Skulptur sehen. Multiplayer-Spiele können persistente Elemente haben, mit denen Spieler aus der ganzen Welt in einem gemeinsamen physischen Raum interagieren können.

Herausforderungen und Überlegungen für ein globales Entwicklerpublikum

• Browser- und Geräteunterstützung: Das WebXR Anchors Module ist ein relativ neuer Standard. Die Unterstützung ist noch nicht universell. Derzeit ist es hauptsächlich in Chrome für Android auf ARCore-kompatiblen Geräten verfügbar. Es ist entscheidend, die Feature-Unterstützung zu überprüfen und eine elegante Verschlechterung für Benutzer auf nicht unterstützten Browsern oder Geräten (wie iOS) zu implementieren. Ihre Erfahrung sollte dennoch funktionsfähig sein und möglicherweise auf einen 3D-Viewer-Modus zurückgreifen.
• Umweltbedingungen: Die zugrunde liegende SLAM-Technologie basiert auf stabilen visuellen Merkmalen. Die Re-Lokalisierung kann fehlschlagen, wenn sich die Umgebung zwischen den Sitzungen erheblich verändert hat. Drastische Änderungen der Beleuchtung (Tag vs. Nacht), verrückte Möbel oder ein Mangel an deutlichen visuellen Merkmalen (eine einfache weiße Wand) können verhindern, dass ein Anker wiederhergestellt wird. Anwendungen sollten so konzipiert sein, dass sie diese Wiederherstellungsfehler elegant behandeln können.
• Geräteübergreifende und plattformübergreifende Freigabe: Der WebXR-Standard stellt sicher, dass ein Anker auf demselben Gerät wiederhergestellt werden kann. Es löst nicht von selbst das Problem der Freigabe der Position eines Ankers zwischen verschiedenen Geräten (z. B. einem Android-Telefon und einem zukünftigen AR-Headset) oder Plattformen (WebXR und einer nativen iOS ARKit-App). Um dieses 'Multi-User, Multi-Device'-Problem zu lösen, ist typischerweise eine zusätzliche Technologieschicht erforderlich, die oft als AR-Cloud-Service bezeichnet wird, der räumliche Karten aus verschiedenen Quellen zusammenführen und ausrichten kann.
• Datenschutz und Benutzereinwilligung: Als Entwickler haben wir die Verantwortung, gegenüber den Benutzern transparent zu sein. Da persistente AR das Speichern von Daten über die physische Umgebung eines Benutzers beinhaltet, ist es wichtig, klar zu erklären, warum Sie die `anchors`-Berechtigung benötigen und wie die Daten verwendet werden. Das Vertrauen der Benutzer ist für die Akzeptanz dieser Technologie von größter Bedeutung.

Die Zukunft ist persistent: Was kommt als Nächstes für das immersive Web?

WebXR Persistent Anchors sind ein großer Schritt nach vorn, aber sie sind nur der Anfang. Die Entwicklung des immersiven Webs bewegt sich auf eine stärker vernetzte und kontextbezogene Zukunft zu.

Wir erleben die Entstehung der WebXR Geospatial API, die es ermöglicht, Anker mit realen geografischen Koordinaten (Breitengrad, Längengrad, Höhe) zu verbinden. Dies wird groß angelegte, stadtweite AR-Erlebnisse ermöglichen, die alle auf offenen Webstandards aufbauen.

Darüber hinaus wird die Entwicklung von AR-Cloud-Plattformen die Backend-Infrastruktur bereitstellen, die für wirklich gemeinsam genutzte, persistente und plattformübergreifende AR-Erlebnisse erforderlich ist. Diese Plattformen werden die schwierige Aufgabe bewältigen, räumliche Karten von Millionen verschiedener Geräte auszurichten und so einen einzigen, gemeinsam genutzten digitalen Zwilling der realen Welt zu schaffen.

Die Kombination dieser Technologien deutet auf eine Zukunft hin, in der sich das Web vom 2D-Bildschirm befreit. Es wird zu einer räumlichen Informations-, Unterhaltungs- und Nutzensschicht, mit der wir in unserer physischen Umgebung auf natürliche Weise interagieren können. Persistente Anker sind das entscheidende, grundlegende Element, das diese Vision ermöglicht.

Fazit: Beginnen Sie noch heute mit dem Aufbau des persistenten Webs

WebXR Persistent Anchors sind mehr als nur eine neue API; sie stellen eine grundlegende Verschiebung dessen dar, was im Web möglich ist. Sie ermächtigen Entwickler, AR-Anwendungen mit Gedächtnis, Kontext und bleibendem Wert zu entwickeln. Von der Transformation, wie wir einkaufen, arbeiten und lernen, bis hin zur Schaffung neuer Kunst- und Unterhaltungsformen ist das Potenzial immens.

Die Eintrittsbarriere war noch nie so niedrig. Mit einem modernen Smartphone und einem Webbrowser können Entwickler überall auf der Welt mit dem Experimentieren mit der Erstellung persistenter, weltbewusster Erlebnisse beginnen. Die Reise zu einem wirklich immersiven, räumlichen Web ist im Gange, und es basiert auf offenen Standards, die für jeden zugänglich sind. Der Zeitpunkt, mit dem Bauen zu beginnen, ist jetzt.