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):
- Leere HTML-Datei erstellen
- A-Frame CDN einbinden:
<script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script> <a-scene>mit einfachen Objekten befüllen- 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
| Aspekt | WebXR | Native App |
|---|---|---|
| Installation | Keine | App-Store-Download |
| Performance | Mittel | Hoch |
| Offline | Eingeschränkt | Ja |
| Plattformzugang | Browser-URL | App-Store-Genehmigung |
| Entwicklungsaufwand | Niedrig bis mittel | Hoch |
| Ideal für | Demos, Marketing, Bildung | High-End-Spiele, Enterprise |
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
