API WebVR

WebVR обеспечивает поддержку экспонирования устройств виртуальной реальности — например, шлемов виртуальной реальности, таких как Oculus Rift или HTC Vive, — для веб-приложений, позволяя разработчикам преобразовывать информацию о положении и движении со стороны дисплея в перемещение по 3D-сцене. Это имеет множество интересных применений, от виртуальных экскурсий по продуктам и интерактивных обучающих приложений до захватывающих игр от первого лица.

Любые устройства VR, подключенные к вашему компьютеру, будут возвращены методом Navigator.getVRDisplays(); каждое из них будет представлено объектом VRDisplay.

VRDisplay — это центральный интерфейс в API WebVR — через его свойства и методы вы можете получить доступ к функциям для:

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

Типичное (простое) приложение WebVR будет работать следующим образом:

1. Navigator.getVRDisplays() используется для получения ссылки на дисплей VR.
2. VRDisplay.requestPresent() используется для начала отображения на дисплее VR.
3. Специальный метод WebVR VRDisplay.requestAnimationFrame() используется для запуска цикла отрисовки приложения с правильной частотой обновления для дисплея.
4. Внутри цикла отрисовки вы получаете данные, необходимые для отображения текущего кадра (VRDisplay.getFrameData()), рисуете отображаемую сцену дважды — один раз для вида каждого глаза, затем отправляете отрисованный вид на дисплей, чтобы показать его пользователю (VRDisplay.submitFrame()).

Кроме того, WebVR 1.1 добавляет ряд событий в объект Window, чтобы JavaScript мог реагировать на изменения состояния дисплея.

API WebVR, который никогда не был ратифицирован как веб-стандарт, устарел в пользу API WebXR, который находится на стадии завершения процесса стандартизации. Поэтому вы должны попытаться обновить существующий код для использования нового API вместо него. Как правило, переход должен быть довольно безболезненным.

Кроме того, на некоторых устройствах и/или браузерах WebVR требует, чтобы страница загружалась с помощью защищенного контекста, по HTTPS-соединению. Если страница не полностью защищена, методы и функции WebVR будут недоступны. Вы можете легко проверить это, проверив, доступен ли метод Navigator getVRDisplays() NULL:

if (!navigator.getVRDisplays) {
  console.error("WebVR is not available");
} else {
  /* Use WebVR */
}

Многие системы WebVR с аппаратным обеспечением содержат контроллеры, которые используются вместе со шлемом. Они могут использоваться в приложениях WebVR через API Gamepad, а конкретно через API расширений Gamepad, который добавляет функциональные возможности API для доступа к позе контроллера, гаптическим актуаторам и др.

VRDisplay

Представляет любое устройство VR, поддерживаемое этим API. Он включает общую информацию, такую как идентификаторы устройств и описания, а также методы для начала отображения VR-сцены, получения параметров глаз и возможностей отображения, и другие важные функции.

VRDisplayCapabilities

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

VRDisplayEvent

Представляет объект события, связанный с событиями WebVR (см. события окна, перечисленные ниже).

VRFrameData

Представляет всю информацию, необходимую для отрисовки одного кадра VR-сцены; создаётся методом VRDisplay.getFrameData().

VRPose

Представляет состояние положения в данный момент времени (включая ориентацию, положение, скорость и ускорение).

VREyeParameters

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

VRFieldOfView

Представляет поле зрения, определяемое 4 различными значениями градусов, описывающими вид из центральной точки.

VRLayerInit

Представляет слой, который должен быть отображен на VRDisplay.

VRStageParameters

Представляет значения, описывающие область сцены для устройств, которые поддерживают масштабируемые по комнате опыты.

API WebVR расширяет следующие API, добавляя указанные функции.

Gamepad

Gamepad.displayId Только для чтения

Возвращает VRDisplay.displayId связанного VRDisplay — VRDisplay, управляющего отображением сцены.

Navigator

Navigator.activeVRDisplays Только для чтения

Возвращает массив, содержащий все объекты VRDisplay, которые в настоящее время отображаются (VRDisplay.isPresenting true).

Navigator.getVRDisplays()

Возвращает обещание, которое разрешается до массива объектов VRDisplay, представляющих любые доступные устройства VR, подключенные к компьютеру.

События окна

vrdisplaypresentchange

Срабатывает, когда изменяется состояние отображения VR-дисплея — то есть переходит от отображения к отсутствию отображения или наоборот.

vrdisplayconnect

Срабатывает, когда совместимое устройство VR было подключено к компьютеру.

vrdisplaydisconnect

Срабатывает, когда совместимое устройство VR было отключено от компьютера.

vrdisplayactivate

Срабатывает, когда дисплей может быть отображён.

vrdisplaydeactivate

Срабатывает, когда дисплей больше не может быть отображён.

Вы можете найти ряд примеров по этим адресам:

• webvr-tests — очень простые примеры, которые сопровождают документацию MDN WebVR.
• Carmel starter kit — симпатичные простые, хорошо задокументированные примеры, которые связаны с Carmel, браузером WebVR от Facebook.
• WebVR.info samples — немного более подробные примеры плюс исходный код
• Главная страница A-Frame — примеры, демонстрирующие использование A-Frame

Этот API был описан в старом API WebVR, который был заменён API устройств WebXR. Он больше не находится на пути к стандартизации.

Пока все браузеры не реализуют новые API WebXR, рекомендуется полагаться на фреймворки, такие как A-Frame, Babylon.js или Three.js, или полифилл, для разработки приложений WebXR, которые будут работать во всех браузерах. Прочитайте руководство Meta's Porting from WebVR to WebXR для получения дополнительной информации.

• A-Frame — Открытая веб-платформа для создания VR-опытов.
• webvr.info — Актуальная информация о WebVR, настройке браузера и сообществе.
• threejs-vr-boilerplate — Полезная стартовая шаблон для написания приложений WebVR.
• Web VR полифилл — Реализация WebVR на JavaScript.
• Веб-каталог WebVR — Список качественных сайтов WebVR.