WebXR-API – Gamechanger für WebAR-Entwicklung

webxr-logo

Die WebXR-API steht kurz davor, die Art und Weise, wie wir WebAR (Web-basierte Augmented Reality) Anwendungen erstellen, zu revolutionieren und bringt bedeutende Fortschritte und Möglichkeiten in die Welt der browserbasierten AR-Entwicklung. Hier eine kurze Erklärung, warum die WebXR-API die WebAR-Landschaft verändern wird:

In der Vergangenheit hatten Sie beim Erstellen von WebAR-Inhalten drei Möglichkeiten:

  1. Eine Open-Source-WebAR-Lösung verwenden
    Open-Source-WebAR-Lösungen wie AR.js können leider im Bezug auf die Tracking-Qualität und die Vielfalt der Funktionen nicht mit kostenpflichtigen Lösungen mithalten. 3D Objekte die mit einem Marker in der Welt verortet werden sollen, werden mit einer deutlich bemerkbaren Latenz in ihrer Position und Größe geupdated. Das Ergebnis erscheint ruckelig. Weiterhin ist man bei der Gestaltung der Bildmarker, die getracket werden sehr eingeschränkt. Die Marker sehen ein wenig wie wie eine Art QR-Code. Mit dickem schwarzen Rand aussen herum. Insgesamt ist die Qualität der Augmented Reality Erfahrung mit AR.js unserer Meinung nach nicht trauglich für den Einsatz in professionellen Kundenprojekten.
  2. Einen kostenpflichtigen WebAR-Framework verwenden
    Kostenpflichtige Frameworks eine bieten eine Vielzahl von Funktionen, abhängig vom gewählten Framework. Einige der relevantesten Frameworks sind 8th Wall, Zapworks, Blippar und  MyWebAR. Der Preis für eine Lizenz für eine solche WebAR Lösung, kann über 500 € im Monat betragen und ist nicht für Projekte mit kleinem Budget geeignet. Diese Frameworks bieten einige No-Code-Lösungen zur Vereinfachung der Inhaltsentwicklung an. Weiterhin bieten sie auch eine Vielzahl von unterschiedlichen Tracking Funktionen wie Gesichtsverfolgung, Marker oder markerloses Tracking an. Die Features und Trackingqualität unterscheidet sich zwischen den WebAR Frameworks. Es bietet sich an selber Tests mit dem jeweiligen Framework durchzuführen, bevor man eine Entscheidung trifft. Eigentlich jedes dieser WebAR Frameworks bietet die Möglichkeit eine kostenfreie Testlizenz in einem begenzten Zeitraum zur Evaluierung zu benutzen.
  3. Andererseits könnten Sie den Google Model Viewer verwenden. Der Model Viewer ermöglicht es Ihnen, ein 3D Modell, das in GLTF/GLB und USDZ Format für iOS in Augmented Reality umgewandelt wurde, anzusehen. Da dieses Framework die Hardwarebeschleunigung des Mobilgeräts nutzt, ist die Performance großartig. Ein weiteres Plus ist dass der Modelviewer recht einfach in HTMl einzubetten ist aund auch auf Desktop PCs sauber läuft. Allerdings nicht in Augmented Reality sondern nur auf demScreen. AR mit Model Viewer erlaubt es ermöglicht die Verwendung von Flächenerkennung so wie das in iOS und Android Apps über ARkit und ARCore moglich ist. Der Nachteil ist, dass der Model Viewer fast keine Möglichkeiten zur Implementierung von Interaktionen hat. So sind Sie auf das Abbspielen von Animationen , die im 3d modell eingebacken wurden oder auf Positionswechsel und Skalierung und Drehung Ihres 3D-Modells durch den Benutzer in Echtzeit beschränkt. Der Modelviewer eignet sich als WebAR Tool für Ecommerce ist aber das Falsche Werkzeug für Storytelling in AR. Wenn sie ausschlisslich ein Modell mit beschränkter Animation und Interaktion zeigen wollen ist der Modelviewer das richtige Tool.

Bald wird die WebXR-API auf jedem Mobilgerät vorhanden sein

Aus diesem Grund bietet sich bald eine hochperformante Alternative zu den obigen Möglichkeiten um WebAR Content zu ereugen.

Warum verwenden wir nicht jetzt schon WebXR?

Die Antwort ist einfach: Es wird noch nicht von iOS Safari-Browser unterstützt. Hier die Kompatibilitätstabelle. Aber das wird sich wohl bald ändern, denn das Apple Vision Pro Headset unterstützt WebXR. Daher ist es sehr wahrscheinlich, dass die iOS-Geräte diese Api in der Zukunft auch unterstützen werden, um die Kompatibilität mit Apples VR-Gerät sicherzustellen.
Sobald das passiert, müssen die Anbieter von WebAR-Frameworks einige interessante Angebote vorlegen, um  weiter relevant zu bleiben. Denn die meisten dieser kostenpflichtigen WebAR-Frameworks sind mehr oder weniger ein Workaround, um Funktionen wie Flächenerkennung und Gesichtserkennung in Browser zu ermöglichen, ohne auf die eingebauten Sensoren des jeweiligen Geräts angewiesen zu sein.

WebXR benötigt diesen Workaround nicht, da es bereits Zugang zu den Sensoren des Geräts hat und das geht mit einer erheblichen Leistungssteigerung im Tracking einher. Denn Performance ist der Schlüssel zur Erstellung aufregenden 3D-Grafiken in WebAR. Wenn das Tracking nicht überzeugend oder zu langsam ist bricht die gesamte Illusion der virtuellen Objekte, die in der Wirklichen Welt dargestellt werden zusammen.

