Come il mio gioco per browser funziona in VR su Meta Quest

Il mio gioco Bannermarch funziona nel browser e, dato che ora è in 3D, volevo vedere se potevo giocarci in VR. Puoi. Mi sono messo il mio Meta Quest, ho aperto il gioco nel browser dell'headset e ho premuto un pulsante che dice Enter VR. Poi mi sono ritrovato all'interno dei terreni del mio castello, con il mastio (la torre principale) in cima alla collina di fronte a me. Non ho installato nulla. È la stessa pagina web che apriresti su un laptop.

Questo funziona grazie a due cose. I browser hanno un'API integrata per gli headset VR chiamata WebXR, e il gioco utilizza già Babylon.js, un motore 3D che sa come usarla.

Come il browser gestisce la VR

WebXR consente a una pagina web di comunicare con un headset VR. Il browser del Quest ce l'ha, così come Chrome ed Edge su un computer con un headset PC VR collegato. Safari sull'iPhone no.

Innanzitutto, la pagina chiede al browser se la VR è disponibile. In caso affermativo, la pagina mostra un pulsante Enter VR. Devi fare clic su qualcosa per avviare la VR, poiché i browser non consentono a una pagina di farlo autonomamente (è la stessa regola che impedisce ai video di avviarsi automaticamente con l'audio).

Dopo aver fatto clic, il browser prende il controllo dello schermo dell'headset. Molte volte al secondo comunica alla pagina la posizione della tua testa e delle tue mani. La pagina quindi disegna il gioco due volte, una per ogni occhio, ciascuna da un punto leggermente diverso. Questa piccola differenza è ciò che fa apparire le cose in 3D nell'headset.

// WebXR puro, nessun motore
if (await navigator.xr?.isSessionSupported("immersive-vr")) {
  button.onclick = async () => {
    const session = await navigator.xr.requestSession("immersive-vr");
    const space = await session.requestReferenceSpace("local-floor");
    session.requestAnimationFrame(function frame(time, xrFrame) {
      const pose = xrFrame.getViewerPose(space);
      for (const view of pose.views) {
        // disegna la scena con view.transform e view.projectionMatrix
      }
      session.requestAnimationFrame(frame);
    });
  };
}

La parte local-floor dice al browser di posizionare il pavimento del gioco sul tuo pavimento reale, in modo da vedere il mondo dalla tua altezza.

Il browser si occupa delle parti difficili, come il tracciamento della testa e l'adattamento dell'immagine alle lenti. Il gioco si limita a disegnare ciò che vede la telecamera.

Come aiuta Babylon.js

Non ho scritto io quel codice. Babylon.js ha un helper chiamato WebXRDefaultExperience che lo fa per te. Avvia la sessione VR e muove la telecamera quando muovi la testa. Ti fornisce anche puntatori laser sui controller e ti permette di teletrasportarti. Questo è all'incirca tutto l'allestimento di cui avevo bisogno.

const xr = await WebXRDefaultExperience.CreateAsync(scene, {
  disableDefaultUI: true,
  floorMeshes: [ground],
  disableHandTracking: true,
  inputOptions: {
    doNotLoadControllerMeshes: true,
    disableOnlineControllerRepository: true,
  },
  teleportationOptions: { forceHandedness: "right" },
});

// più tardi, dal pulsante Enter VR
await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");

Non ho dovuto cambiare il gioco stesso. È lo stesso mondo 3D che vedi su un laptop, con gli stessi edifici, persone e barche. Se punti a un edificio e premi il grilletto, il suo nome appare sopra di esso. Premi di nuovo il grilletto e il gioco ti fa uscire dalla VR con il menu di quell'edificio aperto. Gestire il tuo castello è ancora più facile su uno schermo normale.

Le persone su telefoni e laptop non scaricano alcun codice VR. Viene caricato solo sui dispositivi che possono utilizzarlo.

Cosa è andato storto

Non ha funzionato al primo tentativo. Gli stick analogici sui controller all'inizio non facevano nulla. Babylon scarica un file per ogni controller che indica quali pulsanti ha, ma le impostazioni di sicurezza del mio sito bloccano quel download. Senza il file, Babylon trattava i controller come se avessero solo un grilletto. Ho risolto inserendo quei file all'interno del gioco in modo che non debba scaricarli.

Quando ho aggiunto la camminata con lo stick sinistro, il pulsante Enter VR è scomparso. La camminata integrata di Babylon non può essere attivata contemporaneamente al teletrasporto, quindi la configurazione VR è andata in crash. Ho scritto la mia camminata invece, circa 30 righe di codice. Lo stick sinistro ti fa camminare nella direzione in cui stai guardando, e lo stick destro ti teletrasporta o ti fa girare a scatti. Ho omesso la rotazione fluida perché fa sentire male molte persone.

I colori sembravano strani nell'headset. Il gioco regola i suoi colori come ultimo passaggio sulla telecamera normale, e quel passaggio non viene eseguito sulla telecamera VR, quindi ho dovuto applicarlo in un altro modo in VR.

Il gioco si è anche bloccato non appena sono entrato in VR. Per risparmiare batteria, smette di disegnare quando passi a un'altra scheda. Il browser del Quest ha comunicato al gioco che la sua scheda era nascosta mentre ero in VR, quindi il gioco si è fermato. Ora continua a disegnare mentre la VR è attiva.

La GPU del Quest è potente quanto quella di un telefono e deve disegnare tutto due volte, quindi ottiene l'impostazione grafica bassa del gioco. Anche alcuni telefoni dichiarano di supportare la VR (per visori cardboard), quindi mostro il pulsante solo su headset e computer.

L'accesso è stato un problema separato, poiché digitare una password su una tastiera fluttuante è doloroso. Ho scritto su come l'ho risolto in accedere a un headset VR come fa la tua TV.