Adrian Steckeweh zeigt, wie man in wenigen Schritten einen interaktiven Gesichtsfilter in Spark AR Studio baut
Adrian Steckeweh alias omega.c ist im realen Leben Architekt. Schon früher entwickelte er gerenderte Face-Filter in Cinema 4D, seit Anfang des Jahres experimentiert er mit Spark AR Studio. Er sieht dies als »neue Leinwand«, auf der sich gerade viele Künstler austoben und dabei neue Konzepte und Ideen entwickeln. Ihn interessieren dabei vor allem Materialien und deren physikalische Eigenschaften wie weich, hart, kalt und warm – oder nass, wie der Instagram-Regenfilter, dessen Erstellung er hier Schritt für Schritt erklärt.
Schritt für Schritt zum Face Filter für Instagram mit Spark AR
In der Funktionsweise erinnert Spark AR Studio an Gestaltungstools wie Cinema 4D oder Photoshop, bei denen man verschiedene Ebenen überlagern kann. Dank der visuellen Entwicklungsoberfläche, dem sogenannten Patch Editor, in dem bereits fertige Interaktionsmodule zur Verfügung stehen, lassen sich User-Interaktionen und Animationen hinzufügen, ohne dass der Anwender diese selbst coden muss.
Übersicht: Tutorial zum Erstellen von Instagram-Face-Filter
Durch Rechtsklick auf das Kamera-Icon im »Scene«-Menü oben links in Spark AR Studio füge ich ein Face Mesh ein. Dieses kommt direkt in einem Face Tracker, der dem Gesicht und seinen Bewegungen folgt. Über den +-Button neben »Assets« erstelle ich ein neues Material und nenne es »Rain«.
Klicken Sie auf das Bild, um es zu vergrößern
Dann wähle ich im »Scene«-Menü das Face Mesh aus und im rechten Menü (der Inspector) als Material das gerade erzeugte »Rain«.
Weil das Material wie Wasser reflektieren soll, aktiviere ich im »Assets«-Menü »Rain« und stelle im Inspector als »Shader Tape« »Physically-Based« ein.
Ich ändere die Farbe des Materials zu Schwarz, um die stärkste Reflexion zu erzeugen. Um sie zu aktivieren, setze ich den Haken neben »Environment« und wähle im Drop-down-Menü »Skylit Garage« als Reflexions-Map, die nun automatisch dem »Assets«-Menü hinzugefügt wird. Achtung: In der neuen Version von Spark AR muss man zunächst über + eine »Environment Texture« erzeugen und kann diese anschließend im Environment Tab auswählen und modifizieren.
Per Rechtsklick ins »Assets«-Menü importiere ich die Texturen, die ich vorher schon in Photoshop angelegt habe. Die Normaltextur gibt der Reflexion ein Relief, das die Form der Tropfen beschreibt. Die Alphatextur kontrolliert, dass die Tropfen mehr reflektieren als der Hintergrund.
In der Menüleiste gehe ich unter »Project« auf »Edit Properties…« und stelle im erscheinenden Fenster unter »Compression« die Qualität der Texturen auf 100 Prozent, weil Spark AR Studio sie sonst stark herunterrechnet.
Spark AR stellt im »Help«-Menü sogenannte Face Reference Assets zur Verfügung, die ich per »Get Face Reference Assets …« im Projektordner speichere. Dann importiere ich aus dem »Textures«-Ordner die Textur »faceMeshMask.png«. Diese ist an das Face Mesh angepasst und hat zu einem späteren Zeitpunkt die Funktion, dessen Rand weichzuzeichnen.
Zunächst setze ich im »Material«-Menü den Haken neben »Normal« und klicke direkt auf »Texture«. Das öffnet den Patch Editor und erzeugt den Patch, der die Normaltextur repräsentiert. Aus dem »Assets«-Menü ziehe ich die »Rain«-Normaltextur in den Patch Editor und verbinde den RGBA-Punkt mit dem Normal-Patch des Materials. Die Veränderung des Materials lässt sich direkt im Simulator sehen.
Um die Transparenz des Materials zu ändern, klicke ich im »Material«-Menü unter »Shader Properties« auf »Texture«. Den im Patch Editor erzeugten Patch verbinde ich mit der Alphatextur, nachdem ich diese in den Editor gezogen habe. Die Tropfen sind jetzt schwarz und weniger transparent, der Hintergrund gräulich und damit mehr transparent. Ich ändere den »Blend Mode« zu »Add«, um den schwarzen Teil der Textur auszublenden und nur die hellen Reflexionen zu sehen.
Jetzt fällt die harte Kante des Face Mesh auf. Durch Rechtsklick in den Patch Editor kann ich verschiedene Patches erzeugen. Ich wähle den »Multiply«-Patch um die »faceMeshMask« mit der Alphatextur zu multiplizieren.
In diesem Fall bedeutet das, dass sich die beiden Texturen zu einer verbinden. Weil ich will, dass die Tropfen das Gesicht herunterlaufen, hole ich mir über Rechtsklick zweimal den »Texture Transform«-Patch und schalte jeweils einen zwischen den Input und Output der Alpha- sowie der Normaltextur.
Für die Transformation sorgt der »2D Transform Pack«-Patch, die Animation kommt vom »Loop Animation«-Patch und die eigentliche Bewegung vom »Transition«-Patch. Diesen muss ich per Rechtsklick von einem Typ »Point 3D« auf »Point 2D« umstellen. Den Wert für »Duration« setze ich auf 3 Sekunden, und im »Transition«-Patch ändere ich den y-Endwert auf 1, was die Bewegung nach unten ausdrückt. Das Material sieht fehlerhaft aus, weil die Texturen sich nicht wiederholen. Das ändere ich, indem ich auf diese klicke und alle »Tiling Modes« auf »Repeat« setze.
Der Regen rinnt jetzt das Gesicht herunter. Ich finde es spannend, wenn er auch aufwärts fließen kann. Dies soll der User per Screen Tap steuern können. Dazu erzeuge ich einen »Screen Tap«-Patch und verbinde diesen mit einem »Counter«. Da ich nur zwei Optionen haben will, sage ich, dass der »Maximum Count« bei 2 liegt und »Jump to Number« 1 ist. Wenn der User nun den Screen tippt, wechselt der Counter von 1 auf 2 und zurück.
An den Patch hänge ich zwei »Option Picker«, von dem der eine den Wert der Rotation erhält und der andere den Wert für die Richtung, in die sich die Textur bewegen soll – diesen muss ich dafür per Rechtsklick in einen Typ »Point 2D« ändern. Die erste Option im Patch liegt bei einem y-Wert von 1 ohne Rotation. Bei der zweiten Option ist die Textur um 180 Grad gedreht und bewegt sich um einen y-Wert von -1. Die beiden »Option Picker«-Patches verbinde ich einmal mit dem Endwert im »Transition«-Patch und dem Rotationswert im »2D Transform Pack«. Die Fließrichtung des Regens wechselt jetzt pro Tap auf den Screen. nach oben
10. Interaktion hinzufügen: Screen Pinch
Ich möchte als weitere Möglichkeit hinzufügen, dass der User durch Pinchen mit zwei Fingern auf dem Screen die Größe der Tropfen ändern kann. Dazu erstelle ich einen »Screen Pinch«-Patch und packe den Wert in einen »Pack«-Patch, damit der Output wiederum ein x/y-Wert ist. Diesen verbinde ich einmal direkt mit dem »Scale«-Wert im »2D Transform Pack«, um die Textur zu skalieren, und schalte einen »Multiply«-Patch dazwischen, der den Wert aus dem »Transition«-Patch anpasst. Wenn ich das nicht tue, verspringt die Textur während der Animation.
Wenn man jetzt pincht, wird die Textur zwar größer, aber sie scheint aus der unteren rechten Ecke zu wachsen. Damit sie aus der Mitte herauskommt, ändere ich im »2D Transform Pack« den Pivot-Wert auf 0,5. Die großskalierten Tropfen fließen jetzt sehr schnell, weshalb ich den Wert aus dem »Screen Pinch« mit der Zeit der »Loop Animation« multipliziere. Vorher beschränke ich ihn jedoch durch den »Clamp«-Patch auf ein Minimum von 1 und ein Maximum von 3. Das tue ich, damit die kleinen Tropfen nicht unnatürlich schnell fließen. nach oben
11. AR-Effekt am Smartphone testen und exportieren
Um meinen Filter zu testen, lade ich den Spark AR Player aus dem App Store auf mein Smartphone und verbinde ihn per USB-Kabel mit dem Computer. Wenn die App gestartet ist, bekomme ich den derzeitigen Stand des Filters durch Klick auf »Mirror« in Spark AR Studio auf dem Handy angezeigt und kann ihn ausprobieren . Mit dem »Export«-Button oben rechts, exportiere ich eine Datei, die ich anschließend auf Facebook oder Instagram hochladen kann.
Titelthema: So gelingt der Jobwechsel ++ AR-Effekte für Instagram, Snapchat & Co ++ Making-of: Vom 2D- zum 3D-Font ++ New Business: Branding für Schulen ++ Webdesign: Floating Canvas erstel-len mit Webflow ++ After-Effects-Tutorial: Typo-Animation
Adrian Steckeweh, der in Tokio lebt und arbeitet, ist offen für Anfragen, macht die AR-Effekte aber in erster Linie für sich selbst und aus reiner Freude. Auf Instagram ist er als @omega.c – dem Namen des Sternhaufens entsprechend – unterwegs.
Hallo Dennis, wenn du damit Filter ohne interaktive Elemente meinst, dann schau dir mal dieses “get started” Tutorial für Spark AR an : https://developers.facebook.com/docs/ar-studio/tutorials/quick-start-guide – im Grunde musst du nur einen face tracker anlegen, ein face mesh drauf packen, material anlegen, shader/reflektion des materials einstellen und eine textur darauf anwenden, die du vorher als png mit transparenzen in einem bildbearbeitungsprogramm erstellt hast. viel spaß beim basteln!
Dennis schreibt
Sehr Cool. Könnt ihr das auch für “Normale” Filter, die einfach nur die Stimmung und Den Look verändern zeigen 🙂 ?
Hallo Dennis, wenn du damit Filter ohne interaktive Elemente meinst, dann schau dir mal dieses “get started” Tutorial für Spark AR an : https://developers.facebook.com/docs/ar-studio/tutorials/quick-start-guide – im Grunde musst du nur einen face tracker anlegen, ein face mesh drauf packen, material anlegen, shader/reflektion des materials einstellen und eine textur darauf anwenden, die du vorher als png mit transparenzen in einem bildbearbeitungsprogramm erstellt hast. viel spaß beim basteln!
Sehr Cool. Könnt ihr das auch für “Normale” Filter, die einfach nur die Stimmung und Den Look verändern zeigen 🙂 ?