Realtà aumentata per il Web

In Chrome 67, abbiamo annunciato l'API WebXR Device sia per la realtà aumentata (AR) sia per la realtà virtuale (VR), sebbene fossero state attivate solo le funzionalità VR. La realtà virtuale è un'esperienza basata esclusivamente su ciò che è presente in un dispositivo di calcolo. La realtà aumentata, invece, ti consente di visualizzare 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 al codice web immersivo di posizionare gli oggetti nel mondo reale.

Dove posso trovarlo?

Questa API dovrebbe rimanere in Canary per il prossimo futuro. Vogliamo un periodo di test prolungato perché si tratta di una proposta di API molto recente e vogliamo assicurarci che sia affidabile e adatta agli sviluppatori.

Oltre a Chrome Canary, ti serviranno anche:

• Uno smartphone compatibile con Android O o versioni successive.
• Per installare ARCore.
• Due flag di Chrome (chrome://flags): API WebXRDevice (#webxr) e test di hit WebXR (#webxr-hit-test)

Con questi, puoi esplorare le demo o provare il nostro codelab.

• Chacmool
• Esempio di web immersivo
• Codelab

È solo il web

Alla conferenza Google IO di quest'anno abbiamo dimostrato la realtà aumentata con una versione iniziale di Chrome. Durante quei tre giorni che avrei voluto sapere di aver inserito nel mio video immersivo sul web, ho detto ripetutamente a sviluppatori e non sviluppatori: "È solo il web".

"Quale estensione di Chrome devo installare?" "Non c'è alcuna estensione. È solo il web."

"Mi serve un browser speciale?" "È solo il web."

"Quale app devo installare?" "Non esiste un'app speciale. È solo il web."

Questo può essere ovvio, dato che stai leggendo questo testo su un sito web dedicato al web. Se crei dimostrazioni con questa nuova API, preparati per questa domanda. Ne farai parecchi.

A proposito di IO, se vuoi saperne di più sul web immersivo in generale, su dove si trova e dove sta andando, guarda questo video.

A cosa serve?

La realtà aumentata sarà un'aggiunta preziosa a molte pagine web esistenti. Ad esempio, può aiutare le persone a informarsi sui siti per l'istruzione e consentire ai potenziali acquirenti di visualizzare gli oggetti presenti in casa durante gli acquisti.

Le nostre demo lo dimostrano. Consentono agli utenti di posizionare una rappresentazione in scala reale di un oggetto come se fosse nella realtà. Una volta posizionata, l'immagine rimane sulla superficie selezionata, viene visualizzata nelle dimensioni che avrebbe se l'elemento effettivo fosse su quella superficie e consente all'utente di spostarsi intorno, avvicinarsi o allontanarsi. In questo modo, gli spettatori possono comprendere meglio l'oggetto rispetto a quanto sia possibile con un'immagine bidimensionale.

Se non sai cosa intendo, ti sarà tutto chiaro quando utilizzerai le demo. Se non disponi di un dispositivo su cui è possibile eseguire la demo, guarda il link del video nella parte superiore di questo articolo.

Una cosa che la demo e il video non dimostrano è come l'AR possa trasmettere le dimensioni di un oggetto reale. Il video qui mostra una demo educativa che abbiamo creato chiamata Chacmool. Un articolo complementare descrive questa demo in dettaglio. La cosa importante per 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 è educativo, ma potrebbe essere altrettanto facilmente commerciale. Immagina un sito di shopping di mobili che ti consenta di posizionare un divano nel tuo soggiorno. L'applicazione AR ti dice se il divano si adatta al tuo spazio e come sarà accanto agli altri mobili.

Ray lancia, ha colpito test e reticoli

Un problema chiave da risolvere quando si implementa la realtà aumentata è come posizionare gli oggetti in una visualizzazione del mondo reale. Il metodo per farlo è chiamato trasmissione con raggi. La generazione di raggi significa calcolare l'intersezione tra il raggio del cursore e una superficie nel mondo reale. Questa intersezione è chiamata hit e determinare se si è verificato un hit è un hit test.

È un buon momento per provare il nuovo sample di codice in Chrome Canary. Prima di procedere, verifica di aver attivato gli indicatori corretti. Ora carica l'esempio e fai clic su "Avvia AR".

Tieni presente alcune cose. Innanzitutto, l'indicatore della velocità che potresti riconoscere da altri sample immersivi mostra 30 frame al secondo anziché 60. Si tratta della frequenza con cui la pagina web riceve le immagini dalla fotocamera.

Demo degli hit test AR

L'altra cosa che dovresti notare è l'immagine del girasole. Si sposta man mano che ti muovi e si aggancia a superfici come pavimenti e piani. Se tocchi lo schermo, un girasole verrà posizionato su una superficie e un altro girasole si sposterà insieme al dispositivo.

L'immagine che si sposta con il dispositivo e che tenta di bloccarsi sulle superfici è chiamata reticolo. Un mirino è un'immagine temporanea che aiuta a posizionare un oggetto in realtà aumentata. In questa demo, il mirino è una copia dell'immagine da posizionare. Ma non deve essere così. Nella demo di Chacmool, ad esempio, si tratta di una scatola rettangolare con la stessa forma approssimativa della base dell'oggetto da posizionare.

Il codice

La demo di Chacmool mostra come potrebbe essere l'AR in un'app di produzione. Per fortuna, nel repo di esempi WebXR è disponibile una demo molto più semplice. Il mio codice di esempio proviene dalla demo AR Hit Test in quel repository. Voglio semplificare gli esempi di codice per aiutarti a capire cosa sta succedendo.

Le nozioni di base per accedere a una sessione AR ed eseguire un ciclo di rendering sono le stesse per la realtà AR e la realtà VR. Puoi leggere il mio articolo precedente se non conosci. Per essere più specifici, avviare e eseguire una sessione AR è quasi esattamente come avviare una sessione della finestra magica VR. Come per una finestra magica, il tipo di sessione deve essere non immersiva e il tipo di frame di riferimento deve essere 'eye-level'.

La nuova API

Ora ti mostrerò come utilizzare la nuova API. Ricorda che nell'AR il reticolo tenta di trovare una superficie prima di posizionare l'oggetto. Questo viene fatto con un test di hit. Per eseguire un test di corrispondenza, chiama XRSession.requestHitTest(). Ha questo aspetto:

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

I tre argomenti di questo metodo rappresentano un raggio. Il raggio è definito da due punti sul raggio (origin e direction) e da dove vengono calcolati questi punti (frameOfReference). L'origine e la direzione sono entrambi vettori 3D. Indipendentemente dal valore specificato, verrà normalizzato (convertito) in modo da avere una lunghezza pari a 1.

Spostare il mirino

Quando muovi il dispositivo, il mirino deve muoversi con esso mentre cerca di trovare un punto in cui posizionare un oggetto. Ciò significa che il mirino deve essere redrawn in ogni frame.

Inizia con la chiamata requestAnimationFrame(). Come per la VR, 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.
  }
}

