Design4real VR AR Agentur

WebXR Api die Zukunft von Augmented Reality im Browser

Stellt euch vor, ihr könntet im Browser eures Smartphones virtuelle Kleidung anprobieren oder Möbelstücke direkt in eurem Wohnzimmer platzieren, um zu sehen, ob sie passen. Klingt nach Science-Fiction? Mit WebXR, dem neuen Standard für virtuelle und erweiterte Realität im Web, ist genau das möglich! WebXR öffnet die Tür zu einer interaktiveren Welt im Internet. Doch für iPhone und iPad Nutzer bleibt diese Tür aktuell leider verschlossen.

Vergleich zwischen WebXR API und ZapWorks beim Versuch Objekte in der Welt zu verorten.

Der Performance-Unterschied ist deutlich.

 

Ohne WebAR haben 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.

 

    1. 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. Allerdings is die WebXR Api allen diesen Frameworks in Sachen Performance deutlich überlegen wie auch das obige Video zeigt.

 

    1. 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.

 

Wird die WebXR-API auf jedem Mobilgerät vorhanden sein?

Es ist wahrscheinlich, dass die WebXR-API in Zukunft auf immer mehr Mobilgeräten verfügbar sein wird. Die Technologie ist noch relativ neu, aber sie hat das Potenzial, die Art und Weise, wie wir mit dem Web interagieren, grundlegend zu verändern. Da immer mehr Geräte AR- und VR-Funktionen integrieren, wird die Nachfrage nach WebXR-fähigen Apps und Erlebnissen steigen.

WebXR auf iPhone? Fehlanzeige!

Obwohl Apples AR-Headset Apple Vision Pro WebXR unterstützt, gibt es auf iPhones und iPads aktuell keine native Unterstützung. Entwickler müssen teure WebAR-Frameworks nutzen, die zudem schlechter performen. Bleibt abzuwarten, ob Apple WebXR für iOS nachreicht.

Apple hat noch keine native WebXR-Unterstützung für iOS angekündigt. Es gibt jedoch einige experimentelle Funktionen in Safari, die WebXR-ähnliche Funktionen bieten. Es ist möglich, dass Apple in Zukunft native WebXR-Unterstützung für iOS hinzufügen wird, aber dies wurde noch nicht bestätigt.

 

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.
Sobald Apple WebXR vollens unterstützt, 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. Doch leider sieht die Gegenwart so aus dass wir noch auf kostenpflichte Farmeworks wie ZapWorks oder Blippar angewiesen sind um iOs lauffähigen WebAR Kontent zu erzeugen.

clarence dadson

Lassen Sie sich beraten.

Sie sind interessierst in die Entwicklung einer Virtual Reality oder 360° Anwendung? Sie haben vielleicht noch Fragen zum Budget und Umsetzung.  Melden sie sich gerne bei mir.

Ich freue mich auf Sie

Clarence Dadson CEO Design4real