Ci siamo già occupati di Augmented Reality e del FLAR Toolkit in un articolo precedente; torniamo sull'argomento per parlare di FLARManager, un framework che semplifica l'utilizzo del toolkit e permette di creare in maniera più semplice applicazioni di realtà aumentata.
Il FLAR Manager non è una "alternativa" al FLAR Toolkit, piuttosto ne è un'estensione. I due progetti si integrano: il FLAR Manager introduce alcune nuove feature, come l'utilizzo contemporaneo di marker multipli, e semplifica la stesura del codice.
In questo articolo realizzeremo un esempio di realtà aumentata utilizzando questo framework. Ovviamente
sfrutteremo molti dei concetti dell'esempio fatto nel precedente articolo, per evitare inutili ripetizioni.
Download e setup
Anzitutto scarichiamo il framework. Si tratta di un archivio .zip al cui interno troviamo la cartella FlarManager_06 che a sua volte contiene diverse cartelle, quelli di nostro interesse sono nella cartella src, in particolare le sottocartelle com e org; quest'ultima contiene le classi del FLAR Toolkit, mentre com contiene le classi del FLAR Manager. Queste due cartelle sono indispensabili per ogni progetto dove vogliamo usare FLARManager, infatti come detto esso si integra con il FLAR Toolkit.
Per creare l'esempio utilizzeremo Flash Develop e il Flex 4 SDK, in alternativa possiamo utilizzare Flash Builder. Ciò che conta è compilare per il Flash Player 10, la versione richiesta da FLARManager.
Creiamo per prima cosa un nuovo progetto, copiamo quindi le cartelle com e org dall'archivio scaricato alla cartella src del nostro progetto, quindi creiamo una nuova classe Actionscript nel nostro progetto, che chiamiamo Esempio_FlarManager e che definiamo come estensione di Sprite.
package
{
import flash.display.Sprite;
[SWF(width='500', height='500', backgroundColor='#FFFFFF', frameRate='25')]
public class Esempio_FlarManager extends Sprite
{
public function Esempio_FlarManager() { }
}
}
Per prima cosa, inseriamo nel codice le proprietà del nostro SWF: creeremo un file di 500x500 pixel con sfondo bianco e una frequenza di 25 fotogrammi al secondo. Per farlo decoriamo la definizione della classe sfruttando il meta tag SWF.
Generazione dei marker
Abbiamo già visto nello scorso articolo come creare dei marker utilizzando l'applicazione AIR ArToolkit Marker Generator, tuttavia è disponibile un nuovo tool migliorato, ARToolKit Marker Geneator Multi, che permette di generare il marker non solo partendo dall'inquadratura della webcam, ma anche caricando l'immagine, il che consente ovviamente una maggior precisione; questa versione è fruibile anche online e permette la creazione di più marker. Possiamo anche scegliere di scaricare l'applicazione AIR e utilizzarla off line.
Quindi riutilizziamo il marker dello scorso esempio, e ne creiamo uno nuovo per mostrare come il FLARManager distingue i marker e permette di usarli anche insieme. Finchè parliamo di uno o due marker, è comodo generarli caricando direttamente le immagini nell'applicazione, ma nel caso di più marker sarà più pratico utilizzare la modalità webcam, che permette di salvare più marker in contemporanea.
Nel rilevamento dei marker, dopo aver cliccato su GetPattern, possiamo navigare tra i vari simboli con i pulsanti Prev e Next della finestra di anteprima. È possibile generare anche un ampio numero di marker, ecco un esempio:
La creazione partendo da un'immagine risulta più precisa, ma generare i pattern uno alla volta richiede più tempo specie quando i simboli sono molti.
Possiamo scegliere il numero di segmenti del marker (Marker Segments), questa opzione stabilisce in pratica la risoluzione del nostro file pattern: un valore più alto permetterà di ricavarlo più accuratamente ma richiederà maggiori calcoli, quindi conseguentemente minori performance. Sebbene il valore di default dell'applicazione sia 16x16, per i pattern semplici sembra sia più che sufficiente una risoluzione di 8x8 segmenti, che permette migliori performance e un detect comunque accurato del marker, ma noi utilizziamo la soluzione di default.
Una volta generati i due pattern, copiamoli nella cartella bin del nostro progetto, dove sarà generato l'swf, che andrà a pescare direttamente nella stessa cartella tutti i file di configurazione.
Configurazione della webcam e dei parametri
Nell'articolo precedente abbiamo già incontrato il file .dat, ovvero il file di configurazione per la webcam. Come abbiamo fatto anche in quell'occasione, copiamo un file già impostato che non è necessario modificare, ma in più impostiamo alcune opzioni grazie ad un secondo file XML.
Nell'archivio FlarManager che abbiamo scaricato, troviamo la cartella resources che contiene alcune risorse utili per impostare il progetto. Nella sottocartella flar ci sono il file di configurazione della webcam (FLARCameraParams.dat) e il file di configurazione del FLARManager (flarConfig.xml), li copiamo entrambi nella nostra cartella bin.
Personalizzazione del file di configurazione
Apriamo il file flarConfig.xml. Le prime righe di codice riguardano la configurazione della webcam e dello stage, troviamo infatti i valori sourceWidth, sourceHeight, displayWidth, displayHeight e framerate. Il nostro stage è di 500x500 pixel, quindi modifichiamo i valori di altezza e larghezza, possiamo anche impostare il framerate a 25.
La seconda serie di valori è relativa alle impostazioni del FLARManager, come:
- mirrorDisplay - mostra l'immagine specchiata. È utile lasciarlo a
true, infatti la ripresa della webcam vede le immagini riflesse di 180 gradi. - smoothing - permette una maggior qualità degli oggetti 3D generati dal FLARManager in quanto attenua gli spigoli e i bordi degli oggetti
Lasciamo per ora i valori di default e passiamo a personalizzare le sezioni successive.
Troviamo il parametro cameraParamsFile, che contiene il percorso del file .dat. Essendo i file XML e dat nella stessa cartella, possiamo modificare il valore in questo modo:
<cameraParamsFile path="FLARCameraParams.dat" />L'ultima sezione è relativa ai pattern, in questa lista specificheremo infatti i percorsi dei file .pat che il FLARManager dovrà poter rilevare, di default ci sono 12 valori ma poi abbiamo solo 2 pattern, anch'essi nella stessa cartella del file XML, possiamo quindi modificare in questo modo le linee di codice:
<patterns resolution="16"
patternToBorderRatio="0.5"
minConfidence="0.5">
<pattern path="marker_htmlit.pat" />
<pattern path="marker_flash.pat" />
</patterns>Esaminiamo i valori dei parametri, sono gli stessi che abbiamo impostato nella creazione dei markers. È importante che i valori coincidano, altrimenti può non funzionare nulla.
| Parametro | Descrizione |
|---|---|
resolution |
È la risoluzione che abbiamo impostato su MarkerGenerator |
patternToBorderRatioe minConfidence |
Anche qui replichiamo la scelta fatta sul generatore |
Creazione del codice Actionscript
A questo punto abbiamo tutto il necessario: abbiamo creato i marker, abbiamo impostato il file di configurazione della webcam e abbiamo le impostazioni di configurazione per il FLARManager: passiamo finalmente alla creazione del nostro codice ActionScript.
Ovviamente dobbiamo importare la classe FLARManager, crearne un'istanza e inizializzarla. Noteremo che il costruttore del FLARManager richiede come parametro il percorso del file di configurazione
Avendo copiato il file XML nella cartella bin del nostro progetto, possiamo scrivere direttamente il nome del file XML.
public class Esempio_FlarManager extends Sprite
{
// creiamo una variabile di riferimento per il FLAR Manager
private var flar:FLARManager;
public function Esempio_FlarManager()
{
// avviamo la funzione creaFLAR
creaFLAR();
}
private function creaFLAR():void
{
// creiamo l'istanza del FLARMAnager
flar = new FLARManager("flarConfig.xml");
}
}
Una volta inizializzato il FLARManager, è necessario mostrare l'immagine ricavata dalla webcam. In questo caso il codice è molto più semplice di quanto avveniva con il solo FLARToolkit, ci basta infatti aggiungere alla displayList l'oggetto flarSource del flarManager, convertendolo prima in Sprite, così
addChild(Sprite(flar.flarSource))
Mandiamo in esecuzione il filmato e diamogli il permesso di accedere alla webcam, dovremmo visualizzare l'immagine ottenuta dalla webcam: il numero di righe di codice usate è di gran lunga inferiore a quello necessario con il solo FLAR Toolkit.
Rispondere agli eventi del FLARManager
Uno dei vantaggi del FLARManager è l'ottimo uso degli eventi, possiamo utilizzare il comando addEventListener per intercettare, ad esempio, l'aggiunta e la rimozione di un marker. Con "aggiunta" e "rimozione" intendiamo ovviamente riferirci all'immagine della webcam: quando un marker entra nell'inquadratura, avremo un evento di aggiunta (MARKER_ADDED), mentre se esce dal campo visivo della webcam, viene lanciato l'evento di rimozione (MARKER_REMOVED).
C'è anche un terzo evento, ovvero l'aggiornamento del marker (MARKER_UPDATED): viene lanciato quando il marker è all'interno dell'inquadratura e viene mosso.
Troviamo questi eventi nella classe FLARMarkerEvent. Iniziamo a impostare i primi due eventi, modificando la funzione creaFLAR in questo modo:
private function creaFLAR():void
{
// creiamo l'istanza del FLARMAnager
flar = new FLARManager("flarConfig.xml");
flar.addEventListener(FLARMarkerEvent.MARKER_ADDED, markerAggiunto);
flar.addEventListener(FLARMarkerEvent.MARKER_REMOVED,markerRmosso);
addChild(Sprite(flar.flarSource));
}
Creiamo quindi le corrispondenti funzioni markerAggiunto e markerRimosso. Per il momento tracciamo semplicemente un messaggio per verificare il corretto funzionamento.
private function markerAggiunto(evt:FLARMarkerEvent):void
{
trace("Aggiunto marker");
}
private function markerRimosso(evt:FLARMarkerEvent):void
{
trace("Rimosso marker");
}
Avviamo il nostro filmato e proviamo a inquadrare i marker e se tutto è impostato correttamente vedremo tracciati i messaggi di aggiunta e rimozione.
Rilevare quale marker è inquadrato
Al momento il messaggio di aggiunta e rimozione è il medesimo per entrambi i marker, ma abbiamo visto nel codice che i gestori degli eventi associati al FLARManager prevedono un parametro di tipo FLARMarkerEvent, questo oggetto contiene alcune proprietà tra cui l'identificativo del pattern, basterà quindi cambiare il nostro codice come di seguito per ottenere un messaggio diverso a seconda del pattern inquadrato.
private function markerAggiunto(evt:FLARMarkerEvent):void
{
trace("Aggiunto marker" + evt.marker.patternId.toString());
}
private function markerRimosso(evt:FLARMarkerEvent):void
{
trace("Rimosso marker" + evt.marker.patternId.toString());
}