Una volta ottenute la sessione e la posa, determina dove viene proiettato il raggio. Il codice di esempio utilizza la libreria matematica gl-matrix. Tuttavia, gl-matrix non è un requisito. L'importante è sapere cosa stai calcolando e che si basa sulla posizione del dispositivo. Recupera la posizione del dispositivo da XRPose.poseModalMatrix. Con il raggio magico 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);
}

Sebbene non sia così ovvio nel campione di hit del test, devi comunque passare attraverso le visualizzazioni per tracciare la scena. Il disegno viene eseguito utilizzando le API WebGL. Puoi farlo se sei davvero ambizioso. Tuttavia, ti consigliamo di utilizzare un framework. I sample web immersivi ne utilizzano uno creato appositamente per le demo chiamato Cottontail e Three.js supporta WebXR da maggio.

Posizionare un oggetto

Un oggetto viene posizionato in AR quando l'utente tocca lo schermo. A questo scopo, utilizza l'evento select. In questa fase è importante sapere dove posizionarlo. Poiché il mirino in movimento fornisce una fonte costante di test di corrispondenza, il modo più semplice per posizionare un oggetto è disegnarlo nella posizione del mirino all'ultimo test di corrispondenza. Se necessario, ad esempio 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 comprendere questo aspetto è esaminare il codice di esempio o provare il codelab. Spero di averti fornito informazioni sufficienti per comprendere entrambi.

Non abbiamo ancora finito di creare API web immersive, anzi, siamo solo all'inizio. Pubblicheremo nuovi articoli man mano che procediamo.