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