Was ist WebXR: Der vollständige Leitfaden zum Verständnis von AR, VR und MR im Web

Die Art und Weise, wie wir im Internet navigieren, macht einen gewaltigen Sprung nach vorne: Das Web ist jetzt auch ein Ort für immersive Erlebnisse. WebXR ist die Brücke, die die virtuelle Realität (VR) und Augmented Reality (AR) direkt in den Browser, ohne umständliche Installationen oder endlose Schritte. Wenn Sie jemals gedacht haben: „Dies sollte mit einem Link geöffnet werden“, sind Sie hier richtig.

Wir sprechen von einer offenen, vom W3C vorangetriebenen Technologie, die alltägliches JS mit XR-Sensoren, Kameras und Viewern verbindet. Vom Ausprobieren eines Sofas in Ihrem Wohnzimmer bis hin zum 360°-Rundgang durch ein Museum kann alles mit einer URL beginnen.Und ja, es gibt einen Haken: Standards, APIs, 3D-Engines und ein sich schnell entwickelndes Ökosystem.

Was ist WebXR und warum ist es wichtig?

WebXR ist die Spezifikation, die XR-Erlebnisse (AR, VR und MR) im Web ermöglicht. Ermöglicht Ihnen, immersive Sitzungen direkt von Ihrem Browser aus zu starten, mit Zugriff auf Gerätefunktionen wie Bewegungsverfolgung, Controller, Hände, Sensoren und Kameras. Kurz gesagt: Der Browser wird zu einer „XR-App“.

Der Standard wird vom W3C entwickelt und von Browsern („Clients“) auf jeder Plattform implementiert. Für das 3D-Rendering werden APIs wie WebGL und zunehmend auch WebGPU verwendet; räumliches Audio ist über WebAudio verfügbar.Das bedeutet, dass Sie in JavaScript/TypeScript programmieren und auf jeder Website bereitstellen können.

Über die Überschrift hinaus gibt es etwas Wichtiges: WebXR demokratisiert den Zugang zu immersiven Erlebnissen. Sie müssen nicht in einem Store veröffentlichen oder eine Installation erzwingen Apps nativ: Teilen Sie einfach einen Link in sozialen Medien, einen QR-Code auf einem Poster oder eine Schaltfläche auf Ihrer E-Commerce-Site.

Arten von Erfahrungen in WebXR

• AR (Augmented Reality im Web): überlagert digitale Objekte mithilfe der Kamera des Geräts auf die physische Welt. Moderne Browser bieten heute in einigen Umgebungen native AR-Funktionen über WebXR, was Verbessert die Leistung im Vergleich zu rein webbasierten Tracking-BibliothekenTypische Fälle: Testen von Produkten in Originalgröße, interaktiven Anleitungen oder Reiseführern.
• VR (Virtuelle Realität im Web): lässt den Benutzer vollständig in eine 3D-Umgebung eintauchen. Mit einem kompatiblen Headset Sie können Welten erkunden, Training simulieren oder Architekturen vom Browser aus betrachten.Die Interaktion umfasst Controller, Hände und Umweltphysik.
• MR (Mixed Reality im Web): kombiniert physisches und digitales mit wechselseitiger Interaktion. Virtuelle Objekte koexistieren mit dem realen Raumund öffnet die Tür zu Produktivitäts-Apps, kollaboratives Lernen und Spiele, die auf die Umgebung reagieren.
• Nahtlose Übergänge zwischen AR und VR: Der Standard ermöglicht Ihnen, ohne Unterbrechungen von einer Sitzung zur nächsten zu wechseln. Sie beginnen in VR mit einer Einweisung und springen in AR, um ein Objekt in Ihrem Wohnzimmer zu platzieren., innerhalb derselben Erfahrung.

Hauptvorteile von WebXR

Echte plattformübergreifende

Die Erlebnisse laufen auf jedem browserfähigen Gerät: Headsets wie Meta Quest oder HoloLens, Computern, Tablets und Mobilgeräten. Ideal, um ein großes Publikum zu erreichen, ohne die Tür zu AR und VR zu verlieren.

Vorbereitet auf das, was kommt

