Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, sebuah divisi dari Meta. Developer kini dapat mem-build dan mendistribusikan Progressive Web App (PWA) 2D dan 3D yang memanfaatkan fitur multitasking Oculus Quest 2.
Oculus Quest 2
Oculus Quest 2 adalah headset virtual reality (VR) yang dibuat oleh Oculus, sebuah divisi dari Meta. Headset ini adalah penerus headset sebelumnya dari perusahaan, Oculus Quest. Perangkat ini dapat berjalan sebagai headset mandiri dengan sistem operasi internal berbasis Android, dan dengan software VR yang kompatibel dengan Oculus yang berjalan di komputer desktop saat terhubung melalui USB atau Wi-Fi. Perangkat ini menggunakan sistem chip Snapdragon XR2 Qualcomm dengan RAM 6 GB. Layar Quest 2 adalah panel LCD switch cepat tunggal dengan resolusi 1.832 × 1.920 piksel per mata yang berjalan pada kecepatan refresh hingga 120 Hz.
Browser Oculus
Saat ini ada tiga browser yang tersedia untuk Oculus Quest 2: Wolvic, penerus Firefox Reality, dan Browser Oculus bawaan. Artikel ini berfokus pada hal yang terakhir. Situs Oculus memperkenalkan Oculus Browser sebagai berikut.
"Oculus Browser memberikan dukungan untuk standar web terbaru dan teknologi lainnya untuk membantu Anda membuat pengalaman VR di web. Situs web 2D saat ini berfungsi dengan baik di Oculus Browser karena didukung oleh mesin rendering Chromium. Teknologi ini lebih dioptimalkan untuk headset Oculus guna mendapatkan performa terbaik dan memungkinkan developer web memanfaatkan potensi penuh VR dengan API baru, seperti WebXR. Melalui WebXR, kami membuka pintu ke batas web berikutnya."
Agen pengguna
String agen pengguna browser pada saat penulisan adalah sebagai berikut.
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
Seperti yang dapat Anda lihat, versi Oculus Browser saat ini, 18.1.0.2.46.337441587, didasarkan pada Chrome
95.0.4638.74, yang hanya satu versi di belakang Chrome versi stabil saat ini, yaitu
96.0.4664.110. Jika pengguna beralih ke mode seluler, VR akan berubah menjadi Mobile VR.
Antarmuka pengguna
Antarmuka pengguna browser (ditampilkan di atas) memiliki fitur berikut (baris atas dari kiri ke kanan):
- Tombol kembali
- Tombol muat ulang
- Informasi situs
- Panel URL
- Tombol buat bookmark
- Tombol ubah ukuran dengan opsi sempit, sedang, dan lebar serta fitur zoom
- Tombol Minta situs seluler
- Tombol menu dengan opsi berikut:
- Masuk ke mode pribadi
- Tutup semua tab
- Setelan
- Bookmark
- Download
- Histori
- Hapus data penjelajahan
Baris bawah mencakup fitur berikut:
- Tombol tutup
- Tombol minimalkan
- Tombol tiga titik dengan opsi kembali, maju, dan muat ulang
Kecepatan refresh dan rasio piksel perangkat
Untuk Oculus Quest 2, Oculus Browser merender konten halaman web 2D dan WebXR dengan kecepatan refresh 90 Hz. Saat menonton media layar penuh, Oculus Browser mengoptimalkan kecepatan refresh perangkat berdasarkan kecepatan frame video, misalnya, 24 fps. Oculus Quest 2 memiliki rasio piksel perangkat 1,5 untuk teks yang tajam.
PWA di Oculus Browser dan Oculus Store
Pada 28 Oktober 2021, Jacob Rossi, Product Management Lead di Meta (Oculus), menyampaikan bahwa PWA akan hadir di Oculus Quest dan Oculus Quest 2. Selanjutnya, saya menjelaskan pengalaman PWA di Oculus dan menjelaskan cara mem-build, melakukan sideload, dan menguji PWA Anda di Oculus Quest 2.
Berbagi status
Status login digunakan bersama antara Browser Oculus dan PWA, sehingga pengguna dapat beralih di antara keduanya dengan lancar. Tentu saja, Login dengan Facebook didukung secara default. Oculus Browser menyertakan pengelola sandi yang memungkinkan pengguna menyimpan dan membagikan sandi mereka dengan aman antara browser dan pengalaman aplikasi yang diinstal.
Ukuran jendela PWA
Jendela browser dan jendela PWA yang diinstal dapat diubah ukurannya secara bebas oleh pengguna. Tingginya dapat bervariasi antara 625 px dan 1.200 px. Lebar dapat disetel antara 400 px dan 2.000 px. Dimensi default adalah 1.000 × 625 piksel.
Berinteraksi dengan PWA
PWA dapat dikontrol dengan pengontrol kiri dan kanan Oculus, mouse dan keyboard Bluetooth, serta melalui pelacakan tangan. Scroll berfungsi melalui thumb stick di pengontrol Oculus, atau dengan mencubit jempol dan jari telunjuk, lalu bergerak ke arah yang diinginkan. Untuk memilih sesuatu, pengguna dapat mengarahkan dan mencubit.
Izin untuk PWA
Izin di Oculus Browser berfungsi dengan cara yang hampir sama seperti di Chrome. Status dibagikan antara aplikasi yang berjalan di browser dan PWA yang diinstal, sehingga pengguna dapat beralih antara kedua pengalaman tersebut tanpa harus memberikan izin yang sama lagi.
Meskipun banyak izin yang diterapkan, tidak semua fitur didukung. Misalnya, meskipun permintaan izin geolokasi berhasil, perangkat tidak pernah benar-benar mendapatkan lokasi. Demikian pula, berbagai API hardware seperti WebHID, Web Bluetooth, dll. semuanya meneruskan deteksi fitur, tetapi tidak benar-benar menampilkan pemilih yang akan memungkinkan pengguna menyambungkan Oculus dengan perangkat hardware. Saya kira kemampuan deteksi fitur API akan ditingkatkan setelah browser menjadi matang.
Men-debug PWA melalui Chrome DevTools
Setelah mengaktifkan Mode Developer, proses debug PWA di Oculus Quest 2 berfungsi persis seperti yang dijelaskan dalam Men-debug perangkat Android dari jarak jauh.
- Di perangkat Oculus, buka situs yang diinginkan di Oculus Browser.
- Luncurkan Google Chrome di komputer Anda dan buka
chrome://inspect/#devices. - Temukan perangkat Oculus yang dimaksud, yang akan diikuti dengan serangkaian tab Browser Oculus yang saat ini terbuka di perangkat tersebut.
- Klik periksa di tab Oculus Browser yang diinginkan.
Penemuan aplikasi
Pengguna dapat menggunakan browser itu sendiri atau Oculus Store untuk menemukan PWA. Sama seperti browser lainnya, PWA yang diinstal juga berfungsi di Oculus Browser sebagai situs yang berjalan di tab. Saat pengguna mengunjungi situs, Oculus Browser akan membantu mereka menemukan aplikasi jika (dan hanya jika) aplikasi tersebut tersedia di Oculus Store. Untuk pengguna yang sudah menginstal aplikasi tersebut, Oculus Browser akan membantu mereka beralih ke aplikasi dengan mudah jika mereka menginginkannya.
Contoh PWA di Oculus Quest 2
PWA oleh Meta
Beberapa divisi Meta telah membuat PWA untuk Oculus Quest 2, misalnya Instagram dan Facebook. PWA ini berjalan di jendela aplikasi mandiri yang tidak memiliki kolom URL dan dapat diubah ukurannya secara bebas.
PWA oleh developer lain
Pada saat penulisan ini, ada sedikit, tetapi terus bertambah, jumlah PWA untuk Oculus Quest 2 di Oculus Store. Spike memungkinkan pengguna menggunakan semua alat kerja penting seperti email, chat, panggilan, catatan, tugas, dan daftar tugas dari kotak masuk mereka di hub lingkungan virtual langsung di aplikasi Spike.
Contoh lainnya adalah Smartsheet, ruang kerja dinamis yang menyediakan pengelolaan project, alur kerja otomatis, dan pembuatan solusi baru dengan cepat.
PWA lainnya seperti Slack, Dropbox, atau Canva akan segera hadir, seperti yang digolongkan dalam video yang menampilkan Jacob Rossi yang dirilis dalam konteks konferensi Connect Facebook pada tahun 2021.
Membuat PWA untuk Oculus
Meta menguraikan langkah-langkah yang diperlukan dalam dokumentasinya. Secara umum, PWA yang dapat diinstal di Chrome sering kali berfungsi secara siap pakai di Oculus.
Persyaratan Manifes Aplikasi Web
Ada beberapa perbedaan penting dibandingkan dengan
kriteria kemampuan penginstalan Chrome dan
spesifikasi Manifes Aplikasi Web. Misalnya, saat ini Oculus hanya mendukung
bahasa yang ditulis dari kiri ke kanan, sedangkan spesifikasi Manifes Aplikasi Web tidak menerapkan
batasan tersebut. Contoh lainnya adalah start_url, yang diwajibkan Chrome agar aplikasi dapat
diinstal, tetapi di Oculus bersifat opsional. Oculus menawarkan
alat command line yang memungkinkan
developer membuat PWA untuk Oculus Quest 2, yang memungkinkan mereka meneruskan parameter yang tidak ada (atau
mengganti parameter yang ada) dalam Manifes Aplikasi Web.
Oculus memiliki sejumlah kolom Manifes Aplikasi Web eksklusif opsional yang dapat digunakan untuk menyesuaikan pengalaman PWA.
Mengemas PWA dengan Bubblewrap CLI
Bubblewrap adalah kumpulan library open source dan alat command line (CLI) untuk Node.js. Bubblewrap dikembangkan oleh tim Google Chrome, untuk membantu developer membuat, mem-build, dan menandatangani project Android yang meluncurkan PWA Anda sebagai Aktivitas Web Tepercaya (TWA).
Browser Meta Quest saat ini tidak sepenuhnya mendukung TWA, tetapi mulai dari versi 1.18.0, Bubblewrap mendukung pengemasan PWA untuk perangkat Meta Quest.
Alat ini dapat menghasilkan file APK universal yang membuka TWA di perangkat Android biasa dan Browser Meta Quest di perangkat Meta Quest.
Dengan asumsi Anda telah menginstal Node.js, Bubblewrap CLI dapat diinstal dengan perintah berikut:
npm i -g @bubblewrap/cli
Saat dijalankan untuk pertama kalinya, Bubblewrap akan menawarkan untuk mendownload dan menginstal dependensi eksternal yang diperlukan secara otomatis—Java Development Kit (JDK) dan Android SDK Build Tools.
Untuk membuat project Android yang kompatibel dengan Meta Quest yang menggabungkan PWA Anda, jalankan perintah init
dengan flag --metaquest dan ikuti wizard:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Setelah project dibuat, build dan tanda tangani dengan menjalankan:
bubblewrap build
Tindakan ini akan menghasilkan file bernama app-release-signed.apk. File ini dapat diinstal di perangkat
atau dipublikasikan ke Meta Quest Store, Google Play Store, atau platform distribusi
aplikasi Android lainnya.
Mengemas PWA dengan Oculus Platform Utility
Oculus Platform Utility adalah alat command line resmi yang dikembangkan oleh Meta untuk memublikasikan aplikasi di perangkat Oculus Rift dan Meta Quest.
Alat ini juga memungkinkan untuk memaketkan PWA untuk perangkat Meta Quest dengan perintah create-pwa dan memublikasikannya
ke Meta Quest Store dan App Lab.
Tetapkan nama file output melalui parameter -o dan jalur ke Android SDK melalui parameter
--android-sdk.
Arahkan alat ke URL aktif manifes aplikasi web melalui parameter --web-manifest-url.
Jika tidak memiliki manifes di PWA aktif atau ingin mengganti manifes aktif, Anda masih dapat
membuat APK untuk PWA menggunakan file manifes lokal dan parameter
--manifest-content-file.
Agar manifes tetap murni, gunakan parameter --package-name dengan nilai dalam
notasi nama domain terbalik (misalnya, com.company.app.pwa), bukan menambahkan
kolom ovr_package_name eksklusif ke manifes.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Mengemas PWA dengan PWABuilder
Menurut penulis, menggunakan PWABuilder adalah cara termudah dan direkomendasikan untuk memaketkan PWA untuk Meta Quest saat ini.
PWABuilder adalah project open source yang dikembangkan oleh Microsoft, yang memungkinkan developer mengemas dan menandatangani PWA mereka untuk dipublikasikan ke berbagai app store, termasuk Microsoft Store, Google Play Store, App Store, dan Meta Quest Store.
Mengemas PWA dengan PWABuilder semudah memasukkan URL PWA, memasukkan/mengedit metadata untuk aplikasi, dan mengklik tombol Generate.
PWABuilder memberi developer pilihan atas alat apa saja yang akan digunakan untuk mengemas PWA untuk perangkat Meta Quest.
Anda dapat memilih opsi Meta Quest untuk menggunakan Oculus Platform Utility.
Anda dapat memilih opsi Android untuk menggunakan Bubblewrap dan mencentang kotak Kompatibel dengan Meta Quest.
Menginstal PWA dengan ADB
Setelah membuat file APK, Anda dapat melakukan sideload ke perangkat Meta Quest menggunakan ADB melalui USB atau Wi-Fi:
adb install app-release-signed.apk
Jika Anda menggunakan Bubblewrap CLI untuk memaketkan PWA, CLI ini akan menyediakan perintah alias yang praktis untuk melakukan sideload file APK:
bubblewrap install
Aplikasi yang di-sideload muncul di bagian Sumber Tidak Dikenal di panel samping aplikasi.
Pengiriman aplikasi
Mengupload dan mengirimkan PWA ke Oculus Store dibahas secara mendetail dalam dokumen Oculus Developer Center.
Selain mengirimkan aplikasi ke Oculus Store, developer juga dapat mendistribusikan aplikasi mereka melalui platform seperti SideQuest langsung kepada konsumen dengan aman dan terlindungi, tanpa memerlukan persetujuan toko. Hal ini memungkinkan mereka mendapatkan aplikasi secara langsung ke pengguna akhir, meskipun masih dalam tahap awal pengembangan, eksperimental, atau ditujukan untuk audiens unik.
Menguji aplikasi multi-tab
Untuk menguji aplikasi multi-tab, saya membuat sedikit PWA pengujian yang menunjukkan berbagai fitur link: yaitu membuka tab baru dalam PWA, tetap berada di tab saat ini, membuka jendela browser baru, dan membuka di WebView yang tetap berada di tab saat ini. Buat salinan aplikasi ini yang dapat diinstal secara lokal dengan menjalankan perintah di bawah di komputer Anda.
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
Berikut adalah screencast aplikasi pengujian.
SVGcode versi Oculus
Untuk mengikuti petunjuk, saya membuat versi Oculus dari PWA terbaru saya, SVGcode. Anda dapat mendownload file APK yang dihasilkan
output.apk
dari Google Drive saya. Jika Anda ingin menyelidiki paket lebih lanjut, saya juga memiliki
versi yang didekompilasi. Temukan petunjuk build di
package.json.
Menggunakan aplikasi di Oculus berfungsi dengan baik, termasuk kemampuan untuk membuka dan menyimpan file. Oculus Browser tidak mendukung File System Access API, tetapi pendekatan penggantian akan membantu. Satu-satunya hal yang tidak berfungsi adalah zoom dengan mencubit. Harapan saya adalah agar alat ini berfungsi dengan menekan tombol pemicu di kedua pengontrol, lalu menggerakkan pengontrol ke arah yang berlawanan. Selain itu, semua yang lain berperforma baik dan responsif, seperti yang dapat Anda lihat di screencast tersemat.
PWA WebXR 3D yang imersif
Dukungan PWA di Oculus Quest tidak terbatas pada aplikasi 2D datar. Developer dapat membuat pengalaman 3D imersif untuk VR menggunakan WebXR API.
Ingin tahu cara berbagai perintah (penginstalan PWA, permintaan izin, notifikasi) ditangani dari dalam VR, jika ada?
Berikut adalah screencast pengujian Perintah Agen Pengguna dari Pengujian WebXR Immersive Web Working Group.
Seperti yang dapat Anda lihat, memasuki mode VR memerlukan izin pengguna. Izin diminta satu kali per origin. Meminta izin akan keluar dari mode imersif. Notifikasi saat ini tidak didukung.
Pelacakan tangan
Anda dapat menggunakan tangan untuk berinteraksi dengan PWA dalam mode imersif berkat WebXR Hand Input API dan sistem pelacakan tangan berbasis AI Meta.
Berikut adalah screencast Hand Tracking Sample dari WebXR Samples Immersive Web Working Group.
Augmented/Mixed Reality (Passthrough)
Seperti yang diumumkan di Meta Connect 2022, Meta Quest Browser telah menambahkan dukungan untuk Augmented Reality (AR) WebXR, yang juga dikenal sebagai Mixed Reality (MR), di perangkat Meta Quest 2 dan Meta Quest Pro.
Mari kita lihat contoh awal A-Frame yang sedikit dimodifikasi dengan model yang diperkecil serta langit dan bidang tersembunyi untuk augmented reality.
A-Frame adalah framework web open source untuk membuat pengalaman 3D/VR/AR yang sepenuhnya dari elemen HTML kustom deklaratif dan dapat digunakan kembali serta mudah dibaca, dipahami, serta disalin dan ditempelkan.
Berikut adalah screencast demo ini di Meta Quest 2.
Meta Quest 2 memiliki kamera monokrom, sehingga passthrough-nya berwarna abu-abu, sedangkan Meta Quest Pro memiliki kamera berwarna.
Kesimpulan
PWA di Oculus Quest 2 sangat menyenangkan dan sangat menjanjikan. Kanvas virtual tanpa batas yang memungkinkan pengguna menskalakan layar mereka ke apa pun yang paling sesuai dengan tugas saat ini memiliki banyak potensi untuk mengubah cara kita bekerja di masa mendatang. Meskipun mengetik di VR dengan pelacakan tangan masih dalam tahap awal dan, setidaknya bagi saya, belum berfungsi dengan sangat andal, fitur ini berfungsi cukup baik untuk memasukkan URL atau mengetik teks singkat.
Yang paling saya sukai dari PWA di Oculus Quest 2 adalah PWA biasa hanya PWA biasa yang dapat digunakan tanpa perubahan di tab browser atau melalui wrapper APK tipis tanpa API khusus platform apa pun. Menargetkan beberapa platform dengan kode yang sama tidak pernah semudah ini. Inilah PWA dalam VR dan AR di web. Masa depan cerah!
Ucapan terima kasih
Foto Oculus Quest 2 oleh Maximilian Prandstätter di Flickr. Gambar Oculus Store untuk Instagram, Facebook, Oculus Browser, dan Spike serta kemampuan penemuan aplikasi dan pelacakan tangan adalah milik Meta. Gambar hero oleh Arnau Marín i Puig. Postingan ini telah ditinjau oleh Joe Medley.