PWA на Oculus Quest 2

Oculus Quest 2 — это гарнитура виртуальной реальности (VR), разработанная Oculus, подразделением Meta. Теперь разработчики могут создавать и распространять 2D- и 3D-прогрессивные веб-приложения (PWA), использующие функцию многозадачности Oculus Quest 2.

Thomas Steiner

Alexey Rodionov

Oculus Quest 2

Oculus Quest 2 — гарнитура виртуальной реальности (VR), разработанная Oculus, подразделением Meta. Она является преемницей предыдущей модели Oculus Quest. Устройство может работать как автономно с операционной системой Android, так и с совместимым с Oculus программным обеспечением для виртуальной реальности, установленным на настольном компьютере при подключении по USB или Wi-Fi. Оно использует процессор Qualcomm Snapdragon XR2 с 6 ГБ оперативной памяти. Дисплей Quest 2 представляет собой одинарную быстропереключаемую ЖК-панель с разрешением 1832 × 1920 пикселей на глаз и частотой обновления до 120 Гц.

Браузер Oculus

В настоящее время для Oculus Quest 2 доступны три браузера: Wolvic , преемник Firefox Reality , и встроенный браузер Oculus . В этой статье мы рассмотрим последний. На сайте Oculus браузер представлен следующим образом.

Браузер Oculus поддерживает новейшие веб-стандарты и другие технологии, помогающие создавать виртуальную реальность в интернете. Современные 2D-сайты отлично работают в браузере Oculus, поскольку он работает на базе движка рендеринга Chromium. Он дополнительно оптимизирован для гарнитур Oculus, чтобы обеспечить максимальную производительность и позволить веб-разработчикам использовать весь потенциал виртуальной реальности с помощью новых API, таких как WebXR. Благодаря WebXR мы открываем двери к новым горизонтам развития интернета.

Пользовательский агент

На момент написания статьи строка пользовательского агента браузера выглядит следующим образом.

Mozilla/5.0 (X11; Linux x86_64; Quest 2)
AppleWebKit/537.36 (KHTML, like Gecko)
OculusBrowser/18.1.0.2.46.337441587
SamsungBrowser/4.0
Chrome/95.0.4638.74
VR
Safari/537.36

Как видите, текущая версия браузера Oculus 18.1.0.2.46.337441587 основана на Chrome 95.0.4638.74 , что всего на одну версию меньше текущей стабильной версии Chrome 96.0.4664.110 . Если пользователь переключается в мобильный режим, VR переключается в Mobile VR .

Пользовательский интерфейс

Пользовательский интерфейс браузера (показан выше) имеет следующие функции (верхний ряд слева направо):

• Кнопка «Назад»
• Кнопка перезагрузки
• Информация о сайте
• URL-адрес
• Кнопка «Создать закладку»
• Кнопка изменения размера с узкими, средними и широкими вариантами, а также функцией масштабирования
• Кнопка запроса мобильной версии сайта
• Кнопка меню со следующими опциями:
  • Войти в приватный режим
  • Закрыть все вкладки
  • Настройки
  • Закладки
  • Загрузки
  • История
  • Очистить данные браузера

Нижний ряд включает в себя следующие элементы:

• Кнопка закрытия
• Кнопка «Свернуть»
• Кнопка с тремя точками с опциями «Назад», «Вперед» и «Перезагрузить»

Частота обновления и соотношение пикселей устройства

В Oculus Quest 2 браузер Oculus отображает как 2D-контент веб-страниц, так и WebXR с частотой обновления 90 Гц. При просмотре полноэкранного контента браузер Oculus оптимизирует частоту обновления устройства в зависимости от частоты кадров видео, например, до 24 кадров в секунду. Соотношение пикселей устройства Oculus Quest 2 составляет 1,5 для чёткого текста.

PWA в браузере Oculus и магазине Oculus Store

28 октября 2021 года Джейкоб Росси , руководитель отдела управления продуктами компании Meta (Oculus), сообщил , что PWA появятся на Oculus Quest и Oculus Quest 2. Далее я опишу работу PWA на Oculus и объясню, как создавать, загружать и тестировать PWA на Oculus Quest 2.

