WebXR: AR/VR im Browser

WebXR ist eine offene Web-API des W3C, die es ermöglicht, immersive Augmented-Reality- und Virtual-Reality-Erfahrungen direkt im Webbrowser zu erstellen und zu konsumieren – ohne App-Installation.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: AR & VR · Niveau: Einsteiger

Was ist WebXR?

WebXR (Web Extended Reality) ist der Nachfolger der WebVR-API und definiert eine standardisierte Programmierschnittstelle (API) für den Zugang zu XR-Geräten über den Browser. Entwicklerinnen und Entwickler können damit AR- und VR-Erlebnisse mit JavaScript, HTML und CSS erstellen, die ohne Installation auf Smartphones, Tablets und VR-Headsets funktionieren.

Die WebXR Device API wurde vom W3C (World Wide Web Consortium) als Standard entwickelt und ist seit 2021 in den meisten modernen Browsern implementiert (Chrome, Edge, Firefox Reality, Meta Browser). Safari und iOS hinken beim nativen WebXR-Support hinterher; für iOS AR (Modell-Viewer in AR) wird ein separater Ansatz verwendet.

Das Prinzip: Niedrige Zugangshürde für Endnutzende (nur Browser nötig), maximale Reichweite ohne App Store-Bürokratie. Für Medienschaffende, Bildungseinrichtungen und Marken ist WebXR daher eine attraktive Alternative zu nativen Apps.

Erklärung

Die WebXR Device API

Die WebXR Device API ermöglicht drei Kernanforderungen:

1. Session Management: Über navigator.xr.requestSession() startet eine XR-Session. Es gibt zwei Modi:

• immersive-vr: Vollständige VR, blendet reale Welt aus
• immersive-ar: AR mit Passthrough, überlagert reale Welt
• inline: Nicht-immersiver Modus (z.B. 3D-Objekt-Viewer im Browserfenster)

2. Tracking & Input: Die API liefert Pose-Daten für Headset und Controller in Echtzeit (Position, Rotation, Beschleunigung). Hits Tests erlauben das Erkennen von Oberflächen für markerlose AR (ARCore/ARKit-Passthrough via Chrome).

3. Rendering: WebXR arbeitet mit WebGL (oder WebGPU ab 2024) für die 3D-Darstellung. Hochperformantes Rendering über den Browser ist möglich, aber erfordert Optimierung.

Frameworks über der WebXR-API

Die rohe WebXR-API ist niedrigschwellig und erfordert viel Boilerplate-Code. In der Praxis werden Frameworks genutzt:

A-Frame (Mozilla) A-Frame ist das bekannteste WebXR-Framework und nutzt eine HTML-ähnliche Deklarativsyntax. Eine einfache VR-Szene lässt sich in wenigen Zeilen HTML erstellen:

``html <a-scene> <a-box position="0 1 -3" color="#4CC3D9"></a-box> <a-sky color="#ECECEC"></a-sky> </a-scene> ``

A-Frame ist Einsteiger-freundlich, open-source und wird aktiv entwickelt. Für AR werden zusätzliche Komponenten wie aframe-ar oder Integration mit 8th Wall benötigt.

Three.js Three.js ist die führende JavaScript-3D-Bibliothek und bietet einen WebXRManager als Teil der Bibliothek. Komplexere und leistungsfähigere Szenen als mit A-Frame möglich, aber höhere Code-Komplexität. Three.js ist die Basis für viele WebXR-Projekte in der Praxis.

Babylon.js (Microsoft) Babylon.js ist Microsofts 3D-Engine für den Browser, direkt mit WebXR-Support designt. Besonders stark in physikbasiertem Rendering und Enterprise-Szenarien. Bietet eine vollständige IDE (Babylon.js Playground) im Browser.

React Three Fiber React Three Fiber bringt Three.js in das React-Ökosystem; mit @react-three/xr lassen sich WebXR-Erlebnisse in React-Anwendungen einbetten.

8th Wall (Niantic)

