Share
La realtà aumentata è cresciuta molto ultimamente, in particolare l'AR basato su Flash. Ti guiderò attraverso come creare alcuni effetti semplici ma accurati che puoi inserire nel tuo sito web.
La realtà aumentata è stata giudicata una delle tendenze più calde del 2010. Il concetto alla base di questo è piuttosto semplice, sovrapporre il mondo fisico a una grafica interessante che sembra occupare lo stesso spazio di te.
Molte aziende lo hanno usato come un ottimo strumento promozionale. Le Adidas di recente le hanno messe sulle scarpe e hanno creato un gioco molto bello.
Lego lo usa come un modo per visualizzare come saranno i loro prodotti quando hai finito di costruirli.
Alcuni freelance lo usano come un biglietto da visita e uno strumento promozionale molto interessanti. AR ti consente di creare un biglietto da visita più impressionante senza alcun costo e puoi adattarti a maggiori informazioni su di esso.
Nel gennaio di quest'anno ho completato un progetto per l'università in cui ho creato un sistema di realtà aumentata indossabile. Presenta una galleria virtuale che, mentre giravi, raccontava una storia molto tragica.
Guarda il video su Youtube.
Mi sono avvicinato alla creazione di AR da un punto di vista del design, sapendo molto poco sulla codifica in AS3. Sono qui per condividere ciò che ho imparato con te poiché ho trovato molto difficile per i principianti imparare qualcosa sull'argomento. Era solo una questione di iniziare tutto da zero.
Ora sono sicuro che sei pieno di idee su cose da creare, creiamo il tuo primo progetto di realtà aumentata: aggiungendo profondità a un pezzo di carta piatto.
flARToolkit è la versione flash della libreria di realtà aumentata codificata in C nota semplicemente come ARToolkit. È stato convertito da un programmatore giapponese molto abile conosciuto come saqoosha. Fa tutti i tipi di cose pazze con la realtà aumentata e se puoi leggere il giapponese o sei disposto a guadare un sacco di post che a malapena hanno senso quando tradotti, allora puoi imparare molto da lui. Ha creato il famigerato effetto "buco nel muro" che è dimostrato nel progetto di celebrazione del Capodanno che ha creato per dare il benvenuto nel 2009.
Più di recente, ha dimostrato di poter collegare insieme vari marcatori e altri meravigliosi effetti che avrei potuto solo sognare di creare.
Squidder.com ha modificato una libreria flARToolkit esistente, la classe flARManager, per essere in grado di gestire eventi e oggetti multipli. È interessante notare che pubblicano il loro codice sorgente e un cosiddetto "come fare", ma in realtà non spiegano mai il proprio codice. Mi ci è voluto un po 'di tempo per capire come ottenere più oggetti che potrebbero essere tutti diversi. Vorrei sottolineare ora che sono un designer prima e la codifica è il risultato del voler fare cose folli. Mi sono avvicinato a questo, volendo che il risultato finale funzionasse piuttosto che preoccuparmi dei modi migliori per codificare le cose.
Scarichiamo il codice dal loro post originale sull'argomento e diamo un'occhiata.
Modifica: Squidder.com è attualmente inattivo; usa invece questo link: http://kablamo.co.uk/flarsquidderkit.zip
Scarica il file "flarsquidderkit.zip", estrai il file .zip e apri la cartella principale. Nota, se non estrai la cartella .zip, non sarai in grado di aprire correttamente il file .swf o modificare i file che ti servono. Quindi una volta fatto, vedrai 3 cartelle chiave: deploy, fla e src. Vedrai anche un file chiamato "flardrums.pdf".
Abbiamo i nostri marcatori per ora, li stampiamo in modo che possiamo testarlo e vedere come funziona attualmente la fonte.
Apri la cartella di distribuzione e apri MultiFLARExample.swf. Accetta la webcam e inizia a giocare con i marcatori.
In una demo video che hanno creato, si passa la mano su ciascun marcatore individualmente e si vede come fanno i suoni quando spariscono. Questo è stato scritto da Squidder. Hanno aggiunto due eventi, MARKER_ADDED e MARKER_REMOVED. Esploreremo come utilizzare questi eventi in seguito.
Ora sapete come appare attualmente, passiamo a modificare il loro codice sorgente per fare alcune cose interessanti.
Per questo tutorial, presumo tu abbia una conoscenza di base di AS3 e fogli di classe.
Aprire la cartella \ fla \ e quindi fare doppio clic su "multiFLARExample.fla". Nel pannello delle proprietà dovresti vedere la casella della classe riempita con MultiFLARExample. Dovrai fare clic sull'icona a forma di matita accanto alla casella della classe in modo da poter iniziare a guardare il codice.
Immediatamente vedrai il solito codice di importazione nella parte superiore e sotto alcune variabili di base per le fonti di luce.
La prossima è una parte interessante, il codice che carica nei marcatori. Come puoi vedere, i marcatori sono caricati in un array in modo che possano essere richiamati facilmente in seguito. Presta attenzione all'ordine in cui sono stati caricati qui. Il primo marker dell'array ottiene l'id di 0, il successivo è 1 e così via. Utilizzeremo questi id in seguito.
Guarda anche le funzioni private _addCube e _getFlatMaterial in quanto queste sono le altre due sezioni su cui ci concentreremo oggi sul montaggio. Sono piuttosto auto-esplicativi in quello che fanno, ma sono stranamente impostati. Sono stati codificati per semplicità nell'ottenere lo stesso oggetto in più colori, piuttosto che molti oggetti diversi, quindi dobbiamo apportare alcune modifiche.
Ok, cambiamo un po 'di codice. Modifichiamolo in uno stato più utilizzabile, ma per ora manterremo lo stesso aspetto visivo. Quando stavo pensando a tutto questo, è stato un sollievo strano scoprire che tutto si riduceva a Se dichiarazioni alla fine. Se le affermazioni sono così magiche e utili quando si tratta di programmare le cose.
Nel _addCube la funzione sostituisce questo codice:
var cube: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40); cube.z = 20; dispObj.addChild (cube);
con il seguente codice:
if (id == 0) var cube: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40); cube.z = 60; dispObj.addChild (cube); else if (id == 1) var cube2: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40); cube2.z = 0; dispObj.addChild (cube2); else if (id == 2) var cube3: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40); cube3.z = 20; dispObj.addChild (cube3); else if (id == 3) var cube4: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40); cube4.z = 40; dispObj.addChild (cube4);
Ora, questo potrebbe sembrare un modo complicato per gestire i cubi, ma ci consente di gestire ogni singolo cubo. Ad esempio, nel codice sopra, ho modificato l'asse z dei cubi per dimostrare che il codice gestisce ora ogni cubo come oggetto proprio. Proviamo il film, dovresti avere qualcosa in questo senso:
Prima di continuare, lasciami spiegare il codice che hai appena inserito. È piuttosto semplice e se hai usato papervision3D prima di saltare questa parte.
var cube: Cube = new Cube (new MaterialsList (all: fmat), 40, 40, 40);
Qui creiamo una nuova variabile, cubo. Questa variabile contiene tutte le informazioni necessarie per eseguire il rendering di un cubo e determinarne l'aspetto. Il MaterialsList parte si riferisce al materiale utilizzato per l'esterno del cubo. Dal momento che vogliamo lo stesso materiale su ogni lato e che il materiale è contenuto in una variabile creata precedentemente nel codice, usiamo all: fmat. Parlerò di più sulla variabile fmat più tardi. Infine, i tre anni '40, queste sono le dimensioni del cubo, la larghezza, l'altezza e la profondità. Ovviamente non devono essere tutti uguali anche se questo è un cubo. Se lo desideri, puoi utilizzare il metodo cubo per creare forme rettangolari cuboidali.
cube.z = 20;
Questo imposta il valore z del cubo. Questo è quanto in alto il cubo si trova sopra il marcatore. 0 è la linea centrale del cubo e quindi impostarlo a metà dell'altezza della forma significa che si trova esattamente sopra il marcatore.
dispObj.addChild (cube);
dispObj fa riferimento a un oggetto di visualizzazione creato in precedenza nel codice. Un oggetto di visualizzazione renderà il tuo oggetto sullo schermo. Puoi caricare tutte le forme che desideri all'interno di un oggetto di visualizzazione, quindi per il momento caricheremo tutte le nostre forme.
Brillante, ora che sai come funziona, continuiamo a modificare il codice. Non hai davvero bisogno del _getFlatShadeMaterial funzione quindi cerchiamo di modificare tutto insieme, noi. Facendolo in questo modo ci permette anche di dare un materiale diverso a ciascun oggetto.
Dovresti trovare questa riga nel tuo codice:
Ora stiamo andando a modificare il fmat variabile in modo che invece di chiamare una funzione, chiamerà un nuovo flatShadeMaterial dove specificiamo i colori. Più avanti mi occuperò di altri materiali, inclusi i materiali bitmap.
Sostituire _getFlatMaterial (id); con:
nuovo FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e);
I tre parametri impostano l'origine della luce per flatShadeMaterial, il colore piatto e anche il colore della sfumatura. Fare questo darà al nostro oggetto un effetto più realistico mentre lo ruotiamo e lo ruotiamo nello spazio fisico.
Ora, sotto quella linea vorremmo aggiungere:
var fmat2: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint, 0x00ff00, 0x113311); var fmat3: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); var fmat4: FlatShadeMaterial = new FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
Ora che abbiamo creato una variabile per ciascuno dei nostri oggetti, vorremmo cambiare il codice del cubo che ti ho dato in precedenza. Invece di avere solo fmat come materiale per tutti i nostri cubi, ti consigliamo di cambiarlo fmat, fmat2, fmat3 e fmat4 in modo che i nostri cubi appaiano diversi.
Dopo averlo fatto, ora puoi finalmente rimuovere il _getFlatMaterial funzione.
Elimina le seguenti righe di codice:
funzione privata _getFlatMaterial (id: int): FlatShadeMaterial if (id == 0) return new FlatShadeMaterial (_lightPoint, 0xff22aa, 0x75104e); else if (id == 1) return new FlatShadeMaterial (_lightPoint, 0x00ff00, 0x113311); else if (id == 2) return new FlatShadeMaterial (_lightPoint, 0x0000ff, 0x111133); else return new FlatShadeMaterial (_lightPoint, 0x777777, 0x111111);
E ora proviamo di nuovo. Se tutto è fatto correttamente, dovrebbe apparire esattamente lo stesso. Che risultato, eh?
Potrebbe non sembrare molto, ma abbiamo appena creato le basi per creare molti oggetti dall'aspetto diverso.
Ok, passiamo a qualcosa di un po 'più utile. Il materiale bitmap. La maggior parte delle persone vorrebbe mettere le proprie immagini in AR come un modo interessante per presentare il proprio lavoro; questo si ottiene usando un'immagine come materiale.
È straordinariamente semplice. Ho creato l'immagine seguente da utilizzare, poiché ti mostrerò come utilizzare il materiale bitmap attraverso un collegamento web.
In primo luogo, è necessario importare il BitmapFileMaterial classe. Nella parte superiore del tuo foglio di codice in cui sono importate tutte le altre classi, aggiungi la seguente riga:
import org.papervision3d.materials.BitmapFileMaterial;
e cambia il tuo materiale fmat al seguente:
Accentsconagua
var fmat: BitmapFileMaterial = new BitmapFileMaterial ("http://kablamo.co.uk/artutorial/kcube1.jpg"); Ora proviamolo, dovrebbe assomigliare a questo:
Com'era semplice?
Ora che ti ho mostrato come creare un cubo che si trova sopra l'indicatore, creiamo un cubo che si trova sotto l'indicatore per creare il buco nel muro effetto.
Questo effetto è stato originariamente immaginato e spiegato da saqoosha. Sfortunatamente, lo ha spiegato in giapponese e per papervision3d invece che per l'uso con flARToolkit sono state apportate alcune modifiche.
Devi importare queste due classi:
import flash.geom.ColorTransform; import flash.filters. *;
Aggiungi questa riga sotto _lightpoint con le altre variabili private:
private var _green: Cube;
e poi sotto var dispObj: DisplayObject3D = new DisplayObject3D (); aggiungere il seguente:
this.viewport.filters = [new ColorMatrixFilter ([1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 1, -1, 1, 1, 0])];
Fondamentalmente, quello che sta succedendo qui è che avrai due cubi, uno verde e l'altro che forma la vista interna. Si siederanno l'uno dentro l'altro. Il filtro della vista maschererà tutto ciò che è quel particolare colore verde, che è ciò a cui impostiamo il cubo esterno, dando l'effetto che c'è un buco nell'indicatore.
Ora creeremo i due cubi.
Rimuovi il tuo codice cubo esistente e sostituiscilo con questo:
var hole: Cube = dispObj.addChild (new Cube (new MaterialsList (all: new BitmapFileMaterial ("assets / hole.jpg"), in basso: nuovo BitmapFileMaterial ("assets / k.jpg")), 80, 80, 80,1,1,1, Cube.ALL, Cube.TOP)) come Cube; this._green = dispObj.addChild (new Cube (new MaterialsList (all: new ColorMaterial (0x00ff00)), 80, 80,80, 1, 1, 1, Cube.TOP)) come Cube; hole.rotationX = this._green.rotationX = 90; hole.z = this._green.z = -40; Nota, per i materiali che importiamo in due file .jpg dalla cartella delle risorse. Questa cartella si trova all'interno della cartella di distribuzione principale, dove viene trovato il file MultiFLARExample.swf. Puoi scaricare le seguenti immagini che ho creato o creare da te.
Fai un test e dovresti avere qualcosa del genere:
Ormai, probabilmente sei stufo di tenere in mano un pezzo di carta ratto con quattro pennarelli. Vuoi avere il tuo pennarello, quindi facciamolo. Con alcuni strumenti online e Photoshop, puoi avere il tuo pennarello in pochi minuti.
Per prima cosa, facciamo il tuo segno. Non è necessario utilizzare un design simile a un codice a barre come sugli indicatori attualmente in uso, ma, se si utilizzano molti indicatori, il codice a barre è la soluzione migliore. Se ne stai usando uno o due, impazzisci con il design. Per il mio design di pennarelli, ho usato la K dal logo del mio sito web.
Se lo stai facendo per un biglietto da visita o un materiale promozionale, pensa a come appare il marcatore dato che puoi creare dei marcatori molto belli che si fondono nel design più.
È necessario impostare il documento di Photoshop pronto per la creazione del marker. Per un marker di base, crea un file 800x800px con un bordo 150px tutto intorno. O scarica questa immagine qui sotto:
Il quadrato bianco nel mezzo è dove puoi mettere il tuo disegno di marcatore. Stampa il marcatore e poi visita il generatore di marker online.
Hanno un creatore di marker online che prende il tuo pennarello e crea un file .pat che funziona con il tuo codice. È piuttosto strano, hanno un'opzione di caricamento ma non l'ho mai fatto funzionare (la stampa funziona bene). C'è anche un'app AIR che fa lo stesso lavoro, ma per ora va bene.
Imposta i segmenti dei marker su 16x16 e le dimensioni dell'indicatore sul 50%, mostra il tuo marker sulla tua webcam e quando un quadrato rosso circonda il tuo marker clicca su get pattern, se sei soddisfatto di come appare nella finestra di anteprima clicca save.
Se il tuo segnaposto appare davvero strano nell'anteprima o non viene visualizzato un quadrato rosso, potrebbe essere necessario riprogettare il tuo segnalino. Devi anche assicurarti che ci sia dello spazio bianco intorno al tuo marcatore, altrimenti Flash non lo riconoscerà.
Quando viene visualizzata la finestra di dialogo, non limitarti a scaricarla ovunque, devi inserire il file .pat in una cartella specifica. Passare alla cartella flARToolkit> deploy> assets> flar e dovresti trovare altri quattro file .pat. Salva il tuo schema lì e ricorda quello che hai chiamato. Ho chiamato il mio "kmarker.pat"
Torna in flash, trova questa riga:
E cambia crash.pat a qualunque cosa hai chiamato il tuo marcatore.
Se esegui il test del tuo file Flash, dovresti scoprire che il tuo nuovo marcatore seleziona tutto perfettamente.
Grazie per aver letto questa introduzione alla realtà aumentata. Spero che ti sia piaciuto e che ti abbia reso curioso di creare i tuoi progetti AR. Nella prossima parte di questo tutorial, descriverò come animare gli oggetti con TweenMax, rendendo i marcatori un po 'più suono di gioco, importando modelli 3D e rendendo tutto più carino.
