PWA w Oculus Quest 2

Oculus Quest 2 to zestaw słuchawkowy do rzeczywistości wirtualnej stworzony przez Oculusa, który jest oddziałem firmy Meta. Deweloperzy mogą teraz tworzyć i rozpowszechniać progresywne aplikacje internetowe (PWA) 2D i 3D, które korzystają z funkcji wielozadaniowości Oculus Quest 2.

Alexey Rodionov

Thomas Steiner

Oculus Quest 2

Oculus Quest 2 to gogle do rzeczywistości wirtualnej (VR) stworzone przez Oculus, czyli oddział firmy Meta. To następca poprzedniego zestawu słuchawkowego firmy Oculus Quest. Urządzenie może działać jako samodzielny zestaw słuchawkowy z wbudowanym systemem operacyjnym opartym na Androidzie, a także z kompatybilnym z Oculusem oprogramowaniem VR na komputerze stacjonarnym po podłączeniu przez USB lub Wi-Fi. Jest wyposażony w system Qualcomm Snapdragon XR2 oraz układ scalony z 6 GB pamięci RAM. Wyświetlacz Quest 2 to pojedynczy panel LCD z szybkim przełącznikiem o rozdzielczości 1832 × 1920 pikseli na oko i częstotliwości odświeżania do 120 Hz.

Przeglądarka Oculus

Obecnie na Oculus Quest 2 dostępne są 3 przeglądarki: Wolvic, następca Firefoxa Reality, oraz wbudowana przeglądarka Oculus Browser. W tym artykule skupiamy się na tej drugiej opcji. Na stronie Oculus przedstawiamy przeglądarkę Oculus w następujący sposób.

„Przeglądarka Oculus obsługuje najnowsze standardy internetowe i inne technologie, aby ułatwiać tworzenie treści VR w internecie. Współczesne strony internetowe 2D świetnie działają w Oculus Browser, ponieważ przeglądarka ta korzysta z silnika renderującego Chromium. Jest ona dodatkowo zoptymalizowana pod kątem zestawów Oculus, aby zapewnić najlepszą wydajność i umożliwić deweloperom internetowym wykorzystanie pełnego potencjału rzeczywistości wirtualnej dzięki nowym interfejsom API, takim jak WebXR. Dzięki WebXR otwieramy nowe możliwości w internecie”.

Klient użytkownika

W momencie pisania tego artykułu ciąg znaków klienta użytkownika przeglądarki wygląda tak:

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

Jak widać, bieżąca wersja 18.1.0.2.46.337441587 przeglądarki Oculus jest oparta na Chrome 95.0.4638.74. To wersja 96.0.4664.110 od bieżącej stabilnej wersji Chrome. Jeśli użytkownik przełączy się na tryb mobilny, VR zmieni się na Mobile VR.

Interfejs użytkownika

Interfejs przeglądarki (widoczny powyżej) oferuje następujące funkcje (górny wiersz od lewej do prawej):

• Przycisk Wstecz
• Przycisk Odśwież
• Informacje o witrynie
• Pasek adresu URL
• Przycisk tworzenia zakładki
• przycisk zmiany rozmiaru z opcjami wąska, średnia i szeroka oraz funkcja powiększania;
• Przycisk „Poproś o wersję na urządzenia mobilne”
• Przycisk menu z tymi opcjami:
  • Włączanie trybu prywatnego
  • Zamknij wszystkie karty
  • Ustawienia
  • Zakładki
  • Pobrane
  • Historia
  • Wyczyść dane przeglądania

Dolny rząd zawiera te funkcje:

• Przycisk zamykania
• Przycisk minimalizowania
• Przycisk z 3 kropkami z opcjami Wstecz, Dalej i Odświeżanie

Częstotliwość odświeżania i współczynnik pikseli urządzenia

W przypadku Oculus Quest 2 przeglądarka Oculus renderuje zarówno zawartość stron internetowych 2D, jak i WebXR z częstotliwością odświeżania 90 Hz. Podczas oglądania multimediów na pełnym ekranie przeglądarka Oculus Browser optymalizuje częstotliwość odświeżania urządzenia na podstawie liczby klatek na sekundę filmu, np. 24 fps. Oculus Quest 2 ma współczynnik pikseli urządzenia wynoszący 1,5, co zapewnia wyraźny tekst.

