Riconoscimento multi-marker con AR.js

In questo breve tutorial mostro come risolvere in maniera semplice un problema ricorrente in una delle più tipiche applicazioni della realtà aumentata: attivare contenuti aggiuntivi differenti in sezioni diverse di un libro, una brochure o qualsiasi altro materiale cartaceo. In realtà, questa soluzione si applica a tutte le situazioni, nelle quali sia richiesto che la nostra app in AR sia in grado di riconoscere marcatori diversi.

Perché AR.js?

Esistono ormai una pletora di app e framework proprietari che consentono di creare esperienze in realtà aumentata e che vanno a coprire un po’ tutti i gusti e le possibilità finanziarie. Pur essendoci tra di esse alcune soluzioni veramente potenti e affidabili, a partire da Unity 3D, al CRHACK LAB F4D preferiamo seguire la strada della WebAR e affidarci alla libreria javascript open-source AR.js. Le ragioni per questa scelta sono molteplici e ci torneremo in un post specifico, ma in sintesi si possono ricondurre alle seguenti:

  • L’approccio WebAR svincola dal ricorso agli store proprietari per la distribuzione delle esperienze. Nel nostro caso d’uso gli store rappresentano solo una barriera d’ingresso per l’utente senza offrire i vantaggi che invece per altri tipi di applicazione indubbiamente hanno.
  • AR.js è una libreria open-source sostenuta da una comunità ben avviata e non espone ai rischi di improvvisa sparizione dal mercato di soluzioni supportate da startup finanziate da venture capital o da grandi imprese poco convinte dell’investimento. Purtroppo c’è una lista già sin troppo lunga di episodi del genere (Aurasma/HP Reveal, Torch, Meta 2, Blippar…).
  • Anche se AR.js manca ancora di alcune feature avanzate molto importanti, tuttavia, appoggiandosi alla libreria A-Frame di Mozilla, permette di sviluppare in maniera semplice e veloce soluzioni efficaci in ambito didattico. Con il bonus ulteriore di essere costruita su HTML5/CSS/Javascript: così standard che più standard non si può.
  • Ultima ragione, ma non per importanza, da qualche mese la comunità di AR.js ha rilasciato AR.js Studio, che consente di creare in pochi secondi una WebAR app elementare, ma perfettamente funzionante sia nella tipologia con marcatore che markerless geo-localizzata.

A chi non piacciono le bandiere?

Per imparare come utilizzare il meccanismo di riconoscimento multi-marker di AR.js, realizzeremo una semplice webApp in grado di distinguere tre diversi marcatori e di associare una bandiera diversa a ciascuno di essi. In pratica, l’utente caricherà questa pagina web e, dopo aver autorizzato l’uso della telecamera, si potrà divertire a puntarla sui tre marcatori sottostanti. A ciascuno di essi verrà sovrapposta una bandiera diversa. Rivoluzionario! 🙂

Per questo tutorial abbiamo creato i tre trigger ad hoc soprastanti con lo scopo di fornire esempi di marcatori efficaci, costruiti secondo le linee guida suggerite dal team di AR.js Studio.

Riconosciamo un marcatore

Cominciamo dal caso semplice e costruiamo una WebAR che ci consenta di riconoscere il primo dei tre marcatori e di fargli apparire sopra una bandiera, nel momento in cui lo inquadriamo con la telecamera del nostro smartphone. Il modo più semplice per farlo è ricorrere ad AR.js Studio.

Il primo passo richiesto è quello di scegliere tra una esperienza geolocalizzata e una attivabile tramite un marcatore. Nel nostro caso, ovviamente, scegliamo la seconda come mostrato in figura.

Il secondo passo ci richiede se scegliere di utilizzare un marcatore standard o caricarne uno personalizzato. Usando il familiare modulo di upload file, carichiamo il primo dei tre marcatori, che avremo preparato precedentemente con un qualsiasi programma che consenta di generare un file .png o .jpg. Il risultato è quello che si può osservare nella figura sottostante.

Si noti che la spessa cornice nera viene aggiunta automaticamente da AR.js Studio e quindi basta caricare una grafica quadrata a fondo bianco per creare il proprio marcatore. Non scordatevi di scaricare il marker: senza la cornice nera non verrà riconosciuto!

