Realtà aumentata per il Web

Joe Medley
Mario Bianchi

In Chrome 67 abbiamo annunciato l'API WebXR Device per la realtà aumentata (AR) e la realtà virtuale (VR), anche se erano attivate solo le funzionalità VR. La realtà virtuale è un'esperienza basata unicamente sul contenuto di un dispositivo di elaborazione. L'AR invece consente di eseguire il rendering di oggetti virtuali nel mondo reale. Per consentire il posizionamento e il monitoraggio di questi oggetti, abbiamo appena aggiunto l'API WebXR Hit Test a Chrome Canary, un nuovo metodo che consente di inserire oggetti nel mondo reale con codice web immersivo.

Dove posso trovarlo?

Questa API è destinata a rimanere nella versione canary a breve termine. Vogliamo un periodo di test prolungato perché si tratta di una proposta API completamente nuova e vogliamo assicurarci che sia allo stesso tempo robusta e adatta per gli sviluppatori.

Oltre a Chrome Canary, avrai bisogno di:

che ti consentono di approfondire le demo o di provare il nostro codelab.

È solo il web

Durante l'I/O di Google di quest'anno, abbiamo dimostrato la realtà aumentata con una prima build di Chrome. Durante quei tre giorni ho detto ripetutamente qualcosa agli sviluppatori e ai non sviluppatori, che avrei voluto inserire nel mio articolo web coinvolgente: "È solo il Web".

"Quale estensione di Chrome devo installare?" "Non sono presenti estensioni. È solo il web".

"Ho bisogno di un browser speciale?" "È solo il web."

"Quale app devo installare?" "Non esiste un'app speciale, ma solo il Web."

Questo potrebbe essere ovvio per te, dato che stai leggendo questo articolo su un sito web dedicato al web. Se crei dimostrazioni con questa nuova API, preparati a questa domanda. La riceverai moltissimo.

A proposito di I/O, se vuoi saperne di più sul web immersivo in generale, dove si trova e dove si parlerà, guarda questo video.

A cosa serve?

La realtà aumentata si rivelerà un'aggiunta preziosa a molte pagine web esistenti. Ad esempio, può aiutare le persone ad apprendere informazioni sui siti didattici e consentire ai potenziali acquirenti di visualizzare gli oggetti presenti in casa mentre fanno acquisti.

Le nostre demo lo illustrano. Consentono agli utenti di posizionare una rappresentazione a grandezza naturale di un oggetto. Una volta posizionata, l'immagine rimane sulla superficie selezionata, appare delle dimensioni che sarebbero se l'elemento effettivo si trovasse su quella superficie e consente all'utente di spostarsi intorno e avvicinarsi o allontanarsi. Questo permette agli spettatori di capire l'oggetto più a fondo rispetto a quanto accade con un'immagine bidimensionale.

Se non sei sicuro di cosa intendo con tutto questo, sarà chiaro quando utilizzerai le demo. Se non hai un dispositivo in grado di eseguire la demo, dai un'occhiata al link al video nella parte superiore di questo articolo.

Un aspetto che le demo e i video non mostrano è come l'AR può trasmettere le dimensioni di un oggetto reale. Il video qui mostra una demo educativa che abbiamo realizzato e si chiama Chacmool. Questa demo viene descritta in dettaglio in un articolo sulle creatività companion. La cosa importante in questa discussione è che, quando posizioni la statua di Chacmool in realtà aumentata, vedi le sue dimensioni come se fosse effettivamente nella stanza con te.

L'esempio di Chacmool è didattico, ma potrebbe anche essere commerciale. Immagina un sito per lo shopping di mobili che ti permette di posizionare un divano nel salotto. L'applicazione AR ti dice se il divano si adatta al tuo spazio e come apparirà accanto agli altri mobili.

Lancia, test di resistenza e reticoli

Un problema chiave da risolvere quando implementi la realtà aumentata è il posizionamento degli oggetti in una vista del mondo reale. Il metodo per farlo è noto come ray cast. Per proiettare il raggio si intende calcolare l'intersezione tra il raggio di puntamento e una superficie nel mondo reale. Questa intersezione è denominata hit e determina se si è verificato un hit è un hit test.

È il momento giusto per provare il nuovo esempio di codice in Chrome Canary. Prima di procedere, assicurati di avere attivato i flag corretti. Ora carica l'anteprima e fai clic su "Avvia AR".

Nota alcune cose. Innanzitutto, il misuratore di velocità che potresti riconoscere da altri esempi immersivi mostra 30 frame al secondo invece di 60. Questa è la frequenza con cui la pagina web riceve immagini dalla fotocamera.

AR viene eseguita a 30 frame al secondo

La demo di Hit Test AR

L'altra cosa che dovresti notare è l'immagine del girasole. Si muove mentre ti sposti e si aggancia a piani come pavimenti e tavoli. Se tocchi lo schermo, verrà posizionato un girasole su una superficie e un nuovo girasole si sposterà insieme al dispositivo.

