Crea un filtro Instagram AR per il tuo biglietto da visita
00voti
Valutazione dell'articolo
Tempo richiesto
Complessità
Strumenti e forniture
30 minuti
Facile
Software gratuiti
Questa idea è nata come spesso accade: stavo lavorando su a progetto completamente diverso quando ho deviato fuori strada dopo essermi imbattuto nel lavoro di un artista chiamato Catalina Villegas sui social media. Crea filtri AR per Instagram che danno vita alle illustrazioni che vende come adesivi. L'AR non è una novità, avevo un'app che mostrava questo tipo di effetti sul mio nuovissimo smartphone Sony nel... 2012. Ma scoprire che era disponibile uno strumento per creare facilmente effetti AR e poi pubblicarli su una piattaforma onnipresente come Instagram mi ha fatto davvero piacere.
Ho quindi iniziato a pensare a che tipo di utilizzo avrei potuto fare di tale tecnologia tenendo conto delle mie attività personali e professionali. Vorrei essere in grado di creare bellissime illustrazioni digitali e dare loro una nuova dimensione rendendoli interattivi, ma per il momento questo è troppo lontano dalle mie competenze. Così ho deciso di realizzare un progetto semplice che in qualche modo avesse senso per me: creare un filtro che riproducesse un'animazione 3D quando la fotocamera veniva puntata su uno dei miei biglietti da visita. Ho un piccolo negozio Etsy e ho pensato che potesse essere un modo divertente per spingere i miei clienti a postarlo sui social network poiché potrebbero essere curiosi di provare questo filtro AR una volta ricevuto l'ordine insieme al mio biglietto da visita.
/Texture – a rigor di termini, gli unici file necessari per completare questo tutorial.
/Cornici di animazione del testo
Sfondo.png
Corpo.png
Business_card_target_image.jpg
LeftWing.png
Lune.png
RightWing.png
Stelle.png
Procedura dettagliata
Progettazione di un biglietto da visita e di un mockup per l'animazione AR
Il biglietto da visita
Il primo compito che dovrai completare sarà quello di ideare il design del tuo biglietto da visita.
Per questo tutorial utilizzeremo un'illustrazione di falena progettata da il mio talentuoso amico Hui Chen. Grazie Hui per averci permesso di usare il tuo lavoro!
Una volta che sarai soddisfatto del tuo design, stampalo e scatta una foto del biglietto. In effetti, ho scoperto che il tracciamento del target funzionerà meglio se si utilizza un'immagine dell'oggetto del mondo reale che si desidera tracciare invece della sua controparte digitale.
Mockup dell'animazione AR e preparazione degli elementi visivi
Successivamente progetta un modello di come immagini la tua animazione AR vista dall'alto. Ti aiuterà a organizzare e posizionare i diversi elementi della tua scena su Spark AR Studio.
Organizza i tuoi elementi principali in diversi livelli nell'editor vettoriale ed esportali come .png immagini con sfondo trasparente.
Il testo animato: a quanto pare questa si è rivelata una delle parti più problematiche del progetto per me. In breve, ho disegnato il tratto del testo su Inkscape e l'ho caricato su Blender per generare un'animazione fotogramma per fotogramma. Se qualcuno desidera maggiori dettagli su questo processo me lo faccia sapere nei commenti e potrei scrivere un breve tutorial al riguardo.
Per funzionare con questo programma è necessario un account Facebook.
Crea un nuovo progetto
Una volta riuscito ad avviare e accedere a Spark AR Studio, crea un nuovo progetto facendo clic Creare nuovo -> Nuovo progetto -> Monitoraggio degli obiettivi.
Questo software è piuttosto difettoso e instabile, quindi potresti voler salvare subito il tuo progetto e ricordarti di salvare periodicamente dopo aver fatto progressi significativi.
Importa le texture nel progetto
Ricordi gli elementi della scena che abbiamo salvato come .png in precedenza? Dobbiamo caricarli come Trame in modo che possiamo usarli all'interno del nostro progetto.
Per citare la documentazione del software:
Una texture è un file immagine utilizzato per definire l'aspetto di un oggetto nella scena. È possibile applicare una o più texture a un materiale, quindi applicare il materiale a un oggetto.
Nel Pannello Risorse nell'angolo in basso a sinistra della finestra, fare clic su Importa dal computer e caricare tutti i file nel file Trame cartella del repository di Google Drive, ad eccezione del contenuto dei fotogrammi di animazione /Text (per ora).
Quindi seleziona tutte le texture appena importate ad eccezione di Background e Business_card_target_image. Sul Pannello trama alla tua destra nel Sottopannello di compressione, impostare tutte e tre le opzioni di compressione su Nessuno. Lo facciamo perché le immagini sono già sufficientemente leggere e il modulo di compressione del programma tende a bloccarsi per sempre utilizzando troppe risorse CPU e GPU senza una ragione chiara.
Ora importiamo i fotogrammi dell'animazione del testo. Ancora una volta devo usare una soluzione alternativa per evitare di rimanere bloccato aspettando per sempre che il modulo di compressione (non) faccia il suo lavoro. In basso a destra del Pannello Risorse, clicca su + Aggiungi risorsa -> Importare -> Dal computer. Carica tutte le immagini del /Cornici di animazione del testo cartella, una metà alla volta. Devo farlo per evitare di mandare in crash il programma... C'è un'opzione di importazione di Texture Animation che sarebbe più comoda da usare se non... mandasse in crash il programma.
Una volta importati i 50 fotogrammi, selezionali tutti e modifica il file Tipo A Sequenza di texture nella parte superiore del Pannello trama.
Imposta la compressione su Nessuno per tutte e tre le opzioni di compressione come abbiamo fatto con le altre texture.
Infine dobbiamo creare un altro tipo di oggetto per lavorare con la nostra animazione. Nel + Aggiungi risorsa menu, selezionare Sequenza di animazione. Nel pannello che si aprirà alla tua destra, clicca su freccia a discesa di fronte a Struttura e seleziona il sequenza della trama che abbiamo appena creato.
Crea i materiali
Per creare i materiali richiesti, fare clic su + Aggiungi risorsa -> Materiale. Ne avremo bisogno 7, quindi vai avanti e duplicalo 6 volte con CTRL+D.
Dai a tutti i materiali un nome più significativo. Ora dobbiamo impostare alcuni parametri su ciascuno di essi.
Seleziona tutti i materiali tranne lo sfondo.
Sul Pannello materiale alla tua destra seleziona Doppia faccia nel Opzioni di rendering sottopannello. In questo modo le nostre texture sono visibili anche se viste dal basso, cosa che sarà particolarmente rilevante per le ali e il corpo della falena poiché saranno sospesi nell'aria.
Nel Opzione di rendering avanzato sottopannello, deselezionare Scrivi in profondità. Ciò consentirà allo sfondo trasparente delle nostre texture di scomparire davvero e di non interferire tra loro quando lavoreremo con i piani in seguito.
Quindi seleziona quello pertinente Struttura per ogni materiale in Proprietà dello shader sottopannello.
Aggiungi la Texture al Target Tracker
Ora dobbiamo dare un bersaglio al nostro Target Tracker, il modulo del programma che si occupa di localizzare l'oggetto del mondo reale che attiverà l'animazione e gli fornirà informazioni sul piano su cui dovrebbe essere orientato.
Selezionare fissoTargetTracker0 nel Scena pannello in alto a sinistra e nel Localizzatore di bersagli menu sulla tua destra seleziona Immagine_destinazione_biglietto_da_visita come il Struttura.
Crea i piani per gli elementi della scena
La prima cosa che faremo sarà passare dalla vista 3D a quella 2D della nostra scena modificando il Modalità.
Prossimo Fare clic con il tasto destro SU fissoTargetTracker0 A Aggiungere un nuovo Aereo alla scena.
Utilizzo CTRL+D A duplicare questo aereo 6 volte per ritrovarsi con 7 aerei.
Rinominare i piani riflettendo tutti gli elementi che verranno inclusi nella nostra scena.
Nel Pannello piano alla tua destra, aggiungi il pertinente Materiale ad ogni piano.
Scala e posiziona i piani
Ora che i nostri piani sono stati strutturati, dobbiamo regolarli per dare agli elementi della nostra scena le dimensioni e le posizioni corrette. Per fare ciò lavoreremo un aereo alla volta.
Quindi inizia selezionando tutti gli aerei tranne il primo con cui lavorerai (in quel caso Stelle) e realizzali nascosto deselezionando Visibile.
Utilizzare l'immagine di destinazione come riferimento scala E riposizionare le stelle finché non si abbinano in qualche modo allo sfondo. Quando hai finito, imposta la visibilità del piano delle stelle su nascosto e passa a un altro piano. Ripeti questa operazione con tutti i piani tranne Background e TextAnimation.
Una volta che sei soddisfatto, rivela tutti i piani su cui hai lavorato e lo sfondo. Seleziona il Sfondo aereo e scala alle dimensioni desiderate: idealmente probabilmente vorrai che copra completamente l'immagine di destinazione.
Quindi fai il TextAnimation visibile e ancora una volta riportarlo alle sue proporzioni originali e posizionarlo in modo appropriato.
La falena ora sembra un po' piccola rispetto allo sfondo. Infatti, abbiamo ridimensionato la falena utilizzando l'immagine target come riferimento, ma abbiamo reso lo sfondo più grande del biglietto da visita. Pertanto le nostre proporzioni non sono più realmente fedeli al modello.
Per risolvere questo problema, vogliamo ridimensionare tutto tranne lo sfondo in modo coerente. Raggiungeremo questo obiettivo racchiudendo tutti questi elementi in a Contenitore nullo, E ridimensionamento questo contenitore invece di tutti i singoli aerei.
Animare il testo
Fare clic con il tasto destro SU fissoTargetTracker0 e scegli Crea patch. Questo aprirà il editore di patch.
Fare clic con il tasto destro nell'editor delle patch e aggiungi un file Animazione toppa. Collegare IL Trovato connettore del fissoTargetTracker patch per Giocare connettore del Animazione toppa. Ciò farà sì che l'animazione del testo inizi la riproduzione quando il filtro AR è abilitato perché l'immagine di destinazione è stata trovata.
In questo modo verrà aggiunta automaticamente una patch Pulse nel mezzo. Collega il Spento connettore del Impulso patch per Ripristina connettore del Animazione toppa. In questo modo, quando la telecamera si allontana dall'immagine di destinazione, l'animazione del testo viene reimpostata e può essere riprodotta di nuovo quando il bersaglio viene ritrovato.
Aggiungi un Transizione del fotogramma patch e collegalo Progresso connettore alla sua controparte da Animazione toppa. Impostare il numero di fotogrammi = 51.
Seleziona il SequenzaAnimazioneTesto per aprire il Pannello Sequenza di animazione alla tua destra. Clicca sul freccia precedente Fotogramma corrente per aggiungere una nuova patch che ci permetterà di interagire con il fotogramma mostrato nella scena. Collegare questa patch al connettore disponibile del Transizione del fotogramma toppa.
Puoi controllare la velocità dell'animazione armeggiando con il parametro Durata della patch Animazione.
Animare le ali
Seleziona ciascuna ala consecutivamente e assicurati che sia la loro posizione sul Asse Z È 0.
Far sbattere le ali non è difficile. Dobbiamo semplicemente aggiungere un'animazione di rotazione nell'asse Y su entrambi gli oggetti ali. Tuttavia, applicare direttamente tale effetto sull'oggetto alare non funzionerebbe. Infatti il centro di massa dell'oggetto si trova al centro dell'ala quindi se dovessimo ruotarlo ruoterebbe dal centro. Ciò di cui abbiamo bisogno è che ruoti dalla parte del bordo dell'ala, quella a contatto con il corpo. Spero di avere un senso qui...
Quindi dobbiamo trovare un modo per spostare in qualche modo il centro di massa degli oggetti alari. Per fare ciò, utilizzeremo Oggetti Nulli che verranno creati automaticamente con un centro di massa centrato al centro della scena. Questi Oggetti Nulli manterranno gli oggetti ali e la rotazione verrà applicata agli Oggetti Nulli stessi. Facciamolo!
Fare clic con il tasto destro sul Contenitore E Aggiungere UN Oggetto nullo dentro. Rinominarlo in RightWingContainer e duplicare con CTRL+D. Rinominare il duplicato LeftWingContainer. Seleziona il oggetti alari E trascina e rilascia nei rispettivi Contenitori di oggetti nulli.
Nel Editore di patch, Fare clic con il tasto destro e aggiungi a Animazione in loop toppa. Impostare il durata = 2 e spunta il Rispecchiato casella di controllo (questo fa sì che l'animazione si ripeta senza soluzione di continuità e non ricominci dall'inizio alla fine di un lembo dell'ala. Con Specchiato attivato, l'ala inizierà a sbattere all'indietro dopo aver raggiunto il limite superiore di un lembo verso l'alto).
Successivamente aggiungi a Transizione toppa e duplicare Esso. Collega il Progresso connettore del Animazione in loop patch alle loro controparti su entrambi Transizione cerotti.
Compila i parametri delle patch di transizione in questo modo:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Seleziona il Contenitore RightWing e sul Pannello Oggetto Nullo alla tua sinistra clicca su freccia precedente Rotazione. Ciò aggiungerà una patch all'editor delle patch in modo che possiamo interagire con tali valori. Collega il Valore connettore del più in alto Transizione patch al connettore del Contenitore RightWing patch appena creata.
Ripetere l'operazione con Contenitore LeftWing e la patch di transizione più in basso.
A questo punto dovresti vedere entrambe le ali iniziare a sbattere! Ora dobbiamo solo spostare la falena lungo l'asse Z in una posizione che abbia più senso. Armeggiare con il Posizione sul Asse Z del Contenitore RightWing, Contenitore LeftWing E Corpo oggetti finché non raggiungi un risultato che ti soddisfa.
Anteprima del risultato
Dovrai scaricare il file Giocatore Spark AR prima l'app sul telefono.
Quando il telefono sarà collegato al computer, vedrai un piccolo punto blu aggiunto all'icona del telefono in basso a sinistra di Spar AR Studio. Cliccaci sopra e scegli Inviare al tuo dispositivo.
Punta la fotocamera sul biglietto da visita stampato in precedenza e divertiti!
A quel punto utilizza l'App sul tuo telefono per girare un video dell'effetto poiché ci servirà per il passaggio successivo.
Pubblica il filtro AR su Facebook o Instagram
Clicca sul Pubblicare icona freccia sotto l'icona Anteprima nell'angolo in basso a sinistra. Questo impacchetterà il tuo progetto, lo caricherà e ti reindirizzerà il file Hub AR scintillala pagina web di.
Segui questi passaggi per pubblicare correttamente il tuo filtro:
Scegli un nome per il filtro.
Scegli una piattaforma su cui desideri pubblicare: Instagram e/o Facebook.
Scegli una categoria per il tuo filtro e aggiungi alcune parole chiave se desideri che le persone possano trovarle facilmente nel motore di ricerca dei filtri.
È qui che torna utile il video che abbiamo salvato durante l'ultimo passaggio. Carica il video dimostrativo del tuo filtro.
Scegli un icona per il tuo filtro
Scrivi una cosa veloce descrizione spiegando cosa sta succedendo nel tuo filtro e come usarlo per aiutare con il processo di revisione.
Colpo Invia nell'angolo in alto a destra.
Aspetta il revisione processo da completare.
Potresti voler controllare il Politiche AR di Spark prima di inviarlo per la revisione. Il mio primo tentativo è stato negato perché l'indirizzo del mio sito web era visibile nel video dimostrativo.
Risultato finale
Ti lascerò con una demo dei filtri con cui ho lavorato fino ad ora.
Il primo è quello che ho creato per il mio biglietto da visita, il secondo è il primo test che ho realizzato utilizzando uno dei file cartoline che realizzo con petali di fiori secchi e il terzo è il filtro creato per questo tutorial.
Spero che ti sia piaciuto seguire questo tutorial.
Come sempre, non esitare a condividere qualsiasi feedback su questo tutorial o qualsiasi idea di progetto che vorresti vedere pubblicata qui.
Note a piè di pagina
I seguenti contenuti online hanno fornito assistenza e/o ispirazione durante la realizzazione di questo progetto:
Quando accedi per la prima volta utilizzando un pulsante di accesso social, raccogliamo le informazioni del profilo pubblico del tuo account condivise dal provider di accesso social, in base alle tue impostazioni sulla privacy. Otteniamo anche il tuo indirizzo email per creare automaticamente un account per te nel nostro sito web. Una volta creato il tuo account, accederai a questo account.
DisaccordoEssere d'accordo
Permetto di creare un account
Quando accedi per la prima volta utilizzando un pulsante di accesso social, raccogliamo le informazioni del profilo pubblico del tuo account condivise dal provider di accesso social, in base alle tue impostazioni sulla privacy. Otteniamo anche il tuo indirizzo email per creare automaticamente un account per te nel nostro sito web. Una volta creato il tuo account, accederai a questo account.
DisaccordoEssere d'accordo
2 Commenti
Il più vecchio
Più recentePiù votato
Feedback in linea
Visualizza tutti i commenti
Noémie BSG
2 anni fa
, merci beaucoup pour toutes ces explications très claires! è davvero top! in cambio, ho un piccolo soucis, quando esporto sembra che il mio file non possa essere esportato su Facebook e non è compatibile con Instagram… non so perché… e una volta che l'effetto è accettato et annoncé comme publié du coup je ne sais pas ou le retrouver pour le montrer!!! ce qui est un problema! puoi aiutarmi? vi auguro un viaggio eccellente.
È semplice che dopo aver scritto questo tutorial sull'opzione per poster e retrouver degli effetti, il fatto che ci sia stato su Instagram è stato aggiornato o in tutti i casi ampiamente modificato.
Abbiamo notato che stai visitando da Francia. Abbiamo aggiornato i nostri prezzi a Euro per la tua comodità di acquisto. Usa invece Dollari americani (US).Ignora
Making-of
Crea un filtro Instagram AR per il tuo biglietto da visita
30 minuti
Facile
Software gratuiti
Questa idea è nata come spesso accade: stavo lavorando su a progetto completamente diverso quando ho deviato fuori strada dopo essermi imbattuto nel lavoro di un artista chiamato Catalina Villegas sui social media. Crea filtri AR per Instagram che danno vita alle illustrazioni che vende come adesivi. L'AR non è una novità, avevo un'app che mostrava questo tipo di effetti sul mio nuovissimo smartphone Sony nel... 2012. Ma scoprire che era disponibile uno strumento per creare facilmente effetti AR e poi pubblicarli su una piattaforma onnipresente come Instagram mi ha fatto davvero piacere.
Ho quindi iniziato a pensare a che tipo di utilizzo avrei potuto fare di tale tecnologia tenendo conto delle mie attività personali e professionali. Vorrei essere in grado di creare bellissime illustrazioni digitali e dare loro una nuova dimensione rendendoli interattivi, ma per il momento questo è troppo lontano dalle mie competenze. Così ho deciso di realizzare un progetto semplice che in qualche modo avesse senso per me: creare un filtro che riproducesse un'animazione 3D quando la fotocamera veniva puntata su uno dei miei biglietti da visita. Ho un piccolo negozio Etsy e ho pensato che potesse essere un modo divertente per spingere i miei clienti a postarlo sui social network poiché potrebbero essere curiosi di provare questo filtro AR una volta ricevuto l'ordine insieme al mio biglietto da visita.
Requisiti
Software
Per realizzare questo progetto sono stati utilizzati i seguenti software:
File
Ho caricato tutti i file di progetto su Google Drive.
Struttura del repository dei file di progetto:
Procedura dettagliata
Progettazione di un biglietto da visita e di un mockup per l'animazione AR
Il biglietto da visita
Il primo compito che dovrai completare sarà quello di ideare il design del tuo biglietto da visita.
Per questo tutorial utilizzeremo un'illustrazione di falena progettata da il mio talentuoso amico Hui Chen. Grazie Hui per averci permesso di usare il tuo lavoro!
Dai un'occhiata a questo articolo su Best practice per il monitoraggio del target in Spark AR Studio per avere una buona comprensione di come dovrebbe apparire il design del tuo biglietto da visita per essere facilmente riconosciuto dal filtro.
Una volta che sarai soddisfatto del tuo design, stampalo e scatta una foto del biglietto. In effetti, ho scoperto che il tracciamento del target funzionerà meglio se si utilizza un'immagine dell'oggetto del mondo reale che si desidera tracciare invece della sua controparte digitale.
Mockup dell'animazione AR e preparazione degli elementi visivi
Successivamente progetta un modello di come immagini la tua animazione AR vista dall'alto. Ti aiuterà a organizzare e posizionare i diversi elementi della tua scena su Spark AR Studio.
Organizza i tuoi elementi principali in diversi livelli nell'editor vettoriale ed esportali come .png immagini con sfondo trasparente.
Il testo animato: a quanto pare questa si è rivelata una delle parti più problematiche del progetto per me. In breve, ho disegnato il tratto del testo su Inkscape e l'ho caricato su Blender per generare un'animazione fotogramma per fotogramma. Se qualcuno desidera maggiori dettagli su questo processo me lo faccia sapere nei commenti e potrei scrivere un breve tutorial al riguardo.
Installa Spark AR Studio
Dirigiti al pagina di download di Spark AR Studio, scaricare il file di installazione e seguire le istruzioni per installare il programma.
Per funzionare con questo programma è necessario un account Facebook.
Crea un nuovo progetto
Una volta riuscito ad avviare e accedere a Spark AR Studio, crea un nuovo progetto facendo clic Creare nuovo -> Nuovo progetto -> Monitoraggio degli obiettivi.
Questo software è piuttosto difettoso e instabile, quindi potresti voler salvare subito il tuo progetto e ricordarti di salvare periodicamente dopo aver fatto progressi significativi.
Importa le texture nel progetto
Ricordi gli elementi della scena che abbiamo salvato come .png in precedenza? Dobbiamo caricarli come Trame in modo che possiamo usarli all'interno del nostro progetto.
Per citare la documentazione del software:
Nel Pannello Risorse nell'angolo in basso a sinistra della finestra, fare clic su Importa dal computer e caricare tutti i file nel file Trame cartella del repository di Google Drive, ad eccezione del contenuto dei fotogrammi di animazione /Text (per ora).
Quindi seleziona tutte le texture appena importate ad eccezione di Background e Business_card_target_image. Sul Pannello trama alla tua destra nel Sottopannello di compressione, impostare tutte e tre le opzioni di compressione su Nessuno. Lo facciamo perché le immagini sono già sufficientemente leggere e il modulo di compressione del programma tende a bloccarsi per sempre utilizzando troppe risorse CPU e GPU senza una ragione chiara.
Ora importiamo i fotogrammi dell'animazione del testo. Ancora una volta devo usare una soluzione alternativa per evitare di rimanere bloccato aspettando per sempre che il modulo di compressione (non) faccia il suo lavoro. In basso a destra del Pannello Risorse, clicca su + Aggiungi risorsa -> Importare -> Dal computer. Carica tutte le immagini del /Cornici di animazione del testo cartella, una metà alla volta. Devo farlo per evitare di mandare in crash il programma... C'è un'opzione di importazione di Texture Animation che sarebbe più comoda da usare se non... mandasse in crash il programma.
Una volta importati i 50 fotogrammi, selezionali tutti e modifica il file Tipo A Sequenza di texture nella parte superiore del Pannello trama.
Imposta la compressione su Nessuno per tutte e tre le opzioni di compressione come abbiamo fatto con le altre texture.
Infine dobbiamo creare un altro tipo di oggetto per lavorare con la nostra animazione. Nel + Aggiungi risorsa menu, selezionare Sequenza di animazione. Nel pannello che si aprirà alla tua destra, clicca su freccia a discesa di fronte a Struttura e seleziona il sequenza della trama che abbiamo appena creato.
Crea i materiali
Per creare i materiali richiesti, fare clic su + Aggiungi risorsa -> Materiale. Ne avremo bisogno 7, quindi vai avanti e duplicalo 6 volte con CTRL+D.
Dai a tutti i materiali un nome più significativo. Ora dobbiamo impostare alcuni parametri su ciascuno di essi.
Seleziona tutti i materiali tranne lo sfondo.
Sul Pannello materiale alla tua destra seleziona Doppia faccia nel Opzioni di rendering sottopannello. In questo modo le nostre texture sono visibili anche se viste dal basso, cosa che sarà particolarmente rilevante per le ali e il corpo della falena poiché saranno sospesi nell'aria.
Nel Opzione di rendering avanzato sottopannello, deselezionare Scrivi in profondità. Ciò consentirà allo sfondo trasparente delle nostre texture di scomparire davvero e di non interferire tra loro quando lavoreremo con i piani in seguito.
Quindi seleziona quello pertinente Struttura per ogni materiale in Proprietà dello shader sottopannello.
Aggiungi la Texture al Target Tracker
Ora dobbiamo dare un bersaglio al nostro Target Tracker, il modulo del programma che si occupa di localizzare l'oggetto del mondo reale che attiverà l'animazione e gli fornirà informazioni sul piano su cui dovrebbe essere orientato.
Selezionare fissoTargetTracker0 nel Scena pannello in alto a sinistra e nel Localizzatore di bersagli menu sulla tua destra seleziona Immagine_destinazione_biglietto_da_visita come il Struttura.
Crea i piani per gli elementi della scena
La prima cosa che faremo sarà passare dalla vista 3D a quella 2D della nostra scena modificando il Modalità.
Prossimo Fare clic con il tasto destro SU fissoTargetTracker0 A Aggiungere un nuovo Aereo alla scena.
Utilizzo CTRL+D A duplicare questo aereo 6 volte per ritrovarsi con 7 aerei.
Rinominare i piani riflettendo tutti gli elementi che verranno inclusi nella nostra scena.
Nel Pannello piano alla tua destra, aggiungi il pertinente Materiale ad ogni piano.
Scala e posiziona i piani
Ora che i nostri piani sono stati strutturati, dobbiamo regolarli per dare agli elementi della nostra scena le dimensioni e le posizioni corrette. Per fare ciò lavoreremo un aereo alla volta.
Quindi inizia selezionando tutti gli aerei tranne il primo con cui lavorerai (in quel caso Stelle) e realizzali nascosto deselezionando Visibile.
Utilizzare l'immagine di destinazione come riferimento scala E riposizionare le stelle finché non si abbinano in qualche modo allo sfondo. Quando hai finito, imposta la visibilità del piano delle stelle su nascosto e passa a un altro piano. Ripeti questa operazione con tutti i piani tranne Background e TextAnimation.
Una volta che sei soddisfatto, rivela tutti i piani su cui hai lavorato e lo sfondo. Seleziona il Sfondo aereo e scala alle dimensioni desiderate: idealmente probabilmente vorrai che copra completamente l'immagine di destinazione.
Quindi fai il TextAnimation visibile e ancora una volta riportarlo alle sue proporzioni originali e posizionarlo in modo appropriato.
La falena ora sembra un po' piccola rispetto allo sfondo. Infatti, abbiamo ridimensionato la falena utilizzando l'immagine target come riferimento, ma abbiamo reso lo sfondo più grande del biglietto da visita. Pertanto le nostre proporzioni non sono più realmente fedeli al modello.
Per risolvere questo problema, vogliamo ridimensionare tutto tranne lo sfondo in modo coerente. Raggiungeremo questo obiettivo racchiudendo tutti questi elementi in a Contenitore nullo, E ridimensionamento questo contenitore invece di tutti i singoli aerei.
Animare il testo
Fare clic con il tasto destro SU fissoTargetTracker0 e scegli Crea patch. Questo aprirà il editore di patch.
Fare clic con il tasto destro nell'editor delle patch e aggiungi un file Animazione toppa. Collegare IL Trovato connettore del fissoTargetTracker patch per Giocare connettore del Animazione toppa. Ciò farà sì che l'animazione del testo inizi la riproduzione quando il filtro AR è abilitato perché l'immagine di destinazione è stata trovata.
In questo modo verrà aggiunta automaticamente una patch Pulse nel mezzo. Collega il Spento connettore del Impulso patch per Ripristina connettore del Animazione toppa. In questo modo, quando la telecamera si allontana dall'immagine di destinazione, l'animazione del testo viene reimpostata e può essere riprodotta di nuovo quando il bersaglio viene ritrovato.
Aggiungi un Transizione del fotogramma patch e collegalo Progresso connettore alla sua controparte da Animazione toppa. Impostare il numero di fotogrammi = 51.
Seleziona il SequenzaAnimazioneTesto per aprire il Pannello Sequenza di animazione alla tua destra. Clicca sul freccia precedente Fotogramma corrente per aggiungere una nuova patch che ci permetterà di interagire con il fotogramma mostrato nella scena. Collegare questa patch al connettore disponibile del Transizione del fotogramma toppa.
Puoi controllare la velocità dell'animazione armeggiando con il parametro Durata della patch Animazione.
Animare le ali
Seleziona ciascuna ala consecutivamente e assicurati che sia la loro posizione sul Asse Z È 0.
Far sbattere le ali non è difficile. Dobbiamo semplicemente aggiungere un'animazione di rotazione nell'asse Y su entrambi gli oggetti ali. Tuttavia, applicare direttamente tale effetto sull'oggetto alare non funzionerebbe. Infatti il centro di massa dell'oggetto si trova al centro dell'ala quindi se dovessimo ruotarlo ruoterebbe dal centro. Ciò di cui abbiamo bisogno è che ruoti dalla parte del bordo dell'ala, quella a contatto con il corpo. Spero di avere un senso qui...
Quindi dobbiamo trovare un modo per spostare in qualche modo il centro di massa degli oggetti alari. Per fare ciò, utilizzeremo Oggetti Nulli che verranno creati automaticamente con un centro di massa centrato al centro della scena. Questi Oggetti Nulli manterranno gli oggetti ali e la rotazione verrà applicata agli Oggetti Nulli stessi. Facciamolo!
Fare clic con il tasto destro sul Contenitore E Aggiungere UN Oggetto nullo dentro. Rinominarlo in RightWingContainer e duplicare con CTRL+D. Rinominare il duplicato LeftWingContainer. Seleziona il oggetti alari E trascina e rilascia nei rispettivi Contenitori di oggetti nulli.
Nel Editore di patch, Fare clic con il tasto destro e aggiungi a Animazione in loop toppa. Impostare il durata = 2 e spunta il Rispecchiato casella di controllo (questo fa sì che l'animazione si ripeta senza soluzione di continuità e non ricominci dall'inizio alla fine di un lembo dell'ala. Con Specchiato attivato, l'ala inizierà a sbattere all'indietro dopo aver raggiunto il limite superiore di un lembo verso l'alto).
Successivamente aggiungi a Transizione toppa e duplicare Esso. Collega il Progresso connettore del Animazione in loop patch alle loro controparti su entrambi Transizione cerotti.
Compila i parametri delle patch di transizione in questo modo:
[0, -40, 0,
0, 35, 0]
[0, 40, 0,
0, -35, 0]
Seleziona il Contenitore RightWing e sul Pannello Oggetto Nullo alla tua sinistra clicca su freccia precedente Rotazione. Ciò aggiungerà una patch all'editor delle patch in modo che possiamo interagire con tali valori. Collega il Valore connettore del più in alto Transizione patch al connettore del Contenitore RightWing patch appena creata.
Ripetere l'operazione con Contenitore LeftWing e la patch di transizione più in basso.
A questo punto dovresti vedere entrambe le ali iniziare a sbattere! Ora dobbiamo solo spostare la falena lungo l'asse Z in una posizione che abbia più senso. Armeggiare con il Posizione sul Asse Z del Contenitore RightWing, Contenitore LeftWing E Corpo oggetti finché non raggiungi un risultato che ti soddisfa.
Anteprima del risultato
Dovrai scaricare il file Giocatore Spark AR prima l'app sul telefono.
Quando il telefono sarà collegato al computer, vedrai un piccolo punto blu aggiunto all'icona del telefono in basso a sinistra di Spar AR Studio. Cliccaci sopra e scegli Inviare al tuo dispositivo.
Punta la fotocamera sul biglietto da visita stampato in precedenza e divertiti!
A quel punto utilizza l'App sul tuo telefono per girare un video dell'effetto poiché ci servirà per il passaggio successivo.
Pubblica il filtro AR su Facebook o Instagram
Clicca sul Pubblicare icona freccia sotto l'icona Anteprima nell'angolo in basso a sinistra. Questo impacchetterà il tuo progetto, lo caricherà e ti reindirizzerà il file Hub AR scintillala pagina web di.
Segui questi passaggi per pubblicare correttamente il tuo filtro:
Potresti voler controllare il Politiche AR di Spark prima di inviarlo per la revisione. Il mio primo tentativo è stato negato perché l'indirizzo del mio sito web era visibile nel video dimostrativo.
Risultato finale
Ti lascerò con una demo dei filtri con cui ho lavorato fino ad ora.
Il primo è quello che ho creato per il mio biglietto da visita, il secondo è il primo test che ho realizzato utilizzando uno dei file cartoline che realizzo con petali di fiori secchi e il terzo è il filtro creato per questo tutorial.
Spero che ti sia piaciuto seguire questo tutorial.
Come sempre, non esitare a condividere qualsiasi feedback su questo tutorial o qualsiasi idea di progetto che vorresti vedere pubblicata qui.
Note a piè di pagina
I seguenti contenuti online hanno fornito assistenza e/o ispirazione durante la realizzazione di questo progetto:
, merci beaucoup pour toutes ces explications très claires! è davvero top! in cambio, ho un piccolo soucis, quando esporto sembra che il mio file non possa essere esportato su Facebook e non è compatibile con Instagram… non so perché… e una volta che l'effetto è accettato et annoncé comme publié du coup je ne sais pas ou le retrouver pour le montrer!!! ce qui est un problema! puoi aiutarmi? vi auguro un viaggio eccellente.
Bonjour Noémie,
È semplice che dopo aver scritto questo tutorial sull'opzione per poster e retrouver degli effetti, il fatto che ci sia stato su Instagram è stato aggiornato o in tutti i casi ampiamente modificato.
Un buon viaggio per voi!