Progresywne aplikacje internetowe w przeglądarce Oculus i w sklepie Oculus

28 października 2021 r. Jacob Rossi, kierownik ds. zarządzania usługami w Meta (Oculus) poinformował, że aplikacje PWA będą udostępniane w Oculus Quest i Oculus Quest 2. W tym artykule opisuję działanie PWA na Oculusie oraz wyjaśniam, jak tworzyć, instalować i testować PWA na Oculus Quest 2.

Udostępnianie stanu

Stan logowania jest udostępniany w przeglądarce Oculus i aplikacji PWAs, co pozwala użytkownikom płynnie przełączać się między nimi. Oczywiście logowanie przez Facebooka jest obsługiwane domyślnie. Oculus Browser zawiera menedżera haseł, który umożliwia użytkownikom bezpieczne przechowywanie i udostępnianie haseł w przeglądarce oraz w zainstalowanych aplikacjach.

Rozmiary okien aplikacji PWA

Użytkownik może dowolnie zmieniać rozmiar okien przeglądarki i instalowanych Progressive Web Apps. Wysokość może się wahać od 625 do 1200 pikseli. Szerokość może wynosić od 400 do 2000 pikseli. Domyślne wymiary to 1000 × 625 pikseli.

Interakcje z aplikacją PWA

PWA można sterować za pomocą lewego i prawego kontrolera Oculus, myszy i klawiatury Bluetooth oraz śledzenia dłoni. Przewijanie działa za pomocą kciuków na kontrolerach Oculus lub przez ściągnięcie kciuka i palca wskazującego i poruszanie się w wybranym kierunku. Aby coś wybrać, użytkownik może wskazać obszar i ściągnąć palce.

Uprawnienia aplikacji PWA

Uprawnienia w przeglądarce Oculus działają podobnie jak w Chrome. Stan jest udostępniany aplikacjom działającym w przeglądarce i zainstalowanym PWA, dzięki czemu użytkownicy mogą przełączać się między tymi dwoma środowiskami bez konieczności ponownego przyznawania tych samych uprawnień.

Mimo że wdrożone jest wiele uprawnień, nie wszystkie funkcje są obsługiwane. Na przykład mimo że uda się uzyskać uprawnienia do geolokalizacji, urządzenie nigdy nie otrzyma lokalizacji. Podobnie różne interfejsy API sprzętowe, takie jak WebHID czy Web Bluetooth, przechodzą przez wykrywanie funkcji, ale nie wyświetlają selektora, który pozwoliłby użytkownikowi sparować Oculusa z urządzeniem sprzętowym. Przypuszczam, że wykrywanie funkcji interfejsów API zostanie ulepszone, gdy przeglądarka będzie bardziej dopracowana.

Debugowanie aplikacji PWA za pomocą Narzędzi deweloperskich w Chrome

Po włączeniu trybu programisty debugowanie PWAs na Oculus Quest 2 działa dokładnie tak, jak opisano w zdalnym debugowaniu urządzeń z Androidem.

1. Na urządzeniu Oculus otwórz stronę w przeglądarce Oculus.
2. Uruchom Google Chrome na komputerze i otwórz chrome://inspect/#devices.
3. Znajdź urządzenie Oculus, a zaraz potem zestaw kart przeglądarki Oculus, które są obecnie otwarte na tym urządzeniu.
4. Kliknij Zbadaj na wybranej karcie przeglądarki Oculus.

Wyświetlanie aplikacji

Użytkownicy mogą odkrywać PWA za pomocą przeglądarki lub Oculus Store. Podobnie jak w przypadku innych przeglądarek, zainstalowane progresywne aplikacje internetowe działają w Oculus Browser jako strony internetowe otwierane na karcie. Gdy użytkownik odwiedza witrynę, przeglądarka Oculus pomoże mu znaleźć aplikację, jeśli jest ona dostępna w sklepie Oculus Store. Użytkownikom, którzy mają już zainstalowaną aplikację, może pomóc przeglądarka Oculus.

Przykładowe aplikacje PWA w grze Oculus Quest 2

Aplikacje PWA od Meta

Wiele działów Meta stworzyło PWAs na Oculus Quest 2, na przykład Instagram i Facebook. PWA działają w oknach aplikacji, które nie mają paska adresu URL i których rozmiar można dowolnie zmieniać.

PWA innych deweloperów

