WebXR: VR und AR im Browser

WebXR ist eine Web-API, die VR- und AR-Erfahrungen direkt im Browser ermöglicht, ohne App-Download, ohne Store-Genehmigung, plattformübergreifend auf Headsets, Smartphones und Desktops.

Rubrik: Animation & VFX · Unterrubrik: VR & AR Gestaltung · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Web-VR, Web-AR, Immersive Web, WebVR (veraltet)

Was ist WebXR?

WebXR ist eine Browser-API (W3C-Standard, finalisiert 2020), die den Zugang zu VR-Headset-Sensoren und AR-Tracking-Funktionen direkt aus dem Browser heraus ermöglicht. Statt eine native App zu installieren, öffnet der Nutzer einfach eine URL, und eine immersive Erfahrung startet direkt im Headset oder auf dem Smartphone.

WebXR ist der Nachfolger der veralteten WebVR API (2017–2019) und erweitert diese um AR-Funktionen und modernere Headset-Unterstützung.

Warum WebXR wichtig ist

Die niedrigste Zugangsschwelle im gesamten XR-Ökosystem (→ Extended Reality (XR)): keine App, kein Store, kein Update-Prozess. Eine URL genügt. Für Marken, Bildungseinrichtungen, Medienproduktionen und Prototypen ist das eine enorme Vereinfachung.

Erklärung

Technische Grundlagen

WebXR baut auf WebGL (3D-Grafik im Browser) und dem Web-Animationsmodell auf. Die API liefert:

• Zugang zu Head-Tracking-Daten (Headset-Pose)
• Controller- und Hand-Tracking-Daten
• AR-Funktionen: Plane Detection, Hit Testing, Anchors (plattformabhängig)
• Rendering in Stereo (links/rechts für VR-Headset)

Browser müssen WebXR explizit implementieren. Stand 2024:

• Chrome (Desktop + Android): Vollständige WebXR VR und AR-Unterstützung
• Meta Quest Browser (Chromium-basiert): VR und AR, sehr gute Performance
• Safari (Apple): Eingeschränkt, erst ab Safari 15.4 WebXR für AR über Quick Look; volle WebXR-Unterstützung in Arbeit
• Firefox Reality: Eingestellt; Meta Quest Browser ist bevorzugte Alternative

Session Types

`` navigator.xr.requestSession('immersive-vr') // VR-Modus navigator.xr.requestSession('immersive-ar') // AR-Modus navigator.xr.requestSession('inline') // 3D im normalen Browser-Fenster ``

WebXR AR Features

AR über WebXR (auf kompatiblen Android-Geräten mit ARCore):

• hit-test: Ermittelt, wo ein Strahl die reale Oberfläche trifft (für Objekt-Placement)
• anchors: Verankert virtuelle Objekte im realen Raum
• plane-detection: Erkennt Flächen in der Umgebung
• depth-sensing: Tiefenkarte der Szene (neuere Geräte)
• light-estimation: Schätzt die Beleuchtung der realen Umgebung

Frameworks für WebXR

A-Frame (Mozilla)

A-Frame ist das populärste WebXR-Framework für Einsteiger. Es basiert auf einer HTML-ähnlichen Syntax und erlaubt 3D-Szenen ohne JavaScript-Kenntnisse:

``html <a-scene> <a-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-sky color="#ECECEC"></a-sky> </a-scene> ``

A-Frame erkennt automatisch, ob ein VR-Headset verbunden ist, und bietet einen „Enter VR"-Button. Große Community, viele Beispiele, gute Dokumentation. Mozilla A-Frame: aframe.io.

Three.js + WebXR

Three.js ist die führende JavaScript-3D-Bibliothek, die WebXR direkt unterstützt. Für Entwickler, die mehr Kontrolle als A-Frame bieten, aber auf einer bewährten Abstraktion aufsetzen wollen.

Three.js bietet einen VRButton und ARButton Helper, der mit wenigen Zeilen eine Szene XR-fähig macht. Großes Ökosystem, hervorragende Dokumentation.

Babylon.js (Microsoft)

