Wie mein Browser-Spiel in VR auf einer Meta Quest läuft

Mein Spiel Bannermarch läuft im Browser, und da es jetzt 3D ist, wollte ich sehen, ob ich es in VR spielen kann. Das geht. Ich habe mein Meta Quest aufgesetzt, das Spiel im Browser des Headsets geöffnet und auf eine Schaltfläche geklickt, auf der Enter VR steht. Dann stand ich auf meinem Burggelände, mit dem Bergfried (dem Hauptturm) auf seinem Hügel vor mir. Ich habe nichts installiert. Es ist dieselbe Webseite, die Sie auf einem Laptop öffnen würden.

Das funktioniert dank zweier Dinge. Browser haben eine eingebaute API für VR-Headsets namens WebXR, und das Spiel verwendet bereits Babylon.js, eine 3D-Engine, die weiß, wie sie diese nutzt.

Wie der Browser VR macht

WebXR ermöglicht es einer Webseite, mit einem VR-Headset zu kommunizieren. Der Quest-Browser hat es, ebenso wie Chrome und Edge auf einem Computer mit angeschlossenem PC-VR-Headset. Safari auf dem iPhone nicht.

Zuerst fragt die Seite den Browser, ob VR verfügbar ist. Wenn ja, zeigt die Seite eine Schaltfläche „Enter VR“ an. Sie müssen etwas anklicken, um VR zu starten, da Browser es einer Seite nicht erlauben, dies von selbst zu tun (das ist dieselbe Regel, die verhindert, dass Videos mit Ton automatisch abgespielt werden).

Nachdem Sie geklickt haben, übernimmt der Browser den Bildschirm des Headsets. Viele Male pro Sekunde teilt er der Seite mit, wo sich Ihr Kopf und Ihre Hände befinden. Die Seite zeichnet dann das Spiel zweimal, einmal für jedes Auge, jeweils von einem leicht unterschiedlichen Punkt aus. Dieser kleine Unterschied ist es, der Dinge im Headset 3D aussehen lässt.

// Plain WebXR, keine Engine
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) {
        // draw the scene with view.transform and view.projectionMatrix
      }
      session.requestAnimationFrame(frame);
    });
  };
}

Der Teil local-floor weist den Browser an, den Boden des Spiels dort zu platzieren, wo sich Ihr echter Boden befindet, sodass Sie die Welt aus Ihrer eigenen Höhe sehen.

Der Browser erledigt die schwierigen Teile, wie das Tracking Ihres Kopfes und die Anpassung des Bildes an die Linsen. Das Spiel zeichnet nur, was die Kamera sieht.

Wie Babylon.js hilft

Ich habe diesen Code nicht selbst geschrieben. Babylon.js hat eine Hilfsfunktion namens WebXRDefaultExperience, die das für Sie erledigt. Sie startet die VR-Sitzung und bewegt die Kamera, wenn Sie Ihren Kopf bewegen. Sie bietet auch Laser-Pointer auf den Controllern und ermöglicht Ihnen das Teleportieren. Das ist ungefähr die gesamte Einrichtung, die ich brauchte.

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

// später, von der Enter VR-Schaltfläche aus
await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");

Ich musste das Spiel selbst nicht ändern. Es ist dieselbe 3D-Welt, die Sie auf einem Laptop sehen, mit denselben Gebäuden, Menschen und Booten. Wenn Sie auf ein Gebäude zeigen und den Abzug betätigen, erscheint dessen Name darüber. Betätigen Sie den Abzug erneut, und das Spiel bringt Sie aus der VR heraus, mit dem Menü dieses Gebäudes geöffnet. Die Verwaltung Ihrer Burg ist auf einem normalen Bildschirm immer noch einfacher.

Personen auf Smartphones und Laptops laden keinen VR-Code herunter. Er wird nur auf Geräten geladen, die ihn verwenden können.

Was schiefging

Es hat beim ersten Versuch nicht funktioniert. Die Daumensticks der Controller taten anfangs nichts. Babylon lädt für jeden Controller eine Datei herunter, die angibt, welche Tasten er hat, aber die Sicherheitseinstellungen meiner Website blockieren diesen Download. Ohne die Datei behandelte Babylon die Controller so, als hätten sie nur einen Abzug. Ich habe es behoben, indem ich diese Dateien in das Spiel integriert habe, sodass sie nicht heruntergeladen werden müssen.

Als ich das Gehen mit dem linken Stick hinzufügte, verschwand die Schaltfläche „Enter VR“. Das integrierte Gehen von Babylon kann nicht gleichzeitig mit dem Teleportieren aktiviert werden, sodass das VR-Setup abstürzte. Ich habe stattdessen mein eigenes Gehen geschrieben, etwa 30 Codezeilen. Der linke Stick bewegt Sie in die Richtung, in die Sie schauen, und der rechte Stick teleportiert Sie oder dreht Sie in Schritten. Ich habe das sanfte Drehen weggelassen, da es vielen Leuten Übelkeit verursacht.

Die Farben sahen im Headset falsch aus. Das Spiel passt seine Farben als letzten Schritt für die normale Kamera an, und dieser Schritt wird für die VR-Kamera nicht ausgeführt, sodass ich ihn in VR auf andere Weise anwenden musste.

Das Spiel fror auch ein, sobald ich in VR ging. Um Akku zu sparen, hört es auf zu zeichnen, wenn Sie zu einem anderen Tab wechseln. Der Quest-Browser teilte dem Spiel mit, dass sein Tab versteckt sei, während ich in VR war, sodass das Spiel stoppte. Jetzt zeichnet es weiter, solange VR eingeschaltet ist.

Der Grafikchip der Quest ist ungefähr so stark wie der eines Telefons, und er muss alles zweimal zeichnen, daher erhält er die niedrige Grafikeinstellung des Spiels. Einige Telefone geben auch an, dass sie VR unterstützen (für Cardboard-Viewer), daher zeige ich die Schaltfläche nur auf Headsets und Computern an.

Die Anmeldung war ein separates Problem, da das Eingeben eines Passworts auf einer schwebenden Tastatur schmerzhaft ist. Ich habe darüber geschrieben, wie ich es gelöst habe, in Anmeldung eines VR-Headsets wie bei Ihrem Fernseher.