Webstandards entwickeln sich mit neuen Geräten weiter. Ihre räumliche Web-App kann ausgeführt werden auf Hardware Zukunft vom ersten Tag an, auch auf neu veröffentlichten Plattformen.

Reibungsloser Zugriff

Öffnen Sie einfach eine URL und fertig. Sie müssen nichts installieren, obwohl Sie als PWA "installieren" können Verwenden Sie „Zum Home-Bildschirm hinzufügen“ und Servicemitarbeiter, um offline zu arbeiten.

Agiles Publizieren

Die Website ist nicht auf die Kuratierung des Stores angewiesen. Sie laden auf den Server hoch, verweisen auf die Domäne und aktualisieren für alle mit einem Bereitstellungsschlüssel. So einfach

Teilen ist trivial

Ein Link wird über Netzwerke, Anzeigen oder QR geteilt. Sie scannen ein Poster und starten sofort eine AR, ohne Installationsprobleme.

So funktioniert WebXR im Inneren

Der Browser stellt die WebXR-Geräte-API bereit, um Sitzungen („Inline“, „Immersive-AR“, „Immersive-VR“) zu öffnen, Kopf-/Hand-/Controller-Posen abzufragen und auf dem Bildschirm des XR-Geräts zu zeichnen. Die 3D-Szene wird normalerweise mit WebGL oder WebGPU gerendert und räumliches Audio wird mit WebAudio gerendert.Normalerweise verfügen Sie über eine index.html, Ihr JavaScript und 3D-Ressourcen.

Bei der Standardisierung wird zuerst die API definiert und dann von den Browsern implementiert (manchmal hinter Flags), um Feedback zu erhalten. Versionsunterstützung finden Sie unter caniuse.com oder in den Roadmaps für jeden Browser..

Bevor Sie mit dem Programmieren beginnen, lohnt es sich, ein Framework auszuwählen. Wenn Sie „Metal“ verwenden möchten, können Sie mit nativem JavaScript und WebGL/WebGPU arbeitenWenn Sie Produktivität bevorzugen, entscheiden Sie sich für Engines oder Frameworks, die WebXR bereits integrieren.

WebAR-Status- und Tracking-Bibliotheken

Obwohl WebXR AR definiert, AR-Tracking-Implementierungen haben sich in der Vergangenheit langsamer entwickelt als VRAus diesem Grund werden auf Mobilgeräten häufig Bibliotheken von Drittanbietern (8thwall, Zappar, HoloLink) für die Bild-/Markierungsverfolgung und andere Techniken verwendet.

Wenn Sie sich für Open Source entscheiden, Es gibt Alternativen wie MindAR, ARToolkit.js oder AlvaAR für verschiedene Arten des Trackings. Und Vorsicht: Es gibt Plattformen, die neben der Unterstützung von WebXR, Sie stellen eigene Tracking-Bibliotheken bereit, um Mängel wie das Bild-Tracking in bestimmten Browsern zu beheben..

SLAM im WebXR-Kontext

SLAM (Simultaneous Localization and Mapping) kombiniert Echtzeitlokalisierung und -kartierung. Es ist die Grundlage für die schlüssige Verankerung virtueller Objekte in der physischen Welt., erkennt Ebenen, Wände und Umgebungsmerkmale mithilfe der Kamera, des Beschleunigungsmessers und des Gyroskops.

In einem WebXR AR-Erlebnis ermöglicht SLAM, dass ein 3D-Modell dort „bleibt“, wo Sie es platziert haben. Ohne gutes Tracking schweben oder tanzen die Objekte und der Zauber ist zerstört.Bei gut integrierter SLAM ist die Interaktion glaubwürdig und stabil.

Browser und aktuelle Unterstützung

Der Support variiert je nach Version und Plattform. Es empfiehlt sich daher, nach aktualisierter Dokumentation zu suchen. Chrome hat die Entwicklung vorangetrieben und integriert WebXR in seine aktuellen Versionen.Firefox und Edge (Chromium) bieten ebenfalls Unterstützung, wobei Nuancen je nach System und Gerät variieren. Es ist auch ratsam, die Kompatibilität auf Plattformen wie Windows gemischte Realität.