Разделение государственного управления

Состояние входа в систему общее для браузера Oculus и PWA, что позволяет пользователям легко переключаться между ними. Разумеется, вход через Facebook поддерживается изначально. Браузер Oculus включает менеджер паролей, который позволяет пользователям безопасно хранить и передавать пароли между браузером и установленными приложениями.

Размеры окна PWA

Размеры окон браузера и установленных PWA-приложений могут быть изменены пользователем. Высота может варьироваться от 625 до 1200 пикселей. Ширина может быть задана от 400 до 2000 пикселей. Размеры по умолчанию — 1000 × 625 пикселей.

Взаимодействие с PWA

Управлять PWA можно с помощью левого и правого контроллеров Oculus, Bluetooth-мышей и клавиатур, а также с помощью отслеживания движений рук. Прокрутка осуществляется с помощью джойстиков на контроллерах Oculus или сведением и разведением большого и указательного пальцев в нужном направлении. Чтобы выбрать элемент, пользователь может навести курсор и свести пальцы.

Разрешения для PWA

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

Несмотря на то, что многие разрешения реализованы, поддерживаются не все функции. Например, при успешном запросе разрешения на определение местоположения устройство фактически не получает данные о местоположении. Аналогично, различные аппаратные API, такие как WebHID , Web Bluetooth и т. д., проходят проверку на наличие функций, но не отображают средство выбора, которое позволило бы пользователю подключить Oculus к устройству. Полагаю, что возможности API по обнаружению функций будут улучшены по мере развития браузера.

Отладка PWA с помощью Chrome DevTools

После включения режима разработчика отладка PWA на Oculus Quest 2 работает точно так же, как описано в разделе Удаленная отладка устройств Android .

1. На устройстве Oculus перейдите на нужный сайт в браузере Oculus.
2. Запустите Google Chrome на своем компьютере и перейдите по адресу chrome://inspect/#devices .
3. Найдите нужное устройство Oculus, после чего отобразится набор вкладок браузера Oculus, открытых на этом устройстве.
4. Нажмите «Проверить» на нужной вкладке браузера Oculus.

Обнаружение приложений

Для поиска PWA можно использовать сам браузер или магазин Oculus Store . Как и в любом другом браузере, установленные PWA работают в Oculus Browser как веб-сайты, открытые во вкладке. Когда пользователь посещает сайт, Oculus Browser поможет ему найти приложение, если (и только если) оно доступно в магазине Oculus Store. Пользователям, у которых приложение уже установлено, Oculus Browser поможет легко переключиться на него при желании.

Образцовые PWA на Oculus Quest 2

PWA от Meta

Несколько подразделений Meta, например, Instagram и Facebook , создали PWA для Oculus Quest 2. Эти PWA работают в отдельных окнах приложений без URL-адреса и могут свободно изменять размер.

PWA от других разработчиков

На момент написания этой статьи в магазине Oculus Store было небольшое, но растущее количество PWA для Oculus Quest 2. Spike позволяет пользователям использовать все основные рабочие инструменты, такие как электронная почта, чат, звонки, заметки, задачи и списки дел, из своего почтового ящика в виртуальном центре прямо в приложении Spike.

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

Ожидается появление большего количества PWA, таких как Slack, Dropbox или Canva, о чем свидетельствует видеоролик с участием Джейкоба Росси, выпущенный в рамках конференции Facebook Connect в 2021 году.

Создание PWA для Oculus

Meta описала необходимые шаги в своей документации . Как правило, PWA, устанавливаемые в Chrome, зачастую должны работать на Oculus «из коробки».

Требования к манифесту веб-приложения

Существуют некоторые важные различия между критериями установки Chrome и спецификацией Web App Manifest . Например, Oculus в настоящее время поддерживает только языки с написанием слева направо, тогда как спецификация Web App Manifest не накладывает таких ограничений. Другой пример — start_url , который Chrome строго требует для возможности установки приложения, но в Oculus необязателен. Oculus предлагает инструмент командной строки , позволяющий разработчикам создавать PWA для Oculus Quest 2, что позволяет передавать отсутствующие параметры (или переопределять существующие) в Web App Manifest.

