L'API Hit Test ti consente di posizionare elementi virtuali in una visualizzazione reale.
L'API WebXR Device è stata rilasciata lo scorso autunno in Chrome 79. Come indicato in precedenza, l'implementazione dell'API da parte di Chrome è in fase di sviluppo. Chrome è felice di annunciare che parte del lavoro è stata completata. In Chrome 81 sono state introdotte due nuove funzionalità:
Questo articolo illustra l'API WebXR Hit Test, un mezzo per posizionare oggetti virtuali in una visualizzazione della fotocamera reale.
In questo articolo do per scontato che tu sappia già come creare una sessione di realtà aumentata e come eseguire un loop di frame. Se non hai familiarità con questi concetti, ti consigliamo di leggere gli articoli precedenti di questa serie.
- La realtà virtuale arriva sul web
- La realtà virtuale arriva sul web, parte II
- AR web: potresti già sapere come utilizzarla
Esempio di sessione AR immersiva
Il codice di questo articolo si basa, ma non è identico, su quello dell'esempio di hit test dell'Immersive Web Working Group (demo, origine). Questo esempio ti consente di posizionare girasoli virtuali su superfici nel mondo reale.
Quando apri l'app per la prima volta, vedrai un cerchio blu con un punto al centro. Il punto è l'intersezione tra una linea immaginaria che va dal tuo dispositivo al punto nell'ambiente. Si sposta quando muovi il dispositivo. Quando trova i punti di intersezione, sembra agganciarsi a superfici come pavimenti, piani di tavoli e pareti. Questo perché l'hit test fornisce la posizione e l'orientamento del punto di intersezione, ma non fornisce informazioni sulle superfici stesse.
Questo cerchio è chiamato reticolo ed è un'immagine temporanea che aiuta a posizionare un oggetto nella realtà aumentata. Se tocchi lo schermo, un girasole viene posizionato sulla superficie nella posizione del reticolo e nell'orientamento del punto del reticolo, indipendentemente da dove hai toccato lo schermo. Il reticolo continua a muoversi con il dispositivo.
Crea il reticolo
Devi creare tu l'immagine del reticolo, poiché non viene fornita dal browser o dall'API. Il metodo di caricamento e disegno è specifico del framework.
Se non lo disegni direttamente utilizzando WebGL o WebGL2, consulta la documentazione del framework. Per questo motivo, non entrerò nei dettagli su come viene disegnato il reticolo nell'esempio. Di seguito mostro una riga per un solo motivo: per farti capire a cosa mi riferisco quando utilizzo la variabile reticle negli esempi di codice successivi.
let reticle = new Gltf2Node({url: 'media/gltf/reticle/reticle.gltf'});
Richiedi una sessione
Quando richiedi una sessione, devi richiedere 'hit-test' nell'array requiredFeatures, come mostrato di seguito.
navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['local', 'hit-test']
})
.then((session) => {
// Do something with the session
});
Partecipazione a una sessione
Negli articoli precedenti ho presentato il codice per accedere a una sessione XR. Di seguito è riportata una versione di questo diagramma con alcune aggiunte. Per prima cosa, ho aggiunto il listener di eventi select. Quando l'utente tocca lo schermo, un fiore verrà posizionato nella visuale della fotocamera in base alla posizione del reticolo. Descriverò questo listener di eventi più avanti.
function onSessionStarted(xrSession) {
xrSession.addEventListener('end', onSessionEnded);
xrSession.addEventListener('select', onSelect);
let canvas = document.createElement('canvas');
gl = canvas.getContext('webgl', { xrCompatible: true });
xrSession.updateRenderState({
baseLayer: new XRWebGLLayer(session, gl)
});
xrSession.requestReferenceSpace('viewer').then((refSpace) => {
xrViewerSpace = refSpace;
xrSession.requestHitTestSource({ space: xrViewerSpace })
.then((hitTestSource) => {
xrHitTestSource = hitTestSource;
});
});
xrSession.requestReferenceSpace('local').then((refSpace) => {
xrRefSpace = refSpace;
xrSession.requestAnimationFrame(onXRFrame);
});
}
Più spazi di riferimento
Tieni presente che il codice evidenziato chiama XRSession.requestReferenceSpace() due volte. All'inizio ho trovato questa cosa un po' confusa. Ho chiesto perché il codice dell'hit test non richiede un frame di animazione (avviando il loop dei frame) e perché il loop dei frame sembra non coinvolgere gli hit test. La fonte della confusione era un'errata comprensione degli spazi di riferimento. Gli spazi di riferimento esprimono le relazioni tra un'origine e il mondo.
Per capire cosa fa questo codice, immagina di visualizzare questo esempio utilizzando un rig autonomo e di avere sia un visore che un controller. Per misurare le distanze dal controller, devi utilizzare un sistema di riferimento incentrato sul controller. Tuttavia, per disegnare qualcosa sullo schermo, devi utilizzare le coordinate incentrate sull'utente.
In questo esempio, il visualizzatore e il controller sono lo stesso dispositivo. Ma ho un problema. Ciò che disegno deve essere stabile rispetto all'ambiente, ma il "controller" con cui disegno si muove.
Per il disegno delle immagini, utilizzo lo spazio di riferimento local, che mi offre stabilità in termini di ambiente. Dopo averlo ottenuto, avvio il loop dei frame chiamando requestAnimationFrame().
Per l'hit test, utilizzo lo spazio di riferimento viewer, che si basa sulla posizione del dispositivo al momento dell'hit test. L'etichetta "viewer" è un po' confusa in questo contesto perché sto parlando di un controller. È logico se pensi al controller come a un visualizzatore elettronico. Dopo averlo ottenuto, chiamo xrSession.requestHitTestSource(), che crea l'origine dei dati dell'hit test che utilizzerò durante il disegno.
Esecuzione di un loop di frame
Anche il callback requestAnimationFrame() riceve un nuovo codice per gestire l'hit test.
Quando sposti il dispositivo, il reticolo deve muoversi con esso mentre cerca di trovare
le superfici. Per creare l'illusione del movimento, ridisegna il reticolo in ogni frame.
Tuttavia, non mostrare il reticolo se l'hit test non va a buon fine. Quindi, per il reticolo che ho creato in precedenza, ho impostato la proprietà visible su false.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);
reticle.visible = false;
// Reminder: the hitTestSource was acquired during onSessionStart()
if (xrHitTestSource && xrViewerPose) {
let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
if (hitTestResults.length > 0) {
let pose = hitTestResults[0].getPose(xrRefSpace);
reticle.visible = true;
reticle.matrix = pose.transform.matrix;
}
}
// Draw to the screen
}
Per disegnare qualsiasi cosa in AR, devo sapere dove si trova lo spettatore e dove sta guardando. Quindi verifico che hitTestSource e xrViewerPose siano ancora validi.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);
reticle.visible = false;
// Reminder: the hitTestSource was acquired during onSessionStart()
if (xrHitTestSource && xrViewerPose) {
let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
if (hitTestResults.length > 0) {
let pose = hitTestResults[0].getPose(xrRefSpace);
reticle.visible = true;
reticle.matrix = pose.transform.matrix;
}
}
// Draw to the screen
}
Ora chiamo getHitTestResults(). Accetta hitTestSource come argomento e restituisce un array di istanze HitTestResult. L'hit test potrebbe trovare più superfici. Il primo elemento dell'array è quello più vicino alla fotocamera.
La maggior parte delle volte utilizzerai questo valore, ma viene restituito un array per i casi d'uso avanzati. Ad esempio, immagina che la videocamera sia puntata su una scatola su un tavolo su un pavimento. È possibile che l'hit test restituisca tutte e tre le superfici nell'array. Nella maggior parte dei casi, sarà la casella che mi interessa. Se la lunghezza dell'array restituito è 0, ovvero se non viene restituito alcun hit test, continua. Riprova nel frame successivo.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);
reticle.visible = false;
// Reminder: the hitTestSource was acquired during onSessionStart()
if (xrHitTestSource && xrViewerPose) {
let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
if (hitTestResults.length > 0) {
let pose = hitTestResults[0].getPose(xrRefSpace);
reticle.visible = true;
reticle.matrix = pose.transform.matrix;
}
}
// Draw to the screen
}
Infine, devo elaborare i risultati dell'hit test. La procedura di base è la seguente. Ottieni una posa dal risultato dell'hit test, trasforma (sposta) l'immagine del reticolo nella posizione dell'hit test, quindi imposta la relativa proprietà visible su true. La posa rappresenta la posa di un punto su una superficie.
function onXRFrame(hrTime, xrFrame) {
let xrSession = xrFrame.session;
xrSession.requestAnimationFrame(onXRFrame);
let xrViewerPose = xrFrame.getViewerPose(xrRefSpace);
reticle.visible = false;
// Reminder: the hitTestSource was acquired during onSessionStart()
if (xrHitTestSource && xrViewerPose) {
let hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);
if (hitTestResults.length > 0) {
let pose = hitTestResults[0].getPose(xrRefSpace);
reticle.matrix = pose.transform.matrix;
reticle.visible = true;
}
}
// Draw to the screen
}
Posizionamento di un oggetto
Un oggetto viene posizionato in AR quando l'utente tocca lo schermo. Ho già aggiunto un gestore di eventi select alla sessione. (Vedi sopra).
L'importante in questo passaggio è sapere dove posizionarlo. Poiché il reticolo mobile fornisce una fonte costante di hit test, il modo più semplice per posizionare un oggetto è disegnarlo nella posizione del reticolo nell'ultimo hit test.
function onSelect(event) {
if (reticle.visible) {
// The reticle should already be positioned at the latest hit point,
// so we can just use its matrix to save an unnecessary call to
// event.frame.getHitTestResults.
addARObjectAt(reticle.matrix);
}
}
Conclusione
Il modo migliore per comprendere questo concetto è esaminare il codice campione o provare il codelab. Spero di averti fornito un contesto sufficiente per comprendere entrambi.
Non abbiamo ancora finito di creare API web immersive, tutt'altro. Pubblicheremo nuovi articoli qui man mano che faremo progressi.