Основы WebXR

WebXR, с API устройств WebXR в основе, предоставляет функциональность для внедрения дополненной и виртуальной реальности (AR и VR) в веб. Вместе эти технологии называются смешанной реальностью (MR) или кросс-реальностью (XR). Смешанная реальность — обширная и сложная тема, требующая изучения многих других API для создания увлекательного пользовательского опыта.

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

WebXR — это API, позволяющий веб-контенту и приложениям взаимодействовать с оборудованием смешанной реальности, таким как VR-шлемы и очки с интегрированными функциями дополненной реальности. Это включает в себя управление процессом рендеринга необходимых представлений для моделирования 3D-опыта и возможность определения движения шлема (или другого устройства отслеживания движений) и предоставления данных для обновления отображаемой пользователю информации.

WebXR также поддерживает прием ввода данных от контроллеров, таких как VR-контроллеры или специализированные геймпады смешанной реальности.

WebXR не является технологией рендеринга и не предоставляет функций для управления 3D-данными или их рендеринга на дисплее. Важно помнить об этом факте. Хотя WebXR управляет синхронизацией, планированием и различными точками зрения, релевантными для отрисовки сцены, он не умеет загружать и управлять моделями, а также рендерить и текстурировать их и так далее. Все это полностью зависит от вас. К счастью, WebGL и различные основанные на WebGL фреймворки и библиотеки делают эту задачу гораздо проще.

WebVR считался экспериментальным API, предназначенным для определения лучших подходов к созданию API виртуальной реальности в веб. Разработчики браузеров добавили поддержку WebVR в браузеры, позволив веб-разработчикам проводить эксперименты. Но вскоре стало ясно, что для завершения API виртуальной реальности в веб было бы целесообразнее начать новый стандарт, чем пытаться «исправить» WebVR.

Это привело к появлению WebXR. Основное различие заключается в том, что WebXR поддерживает не только виртуальную реальность, но и дополненную реальность, которая сочетает виртуальные объекты с окружающей средой пользователя.

Другим ключевым отличием является то, что WebXR имеет встроенную поддержку передовых контроллеров ввода, используемых с большинством шлемов смешанной реальности, в то время как WebVR полагался на API Gamepad для поддержки контроллеров. В WebXR основные действия «выбор» и «сжатие» напрямую поддерживаются с помощью событий, в то время как другие элементы управления доступны через специальную реализацию WebXR объекта Gamepad.

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

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

Что такое область обзора?

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

Человеческий глаз способен охватить область обзора около 135°. При условии, что у человека два здоровых глаза, общая область обзора составляет примерно от 200° до 220° в ширину. Почему область обзора шире с двумя глазами, но не в два раза больше области обзора одного глаза? Потому что области обзора двух глаз сильно перекрываются. Это перекрытие обеспечивает нам восприятие глубины, которое составляет около 115° в ширину. За пределами области перекрытия наше зрение переходит к монокулярному.

На рисунке показана концепция FOV: синяя область для левого глаза, красная — для правого. Светло-коричневая область перекрытия — это место, где у зрителя есть бинокулярное зрение и он может воспринимать глубину. Если присмотреться, вы увидите, что каждый глаз видит кубик немного по-разному, и объединённый вид соединяет их в 3D-форму.

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

Область обзора и устройства смешанной реальности

Чтобы добиться достаточной области обзора, чтобы глаза пользователя были обмануты, поверив, что виртуальный мир полностью их окружает, область обзора должна по крайней мере приближаться к ширине области бинокулярного зрения. Базовые шлемы обычно начинаются с примерно 90° и более, а лучшие шлемы, как правило, имеют область обзора около 150°. Поскольку область обзора зависит от размера линз и расстояния между ними и глазами пользователя, есть ограничения на то, насколько широкой может быть область обзора, не вживляя линзы в глаза пользователя.

Широкая область обзора может значительно улучшить ощущение погружения пользователя. Однако увеличение области обзора также может увеличить вес и стоимость шлема.

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

Рисунок: Диаграмма, демонстрирующая движения, возможные с оборудованием с 3 степенями свободы: крен, тангаж и рыскание.

Свобода вращательного движения

Первые три степени свободы — вращательные. Вращательные степени свободы:

