PAGE online

Tutorial: Face-Filter für Instagram erstellen

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 Lein­wand«, auf der sich gerade viele Künstler austoben und dabei neue Konzepte und Ideen entwickeln. Ihn interes­sieren dabei vor allem Materialien und deren physikali­sche 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 soge­nann­ten Patch Editor, in dem bereits fertige Interaktionsmo­dule 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

Die Texturen zum Nachbauen des Rain-Face-Filters kannst Du hier runterladen.

1. Face-Filter-Material vorbereiten

Klicken Sie auf das Bild, um es zu vergrößern

Durch Rechtsklick auf das Kamera-Icon im »Scene«-Menü oben links in Spark AR Studio füge ich ein Face Mesh ein. Dieses kommt di­rekt 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 In­spector) als Material das gerade erzeugte »Rain«.

nach oben

2. Reflexion hinzufügen

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 Ma­terials 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.

nach oben

3. Vorgefertigte Texturen importieren

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.

nach oben

4. Face Assets laden

Spark AR stellt im »Help«-Menü sogenann­te 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.

nach oben

5. Texturen im Patch Editor bearbeiten

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.

nach oben

6. Transparenz einstellen

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 aus­zu­blenden und nur die hellen Reflexionen zu sehen.

nach oben

7. Patches generieren

Jetzt fällt die harte Kante des Face Mesh auf. Durch Rechtsklick in den Patch Editor kann ich verschiedene Patches erzeugen. Ich wäh­le den »Multiply«-Patch um die »faceMeshMask« mit der Alphatextur zu multiplizieren.

In diesem Fall be­deutet das, dass sich die beiden Texturen zu einer ver­binden. 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.

nach oben

8. Animation und Bewegungen erzeugen

Für die Transformation sorgt der »2D Trans­form 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.

nach oben

9. Interaktion hinzufügen: Screen Tap

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, sa­ge 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 Tex­tur bewegen soll – diesen muss ich dafür per Rechtsklick in einen Typ »Point 2D« ändern. Die ers­te 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 Pin­chen 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 »Mul­ti­ply«-­Patch dazwischen, der den Wert aus dem »Tran­siti­on«-­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, expor­tiere ich eine Datei, die ich anschließend auf Facebook oder Instagram hochladen kann.


nach oben

 

PDF-Download: PAGE 11.2019

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

8,80 €
AGB

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 Insta­gram ist er als @omega.c – dem Namen des Sternhaufens entsprechend – unterwegs.

 

 

Produkt: Download PAGE - Bildrecht und Social Media - kostenlos
Download PAGE - Bildrecht und Social Media - kostenlos
Stockfotos in Social Media: Die Richtlinien der Bildagenturen

Kommentare zu diesem Artikel

  1. 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!

  2. Sehr Cool. Könnt ihr das auch für “Normale” Filter, die einfach nur die Stimmung und Den Look verändern zeigen 🙂 ?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Das könnte dich auch interessieren