Как моя браузерная игра работает в VR на Meta Quest

Моя игра Bannermarch работает в браузере, и поскольку теперь она 3D, я хотел посмотреть, смогу ли я играть в нее в VR. Вы можете. Я надел свой Meta Quest, открыл игру в браузере гарнитуры и нажал кнопку «Войти в VR». Затем я оказался внутри территории моего замка, с донжоном (главной башней) на холме передо мной. Я ничего не устанавливал. Это та же веб-страница, которую вы открыли бы на ноутбуке.

Это работает благодаря двум вещам. В браузерах есть встроенный API для VR-гарнитур под названием WebXR, а игра уже использует Babylon.js, 3D-движок, который умеет им пользоваться.

Как браузер обеспечивает VR

WebXR позволяет веб-странице взаимодействовать с VR-гарнитурой. Браузер Quest имеет его, как и Chrome и Edge на компьютере с подключенной VR-гарнитурой для ПК. Safari на iPhone — нет.

Сначала страница спрашивает браузер, доступен ли VR. Если да, то страница показывает кнопку «Войти в VR». Вам нужно что-то нажать, чтобы начать VR, потому что браузеры не позволяют странице делать это самостоятельно (это то же правило, которое запрещает автовоспроизведение видео со звуком).

После нажатия браузер берет на себя управление экраном гарнитуры. Много раз в секунду он сообщает странице, где находятся ваша голова и руки. Затем страница рисует игру дважды, по одному для каждого глаза, каждый с немного разной точки. Эта небольшая разница — то, что делает объекты объемными в гарнитуре.

// Обычный WebXR, без движка
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) {
        // нарисовать сцену с помощью view.transform и view.projectionMatrix
      }
      session.requestAnimationFrame(frame);
    });
  };
}

Часть local-floor говорит браузеру разместить пол игры на вашем реальном полу, чтобы вы видели мир со своей собственной высоты.

Браузер выполняет сложные задачи, такие как отслеживание головы и подгонка изображения под линзы. Игра просто рисует то, что видит камера.

Как помогает Babylon.js

Я не писал этот код сам. Babylon.js имеет помощник под названием WebXRDefaultExperience, который делает это за вас. Он запускает VR-сессию и перемещает камеру, когда вы двигаете головой. Он также предоставляет вам лазерные указки на контроллерах и позволяет телепортироваться. Это примерно вся настройка, которая мне была нужна.

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

// позже, из кнопки «Войти в VR»
await xr.baseExperience.enterXRAsync("immersive-vr", "local-floor");

Мне не пришлось менять саму игру. Это тот же 3D-мир, который вы видите на ноутбуке, с теми же зданиями, людьми и лодками. Если вы наведете курсор на здание и нажмете курок, над ним появится его название. Нажмите курок еще раз, и игра выведет вас из VR с открытым меню этого здания. Управлять своим замком по-прежнему проще на обычном экране.

Люди на телефонах и ноутбуках не загружают код для VR. Он загружается только на устройствах, которые могут его использовать.

Что пошло не так

С первого раза не получилось. Стики на контроллерах сначала ничего не делали. Babylon загружает файл для каждого контроллера, который указывает, какие кнопки у него есть, но настройки безопасности моего сайта блокируют эту загрузку. Без файла Babylon рассматривал контроллеры так, как будто у них есть только курок. Я исправил это, поместив эти файлы внутрь игры, чтобы ей не нужно было их загружать.

Когда я добавил ходьбу с помощью левого стика, кнопка «Войти в VR» исчезла. Встроенная ходьба Babylon не может быть включена одновременно с телепортацией, поэтому настройка VR дала сбой. Вместо этого я написал свою собственную ходьбу, около 30 строк кода. Левый стик перемещает вас туда, куда вы смотрите, а правый стик телепортирует вас или поворачивает вас шагами. Я исключил плавный поворот, потому что от него многих укачивает.

Цвета выглядели неправильно в гарнитуре. Игра корректирует свои цвета как последний шаг для обычной камеры, и этот шаг не выполняется для VR-камеры, поэтому мне пришлось применить его другим способом в VR.

Игра также зависала, как только я входил в VR. Чтобы сэкономить заряд батареи, она перестает рисовать, когда вы переключаетесь на другую вкладку. Браузер Quest сообщил игре, что ее вкладка скрыта, пока я был в VR, поэтому игра остановилась. Теперь она продолжает рисовать, пока VR включен.

Графический чип Quest примерно так же мощный, как у телефона, и ему приходится рисовать все дважды, поэтому он получает низкие настройки графики игры. Некоторые телефоны также заявляют, что поддерживают VR (для картонных очков), поэтому я показываю кнопку только на гарнитурах и компьютерах.

Вход в систему был отдельной проблемой, поскольку набирать пароль на плавающей клавиатуре — мучение. Я написал о том, как я решил эту проблему, в «Вход в VR-гарнитуру так же, как ваш телевизор».