Erstellen Sie einen AR-Instagram-Filter für Ihre Visitenkarte
00Stimmen
Artikelbewertung
Benötigte Zeit
Komplexität
Werkzeuge und Zubehör
30 Minuten
Einfach
Kostenlose Software
Diese Idee begann wie so oft: Ich arbeitete an einem völlig anderes Projekt als ich vom Weg abgekommen bin, nachdem ich zufällig auf die Arbeit eines Künstlers mit Namen gestoßen bin Catalina Villegas in den sozialen Medien. Sie erstellt Instagram AR-Filter, die die Illustrationen, die sie als Aufkleber verkauft, zum Leben erwecken. AR ist nichts Neues, ich hatte im Jahr 2012 eine App, die diese Art von Effekten auf meinem brandneuen Sony-Smartphone zeigte. Aber als ich herausfand, dass es ein Tool gab, mit dem man ganz einfach AR-Effekte erstellen und diese dann auf einer allgegenwärtigen Plattform wie Instagram veröffentlichen konnte, hat es für mich wirklich Klick gemacht.
Dann begann ich darüber nachzudenken, welchen Nutzen ich von einer solchen Technologie unter Berücksichtigung meiner persönlichen und beruflichen Aktivitäten haben könnte. Ich wünschte, ich könnte etwas erschaffen wunderschöne digitale Illustrationen und ihnen eine neue Dimension zu verleihen, indem ich sie interaktiv mache, aber im Moment ist das zu weit von meinen Fähigkeiten entfernt. Also beschloss ich, ein einfaches Projekt zu machen, das für mich irgendwie Sinn machen würde: einen Filter zu erstellen, der eine 3D-Animation abspielt, wenn die Kamera auf eine meiner Visitenkarten gerichtet ist. Ich habe einen kleinen Etsy-Shop und dachte, dass es eine unterhaltsame Möglichkeit sein könnte, meine Kunden dazu zu bewegen, in sozialen Netzwerken darüber zu posten, da sie vielleicht neugierig sind, diesen AR-Filter auszuprobieren, sobald sie ihre Bestellung zusammen mit meiner Visitenkarte erhalten.
/Quelldaten – die Vektorzeichnungen, aus denen alle Texturen abgeleitet wurden.
Animated_text.blend
Animated_text.svg
Moth_business_card_AR_mockup.svg
Moth_business_card.svg
Spark_AR_business_card_icon.svg
/Spark AR Studio-Projektdateien – die Projektdateien des fertigen Filters, wie sie von Spark AR Studio gespeichert und organisiert wurden.
/texturen
SparkARBusinessCard.arproj
/Texturen – genau genommen die einzigen Dateien, die zum Abschließen dieses Tutorials erforderlich sind.
/Textanimationsrahmen
Hintergrund.png
Körper.png
Business_card_target_image.jpg
LeftWing.png
Monde.png
RightWing.png
Sterne.png
Rundgang
Entwerfen einer Visitenkarte und eines Mockups für die AR-Animation
Die Visitenkarte
Die erste Aufgabe, die Sie erledigen müssen, besteht darin, Ihr eigenes Visitenkartendesign zu entwerfen.
Für dieses Tutorial verwenden wir eine Mottenillustration, die von entworfen wurde mein talentierter Freund Hui Chen. Vielen Dank, Hui, dass wir deine Arbeit nutzen durften!
Schauen Sie sich diesen Artikel zum Thema an Best Practices für die Zielverfolgung in Spark AR Studio um ein gutes Verständnis davon zu bekommen, wie Ihr Visitenkartendesign aussehen sollte, damit es vom Filter leicht erkannt wird.
Wenn Sie mit Ihrem Design zufrieden sind, drucken Sie es aus und machen Sie ein Foto der Karte. Tatsächlich habe ich festgestellt, dass die Zielverfolgung besser funktioniert, wenn Sie ein Bild des realen Objekts, das Sie verfolgen möchten, anstelle seines digitalen Gegenstücks verwenden.
Mockup der AR-Animation & Vorbereitung der visuellen Elemente
Entwerfen Sie als Nächstes ein Modell, wie Sie sich Ihre AR-Animation von oben vorstellen. Es hilft Ihnen, die verschiedenen Elemente Ihrer Szene in Spark AR Studio zu organisieren und zu positionieren.
Organisieren Sie Ihre Hauptelemente im Vektoreditor in verschiedenen Ebenen und exportieren Sie sie als .png Bilder mit transparentem Hintergrund.
Der animierte Text: Es stellte sich heraus, dass dies für mich einer der problematischsten Teile des Projekts war. Kurz gesagt, ich habe den Strich des Textes in Inkscape entworfen und ihn in Blender geladen, um eine Frame-für-Frame-Animation zu generieren. Wenn jemand weitere Details zu diesem Prozess möchte, lassen Sie es mich in den Kommentaren wissen, dann kann ich vielleicht ein kurzes Tutorial dazu schreiben.
Installieren Sie Spark AR Studio
Gehen Sie zum Downloadseite von Spark AR Studio, laden Sie die Installationsdatei herunter und befolgen Sie die Anweisungen zur Installation des Programms.
Um mit diesem Programm arbeiten zu können, ist ein Facebook-Konto erforderlich.
Erstellen Sie ein neues Projekt
Sobald Sie es geschafft haben, Spark AR Studio zu starten und sich anzumelden, erstellen Sie durch Klicken ein neues Projekt Erstelle neu -> Neues Projekt -> Zielverfolgung.
Diese Software ist ziemlich fehlerhaft und instabil, daher sollten Sie Ihr Projekt sofort speichern und daran denken, regelmäßig zu speichern, nachdem Sie wesentliche Fortschritte erzielt haben.
Importieren Sie die Texturen in das Projekt
Erinnern Sie sich an die Szenenelemente, die wir zuvor als .png gespeichert haben? Wir müssen sie laden als Texturen damit wir sie in unserem Projekt nutzen können.
Um die Dokumentation der Software zu zitieren:
Eine Textur ist eine Bilddatei, die dazu dient, das Erscheinungsbild eines Objekts in Ihrer Szene zu definieren. Sie können eine oder mehrere Texturen auf ein Material anwenden und das Material dann auf ein Objekt anwenden.
Im Assets-Panel Klicken Sie in der unteren linken Ecke des Fensters auf Vom Computer importieren und laden Sie alle Dateien in die Texturen Ordner des Google Drive-Repositorys, mit Ausnahme des Inhalts von /Text-Animationsrahmen (vorerst).
Dann auswählen alle neu importierten Texturen außer für Background und Business_card_target_image. Auf der Texturpanel zu Ihrer Rechten im Kompressionsunterplatte, Setzen Sie alle drei Komprimierungsoptionen auf Keiner. Wir tun dies, weil die Bilder bereits ausreichend flüssig sind und das Komprimierungsmodul des Programms dazu neigt, ohne ersichtlichen Grund für immer hängen zu bleiben und viel zu viele CPU- und GPU-Ressourcen zu beanspruchen.
Jetzt importieren wir die Frames der Textanimation. Auch hier muss ich einen Workaround verwenden, um nicht ewig darauf warten zu müssen, dass das Komprimierungsmodul seine Arbeit (nicht) erledigt. Unten rechts im Assets-Panel, klicke auf + Asset hinzufügen -> Importieren -> Vom Computer. Laden Sie alle Bilder der /Textanimationsrahmen Ordner, jeweils eine Hälfte. Ich muss dies tun, um einen Absturz des Programms zu vermeiden. Es gibt eine Option zum Importieren von Texturanimationen, die bequemer zu verwenden wäre, wenn sie nicht zum Absturz des Programms führen würde.
Sobald die 50 Frames importiert sind, wählen Sie sie alle aus und ändern Sie die Typ Zu Textursequenz an der Spitze des Texturpanel.
Stellen Sie die Komprimierung auf ein Keiner für alle drei Komprimierungsoptionen wie bei den anderen Texturen.
Schließlich müssen wir einen anderen Objekttyp erstellen, um mit unserer Animation zu arbeiten. Im + Asset hinzufügen Menü auswählen Animationssequenz. Klicken Sie im Fenster, das sich auf der rechten Seite öffnet, auf Dropdown-Pfeil vor Textur und wählen Sie die aus Textursequenz das wir gerade erstellt haben.
Erstellen Sie die Materialien
Um die benötigten Materialien zu erstellen, klicken Sie auf + Asset hinzufügen -> Material. Wir werden sieben davon brauchen, also machen Sie weiter und duplizieren Sie es 6 Mal mit STRG + D.
Geben Sie allen Materialien einen aussagekräftigeren Namen. Jetzt müssen wir für jeden von ihnen ein paar Parameter einstellen.
Wählen Sie alle Materialien außer dem Hintergrund aus.
Auf der Materialplatte auf der rechten Seite auswählen Beidseitig im Renderoptionen Unterpanel. Dadurch sind unsere Texturen auch von unten sichtbar – was besonders für die Flügel und den Körper der Motte relevant ist, da diese in der Luft schweben.
Im Erweiterte Render-Option Unterbereich, deaktivieren Sie das Kontrollkästchen Schreiben Sie in die Tiefe. Dadurch kann der transparente Hintergrund unserer Texturen wirklich verschwinden und stört sich nicht gegenseitig, wenn wir später mit Flugzeugen arbeiten.
Wählen Sie dann das entsprechende aus Textur für jedes Material in der Shader-Eigenschaften Unterpanel.
Fügen Sie die Textur zum Target Tracker hinzu
Jetzt müssen wir unserem Target Tracker ein Ziel zuweisen – dem Modul des Programms, das für die Lokalisierung des realen Objekts zuständig ist, das die Animation auslöst, und ihm Informationen über die Ebene gibt, auf die es ausgerichtet werden soll.
Wählen FixedTargetTracker0 im Szene Panel oben links und in der Zielverfolger Menü auf der rechten Seite auswählen Business_card_target_image als die Textur.
Erstellen Sie die Ebenen für die Elemente der Szene
Als Erstes wechseln wir von einer 3D- zu einer 2D-Ansicht unserer Szene, indem wir die ändern Modus.
Nächste Rechtsklick An FixedTargetTracker0 Zu Hinzufügen ein neuer Flugzeug zur Szene.
Verwenden STRG + D Zu Duplikat dieses Flugzeug 6 mal um am Ende 7 Flugzeuge zu haben.
Benennen Sie die Ebenen um, die alle Elemente widerspiegeln, die in unsere Szene aufgenommen werden.
Im Flugzeugplatte Fügen Sie rechts das entsprechende hinzu Material zu jedem Flugzeug.
Skalieren und positionieren Sie die Flugzeuge
Nachdem unsere Ebenen nun texturiert wurden, müssen wir sie anpassen, um den Elementen unserer Szene die richtigen Abmessungen und Positionen zu geben. Dazu werden wir ein Flugzeug nach dem anderen bearbeiten.
Wählen Sie also zunächst alle Flugzeuge aus, mit Ausnahme des ersten, mit dem Sie arbeiten möchten (in diesem Fall Sterne), und erstellen Sie sie versteckt durch Deaktivieren Sichtbar.
Verwenden Sie das Zielbild als Referenz Skala Und umstellen die Sterne, bis sie irgendwie zum Hintergrund passen. Wenn Sie fertig sind, stellen Sie die Sichtbarkeit der Sternenebene auf „Ausgeblendet“ ein und wechseln Sie zu einer anderen Ebene. Wiederholen Sie diesen Vorgang mit allen Ebenen außer Hintergrund und TextAnimation.
Wenn Sie zufrieden sind, zeigen Sie alle Flugzeuge an, an denen Sie gearbeitet haben, sowie den Hintergrund. Wähle aus Hintergrund Flugzeug und Skala Bringen Sie es auf die gewünschte Größe an – idealerweise möchten Sie wahrscheinlich, dass es das Zielbild vollständig abdeckt.
Dann machen Sie das TextAnimation sichtbar machen und es noch einmal auf seine ursprünglichen Proportionen zurückskalieren und entsprechend positionieren.
Die Motte wirkt jetzt im Vergleich zum Hintergrund etwas klein. Tatsächlich haben wir die Motte anhand des Zielbilds als Referenz skaliert, den Hintergrund jedoch größer als die Visitenkarte gemacht. Somit entsprechen unsere Proportionen nicht mehr wirklich dem Modell.
Um dieses Problem zu lösen, möchten wir alles bis auf den Hintergrund einheitlich skalieren. Wir werden dies erreichen, indem wir alle diese Elemente in einem zusammenfassen Null-Container, Und Skalierung Dieser Container anstelle aller einzelnen Flugzeuge.
Animieren Sie den Text
Rechtsklick An FixedTargetTracker0 und wähle Patch erstellen. Dadurch wird die geöffnet Patch-Editor.
Rechtsklick im Patch-Editor und fügen Sie eine hinzu Animation Patch. Verbinden Die Gefunden Stecker des FixedTargetTracker Patch zum Spielen Stecker des Animation Patch. Dadurch wird die Textanimation abgespielt, wenn der AR-Filter aktiviert ist, da das Zielbild gefunden wurde.
Dadurch wird automatisch ein Pulse-Patch dazwischen eingefügt. Verbinden Sie die Ausgeschaltet Stecker des Impuls Patch zum Zurücksetzen Stecker des Animation Patch. Dadurch wird die Textanimation zurückgesetzt, wenn sich die Kamera aus dem Weg zum Zielbild bewegt, und kann erneut abgespielt werden, wenn das Ziel erneut gefunden wird.
Fügen Sie eine hinzu Rahmenübergang Patchen und anschließen Fortschritt Stecker mit seinem Gegenstück aus dem Animation Patch. Stellen Sie die ein Anzahl der Frames = 51.
Wähle aus TextAnimationSequence um das zu öffnen Bedienfeld „Animationssequenz“. zu deiner Rechten. Klick auf das Pfeil vorhergehend Aktueller Frame um einen neuen Patch hinzuzufügen, der es uns ermöglicht, mit dem in der Szene angezeigten Frame zu interagieren. Verbinden diesen Patch auf den verfügbaren Anschluss des Rahmenübergang Patch.
Sie können die Geschwindigkeit der Animation steuern, indem Sie am Parameter „Dauer“ des Animationspatches herumbasteln.
Animieren Sie die Flügel
Wählen Sie nacheinander jeden Flügel aus und stellen Sie sicher, dass sie Position auf der Z-Achse Ist 0.
Das Schlagen der Flügel ist nicht schwierig. Wir müssen lediglich beiden Flügelobjekten eine Rotationsanimation in der Y-Achse hinzufügen. Eine direkte Anwendung eines solchen Effekts auf das Flügelobjekt würde jedoch nicht funktionieren. Tatsächlich liegt der Massenschwerpunkt des Objekts in der Mitte des Flügels. Wenn wir ihn also drehen würden, würde er sich von der Mitte aus drehen. Was wir brauchen, ist, dass es sich von dem Teil der Flügelkante aus dreht, der mit dem Körper in Kontakt steht. Ich hoffe, dass ich hier einigermaßen einen Sinn ergebe …
Wir müssen also einen Weg finden, den Massenschwerpunkt der Flügelobjekte irgendwie zu verschieben. Dazu verwenden wir Nullobjekte, die automatisch mit einem Massenschwerpunkt in der Mitte der Szene erstellt werden. Diese Nullobjekte enthalten die Flügelobjekte und die Drehung wird auf das Nullobjekt selbst angewendet. Lass es uns tun!
Rechtsklick auf der Container Und Hinzufügen A Nullobjekt im Inneren. Benennen Sie es in RightWingContainer um und Duplikat es mit STRG + D. Benennen Sie das Duplikat LeftWingContainer um. Wähle aus Flügelobjekte Und ziehen und loslassen sie in ihre jeweiligen Nullobjektcontainer.
Im Patch-Editor, Rechtsklick und füge ein hinzu Schleifenanimation Patch. Stellen Sie die ein Dauer = 2 und kreuzen Sie an Gespiegelt Kontrollkästchen (dies dient dazu, dass die Animation nahtlos in einer Schleife abläuft und am Ende eines Flügelschlags nicht wieder von vorne beginnt. Wenn „Gespiegelt“ aktiviert ist, beginnt der Flügel rückwärts zu schlagen, nachdem er die Obergrenze eines nach oben gerichteten Flügelschlags erreicht hat).
Als nächstes fügen Sie a hinzu Übergang Patch und Duplikat Es. Verlinken Sie die Fortschritt Stecker des Schleifenanimation Patch zu ihren Gegenstücken auf beiden Übergang Patches.
Geben Sie die Parameter der Übergangspatches wie folgt ein:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Wähle aus RightWingContainer und auf der Bedienfeld „Nullobjekt“. Klicken Sie auf der linken Seite auf Pfeil vorhergehend Drehung. Dadurch wird dem Patch-Editor ein Patch hinzugefügt, sodass wir mit diesen Werten interagieren können. Verbinden Sie die Wert Anschluss des obersten Übergang Patch zum Anschluss des RightWingContainer Patch neu erstellt.
Wiederholen Sie den Vorgang mit LeftWingContainer und der unterste Übergangspatch.
An diesem Punkt sollten Sie sehen, wie beide Flügel zu schlagen beginnen! Jetzt müssen wir nur noch die Motte entlang der Z-Achse in eine Position bewegen, die sinnvoller ist. Basteln Sie mit dem Position auf der Z-Achse des RightWingContainer, LeftWingContainer Und Körper Objekte, bis Sie zu einem Ergebnis kommen, das Ihnen gefällt.
Vorschau des Ergebnisses
Sie müssen das herunterladen Spark AR-Player App zuerst auf Ihrem Telefon.
Wenn Ihr Telefon mit Ihrem Computer verbunden ist, wird unten links in Spar AR Studio ein kleiner blauer Punkt zum Telefonsymbol hinzugefügt. Klicken Sie darauf und wählen Sie Schicken zu Ihrem Gerät.
Richten Sie Ihre Kamera auf die Visitenkarte, die Sie zuvor ausgedruckt haben, und genießen Sie es!
Verwenden Sie dann die App auf Ihrem Telefon, um ein Video des Effekts aufzunehmen, da wir es für den nächsten Schritt benötigen.
Veröffentlichen Sie den AR-Filter auf Facebook oder Instagram
Klick auf das Veröffentlichen Pfeilsymbol unter dem Vorschausymbol in der unteren linken Ecke. Dadurch wird Ihr Projekt gepackt, hochgeladen und Sie werden weitergeleitet Spark AR Hub's Webseite.
Befolgen Sie diese Schritte, um Ihren Filter erfolgreich zu veröffentlichen:
Wähle ein Name für den Filter.
Wählen Sie eine Plattform, auf der Sie veröffentlichen möchten – entweder Instagram und/oder Facebook.
Wählen Sie eine Kategorie für Ihren Filter und fügen Sie einige Schlüsselwörter hinzu, wenn Sie möchten, dass die Leute ihn in der Filtersuchmaschine leichter finden.
Hier ist das Video nützlich, das wir im letzten Schritt gespeichert haben. Laden Sie die hoch Demo-Video Ihres Filters.
Wähle ein Symbol für Ihren Filter.
Schreiben Sie kurz Beschreibung Erklären Sie, was in Ihrem Filter passiert und wie Sie ihn verwenden können, um den Überprüfungsprozess zu unterstützen.
Schlag Einreichen in der oberen rechten Ecke.
Warten Sie auf das Rezension Prozess abgeschlossen werden.
Vielleicht möchten Sie das überprüfen Spark AR-Richtlinien bevor Sie es zur Überprüfung einreichen. Mein erster Versuch wurde abgelehnt, weil die Adresse meiner Website im Demovideo sichtbar war.
Endergebnis
Ich überlasse Ihnen eine Demo der Filter, mit denen ich bisher gearbeitet habe.
Das erste ist das, das ich für meine eigene Visitenkarte erstellt habe, das zweite ist der erste Test, den ich mit einer davon gemacht habe Postkarten, die ich mit getrockneten Blütenblättern mache und der dritte ist der Filter, der für dieses Tutorial erstellt wurde.
Ich hoffe, es hat Ihnen Spaß gemacht, diesem Tutorial zu folgen.
Wie immer können Sie uns gerne Feedback zu diesem Tutorial oder zu einer Projektidee geben, die Sie hier veröffentlicht sehen möchten.
Fußnoten
Die folgenden Online-Inhalte dienten als Hilfe und/oder Inspiration bei der Erstellung dieses Projekts:
Wenn Sie sich zum ersten Mal bei einer Social-Login-Schaltfläche anmelden, erfassen wir die von Ihrem Social-Login-Anbieter freigegebenen Informationen zum öffentlichen Profil Ihres Kontos, basierend auf Ihren Datenschutzeinstellungen. Wir erhalten auch Ihre E-Mail-Adresse, um automatisch ein Konto für Sie auf unserer Website zu erstellen. Sobald Ihr Konto erstellt wurde, werden Sie bei diesem Konto angemeldet.
AblehnenIch stimme zu
Ich erlaube ein Konto zu erstellen
Wenn Sie sich zum ersten Mal bei einer Social-Login-Schaltfläche anmelden, erfassen wir die von Ihrem Social-Login-Anbieter freigegebenen Informationen zum öffentlichen Profil Ihres Kontos, basierend auf Ihren Datenschutzeinstellungen. Wir erhalten auch Ihre E-Mail-Adresse, um automatisch ein Konto für Sie auf unserer Website zu erstellen. Sobald Ihr Konto erstellt wurde, werden Sie bei diesem Konto angemeldet.
AblehnenIch stimme zu
2 Kommentare
Älteste
NeuesteAm meisten gewählt
Inline-Feedbacks
Alle Kommentare anzeigen
Noémie BSG
1 Jahr zuvor
, Merci Beaucoup für alle diese Erklärungen, sehr klar! c'est vraiment top! Im Gegenzug habe ich ein kleines Problem damit, dass ich den Eindruck erwecke, dass meine Datei nicht auf Facebook exportiert werden kann und nicht mit Instagram kompatibel ist … Ich weiß nicht, warum … und ich muss sagen, dass die Wirkung akzeptiert wird Bei der Ankündigung des Putschversuchs habe ich noch nie einen Rückblick auf die Uhr erhalten!!! Das ist ein Problem! pouvez-vous m'aider? Ich hatte eine ausgezeichnete Reise.
Es sieht so aus, als ob ich dieses Tutorial geschrieben habe, um Poster zu drucken und Effekte anzuzeigen, die ich auf Instagram gepostet habe, oder die ich in allen Fällen geändert habe.
Lernprogramm
Erstellen Sie einen AR-Instagram-Filter für Ihre Visitenkarte
30 Minuten
Einfach
Kostenlose Software
Diese Idee begann wie so oft: Ich arbeitete an einem völlig anderes Projekt als ich vom Weg abgekommen bin, nachdem ich zufällig auf die Arbeit eines Künstlers mit Namen gestoßen bin Catalina Villegas in den sozialen Medien. Sie erstellt Instagram AR-Filter, die die Illustrationen, die sie als Aufkleber verkauft, zum Leben erwecken. AR ist nichts Neues, ich hatte im Jahr 2012 eine App, die diese Art von Effekten auf meinem brandneuen Sony-Smartphone zeigte. Aber als ich herausfand, dass es ein Tool gab, mit dem man ganz einfach AR-Effekte erstellen und diese dann auf einer allgegenwärtigen Plattform wie Instagram veröffentlichen konnte, hat es für mich wirklich Klick gemacht.
Dann begann ich darüber nachzudenken, welchen Nutzen ich von einer solchen Technologie unter Berücksichtigung meiner persönlichen und beruflichen Aktivitäten haben könnte. Ich wünschte, ich könnte etwas erschaffen wunderschöne digitale Illustrationen und ihnen eine neue Dimension zu verleihen, indem ich sie interaktiv mache, aber im Moment ist das zu weit von meinen Fähigkeiten entfernt. Also beschloss ich, ein einfaches Projekt zu machen, das für mich irgendwie Sinn machen würde: einen Filter zu erstellen, der eine 3D-Animation abspielt, wenn die Kamera auf eine meiner Visitenkarten gerichtet ist. Ich habe einen kleinen Etsy-Shop und dachte, dass es eine unterhaltsame Möglichkeit sein könnte, meine Kunden dazu zu bewegen, in sozialen Netzwerken darüber zu posten, da sie vielleicht neugierig sind, diesen AR-Filter auszuprobieren, sobald sie ihre Bestellung zusammen mit meiner Visitenkarte erhalten.
Anforderungen
Software
Zur Erstellung dieses Projekts wurden die folgenden Softwareprogramme verwendet:
Dateien
Ich habe alle Projektdateien auf Google Drive hochgeladen.
Struktur des Projektdatei-Repositorys:
Rundgang
Entwerfen einer Visitenkarte und eines Mockups für die AR-Animation
Die Visitenkarte
Die erste Aufgabe, die Sie erledigen müssen, besteht darin, Ihr eigenes Visitenkartendesign zu entwerfen.
Für dieses Tutorial verwenden wir eine Mottenillustration, die von entworfen wurde mein talentierter Freund Hui Chen. Vielen Dank, Hui, dass wir deine Arbeit nutzen durften!
Schauen Sie sich diesen Artikel zum Thema an Best Practices für die Zielverfolgung in Spark AR Studio um ein gutes Verständnis davon zu bekommen, wie Ihr Visitenkartendesign aussehen sollte, damit es vom Filter leicht erkannt wird.
Wenn Sie mit Ihrem Design zufrieden sind, drucken Sie es aus und machen Sie ein Foto der Karte. Tatsächlich habe ich festgestellt, dass die Zielverfolgung besser funktioniert, wenn Sie ein Bild des realen Objekts, das Sie verfolgen möchten, anstelle seines digitalen Gegenstücks verwenden.
Mockup der AR-Animation & Vorbereitung der visuellen Elemente
Entwerfen Sie als Nächstes ein Modell, wie Sie sich Ihre AR-Animation von oben vorstellen. Es hilft Ihnen, die verschiedenen Elemente Ihrer Szene in Spark AR Studio zu organisieren und zu positionieren.
Organisieren Sie Ihre Hauptelemente im Vektoreditor in verschiedenen Ebenen und exportieren Sie sie als .png Bilder mit transparentem Hintergrund.
Der animierte Text: Es stellte sich heraus, dass dies für mich einer der problematischsten Teile des Projekts war. Kurz gesagt, ich habe den Strich des Textes in Inkscape entworfen und ihn in Blender geladen, um eine Frame-für-Frame-Animation zu generieren. Wenn jemand weitere Details zu diesem Prozess möchte, lassen Sie es mich in den Kommentaren wissen, dann kann ich vielleicht ein kurzes Tutorial dazu schreiben.
Installieren Sie Spark AR Studio
Gehen Sie zum Downloadseite von Spark AR Studio, laden Sie die Installationsdatei herunter und befolgen Sie die Anweisungen zur Installation des Programms.
Um mit diesem Programm arbeiten zu können, ist ein Facebook-Konto erforderlich.
Erstellen Sie ein neues Projekt
Sobald Sie es geschafft haben, Spark AR Studio zu starten und sich anzumelden, erstellen Sie durch Klicken ein neues Projekt Erstelle neu -> Neues Projekt -> Zielverfolgung.
Diese Software ist ziemlich fehlerhaft und instabil, daher sollten Sie Ihr Projekt sofort speichern und daran denken, regelmäßig zu speichern, nachdem Sie wesentliche Fortschritte erzielt haben.
Importieren Sie die Texturen in das Projekt
Erinnern Sie sich an die Szenenelemente, die wir zuvor als .png gespeichert haben? Wir müssen sie laden als Texturen damit wir sie in unserem Projekt nutzen können.
Um die Dokumentation der Software zu zitieren:
Im Assets-Panel Klicken Sie in der unteren linken Ecke des Fensters auf Vom Computer importieren und laden Sie alle Dateien in die Texturen Ordner des Google Drive-Repositorys, mit Ausnahme des Inhalts von /Text-Animationsrahmen (vorerst).
Dann auswählen alle neu importierten Texturen außer für Background und Business_card_target_image. Auf der Texturpanel zu Ihrer Rechten im Kompressionsunterplatte, Setzen Sie alle drei Komprimierungsoptionen auf Keiner. Wir tun dies, weil die Bilder bereits ausreichend flüssig sind und das Komprimierungsmodul des Programms dazu neigt, ohne ersichtlichen Grund für immer hängen zu bleiben und viel zu viele CPU- und GPU-Ressourcen zu beanspruchen.
Jetzt importieren wir die Frames der Textanimation. Auch hier muss ich einen Workaround verwenden, um nicht ewig darauf warten zu müssen, dass das Komprimierungsmodul seine Arbeit (nicht) erledigt. Unten rechts im Assets-Panel, klicke auf + Asset hinzufügen -> Importieren -> Vom Computer. Laden Sie alle Bilder der /Textanimationsrahmen Ordner, jeweils eine Hälfte. Ich muss dies tun, um einen Absturz des Programms zu vermeiden. Es gibt eine Option zum Importieren von Texturanimationen, die bequemer zu verwenden wäre, wenn sie nicht zum Absturz des Programms führen würde.
Sobald die 50 Frames importiert sind, wählen Sie sie alle aus und ändern Sie die Typ Zu Textursequenz an der Spitze des Texturpanel.
Stellen Sie die Komprimierung auf ein Keiner für alle drei Komprimierungsoptionen wie bei den anderen Texturen.
Schließlich müssen wir einen anderen Objekttyp erstellen, um mit unserer Animation zu arbeiten. Im + Asset hinzufügen Menü auswählen Animationssequenz. Klicken Sie im Fenster, das sich auf der rechten Seite öffnet, auf Dropdown-Pfeil vor Textur und wählen Sie die aus Textursequenz das wir gerade erstellt haben.
Erstellen Sie die Materialien
Um die benötigten Materialien zu erstellen, klicken Sie auf + Asset hinzufügen -> Material. Wir werden sieben davon brauchen, also machen Sie weiter und duplizieren Sie es 6 Mal mit STRG + D.
Geben Sie allen Materialien einen aussagekräftigeren Namen. Jetzt müssen wir für jeden von ihnen ein paar Parameter einstellen.
Wählen Sie alle Materialien außer dem Hintergrund aus.
Auf der Materialplatte auf der rechten Seite auswählen Beidseitig im Renderoptionen Unterpanel. Dadurch sind unsere Texturen auch von unten sichtbar – was besonders für die Flügel und den Körper der Motte relevant ist, da diese in der Luft schweben.
Im Erweiterte Render-Option Unterbereich, deaktivieren Sie das Kontrollkästchen Schreiben Sie in die Tiefe. Dadurch kann der transparente Hintergrund unserer Texturen wirklich verschwinden und stört sich nicht gegenseitig, wenn wir später mit Flugzeugen arbeiten.
Wählen Sie dann das entsprechende aus Textur für jedes Material in der Shader-Eigenschaften Unterpanel.
Fügen Sie die Textur zum Target Tracker hinzu
Jetzt müssen wir unserem Target Tracker ein Ziel zuweisen – dem Modul des Programms, das für die Lokalisierung des realen Objekts zuständig ist, das die Animation auslöst, und ihm Informationen über die Ebene gibt, auf die es ausgerichtet werden soll.
Wählen FixedTargetTracker0 im Szene Panel oben links und in der Zielverfolger Menü auf der rechten Seite auswählen Business_card_target_image als die Textur.
Erstellen Sie die Ebenen für die Elemente der Szene
Als Erstes wechseln wir von einer 3D- zu einer 2D-Ansicht unserer Szene, indem wir die ändern Modus.
Nächste Rechtsklick An FixedTargetTracker0 Zu Hinzufügen ein neuer Flugzeug zur Szene.
Verwenden STRG + D Zu Duplikat dieses Flugzeug 6 mal um am Ende 7 Flugzeuge zu haben.
Benennen Sie die Ebenen um, die alle Elemente widerspiegeln, die in unsere Szene aufgenommen werden.
Im Flugzeugplatte Fügen Sie rechts das entsprechende hinzu Material zu jedem Flugzeug.
Skalieren und positionieren Sie die Flugzeuge
Nachdem unsere Ebenen nun texturiert wurden, müssen wir sie anpassen, um den Elementen unserer Szene die richtigen Abmessungen und Positionen zu geben. Dazu werden wir ein Flugzeug nach dem anderen bearbeiten.
Wählen Sie also zunächst alle Flugzeuge aus, mit Ausnahme des ersten, mit dem Sie arbeiten möchten (in diesem Fall Sterne), und erstellen Sie sie versteckt durch Deaktivieren Sichtbar.
Verwenden Sie das Zielbild als Referenz Skala Und umstellen die Sterne, bis sie irgendwie zum Hintergrund passen. Wenn Sie fertig sind, stellen Sie die Sichtbarkeit der Sternenebene auf „Ausgeblendet“ ein und wechseln Sie zu einer anderen Ebene. Wiederholen Sie diesen Vorgang mit allen Ebenen außer Hintergrund und TextAnimation.
Wenn Sie zufrieden sind, zeigen Sie alle Flugzeuge an, an denen Sie gearbeitet haben, sowie den Hintergrund. Wähle aus Hintergrund Flugzeug und Skala Bringen Sie es auf die gewünschte Größe an – idealerweise möchten Sie wahrscheinlich, dass es das Zielbild vollständig abdeckt.
Dann machen Sie das TextAnimation sichtbar machen und es noch einmal auf seine ursprünglichen Proportionen zurückskalieren und entsprechend positionieren.
Die Motte wirkt jetzt im Vergleich zum Hintergrund etwas klein. Tatsächlich haben wir die Motte anhand des Zielbilds als Referenz skaliert, den Hintergrund jedoch größer als die Visitenkarte gemacht. Somit entsprechen unsere Proportionen nicht mehr wirklich dem Modell.
Um dieses Problem zu lösen, möchten wir alles bis auf den Hintergrund einheitlich skalieren. Wir werden dies erreichen, indem wir alle diese Elemente in einem zusammenfassen Null-Container, Und Skalierung Dieser Container anstelle aller einzelnen Flugzeuge.
Animieren Sie den Text
Rechtsklick An FixedTargetTracker0 und wähle Patch erstellen. Dadurch wird die geöffnet Patch-Editor.
Rechtsklick im Patch-Editor und fügen Sie eine hinzu Animation Patch. Verbinden Die Gefunden Stecker des FixedTargetTracker Patch zum Spielen Stecker des Animation Patch. Dadurch wird die Textanimation abgespielt, wenn der AR-Filter aktiviert ist, da das Zielbild gefunden wurde.
Dadurch wird automatisch ein Pulse-Patch dazwischen eingefügt. Verbinden Sie die Ausgeschaltet Stecker des Impuls Patch zum Zurücksetzen Stecker des Animation Patch. Dadurch wird die Textanimation zurückgesetzt, wenn sich die Kamera aus dem Weg zum Zielbild bewegt, und kann erneut abgespielt werden, wenn das Ziel erneut gefunden wird.
Fügen Sie eine hinzu Rahmenübergang Patchen und anschließen Fortschritt Stecker mit seinem Gegenstück aus dem Animation Patch. Stellen Sie die ein Anzahl der Frames = 51.
Wähle aus TextAnimationSequence um das zu öffnen Bedienfeld „Animationssequenz“. zu deiner Rechten. Klick auf das Pfeil vorhergehend Aktueller Frame um einen neuen Patch hinzuzufügen, der es uns ermöglicht, mit dem in der Szene angezeigten Frame zu interagieren. Verbinden diesen Patch auf den verfügbaren Anschluss des Rahmenübergang Patch.
Sie können die Geschwindigkeit der Animation steuern, indem Sie am Parameter „Dauer“ des Animationspatches herumbasteln.
Animieren Sie die Flügel
Wählen Sie nacheinander jeden Flügel aus und stellen Sie sicher, dass sie Position auf der Z-Achse Ist 0.
Das Schlagen der Flügel ist nicht schwierig. Wir müssen lediglich beiden Flügelobjekten eine Rotationsanimation in der Y-Achse hinzufügen. Eine direkte Anwendung eines solchen Effekts auf das Flügelobjekt würde jedoch nicht funktionieren. Tatsächlich liegt der Massenschwerpunkt des Objekts in der Mitte des Flügels. Wenn wir ihn also drehen würden, würde er sich von der Mitte aus drehen. Was wir brauchen, ist, dass es sich von dem Teil der Flügelkante aus dreht, der mit dem Körper in Kontakt steht. Ich hoffe, dass ich hier einigermaßen einen Sinn ergebe …
Wir müssen also einen Weg finden, den Massenschwerpunkt der Flügelobjekte irgendwie zu verschieben. Dazu verwenden wir Nullobjekte, die automatisch mit einem Massenschwerpunkt in der Mitte der Szene erstellt werden. Diese Nullobjekte enthalten die Flügelobjekte und die Drehung wird auf das Nullobjekt selbst angewendet. Lass es uns tun!
Rechtsklick auf der Container Und Hinzufügen A Nullobjekt im Inneren. Benennen Sie es in RightWingContainer um und Duplikat es mit STRG + D. Benennen Sie das Duplikat LeftWingContainer um. Wähle aus Flügelobjekte Und ziehen und loslassen sie in ihre jeweiligen Nullobjektcontainer.
Im Patch-Editor, Rechtsklick und füge ein hinzu Schleifenanimation Patch. Stellen Sie die ein Dauer = 2 und kreuzen Sie an Gespiegelt Kontrollkästchen (dies dient dazu, dass die Animation nahtlos in einer Schleife abläuft und am Ende eines Flügelschlags nicht wieder von vorne beginnt. Wenn „Gespiegelt“ aktiviert ist, beginnt der Flügel rückwärts zu schlagen, nachdem er die Obergrenze eines nach oben gerichteten Flügelschlags erreicht hat).
Als nächstes fügen Sie a hinzu Übergang Patch und Duplikat Es. Verlinken Sie die Fortschritt Stecker des Schleifenanimation Patch zu ihren Gegenstücken auf beiden Übergang Patches.
Geben Sie die Parameter der Übergangspatches wie folgt ein:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Wähle aus RightWingContainer und auf der Bedienfeld „Nullobjekt“. Klicken Sie auf der linken Seite auf Pfeil vorhergehend Drehung. Dadurch wird dem Patch-Editor ein Patch hinzugefügt, sodass wir mit diesen Werten interagieren können. Verbinden Sie die Wert Anschluss des obersten Übergang Patch zum Anschluss des RightWingContainer Patch neu erstellt.
Wiederholen Sie den Vorgang mit LeftWingContainer und der unterste Übergangspatch.
An diesem Punkt sollten Sie sehen, wie beide Flügel zu schlagen beginnen! Jetzt müssen wir nur noch die Motte entlang der Z-Achse in eine Position bewegen, die sinnvoller ist. Basteln Sie mit dem Position auf der Z-Achse des RightWingContainer, LeftWingContainer Und Körper Objekte, bis Sie zu einem Ergebnis kommen, das Ihnen gefällt.
Vorschau des Ergebnisses
Sie müssen das herunterladen Spark AR-Player App zuerst auf Ihrem Telefon.
Wenn Ihr Telefon mit Ihrem Computer verbunden ist, wird unten links in Spar AR Studio ein kleiner blauer Punkt zum Telefonsymbol hinzugefügt. Klicken Sie darauf und wählen Sie Schicken zu Ihrem Gerät.
Richten Sie Ihre Kamera auf die Visitenkarte, die Sie zuvor ausgedruckt haben, und genießen Sie es!
Verwenden Sie dann die App auf Ihrem Telefon, um ein Video des Effekts aufzunehmen, da wir es für den nächsten Schritt benötigen.
Veröffentlichen Sie den AR-Filter auf Facebook oder Instagram
Klick auf das Veröffentlichen Pfeilsymbol unter dem Vorschausymbol in der unteren linken Ecke. Dadurch wird Ihr Projekt gepackt, hochgeladen und Sie werden weitergeleitet Spark AR Hub's Webseite.
Befolgen Sie diese Schritte, um Ihren Filter erfolgreich zu veröffentlichen:
Vielleicht möchten Sie das überprüfen Spark AR-Richtlinien bevor Sie es zur Überprüfung einreichen. Mein erster Versuch wurde abgelehnt, weil die Adresse meiner Website im Demovideo sichtbar war.
Endergebnis
Ich überlasse Ihnen eine Demo der Filter, mit denen ich bisher gearbeitet habe.
Das erste ist das, das ich für meine eigene Visitenkarte erstellt habe, das zweite ist der erste Test, den ich mit einer davon gemacht habe Postkarten, die ich mit getrockneten Blütenblättern mache und der dritte ist der Filter, der für dieses Tutorial erstellt wurde.
Ich hoffe, es hat Ihnen Spaß gemacht, diesem Tutorial zu folgen.
Wie immer können Sie uns gerne Feedback zu diesem Tutorial oder zu einer Projektidee geben, die Sie hier veröffentlicht sehen möchten.
Fußnoten
Die folgenden Online-Inhalte dienten als Hilfe und/oder Inspiration bei der Erstellung dieses Projekts:
, Merci Beaucoup für alle diese Erklärungen, sehr klar! c'est vraiment top! Im Gegenzug habe ich ein kleines Problem damit, dass ich den Eindruck erwecke, dass meine Datei nicht auf Facebook exportiert werden kann und nicht mit Instagram kompatibel ist … Ich weiß nicht, warum … und ich muss sagen, dass die Wirkung akzeptiert wird Bei der Ankündigung des Putschversuchs habe ich noch nie einen Rückblick auf die Uhr erhalten!!! Das ist ein Problem! pouvez-vous m'aider? Ich hatte eine ausgezeichnete Reise.
Bonjour Noémie,
Es sieht so aus, als ob ich dieses Tutorial geschrieben habe, um Poster zu drucken und Effekte anzuzeigen, die ich auf Instagram gepostet habe, oder die ich in allen Fällen geändert habe.
Eine schöne Reise für Sie!