Разработка приложений виртуальной и дополненной реальности

Verge3D позволяет создавать приложения для дополненной реальности (AR) и виртуальной реальности (VR) на основе браузерной технологии WebXR (расшифровывается как «расширенная реальность для веба»). Кроме того, вы можете использовать формат USDZ и технологию Apple AR Quick Look, чтобы показывать ваши модели в режиме дополненной реальности на устройствах iPhone и iPad.

Содержание

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

Настройки

Устройства HTC Vive и Meta Quest поддерживаются технологией WebXR и должны работать из коробки. Для устройств подключаемых к компьютеру, типа HTC Vive Pro вам потребуется браузер Google Chrome (или подобный). Для мобильных устройств виртуальной реальности, типа Meta Quest, используйте встроенный браузер.

WebXR требует безопасного контекста. Приложения Verge3D должны обслуживаться через HTTPS или с URL-адреса localhost.

Создание VR-приложений

Наличие VR-режима проверяется с помощью пазла check VR mode, а вход в VR-режим осуществляется с помощью пазла enter VR mode.

Для VR-устройств без контроллеров взаимодействие с 3D-объектами осуществляется с помощью прицельного указателя.

Для VR-устройств с контроллерами взаимодействие осуществляется с помощью виртуального луча, исходящего из контроллеров.

Вы можете использовать стандартные пазлы when hovered или when clicked для захвата пользовательских действий, а также специфические для VR события перехватываемые с помощью пазла on session event.

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

При активации режима виртуальной реальности создаётся специальная стерео-камера, привязанная к устройству. Это означает, что штатные пазлы и режимы управления камерой, назначенные в 3D-пакетах не работают. Вместо них необходимо привязать камеру в некоему объекту (выполняющему функцию персонажа) и перемещать этот объект. Смотрите описание пазла camera control object чтобы получить больше информации.

В целом, вам потребуется реализовать свою собственную логику перемещения персонажа, в частности использовать физику чтобы ограничить его перемещения за пределами сцены. Однако для режима позиционирования камеры sitting or standing мы сделали библиотеку VR Controls, которая уже включает в себя всю необходимую функциональность.

Данная функциональность используется в демо-приложении «Виртуальная реальность» (исходные файлы доступны в магазине ассетов).

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

Настройки

Вы можете запускать свои приложения дополненной реальности на базе Verge3D на мобильных устройствах с операционными системами Android и iOS/iPadOS.

WebXR требует безопасного контекста. Приложения Verge3D должны обслуживаться через HTTPS или с URL-адреса localhost.

Android

Чтобы включить дополненную реальность, необходимо устройство Android, поддерживающее технологию ARCore, и последняя версия браузера Google Chrome. Также необходимо установить сервисы Google Play для AR. Установка этого пакета предлагается автоматически при первом входе в режим дополненной реальности, если он уже не был установлен ранее.

iOS и iPadOS

Для iPhone и iPad предусмотрено два способа запуска приложений дополненной реальности:

Установить браузер WebXR Viewer
Использовать формат USDZ для просмотра в штатном браузере Safari

Mozilla WebXR Viewer — это браузерное приложение на базе Firefox, которое поддерживает технологию дополненной реальности на устройствах Apple (начиная с iPhone модели 6s). Просто установите его из App Store. Преимущество данного решения заключается в том, что вы можете использовать штатную технологию WebXR (и те же самые пазлы) аналогично устройствам с ОС Android. Недостаток — необходимость установки ещё одного браузера (вам и вашим пользователям).

С помощью формата USDZ, вы можете использовать технологию Apple AR Quick Look, которая обеспечивает упрощённый просомотр моделей в режиме дополненной реальности в браузере Safari. При таком подходе вам потребуется использовать совершенно другой рендер, являющийся частью операционной системы iOS, что лишает вас возможности использовать сложные материалы и определять сценарии поведения приложений с помощью пазлов.

Создание AR-приложений для Android и WebXR Viewer

Режим AR можно настроить для любого приложения Verge3D с помощью пазла enter AR mode.

