Sviluppare per il web su Android XR

Dispositivi XR applicabili
Queste indicazioni ti aiutano a creare esperienze per questi tipi di dispositivi XR.
Scopri di più sui tipi di dispositivi XR →
Visori XR
Occhiali XR con cavo
Scopri di più sui tipi di dispositivi XR →

Chrome su Android XR supporta WebXR. WebXR è uno standard aperto di W3C che porta API XR ad alte prestazioni nei browser supportati. Se crei 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 gli esempi WebXR ufficiali.

Prerequisito: scegli un framework WebXR

Prima di iniziare lo sviluppo, è importante scegliere il framework WebXR giusto. Ciò migliora significativamente la tua produttività e la qualità delle esperienze che crei.

  • Per un controllo completo delle scene 3D e la creazione di interazioni personalizzate o complesse, ti consigliamo three.js e babylon.js.
  • Per la prototipazione rapida o l'utilizzo di una sintassi simile a HTML per definire scene 3D, consigliamo A-Frame e model-viewer.
  • Puoi anche esaminare altri framework e codici campione.

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

Adattare per Android XR

Se hai esperienze WebXR esistenti in esecuzione su altri dispositivi, potresti dover 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 schermi stereo in Android XR. Le esperienze WebXR destinate ai dispositivi mobili o ai visori esistenti potrebbero dover adattare il codice di input per dare la priorità alle 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 quello spazio. Ad esempio, in un'app di acquisto di mobili, gli utenti devono avere la certezza 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ù coinvolgenti e realistiche, aiutando gli utenti a prendere decisioni informate.

A differenza del rilevamento della profondità sui cellulari, il rilevamento della profondità in Android XR è stereoscopico e riproduce in streaming 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!');  }
}

Punti chiave sul codice

  • Per accedere ai dati di profondità, deve essere restituita una posa valida.
  • pose.views restituisce una visualizzazione per ogni occhio e il ciclo for corrispondente viene eseguito due volte.

Visualizzazione della profondità in tempo reale utilizzando l'API WebXR Depth Sensing. 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 all'app WebXR migliora il coinvolgimento degli utenti consentendo esperienze più intuitive e coinvolgenti.

L'input manuale è 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 in modo naturale con gli oggetti virtuali, utilizzando gesti e movimenti delle mani per afferrare, spingere o manipolare gli elementi della scena.

Dispositivi come i cellulari o i dispositivi XR incentrati sul controller potrebbero non supportare ancora l'input manuale. Potresti dover aggiornare il codice WebXR per supportare correttamente l'input manuale. 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 pizzico con l'API WebXR per mostrare a un utente che "cancella" la superficie di uno spazio virtuale per rivelare una finestra pass-through nel mondo reale.

Demo di WebXR sull'utilizzo del pizzico della mano per pulire gli schermi e vedere attraverso la realtà fisica.

Autorizzazioni in WebXR

Quando utilizzi le API WebXR che richiedono l'autorizzazione, Chrome chiede all'utente di concedere l'autorizzazione al sito. Tutte le API WebXR richiedono l'autorizzazione di mappatura 3D e monitoraggio della videocamera. Anche l'accesso ai dati tracciati di viso, occhi e mani è protetto dalle autorizzazioni. Se vengono concesse tutte le autorizzazioni necessarie, 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. L'accesso a un'esperienza WebXR in un dominio diverso fa sì che Chrome richieda nuovamente le autorizzazioni. Se l'esperienza WebXR richiede più autorizzazioni, Chrome richiede ogni autorizzazione una alla volta.

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