У Oculus есть ряд дополнительных собственных полей манифеста веб-приложений, которые можно использовать для настройки интерфейса PWA.

Упаковка PWA с помощью Bubblewrap CLI

Bubblewrap — это набор библиотек с открытым исходным кодом и инструмент командной строки (CLI) для Node.js. Bubblewrap разработан командой Google Chrome, чтобы помочь разработчикам создавать, собирать и подписывать Android-проекты, запускающие ваше PWA как доверенное веб-приложение (TWA).

В настоящее время браузер Meta Quest не полностью поддерживает TWA, но начиная с версии 1.18.0, Bubblewrap поддерживает упаковку PWA для устройств Meta Quest.

Он может генерировать универсальные APK-файлы, которые открывают TWA на обычных устройствах Android и браузер Meta Quest на устройствах Meta Quest.

Если у вас установлен Node.js , Bubblewrap CLI можно установить с помощью следующей команды:

npm i -g @bubblewrap/cli

При первом запуске Bubblewrap будет предложено автоматически загрузить и установить необходимые внешние зависимости — Java Development Kit (JDK) и Android SDK Build Tools.

Чтобы создать совместимый с Meta Quest проект Android, который обернет ваш PWA, запустите команду init с флагом --metaquest и следуйте указаниям мастера:

bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest

После создания проекта соберите и подпишите его, выполнив:

bubblewrap build

В результате будет создан файл app-release-signed.apk . Этот файл можно установить на устройство или опубликовать в Meta Quest Store, Google Play Store или любой другой платформе распространения приложений для Android.

Упаковка PWA с помощью Oculus Platform Utility

Oculus Platform Utility — официальный инструмент командной строки, разработанный Meta для публикации приложений для устройств Oculus Rift и Meta Quest.

Он также позволяет упаковывать PWA для устройств Meta Quest с помощью команды create-pwa и публиковать их в Meta Quest Store и App Lab.

Задайте имя выходного файла с помощью параметра -o и путь к Android SDK с помощью параметра --android-sdk .

Укажите инструменту текущий URL-адрес манифеста веб-приложения с помощью параметра --web-manifest-url .

Если у вас нет манифеста в вашем PWA или вы хотите переопределить его, вы все равно можете сгенерировать APK для PWA, используя локальный файл манифеста и параметр --manifest-content-file .

Чтобы оставить манифест максимально чистым, используйте параметр --package-name со значением в обратной записи доменного имени (например, com.company.app.pwa ) вместо добавления фирменного поля ovr_package_name в манифест.

ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa

Упаковка PWA с помощью PWABuilder

По мнению авторов, использование PWABuilder является самым простым и поэтому рекомендуемым на данный момент способом упаковки PWA для Meta Quest.

PWABuilder — проект с открытым исходным кодом, разработанный корпорацией Microsoft, который позволяет разработчикам упаковывать и подписывать свои PWA для публикации в различных магазинах, включая Microsoft Store, Google Play Store, App Store и Meta Quest Store.

Упаковка PWA с помощью PWABuilder так же проста, как ввод URL-адреса PWA, ввод/редактирование метаданных приложения и нажатие кнопки «Сгенерировать» .

PWABuilder предоставляет разработчикам выбор того, какой инструмент использовать для упаковки PWA для устройств Meta Quest.

Вы можете выбрать опцию Meta Quest , чтобы использовать Oculus Platform Utility.

Вы можете выбрать опцию Android для использования Bubblewrap и установить флажок «Совместимость с Meta Quest» .

Установка PWA с помощью ADB

После создания APK-файла вы можете загрузить его на устройство Meta Quest с помощью ADB через USB или Wi-Fi:

adb install app-release-signed.apk

Если вы используете Bubblewrap CLI для упаковки PWA, он предоставляет удобную команду-алиас для загрузки APK-файла:

bubblewrap install