Sehen wir uns WebXR genauer an.

Erstellung von Augmented Reality (AR)-Anwendungen für Mobilgeräte mit der WebXR-API

Einführung in die WebXR-API:

Browserbasierte Augmented Reality (AR) auch WebAR genannt, hat enorm an Beliebtheit gewonnen und erlaubt uns auf neue Art und Weise mit 3D Inhalten auf Webseiten zu interagieren. Mit dem Aufkommen der WebXR-API haben Entwickler nun die Möglichkeit, AR-Anwendungen direkt für Mobilgeräte mit Webtechnologien zu erstellen. In diesem Beitrag untersuchen wir den Prozess der Erstellung von WebAR-Anwendungen für Mobilgeräte mit der WebXR-API und heben ihre Schlüsselfunktionen und -fähigkeiten hervor.

Verständnis der WebXR-API:

Die WebXR-API ist eine leistungsstarke JavaScript-API, die es Entwicklern ermöglicht, immersive Erlebnisse, einschließlich Augmented Reality und Virtual Reality, direkt in Webbrowsern zu schaffen. Bei der AR-Entwicklung für Mobilgeräte bietet die WebXR-API einen standardisierten Rahmen für den Zugriff auf Gerätesensoren, das Rendern von 3D-Grafiken und die Handhabung von Benutzerinteraktionen. Sie abstrahiert die Komplexitäten von gerätespezifischen Implementierungen und ermöglicht es den Entwicklern, sich auf die Erstellung von AR-Erlebnissen zu konzentrieren, die nahtlos über Plattformen hinweg funktionieren.

Unterstützung von Geräten und Browsern:

Bevor Sie mit der AR-Entwicklung mit der WebXR-API beginnen, ist es wichtig, die Unterstützung von Geräten und Browsern zu berücksichtigen. Derzeit bieten große mobile Browser wie Chrome, Firefox und Safari unterschiedliche Grade an WebXR-Unterstützung. Stellen Sie sicher, dass Ihre Zielgeräte und -browser mit der WebXR-API kompatibel sind, um eine breite Reichweite für Ihre AR-Anwendung zu gewährleisten.

Zugriff auf Gerätesensoren:

Die WebXR-API ermöglicht es Entwicklern, auf die Sensoren von Mobilgeräten zuzugreifen, darunter Beschleunigungssensoren, Kreisel, Magnetometer und Kameras. Diese Sensoren liefern entscheidende Daten für die Erstellung immersiver AR-Erfahrungen. Mit der WebXR-API können Sie auf Sensordaten zugreifen, um die Bewegung und Orientierung des Geräts zu verfolgen, gestenbasierte Interaktionen zu implementieren und Eingaben aus der realen Welt in Ihre AR-Anwendung zu integrieren.

Erstellung von 3D-Grafiken und Overlays:

AR-Anwendungen basieren auf visuell ansprechenden 3D-Grafiken und Overlays, die virtuelle Inhalte nahtlos mit der realen Umgebung verbinden. Die WebXR-API bietet Funktionen zur Darstellung von 3D-Grafiken mit WebGL, einer webbasierten Grafikrendering-Technologie. Sie können 3D-Objekte erstellen und manipulieren, Texturen und Materialien anwenden und Animationen in Ihrer AR-Anwendung einbauen. Darüber hinaus ermöglicht die WebXR-API die präzise Platzierung von virtuellen Objekten in der realen Welt durch räumliche Zuordnung und ankerbasierte Positionierung.

Benutzerinteraktionen und Eingabehandhabung:

Benutzerinteraktionen spielen eine entscheidende Rolle bei AR-Erfahrungen. Die WebXR-API ermöglicht es Entwicklern, Benutzereingaben wie Berührungsereignisse, Gesten und räumliches Tracking zu verarbeiten. Durch die Nutzung dieser Eingabemöglichkeiten können Sie intuitive Steuerelemente implementieren, die Objektmanipulation ermöglichen und Ereignisse auf der Grundlage von Benutzerinteraktionen auslösen. Dies fördert immersive und interaktive AR-Erfahrungen, die in Echtzeit auf Benutzeraktionen reagieren.

Performance-Optimierung:

Wie bei jeder webbasierten Anwendung ist die Performance-Optimierung entscheidend für die Bereitstellung von flüssigen und reaktionsschnellen AR-Erfahrungen. Die WebXR-API bietet Mechanismen für effizientes Rendering, wie z. B. die Nutzung von Web Workers für parallele Verarbeitung, Optimierung des Asset Loadings und Implementierung von Okklusions-Culling zur Leistungsverbesserung. Eine sorgfältige Berücksichtigung von Performance-Optimierungen ist entscheidend, um sicherzustellen, dass Ihre AR-Anwendung nahtlos auf Mobilgeräten läuft.

 

Fazit:

Die Entwicklung von Augmented Reality-Anwendungen für Mobilgeräte über die WebXR-API eröffnet Entwicklern spannende neue und kostengüstige Möglichkeiten. Mit Zugriff auf Gerätesensoren, der Möglichkeit, 3D-Grafiken und Overlays zu erstellen, der Handhabung von Benutzerinteraktionen und der Optimierung der Performance, ermöglicht die WebXR-API Entwicklern die Erstellung von immersiven und interaktiven AR-Erfahrungen, die direkt in Webbrowsern laufen. Mit der weiteren Entwicklung und breiteren Akzeptanz der WebXR-API wird sie die Zukunft der AR-Entwicklung weiter prägen und eine breitere Palette von Mobilgeräten in die Lage versetzen, fesselnde AR-Erlebnisse zu liefern.

Aus unserem Blog

Categories