Chrome su Android XR supporta WebXR. WebXR è uno standard aperto di W3C che porta API XR ad alte prestazioni nei browser supportati. Se crei 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:
- API Device
- Modulo AR
- Modulo Gamepad
- Modulo Hit Test
- Input manuale
- Ancoraggi
- Rilevamento della profondità
- Stima della luce
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. In questo modo, aumenterai notevolmente la tua produttività e migliorerai 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, ti consigliamo A-Frame e model-viewer.
- Puoi anche esaminare altri framework e codice campione.
Se preferisci utilizzare JavaScript e WebGL nativi, consulta WebXR su GitHub per creare il tuo primo esperimento WebXR.
Adatta per Android XR
Se hai già esperienze WebXR 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à all'input manuale.
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 suo spazio fisico, la sua scala deve essere precisa in modo che sembri che appartenga davvero a quello spazio. Ad esempio, in un'app per l'acquisto 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. Potresti dover 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 del codice
- Per accedere ai dati di profondità, è necessario restituire una posa valida.
pose.viewsrestituisce una visualizzazione per ogni occhio e il ciclo for corrispondente 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.
Aggiungi l'interazione manuale in WebXR
L'aggiunta dell'interazione manuale all'app WebXR migliora il coinvolgimento degli utenti consentendo esperienze più intuitive e immersive.
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 con gli oggetti virtuali in modo naturale, utilizzando gesti e movimenti delle mani per afferrare, spingere o manipolare gli elementi della scena.
I 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 tracciamento delle mani mostra come integrare il tracciamento delle mani nel tuo progetto WebXR.
L'animazione seguente mostra un esempio di combinazione del pizzicamento con l'API WebXR per mostrare a un utente che "cancella" la superficie di uno spazio virtuale per rivelare una finestra di virtualizzazione nel mondo reale.
Demo WebXR dell'utilizzo del pizzicamento manuale per cancellare gli schermi e vedere 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 rilevamento della fotocamera. Anche l'accesso ai dati di rilevamento 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 di autorizzazione scelta dall'utente viene mantenuta per ogni dominio. L'accesso a un'esperienza WebXR in un dominio diverso fa sì che Chrome richieda di nuovo le autorizzazioni. Se l'esperienza WebXR richiede più autorizzazioni, Chrome le richiede una alla volta.
Come per tutte le autorizzazioni sul web, devi gestire correttamente le situazioni in cui l'autorizzazione viene negata.