In vista di Google I/O, volevamo mettere in evidenza le interessanti possibilità offerte dalla realtà aumentata (AR) sul web. Chacmool è una demo di un'esperienza web educativa che abbiamo creato per mostrare quanto sia facile utilizzare l'AR basata sul web per aiutare gli utenti a interagire con le esperienze AR. Il web rende l'AR comoda e accessibile ovunque.
Ora abbiamo attivato questa demo su
Chrome Canary
su
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), pertanto è contrassegnato e dovrebbe rimanere in Canary mentre testiamo e perfezioniamo la nuova proposta di API con altri membri del gruppo della community web immersiva. Infatti, per accedere alla demo devi attivare due flag in chrome://flags:
#webxr e #webxr-hit-test. Dopo aver attivato entrambe le funzionalità e aver riavviato Canary, puoi controllare 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 scoprire le antiche sculture Chacmool. Gli utenti possono posizionare una statua a grandezza naturale nella loro realtà e muoversi per vedere la scultura da varie angolazioni e distanze. La natura immersiva dell'AR consente agli utenti di esplorare, scoprire e interagire liberamente con i contenuti, proprio come nel mondo reale. Quando osserviamo un oggetto in AR, anziché su uno schermo 2D piatto, siamo in grado di comprendere a fondo ciò che stiamo guardando perché possiamo vederlo da molti angoli e distanze diverse utilizzando un modello di interazione molto intuitivo: camminare intorno all'oggetto e avvicinarci o allontanarci fisicamente. Inoltre, in questa esperienza sono presenti annotazioni posizionate direttamente sulla scultura. In questo modo, gli utenti possono collegare direttamente ciò che è descritto nel testo e dove si trovano queste caratteristiche sulla scultura.
Questa demo è stata creata nel corso di circa un mese, sfruttando alcuni dei componenti della prima demo AR basata su web del team WebXR, WebAR-Article. Le informazioni sulla scultura sono state tratte dalla pagina di 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 Mesh Mixer per riparare il modello e decimato la sua mesh per ridurre le dimensioni del file. Poi è stato utilizzato Draco, una libreria per la compressione e la decompressione di mesh geometrici 3D e nuvole di punti, per ridurre le dimensioni del file del modello da 44,3 megabyte a soli 225 kilobyte. Infine, viene utilizzato un web worker per caricare il modello in un thread in background in modo che la pagina rimanga interattiva durante il caricamento e la decompressione del modello, un'operazione che in genere causa scatti e impedisce lo scorrimento della pagina.
Non possiamo sottolineare abbastanza che, dato che stavamo sviluppando su computer e implementando su uno smartphone, l'utilizzo degli strumenti di debug remoto di Chrome per ispezionare l'esperienza crea un ciclo di iterazione molto rapido tra le modifiche al codice e in Chrome sono disponibili fantastici 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 ingegneria per la progettazione di esperienze AR native si applicano alla creazione di esperienze AR basate sul web. Per saperne di più sulle best practice generali, consulta le linee guida per la progettazione AR che abbiamo rilasciato di recente.
In particolare, quando progetti esperienze AR basate sul web, è meglio utilizzare l'intero schermo (ovvero attivare lo schermo intero come fanno i video player su mobile) quando utilizzi l'AR. In questo modo gli utenti non possono scorrere la visualizzazione o farsi distrarre da altri elementi della pagina web. La transizione all'AR deve essere scorrevole e senza interruzioni, mostrando la visuale della fotocamera prima di accedere all'onboarding AR (ad es. disegnando un mirino). È importante notare che, a differenza dell'AR nativa, gli sviluppatori non hanno ancora accesso al frame della fotocamera, alla stima dell'illuminazione, agli ancoraggi o ai piani, pertanto è importante che designer e sviluppatori tengano conto di queste limitazioni quando progettano un'esperienza AR basata sul web.
Inoltre, a causa della varietà di dispositivi utilizzati per le esperienze web, è importante ottimizzare le prestazioni per creare la migliore esperienza utente. Quindi: mantieni basso il numero di poligoni, prova a utilizzare il minor numero possibile di luci, precompila le ombre, se possibile, e riduci al minimo le chiamate di draw. Quando mostri il testo in AR, utilizza tecniche di rendering del testo moderne (ad es. basate su campi di distanza firmati) per assicurarti che il testo sia chiaro e leggibile da tutte le distanze e da tutti gli angoli. Quando posizioni le annotazioni, considera lo sguardo dell'utente come un altro input e mostra le annotazioni solo quando sono pertinenti (ad es. annotazioni basate sulla vicinanza che vengono visualizzate quando un utente si concentra su un'area di interesse).
Infine, poiché questi contenuti sono basati sul web, è importante applicare anche le migliori pratiche di progettazione generali per il web. Assicurati che il sito offra un'esperienza positiva su più dispositivi (computer, tablet, dispositivi mobili, visori ecc.). Il supporto del miglioramento progressivo significa anche progettare per i dispositivi non AR (ad es. mostrare un visualizzatore di modelli 3D su dispositivi non AR).
Se ti interessa sviluppare le tue esperienze AR basate sul web, consulta questo post complementare che fornisce ulteriori dettagli su come iniziare a creare AR sul web. Puoi anche controllare il codice sorgente della demo di Chacmool. L'API WebXR Device è in fase di sviluppo e ci piacerebbe ricevere feedback per assicurarci che supporti tutti i tipi di applicazioni e casi d'uso. Pertanto, visita GitHub e partecipa alla conversazione.