Eine Weihnachtskarte mit Web-AR

Alle Jahre wieder versenden wir unsere Weihnachtskarte an Kunden und solche, die es werden sollen 😉, Mitstreiter und Freunde. Dabei hatten wir eigentlich schon lange die Ambition, die analoge Karte zu „digitalisieren“. Mit den jüngsten Entwicklungen beim Thema „WebAR“ ergab sich dieses Jahr die ultimative Chance dazu.

Die Idee

Das Motiv auf der - ganz klassisch gedruckten und im Umschlag mit der Post versendeten - Weihnachtskarte kann mithilfe der Smartphone-Kamera und „Web Augmented Reality“ in echtem 3D betrachtet werden. Jetzt werden einige anmerken, das sei doch nun nicht unbedingt etwas Neues. Augmented Reality im Allgemeinen, aber auch die Möglichkeit, Print-Produkte um Augmented-Reality-Inhalte zu erweitern, sei nichts, was man nicht schon einmal gesehen hätte. Soweit korrekt.

Das Besondere bei unserer AR-Weihnachtskarte: Das Augmented-Reality-Erlebnis wird nicht erst durch den Download einer App ermöglicht, sondern es kann vollständig wie eine Webseite innerhalb des mobilen Browsers ablaufen, der auf jedem Gerät vorhanden ist. Denn bei unserer Umsetzung handelt es sich um WebAR, also der Implementierung von AR durch Web-Technologien. Das wiederum ist erst in jüngster Vergangenheit möglich geworden, steckt noch in den Kinderschuhen, und ist eine echte Innovation.

Voraussetzungen für WebAR

Wobei wir auch schon beim Thema wären... WebAR funktioniert momentan noch nicht mit allen Browsern, Geräten und Betriebssystem-Versionen optimal. Also, an alle, die die Weihnachtskarte erhalten haben und bei denen das AR-Erlebnis nicht funktioniert hat – das tut uns sehr leid!

Hier ein paar Details zur Kompatibilität von WebAR:

• iOS: Ab iOS 11 mit dem Safari-Browser sollte dem Erlebnis nichts im Wege stehen. Andere Browser, wie z. B. Chrome, funktionieren dagegen auf dem iPhone/iPad nicht.

• Android: WebAR ist ab Android 4 mit der aktuellen Version des Chrome-Browsers möglich. Achtung: Samsung-Smartphones und -Tablets stellen leider eine kleine Ausnahme dar, die Darstellung ist manchmal etwas verschoben. Das Problem hier ist, dass Samsung seinen Browser zwar auf derselben Technologie wie Chrome aufbaut, aber dabei leider immer einige Versionen hinterherhängt. Sorry an die vielen Samsung-Besitzer da draußen.

• Windows: Mit Windows-10-Tablets wie z. B. dem Surface ist das Winter Wonderland mit den aktuellen Versionen von EDGE, Chrome und Firefox möglich.

Für sonstige Betriebssysteme und Browser übernehmen wir keinerlei Gewähr.

Das augmentierte Winter Wonderland als Video

Für diejenigen, bei denen das WebAR-Erlebnis leider nicht funktioniert, haben wir als kleinen Trost ein Video erstellt. So sollte das Erlebnis eigentlich aussehen. Im Video gut zu sehen: Den QR-Code scannen wir mit dem iPhone direkt über die Kamera. Diese tolle Funktion gibt es seit iOS 11 endlich ohne extra QR-Reader-App.

<video class="paragraph" src="https://s3-eu-west-1.amazonaws.com/cap3gmbh/public/website/upload/blog/20171206_weihnachtskarte/Weihnachtskarte_video.mp4" controls=""poster="https://s3-eu-west-1.amazonaws.com/cap3gmbh/public/website/upload/blog/20171206_weihnachtskarte/WebAR_Weihnachtskarte_Video_Screenshot.jpg">

Warum der Marker (schwarzes WebAR-Quadrat) auf der Karte?

Für AR in einer App genügt das Live-Kamerabild, um daraus Positionen im Raum zu erkennen und den AR-Inhalt entsprechend darzustellen. Leider gilt das noch nicht für Augmented Reality über den Browser. Warum? Aufgrund der benötigten Rechenleistung. Hier zitiere ich kurz unseren AR-Experten Sebastian Losch, der das Winter Wonderland für die Weihnachtskarte umgesetzt hat:

„Die Grundproblematik der AR lässt sich auf einen einzigen Faktor reduzieren: Position. Und zwar die Position (und Ausrichtung) der Kamera in Relation zur Umgebung. Um ein Objekt in korrekter Form über dem Live-Kamerabild zu platzieren, benötigt die AR-Software Informationen über die Größe und die Rotation des zu zeichnenden Objektes. Dies wird über sogenannte Marker realisiert. Ein Marker kann ein Muster, ein Bild oder ein Objekt sein. Wichtig ist nur, dass er genügend eindeutige Merkmale enthält. Je komplexer der Marker, desto höher die benötigte Rechenleistung. Einer Web-Applikation, die im Browser läuft, steht in der Regel weniger Rechenleistung zur Verfügung als einer nativen App.“

Das ist der Grund, warum AR bisher fast ausschließlich nativ umgesetzt wird, und auch der Grund für den Marker auf unserer Weihnachtskarte.

Wer mehr über dieses Thema lesen möchte, kann das in dem ausführlicheren Blogeintrag von Sebastian Losch tun.

Erlebnis ohne Karte testen

Keine Karte erhalten, aber ihr möchtet das AR-Erlebnis trotzdem ausprobieren? Smartphone oder Tablet in die Hand und diese URL: xmas.cap3.de im Browser eingeben. Kamera-Zugriff erlauben, die Kamera auf den Marker unterhalb dieses Absatzes halten und ins Winter Wonderland eintauchen. Merry Xmas!

Super Teamarbeit

Die Erstellung der diesjährigen Cap3-Weihnachtskarte war grandiose Teamarbeit.

DANKE an...

• Unseren AR-Experten und Entwickler Sebastian Losch für die Programmierung

• Cap3-Designer Benjamin Lau für die Erstellung der 3D-Grafik

• Unseren Prakti Pascal Wegner für die Erstellung des Videos

• Carolin Moll von excogito aus Freiburg für das Design der Karte