WebVR — виртуальная веб-реальность

Рекомендация: используйте редактор NSDT для быстрого создания сценариев 3D-приложений.

устройство виртуальной реальности

С появлением на горизонте Oculus Rift и многих других производственных устройств будущее выглядит светлым — у нас уже есть достаточно технологий, чтобы сделать виртуальную реальность «достаточно хорошей», чтобы можно было играть в игры. На выбор есть множество устройств: от настольных компьютеров, таких как Oculus Rift или HTC Vive, игровых консолей с Playstation VR (которая в настоящее время не поддерживает WebVR) до мобильных устройств, таких как Gear VR или Google Cardboard.

Примечание. Для получения дополнительной информации прочтите нашу статью о концепциях WebVR.

API веб-VR

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

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

Поддержка браузера и статус спецификаций

В настоящее время поддержка API WebVR в браузерах все еще является экспериментальной — она работает в ночных сборках Firefox и в экспериментальных версиях Chrome (Mozilla и Google работают вместе, чтобы это реализовать), но рано или поздно мы увидим это в обычных выпусках. к этому.

Спецификация WebVR находится в статусе редакционного проекта, что означает, что она все еще может быть изменена. Разработкой руководили Владимир Вукичевич из Mozilla и Брэндон Джонс из Google. Для получения дополнительной информации обязательно посетите https://mixedreality.mozilla.org/ и веб-сайт WebVR.info.

Использование API WebVR

API WebVR основан на двух концепциях — отправке стереоскопических изображений на две линзы в гарнитуре и получении данных о положении головы от датчиков, которые обрабатываются HMDVRDevice (Head Mounted Display Virtual Reality Device) PositionSensorVRDevice.

получить оборудование

Чтобы получить информацию об устройствах, подключенных к вашему компьютеру, вы можете использовать  Navigator/getVRDisplay метод:

.JS скопирован в буфер обмена

navigator.getVRDevices().then((devices) => {
  for (let i = 0; i < devices.length; ++i) {
    if (devices[i] instanceof HMDVRDevice) {
      gHMD = devices[i];
      break;
    }
  }
  if (gHMD) {
    for (let i = 0; i < devices.length; ++i) {
      if (
        devices[i] instanceof PositionSensorVRDevice &&
        devices[i].hardwareUnitId === gHMD.hardwareUnitId
      ) {
        gPositionSensor = devices[i];
        break;
      }
    }
  }
});

Этот код перебирает доступные устройства и назначает соответствующий датчик гарнитуре — первый массив содержит подключенные устройства, выполняет проверку на предмет и  HMDVRDeviceприсваивает его переменной — с помощью этого вы можете установить сцену, получить параметры глаза, установить поле зрения и т. д. Например:devicesgHMD

.JS скопирован в буфер обмена

function setCustomFOV(up, right, down, left) {
  const testFOV = new VRFieldOfView(up, right, down, left);

  gHMD.setFieldOfView(testFOV, testFOV, 0.01, 10000.0);
}

Эта переменная хранится  PositionSensorVRDevice — используя ее, вы можете получить текущее положение или состояние ориентации (например, обновлять вид сцены каждый кадр) или сбросить датчик. Например, следующий код выводит на экран информацию о местоположении:gPositionSensor

.JS скопирован в буфер обмена

function setView() {
  const posState = gPositionSensor.getState();

  if (posState.hasPosition) {
    const format = (axis) => `${axis}${roundToTwo(posState.position[axis])}`;
    posPara.textContent = `Position: ${axis("x")} ${axis("y")} ${axis("x")}`;
    xPos = -posState.position.x * WIDTH * 2;
    yPos = posState.position.y * HEIGHT * 2;
    zPos = -posState.position.z > 0.01 ? -posState.position.z : 0.01;
  }

  // …
}

См. раздел «Использование API WebVR» для получения полного описания демо и более подробной информации.

инструменты и методы

В первых экспериментах и ​​демонстрациях WebVR использовался Three.js, поскольку это, вероятно, самый популярный 3D-движок в сети. Ознакомьтесь с функциями VREffect и VRControls, доступными на сайте Three.js GitHub, которые помогут вам реализовать WebVR и работать с ним с помощью Three.js.

Борис Смус написал о концепции адаптивного WebVR, когда в одну веб-игру можно играть на различных устройствах, таких как ноутбук без аппаратного обеспечения VR, ПК с Oculus Rift или смартфоны Google Cardboard, и при этом обеспечивать уникальный и ценный опыт на всех устройствах. Это похоже на адаптивный дизайн, но применительно к миру виртуальной реальности — напишите один раз и запустите в любой гарнитуре виртуальной реальности или без нее. Вы можете ознакомиться с шаблонным ресурсом WebVR — это отличный пример для начала изучения WebVR и отправная точка для любого  опыта виртуальной реальности через Интернет .

Существует также среда разметки под названием A-Frame, которая предоставляет простые строительные блоки для WebVR, чтобы вы могли быстро создавать и экспериментировать с VR-сайтами и играми: для получения более подробной информации прочитайте руководство «Создание базовой демонстрации с помощью A-Frame».

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

Будущее WebVR

Это происходит: потребительские устройства сейчас выходят на рынок, и у нас уже есть API-интерфейсы JavaScript, поддерживающие их в Интернете. Все, что нам сейчас нужно, — это стабильная спецификация, хороший UX и UI, лучшее оборудование и больше инструментов и библиотек — все это уже на горизонте. Сейчас идеальное время, чтобы окунуться и попробовать WebVR.

Исходная ссылка: WebVR — сетевая виртуальная реальность (mvrlink.com)