In Suchern, der Browser von Meta-Quest bietet natives WebXR, die VR- und AR-Erlebnisse aus dem Web ermöglicht. Im Apple-Ökosystem kündigte Safari auf der WWDC23 Weiterentwicklungen an und In Apple Vision Pro ist die WebXR-Unterstützung hinter einer Flagge verfügbar.; auf dem iPhone/iPad kann der Status mit jeder Version unterschiedlich sein und sich weiterentwickeln.

Merken Die Kompatibilität kann je nach Version und Plattform variierenund dass ältere oder Minderheitenbrowser möglicherweise keine oder nur eingeschränkte Unterstützung bieten.

Unterstützte Geräte und Hardwareübersicht

Solange Sie einen Browser mit WebXR haben, gibt es Optionen. Auf dem Desktop funktionieren viele Headsets mit Chrome und verwenden SteamVR als OpenXR-Laufzeitumgebung.. Es gibt auch Ausnahmen: PSVR/PSVR2 oder HTC Vive Flow bieten kein WebXR an, da sie keinen kompatiblen Browser bereitstellen. Wenn Sie eine Einrichtungsanleitung für Windowskonsultieren Sie die Einrichten von Virtual-Reality-Headsets unter Windows.

Zu den browserfähigen Geräten gehören ab Juli 2023: Meta Quest (1/2/3/Pro), Rift/Rift S; AppleVision Pro; Microsoft HoloLens 1/2; HTC Vive/FIocus/Elite XR; Neo Peak; Huawei VR; Samsung Gear VR/Odyssey; Google Cardboard/Daydream; Varjo VR-1/2/3; ValveIndex; Magic Leap 1/2; Lynx R-1; Lenovo ThinkReality; HP Reverb G2Überprüfen Sie immer die jeweilige Version und den Browser.

Hersteller	Gerät
Meta	Quest, Quest 2, Quest Pro, Quest 3, Rift, Rift S
Apple	VisionPro
Microsoft	HoloLens 1, HoloLens 2
HTC	Vive Focus 3, Vive Elite XR, Vive, Vive Pro, Vive Pro 2
Pico	Neo 3, 4, 4 Enterprise
Huawei	VR 3DoF, VR 6DoF
Samsung	Gear VR, Odyssee
Google	Karton, Tagtraumansicht
Varjo	VR‑1, VR‑2, VR‑3
Valve	Index
Magischer Sprung	1 und 2
Luchs	R‑1
Lenovo	ThinkReality VRX, A3
HP	Hall G2

Wo es keinen unterstützten Browser gibt, gibt es kein WebXR. Wenn Ihr Headset die Installation eines modernen Browsers mit der WebXR Device API ermöglicht, vervielfachen sich die Optionen..

Android XR mit Chrome: Tiefe, Hände und zwei Bildschirme

Durch die Anpassung von Erfahrungen für Android XR, denken Sie daran, dass das Rendering in Stereo erfolgt (eine Ansicht pro Auge). Sie müssen zwei Ansichtsfenster konfigurieren und die Eingabe mit Handpriorität verarbeiten, wenn das Gerät dies bevorzugt.. Es ändert auch das Interaktionsmodell in der Benutzeroberfläche und im Maßstab.

// Bucle de frame en una XRSession con WebGL, render estéreo y profundidad
function onXRFrame(time, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const layer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);
  if (!pose) return;

  gl.bindFramebuffer(gl.FRAMEBUFFER, layer.framebuffer);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  for (const view of pose.views) {
    const vp = layer.getViewport(view);
    gl.viewport(vp.x, vp.y, vp.width, vp.height);

    // Profundidad estéreo: un mapa por ojo si está disponible
    const depthInfo = frame.getDepthInformation(view);
    if (depthInfo) {
      renderDepthGPU(depthInfo, view, vp);
    }

    renderSceneForView(view);
  }
}

Zu beachtende Aspekte: Sie benötigen eine gültige Pose, um auf die Tiefe zuzugreifen., pose.views gibt eine Ansicht pro Auge zurück und die Schleife wird zweimal ausgeführt. Die Shader-Pipeline muss Okklusion/Kollision basierend auf der Tiefenkarte berücksichtigen.

Interaktion mit Händen und Eingabe