L'immagine che si sposta con il dispositivo e che tenta di bloccarsi sulle superfici è chiamata retico. Un reticolo è un'immagine temporanea che aiuta a posizionare un oggetto nella realtà aumentata. In questa demo, il reticolo è una copia dell'immagine da posizionare. Ma non è necessario che lo sia. Nella demo di Chacmool, ad esempio, si tratta di una scatola rettangolare all'incirca della stessa forma della base dell'oggetto posizionato.

Fino al codice

La demo di Chacmool mostra l'aspetto che potrebbe avere l'AR in un'app di produzione. Fortunatamente, è disponibile una demo molto più semplice nel repository WebXR di esempio. Il mio codice campione proviene dalla demo AR Hit Test in quel repository. Nota: mi piacerebbe semplificare gli esempi di codice per aiutarti a capire cosa sta succedendo.

I concetti di base per accedere a una sessione AR e per eseguire un loop di rendering sono gli stessi sia per AR che per la VR. Se non hai familiarità, puoi leggere il mio articolo precedente. Per essere più precisi, entrare ed eseguire una sessione AR è quasi esattamente come entrare in una sessione di finestra magica VR. Come nel caso di una finestra magica, il tipo di sessione non deve essere immersivo e il frame del tipo di riferimento deve essere 'eye-level'.

La nuova API

Ora ti mostrerò come usare la nuova API. In AR, il reticolo cerca di trovare una superficie prima di posizionare un oggetto. Questo viene fatto con un hit test. Per eseguire un test degli hit, chiama XRSession.requestHitTest(). Ha questo aspetto:

xrSession.requestHitTest(origin, direction, frameOfReference)
.then(xrHitResult => {
  //
});

I tre argomenti di questo metodo rappresentano una trasmissione dei raggi. La trasmissione del raggio è definita da due punti sul raggio (origin e direction) e da cui vengono calcolati i punti (frameOfReference). L'origine e la direzione sono entrambi vettori 3D. Indipendentemente dal valore specificato, verranno normalizzati (convertiti) in una lunghezza di 1.

Spostare il reticolo

Quando muovi il dispositivo, il reticolo deve muoversi con esso per cercare di trovare una posizione in cui posizionare un oggetto. Ciò significa che il reticolo deve essere ridisegnato a ogni fotogramma.

Inizia con il callback requestAnimationFrame(). Come nella realtà virtuale, servono una sessione e una posa.

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Do the hit test and draw the reticle.
  }
}

Dopo aver individuato la sessione e la posa, determina dove sta gettando il raggio. Il codice campione utilizza la libreria matematica della matrice gl. Ma la matrice gl non è obbligatoria. La cosa importante è sapere che cosa viene calcolato con questo strumento e che questo si basa sulla posizione del dispositivo. Recupera la posizione del dispositivo da XRPose.poseModalMatrix. Con il raggio in mano, chiama requestHitTest().

function onXRFrame(t, frame) {
  let xrSession = frame.session;
  // The frame of reference, which was set elsewhere, is 'eye-level'.
  // See onSessionStarted() ins the sample code for details.
  let xrPose = frame.getDevicePose(xrFrameOfRef);
  if (xrPose && xrPose.poseModelMatrix) {
    // Calculate the origin and direction for the raycast.
    xrSession.requestHitTest(rayOrigin, rayDirection, xrFrameOfRef)
    .then((results) => {
      if (results.length) {
        // Draw for each view.
      }
    });
  }
  session.requestAnimationFrame(onXRFrame);
}

Anche se non così evidenti nell'esempio di hit test, è comunque necessario scorrere le visualizzazioni a rotazione per disegnare la scena. Il disegno viene eseguito utilizzando le API WebGL. Puoi farlo se sei davvero ambizioso. Tuttavia, consigliamo di utilizzare un framework. Gli esempi web immersivi ne utilizzano uno creato appositamente per le demo chiamato Cottontail, mentre Three.js supporta WebXR da maggio.

Posizionamento di un oggetto

Un oggetto viene posizionato in AR quando l'utente tocca lo schermo. Per questo, devi utilizzare l'evento select. La cosa importante in questo passaggio è sapere dove posizionarlo. Poiché il reticolo in movimento offre una costante fonte di hit test, il modo più semplice per posizionare un oggetto è disegnarlo nella posizione del reticolo all'ultimo hit test. Se necessario, se hai un motivo legittimo per non mostrare un reticolo, puoi chiamare requestHitTest() nell'evento selezionato come mostrato nell'esempio.

Conclusione

Il modo migliore per ottenere un handle è analizzare il codice campione o provare il codelab. Spero di averti fornito informazioni sufficienti per comprendere entrambi i concetti.

La creazione di API web immersive non è finita, anzi, non abbiamo finito. Pubblicheremo nuovi articoli qui man mano che procediamo.