Terzo passo: caricare il contenuto che si vuol fare apparire quando il marcatore viene inquadrato. Sono ammesse immagini, video e oggetti 3D preparati nei formati standard più comuni, come si vede nella figura sottostante. Di nuovo, tutto quello che c’è da fare è caricare il file.

A questo punto non resta che scegliere se creare automaticamente un sito gratuito su GitHub Pages o scaricare i file sul proprio computer per pubblicarli da qualche altra parte o modificarli. È quello che faremo noi.

Tutto qui. Se scegliessimo di pubblicare su GitHub avremmo già finito: creare una esperienza webAR con AR.js Studio è di una semplicità disarmante. Tuttavia, creare una esperienza in grado di riconoscere un solo marcatore ha una utilità molto limitata. Perciò, abbiamo bisogno di un passaggio ulteriore.

Analizziamo il codice

AR.js Studio genera un file AR.zip scaricabile sul nostro computer. L’archivio contiene il file principale index.html e una cartella assets.

La cartella assets contiene i file asset.png e marker.patt. Non insulto la vostra intelligenza spiegandovi cosa siano.

Il file index.html è quello che ci interessa di più.

AR.js estende la sintassi della libreria A-Frame della Mozilla Foundation e pertanto non sorprende di trovare la tipica struttura gerarchica tag-based di quest’ultima.

Trattare A-Frame va oltre gli scopi di questo tutorial. D’altro canto, da quando in qua per fare copia&incolla c’è bisogno di capire? 🙂 Mi limito a commentare che la pagina contiene una scena (<a-scene>…</a-scene>), che al suo interno contiene un marcatore (<a-marker>…</a-marker>) e una camera (<a-entity camera>…<a-entity>). Per i nostri scopi non abbiamo bisogno di modificare né i parametri del tag <a-scene> né la camera. Ci interessa invece molto analizzare <a-marker>, perché è lì che avviene la magia.

Osserviamo che:

  1. <a-marker> è un tag specifico di AR.js che estende la libreria A-Frame. La sua sintassi decide il funzionamento della esperienza AR. In questo primo tutorial notiamo solo che la componente url dice al sistema dove andare a trovare il marcatore da riconoscere.
  2. Nella tipica struttura a scatole cinesi di A-Frame <a-marker></a-marker> incapsula un marcatore <a-image>, la cui funzione è quella di disegnare a video l’immagine puntata dalla componente src. La nostra bandiera salvata nella cartella assets, nel caso specifico.
  3. Se il marcatore viene riconosciuto, allora tutti i tag che incapsula verranno visualizzati. Nel nostro caso verrà disegnata a schermo la bandiera. Se il marcatore non viene riconosciuto, il motore di rendering del browser passa avanti senza fare nulla.

Semplice ed efficace.

Creiamo un’esperienza multi-marker!

A questo punto dovreste aver intuito cosa si deve fare per creare la nostra esperienza multi-marker. Bastano tre passaggi:

  1. Tornate su AR.js Studio e generate altri due progetti analoghi al primo, utilizzando le altre due coppie di marcatori e bandiere.
  2. Aprite i due file zip generati, rinominate come volete i file .png e .patt e copiateli nella cartella assets della prima esperienza.
  3. Aprite il file index.html della prima esperienza, create due copie del tag <a-marker>…</a-marker> e modificate le loro proprietà id e url in modo da assegnare loro un identificativo univoco e farli puntare rispettivamente ai due marker aggiuntivi. Per concludere modificate la proprietà src dei tag <a-image> incapsulati in modo che puntino alle immagini delle bandiere desiderate.

Tutto qui. Più semplice a farsi che a dirsi. Il codice completo e gli asset li trovate in questo file .zip. Al suo interno trovate anche i tre trigger per vostra comodità.

Se volete vedere questa rivoluzionaria webAR app in azione dal vivo, visitate la pagina https://crowddreaminganew.world/tutorials/mmt dal browser del vostro smartphone o usate il qr-code sottostante.

Una volta concesso il permesso di usare la telecamera, scorrete questa pagina per tornare ai trigger e… buon divertimento!