Augmented Reality im Web-Browser: Learnings vom AR Weihnachtsdorf

Seit Augmented Reality nicht nur in Apps sondern auch im Browser funktioniert, ist der Zugang zu AR viel einfacher geworden. Als digitales Media Lab wollten wir WebAR einmal ausprobieren. Mit unserem AR-Weihnachtsdorf haben wir gelernt, was geht — und vor allem, was noch nicht.

Analoge Weihnachtskarte? Nix da. Beim Media Lab gibt’s die nur digital enhanced.

Wir haben im Media Lab seit diesem Jahr einen neuen Leitspruch: “Disruption is to challenge every assumption”. Innovation passiert dann, wenn man wirklich jede Annahme in Frage stellt. Zum Beispiel, dass Weihnachtskarten analog sein müssen. Wir wollten in diesem Jahr unbedingt eine Karte verschicken — denn handsigniert auf schönem Papier ist einfach mehr Wertschätzung für unsere Lieblingspartner, als eine einfache E-Mail. Aber so ganz analog, das war uns zu langweilig.

Deshalb haben wir mit unserer Weihnachtskarte ein Augmented-Reality-Gimmick mitgeschickt: Das AR Weihnachtsdorf. Technisch umgesetzt hat es unser wundervoller Partner DEXPERIO mit der neuen Technologie WebAR, also Augmented Reality im Webbrowser. Über dieses Experiment haben wir viel darüber gelernt, was schon geht und was nicht.

SNEAK PEAK: Unser disruptive AR-Weihnachtsdorf

Making of AR-Weihnachtsdorf

Wie wir zu diesem Ergebnis gekommen sind? In 6 Schritten:

Schritt 1: Die Idee

Start für die Idee des Augmented Reality Weihnachtsdorfes war die Erkenntnis, dass man für einfache AR-Anwendungen mittlerweile keine eigenständige App mehr braucht. Eigentlich gibt es AR ja schon seit Jahren, aber erst vergangenes Jahr sind große Player wie Apple mit dem ARKit und Google mit ARCore nachgezogen und haben die technische Umsetzung stark vereinfacht.

Das spannende an Augmented Reality: Das reale Bild wird nur überlagert und ergänzt, nicht komplett ersetzt. So sieht man den Raum um sich herum genauso wie zusätzliche Inhalte, zum Beispiel 3D Modelle, Filme oder Bilder.

Unser experimentelles Objekt war die gedruckte Weihnachtskarte. Die Idee war nach einigen Brainstorming-Runden gefunden: Wir challengen nicht nur die Annahme, die Weihnachtskarte sei analog, sondern auch, dass das Weihnachtsdorf eine alte, uninnovative Firma ist. Wenn man genauer hinschaut, steckt nämlich auch darin ziemlich viel Startup. 😊

Was brauchten wir also?

Schritt 2: Grundmodell finden

Natürlich kann man jedes 3D-Objekt selbst bauen, aber wenn man kein Fantastillarden-Budget hat, gibt es mittlerweile ziemlich gute AR-Objektbibliotheken, die einen Grundstock liefern. Fast wären es die tanzenden Schneemänner geworden, aber die Christmas Island hat dann doch besser zur Story gepasst. Pro-Tipp: Vorher checken, wie gut das Modell wirklich ist. Im Store sah es weitaus besser aus, als es dann am Ende geliefert wurde. DEXPERIO musste leider viel nachbessern und hat einige “Flimmer-Fehler”, die durch eine schlechte Programmierung kamen, nicht mehr ohne immensen Aufwand herausbekommen.

Challenge für das nächste Jahr: Die tanzenden Schneemänner AUF der Weihnachtsinsel?

Schritt 3: Die richtige Technologie finden: AR.js

Momentan funktioniert AR vor allem mit nativen Apps. Der Nachteil: Die muss ich als User erst einmal herunterladen und installieren — und dann brauche ich diese App nie wieder. Dass es auch anders geht hat uns dieser Artikel über AR.js gezeigt. Zunehmend wird AR über den mobilen Browser verfügbar — als “WebAR”. Google hat bereits experimentelle Chrome-Versionen veröffentlicht, die AR nativ im Browser können. Auch Mozilla hat kürzlich eine iOS Anwendung als Testfeld für webbasierte AR Anwendungen veröffentlicht.

Aktuell geht es aber vor allem mit experimentellen Umwegen: Mit den beiden Frameworks AR.js und A-Frame lassen sich einfache AR-Anwendungen mit den aktuellsten Browserversionen anzeigen. Beide haben wir beim AR-Weihnachtsdorf verwendet.

Schritt 4: AR und Print verheiraten