• Крен: наклон вверх и вниз
• Тангаж: наклон влево и вправо
• Рыскание: поворот влево и вправо

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

Типичный базовый шлем предлагает три степени свободы, распознавая вращение вокруг всех трех осей. Это часто обозначается сокращением 3DoF.

Свобода поступательного движения

Другие три степени свободы — поступательные, обеспечивающие возможность определения движения в пространстве: вперед и назад, влево и вправо, вверх и вниз. Поддержка всех шести степеней свободы обозначается как 6DoF.

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

WebXR поддерживает сеансы дополненной реальности (AR) и виртуальной реальности (VR), используя один и тот же API. Тип сеанса, который вы хотите создать, указывается при создании сеанса. Это делается путем указания соответствующей строки режима сеанса для типа сеанса, который вы хотите создать.

Виртуальная реальность

В виртуальной среде все изображение создаётся цифровым способом приложением или сайтом, от объектов переднего плана до заднего плана или небосвода. Код отрисовки кадра должен перерисовывать каждый пиксель каждого вида в каждом кадре, чтобы избежать появления артефактов. Некоторые платформы могут предоставлять вам предварительно очищенные кадры, в то время как другие могут оптимизировать производительность, не стирать буферы кадров, чтобы избежать необходимости касаться каждого пикселя дважды за кадр.

В WebXR доступны два режима сеанса VR: встроенный и погружённый. Первый, задаваемый строкой режима сеанса inline, отображает рендеренную сцену в контексте документа в веб-браузере и не требует специального оборудования XR для просмотра. Режим сеанса погружения обозначается режимом сеанса immersive-vr. Этот режим сеанса требует устройства XR, например, шлема, и заменяет весь мир рендеренной сценой, используя отображаемые изображения для каждого глаза пользователя.

Дополненная реальность

В дополненной реальности (AR) пользователь видит визуализируемые вами изображения, наложенные на физическую реальную окружающую среду. Поскольку AR всегда является погружённым опытом, в котором сцена представляет собой весь мир вокруг пользователя (а не находится в коробке на экране), единственным режимом сеанса AR является immersive-ar.

Существует два основных типа устройств AR:

• Устройства, использующие камеры для захвата мира перед пользователем, отображения содержимого WebXR поверх этого изображения и затем отображения изображения на экране. К этим устройствам относятся телефоны, которые показывают результирующую сцену на экране устройства в 2D-представлении, а также очки, использующие пару камер, по одной для каждого глаза, для захвата сцены в стерео для сохранения глубины мира, а затем рендеринг сцены WebXR для каждого глаза с захваченным фоном этого глаза на месте.
• Устройства, использующие прозрачные очки, позволяющие пользователю видеть мир, при этом накладывая рендеренное изображение поверх сцены. Таким образом, пользователь напрямую видит реальный мир, а не серию цифровых фотографий.

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

Самый простой способ представления XR — отобразить сцену непосредственно на экране пользователя, либо в контексте веб-документа, либо в полноэкранном режиме. Это наиболее распространено, когда у пользователя нет выделенного устройства XR или когда пользователь просматривает приложение AR или VR на телефоне или другом портативном устройстве.

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

Большинство захватывающих виртуальных реалий создаются с использованием очков или шлемов. Шлем виртуальной реальности надевается на голову с ремешком, который проходит за головой для фиксации, и с одним или двумя дисплеями, экраны которых сфокусированы на глаза с помощью линз. Представление немного отличающегося изображения для каждого глаза создаёт иллюзию глубины, предоставляя пользователю смоделированный 3D-опыт.

Большинство шлемов используют один дисплей, рамка которого разделена пополам, при этом одна половина фокусируется на каждом глазе пользователя. Например, если шлем использует экран 2560x1440, при этом левая половина используется для изображения левого глаза, а правая половина — для правого, буфер кадра используется следующим образом:

У самых простых шлемов нет встроенных датчиков, и каждая половина экрана фокусируется на соответствующем глазе. Примером этого является Google Cardboard, тип шлема, впервые созданный Google, который может быть изготовлен из картона или других недорогих материалов. Эти устройства часто работают путём размещения телефона в шлеме, чтобы его экран и встроенный графический процессор могли использоваться для рендеринга и отображения XR-сцены.

