Oculus Quest 2 là tai nghe thực tế ảo (VR) do Oculus, một bộ phận của Meta tạo ra. Giờ đây, nhà phát triển có thể xây dựng và phân phối Ứng dụng web tiến bộ (PWA) 2D và 3D tận dụng tính năng đa nhiệm của Oculus Quest 2.
Nhiệm vụ Oculus 2
Oculus Quest 2 là tai nghe thực tế ảo (VR) do Oculus, một bộ phận của Meta tạo ra. Đây là sản phẩm kế thừa cho tai nghe trước đó của công ty, Oculus Nhiệm vụ. Thiết bị này có thể hoạt động như một tai nghe độc lập có hệ điều hành nội bộ dựa trên Android và phần mềm thực tế ảo tương thích với Oculus chạy trên máy tính khi được kết nối qua USB hoặc Wi-Fi. Thiết bị này sử dụng hệ thống Snapdragon XR2 của công ty dựa trên chip có 6 GB RAM. Màn hình của Quest 2 là một màn hình LCD công tắc duy nhất với độ phân giải 1.832 × 1.920 pixel/mắt, chạy ở tốc độ làm mới lên đến 120 Hz.
Trình duyệt Oculus
Hiện tại, có ba trình duyệt cho Oculus Quest 2: Wolvic, phiên bản kế thừa của Firefox Reality và Trình duyệt Oculus tích hợp sẵn. Bài viết này tập trung vào phần sau. Trang web Oculus giới thiệu Trình duyệt Oculus như sau.
"Trình duyệt Oculus hỗ trợ các tiêu chuẩn web mới nhất và các công nghệ khác nhằm giúp bạn tạo trải nghiệm thực tế ảo trên web. Các trang web 2D hiện nay hoạt động tốt trong Trình duyệt Oculus vì nó được hỗ trợ bởi công cụ kết xuất Chromium. Các API này được tối ưu hoá hơn nữa cho tai nghe Oculus để đạt được hiệu suất tốt nhất và cho phép các nhà phát triển web tận dụng toàn bộ tiềm năng của thực tế ảo với các API mới, như WebXR. Thông qua WebXR, chúng tôi đang mở ra những cánh cửa tiến đến ranh giới tiếp theo của thế giới web."
Tác nhân người dùng
Chuỗi tác nhân người dùng của trình duyệt tại thời điểm viết như sau.
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
Như bạn có thể thấy, phiên bản 18.1.0.2.46.337441587 hiện tại của Trình duyệt Oculus dựa trên Chrome 95.0.4638.74, chỉ là phiên bản sau phiên bản ổn định hiện tại của Chrome 96.0.4664.110. Nếu người dùng chuyển sang chế độ thiết bị di động, VR sẽ chuyển thành Mobile VR.
Giao diện người dùng
Giao diện người dùng của trình duyệt (hiển thị ở trên) có các tính năng sau (hàng trên cùng từ trái sang phải):
- Nút quay lại
- Nút Tải lại
- Thông tin trang web
- Thanh URL
- Nút tạo dấu trang
- Nút đổi kích thước có các tuỳ chọn hẹp, trung bình và rộng cũng như tính năng thu phóng
- Nút yêu cầu trang web dành cho thiết bị di động
- Nút trình đơn có các tuỳ chọn sau:
- Chuyển sang chế độ riêng tư
- Đóng tất cả các tab
- Cài đặt
- Dấu trang
- Nội dung tải xuống
- Cập nhật trước đây
- Xóa dữ liệu duyệt web
Hàng dưới cùng bao gồm những tính năng sau:
- Nút đóng
- Nút thu nhỏ
- Nút ba dấu chấm có các tuỳ chọn tiến, lùi và tải lại
Tốc độ làm mới và tỷ lệ pixel của thiết bị
Đối với Oculus Quest 2, Trình duyệt Oculus hiển thị cả nội dung trang web 2D và WebXR với tốc độ làm mới 90 Hz. Khi xem nội dung nghe nhìn ở chế độ toàn màn hình, trình duyệt Oculus sẽ tối ưu hoá tốc độ làm mới thiết bị dựa trên tốc độ khung hình của video, chẳng hạn như 24 khung hình/giây. Oculus Quest 2 có tỷ lệ pixel trên thiết bị là 1,5 cho văn bản sắc nét.
PWA trong Trình duyệt Oculus và Oculus Store
Vào ngày 28 tháng 10 năm 2021, Jacob Rossi, Trưởng nhóm quản lý sản phẩm tại Meta (Oculus), chia sẻ rằng PWA đang được chuyển đến Oculus Quest và Oculus Quest 2. Sau đây, tôi mô tả trải nghiệm PWA trên Oculus và giải thích cách tạo, cài đặt không qua cửa hàng ứng dụng và kiểm thử PWA của bạn trên Oculus Quest 2.
Chia sẻ trạng thái
Trạng thái đăng nhập được chia sẻ giữa Trình duyệt Oculus và PWA, cho phép người dùng chuyển đổi liền mạch giữa hai trình duyệt này. Đương nhiên, bạn có thể sử dụng tính năng FacebookSign (Đăng nhập Facebook) ngay từ đầu. Trình duyệt Oculus có một trình quản lý mật khẩu cho phép người dùng lưu trữ và chia sẻ mật khẩu của họ một cách an toàn giữa trình duyệt và trải nghiệm trong ứng dụng đã cài đặt.
Kích thước cửa sổ PWA
Người dùng có thể tự do thay đổi kích thước cửa sổ trình duyệt và cửa sổ của PWA đã cài đặt. Chiều cao có thể thay đổi trong khoảng từ 625 px đến 1.200 px. Bạn có thể đặt chiều rộng trong khoảng từ 400 px đến 2.000 px. Kích thước mặc định là 1.000 × 625 px.
Tương tác với PWA
Bạn có thể kiểm soát PWA bằng các bộ điều khiển bên trái và phải của Oculus, chuột và bàn phím Bluetooth cũng như thông qua tính năng theo dõi tay. Thao tác cuộn hoạt động thông qua các ngón tay cái trên bộ điều khiển Oculus hoặc bằng cách chụm ngón cái và ngón trỏ rồi di chuyển theo hướng mong muốn. Để chọn nội dung nào đó, người dùng có thể trỏ và chụm.
Quyền đối với PWA
Các quyền trong trình duyệt Oculus hoạt động gần giống như trong Chrome. Trạng thái này được chia sẻ giữa các ứng dụng chạy trong trình duyệt và các PWA đã cài đặt, vì vậy, người dùng có thể chuyển đổi giữa 2 trải nghiệm mà không cần phải cấp lại các quyền tương tự.
Mặc dù nhiều quyền được triển khai, nhưng không phải tính năng nào cũng được hỗ trợ. Ví dụ: mặc dù đã thành công trong việc yêu cầu quyền truy cập thông tin vị trí, nhưng thiết bị không bao giờ thực sự nhận được thông tin vị trí. Tương tự, các API phần cứng như WebHID, Web Bluetooth, v.v. đều truyền phát hiện tính năng, nhưng không thực sự hiển thị bộ chọn cho phép người dùng ghép nối Oculus với thiết bị phần cứng. Tôi cho rằng khả năng phát hiện tính năng của các API sẽ được tinh chỉnh khi trình duyệt hoàn thiện.
Gỡ lỗi PWA bằng Công cụ của Chrome cho nhà phát triển
Sau khi bật Chế độ nhà phát triển, quá trình gỡ lỗi PWA trên Oculus Quest 2 sẽ hoạt động đúng như mô tả trong phần Gỡ lỗi từ xa trên thiết bị Android.
- Trên thiết bị Oculus, hãy duyệt đến trang web bạn muốn trong Trình duyệt Oculus.
- Chạy Google Chrome trên máy tính rồi chuyển đến
chrome://inspect/#devices. - Tìm thiết bị Oculus được đề cập, theo sau là một nhóm các thẻ Trình duyệt Oculus hiện đang mở trên thiết bị.
- Nhấp vào inspect trên thẻ Trình duyệt Oculus mong muốn.
Khám phá ứng dụng
Mọi người có thể sử dụng chính trình duyệt hoặc Oculus Store để khám phá các PWA. Giống như mọi trình duyệt khác, các PWA đã cài đặt cũng hoạt động trong Trình duyệt Oculus dưới dạng các trang web chạy trong một thẻ. Khi người dùng truy cập vào một trang web, Trình duyệt Oculus sẽ giúp họ khám phá ứng dụng nếu (và chỉ khi) ứng dụng đó có trong Oculus Store. Đối với những người dùng đã cài đặt ứng dụng, Trình duyệt Oculus sẽ giúp họ dễ dàng chuyển sang ứng dụng nếu muốn.
PWA ví dụ trong Oculus Quest 2
PWA của Meta
Nhiều bộ phận của Meta đã tạo PWA cho Oculus Quest 2, chẳng hạn như Instagram và Facebook. Các PWA này chạy trong các cửa sổ ứng dụng độc lập, không có thanh URL và có thể tự do đổi kích thước.
PWA của các nhà phát triển khác
Tại thời điểm chúng tôi viết bài này, có một số ít PWA cho Oculus Quest 2 trên Oculus Store. Spike cho phép người dùng trải nghiệm tất cả các công cụ làm việc thiết yếu như email, cuộc trò chuyện, cuộc gọi, ghi chú, việc cần làm và việc cần làm từ hộp thư đến trong trung tâm môi trường ảo ngay trong ứng dụng Spike.
Một ví dụ khác là Smartsheet, một không gian làm việc linh hoạt cung cấp khả năng quản lý dự án, quy trình làm việc tự động và khả năng xây dựng nhanh chóng các giải pháp mới.
Sắp có thêm nhiều PWA như Slack, Dropbox hoặc Canva như đã hé lộ trong một video có sự góp mặt của Jacob Rossi. Video này được phát hành trong bối cảnh hội nghị Connect của Facebook vào năm 2021.
Tạo PWA cho Oculus
Meta đã nêu các bước bắt buộc trong tài liệu của họ. Nhìn chung, các PWA có thể cài đặt trong Chrome thường hoạt động độc đáo trên Oculus.
Yêu cầu về tệp kê khai ứng dụng web
Có một số khác biệt quan trọng so với tiêu chí của Chrome về khả năng cài đặt và thông số kỹ thuật của Tệp kê khai ứng dụng web. Ví dụ: Oculus hiện chỉ hỗ trợ ngôn ngữ từ trái sang phải, trong khi thông số của Tệp kê khai ứng dụng web không thực thi những quy tắc ràng buộc như vậy. Một ví dụ khác là start_url. Chrome yêu cầu nghiêm ngặt một ứng dụng để cài đặt được, nhưng trên Oculus thì không bắt buộc. Oculus cung cấp một công cụ dòng lệnh cho phép nhà phát triển tạo PWA cho Oculus Quest 2, cho phép họ truyền các thông số bị thiếu (hoặc ghi đè các thông số hiện có) trong Tệp kê khai ứng dụng web.
Oculus có một số trường Tệp kê khai ứng dụng web thuộc quyền sở hữu riêng không bắt buộc có thể dùng để tuỳ chỉnh trải nghiệm PWA.
Đóng gói PWA bằng Bubblewrap CLI
Bubblewrap là một nhóm thư viện nguồn mở và là công cụ dòng lệnh (CLI) cho Node.js. Bubblewrap do nhóm Google Chrome phát triển để giúp nhà phát triển tạo, xây dựng và ký một dự án Android chạy PWA của bạn dưới dạng Hoạt động web đáng tin cậy (TWA).
Trình duyệt Meta Quest hiện không hỗ trợ đầy đủ TWA, nhưng kể từ phiên bản 1.18.0, Bubblewrap hỗ trợ gói PWA cho các thiết bị Meta Quest.
Thư viện này có thể tạo các tệp APK chung để mở TWA trên thiết bị Android thông thường và Trình duyệt Meta Quest trên thiết bị Meta Quest.
Giả sử bạn đã cài đặt Node.js, bạn có thể cài đặt Bubblewrap CLI bằng lệnh sau:
npm i -g @bubblewrap/cli
Trong lần đầu chạy, Bubblewrap sẽ đề xuất tự động tải xuống và cài đặt các phần phụ thuộc bên ngoài bắt buộc – Bộ phát triển Java (JDK) và Công cụ tạo SDK Android.
Để tạo một dự án Android tương thích với Meta Quest bao bọc PWA, hãy chạy lệnh init có cờ --metaquest rồi làm theo trình hướng dẫn:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Sau khi dự án được tạo, hãy tạo và ký dự án bằng cách chạy:
bubblewrap build
Thao tác này sẽ tạo ra một tệp có tên là app-release-signed.apk. Bạn có thể cài đặt tệp này trên thiết bị hoặc phát hành lên Meta Quest Store, Cửa hàng Google Play hoặc bất kỳ nền tảng phân phối ứng dụng Android nào khác.
Đóng gói PWA bằng tiện ích nền tảng Oculus
Tiện ích nền tảng Oculus là công cụ dòng lệnh chính thức do Meta phát triển để phát hành ứng dụng cho các thiết bị Oculus Rift và MetaQuest.
Thư viện này cũng cho phép đóng gói PWA cho các thiết bị Meta Quest bằng lệnh create-pwa và phát hành các PWA đó lên Meta Quest Store và App Lab.
Đặt tên tệp đầu ra thông qua tham số -o và đường dẫn đến SDK Android thông qua tham số --android-sdk.
Trỏ công cụ này vào URL đang hoạt động của tệp kê khai ứng dụng web thông qua tham số --web-manifest-url.
Nếu không có tệp kê khai trên PWA đang hoạt động hoặc muốn ghi đè tệp kê khai trực tiếp, bạn vẫn có thể tạo APK cho PWA của mình bằng cách sử dụng tệp kê khai cục bộ và tham số --manifest-content-file.
Để tệp kê khai thuần tuý nhất có thể, hãy sử dụng tham số --package-name với giá trị trong ký hiệu tên miền ngược (ví dụ: com.company.app.pwa), thay vì thêm trường ovr_package_name độc quyền vào tệp kê khai.
ovr-platform-util create-pwa -o output.apk --android-sdk ~/bin/android-10 --manifest-content-file manifest.json --package-name com.company.app.pwa
Đóng gói PWA bằng PWABuilder
Theo tác giả, việc sử dụng PWABuilder là cách dễ nhất, do đó, là cách dễ nhất để đóng gói PWA cho Meta Quest.
PWABuilder là một dự án nguồn mở do Microsoft phát triển, cho phép các nhà phát triển đóng gói và ký PWA của họ để phát hành lên nhiều cửa hàng, bao gồm cả Microsoft Store, Cửa hàng Google Play, App Store và Meta Quest Store.
Việc đóng gói PWA bằng PWABuilder cũng đơn giản như nhập URL của PWA, nhập/chỉnh sửa siêu dữ liệu của ứng dụng rồi nhấp vào nút Generate (Tạo).
PWABuilder cho phép nhà phát triển lựa chọn công cụ nâng cao để sử dụng để đóng gói PWA cho thiết bị Meta Quest.
Bạn có thể chọn Meta Quest để sử dụng Oculus Platform Extension.
Bạn có thể chọn Android để sử dụng Bubblewrap rồi chọn hộp đánh dấu Meta Quest (Tương thích với Meta Quest).
Cài đặt PWA bằng ADB
Sau khi tạo tệp APK, bạn có thể tải tệp không qua cửa hàng vào thiết bị Meta Quest bằng cách sử dụng ADB qua USB hoặc Wi-Fi:
adb install app-release-signed.apk
Nếu bạn sử dụng Bubblewrap CLI để đóng gói PWA, thì ứng dụng này sẽ cung cấp một lệnh bí danh thuận tiện để tải tệp APK không qua cửa hàng:
bubblewrap install
Các ứng dụng được cài đặt không qua cửa hàng ứng dụng xuất hiện ở phần Nguồn không xác định trong ngăn ứng dụng.
Gửi ứng dụng
Việc tải và gửi PWA lên Oculus Store được đề cập chi tiết trong tài liệu của Trung tâm dành cho nhà phát triển Oculus.
Ngoài việc gửi ứng dụng đến Oculus Store, nhà phát triển cũng có thể phân phối ứng dụng trực tiếp cho người tiêu dùng thông qua các nền tảng như SideQuest một cách an toàn và bảo mật mà không cần cửa hàng phê duyệt. Nhờ đó, nhà phát triển có thể trực tiếp tải ứng dụng đến với người dùng cuối, ngay cả khi ứng dụng đó đang trong giai đoạn phát triển ban đầu, ở giai đoạn thử nghiệm hay nhắm đến một đối tượng riêng biệt.
Kiểm thử ứng dụng nhiều thẻ
Để kiểm thử các ứng dụng nhiều thẻ, tôi đã tạo một PWA nhỏ minh hoạ các tính năng liên kết khác nhau: cụ thể là mở một thẻ mới trong PWA, giữ lại thẻ hiện tại, mở một cửa sổ trình duyệt mới và mở trong một WebView ở thẻ hiện tại. Tạo một bản sao có thể cài đặt cục bộ của ứng dụng này bằng cách chạy các lệnh bên dưới trên máy của bạn.
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
Sau đây là bản ghi màn hình về ứng dụng kiểm thử.
Phiên bản Oculus của SVGcode
Để xem hướng dẫn, tôi đã tạo một phiên bản Oculus của PWA gần đây nhất, SVGcode. Bạn có thể tải tệp APK thu được output.apk xuống từ Google Drive của tôi. Nếu bạn muốn điều tra thêm về gói, tôi cũng có một phiên bản được biên dịch ngược. Tìm hướng dẫn tạo trong package.json.
Việc sử dụng ứng dụng này trên Oculus hoạt động tốt, bao gồm cả khả năng mở và lưu tệp. Trình duyệt Oculus không hỗ trợ API Truy cập hệ thống tệp, nhưng phương pháp dự phòng sẽ hữu ích. Tính năng duy nhất không hoạt động là chụm-mở. Kỳ vọng của tôi là hoạt động bằng cách nhấn nút kích hoạt trên cả hai bộ điều khiển, sau đó di chuyển các bộ điều khiển theo hướng ngược lại. Ngoài ra, mọi thứ khác đều hoạt động hiệu quả và thích ứng, như bạn có thể thấy trong bản ghi màn hình được nhúng.
PWA WebXR 3D sống động
Dịch vụ hỗ trợ PWA trên Oculus Quest không giới hạn ở các ứng dụng 2D phẳng. Các nhà phát triển có thể xây dựng trải nghiệm 3D sống động cho thực tế ảo bằng cách sử dụng API WebXR.
Bạn đang thắc mắc về cách xử lý các lời nhắc (cài đặt PWA, yêu cầu quyền, thông báo) trong thực tế ảo (VR)?
Sau đây là bản ghi màn hình về bài kiểm thử Lời nhắc cho tác nhân người dùng từ Bài kiểm thử WebXR của Nhóm làm việc web sống động.
Như bạn có thể thấy, việc vào chế độ thực tế ảo cần được người dùng cho phép. Quyền được yêu cầu một lần đối với mỗi nguồn gốc. Khi yêu cầu cấp quyền, bạn sẽ thoát khỏi chế độ chìm. Tính năng thông báo hiện chưa được hỗ trợ.
Theo dõi tay
Bạn có thể dùng tay để tương tác với PWA ở chế độ sống động nhờ WebXR Hand Input API và hệ thống theo dõi tay dựa trên AI của Meta.
Sau đây là bản ghi màn hình Mẫu theo dõi tay từ Mẫu WebXR của Nhóm làm việc web sống động.
Thực tế tăng cường/Thực tế hỗn hợp (Truyền qua)
Như đã thông báo tại Meta Connect 2022, Trình duyệt Meta Quest đã hỗ trợ thêm tính năng Thực tế tăng cường WebXR (AR) (còn gọi là Thực tế hỗn hợp (MR)) trên các thiết bị Meta Quest 2 và MetaQuest Pro.
Hãy xem ví dụ khởi động A-Frame được sửa đổi đôi chút với các mô hình thu nhỏ và bầu trời và mặt phẳng ẩn để thực tế tăng cường.
A-Frame là khung web nguồn mở để xây dựng hoàn toàn trải nghiệm 3D/VR/AR (thực tế ảo/thực tế tăng cường) bằng phần tử HTML tuỳ chỉnh mang tính khai báo và có thể tái sử dụng, dễ đọc, hiểu, cũng như sao chép và dán.
Sau đây là bản ghi màn hình bản minh hoạ này về Meta Quest 2.
Meta Quest 2 có máy ảnh đơn sắc, vì vậy, thông tin truyền qua sẽ có thang màu xám, trong khi Meta Quest Pro có máy ảnh màu.
Kết luận
PWA trên Oculus Quest 2 rất thú vị và đầy hứa hẹn. Canvas ảo vô tận cho phép người dùng điều chỉnh màn hình theo tỷ lệ phù hợp nhất với nhiệm vụ hiện tại có rất nhiều tiềm năng để thay đổi cách chúng ta làm việc trong tương lai. Mặc dù việc nhập VR với tính năng theo dõi tay vẫn còn trong giai đoạn đầu và ít nhất đối với tôi, hoạt động chưa ổn định, nhưng nó hoạt động đủ tốt để nhập URL hoặc nhập văn bản ngắn.
Điều tôi thích nhất về PWA trên Oculus Quest 2 là chúng chỉ là các PWA thông thường có thể được dùng không thay đổi trong thẻ trình duyệt hoặc thông qua một trình bao bọc APK mỏng mà không cần API dành riêng cho nền tảng nào. Việc nhắm mục tiêu đến nhiều nền tảng bằng cùng một mã chưa bao giờ dễ dàng đến thế. Sau đây là PWA trong VR và AR trên web. Tương lai thật tươi sáng!
Xác nhận
Ảnh Oculus Quest 2 của Maximilian Prandstätter trên Flickr. Hình ảnh trong Oculus Store của các ứng dụng Instagram, Facebook, Oculus browser và Spike cũng như hình minh hoạ khả năng phát hiện ứng dụng và theo dõi tay do Meta cung cấp. Hình ảnh chính của Arnau Marín i Puig. Bài đăng này đã được Joe Medley xem xét.