In vista della conferenza Google I/O, volevamo evidenziare le entusiasmanti possibilità della realtà aumentata (AR) sul web. Chacmool è una demo didattica sull'esperienza web che abbiamo creato per mostrare la facilità con cui l'AR basato sul web può aiutare gli utenti a interagire con le esperienze AR. Il web rende l'AR comoda e accessibile ovunque.
Abbiamo attivato questa demo su
Chrome Canary
sui
dispositivi Android compatibili con ARCore con Android O o versioni successive. Dovrai anche installare ARCore.
Questo lavoro si basa su una nuova proposta WebXR (l'API WebXR Hit Test), quindi è sotto un flag e deve rimanere in Canary mentre testiamo e perfezioniamo la nuova proposta API con altri membri dell'Immersive Web Community Group. Per accedere alla demo devi invece abilitare due flag in chrome://flags:
#webxr e #webxr-hit-test. Una volta abilitate entrambe le funzionalità e aver riavviato Canary, puoi guardare la demo di Chacmool.
L'esperienza AR Chacmool è incentrata sull'istruzione e sfrutta la natura immersiva e interattiva dell'AR per aiutare gli utenti a conoscere le antiche sculture di Chacmool. Gli utenti possono posizionare una statua a grandezza naturale e spostarsi per osservare la scultura da varie angolazioni e distanze. La natura immersiva dell'AR permette agli utenti di esplorare, scoprire e giocare liberamente con i contenuti, proprio come nel mondo reale. Quando visualizziamo un oggetto in AR, anziché su uno schermo 2D piatto, possiamo capire a fondo ciò che stiamo osservando perché possiamo vederlo da molte angolazioni e distanze diverse utilizzando un modello di interazione molto intuitivo: camminare intorno all'oggetto e avvicinarci o allontanarci fisicamente. Inoltre, in questa esperienza, ci sono annotazioni posizionate direttamente sulla scultura. Ciò consente agli utenti di collegare direttamente ciò che viene descritto nel testo e il punto in cui queste caratteristiche si trovano sulla scultura.
Questa demo è stata realizzata nell'arco di circa un mese di creazione, sfruttando alcuni dei componenti della prima demo AR basata sul web del team WebXR, WebAR-article. Le informazioni sulla scultura sono state tratte dalla pagina Google Arts & Culture e il modello 3D è stato fornito da CyArk, partner di Google Arts & Culture. Per preparare il modello 3D per il web, è stata utilizzata una combinazione di Meshlab e Mixer mesh per riparare il modello e decimarne il mesh per ridurne le dimensioni del file. Successivamente, è stata utilizzata Draco, una libreria per comprimere e decomprimere maglie geometriche e nuvole di punti 3D, per ridurre le dimensioni del file del modello da 44,3 megabyte a soli 225 kilobyte. Infine, un web worker viene utilizzato per caricare il modello su un thread in background in modo che la pagina rimanga interattiva mentre il modello viene caricato e decompresso, un'operazione che in genere causa jank e impedisce lo scorrimento della pagina.
Non soffermeremo mai abbastanza sul fatto che, poiché stavamo sviluppando su desktop e implementando su un telefono, l'utilizzo degli strumenti di debug remoto di Chrome per aiutare a ispezionare l'esperienza crea un ottimo ciclo di iterazione tra le modifiche al codice e che in Chrome sono disponibili incredibili strumenti per sviluppatori per il debug e il controllo delle prestazioni.
Best practice per le esperienze AR/VR
La maggior parte delle linee guida di progettazione e progettazione di esperienze AR native si applica alla creazione di esperienze AR basate sul web. Se vuoi saperne di più sulle best practice generali, consulta le linee guida per la progettazione AR che abbiamo rilasciato di recente.
In particolare, quando si progettano esperienze AR basate sul web, è preferibile utilizzare l'intero schermo (ovvero l'utilizzo dello schermo intero, in modo simile a come i video player passano a schermo intero sui dispositivi mobili) quando si usa l'AR. In questo modo gli utenti non possono scorrere la visualizzazione o farsi distrarre da altri elementi presenti sulla pagina web. La transizione all'AR deve essere fluida e senza interruzioni, mostrando la visuale della videocamera prima di entrare nelle operazioni preliminari AR (ad esempio disegnando un reticolo). È importante notare che l'AR basato sul web è che, diversamente dall'ambiente nativo, gli sviluppatori non hanno ancora accesso all'inquadratura della fotocamera, alla stima dell'illuminazione, agli ancoraggi o ai piani; per questo è importante che designer e sviluppatori tengano a mente questi limiti durante la progettazione di un'esperienza AR basata sul web.
Inoltre, data la varietà di dispositivi utilizzati per le esperienze web, è importante ottimizzare le prestazioni in modo da offrire la migliore esperienza utente possibile. Quindi: tieni basso il numero dei poli, cerca di evitare il minor numero di luci possibile, precalcola le ombre, se possibile, e riduci al minimo le chiamate di disegno. Quando visualizzi il testo in AR, utilizza tecniche di rendering del testo moderne (ovvero basate sulla distanza firmata) per assicurarti che il testo sia chiaro e leggibile da tutte le distanze e angolazioni. Quando posizioni le annotazioni, pensa allo sguardo dell'utente come a un altro input e mostrale solo quando sono pertinenti (ad es. annotazioni basate sulla prossimità che vengono visualizzate quando un utente si concentra su un'area di interesse).
Infine, poiché questi contenuti sono basati sul web, è importante applicare anche best practice generali per la progettazione del web. Assicurati che il sito offra un'esperienza positiva su tutti i dispositivi (computer, tablet, dispositivi mobili, cuffie e così via). Il supporto del miglioramento progressivo implica anche la progettazione per dispositivi non compatibili con AR, ovvero mostrare un visualizzatore di modello 3D su dispositivi non AR.
Se ti interessa sviluppare esperienze AR basate sul web, troverai un post aggiuntivo con maggiori dettagli su come iniziare a creare autonomamente l'AR sul web. (puoi anche consultare la fonte per la demo di Chacmool). L'API WebXR Device è attivamente in fase di sviluppo e ci piacerebbe ricevere feedback per assicurarci che sia abilitata per tutti i tipi di applicazioni e casi d'uso, quindi vai a GitHub e partecipa alla conversazione.