W momencie pisania tego tekstu w Oculus Store jest niewielka, ale stale rosnąca liczba PWAs na Oculus Quest 2. Spike umożliwia użytkownikom korzystanie z wszystkich niezbędnych narzędzi do pracy, takich jak poczta e-mail, czat, rozmowy, notatki, zadania i listy zadań z ich skrzynki odbiorczej w wirtualnym środowisku w aplikacji Spike.

Innym przykładem jest Smartsheet – dynamiczny obszar roboczy, który umożliwia zarządzanie projektami, zautomatyzowane przepływy pracy i szybkie tworzenie nowych rozwiązań.

Wkrótce pojawi się więcej aplikacji typu PWAs, takich jak Slack, Dropbox czy Canva, o czym wspominamy w filmie z udziałem Jacoba Rossiego, który został opublikowany w ramach konferencji Connect 2021 firmy Facebook.

Tworzenie PWAs na Oculusa

Wymagane kroki zostały opisane w dokumentacji firmy Meta. Zasadniczo PWA, które można zainstalować w Chrome, powinny działać na Oculusie od razu po zainstalowaniu.

Wymagania dotyczące pliku manifestu aplikacji internetowej

Istnieją pewne ważne różnice w porównaniu z kryteriami możliwości instalacji Chrome i specyfikacją pliku manifestu aplikacji internetowej. Oculus obsługuje na przykład tylko języki zapisywane od lewej do prawej, podczas gdy specyfikacja pliku manifestu aplikacji internetowej nie narzuca takich ograniczeń. Innym przykładem jest start_url, którego Chrome wymaga, aby można było zainstalować aplikację, ale w przypadku Oculus jest to opcjonalne. Oculus udostępnia narzędzie wiersza poleceń, które pozwala deweloperom tworzyć PWA na Oculus Quest 2. Dzięki temu mogą oni przekazywać brakujące parametry (lub zastępować istniejące) w pliku manifestu aplikacji internetowej.

Oculus ma kilka opcjonalnych własnych pól pliku manifestu aplikacji internetowej, które można wykorzystać do dostosowania interfejsu PWA.

Pakowanie PWA za pomocą interfejsu wiersza poleceń Bubblewrap

Bubblewrap to zestaw bibliotek i narzędzi wiersza poleceń (CLI) w wersji open source przeznaczonych do Node.js. Aplikacja Bubblewrap została opracowana przez zespół Google Chrome, aby pomóc programistom w generowaniu, tworzeniu i podpisywaniu projektów na Androida, które uruchamiają Twoją aplikację PWA w ramach zaufanej aktywności internetowej (TWA).

Przeglądarka Meta Quest nie obsługuje obecnie TWA w pełni, ale od wersji 1.18.0 Bubblewrap obsługuje pakowanie PWA na urządzenia Meta Quest.

Narzędzie może generować uniwersalne pliki APK, które otwierają TWA na zwykłych urządzeniach z Androidem, oraz przeglądarkę Meta Quest na urządzeniach Meta Quest.

Zakładając, że masz zainstalowany Node.js, interfejs wiersza poleceń Bubblewrap można zainstalować za pomocą tego polecenia:

npm i -g @bubblewrap/cli

Gdy uruchomisz Bubblewrap po raz pierwszy, pojawi się oferta automatycznego pobrania i zainstalowania wymaganych zewnętrznych zależności: pakietu Java Development Kit (JDK) i narzędzi Android SDK Build Tools.

Aby wygenerować projekt na Androida zgodny z Meta Quest, który otacza PWA, uruchom polecenie init z flagą --metaquest i postępuj zgodnie z instrukcjami kreatora:

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

Po wygenerowaniu projektu skompiluj go i podpisz, wykonując te czynności:

bubblewrap build

Spowoduje to wygenerowanie pliku o nazwie app-release-signed.apk. Plik można zainstalować na urządzeniu lub opublikować w Meta Quest Store, Sklepie Play lub na dowolnej innej platformie dystrybucji aplikacji na Androida.

Tworzenie pakietów aplikacji PWA za pomocą narzędzia Oculus Platform

Oculus Platform Utility to oficjalne narzędzie wiersza poleceń opracowane przez firmę Meta na potrzeby publikowania aplikacji na urządzenia Oculus Rift i Meta Quest.

