webAR - Was ist das? [Augmented Reality ohne App]

Was ist an WebAR also so besonders? Die Augmented Reality ist dabei auf einer Website integriert – läuft also einfach im Browser, ganz egal ob Smartphone oder PC, ganz egal ob Windows, MacOS, iOS oder Android. Was heißt das? Ganz einfach: Es braucht keine Apps, keine Downloads und keine Wartezeiten mehr, um AR nutzen zu können. So wird der Zugang zur Technologie erheblich vereinfacht.

Welche Vorteile bringt WebAR gegenüber AR-Apps?

WebAR ist der App-basierten Anwendung hauptsächlich in einem Punkt voraus: Erreichbarkeit. Wenn man 3D Modelle herstellt, sie texturiert, ggf. animiert, aufwendige AR Experiences erstellt, dann geschieht das natürlich nicht ohne Grund. In den meisten Fällen möchte man mit seinem Content Kunden erreichen, Interesse wecken, begeistern und schließlich vom Kauf überzeugen. 

Um von Augmented Reality vernünftig profitieren zu können, um damit effektiv Kunden zu erreichen, muss auch die AR Lösung erreichbar sein. Diese Erkenntnis ist erst mal offensichtlich, das umzusetzen ist aber schon eine ganz andere Geschichte. Bei den gängigen AR Apps, die zurzeit den Google Play Store und den AppStore überschwemmen, sind sämtliche Hürden vorhanden, die ebendiese Erreichbarkeit enorm einschränken. Wie gesagt: Hauptfaktoren sind dort der Download, die damit verbundene Wartezeit und der Weg durch den AppStore. Wahrscheinlich am problematischsten ist allerdings, dass potenzielle Kunden die Anbieter-Website verlassen müssen, um AR nutzen zu können. In dem Moment sind sie außerhalb des Bereichs, in dem Marketingstrategien greifen. WebAR macht es möglich, Kunden so lange wie möglich auf der Website zu halten und trotzdem gleichzeitig mit Augmented Reality zu überzeugen.

Dazu kommt die Möglichkeit, WebAR per QR-Code zu nutzen. Das einfache Scannen eines Codes schickt den Nutzer sofort auf die Website. Das Einzige, was Nutzer und AR dann noch voneinander trennt, ist die Ladezeit der Website - nicht im Ansatz mit den Downloadzeiten von Apps zu vergleichen. Auch gut daran: Es werden gleich neue potenzielle Kunden auf die Website gelenkt.

Anwendungen mit WebAR entwickeln

Der absolute Standard, wenn es um AR im Web geht, ist WebXR. Das ist eine große API, die Entwicklern die Grundbausteine für sämtliche webbasierte AR Anwendungen bietet. Das heißt aber nicht, dass man WebXR immer direkt nutzt. In den meisten Fällen nutzt man eine der vielen Libraries und Entwicklungsumgebungen, die einem noch mehr Arbeit abnehmen. WebXR wird dann dort implementiert.

Warum ist WebXR so vorteilhaft?

• Sowohl AR als auch VR Anwendungen sind mit der gleichen API möglich.
• Die Zahl an Verwendungsmöglichkeiten (alleine mit AR) ist riesig! Sei es per JavaScript-Library oder mit fertigen HTML-Bausteinen. Beispiele wären:
• Googles Model-Viewer
• A-Frame
• three.js
• p5.xr
• Input und Rendering werden von WebXR übernommen.
• WebXR baut auf WebGL, dem langjährigen Standard für Rendering im Web, auf. Die Developer Community ist riesig.
• Es werden viele Geräte unterstützt. Von Headsets wie der Oculus Rift und der Microsoft HoloLens bis zu Smartphones - das Spektrum ist groß.

Sehr zum Nachteil der Technologie ist allerdings nicht die Software selbst, sondern der Browser, in dessen Rahmen sie genutzt werden muss. Browser sind dafür bekannt, nicht besonders auf Performance optimiert zu sein. Gerade bei AR und VR Anwendungen kann das zu Problemen führen. Und auch wenn sich das in nächster Zeit wohl stark ändern wird, noch ist WebXR nicht flächendeckend in allen Browsern nativ eingebaut. Das liegt sicherlich auch daran, dass AR im Allgemeinen zwar nicht mehr in den Kinderschuhen steckt, trotzdem aber längst noch nicht “ausgewachsen” ist.

Mehr zum Thema WebXR und AR Marketing im Web!

Zwei weitere Ansätze, die zum Teil allerdings auch auf WebXR beruhen, sind AR QuickLook von Apple und Model-Viewer von Google. Beides funktioniert per Einbindung einer Datei in den HTML-Quellcode. Die Integration ist in beiden Fällen extrem einfach und erfordert nur etwa zwei Zeilen (einfachen!) Codes. Beide Lösungen unterstützen mittlerweile Animationen und User-Interaktionen - das war vor noch recht kurzer Zeit nicht der Fall.

Besonderheiten von Googles Model-Viewer

• Bietet ein Fallback für Systeme wie Desktop-Rechner, die AR nicht unterstützen. Das 3D Modell wird dann auf der Website dargestellt und lässt sich z.B. drehen.
• Google nutzt zwei gängige 3D Dateiformate (GLB & gITF) und unterstützt auch das Apple-Dateiformat (USDZ)
• Relativ gut dokumentierte, wenn auch nicht ganz einfache Konfiguration und viele Features.

Besonderheiten von Apples AR QuickLook

• proprietäres Dateiformat (USDZ) 
• Wird von Apple kontinuierlich ausgebaut und weiterentwickelt
• Qualitativ sehr hochwertige und realistische Darstellung
• Nur eine Zeile einfacher Code notwendig!

Neben diesen do-it-yourself-Lösungen gibt es natürlich auch Anbieter, die ihre eigenen WebAR Tools entwickelt haben. Die Prominentesten sind sicher 8th Wall und Zappar. Man bekommt hier als Kunde, ob privat oder Unternehmen, einen Baukasten, mit dem man dann die AR-Experience aufbauen kann. Das Ganze ist in der Hinsicht also erst mal etwas nutzerfreundlicher, dafür aber auch alles andere als günstig. So richtig teuer wird es, wenn man eine Lizenz für “Commercial Use” kaufen will. Das Abonnement liegt dann gerne mal bei 3000 Euro pro Monat.

Wie stark ist die Technologie verfügbar?

Die Verfügbarkeit von Libraries und die Unterstützung von Standards wie WebGL und WebXR war für WebAR-Technologien relativ lange ein Problem. Chrome und Firefox waren die ersten Browser, die alle Anforderungen erfüllt haben, Safari blieb, wie so oft, Nachzügler. Das liegt wohl auch daran, dass sich die Technologie langsam fortbewegt und bei Weitem noch nicht vollständig im Mainstream Markt angekommen ist.

Seit sich Apple 2008 gegen Web-Apps und für einen AppStore entschieden hat, sträuben sie sich gegen webbasierte App-Alternativen. Der AppStore gibt Apple Kontrolle darüber, was mit und in den Apps passiert. Das ist natürlich in Apples Interesse. Teilweise wegen der Privatsphäre der Nutzer aber natürlich auch aus ökonomischen Gesichtspunkten.

Obwohl sich Apple den sich langsam etablierenden Standards also immer wieder querstellt, hat sich die Situation drastisch verbessert. Viele WebAR Experiences, die z.B. mit A-Frame gebaut sind, laufen mittlerweile problemlos. Die Sache kommt ins Rollen! Und selbst wenn die Anforderungen mal nicht erfüllt sind, bieten viele Seiten Fallbacks an, die auf nicht unterstützten Geräten gezeigt werden.

Das kann man mit WebAR machen

Augmented Reality findet besonders im Web viele Anwendungen - gerade in Onlineshops, aber durch die einfache Zugänglichkeit auch in sämtlichen firmeninternen Bereichen.

WebAR Anwendungen für Onlineshops

• Produktvorschau dort, wo das Produkt am Ende hingehört. Etwa Möbel im Raum ausprobieren wie bei IKEA Place.
• Augmented Reality Konfiguratoren erlauben das Anpassen von Produkten in einer AR (oder VR) Experience.

Firmeninterne Anwendungen für WebAR

• Onboarding und Training von Mitarbeitern
• Remote Produktvorführungen im B2B Bereich
• Mini Games können Webseiten auflockern und zum Teilen anregen.

Die Technologie wird immer erreichbarer und auch Apple gibt langsam nach. Die Liste der unterstützten Browser und Geräte wird immer länger und die Entwicklung läuft überall auf Hochtouren. Die Technologie ist definitiv zukunftsfähig. Wir sind gerade dabei, den Grundstein für ein Augmented Reality Web zu legen!

Anwendungsbeispiele für webAR

Es gibt bereits zahlreiche Anwendungen, die auf Basis der webAR-Technologie umgesetzt wurden. Auch wieder haben damit schon diverse Projekte fertiggestellt.

Interessiert? Dann probier doch die nachfolgenden Projekte direkt mit deinem Smartphone aus.

Condor Business-Class Sitze

Für Condor haben wir eine webAR-Anwendung erstellt, mit der du die Business-Class Sitze direkt in der erweiterten Realität anzeigen lassen kannst.

Klicke hier, um die Anwendung zu testen

Recruiting Polizei Hessen

Für die Polizei Hessen haben wir an dieser Anwendung gearbeitet. Im Zentrum dieser Kampagne steht der Nachwuchs für die Polizei. Personen, mit einem Smartphone, konnte über diese webAR-Anwendung bei einer virtuellen Spurensuche teilnehmen. Wie das genau ausgesehen hat, findest du in diesem Video heraus.

Mehr Infos?

https://jonasarleth.com/artikel/ar-im-web-10-anwendungsbeispiele-gespraech-mit-matthias-hamann 

https://matthiashamann.work/de/blog/artikel/WebXR-Virtual-und-Augmented-Reality-im-Web 

https://matthiashamann.work/de/blog/artikel/web-basierte-ar-technologien-im-digitalen-produktmarketing 

https://www.crosscomm.com/blog/post/Future-Of-Web-XR

https://immersiveweb.dev/