Babylon.js ist ein vollständiges 3D-Game-Engine-Framework für den Browser. Besser für komplexe, interaktive Anwendungen geeignet. Microsoft entwickelt aktiv daran und nutzt es intern. Native WebXR-Unterstützung, gute Physics-Integration.

8th Wall

8th Wall (Niantic) ist eine kommerzielle WebAR-Plattform, die AR auch ohne ARCore/ARKit über reine Computer-Vision im Browser ermöglicht, und damit auch auf iPhones funktioniert. Ideal für Marketing-Kampagnen, da keine App benötigt wird. Kostenpflichtig (ca. 99–499 USD/Monat).

Model Viewer (Google)

Für einfache AR-Produktvisualisierung reicht Googles <model-viewer> Web-Component:

``html <model-viewer src="shoe.glb" ar ar-modes="webxr scene-viewer quick-look"> </model-viewer> ``

Dies erzeugt einen AR-Button, der das 3D-Modell auf dem Boden vor dem Nutzer platziert, fertig in einer Zeile Code.

Beispiele

• The New York Times VR (frühe Ära WebVR): Investigativer Journalismus mit VR-Erfahrungen
• Google Arts & Culture, Street Art in VR: WebXR-Galerien direktemente im Browser
• Niantic's Ingress Prime: Web-basierte AR-Elemente
• IKEA 3D-Konfigurator: Produktvisualisierung im Browser mit <model-viewer>
• Mozilla Hubs: Virtueller Social-Space im Browser, läuft auf Quest und Desktop

In der Praxis

Einstieg mit A-Frame (ca. 30 Minuten):

1. Leere HTML-Datei erstellen
2. A-Frame CDN einbinden: <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
3. <a-scene> mit einfachen Objekten befüllen
4. Im Meta Quest Browser öffnen → „Enter VR" klicken

Für AR-Erfahrungen (Android + Chrome): Three.js ARButton + hit-test Feature für Objekt-Placement auf dem Boden.

Deployment: WebXR-Apps sind normale Websites, Hosting auf GitHub Pages, Netlify oder jedem Webserver. HTTPS ist Pflicht (Sicherheitsanforderung für XR-Geräte-API-Zugriff).

Vergleich: WebXR vs. native Apps

Häufige Fragen (FAQ)

Funktioniert WebXR auf dem iPhone? Eingeschränkt. Apples Safari unterstützt WebXR nur partiell (AR über Quick Look mit USDZ-Dateien). Vollständiges WebXR wie auf Android fehlt. Lösungen: 8th Wall oder Mozilla WebXR Viewer App.

Wie performant ist WebXR? Auf dem Meta Quest Browser läuft WebXR mit guter Performance, 72 fps für einfache Szenen sind erreichbar. Komplexe Szenen benötigen Optimierung (LOD, Draco-komprimierte Geometrie, KTX2-Texturen).

Kann ich WebXR auch ohne Headset entwickeln? Ja. Chrome Desktop bietet einen WebXR-Emulator als Extension (WebXR API Emulator), der Head-Tracking und Controller simuliert.

Verwandte Einträge

• Augmented Reality Grundlagen, ARKit und ARCore als native Alternative
• AR Marker Tracking und markerlose AR, Image-Tracking auch in WebXR verfügbar
• Virtual Reality Grundlagen, VR-Konzepte, die WebXR umsetzt
• Extended Reality (XR), WebXR als Teil des XR-Ökosystems
• AR-Filter für Instagram und TikTok, Alternative Low-Code-Plattformen für Web-AR

Weiterführend

• W3C WebXR Device API Spezifikation: w3.org/TR/webxr
• A-Frame Dokumentation: aframe.io/docs
• Three.js WebXR Guide: threejs.org/docs/#manual/en/introduction/How-to-create-VR-content
• Babylon.js WebXR: doc.babylonjs.com/divingDeeper/webXR
• Cakmakci, O. & Rolland, J. (2006). Head-worn displays: A review. Journal of Display Technology, 2(3), 199–216.
• Ada Rose Cannon (2022). State of WebXR. web.dev/webxr