Umożliwia też tworzenie pakietów aplikacji PWA dla urządzeń Meta Quest za pomocą polecenia create-pwa i publikowanie ich w Meta Quest Store i App Lab.

Ustaw nazwę pliku wyjściowego za pomocą parametru -o, a ścieżkę do pakietu Android SDK za pomocą parametru --android-sdk.

Wskaż narzędziem na aktywny adres URL pliku manifestu aplikacji internetowej za pomocą parametru --web-manifest-url.

Jeśli nie masz manifestu w działającej aplikacji PWA lub chcesz zastąpić działający manifest, możesz wygenerować plik APK dla swojej aplikacji PWA, korzystając z lokalnego pliku manifestu i parametru --manifest-content-file.

Aby pozostawić plik manifestu w jak najbardziej czystej formie, użyj parametru --package-name z wartością w notacji odwróconej nazwy domeny (np. com.company.app.pwa), zamiast dodawać do pliku manifestu zastrzeżone pole 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

Tworzenie pakietów PWA za pomocą PWABuilder

Zdaniem autorów korzystanie z PWABuilder jest obecnie najłatwiejszym i dlatego zalecanym sposobem pakowania aplikacji PWA na potrzeby Meta Quest.

PWABuilder to opracowany przez firmę Microsoft projekt open source, który umożliwia deweloperom tworzenie pakietów i podpisywanie aplikacji PWA na potrzeby publikacji w różnych sklepach, takich jak Microsoft Store, Google Play Store, App Store i Meta Quest Store.

Tworzenie pakietów aplikacji PWA za pomocą narzędzia PWABuilder jest proste: wystarczy wpisać adres URL takiej aplikacji, wpisać lub edytować metadane aplikacji i kliknąć przycisk Generate (Wygeneruj).

PWABuilder daje deweloperom wybór dotyczące wewnętrznego narzędzia, które mają być używane do tworzenia pakietów PWA na urządzenia Meta Quest.

Aby użyć narzędzia Oculus Platform Utility, wybierz opcję Meta Quest.

Aby korzystać z Bubblewrap, wybierz opcję Android i zaznacz pole wyboru Zgodność z Meta Quest.

Instalowanie aplikacji PWA za pomocą ADB

Po utworzeniu pliku APK możesz go załadować na urządzenie Meta Quest za pomocą interfejsu ADB przez USB lub Wi-Fi:

adb install app-release-signed.apk

Jeśli używasz interfejsu wiersza poleceń Bubblewrap w przypadku pakietów PWA, zapewnia on wygodne polecenie aliasu, które pozwala zainstalować plik APK z innego źródła:

bubblewrap install

Aplikacje zainstalowane z poza sklepu Google Play są widoczne w sekcji Nieznane źródła w szufladzie aplikacji.

Przesyłanie aplikacji

Przesyłanie i przesyłanie PWA do Oculus Store jest opisane szczegółowo w dokumentacji w Centrum dla deweloperów Oculusa.

Oprócz przesyłania aplikacji do Oculus Store deweloperzy mogą również rozpowszechniać swoje aplikacje za pomocą platform takich jak SideQuest bezpośrednio do konsumentów w bezpieczny sposób, bez konieczności zatwierdzania ich przez sklep. Dzięki temu mogą udostępniać aplikację bezpośrednio użytkownikom, nawet jeśli jest ona w fazie wczesnej produkcji, jest eksperymentalna lub skierowana do wyjątkowej grupy odbiorców.

Testowanie aplikacji z wieloma kartami

Aby przetestować aplikacje z wieloma kartami, utworzyłem małą testową PWA, która demonstruje różne funkcje linków: otwieranie nowej karty w PWA, pozostawanie na bieżącej karcie, otwieranie nowej karty przeglądarki i otwieranie w WebView, pozostając na bieżącej karcie. Utwórz lokalną kopię tej aplikacji, uruchamiając na swoim komputerze podane niżej polecenia.

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

Oto zrzut ekranu z aplikacji testowej.

wersja SVGcode na Oculusa,

Aby przetestować instrukcje, utworzyłem na Oculusie wersję mojej najnowszej aplikacji internetowej SVGcode. Wygenerowany plik APK możesz pobrać z output.apkMojego dysku Google. Jeśli chcesz dokładniej przyjrzeć się pakietowi, mam też zdekompilowaną wersję. Instrukcje budowy znajdziesz na stronie package.json.

