Augmented Reality

Spark AR Studio für AR Filter

Ein Beitrag von
13. März 2020
spark ar
Dass AR Filter im Kommen sind und kein kurzlebiger Trend sind den man verschlafen kann, haben wir ja bereits hier im Blog ausführlich behandelt. Mir geht es an dieser Stelle eher darum, das ganze von technischer Seite zu beleuchten und aufzuzeigen, was denn eigentlich dazu gehört bzw. wie man es eigentlich angeht einen Filter für Instagram oder Facebook mittels Spark AR zu entwickeln.

Der erste Schritt zum eigenen Facebook oder Instagram Filter ist es, sich die Software Spark AR Studiozu installieren. Das ist ein von Facebook entwickeltes umfangreiches Tool das speziell der Erstellung von AR Filtern für Instagram und Facebook Stories dient. Facebook entwickelt es aktiv und stellt es allen Usern gratis zur Verfügung.

  Spark AR Studio UI

Überblick

Nach dem Starten von Spark AR wird man mit einem Auswahlmenü für verschiedene Templates gegrüßt. Das wichtigste um einen AR Filter, der viral gehen könnte, zu entwickeln, ist natürlich als erstes eine gute bzw. originelle Idee. Abhängig von dieser Idee kann man sich dann für das passendste Template entscheiden, momentan (März 2020) stehen folgende Templates zur Auswahl:

  Spark AR Templates Auswahl

Hervorzuheben wäre hierbei, das neu hinzugekommene “3D Animated Poster”. Dies ermöglicht Image Based Target AR Tracking bei AR Filtern, also ein bisher komplett unerschlossenes Gebiet im Marketing für Unternehmen. “World Object” ist hierbei das Gegenstück und stellt einen Filter mit markerlosem Plane Tracking dar. Die häufigste Variante ist aber wohl nach wie vor die klassische “Face Decoration”, die ein Template mit Face Tracking Funktionalität darstellt um 3D-Modelle, Partikeleffekte, Animationen etc. am Gesicht des Users via Front/Selfie Camera darzustellen.

 

Beispiel

Wir bei CodeFlügel haben bereits mehrere Filter offiziell auf Instagram veröffentlicht (Einfach unser Profil besuchen):

  AR Filter CodeFluegel

Die meisten davon basieren auf dem Face Decoration Template! Hat man also eine Idee und ein möglichst passendes Template gefunden so geht es weiter mit den nächsten wichtigen Schritten:

  1. Content Creation

  2. Funktionalität implementieren & Testen

  3. Review und Publishing

Content Creation

Um einen tollen AR Filter zu erstellen, benötigt man natürlich Content, der dann im Kamerastream der User angezeigt wird. Die Möglichkeiten reichen hierbei von Bildern (mit Transparenzen bzw. Alpha Kanal) über Sounds bis zu 3D-Modellen und Animationen. Spark AR bietet die Möglichkeit, eigene Assets zu importieren und damit zu arbeiten (diese Methode verwenden wir hauptsächlich), aber Spark AR kommt auch standardmäßig mit einer großen Library von AR Elementen. U. a. ist hier die Möglichkeit integriert, texturierte und oft auch animierte 3D Modelle direkt von Sketchfab zu durchsuchen und in das eigene Projekt zu importieren:

  3D Modelle Spark AR Sketchfab

Implementierung & Testen

Bei der eigentlichen Umsetzung des Filters sind der eigenen Phantasie (fast) keine Grenzen gesetzt, bereits mit wenig Einarbeitungszeit können eindrucksvolle Ergebnisse erzielt werden. Um Interaktionen und Abläufe zu erstellen bedient sich Spark AR eines durchdachten Node-basierten Systems, genannt Patch-Editor. Ein Patch kann dabei ein Objekt oder einen Parameter eines Objektes (Wie Sounds, 3D-Modelle, Animationen, ect.) darstellen. Diese können mittels vieler unterschiedlicher Arten von weiteren Patches zum Aufbau der Filter Funktionalität verwendet und kombiniert werden. Wir haben eine Variante der populären “Was bin ich”-Filter umgesetzt (mit dem Topic “Austrian Sweets”). Wie so ein Patch-Editor dann aussehen kann, ist in folgendem Screenshot ersichtlich:

  Patch Editor Spark Ar

Natürlich bietet Spark AR auch die Möglichkeit, den Umfang des Patch Editors durch eigenen Code zu erweitern. Zum Einsatz kommt dabei Javascript als Programmiersprache.

Zum Testen kann man den Filter direkt an den eigenen Instagram Account senden. Man bekommt in der App dann eine Notification, dass der Filter bereit zum testen ist. Daneben gibt es ausführliche Simulatoren für Testing.

Review & Publishing

Ist man mit dem Filter zufrieden, kann man den Review-Prozess starten um den Filter offiziell zu veröffentlichen. Dies dauert im Regelfall in etwa eine Woche, sollten alle Anforderungen erfüllt sein. Die wichtigste Anforderung ist wohl ein 4MB Größen-Limit einzuhalten, was bei großen Video oder Bilddateien im Filter durchaus nicht so einfach sein kann. Wurde der Filter „approved“ so ist er am eigenen Profil in Zukunft für alle Nutzer einseh- und benutzbar!

Abschließend

Spark AR wirkt wirklich bereits sehr durchdacht und aufgeräumt, man sieht deutlich dass Facebook vorhat dieses Tool noch länger zu erweitern und zu unterstützen. AR Filter sind wie gesagt auch nichts, was so schnell wieder verschwinden wird. Ich verweise an dieser Stelle nur auf die Blogposts meiner Kollegin Tatjana über AR Filter auf Social Media und die wichtigsten Infos für das Marketing bei Instagram AR Filtern. Sollte das Interesse für eigene AR Filter geweckt sein, nicht zögern und uns einfach direkt darauf ansprechen!