AR.js — Quando il web incontra la Realtà Aumentata
Una panoramica su AR.js, al momento la libreria più promettente per la Realtà Aumentata sul Web. Anche Cross Browser.
--
Also available in English.
Un’altra libreria web AR?
Per chi non la conoscesse ancora, AR.js è un interessantissimo progetto Open Source che rende possibile sviluppare applicazioni per la Realtà Aumentata (abbreviato “AR”) con tecnologie web. Con poche semplici linee di codice Javascript, HTML e modelli 3D è praticamente immediato fornire un’esperienza AR tramite una web-app.
Schematicamente, i punti forza di AR.js sono rappresentati da:
- Ottime performance anche su dispositivi ormai datati, ~60 FPS su smartphone Android di circa 2 anni fa (!)
- Ottima compatibilità: utilizzando tecnologie web come webgl e webrtc ormai standard, è stata resa possibile la fruizione praticamente su ogni Android in circolazione e su dispositivi iOS aggiornati alla versione 11
- Facilità d’uso: è un layer tecnologico aggiuntivo che rende ancora più immediato lo sviluppo. Si basa su framework e librerie già note come a-frame e three.js.
Non abbiamo quindi bisogno di utilizzare Hololens, Cardboard o smartphone di ultima generazione: basta collegarsi con il proprio dispositivo all’indirizzo di una web-app AR.js per un’esperienza di Realtà Aumentata.
Ciò è possibile grazie all’utilizzo dei ‘markers’, ovvero il principio su cui si basa AR.js (è possibile, in realtà, utilizzare AR.js anche con Project Tango, ma ciò rende più complessa la fruizione cross-browser).
Marker
I marker sono una sorta di qr code semplificati. In AR.js definiamo una specifica scena 3D per ogni diverso marker, di modo che quando l’utente con la propria fotocamera inquadra un marker, la corrispondente scena viene mostrata a schermo sopra (o vicino) ad esso. I marker inoltre possono contenere QR Code al loro interno, o essere inseriti all’interno di un QR Code.
I passi per realizzare un’applicazione base con AR.js sono i seguenti:
- Partendo da un’immagine, si utilizza un tool per creare un marker, ad esempio, di tipo pattern: verrà generata un’altra immagine (marker visivo) e il marker utilizzato da AR.js (file “.patt”)
- Nella web-app va referenziato il marker appena generato e specificata una scena 3D collegata ad esso
- Ci si collega all’indirizzo dove è pubblicata la web-app da un dispositivo (ad esempio uno smartphone)
- Dal dispositivo, si inquadra (tramite fotocamera utilizzata dal browser) il marker stampato su carta o visualizzato su un altro display
- Visualizzando nell’app, tramite la fotocamera, la realtà che ci circonda, e inquadrando il marker, apparirà a schermo la scena 3D nel punto esatto in cui il marker è situato.
Entrando nel merito dei marker, ne esistono di diversi tipi. I principali sono di tipo ‘pattern’ e ‘barcode’.
Pattern Marker
Una feature fondamentale di AR.js è la possibilità di utilizzare marker custom, generati a seconda delle nostre esigenze. Dopo alcune ricerche sui limiti dei marker personalizzati, possiamo listare una serie di caratteristiche che definiscono i marker custom:
- La risoluzione massima di un marker è 16x16 pixel
- Devono essere di forma quadrata
- Non possono contenere colori, ma soltanto scala di grigi, con alti contrasti. In genere un colore scuro (nero) ed uno più chiaro
- Per un miglior riconoscimento da parte della fotocamera, è meglio realizzare marker dove il colore più chiaro non sia bianco o trasparente (un grigio “light” come #F0F0F0 funziona perfettamente)
- Devono contenere del testo semplice, come una singola lettera o numero, o un simbolo.
È possibile usare questo tool online per generare marker custom. Il tool genera un’immagine, il marker da stampare/mostrare, e un file “.patt”; se si analizza quest’ultimo, si può notare che il pattern generato è un insieme di caratteri che riproduce la forma, a grandi linee, dell’immagine originale fornita in input. Per questo, come già sottolineato, per ottenere i risultati migliori è consigliato usare immagini molto differenti per diversi marker, ed evitare di generare marker partendo da immagini troppo complesse o contenenti parole o testi.
Barcode Marker
I marker possono anche essere di tipo ‘barcode’. Essi, sebbene il nome ricordi i classici codici a barre, rappresentano in realtà un solo numero, reso graficamente come un simbolo.
Il processo di generazione dei barcode marker è noto in letteratura e si basa su una serie di calcoli con matrici; in generale, per facilitare il riconoscimento del marker da parte della fotocamera, è opportuno scegliere delle matrici con una Distanza di Hamming elevata (si veda questa tabella per ulteriori dettagli).
Inoltre, le matrici sono caratterizzate anche da un numero massimo di barcode generabili; ad esempio, la matrice “AR_MATRIX_CODE_3x3_PARITY65” può arrivare a generare fino a 32 diversi barcode marker. Anche nei barcode marker vige la regola empirica dell’evitare, se possibile, l’utilizzo di colori bianco/trasparente assieme al nero. Impossibile anche qua l’utilizzo di altri colori oltre i due citati.
Come per i marker pattern, anche per i barcode pattern esistono diversi tool online che ne generano partendo da immagini in ingresso: uno fra i tanti, che consiglio, si trova a questo indirizzo.
AR.js in azione
Di seguito è possibile osservare un esempio completo di applicazione AR basata su AR.js con differenti marker in campo.
Analizzando questo HTML possiamo osservare:
- L’import delle librerie AR.js (si vedano le linee 6–8 del sorgente)
- La dichiarazione dell’utilizzo di una Barcode Marker precedentemente generato da una matrice 3x3, di modo che AR.js riesca a riprodurre il marker per effettuare il match (linea 12)
- La definizione di diversi marker (“<a-marker>”) di tipo barcode, per mostrare diverse scene 3D (linee dalla 18 alla 27)
- La definizione di una entità ‘camera’ di tipo statico (linea 30).
AR.js presenta alcuni problemi ancora aperti con i marker custom, che si risolvono con i seguenti workaround, personalmente testati:
- Utilizzare l’ultima versione di AR.js (1.5.5)
- Per referenziare il file “.patt” negli <a-marker> utilizzare l’attributo “url” con un riferimento remoto alla risorsa
- Fare riferimento a tutte le regole e caratteristiche elencate in questo articolo per le immagini in input nella generazione di marker custom.
I marker nel dettaglio
I Barcode marker sono marker generati con tecniche standard: questo permette di ottenere marker semplici e difficilmente confondibili con altri, ma allo stesso tempo essi hanno un limite nella personalizzazione e nel numero di marker generabili. Sono consigliati in tutti quei casi in cui non si ha un numero elevato di diversi marker da mostrare in un determinato contesto, e quando la grafica dei barcode è accettabile.
D’altro canto, l’utilizzo di marker di tipo pattern ha il vantaggio di lasciare più libertà di personalizzazione nella grafica dei marker, ma tale libertà rende più probabile la generazione di marker confondibili da parte della fotocamera.
Ad esempio, entrambe le immagini seguenti mostrano il risultato della generazione di un pattern marker partendo da un’immagine: l’immagine in questione era nel primo caso un testo contenente “RED”, nel secondo caso “BLUE”. Nella parte sinistra si ha il marker visivo (ovvero il marker da inquadrare con la fotocamera) mentre nella parte destra abbiamo la sua corrispondente in file “.patt”, utilizzato da AR.js. Si nota subito come sebbene l’immagine di partenza differisca, i risultati non sono abbastanza diversi fra loro; le due immagini iniziali sono “troppo” complesse, e portano a generare un file “.patt” troppo simile, che confonderà la fotocamera.
Inoltre, l’utilizzo di immagini complesse come simboli elaborati o addirittura immagini a colori, generano una sequenza di caratteri casuali che non descrive un pattern ben definito, risultando quindi inutilizzabile.
Quindi, vale la pena utilizzare AR.js?
Detto questo, con i diversi accorgimenti riguardo l’utilizzo dei marker, la libreria risulta estremamente interessante e appagante nell’utilizzo. La sua semplicità è spiazzante.
L’approccio basato su marker potrebbe far storcere il naso ad alcuni, dando l’impressione di una tecnologia ormai datata. In realtà, AR.js è una libreria molto all’avanguardia che porta l’esperienza AR sul web in maniera cross-browser permettendo anche a sviluppatori con poca conoscenza del settore di ottenere risultati notevoli.
L’approccio basato su marker, in molti contesti è ancora un ottimo paradigma per fornire contenuti 3D visibili soltanto in determinati punti dello spazio; i marker possono essere stampati su libri, volantini, su percorsi espositivi o semplicemente mostrati a video su determinati display, magari assieme ad un qr-code che porti l’utente in maniera istantanea all’indirizzo web contenente la web-app AR.js.
AR.js ci mostra come non sia necessario un device dedicato per vivere un’esperienza AR sul web, né un’app di terze parti, cui il download spesso scoraggia l’utente e lo porta a rinunciare all’esperienza AR. Con AR.js è sufficiente conoscere un indirizzo web, collegarsi ed inquadrare un marker, ed il gioco è fatto. Ancora una volta, la chiave per la pervasività di una tecnologia, sia essa disruptive o meno, risiede gran parte nella comodità di fruizione dei contenuti, all’utente medio.
Per l’articolo in lingua inglese, cliccare qua.
Chialab è uno studio di design. Creiamo relazioni tra cose e persone curando strategia, progetto, software e contenuti.