Войдя в режим AR, вы сможете позиционировать 3D-контент в "реальной" системе координат, которая совмещена с вашим мобильным устройством. Кроме того, вы можете обнаруживать горизонтальные поверхности (столы, полки, пол и т.д.) с помощью AR-пазла detect horizontal surface AR

Также, чтобы увидеть реальное окружение устройства через 3D-окно, необходимо включить опцию transparent background в пазле configure application.

Данная функциональность используется в демо-приложении «Дополненная реальность» (исходные файлы доступны в магазине ассетов).

Создание AR-приложений на основе формата USDZ

Чтобы войти в режим AR Quick Look вам потребуется создать USDZ-ассет. Для это вам надо будет экспортировать сцену (или отдельную модель) в процессе выполнения Verge3D-приложения (то есть на лету), либо создать данный ассет заранее в каком-нибудь пакете моделирования.

Подготовка USDZ-ассета в процессе выполнения

Этот подход основан на использовании пазла export to USDZ используемого для генерации USDZ-ассета (смотрите пример ниже).

Подготовка USDZ-ассета в пакете моделирования

На данный момент экспорт в USDZ поддерживается в только в 3ds Max. Для Blender вы можете попробовать неофициальный аддон BlenderUSDZ.

USDZ отличается от более привычного USD тем, что содержит не только геометрию, но и медиа-файлы, такие как PNG, JPEG, MP3. Таким образом, пакеты моделирования, поддерживающие экспорт в формат USD, не обязательно поддерживают USDZ.

Для пользователей macOS, iOS, iPadOS имеется ряд утилит доступных для загрузки с сайта Apple. С их помощью вы можете конверировать модели из форматов OBJ/FBX/glTF/USD в USDZ.

Загрузка USDZ

Чтобы просмотреть USDZ созданный заранее в пакете моделирования (или с использованием конвертера) вам нужно создать HTML-элемент в виде ссылки, содержащей изображение:


    <a id="enter_AR_button" rel="ar" href="model.usdz">
      <img src="media/enter_AR_button.png">
    </a>

Ссылка должна указывать на USDZ-ассет, например model.usdz. Изображение должно явно изображать возможность использования режима дополненной реальности, например содержать текст "Дополненая реальность". В примере выше данное изображение находится по пути media/enter_AR_button.png внутри директории приложения.

По нажатию на такую ссылку на устройстве с iOS, система определит что имеет дело с ассетом USDZ и откроет режим «АР Квик Лук», в котором вы можете позиционировать вашу модель, словно она находится в реальном мире:

При использовании пазлов подобная ссылка также может быть создана в процессе работы приложения:

Если же вы ходите создать USDZ-ассет на лету, вам потребуется следующий набор пазлов:

Отметьте разницу — тут мы используем пазл export to USDZ и назначаем дополнительный атрибут download на ссылку.

Перемещение в дополненной реальности

При активации режима дополненной реальности создаётся специальная камера, привязанная к устройству. Это означает, что штатные пазлы и режимы управления камерой, назначенные в 3D-пакетах не работают. Вместо них необходимо привязать камеру в некоему объекту (выполняющему функцию персонажа) и перемещать этот объект. Смотрите описание пазла camera control object чтобы получить больше информации.

Отладка в Google Chrome

Для ускорения итераций во время разработки вы можете использовать функцию port forwarding браузера Google Chrome для запуска вашего VR или AR-приложения в мобильном браузере. Это избавит вас от необходимости каждый раз заново загружать его на удаленный веб-сервер.

Что дальше?

Чтобы узнать, как написать сценарий вашего AR/VR-приложения с помощью пазлов, прочитайте следующий раздел. Также ознакомьтесь с руководством по физике если вы собираетесь моделировать реалистичную виртуальную среду со столкновениями объектов и/или персонажем.

Данная функциональность используется в демо-приложении «Снежки» (исходные файлы доступны в магазине ассетов).

Остались вопросы?

Задайте их на нашем форуме!