Современные веб-приложения на Oculus Quest 2

Oculus Quest 2 – это очки виртуальной реальности (VR), созданные компанией Oculus, подразделением Meta. Теперь разработчики могут создавать и распространять двух- и трехмерные прогрессивные веб-приложения (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 x 1920 пикселей на глаз, которая работает с частотой обновления до 120 Гц.

Браузер Oculus

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

Oculus Browser поддерживает новейшие веб-стандарты и другие технологии, которые помогают создавать VR-контент для интернета. Современные 2D-сайты отлично работают в Oculus Browser, поскольку он работает на движке Chromium. Он оптимизирован для гарнитур Oculus, чтобы обеспечить максимальную производительность и позволить веб-разработчикам использовать весь потенциал VR с новыми 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

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

Интерфейс

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

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

В нижнем ряду находятся следующие функции:

• Кнопка "Закрыть"
• Кнопка "Свернуть"
• Кнопка с тремя точками, позволяющая перейти назад, вперед или перезагрузить страницу

Частота обновления и соотношение логических и физических пикселей устройства

На Oculus Quest 2 браузер Oculus отображает как двухмерный контент веб-страниц, так и WebXR с частотой обновления 90 Гц. При просмотре медиаконтента в полноэкранном режиме Oculus Browser оптимизирует частоту обновления устройства на основе частоты кадров видео, например 24 кадра/с. У Oculus Quest 2 соотношение пикселей устройства составляет 1,5, что обеспечивает четкость текста.

Прогрессивные веб-приложения в браузере Oculus и магазине Oculus Store

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

Передача состояния

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

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

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

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

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

Разрешения для прогрессивных веб-приложений

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

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

Отладка PWA с помощью инструментов разработчика Chrome

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

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

Поиск и продвижение приложений

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

Примечание. В настоящее время событие BeforeInstallPrompt не активируется в браузере Oculus, несмотря на то, что функция обнаружения сообщает о его поддержке.

Примеры PWA на Oculus Quest 2

Современные веб-приложения от Meta

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

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

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

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

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

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

Необходимые шаги описаны в документации Meta. В целом прогрессивные веб-приложения, которые можно установить в Chrome, должны работать на Oculus без дополнительных настроек.

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

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

Название	Описание
name	Название PWA (обязательно). В настоящее время Oculus поддерживает только языки с направлением письма слева направо.
display	Обязательный параметр. "standalone" или "minimal-ui". Другие значения в настоящее время не поддерживаются.
short_name	(Обязательно) Краткая версия названия приложения (если необходимо).
scope	URL или пути, которые должны считаться частью приложения (необязательно).
start_url	URL, который будет показываться при запуске приложения (необязательно).

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

Название	Описание
ovr_package_name	Задает название пакета APK, созданного для PWA (необязательно). Идентификатор должен быть указан в формате обратного доменного имени, например "com.company.app.pwa". Если оно не задано, разработчики должны указать название пакета в инструменте командной строки с помощью параметра --package-name.
ovr_multi_tab_enabled	(Необязательно) Если задано значение true, в PWA будет добавлена панель вкладок, как в Oculus Browser. В многовкладочных PWA внутренние ссылки, которые должны открываться в новой вкладке (target="_new" или target="_blank"), будут открываться в новых вкладках в окне PWA. В одностраничных приложениях такие ссылки открываются в окне браузера Oculus. В настоящее время эта функция стандартизируется как режим приложения с вкладками.
ovr_scope_extensions	Позволяет включить в область действия веб-приложения PWA дополнительные веб-страницы. Он состоит из словаря JSON, содержащего URL расширений или шаблоны с подстановочными знаками. В настоящее время эта функция стандартизируется как расширения области действия для веб-приложений.

Как упаковать прогрессивное веб-приложение с помощью 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 или на любой другой платформе распространения приложений для Android.

Примечание. Чтобы APK-файлы были совместимы не только с Meta Quest и обычными устройствами Android, но и с устройствами ChromeOS, используйте флаг --chromeosonly вместе с флагом --metaquest.

Упаковка 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

Внимание! APK-файлы, созданные с помощью Oculus Platform Utility, совместимы только с устройствами Meta Quest и не могут быть запущены на обычных устройствах Android. Кроме того, их можно публиковать только в Meta Quest Store и App Lab.

Как упаковать PWA с помощью PWABuilder

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

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

Чтобы упаковать PWA с помощью PWABuilder, достаточно ввести URL приложения, указать или изменить его метаданные и нажать кнопку Generate (Создать).

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

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

Примечание. В PWABuilder используется слегка измененная версия Oculus Platform Utility, которая генерирует APK-файлы меньшего размера, удаляя неиспользуемый код и ресурсы.

Вы можете выбрать вариант Android, чтобы использовать Bubblewrap, и установить флажок Совместимо с Meta Quest.

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

Как установить PWA с помощью ADB

Важно! Чтобы включить Android Debug Bridge (ADB) на устройстве Meta Quest, необходимо включить режим разработчика в сопутствующем мобильном приложении. Чтобы перевести устройство в режим разработчика, вы должны принадлежать к организации разработчиков (или создать ее) в Oculus Developer Center.

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

adb install app-release-signed.apk

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

bubblewrap install

Примечание. Для установки APK-файлов из неизвестных источников можно использовать Android Web Toolbox. Это веб-приложение с открытым исходным кодом, которое позволяет использовать все функции ADB прямо в браузере, даже на другом устройстве Android. Благодаря WebUSB API устанавливать драйверы не нужно.

Приложения, установленные из неизвестных источников, появляются в разделе Неизвестные источники на панели приложений.

Отправка приложения

Важно! Отправлять приложения на проверку и публиковать их в Oculus Store могут только разработчики, одобренные для Meta Quest Store. Распространение PWA через App Lab в настоящее время недоступно. Команда Meta скоро расскажет, когда и как можно будет отправить PWA в App Lab.

Подробные инструкции по загрузке и отправке 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

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

Приложение на Oculus работает нормально, в том числе можно открывать и сохранять файлы. Oculus Browser не поддерживает File System Access API, но резервный подход помогает. Единственное, что не работало, – это масштабирование щипком. Я ожидал, что для этого нужно нажать кнопку триггера на обоих контроллерах и перемещать их в противоположных направлениях. В остальном все работало быстро и без задержек, как видно на встроенном скринкасте.

Современные веб-приложения с поддержкой WebXR и 3D

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

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

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

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

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

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

Ниже показана запись экрана с примером отслеживания рук из примеров WebXR от Immersive Web Working Group.

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

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

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

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

Ниже представлен скринкаст этой демонстрации на Meta Quest 2.

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

Выводы

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

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

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

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