8th Wall ist eine kommerzielle WebAR-Plattform, die den fehlenden nativen WebXR-Support auf iOS umgeht, indem sie eigene SLAM-Algorithmen im Browser via JavaScript/WebGL implementiert. Damit sind hochwertige markerlose AR-Erlebnisse auf iPhone ohne ARKit-Integration möglich. 8th Wall wird von vielen Agenturen für Branded-AR-Kampagnen genutzt. Es gibt eine Abo-Gebühr (ab ca. 50 USD/Monat für Entwickler).

Google Model Viewer

<model-viewer> ist ein von Google entwickeltes Web-Component, das 3D-Modelle im glTF/USDZ-Format im Browser anzeigt und mit einem Knopfdruck in AR auf dem Smartphone platziert (iOS via AR Quick Look, Android via Scene Viewer). Ideal für E-Commerce (Produktvisualisierung in AR ohne eigene App) und schnell zu implementieren.

Beispiele

• The New York Times nutzte WebXR für immersive Artikel-Begleitung (z.B. Visualisierung von Raumfahrt-Szenarien im Browser).
• Google Arts & Culture bietet AR-Overlays auf Kunstwerke über den Browser.
• IKEA nutzt Model Viewer für Produkt-AR auf der Website (Möbel im eigenen Raum).
• Bildungs-AR: Interaktive 3D-Modelle von Molekülen, Planetensystemen oder historischen Objekten direkt im Unterrichts-LMS ohne App.

In der Praxis

Einstieg mit WebXR:

Minimaler Stack für erste Schritte:

1. Browser: Chrome auf Android (voller WebXR-Support inkl. AR); Chrome auf Desktop mit Headset
2. Framework: A-Frame (einfachster Einstieg)
3. Hosting: GitHub Pages, Netlify oder Vercel (HTTPS zwingend erforderlich für WebXR)
4. Testing: Chrome DevTools hat einen WebXR-Emulator; Chrome Extension „WebXR API Emulator" für Browser-Tests

Performance-Tipps:

• 3D-Modelle als Draco-komprimiertes glTF (.glb)
• Texturgrößen ≤ 2048×2048 px
• Anzahl Draw Calls minimieren (Instancing nutzen)
• Für iOS: <model-viewer> oder 8th Wall, kein natives WebXR

Limitierungen von WebXR:

• Geringere Performance als native Apps
• iOS-Support fragmentiert (kein Chrome auf iOS mit WebXR)
• Keine persistenten Spatial Anchors (Raumanker über Sessions hinweg)
• Begrenzte Sensorik-Zugang (Kamera-Feed nicht direkt zugänglich aus Datenschutzgründen)

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Funktioniert WebXR auf dem iPhone? Natives WebXR wird von Safari auf iOS nicht vollständig unterstützt (Stand 2024). Für iOS AR empfiehlt sich <model-viewer> (AR Quick Look) oder die 8th Wall-Plattform.

Brauche ich HTTPS für WebXR? Ja, obligatorisch. WebXR-APIs sind nur über sichere Verbindungen (HTTPS) zugänglich. Lokale Entwicklung über localhost ist die Ausnahme.

Kann ich WebXR für VR-Headsets nutzen? Ja. Meta Quest-Browser, Edge auf Windows Mixed Reality und andere unterstützen WebXR für immersive-vr-Sessions. Die Performance ist gut für einfache bis mittlere Szenen.

Verwandte Einträge

• Augmented Reality: Markerbasiert vs. markerlos
• AR, VR, MR, XR: Definitionen & Unterschiede
• AR-Filter für Instagram & Snapchat erstellen
• VR-Headsets: Meta Quest, PSVR2, Apple Vision Pro
• Unity für VR-Entwicklung: Grundlagen
• 360°-Video: Produktion & Distribution

Weiterführend

• W3C (2024): WebXR Device API Specification. w3.org/TR/webxr.
• Mozilla Foundation (2024): A-Frame Documentation. aframe.io.
• Babylonjs.com (2024): Babylon.js Documentation. babylonjs.com.
• MacCallum, Daniel / Georgiou, Aristides (2022): Developing Immersive Experiences with WebXR. Apress, New York.
• Niantic / 8th Wall (2024): WebAR Platform Documentation. 8thwall.com.