WebXR

Wie Desktop- und mobile Anwendungen können XR/räumliche Anwendungen mit Webtechnologie erstellt werden. Webbasierte VR- und AR-Apps laufen im Browser und können auf jedem Gerät ausgeführt werden, das über einen Browser verfügt.

Vorteile von WebXR 

Die Entwicklung einer XR- oder räumlichen Anwendung für den Browser bietet erhebliche Vorteile:

Plattformunabhängigkeit 

Räumliche Web-Apps laufen auf jedem Gerät, das über einen Browser verfügt. Dazu gehören eigenständige Headsets wie das Meta Quest oder Meta Quest 2, bis hin zu Apple Vision Pro und Microsoft HoloLens.

Es umfasst auch Desktop-PCs, Notebooks, Tablets und Smartphones. Dies macht es zu einem idealen Ziel für Anwendungen, die etablierte Massenmärkte ansprechen möchten, aber zukunftssicher und bereit für VR und AR sein möchten.

Zukunftssicher 

WebXR-basierte Apps laufen auf kommenden und sogar noch nicht angekündigten Geräten. Sie sind bereit für die nächste Gerätgeneration zum Zeitpunkt der Markteinführung.

Man kann heute schon Apps für Apple Vision Pro erstellen, auch ohne ein Entwicklerkit.

Reibungsloser Zugang 

Um eine webbasierte VR- oder AR-App auszuführen, müssen Benutzer lediglich eine URL öffnen. Keine Installation ist erforderlich, jedoch ist eine Installation über moderne Webfeatures wie “Zum Startbildschirm hinzufügen” und Service Workers, die Offline-Zugriff ermöglichen, möglich. Siehe auch PWAs.

Schnelle Bereitstellung 

Im Web hat der Herausgeber die Kontrolle über den Inhalt. Keine Drittanbieter-Kuration oder -Filterung ist vorhanden, wie es normalerweise bei App-Stores der Fall ist.

Die räumliche App wird einfach auf einen Webserver hochgeladen und mit einer Domain verbunden. Von dort aus kann sie problemlos für alle Benutzer aktualisiert werden, indem eine neue Version hochgeladen wird.

Teilbar 

Da webbasierte XR-Apps über Links zugänglich sind, können Links zu Ihrer Anwendung problemlos über soziale Medien, QR-Codes und Anzeigen direkt geteilt werden.

Dies kann wunderbare reibungslose Erlebnisse schaffen, z.B., ein Benutzer scannt einen QR-Code auf einem echten Poster, um eine webbasierte AR-App zu starten, die das Poster in ein interaktives Spiel verwandelt.

Wie WebXR funktioniert 

Browser bieten über die WebXR Device API Zugang zu Funktionen räumlicher Web-Apps.

Die API ermöglicht Entwicklern das Abrufen von Kopf-, Hand- oder Controller-Positionen über JavaScript und das Anzeigen von Bildern auf dem XR-Gerät. 3D-Umgebungen für räumliche Web-Apps werden normalerweise über Web-APIs wie WebGL oder WebGPU gerendert. Audio wird über die WebAudio API ausgegeben.

Die APIs selbst werden von Browsern nativ implementiert, abhängig von dem Gerät, auf dem sie ausgeführt werden.

Eine räumliche Web-App besteht mindestens aus einer index.html Datei, etwas JavaScript und oft einer Vielzahl von Texturen und 3D-Modellen.

Spezifikation vs. Implementierung 

Browser-APIs sind standardisiert, sodass wir Entwickler einfach eine Webseite, Web-App oder räumliche Web-App erstellen können, die auf allen verschiedenen Browsern läuft.

Während des Standardisierungsprozesses wird eine API zuerst spezifiziert, dann werden ein oder mehrere Browser (auch “Clients” genannt) experimentelle Implementierungen bereitstellen, damit Entwickler Feedback geben können.

Welche Browser welche API in welcher Version implementiert haben, kann auf caniuse.com nachgeschlagen werden, einer Datenbank für Browserunterstützung moderner Webtechnologien.

WebAR 

Obwohl die WebXR Device API auch AR-Tracking-Fähigkeiten definiert, sind Spezifikation und Implementierung nicht so weit fortgeschritten wie bei VR.

Dies bedeutet oft, dass Entwickler Drittanbieter-Bibliotheken verwenden, um AR-Tracking über den Zugriff auf die Smartphone-Kamera durchzuführen.

Einige der proprietären Bibliotheken, die verwendet werden, sind 8thwall, zappar oder holoLink.

Open-Source-Alternativen für verschiedene Tracking-Typen sind ebenfalls verfügbar: MindAR, ARToolkit.js und AlvaAR.

Unterstützte Geräte 

Jedes Headset, das über einen Browser verfügt. Jedes in Zukunft veröffentlichte Headset wird automatisch unterstützt, sofern es einen Browser hat.

Derzeit sind dies die bekannten Geräte, die einen Browser bereitstellen (25. Juli 2023):

Beachten Sie, dass jedes Desktop-Headset WebXR über Chrome mit SteamVR als OpenXR-Laufzeit ausführen kann.

PSVR, PSVR2 und HTC Vive Flow werden derzeit nicht unterstützt, da sie keinen Browser mit Support für die WebXR Device API bereitstellen.

Unterstützt Apple Vision Pro WebXR? 

Ja. Apple Vision Pro unterstützt WebXR (derzeit hinter einem Flag in Safari).

Sie können bereits heute Apps für Apple Vision mit JavaScript oder TypeScript mit WebXR erstellen.

PWA 

Progressive Web App (PWA) beschreibt eine Reihe moderner Webtechnologien, die es Web-Apps ermöglichen, Funktionalität und Look-and-Feel ähnlich wie native Apps zu bieten.

Zum Startbildschirm hinzufügen 

Diese Funktion ermöglicht die Installation einer Web-App als Link auf Ihrem Desktop- oder Smartphone-Startbildschirm. Wenn sie gestartet wird, erhält sie ein eigenes Fenster ohne URL-Leiste, was sie wie eine installierte native Anwendung erscheinen lässt.

Service Workers und Cache 

Service Workers können HTTP-Anfragen abfangen, sodass eine Antwort gegeben werden kann, selbst wenn der Benutzer derzeit offline ist. Die Antworten werden normalerweise aus einem oder mehreren Caches abgerufen.