Die manuelle Eingabe ist ein fester Bestandteil von Android XR und wird von Chrome als Standardeingabe unterstützt. Die Hand-Tracking-API ermöglicht Gesten wie das Kneifen, Greifen oder Schieben von Objekten., mit Ereignissen und Gelenken pro Finger.

Bei mobilen oder Controller-zentrierten Headsets ist die manuelle Eingabe möglicherweise nicht oder nur teilweise verfügbar. Ihre App sollte Funktionen erkennen und problemlos auf Controller oder Touch-Funktionen zurückgreifen., ohne die Interaktion zu unterbrechen.

Berechtigungen und Datenschutz

Das Öffnen von AR/VR-Sitzungen erfordert Berechtigungen wie Kameraverfolgung und 3D-Mapping, und andere (Gesicht, Augen, Hände) sind zusätzlich geschützt. Der Browser fordert die Berechtigung pro Domäne an und merkt sich die Präferenz; wenn welche fehlen, wird die Sitzung nicht gestartet.

Wie bei jeder Web-API geht gut mit Ablehnungen um und teilt dem Benutzer mit, warum Sie jede Berechtigung benötigen und was er dafür bekommt.

Anwendungsfälle, die bereits sehr gut funktionieren

E-Commerce mit AR: Präsentiert Produkte in Originalgröße im Raum des Kunden. Das Vertrauen steigt und die Retourenquote sinkt. Einen Sessel vor dem Kauf in Ihrem Wohnzimmer zu sehen, kann eine entscheidende Veränderung sein..

Marketing und Werbung: Kampagnen mit AR-Minispielen und interaktiven Erlebnissen, die die Markenerinnerung steigern. Vom QR-Code im Schaufenster zum Filter, der auf der Straße „zum Leben erwacht“.

Industrie und Ausbildung: sichere Simulationen für Training, Risikoprävention und komplexe Verfahren. Digitale Zwillinge, Produktionslinien und interaktive Checklisten sparen Zeit und Unfälle..

Bildung: abstrakte 3D-Konzepte, virtuelle Labore und Museumsbesuche. Immersives Lernen fesselt und bleibt besser im Gedächtnis.

Architektur und Immobilien: : 3D-Modellprüfung mit Kunden und virtuelle Rundgänge durch Immobilien. Informiertere Entscheidungen vor dem Bau.

Tourismus und Kultur: 360°-Touren, Ausstellungen und Kulturerbe, die von zu Hause oder vor Ort mit AR-Overlays erkundet werden können. Kulturelle Zugänglichkeit steigt mit einem einfachen Link.

PWA: die „App“-Berührung, ohne das Web zu verlassen

Eine PWA verleiht Ihrem XR-Erlebnis das Erscheinungsbild einer nativen App. „Zum Home-Bildschirm hinzufügen“ wird in einem eigenen Fenster ohne URL-Leiste geöffnet, und Sie können Ressourcen zwischenspeichern, um offline zu arbeiten.

Mit Service Workern und Cache Storage fangen Sie Anfragen ab und antworten bei Bedarf ohne Netzwerk. Dies verbessert die Latenz und verhindert Aussetzer bei Demos oder Veranstaltungen., wo die Konnektivität nicht immer verfügbar ist.

WebGL, WebGL 2 und der Wechsel zu WebGPU

WebGL ermöglicht GPU-beschleunigtes 2D/3D-Zeichnen im Browser und fügt Elemente in das DOM ein. Die Programme kombinieren JavaScript zur Steuerung und GLSL ES-Shader für die GPU., und wird von Khronos betrieben.

Die WebGL-Gruppe wurde 2009 von Apple, Google, Mozilla und Opera gegründet und Version 1.0 erschien 2011. ANGLE erhielt 2011 die OpenGL ES 2.0-Zertifizierung und verbesserte damit die Portabilität; Im Jahr 2012 portierte Autodesk Apps wie AutoCAD 360 auf WebGL. WebGL 2, basierend auf OpenGL ES 3.0, wurde 2017 eingestellt (Firefox 51, Chrome 56, Opera 43).

Parallel dazu treibt das W3C WebGPU als moderner Nachfolger mit besserem GPU-ZugriffFür WebXR bedeutet dies komplexere Szenen, fortschrittlichere Materialien und effizientere Rendering-Techniken.