Неопубликованные приложения отображаются в разделе «Неизвестные источники» на панели приложений.

Подача заявки

Загрузка и отправка PWA в Oculus Store подробно описаны в документации Oculus Developer Center.

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

Тестирование приложений с несколькими вкладками

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

ovr-platform-util create-pwa -o test.apk --android-skd ~/bin/android-10 --web-manifest-url https://tomayac.github.io/oculus-pwa-test/manifest.json --package-name com.example.pwa
adb install test.apk

Вот скринкаст тестового приложения.

Версия SVGcode для Oculus

Чтобы опробовать инструкции, я создал версию своего последнего PWA для Oculus, SVGcode . Вы можете скачать получившийся APK-файл output.apk с моего Google Диска. Если хотите изучить пакет подробнее, у меня есть и декомпилированная версия . Инструкции по сборке находятся в package.json .

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

Иммерсивные 3D WebXR PWA

Поддержка PWA в Oculus Quest не ограничивается плоскими 2D-приложениями. Разработчики могут создавать захватывающие 3D-приложения для виртуальной реальности, используя API WebXR .

Хотите узнать, как обрабатываются различные запросы (установка PWA, запросы на разрешения, уведомления) из VR, если обрабатываются вообще?

Ниже представлен скринкаст теста подсказок пользовательского агента из тестов WebXR рабочей группы Immersive Web .

Как видите, для входа в режим VR требуется разрешение пользователя. Разрешения запрашиваются один раз для каждого источника. Запрос разрешений приводит к выходу из режима погружения. Уведомления в настоящее время не поддерживаются.

Отслеживание рук

Вы можете использовать свои руки для взаимодействия с PWA в режиме погружения благодаря API WebXR Hand Input и системе отслеживания рук Meta на основе искусственного интеллекта .

Ниже представлен скринкаст примера отслеживания рук из сборника WebXR от рабочей группы Immersive Web.

Дополненная/смешанная реальность (сквозная)

Как было объявлено на Meta Connect 2022, в браузере Meta Quest появилась поддержка дополненной реальности (AR) WebXR , также известной как смешанная реальность (MR), на устройствах Meta Quest 2 и Meta Quest Pro.

Давайте рассмотрим слегка измененный начальный пример A-Frame с уменьшенными моделями и скрытым небом и плоскостью для дополненной реальности.

A-Frame — это веб-фреймворк с открытым исходным кодом для создания 3D/VR/AR-приложений, полностью состоящих из декларативных, повторно используемых пользовательских HTML-элементов , которые легко читать, понимать, копировать и вставлять.

Вот скринкаст этой демонстрации на Meta Quest 2.

У Meta Quest 2 монохромные камеры, поэтому передача изображения происходит в оттенках серого, тогда как у Meta Quest Pro камеры цветные.

Выводы

PWA на Oculus Quest 2 — это очень увлекательно и многообещающе. Бесконечное виртуальное пространство, позволяющее пользователям масштабировать экран в соответствии с текущей задачей, обладает огромным потенциалом для изменения нашего рабочего процесса в будущем. Хотя набор текста в виртуальной реальности с отслеживанием рук пока находится в зачаточном состоянии и, по крайней мере, у меня, работает не очень надёжно, он достаточно хорош для ввода URL-адресов или коротких текстов.

Что мне больше всего нравится в PWA на Oculus Quest 2, так это то, что это обычные PWA, которые можно использовать без изменений во вкладке браузера или через простую APK-обёртку без каких-либо платформенно-зависимых API. Работать с одним и тем же кодом на разных платформах ещё никогда не было так просто. Да здравствуют PWA в виртуальной и дополненной реальности в интернете! Светлое будущее!

Благодарности

Фотография Oculus Quest 2 сделана Максимилианом Прандштеттером на Flickr . Изображения приложений Instagram , Facebook , Oculus Browser и Spike из магазина Oculus Store, а также иллюстрация обнаружения приложений и анимация отслеживания движений рук предоставлены Meta. Изображение главного героя предоставлено Арнау Марином и Пуигом. Эту публикацию просмотрел Джо Медли .