Aplikacja na Oculusie działa prawidłowo, w tym umożliwia otwieranie i zapisywanie plików. Przeglądarka Oculus nie obsługuje interfejsu File System Access API, ale zastosowanie alternatywnego podejścia może pomóc. Jedynie powiększanie za pomocą 2 palców nie działało. Spodziewałem/spodziewałam się, że po naciśnięciu spustu na obu kontrolerach i poruszeniu ich w przeciwnych kierunkach funkcja zadziała. Poza tym wszystko działało bez zarzutu i było responsywne, jak widać na załączonym filmie.

Immersyjne aplikacje PWA 3D WebXR

Obsługa PWA na Oculus Quest nie jest ograniczona do płaskich aplikacji 2D. Deweloperzy mogą tworzyć wciągające 3D doznania dla VR za pomocą interfejsu WebXR API.

Czy zastanawiasz się, jak w VR obsługiwane są różne prompty (instalacja PWA, prośby o uprawnienia, powiadomienia)?

Oto screencast przedstawiający test promptów klienta użytkownika przygotowany przez organizację Immersive WebWork Group (WebXR Tests).

Jak widać, wejście w tryb VR wymaga zgody użytkownika. Uprawnienia są proszone raz na źródło. Prośba o uprawnienia opuszcza tryb pojemny. Powiadomienia nie są obecnie obsługiwane.

Śledzenie rąk

Z PWA możesz korzystać w trybie pojemnym, korzystając z interfejsu WebXR Hand Write API i opartego na AI systemu śledzenia dłoni firmy Meta.

Oto nagranie ekranu próbki śledzenia dłoni z próbek WebXR opracowanych przez grupę roboczą Immersive Web.

Rzeczywistość rozszerzona/mieszana (przepuszczanie).

Zgodnie z informacjami ogłoszonymi podczas konferencji Meta Connect 2022 przeglądarka Meta Quest obsługuje WebXR Augmented Reality (AR), czyli Rzeczywistość mieszaną (MR), na urządzeniach Meta Quest 2 i Meta Quest Pro.

Przyjrzyjmy się nieco zmodyfikowanemu przykładowi startowemu w A-Frame z pomalowanymi modelami oraz ukrytym niebem i samolotem w ramach rzeczywistości rozszerzonej.

A-Frame to platforma internetowa typu open source do tworzenia materiałów 3D, rzeczywistości wirtualnej i AR w całości przy użyciu deklaratywnych niestandardowych elementów HTML nadających się do wielokrotnego użytku, które można łatwo odczytać, zrozumieć oraz skopiować i wkleić.

Oto nagranie tego demo na Meta Quest 2.

Meta Quest 2 ma kamery monochromatyczne, więc przejście jest realizowane w trybie szarości, a Meta Quest Pro – z kolorowymi aparatami.

Podsumowanie

PWA na Oculus Quest 2 są bardzo obiecujące i dają wiele frajdy. Nieskończone wirtualne płótno, które pozwala użytkownikom dostosować ekran do bieżącego zadania, może w przyszłości znacznie zmienić sposób naszej pracy. Pisanie w VR z wykorzystaniem śledzenia dłoni jest wciąż w początkowej fazie rozwoju i przynajmniej w moim przypadku nie działa jeszcze zbyt niezawodnie, ale wystarczająco dobrze sprawdza się przy wpisywaniu adresów URL lub krótkich tekstów.

Najbardziej podoba mi się w PWA na Oculus Quest 2 to, że są to zwykłe PWA, których można używać w niezmienionej formie na karcie przeglądarki lub za pomocą cienkiego opakowania APK bez żadnych interfejsów API specyficznych dla platformy. Kierowanie reklam na wiele platform za pomocą tego samego kodu nigdy nie było łatwiejsze. Oto informacje o PWA w VR i AR w internecie. Przyszłość jest jasna!

Podziękowania

Zdjęcie Oculus Quest 2 autorstwa Maximilian Prandstätter na Flickr. Zdjęcia z Oculus Store przedstawiające aplikacje na Instagramie, Facebook, Oculus Browser i Spike, a także ilustrację przedstawiającą wykrywalność aplikacji i animację funkcji śledzenia dłoni od firmy Meta. Zdjęcie bohatera autorstwa Arnau Marína i Puiga. Ten post został sprawdzony przez Joe Medley.