Der Vor- oder Nachteil von AR.js: Damit die Kamera erkennt, wo sie das AR-Objekt platzieren soll, braucht es bei dieser Technologie einen “Marker”. Ähnlich wie ein QR-Code — aber eben nur ähnlich. Ein simpler QR-Code, der direkt zur Anwendung leitet, funktioniert leider nicht — was wir anfangs eigentlich dachten und wollten, schließlich kann die Kamera-App in iOS 11 jetzt auch QR-Codes lesen. Wir brauchten also unschönerweise beides. Den QR-Code für den Link zur Webseite, den Marker für die AR-Anwendung.

Die von DEXPERIO geschriebene Browseranwendung analysiert das Kamerabild mit den entsprechenden Javascript-Befehlen und dockt das 3D-Element an den erkannten Marker. Wir brauchten also auf unserer Weihnachtskarte vor allem diesen Marker: einen großen (leider wenig hübschen) schwarzen Rand mit unserem Logo drin.

• Problem 1: Je größer der Marker, desto besser funktioniert’s. Unsere Karte war aber nur A6 und der Platz begrenzt.
• Problem 2: Viel schwarze Fläche hat die Eigenschaft, im (Büro)licht zu spiegeln. Dinge, über die wir uns noch nie Gedanken gemacht haben. In unseren Tests erkannte die Kamera das Schwarz aber nicht mehr, wenn der Lichteinfall zu stark war.
• Problem 3: Eine Lösung wäre ja: Licht aus machen. Geht aber auch nicht. Denn je dunkler es ist, desto schlechter erkennt die Kamera überhaupt irgendwas. Für AR braucht man also viel Licht.

Schritt 5: Skalierung und Feintuning des 3D-Modells

Auf das Grundmodell der Weihnachtsinsel klebte DEXPERIO digitale Post-Its. Neben einigen grafischen Fragen (welche Farben sieht man eigentlich wie gut), stellte sich auch die Frage der Größe des Modells auf dem Marker. Am Anfang war es sehr klein. Wenn man dann mit dem Smartphone näher heranging, um die Texte auf den Post-Its zu lesen, hatte die Kamera nicht mehr den gesamten Marker im Bild — das Modell verschwand komplett. Skaliert man das Modell zu groß, sieht der Nutzer zu Beginn gar nicht, was es eigentlich sein soll. Der Weg liegt also (wie immer) in der Mitte.

Schritt 6: Eine Lösung für verschiedene Einsatzszenarien

Das Szenario war uns eigentlich klar: Jemand bekommt die Weihnachtskarte, zieht sein Smartphone aus der Tasche, scannt den Marker und sieht das AR Weihnachtsdorf. Pro-Tipp: IMMER vorher User-Tests machen.

Die Startups bei uns im Media Lab mussten als Tester herhalten. Ergebnis: Ältere Smartphones oder Betriebssysteme kamen mit der Anwendung nicht klar, die Nutzer kamen mit dem Marker nicht klar (siehe Schritt 5). Außerdem gab es noch die Option, dass Leute die Anwendung ohne Karte (z.B. hier) ausprobieren.

• Problem Tablet: Auf dem Tablet sieht die Anwendung besser aus, als auf dem Smartphone. Aber hat jeder ein Tablet parat? Nein. Muss also für beides funktionieren.
• Problem Desktop: Eine Weihnachtskarte liegt in der Regel vor einem auf dem Tisch. Wir haben das 3D-Modell also AUF den Marker gestellt. Und wenn man den Marker am Desktop sieht und die Smartphone-Kamera darauf hält? Dann liegt die Weihnachtsinsel auf der Seite. Bei einer Anwendung für verschiedene Szenarien gibt’s da keine Lösung. (Wenn ihr euch das Weihnachtsdorf jetzt anschauen mögt, könntet ihr dann bitte kurz euren Desktop auf den Tisch legen? Danke. ☺️)

Fazit: WebAR wird noch echt spannend!

Unser disruptives AR Weihnachtsdorf war ein schönes kleines Experiment, das aufzeigt, was künftig mit AR alles gehen kann. Vor allem macht es den Zugang für den User so viel einfacher. Die Rückmeldungen waren auch ganz positiv 🙌.

Einen Riesendank an dieser Stelle nochmal an unseren AR-Spezialisten DEXPERIO, die von Google Glasses bis WebAR so viel Freude an Experimenten haben und das AR-Weihnachtsdorf in kürzester Zeit zum Leben erweckt haben! 🙏 🔬🎉

Du willst das AR Weihnachtsdorf selbst ausprobieren?

Die Anleitung findet ihr unter medialab.immersify.me — die Smartphone-Kamera dann einfach auf den Marker halten. (Nicht vergessen: Desktop hinlegen 😉 — oder Tablet holen!)