Focus Realtà Aumentata: The Sorting Hat Experiment, a WebAR in pure JS

Miki Lombardi Miki Lombardi

Full-stack developer Plansoft

Focus Realtà Aumentata

La Realtà Aumentata sembra più vicina a un prodigio o a una magia piuttosto che a un software. Il che fa presagire una piccola rivoluzione, soprattutto per le imprese che si trovano nella necessità di interpretare una tecnologia sul nascere, farla propria e applicarla nella vita e nel business di tutti i giorni.

Con questo articolo accresciamo il focus sulla Realtà Aumentata, descrivendo un piccolo esperimento (The Sorting Hat Experimentsulla AR realizzato in WebGL.

Come implementare un’esperienza in AR?

La potenza della realtà aumentata nel palmo di una mano: Google, con Chrome, sta cercando di sviluppare e garantire un supporto all’AR e VR proponendo uno standard a livello di W3C. Le proposte sono tuttora in bozza e in fase di proposta, ma ci sono già alcuni esperimenti che possono essere provati.

Esistono molte applicazioni ed esperimenti con la tecnologia AR, mentre esistono pochi esperimenti con la medesima tecnologia direttamente sul web.

Nonostante gli investimenti di molte Big Company su questa tecnologia, non esiste ancora un vero e proprio standard per la loro realizzazione.

Per il nativo, esistono varie librerie, tool e framework. Google ha sviluppato ARCore, che può essere implementato sia su iOS sia su Android, mentre Apple ha sviluppato ArKit che però può essere rilasciato solo su iOS.

Se ci fermiamo a riflettere, l’attuale lingua franca è il javascript. L’attuale ambiente, che tutti possiedono, è il web. E’ vero, non c’è garanzia di prestazioni, a causa della larga scala di dispositivi che ne hanno accesso.

Tuttavia possiamo comunque arrivare a risultati egregi.

sorting hat experiment
L’articolo in versione inglese di Miki Lombardi su Medium.

Focus Realtà Aumentata: l’esperimento in WebGL

Circa due anni fa implementai un piccolo esperimento in WebGL per estendere la realtà e, di fatto, realizzare un esperimento AR: implementare il cappello parlante della famosa saga di Harry Potter, per smistare i vari utenti nelle varie casate di Hogwarts.

Il progetto è il seguente: https://github.com/TheJoin95/sorting-hat-experiment-webgl

Il risultato è visitabile al seguente indirizzo (certificato self-signed): https://experiments.thejoin.tech/

"La Realtà Aumentata sembra più vicina a un prodigio o a una magia piuttosto che a un software. Il che fa presagire una piccola rivoluzione."

Tecnologie utilizzate per l’esperimento

L’esperimento è stato implementato in puro javascript, utilizzando la libreria Three.js, le API native per recuperare l’input della fotocamera e dell’accelerometro e facendo uso della libreria https://trackingjs.com/ per il riconoscimento facciale (tramite una MobileNet).

All’epoca dell’esperimento non esisteva ancora il progetto di google di implementare in Chrome le API WebXR (API per implementare l’AR nativo web) né tanto meno la versione di Three.js, orientata di base verso la gestione di un ambiente 3D in VR, orientata all’AR: Three.ar.js.

Come è stato implementato l’esperimento

L’implementazione è stata tutto sommato semplice, in quanto gli unici input sono la fotocamera del dispositivo (pc o smartphone) e l’input del questionario ripreso dal sito Pottermore (un sito di riferimento per la saga di Harry Potter).

Immagine esperimento
Una immagine dell’esperimento in azione 

Le criticità sono relative al supporto di un’ampia fascia di dispositivi. L’esperimento, non usando librerie ottimizzate per l’AR, soffre di fps lag, su dispositivi più vecchi con CPU e GPU non di fascia medio/alta.

Il lavoro di ottimizzazione più grande, per cercare di risolvere questo problema, è stato svolto nel rendering del modello 3D del cappello parlante in base al riconoscimento facciale.

Questo processo apporta un grosso carico a livello di CPU e GPU, poiché su ogni tick deve aggiornare tutto il canvas (il nostro livello di AR) e riposizionare il cappello.

L’ottimizzazione principale è stata quella di effettuare il processo di ricognizione facciale solo ogni tot di frame per secondo, in questo modo si riesce a garantire una esperienza comunque fluida senza appesantire troppo il dispositivo meno performante, livellando di fatto tutti gli altri di fascia più alta.

Allo start del quiz, venivano caricati dei file audio riprodotti in sequenza, in base alle scelte del questionario, che replicavano le scene del film e l’indecisione del cappello.

Al termine del quiz il cappello parlante decretava la casa di appartenenza esclamandone il nome.

Conclusioni

Un esperimento di questo genere, portato a un livello più professionale, con gli strumenti adatti e con più risorse, poteva di certo far comodo alla J.K. Rowling nel boom della saga per fidelizzare ulteriormente i vari utenti!

Soluzioni e Tecnologie Plansoft.

Social Sharing

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *