Share
Benvenuti alla seconda parte della mia Guida per principianti alla realtà aumentata, spero che abbiate terminato la prima parte di questo tutorial, o almeno scaricato e letto i file sorgente (altrimenti potreste essere un po 'confusi con quello che sta succedendo).
L'ultima volta abbiamo esaminato la creazione di un ambiente AR semplice, la creazione di un cubo, l'applicazione di materiali al cubo e l'effetto "buco nel muro".
Oggi svilupperemo questa conoscenza e creeremo il finale come mostrato nella demo. Per creare quell'effetto finale, abbiamo bisogno di sapere come rendere sfere, animare oggetti, riprodurre effetti sonori e infine renderizzare oggetti 3d. Il rendering di oggetti 3D nel palmo della tua mano è il motivo principale per cui la realtà aumentata è diventata un grande successo quest'anno, soprattutto quando crei alcune delle forme più interessanti o le animi. Se sei nel Regno Unito, potresti aver visto recentemente The Gadget Show, in cui erano presenti la realtà aumentata e una versione animata di Suzi Perry che avresti potuto tenere in mano. Molto bella.
Quindi mettiamoci al lavoro. Inizierò con il mondo e le stelle renderanno prima di tutto, poi passerò all'animazione delle forme e infine alla creazione della mucca. Apri i tuoi file dall'ultima volta e creiamo.
Fonte: NASA Visible Earth. Credito: Reto Stöckli, Robert Simmon.
Scarica la versione 2048x1024px dell'immagine qui sopra dalla pagina NASA Visible Earth e chiamala map.jpg. Inseriscilo nella seguente cartella: deploy> assets. Questa è la stessa cartella in cui sono state salvate le immagini all'interno del cubo nell'ultima parte del tutorial. Questa bella immagine del mondo è venuta dalla NASA. Prendono buone foto, no??
Nel tuo codice, vai a dove abbiamo impostato l'effetto "buco nel muro" per Marker 0 l'ultima volta. Subito dopo il codice "buco nel muro", aggiungi il seguente codice:
var Earth: Sphere = new Sphere (earth, 40); Earth.z = 200; dispObj.addChild (Terra);
Ora che abbiamo creato una sfera, ha bisogno di una trama. Questo viene fatto esattamente nello stesso modo in cui si esegue il mapping di una trama a un cubo. Nota come nel set up della sfera, sta cercando qualcosa chiamato "earth" questa è la nostra variabile texture.
Navigare nel codice fino a dove abbiamo impostato i materiali prima. Aggiungi a quel codice la seguente riga:
Accentsconagua
var earth: BitmapFileMaterial = new BitmapFileMaterial ("assets / map.jpg"); Proprio come gli altri.
Quando lo provi, dovresti vedere qualcosa come l'immagine seguente (ma ovviamente senza quel bel diavolo che regge il pennarello per te):
Proprio come l'ultima volta, dovrai scaricare l'immagine del marcatore e stamparla con molto spazio bianco attorno ai bordi.
Ora, cosa sarebbe un'immagine spaziale senza alcune stelle? Aggiungiamone un po '? Questa è probabilmente la parte più noiosa da scrivere perché tutte le stelle devono essere posizionate individualmente. Ma i birichini sfacciati ottengono il vantaggio del copia e incolla.
Aggiungi il seguente codice dopo il codice di rendering della terra:
var star1: Sphere = new Sphere (star, 4); star1.z = 65; star1.x = 84; star1.y = 164; dispObj.addChild (star1); var star2: Sphere = new Sphere (star, 3); star2.z = 246; star2.x = 32; star2.y = 64; dispObj.addChild (star2); var star3: Sphere = new Sphere (star, 2); star3.z = 163; star3.x = 78; star3.y = 98; dispObj.addChild (star3); var star4: Sphere = new Sphere (star, 4); star4.z = 120; star4.x = 164; star4.y = 157; dispObj.addChild (star4); var star5: Sphere = new Sphere (star, 2); star5.z = 148; star5.x = -164; star5.y = -157; dispObj.addChild (Star5); var star6: Sphere = new Sphere (star, 3); star6.z = 46; star6.x = -36; star6.y = -156; dispObj.addChild (Star6); var star7: Sphere = new Sphere (star, 5); star7.z = 40; star7.x = -16; star7.y = -84; dispObj.addChild (star7); var star8: Sphere = new Sphere (star, 5); star8.z = 59; star8.x = -84; star8.y = 30; dispObj.addChild (Star8); var star9: Sphere = new Sphere (star, 4); star9.z = 87; star9.x = -134; star9.y = 84; dispObj.addChild (Star9); var star10: Sphere = new Sphere (star, 2); star10.z = 49; star10.x = 10; star10.y = 18; dispObj.addChild (STAR10); var star11: Sphere = new Sphere (star, 5); star11.z = 94; star11.x = -84; star11.y = 41; dispObj.addChild (star11); var star12: Sphere = new Sphere (star, 3); star12.z = 54; star12.x = 91; star12.y = -46; dispObj.addChild (star12); var star13: Sphere = new Sphere (star, 2); star13.z = 180; star13.x = 88; star13.y = -130; dispObj.addChild (star13); var star14: Sphere = new Sphere (star, 4); star14.z = 102; star14.x = 134; star14.y = -13; dispObj.addChild (star14); var star15: Sphere = new Sphere (star, 1); star15.z = 61; star15.x = -35; star15.y = 145; dispObj.addChild (star15);
Phew, questo è un bel po ', naturalmente puoi aggiungerne altri se vuoi più stelle o semplicemente usare un ciclo un array per aggiungere un numero arbitrario.
Ora dobbiamo aggiungere un materiale per le stelle. Aggiungi quanto segue con l'altro codice materiale:
var star: ColorMaterial = new ColorMaterial (0xFFFFFF);
Prova il film in flash e spero che vedrai qualcosa del genere:
Non sarebbe bello se, per esempio, potessimo avere la scena spaziale che abbiamo appena creato, essere intrappolati in una piccola scatola contenuta nel pennarello e poi esplodere? Beh, sei fortunato, e probabilmente hai visto il risultato perché è esattamente quello che faremo.
È abbastanza semplice animare le cose in AR. Soprattutto se vuoi semplicemente spostarli da un punto all'altro come vorremmo. Per fare questo, abbiamo bisogno di scaricare alcune classi extra per Flash. GreenSock crea una serie molto bella di librerie di animazioni che ci aiutano a spostare facilmente gli oggetti da un punto a un altro.
Vai su greensock.com e scarica la libreria AS3 TweenMax.
Una volta scaricata la libreria TweenMax, è necessario estrarre il file .zip e posizionare la cartella greensock in src> com del nostro progetto. Qui è anche conservata la libreria di squidder. Estrai qui e tutto andrà bene.
Ora torna su Flash. Aggiungi la seguente riga nella parte superiore del codice con le altre righe di importazione:
import com.greensock. *;
Ora hai accesso alla libreria GreenSock.
Trova il codice in cui imposti la variabile Terra. Sostituirlo con il seguente codice:
var Earth: Sphere = new Sphere (earth, 1); Earth.z = -40; TweenMax.to (Terra, 4, scaleX: 40, scaleY: 40, scaleZ: 40, z: "200", ritardo: 4);
Quello che ho fatto qui è modificare il punto di partenza e le dimensioni della Terra in modo che sia molto piccolo e all'interno della scatola. TweenMax è una grande classe di animazione. Qui impostiamo quale variabile da animare (Terra), quanto tempo impiegherà in secondi (4), da quanto dovrebbe scalare la variabile, il suo punto z e infine quanto tempo dovrebbe aspettare prima di animare. Questo è impostato su 4 in modo da poter prima animare altre cose.
Sostituisci tutto il tuo codice di configurazione stella con quanto segue:
var star1: Sphere = new Sphere (star, 1); star1.z = -40; TweenMax.to (star1, 4, scaleX: 1, scaleY: 1, scaleZ: 1, x: "84", y: "164", z: "65", ritardo: 4); dispObj.addChild (star1); var star2: Sphere = new Sphere (star, 1); star2.z = -40; TweenMax.to (star2, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "32", y: "64", z: "246", ritardo: 4); dispObj.addChild (star2); var star3: Sphere = new Sphere (star, 1); star3.z = -40; TweenMax.to (star3, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "78", y: "98", z: "163", ritardo: 4); dispObj.addChild (star3); var star4: Sphere = new Sphere (star, 1); star4.z = -40; TweenMax.to (star4, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "164", y: "157", z: "120", ritardo: 4); dispObj.addChild (star4); var star5: Sphere = new Sphere (star, 1); star5.z = -40; TweenMax.to (star5, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "- 164", y: "- 157", z: "148", ritardo: 4); dispObj.addChild (Star5); var star6: Sphere = new Sphere (star, 1); star6.z = -40; TweenMax.to (star6, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "- 36", y: "- 156", z: "46", ritardo: 4); dispObj.addChild (Star6); var star7: Sphere = new Sphere (star, 1); star7.z = -40; TweenMax.to (star7, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 16", y: "- 84", z: "40", ritardo: 4); dispObj.addChild (star7); var star8: Sphere = new Sphere (star, 1); star8.z = -40; TweenMax.to (star8, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "30", z: "59", ritardo: 4); dispObj.addChild (Star8); var star9: Sphere = new Sphere (star, 1); star9.z = -40; TweenMax.to (star9, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "- 134", y: "84", z: "87", ritardo: 4); dispObj.addChild (Star9); var star10: Sphere = new Sphere (star, 1); star10.z = -40; TweenMax.to (star10, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "10", y: "18", z: "49", ritardo: 4); dispObj.addChild (STAR10); var star11: Sphere = new Sphere (star, 1); star11.z = -40; TweenMax.to (star11, 4, scaleX: 5, scaleY: 5, scaleZ: 5, x: "- 84", y: "41", z: "94", ritardo: 4); dispObj.addChild (star11); var star12: Sphere = new Sphere (star, 1); star12.z = -40; TweenMax.to (star12, 4, scaleX: 3, scaleY: 3, scaleZ: 3, x: "91", y: "- 46", z: "54", delay: 4); dispObj.addChild (star12); var star13: Sphere = new Sphere (star, 1); star13.z = -40; TweenMax.to (star13, 4, scaleX: 2, scaleY: 2, scaleZ: 2, x: "88", y: "- 130", z: "180", ritardo: 4); dispObj.addChild (star13); var star14: Sphere = new Sphere (star, 1); star14.z = -40; TweenMax.to (star14, 4, scaleX: 4, scaleY: 4, scaleZ: 4, x: "134", y: "- 13", z: "102", ritardo: 4); dispObj.addChild (star14); var star15: Sphere = new Sphere (star, 1); star15.z = -40; TweenMax.to (star15, 4, scaleX: 1, scaleY: 1, scaleZ: 1, x: "- 35", y: "145", z: "61", ritardo: 4); dispObj.addChild (star15);
Questo animerà le tue stelle da un punto di partenza nascosto alle loro posizioni finali. Di nuovo, ho modificato le posizioni z delle stelle in modo che inizino all'interno della scatola.
Testiamo di nuovo il film Flash. Dovresti avere una bella transizione animata dal nulla alla terra e le stelle che esplodono fuori dalla scatola in cui le abbiamo intrappolate.
Per il coperchio della scatola che si aprirà e far esplodere la Terra e le stelle, utilizzeremo quattro immagini. Io uso un pannello di legno per cercare la mia scatola, ma sentiti libero di crearne uno tuo. Ecco le immagini che ho realizzato, scaricate questi e salvateli nell'implementazione> risorse.
Salva come top.png
Salva come bottom.png
Salva come left.png
Salva come right.png
Sotto dove impostiamo le stelle, aggiungiamo il seguente codice:
var top: Cube = new Cube (new MaterialsList (all: Top), 80, 0, 80); top.z = 0; top.y = 40; TweenMax.to (in alto, 2, rotationX: -180, delay: 2); dispObj.addChild (in alto); var bottom: Cube = new Cube (new MaterialsList (all: Bottom), 80, 0, 80); bottom.z = 0; bottom.y = -40; TweenMax.to (in basso, 2, rotationX: 180, delay: 2); dispObj.addChild (inferiore); var left: Cube = new Cube (new MaterialsList (all: Left), 80, 0, 80); left.z = 0; left.rotationZ = 90; left.x = -40; TweenMax.to (left, 2, rotationX: 180, delay: 2); dispObj.addChild (sinistra); var right: Cube = new Cube (new MaterialsList (all: Right), 80, 0, 80); right.z = 0; right.x = 40; right.rotationZ = 90; TweenMax.to (right, 2, rotationX: -180, delay: 2); dispObj.addChild (a destra);
Questo imposta tutte le parti che compongono il coperchio della scatola, le posiziona correttamente e le anima. Grandi cose.
Ogni "cubo" è impostato per avere una profondità pari a zero (il terzo argomento nel costruttore), quindi sembrano essere piani piatti.
Nella sezione materiale, aggiungi il seguente codice:
var Top: BitmapFileMaterial = new BitmapFileMaterial ("assets / top.png"); var Bottom: BitmapFileMaterial = new BitmapFileMaterial ("assets / bottom.png"); var Left: BitmapFileMaterial = new BitmapFileMaterial ("assets / left.png"); var Right: BitmapFileMaterial = new BitmapFileMaterial ("assets / right.png"); Ora il coperchio guarderà la parte. Sono sicuro che hai notato che le immagini sinistra e destra sono ruotate e poi le ruoto di nuovo nel codice al punto 14. Probabilmente ti starai chiedendo perché l'ho fatto invece di lasciare le immagini come erano. Bene, c'è una ragione per quello. Non funzioneranno correttamente a meno che non vengano ruotati. È un bug strano, ma le immagini si trasformano all'indietro durante il rendering e quando si applica un'animazione a loro, esse vanno nel modo sbagliato. Ruotarli prima e poi di nuovo nel codice li fa funzionare come dovrebbero. È piuttosto strano, ma ci vai.
Ora tutte le parti sono pronte per un altro test, è tutto a posto. Sono sicuro che stai facendo tutti i tipi di rumori di disturbo in questo momento. Meravigliosa.
Se sei come me, stai guardando questo pensiero, wow è grandioso, ma ha davvero bisogno di un po 'più di drammaticità. Bene, faremo proprio questo. Aggiungiamo un po 'di musica drammatica quando la scatola si apre.
Vai alla libreria degli effetti sonori di Hollywood Edge e scarica BrightPad.wav. (Non è incluso nel download di Source.) L'ho convertito in un MP3 chiamato "dramatic.mp3" ma puoi seguire queste istruzioni mantenendolo come un WAV.
Salvalo nella cartella deploy> assets.
Apri il file .fla e vai su File> Importa> Importa nella libreria. Importa drammatico.mp3.
Apri la tua libreria e dovresti vedere il tuo file appena importato seduto proprio lì.
Fare clic destro su di esso e fare clic su Proprietà. Seleziona la casella "Esporta per ActionScript". La casella di classe dovrebbe ora diventare attiva; digita "drammatico" senza le virgolette.
Ritorna al file .as. Nella parte superiore del file, trova il codice di importazione. Aggiungi il seguente codice di importazione:
import flash.media.SoundMixer; import flash.media.SoundChannel;
Un po 'più in basso, ci sono alcuni vars privati. Potresti ricordarlo dall'ultima volta in cui abbiamo impostato il cubo verde. Aggiungi il seguente codice alle private vars:
dramma privato var: drammatico = nuovo drammatico (); private var dramaChnl: SoundChannel = new SoundChannel ();
Ora quello che abbiamo fatto qui è quello di impostare il file audio "drammatico" e un canale audio. Il canale audio consente l'avvio e l'arresto del suono attraverso il codice.
Dal momento che vogliamo solo riprodurre il suono una volta (quando la casella si apre e non ogni volta che mostriamo il marcatore) devi inserire il seguente codice con tutto il codice di configurazione della forma. Metto il mio subito dopo aver montato il coperchio della scatola.
dramaChnl = drama.play (0,1);
Questo riproduce il suono una volta quando il coperchio si apre.
Il suono dovrebbe ora suonare e, si spera, sembrerà davvero molto drammatico.
Dovresti sentirti molto soddisfatto di te stesso adesso, hai creato qualcosa con cui impressionare i tuoi amici.
Ora arriviamo alla parte in cui rendiamo una mucca 3d che puoi tenere in mano. Prima di tutto, devi scaricare i seguenti due file, salvarli nel solito posto:
La trama, che dovresti salvare come Cow.png e il file del modello di mucca che devi salvare come cow.dae.
Nella parte superiore del file, è necessario aggiungere un'importazione. Aggiungi la seguente riga:
import org.papervision3d.objects.parsers.Collada;
Trova le private private un po 'più in basso e aggiungi quanto segue:
private var cowSkin: BitmapFileMaterial; private var cowMat: MaterialsList; mucca var privata: Collada;
Stiamo per caricare la mucca su un secondo segnalino. Questo per mostrare che questo metodo di caricamento di oggetti diversi su diversi marker è abbastanza robusto e può gestire non solo forme ma anche oggetti complessi 3D.
Ricorda nella parte precedente del tutorial, avevamo quattro marcatori su un singolo foglio di carta e creato diversi cubi colorati per ciascun marker? Stiamo per riutilizzare quel codice per permetterci di usare un indicatore separato per la mucca e la Terra.
Navigare attraverso il file fino a trovare altrimenti se (id == 1) - il controllo per il secondo marcatore.
Sostituisci tutto all'interno delle due parentesi graffe con il seguente codice:
cowMat = new MaterialsList (); cowSkin = new BitmapFileMaterial ("assets / Cow.png"); cowMat.addMaterial (Cowskin, "tutti"); // Crea il nuovo oggetto Collada con cowMat cow = new Collada ("assets / cow.dae", cowMat); cow.rotationX = 90; cow.scale = 0.5; dispObj.addChild (mucca); Sì, più test già, non è stato così veloce. Scarica e stampa il secondo marcatore. Se tutto va bene, dovresti essere l'orgoglioso proprietario di una nuova piccola mucca 3d. Congratulazioni!
È bello avere una mucca così carina, ma non sarebbe meglio se la mucca stesse a muggire?
Vai a questa directory di file da un CD chiamato, The Best of Tucows, Volume 2 - e scarica MOO.WAV. (Non è incluso nel download di origine.)
Salvalo nel solito posto come moo.wav.
Accedi al tuo file .fla e importa il file nella tua libreria. Proprio come hai fatto con l'ultimo file sonoro che hai importato, apri le sue proprietà, spunta Esporta per ActionScript e cambia la sua classe in mooSnd.
Passare alle private vars e aggiungere le seguenti righe di codice:
private var moo: mooSnd = new mooSnd (); private var mooChnl: SoundChannel = new SoundChannel ();
Ora, per questo marcatore, voglio che il suono suoni ogni volta che appare la mucca, ma suona solo una volta. Per fare ciò, è necessario aggiungere il codice per riprodurre il suono in un punto leggermente diverso rispetto a quello che abbiamo fatto l'ultima volta.
Trova questa riga nel tuo codice:
funzione privata _addCube (id: int, index: int): void
Vogliamo aggiungere il nostro codice subito dopo. Prendendo il seguente fuori dal codice di configurazione della forma, verrà riprodotto ogni volta che viene trovato l'ID piuttosto che quando la forma è impostata, cosa che accade una volta sola.
Aggiungi questo codice:
if (id == 1) mooChnl = moo.play (0, 1);
Prova il file per l'ultima volta e la mucca dovrebbe muggire. Puoi anche usare entrambi i marcatori allo stesso tempo ed essere super-swish.
Spero che ti sia piaciuto questo tutorial in due parti su Augmented Reality e spero che tu possa partire subito e creare cose molto interessanti.
