Blog

Eine Weihnachtskarte mit Web-AR

Ein Artikel aus den Bereichen Softwareentwicklung, Cap3 Insights
Kira Magedanz
07.12.2017
Kira Magedanz

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.

Frohe Weihnachten

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.

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!

Marker fĂŒr WebAR

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

Interesse? Schreiben Sie uns!

Sie möchten ein Software-Projekt mit uns starten oder ĂŒber Ihre Idee sprechen? Wir freuen uns ĂŒber Ihre Kontaktaufnahme!

Unverbindliche Projektanfrage

In welchen Bereichen können wir Sie unterstĂŒtzen?