AR Instagram-Filter - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:17

Hier ist eine lustige Abwechslung, die Sie zu Hause ausprobieren können, während wir soziale Isolation üben! Sie können dann in Verbindung bleiben und Ihre Kreationen mit Freunden auf Instagram teilen.

Wir haben ein Video, eine PDF-Datei in voller Länge und eine Schritt-für-Schritt-Anleitung beigefügt.

Mach weiter so!

Lieferungen

1. Ein Desktop- oder Laptop-Computer.

2. Spark AR Studio (kostenloser Download, hier;

3. Photoshop oder eine andere Bildbearbeitungssoftware

4. Ein Smartphone (und Instagram), um deine Kreationen anzusehen!

Schritt 1: Sehen Sie sich das Video an

Schritt 2: Selber machen: Statische Objekte

1. Um zu beginnen, klicken Sie auf „Objekt hinzufügen“und dann auf „Ebene“. Sie sehen ein Quadrat in der Arbeitsfläche und im Vorschaubereich, das mit dem Cursor verschoben werden kann. Die „Ebene“ist im Wesentlichen ein flaches Attribut, das über dem von der Kamera aufgenommenen Bild hinzugefügt wird. Wir werden ein "Flugzeug" verwenden, um einen digitalen Rahmen für ein Foto zu erstellen.

2. Beachten Sie, dass bei Auswahl der Ebene das Quadrat im Arbeitsbereich kariert ist. Dies bedeutet, dass noch keine „Textur“darauf angewendet wurde und es sich im Wesentlichen um eine leere Leinwand handelt. Wählen Sie in der linken Symbolleiste „Ebene0“, um dieses karierte Kästchen zu bearbeiten. Klicken Sie als Nächstes im Inspektor (Symbolleiste auf der rechten Seite des Bildschirms) auf das „+“-Zeichen neben „Materialien“. Dadurch wird ein Material im Asset-Bereich „Material0“erstellt.

3.. Wenn Sie in der Asset-Leiste „Material0“auswählen, erscheinen im Inspektor mehrere Optionen. Wählen Sie die Option "Textur" und klicken Sie dann neben "Material 0" auf "Datei auswählen". Wählen Sie die Beispieldatei mit dem Namen "Flugzeugbeispiel". Demonstrieren Sie nun die Arten von Modifikationen, die Sie an der "Textur" vornehmen können, die Sie auf das Flugzeug angewendet haben. Klicken und ziehen Sie die hochgeladene Texturvorschau in den Hauptarbeitsbereich, um anzuzeigen, dass sie verschoben werden kann. Dehnen und skalieren Sie die Texturvorschau mit dem Skalierungswerkzeug oder ändern Sie die Perspektive auf das Bild, indem Sie in der Telefonvorschau auf das Gesicht klicken und es ziehen.

A. Position des ausgewählten Objekts anpassen

B. Ausgewähltes Objekt drehen

C. Maßstab des ausgewählten Objekts bearbeiten

D. Verwenden Sie das lokale Koordinatensystem von Objekten

E. Pivot/ Center

Schritt 3: Verfolgung

1. Klicken Sie erneut auf „Objekt hinzufügen“und wählen Sie dann „Szenenverständnis > Gesichtsverfolgung“. Facetracker0 ist jetzt im Szenenfenster in der linken Symbolleiste sichtbar. Sie werden auch feststellen, dass sich die RGB-Pfeile am Modell im Arbeitsbereich nun mit ihm bewegen.

2. Ziehen Sie als Nächstes „Plane0“über den „Facetracker0“im Szenenfenster. Das Objekt „Plane0“folgt den Gesichtsbewegungen des Modells – dies wird als Gesichtsverfolgung bezeichnet. Sie können die Position des Objekts im Verhältnis zum Kopf des Modells ändern, indem Sie die RGB-Pfeile verwenden, mit denen das Objekt zuvor verschoben wurde.

3. Wenn Sie die Bewegung des Gesichts anhalten möchten, um das Bild genauer zu positionieren, können Sie dies in der linken Seitenleiste tun.

Schritt 4: Maskeneffekte

1. Löschen Sie „Plane0“aus der Szenenleiste, indem Sie „Plane0“auswählen, auf Bearbeiten in der oberen linken Symbolleiste klicken und dann „Ausschneiden“auswählen.

2. Klicken Sie auf „+Objekt hinzufügen“und wählen Sie „Gesichtsnetz“. Dadurch wird ein neues Objekt namens „faceMesh0“unter dem Gesichtstracker hinzugefügt. Sie sehen ein kariertes 3D-Bild des Gesichts des Modells über der Kameravorschau.

3. Wählen Sie „faceMesh0“und klicken Sie auf das + neben Material in der rechten Symbolleiste und wählen Sie dann „Neues Material erstellen“in der Dropdown-Leiste. Jetzt hat das Modell eine weiße Schicht über dem Gesicht und es gibt ein neues Material im Bedienfeld „Assets“auf der linken Seite.

4. Gehen Sie erneut zum Asset-Panel, wählen Sie „material1 > New Texture“und wählen Sie die Beispielmaske jpg. 5. Sie können damit schon viel machen, indem Sie die Parameter im Inspektor ändern. Versuchen Sie, Parameter im Inspektor „Material1“zu ändern und sehen Sie in Echtzeit, was mit dem Ergebnis passiert. Spielen Sie mit den Schiebereglern. Sie können auch die gleichen Mods im Hauptarbeitsbereich vornehmen, wie z. B. verschieben, dehnen usw.

Erweiterung des Maskeneffekts:

1. Sehen Sie sich die bereitgestellte Maskenvorlagendatei an. Diese Bilddatei bietet eine leicht bearbeitbare Vorlage zum Zeichnen oder Erstellen von Maskeneffekten. Öffnen Sie die Datei in Photoshop und erstellen Sie eine neue Ebene über der Vorlage. Auf diese Ebene kann gezeichnet, mit anderen Bildern komponiert werden und vieles mehr, um eine benutzerdefinierte Maskentextur zu erstellen.

2. Wenn die neue Maske fertig ist, löschen oder verbergen Sie die Maskenvorlage in Ihrer Bildbearbeitungssoftware und exportieren Sie die Datei als.png. Beim Exportieren als-p.webp

3. Versuchen Sie, dieses Bild als Textur in die SparkAR-Szene zu importieren und sehen Sie, was passiert!

Schritt 5: 3D-Objekte

1. Wie jedes andere Objekt können 3D-Objekte zur Szene hinzugefügt werden. Genau wie die Gesichtsmaske besteht ein 3D-Bild aus einem „Netz“und einem „Material“. Das Netz ist die 3D-Form und das Material ist die visuelle Textur, die dieses Objekt bedeckt.

2. Gehen Sie zum Asset-Bereich und klicken Sie auf „Asset hinzufügen > Aus AR-Bibliothek hinzufügen“. Dies führt zu einem Menü zur Auswahl aus einer Vielzahl von Beispielobjekten. Fahren Sie fort und wählen Sie ein Objekt in 3D Primitives aus. Klicken Sie auf Importieren, um das Shape zu Assets hinzuzufügen.

3. Das Objekt erscheint mit zwei Dateiteilen, einem Netz und einem Material. Wenn Sie den Würfel in die Szene ziehen, wird die Form im Vorschaufenster angezeigt. Genau wie die Ebene und das Flächennetz kann dieses verschoben, in der Größe geändert und auf andere Weise bearbeitet werden. Um die Textur dieses Objekts zu bearbeiten, klicken Sie auf das Material des Würfels mit der Bezeichnung „Cube_Mat“und ersetzen Sie die Textur.

Schritt 6: Flugzeugverfolgung und Lichter

Flugzeugverfolgung:

1. Die Flugzeugverfolgung ist der Gesichtsverfolgung sehr ähnlich. Gehen Sie zu "Objekt hinzufügen" und wählen Sie "Plane Tracker". Dadurch wird der Szene ein Tracker hinzugefügt, der eine „unendliche horizontale Ebene“verfolgt und die Vorschauansicht auf eine Vorwärtskameraansicht umschaltet.

2. Mit dieser Ebene können Sie ein 3D-Objekt, eine Ebene und vieles mehr „anheften“. Experimentieren Sie damit!

Beleuchtung:

1. Alle 3D-Elemente in der Szene werden in einer 3D-Engine gerendert, die es ermöglicht, Lichteffekte zu ändern. Standardmäßig enthält die Szene ein Umgebungslicht (hellt alles sanft aus) und ein gerichtetes Licht (hebt alles aus einer einzigen Richtung hervor).

2. Diese Beleuchtungselemente können aus der Szene gelöscht und neue hinzugefügt werden. Gehen Sie zu "Objekt hinzufügen" und eine Liste von Lichtern wird unten im Dropdown-Menü angezeigt.

3. Wenn ein Licht hinzugefügt wird, wird eine Kegelform mit den RGB-Griffen sichtbar. Dieser kann im 3D-Arbeitsbereich verschoben werden.

Schritt 7: Weitere Erkundung

Jeder AR-Effekt, den Sie auf Ihrem Telefon gesehen oder verwendet haben, ist mit der Spark-Software möglich. Wenn Sie die Software öffnen, sehen Sie eine Reihe von Vorlagen für neue Effekte, die Sie einfach ändern können, um das gewünschte Ergebnis zu erzielen. Spark gibt Ihnen kurze Anweisungen, welche Dateien Sie ersetzen müssen. Spark bietet auch umfangreiche Dokumentationen und Tutorials, um jeden gewünschten Effekt zu erzielen.

Schritt 8: Hochladen und Veröffentlichen

Um Ihren Effekt auf einem Smartphone auszuprobieren, gehen Sie zu Datei>Hochladen, um ein Dialogfeld zum Hochladen aufzurufen. Sie müssen sich bei einem Facebook-Konto anmelden, um den Effekt hochzuladen. Sie gelangen zu einem Formular, in das Sie verschiedene Informationen zu Ihrem Effekt eingeben, darunter einen Titel und ein Vorschaubild. Nachdem Sie den Effekt hochgeladen haben, erhalten Sie von Spark einen Testlink, um Ihren Effekt auszuprobieren. Manchmal müssen Sie je nach Effekt und Ihrem Gerät möglicherweise zurückgehen und den Effekt optimieren, nachdem Sie ihn getestet haben. Das ist völlig normal.