Более продвинутые шлемы имеют встроенные дисплеи и крепятся к голове с помощью эластичной или ремённой системы, либо системы с застёжкой-липучкой. Эти шлемы могут включать встроенные динамики и микрофон, и/или разъёмы для подключения внешних устройств. Кроме того, эти шлемы могут иметь различные датчики для определения перемещения шлема в пространстве. Типы и количество датчиков определяют, сколько степеней свободы имеет пользователь.

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

Разница заключается в том, что очки пропускают реальный мир, накладывая рендеренное изображение поверх физической среды пользователя. Это делается без цифрового воспроизведения мира, как это необходимо с полным шлемом. Вместо этого поверхность дисплея является прозрачной, и если ничего не отображается, она практически идентична обычным очкам. Когда объекты рисуются, они рисуются на линзах очков, частично или полностью блокируя вид физической среды в затенённой части линзы.

Cave Automated Virtual Environment (CAVE) — это захватывающая среда виртуальной реальности, в которой сцена проецируется или иным образом отображается на стенах (а также, возможно, на потолке и/или полу), полностью окружая пользователя симуляцией и позволяя ему погрузиться в сцену. Пользователь носит 3D-очки, которые добавляют 3D-эффект к проецируемому изображению, но также обеспечивают системе возможность рендеринга объектов переднего плана в мире.

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

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

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

Недуги от виртуальной реальности — это состояние, при котором человек, испытывающий виртуальную реальность, чувствует дискомфорт, дезориентацию или даже серьёзную тошноту во время и иногда в течение короткого времени после опыта.

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

Неисправности, смещения или искажения могут сбить с толку глаза и мозг, приводя к чему угодно, от боли в глазах или головной боли до головокружения, потери равновесия или потенциальной сильной тошноты. Также важно обращать внимание на всё, что вы отображаете, что может спровоцировать судороги, учитывая всеобъемлющий характер шлема; пользователь может не иметь возможности быстро отвести взгляд от изображения, если оно вызывает дискомфорт.

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

Если шлем пользователя подключён к устройству, следует позаботиться о том, чтобы пользователя не побуждали и не склоняли к таким движениям, которые могут привести к растяжению или рывкам за кабель шлема, что может не только привести к травмам, но и к значительным повреждениям шлема или устройства пользователя (будь то телефон или компьютер).

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

Поскольку 3D-графика, особенно смешанная реальность, включает в себя много часто сложных математических вычислений, управления данными и других сложных задач, вряд ли вы будете напрямую использовать WebGL для рендеринга сцены в большинстве случаев. Вместо этого вы, скорее всего, будете выполнять большую часть своей работы, используя один из фреймворков или библиотек, которые построены поверх WebGL, чтобы сделать его более удобным в использовании.

Особым преимуществом использования фреймворка вместо непосредственного использования API WebGL является то, что библиотеки обычно реализуют виртуальную камеру. OpenGL (и, следовательно, WebGL по расширению) не предоставляет прямого представления камеры, использование библиотеки, которая моделирует её от вашего имени, может значительно облегчить вашу работу, особенно при создании кода, позволяющего свободно перемещаться по вашему виртуальному миру.

Поскольку WebGL используется для рендеринга 3D-мира в сессию WebXR, вы должны сначала ознакомиться с общим использованием WebGL и основами 3D-графики в целом.

Эти фреймворки хорошо подходят для программирования общего назначения, а также для разработки игр, когда вы хотите самостоятельно заниматься логикой. Они предназначены для создания и анимации 3D-сцен вне зависимости от контекста.

• A-Frame (специально разработан для создания приложений на основе WebXR)
• Babylon.js
• Three.js

Наборы инструментов для игр разработаны для разработчиков игр и часто включают функции, специфичные для игр, такие как модели физики, системы управления вводом, управление активами, воспроизведение 3D-звука и т. п.

• PlayCanvas

Имея эти основные факты, вы готовы к следующим шагам в мир смешанной реальности. В этом могут помочь следующие статьи.

• Жизненный цикл приложения WebXR
• Запуск и завершение сессии WebXR
• Перемещение, ориентация и движение: пример WebXR