Unsere Browser sind vollgepackt mit spannenden Schnittstellen wie der Geolocation API, Web Bluetooth API oder Sensor API. Wo viele Schnittstellen den EntwicklerInnen den Zugriff auf Sensoren und Schnittstellen eines Geräts ermöglichen, verändert die WebXR-Schnittstelle die Art und Weise, wie BenutzerInnen Inhalte wahrnehmen und mit Applikationen interagieren können.
WebXR steht für Extended Reality im Web und ist ein Sammelbegriff für Augmented Reality (AR), Virtual Reality (VR) und Mixed Reality (MR). Die WebXR-Schnittstelle ist keine neue Erfindung. In ihrer ersten Iteration, der WebVR-Schnittstelle, existiert sie bereits seit 2014. Dennoch stellt das Jahr 2022 einen Meilenstein in der Entwicklung der Schnittstelle dar, da sich Apple mittlerweile dazu entschlossen hat, WebXR in Safari ebenfalls zu unterstützen.
Warum ist die Entscheidung von Apple ein so großer Schritt für WebXR?
Wenn wir die Begriffe Virtual Reality und Augmented Reality hören, denken wir als Erstes an VR-Headsets wie die HTC Vive oder die Meta Quest oder an AR-Headsets wie die Hololens von Microsoft. Der Nachteil dieser Hardware ist, dass sie zum einen relativ teuer ist und andererseits primär für den Einsatz in geschlossenen Räumen gedacht ist. Generell verschiebt sich die Nutzung von Applikationen weg vom Computer hin zu mobilen Geräten.
Und so verhält es sich auch mit XR-Applikationen. Die Hürde, schnell mit dem Smartphone, das wir sowieso immer in der Tasche bei uns tragen, in die virtuelle Welt einzutauchen, ist deutlich geringer als ein VR-Headset herauszukramen und es aufzusetzen. Die Anwendungsfälle für solche XR-Applikationen sind vielfältig, wobei es aktuell in den meisten Fällen um Produktpräsentationen oder Spiele geht.
Eines der größten Probleme für die WebXR-Schnittstelle war, dass sie bisher nur mit einer Kombination von Android und Chrome auf Smartphones richtig funktioniert hat. Nachdem die iOS-Geräte jedoch einen wesentlichen Anteil am mobilen Markt haben, waren die XR-Applikationen nur für einen Teil der NutzerInnen verfügbar. Die Entwicklung einer solchen Applikation mit ihren 3D-Modellen und Interaktionskonzepten ist verhältnismäßig aufwändig, sodass sie sich bei einer zu geringen Marktabdeckung nicht lohnt. Durch die Unterstützung von Apple ändert sich die Situation jedoch, da sich XR-Applikationen nach und nach auf allen mobilen Geräten verbreiten können. Doch noch ist das Zukunftsmusik, da sich die WebXR-API weiterhin im experimentellen Status befindet und manuell aktiviert werden muss.
Was ist die WebXR-API und was kann sie?
Die WebXR-API ist das Bindeglied zwischen der Ein- und Ausgabe einer XR-Applikation. Am besten wird die Aufgabe dieser Schnittstelle klar, wenn Sie sich den Lebenszyklus einer XR-Applikation ansehen:
- Die Applikation prüft über die WebXR-Schnittstelle, ob der verwendete Browser XR und den gewünschten Modus unterstützt.
- Die BenutzerIn wird benachrichtigt, dass eine XR-Experience verfügbar ist.
- Eine Interaktion der BenutzerIn aktiviert die XR-Experience.
- Die WebXR-API fragt eine XR-Session beim Gerät an.
- Die Applikation geht in den Render Loop über.
- Die BenutzerIn beendet die XR-Session.
Die WebXR-Schnittstelle findet also heraus, ob die Applikation auf einem XR-kompatiblen Gerät ausgeführt wird und kümmert sich um die Verwaltung der XR-Session. Während der Laufzeit der Applikation befindet sie sich im sogenannten Render Loop. Das ist ein Konstrukt, das in der Spieleentwicklung als Game Loop sehr bekannt ist. Dabei durchläuft die Applikation einen Zyklus, der aus den Schritten „User Input“, „Update State“ und „Render“ besteht. Diese Schleife reagiert also auf die Eingaben der BenutzerIn, aktualisiert den Zustand der Applikation sowie die Anzeige.
Damit die Applikation auf eine Rate von 30 Frames pro Sekunde (fps) kommt, darf ein Schleifendurchlauf nicht länger als 33 Millisekunden dauern. Bei 60 fps sind es nur noch 16 Millisekunden. Ein Film wird normalerweise mit 24 fps abgespielt. Das sorgt dafür, dass für die ZuschauerInnen ein flüssiges Filmerlebnis entsteht. Je bewegungsintensiver die Inhalte sind, desto höher sollte die Framerate sein. Für Videospiele ist eine Rate von 60 fps üblich.
In XR-Applikationen gewinnt die Framerate noch mehr an Bedeutung, da eine hohe Framerate verhindern kann, dass die BenutzerInnen unter Motionsickness leiden. Meta und HTC empfehlen beispielsweise eine Framerate von 90 fps, was die Zeit für einen Render Loop-Durchlauf auf 11 Millisekunden reduziert. Das bedeutet, dass Sie für die Verarbeitung von Eingaben, der Aktualisierung des Zustands und das Rendering nur noch 11 Millisekunden Zeit haben.
Den Render Loop implementieren Sie auch nicht als gewöhnliche for– oder while-Schleife, sondern als rekursives Konstrukt, in dem Sie die requestAnimationFrame-Methode der XRSession nutzen und Ihre Funktion immer wieder selbst aufrufen. In Listing 1 sehen Sie ein Beispiel dafür, wie der Quellcode des Render Loops aufgebaut sein kann.
Listing 1: Implementierung des Render Loops
Wo wir auch schon beim letzten Aspekt des Render Loops wären: dem Rendering. Die WebXR-API kümmert sich zwar um Ein- und Ausgabe, nicht aber um das eigentliche Rendern der Inhalte. Hierfür kommt normalerweise WebGL zum Einsatz. Dabei handelt es sich um eine hardwarebeschleunigte Grafikschnittstelle zur Darstellung von 3D Inhalten. Wobei die wenigsten EntwicklerInnen ihre 3D-Szenen direkt in WebGL implementieren, sondern auf Bibliotheken wie Babylon.js oder Three.js setzen. Im Fall von Three.js ist das Ende der Abstraktion noch nicht erreicht. Mit A-Frame existiert noch eine weitere Ebene, die das Entwickeln für Sie noch komfortabler gestaltet.
A-Frame – ein Beispiel für eine WebXR-Bibliothek
Entwickeln Sie Ihre Applikation nativ mit der WebXR- und WebGL-Schnittstelle, ist die Arbeit an einigen Stellen nicht sonderlich angenehm, da beide Schnittstellen auf einer für Browserverhältnisse relativ systemnahen Ebene arbeiten. Mit Bibliotheken wie A-Frame haben Sie mit der damit einhergehenden Komplexität nichts zu tun und können sich voll und ganz auf die Umsetzung Ihrer Applikation konzentrieren. In Listing 2 sehen Sie ein Beispiel für eine A-Frame-Applikation.
Listing 2: WebXR mit A-Frame
A-Frame lässt Sie Ihre Szene mit Tags beschreiben und verfolgt dabei eine Entity-Component-Architektur. Stoßen Sie mit A-Frame an die Grenzen des Umsetzbaren, was relativ schnell passieren kann, können Sie auch direkt mit dem darunterliegenden Three.js arbeiten und den Funktionsumfang von A-Frame auf Ihre Bedürfnisse anpassen.
Weitere Features der WebXR-Schnittstelle
Die WebXR-API stellt zahlreiche Klassen und Interfaces zur Verfügung, mit denen Sie den Basisumfang einer Applikation umsetzen können. Dazu gehören beispielsweise die XRSession, mit der Sie die aktuelle Sitzung steuern können, oder das XRFrame-Objekt, das einen einzelnen Frame repräsentiert. Neben diesen grundlegenden Strukturen verfügt die WebXR-API noch über weitere Features, die Ihnen helfen, atemberaubende Applikationen umzusetzen.
Ankerpunkte
Mit dem XRAnchor können Sie Ankerpunkte in der virtuellen Welt erzeugen. Diese Ankerpunkte helfen Ihnen dabei, Elemente zu platzieren. Ein Anker wird dynamisch aktualisiert, sodass für die BenutzerIn der Eindruck entsteht, dass ein an einem Anker platziertes Objekt tatsächlich dort bleibt, obwohl sich die Betrachtungsposition verändert. Einen solchen Anker können Sie über den XRFrame und seine createAnchor-Methode erzeugen. Diese Schnittstelle wird aktuell nur von Chrome-Browsern unterstützt. Safari und Firefox unterstützen das Setzen von Ankern noch nicht.
Depth Sensing
Mit der Depth Sensing-Funktionalität gibt Ihnen die WebXR-Schnittstelle die Möglichkeit, die Entfernung zwischen einem Objekt in der realen Welt und dem Gerät der BenutzerIn schätzungsweise zu ermitteln. Diese Schnittstelle können Sie beispielsweise verwenden, um physikalische Berechnungen wie Kollisionserkennung durchzuführen oder virtuelle Objekte korrekt im Verhältnis zu realen Objekten zu positionieren. Die Tiefeninformation erhalten Sie über die getDepthInformation des XRFrame-Objekts. Auch hier können Sie sich nur auf die Chrome-Browser verlassen.
Hit Testing
In der Virtual Reality haben Sie die Umgebung normalerweise vollständig unter Ihrer Kontrolle. Anders ist der Fall in der Augmented Reality, bei der Sie mit einem sich regelmäßig aktualisierenden Kamerafeed arbeiten, in den Sie virtuelle Objekte platzieren. Hier spielen Ankerpunkte und Depth Sensing ihre wahre Stärke aus.
Dennoch benötigen Sie noch ein weiteres essentielles Feature, um eine realistische AR-Experience zu erreichen und das ist das Hit Testing. Beim Hit Testing sendet Ihr Gerät einen virtuellen Laserstrahl aus, der Objekte in der realen Welt trifft. Dieser Treffer wird als Hit bezeichnet und bietet Ihnen die Möglichkeit, virtuelle Objekte korrekt zu platzieren. So können Sie beispielsweise eine virtuelle Tasse auf einen realen Tisch stellen. Ein solcher Hit Test ist ein mehrstufiger Prozess. Zunächst müssen Sie ihn in der XRSession mit der requestHitTestSource anfragen, anschließend können Sie in einem Frame über das XRFrame-Objekt mit der getHitTestResults-Methode das Ergebnis abfragen. Auch hier gilt, wie bei den vorangegangenen Schnittstellen, dass sie aktuell nur von Chrome-Browsern unterstützt wird.
Lighting Estimation
Das Ziel von AR ist in den meisten Fällen eine möglichst realistische Szene. Dafür benötigen Sie den Kamerafeed und die virtuellen Objekte, die Sie in diesen einbinden. Der Realismusgrad hängt stark vom Aufbau Ihrer Objekte und ihren Texturen ab. Doch das ist noch nicht alles. Sind Licht und Schatten in der Szene nicht stimmig, helfen Ihnen die qualitativ hochwertigsten Modelle nichts.
Um die Darstellung von Schatten kümmert sich Ihr Renderer, also WebGL und die darauf aufbauenden Bibliotheken wie Babylon.js oder Three.js. Die Informationen über die Beleuchtung der Szene in der realen Welt können Sie über die Light Estimation auslesen. Hier arbeiten Sie, wie schon beim Hit Testing, zweistufig. In der XRSession fragen Sie mit der requestLightProbe-Methode eine Light Estimation an. Innerhalb Ihres Render Loops erhalten Sie dann für den aktuellen Frame mit der getLightEstimate-Methode des XRFrame-Objekts die Lichtinformation in Form eines XRLightEstimate-Objekts. Dieses enthält die Richtung und die Intensität der primären Lichtquelle sowie die sperical harmonics Koeffizienten. Das sind insgesamt neun Werte, mit deren Hilfe Sie mit verhältnismäßig geringem Overhead eine realistische Beleuchtung erreichen können. Auch bei der Light Estimation macht die Browserunterstützung keine Ausnahme. Möchten Sie den vollen Funktionsumfang in Ihrer Applikation nutzen, müssen Sie auf Chrome-Browser setzen.
In den vorangegangenen Abschnitten haben Sie gesehen, dass die WebXR-API deutlich mehr ist als die reine Verknüpfung von Endgerät und der Darstellung von 3D-Inhalten. Die Schnittstelle bietet Ihnen verschiedene Werkzeuge, mit deren Hilfe Sie den Realismus Ihrer Szene erhöhen und die Interaktion Ihrer BenutzerInnen verbessern können. Doch irgendwann ist auch der Funktionsumfang der besten Browserschnittstelle erschöpft. Allerdings ist das bei weitem noch nicht das Ende der Reise in die AR und VR. Sie können noch weitere Bibliotheken in Ihre Applikation einbinden, um weitere Features und Interaktionsmöglichkeiten umzusetzen.
Zusätzliche Bibliotheken
Bei vielen Schnittstellen mit der realen Welt versucht die WebXR-API die Bilder der Umgebung zu interpretieren, um beispielsweise eine Oberfläche für die Platzierung von Objekten zu erkennen. Doch der Fokus der Schnittstelle liegt eben auf diesen Aspekten und endet auch dort. Das Erkennen bestimmter Objekte oder gar von Personen ist nicht mehr Teil von WebXR. Doch gerade solche Features würden eine XR-Applikation wirklich spannend machen. Damit solche Implementierungen im Browser möglich werden, müssen Sie tief in die Trickkiste greifen und auf Machine Learning setzen. Eine populäre Bibliothek aus diesem Bereich ist TensorFlow, die in Form von TensorFlow.js auch im Browser verfügbar ist. Sie können die TensorFlow-Modelle selbst trainieren oder auf bestehende Modelle zurückgreifen. So sind beispielsweise Modelle zur Erkennung von Objekten, Körperteilen oder Gesichtsmerkmalen vorhanden.
Eine weitere populäre Bibliothek aus dem Bereich der Bildverarbeitung ist OpenCV. OpenCV ist ursprünglich in C++ geschrieben, wurde aber in verschiedene Programmiersprachen portiert. OpenCV.js ist eine Schnittstelle für JavaScript, mit der Sie einen Teil des Funktionsumfangs von OpenCV im Browser nutzen können. Für eine optimale Performance setzt OpenCV.js auf WebAssembly, einen vorkompilierten Bytecode, den Ihr Browser ausführt. Mit OpenCV können Sie Objekte im Kamerafeed erkennen und diese Information an Ihre Applikation weiterreichen, um entsprechend darauf zu reagieren. Die Arbeit mit OpenCV.js direkt ist etwas unkomfortabel. Deshalb gibt es Bibliotheken wie MediaPipe, die darauf aufbauen und Ihnen eine deutlich angenehmere Schnittstelle bieten. Mit MediaPipe können Sie Personen und Objekte und deren Position erkennen.
Wo finde ich Informationen über die WebXR-Schnittstelle?
Die WebXR-Schnittstelle wird vom W3C, genauer gesagt von der Immersive Web Working Group des W3C, spezifiziert. Das zugehörige Dokument finden Sie unter www.w3.org/TR/webxr/. Diese Spezifikation dient den Browserherstellern als Grundlage für ihre Implementierung. Sie können sich die Spezifikation zwar durchlesen, viel Freude wird dabei jedoch nicht aufkommen. Neben dieser Informationsquelle ist die WebXR-Sektion des Mozilla Developer Networks eine weitere Ressource, über die Sie Informationen beziehen können. Unter developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API finden Sie eine Beschreibung der Schnittstelle sowie eine API-Referenz mit zahlreichen Beispielen. Außerdem sehen Sie bei den verschiedenen Klassen und Strukturen, wie es um die Browserunterstützung steht. Weitere Informationen finden Sie auch unter immersiveweb.dev, einer Webseite, die von der Immersive Web Working Group verwaltet wird und ebenfalls eine Einführung in das Thema sowie zahlreiche Beispiele für Sie bereithält.
WebXR – Augmented Reality & VirtualReality im Web – Fazit
Die Immersive Web Working Group arbeitet seit einigen Jahren an der Spezifikation der WebXR-Schnittstelle, um Augmented Reality und Virtual Reality in den Browser zu bringen. Durch die Ankündigung von Apple, die Schnittstelle auch in Safari zu unterstützen, hat die Entwicklung von WebXR neuen Schwung erhalten. Mit Apple und Google haben die beiden wichtigsten Hersteller von mobilen Browsern ihre Unterstützung für WebXR zumindest angekündigt, was für EntwicklerInnen eine nahezu hundertprozentige Marktabdeckung bedeutet. Noch befindet sich die Schnittstelle auf iOS-Geräten in Entwicklung und BenutzerInnen müssen sie erst aktivieren. In zukünftigen Releases wird sich das jedoch ändern, sodass Sie bedenkenlos Ihre WebXR-Applikationen entwickeln und veröffentlichen können.
Titelmotiv: Bild von Gerd Altmann auf Pixabay
