In Chrome 67, abbiamo annunciato l'API WebXR Device sia per la realtà aumentata (AR) sia per la realtà virtuale (VR), anche se erano 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 aiuta il codice web immersivo a 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 ho detto ripetutamente a sviluppatori e non sviluppatori qualcosa che avrei voluto inserire nel mio articolo sul web immersivo: "È 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 potrebbe essere ovvio per te, dato che stai leggendo queste righe su un sito web dedicato al web. Se crei dimostrazioni con questa nuova API, preparati a questa domand. Lo farai spesso.
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 imparare sui siti didattici e consentire ai potenziali acquirenti di visualizzare gli oggetti in casa durante lo shopping.
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 hai un dispositivo su cui eseguire la demo, dai un'occhiata al link al video nella parte superiore di questo articolo.
Una cosa che la demo e il video non mostrano è come la realtà aumentata può 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. L'aspetto importante di questa discussione è che, quando posizioni la statua di Chacmool nella realtà aumentata, ne vedi le dimensioni come se fosse effettivamente nella stanza con te.
L'esempio di Chacmool è didattico, ma potrebbe benissimo essere 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 cast, test di hit e reticule
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 si chiama ray casting. La generazione di raggi significa calcolare l'intersezione tra il raggio del cursore e una superficie nel mondo reale. Questa intersezione è chiamata hit e la determinazione dell'eventuale occorrenza di un hit è un test di hit.
È 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 il Sample e fai clic su "Avvia AR".
Tieni presente alcune cose. Innanzitutto, l'indicatore di 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 del test di hit AR
L'altra cosa che dovresti notare è l'immagine del girasole. Si muove con te e si aggancia a superfici come pavimenti e piani di tavoli. Se tocchi lo schermo, un girasole viene posizionato su una superficie e un nuovo girasole si muove con il dispositivo.
L'immagine che si muove 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.
Passiamo al 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. Ti informo che mi piace 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. Se non hai dimestichezza con questo argomento, puoi leggere il mio articolo precedente. 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 in AR, il mirino tenta di trovare una superficie prima che un elemento venga posizionato. 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 realtà virtuale, hai bisogno di una sessione e di 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ì evidente nel Sample Hit Test, devi comunque eseguire un ciclo nelle visualizzazioni per disegnare la scena. Il disegno viene eseguito utilizzando le API WebGL. Puoi farlo se hai davvero grandi ambizioni. Tuttavia, ti consigliamo di utilizzare un framework. I sample web immersivi ne utilizzano uno creato appositamente per le demo, chiamato Cottontail, mentre 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. L'aspetto importante in questo passaggio è 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.