Sviluppare con WebXR

Chrome su Android XR supporta WebXR. WebXR è uno standard aperto sviluppato dal W3C che offre API XR ad alte prestazioni ai browser supportati. Se stai creando contenuti per il web, puoi migliorare i siti esistenti con modelli 3D o creare nuove esperienze immersive.

Le seguenti funzionalità WebXR sono supportate da Chrome per Android XR:

Per vedere WebXR in azione, avvia Chrome su un dispositivo Android XR o sull'emulatore Android XR e sfoglia i sample WebXR ufficiali.

Prerequisito: scegli un framework WebXR

Prima di iniziare a sviluppare, è importante scegliere il framework WebXR giusto. In questo modo, puoi migliorare notevolmente la tua produttività e la qualità delle esperienze che crei.

Se preferisci utilizzare JavaScript e WebGL nativi, consulta WebXR su GitHub per creare il tuo primo esperimento WebXR.

Adattare per Android XR

Se hai già esperienze WebXR in esecuzione su altri dispositivi, potrebbe essere necessario aggiornare il codice per supportare correttamente WebXR su Android XR. Ad esempio, le esperienze WebXR incentrate sui dispositivi mobili dovranno adattarsi da uno schermo a due screen stereo in Android XR. Le esperienze WebXR che hanno come target i dispositivi mobili o gli headset esistenti potrebbero dover adattare il codice di input in modo che sia prioritario per le mani.

Quando lavori con WebXR su Android XR, potresti dover aggiornare il codice per compensare il fatto che ci sono due schermi, uno per ogni occhio.

Informazioni su come garantire un senso di profondità in WebXR

Quando un utente posiziona un oggetto virtuale nel proprio spazio fisico, la sua scala deve essere accurata in modo che sembri davvero appartenere a quel luogo. Ad esempio, in un'app per lo shopping di mobili, gli utenti devono essere certi che una poltrona virtuale si adatti perfettamente al loro salotto.

Chrome per Android XR supporta il modulo di rilevamento della profondità in WebXR, che migliora la capacità di un dispositivo di percepire le dimensioni e i contorni dell'ambiente reale. Queste informazioni sulla profondità ti consentono di creare interazioni più immersive e realistiche, aiutando gli utenti a prendere decisioni consapevoli.

A differenza del rilevamento della profondità sui cellulari, il rilevamento della profondità in Android XR è stereoscopico e trasmette due mappe di profondità in tempo reale per la visione binoculare. Potrebbe essere necessario aggiornare il codice WebXR per supportare correttamente i frame di profondità stereo.

L'esempio seguente esegue il rendering delle informazioni sulla profondità in modo stereoscopico:

// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);
  const baseLayer = session.renderState.baseLayer;
  const pose = frame.getViewerPose(xrRefSpace);

  if (pose) {
    gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);

    // Clears the framebuffer.
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Note: Two views will be returned from pose.views.
    for (const view of pose.views) {
      const viewport = baseLayer.getViewport(view);
      gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

      const depthData = frame.getDepthInformation(view);
      if (depthData) {
        renderDepthInformationGPU(depthData, view, viewport);
      }
    }
  } else {
    console.error('Pose unavailable in the current frame!');  }
}

Aspetti fondamentali del codice

  • Per accedere ai dati di profondità, è necessario restituire una posa valida.
  • pose.views restituisce una visualizzazione per ogni occhio e il corrispondente loop for viene eseguito due volte.

Visualizzazione della profondità in tempo reale utilizzando l'API di rilevamento della profondità WebXR. Il rosso indica i pixel più vicini, mentre il blu indica i pixel più lontani.

Aggiungere l'interazione con le mani in WebXR

L'aggiunta dell'interazione con le mani alla tua app WebXR migliora il coinvolgimento degli utenti consentendo esperienze più intuitive e immersive.

L'input con le mani è il meccanismo di interazione principale in Android XR. Chrome per Android XR supporta l'API Hand Input come input predefinito. Questa API consente agli utenti di interagire con gli oggetti virtuali in modo naturale, utilizzando gesti e movimenti delle mani per afferrare, spingere o manipolare gli elementi nella scena.

I dispositivi come i cellulari o i dispositivi XR incentrati sul controller potrebbero non supportare ancora l'input con le mani. Potresti dover aggiornare il codice WebXR per supportare correttamente l'input tramite le mani. La sessione VR immersiva con le mani mostra come integrare il rilevamento delle mani nel tuo progetto WebXR.

L'animazione seguente mostra un esempio di combinazione del pizzicotto con l'API WebXR per mostrare un utente che "pulisce" la superficie di uno spazio virtuale per rivelare una finestra di virtualizzazione nel mondo reale.

Demo di WebXR che mostra l'uso del pizzicotto con la mano per cancellare gli schermi e vedere attraverso la realtà fisica.

Autorizzazioni in WebXR

Quando utilizzi API WebXR che richiedono l'autorizzazione, Chrome chiede all'utente di grantire l'autorizzazione al sito. Tutte le API WebXR richiedono l'autorizzazione di accesso alla fotocamera e alla mappatura 3D. Anche l'accesso ai dati relativi a viso, occhi e mani monitorati è protetto dalle autorizzazioni. Se tutte le autorizzazioni necessarie sono concesse, la chiamata a navigator.xr.requestSession('immersive-ar', options) restituisce una sessione WebXR valida.

La preferenza per le autorizzazioni scelta dall'utente viene mantenuta per ogni dominio. Se accedi a un'esperienza WebXR in un dominio diverso, Chrome chiede di nuovo le autorizzazioni. Se l'esperienza WebXR richiede più autorizzazioni, Chrome chiede di autorizzare ciascuna singolarmente.

Come per tutte le autorizzazioni sul web, devi gestire correttamente le situazioni in cui l'autorizzazione viene negata.