PWA на Oculus Quest 2

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

Алексей Родионов
Томас Штайнер

Окулус Квест 2

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

Устройство Oculus Quest 2 с контроллерами.

Браузер Oculus

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

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

Браузер Oculus с тремя открытыми окнами.

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

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

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 .

Страница «О браузере Oculus».

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

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

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

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

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

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

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

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

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 будет улучшена по мере развития браузера.

Разрешения в браузере Oculus.

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

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

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

Проверка приложения, работающего на Oculus Quest 2, с помощью Chrome DevTools.

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

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

Браузер Oculus предлагает пользователю установить приложение MyEmail.

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

PWA от Meta

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

Приложение Facebook Oculus Quest 2.

Инстаграм Приложение Oculus Quest 2

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

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

Приложение Спайк Oculus Quest 2.

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

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

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

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

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

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

Имя Описание
name (Обязательно) Имя PWA. В настоящее время Oculus поддерживает только языки с письмом слева направо.
display (Обязательно) Либо "standalone" , либо "minimal-ui" . Oculus в настоящее время не поддерживает другие значения.
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. В PWA с несколькими вкладками внутренние ссылки, нацеленные на новую вкладку ( target="_new" или target="_blank" ), будут открываться на новых вкладках в окне PWA. Это отличается от PWA с одной вкладкой, где такие ссылки открываются в окно браузера Oculus. Эта функция в настоящее время стандартизируется как режим приложения с вкладками .
ovr_scope_extensions (Необязательно) Позволяет PWA включать больше веб-страниц в область веб-приложения. Он состоит из словаря JSON, содержащего URL-адреса расширений или шаблоны подстановочных знаков. Эта функция в настоящее время стандартизируется как расширения области действия для веб-приложений .

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

Чтобы создать проект Android, совместимый с Meta Quest, который обертывает ваше 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 и в лаборатории приложений.

Задайте имя выходного файла с помощью параметра -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.

Варианты упаковки PWABuilder.

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

Упаковка PWA с помощью PWABuilder с использованием Bubblewrap.

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

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

adb install app-release-signed.apk

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

bubblewrap install

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

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

Загрузка и отправка PWA в магазин Oculus подробно описана в документации Центра разработчиков Oculus.

Помимо отправки приложений в магазин Oculus, разработчики также могут безопасно и надежно распространять свои приложения через такие платформы, как 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, SVGcode , для Oculus. Вы можете скачать полученный APK-файл output.apk с моего Google Диска. Если вы хотите изучить пакет дальше, у меня тоже есть декомпилированная версия . Найдите инструкции по сборке в package.json .

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

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

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

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

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

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

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

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

Вот скриншот примера отслеживания рук из примеров WebXR рабочей группы по погружению в Интернет.

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

Как было объявлено на 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 есть цветные камеры.

Выводы

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

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

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

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