Realtà aumentata per il Web

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

Dove posso trovarlo?

Questa API è destinata a rimanere in versione canary nell'immediato futuro. Vogliamo un prolungato del periodo di test perché si tratta di una proposta dell'API nuovissima e vogliamo assicurati che sia solido e adatto agli sviluppatori.

Oltre a Chrome Canary, ti serviranno anche:

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

Puoi quindi approfondire le demo o provare il nostro codelab.

• Chacmool
• Web immersivo Anteprima
• Codelab

È solo il web

Alla IO di Google di quest'anno, abbiamo dimostrato la realtà aumentata con una prima build di Chrome. Ho detto qualcosa più volte agli sviluppatori e ai non sviluppatori durante quei tre giorni che avrei voluto sapere di mettere articolo web coinvolgente: "È solo il web."

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

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

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

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

A proposito di IO, se vuoi saperne di più sul web immersivo in generale, dove si trova, dove andrà a pagare questo video.

Per cosa è utile?

La realtà aumentata sarà una preziosa aggiunta a molte pagine web esistenti. Ad esempio, può aiutare le persone a imparare sui siti per l'istruzione e consentire a potenziali agli acquirenti di visualizzare gli oggetti in casa mentre fanno acquisti.

Le nostre demo illustrano questo aspetto. Consentono agli utenti di inserire una rappresentazione a grandezza naturale di un oggetto come se fosse in realtà. Una volta inserita, l'immagine rimane superficie, le dimensioni sarebbero se l'elemento effettivo si trovasse su quella superficie, e consente all'utente di spostarsi all'interno della proprietà, più vicino o più lontano li annotino. Ciò consente agli spettatori di comprendere l'oggetto più a fondo di quanto non sia possibile fare con un'immagine bidimensionale.

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

Una cosa che la demo e il video non mostrano è come l'AR possa comunicare le dimensioni di un oggetto reale. Questo video mostra una demo formativa che abbiamo realizzato Chacmool. Un articolo companion descrive questa demo in dettaglio. L'aspetto importante in questa discussione è che quando posizioni la statua di Chacmool in realtà aumentata, vedi le sue dimensioni come se fosse in realtà nella stanza con te.

L'esempio di Chacmool è educativo, ma potrebbe essere altrettanto facilmente commerciale. Immagina un sito per l'acquisto di mobili che ti consenta di inserire un divano nel tuo salotto nella finestra iniziale. L'applicazione AR ti dice se il divano si adatta al tuo spazio e come guarda accanto agli altri mobili.

Ray lancia, ha colpito test e reticoli

Un problema fondamentale da risolvere durante l'implementazione della realtà aumentata è come posizionare di oggetti in una vista del mondo reale. Il metodo per farlo è chiamato trasmissione con raggi. La raycasting significa calcolare l'intersezione tra i raggio puntatore e una superficie nel mondo reale. Questa intersezione è denominata hit e determinare se si è verificato un hit è un hit test.

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

Notate alcune cose. Innanzitutto, il misuratore di velocità che puoi riconoscere altri campioni immersivi mostrano 30 frame al secondo anziché 60. Questo è il con cui la pagina web riceve immagini dalla fotocamera.

Demo di hit test AR

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

L'immagine che si sposta con il dispositivo e che tenta di bloccarsi sulle superfici è chiamato reticolo. Un reticolo è un'immagine temporanea che aiuta a posizionare un in realtà aumentata. In questa demo, il reticolo è una copia dell'immagine in fase di posizionamento. Ma non è necessario. Nella demo di Chacmool, ad esempio, è un casella rettangolare che ha all'incirca la stessa forma della base dell'oggetto posizionato.

La risposta giusta

La demo di Chacmool mostra come potrebbe essere l'AR in un'app di produzione. Fortunatamente, nel repository di esempio WebXR è disponibile una demo molto più semplice. Il mio codice di esempio proviene il Hit test AR demo nel repository. Nota che mi piace semplificare gli esempi di codice per il bene aiutandoti a capire cosa sta succedendo.

Le operazioni di base per accedere a una sessione AR ed eseguire un loop di rendering sono le stesse per AR come lo sono per la VR. Puoi leggere il mio articolo precedente se non hai familiarità. Per essere più specifici, avviare ed eseguire una sessione AR è quasi esattamente come accesso a una sessione finestra magica VR. Come per una finestra magica, il tipo di sessione non deve essere immersivo e il frame il tipo di riferimento deve essere 'eye-level'.

La nuova API

Ora ti mostrerò come utilizzare la nuova API. Ricorda che in AR il reticolo tenta di trovare una superficie prima che venga posizionato un elemento. Per fare ciò, 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 di raggi. La fusione dei raggi è definita di due punti sulla raggi (origin e direction) e indica dove si trovano questi punti calcolato da (frameOfReference). L'origine e la direzione sono entrambe in 3D vettori di rete. A prescindere dal valore specificato, questi verranno normalizzati (convertite) in una lunghezza di 1.

Spostare il reticolo

Mentre muovi il dispositivo, il reticolo deve muoversi insieme per trovare una posizione in cui è possibile posizionare un oggetto. Ciò significa che il reticolo deve essere vengono ridisegnati in ogni frame.

Inizia con il callback requestAnimationFrame(). Come per la VR, è necessaria una sessione e 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 che hai terminato la sessione e la posa, determina dove sta trasmettendo il raggio. La utilizzazioni del codice di esempio il raccolta di matematica gl-matrix. Tuttavia, gl-matrix non è un requisito. La cosa importante è sapere cosa stai che esegue calcoli e che si basa sulla posizione del dispositivo. Recupera la posizione del dispositivo da XRPose.poseModalMatrix. Con il tuo 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);
}

Sebbene non sia così ovvio nel campione di hit test, devi comunque fai scorrere le visualizzazioni per disegnare la scena. Il disegno viene fatto utilizzando le API WebGL. Puoi farlo se vuoi molto ambizioso. Tuttavia, consigliamo di utilizzare un framework. Il web immersivo esempi ne usano uno creato appositamente per le demo chiamate Cottontail e Three.js supporta WebXR da maggio.

Posizionamento di un oggetto

Un oggetto viene posizionato in AR quando l'utente tocca lo schermo. A questo scopo, puoi utilizzare select evento. In questa fase è importante sapere dove posizionarlo. Poiché il reticolo in movimento fornisce una fonte costante di hit test, il modo per posizionare un oggetto è disegnarlo nella posizione del reticolo all'ultimo test degli hit. Se necessario, supponiamo che tu abbia un motivo legittimo per non mostrare un reticolo, puoi chiamare requestHitTest() nell'evento selezionato come mostrato nell'esempio.

Conclusione

Il modo migliore per capirlo è analizzare codice campione oppure prova il codelab. Spero di averti fornito informazioni sufficienti per comprendere entrambi i concetti.

Anche se non abbiamo finito di creare API web immersive, neppure per un lungo periodo. Pubblicheremo nuovi articoli man mano che procediamo.