Oculus Quest 2 là kính 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.
Oculus Quest 2
Oculus Quest 2 là kính thực tế ảo (VR) do Oculus, một bộ phận của Meta, tạo ra. Đây là phiên bản kế nhiệm của chiếc kính thực tế ảo trước đó của công ty, Oculus Quest. Thiết bị này có thể chạy dưới dạng kính thực tế ảo độc lập có hệ điều hành nội bộ dựa trên Android, và chạy bằng phần mềm thực tế ảo tương thích với Oculus 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 một chip Qualcomm Snapdragon XR2 với RAM 6 GB. Màn hình của Quest 2 là một tấm nền LCD chuyển đổi nhanh duy nhất có độ phân giải 1.832 × 1.920 pixel cho 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, 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 cách thứ hai. 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 để 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 hiệu quả trong Trình duyệt Oculus vì trình duyệt này được hỗ trợ bởi công cụ kết xuất Chromium. Trình duyệt này được tối ưu hoá hơn nữa cho kính thực tế ảo Oculus để đạt hiệu suất tốt nhất và giúp nhà phát triển web khai thác toàn bộ tiềm năng của thực tế ảo 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 đến với ranh giới 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 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, tức là chỉ chậm hơn một phiên bản so với phiên bản ổn định hiện tại của Chrome, tức là 96.0.4664.110. Nếu người dùng chuyển sang chế độ 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 lựa 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 lựa 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 lựa 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 kết xuất 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, Trình duyệt Oculus 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 khung hình/giây. Oculus Quest 2 có tỷ lệ pixel thiết bị là 1,5 để văn bản hiển thị rõ 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 sẽ ra mắt trên Oculus Quest và Oculus Quest 2. Sau đây, tôi sẽ 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 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, Đă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 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 pixel.
Tương tác với PWA
Bạn có thể điều khiển PWA bằng bộ đ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 cử động của tay. Bạn có thể cuộn bằng cần điều khiển bằng ngón tay cái trên bộ điều khiển Oculus hoặc bằng cách chụm ngón tay 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ể chỉ và chụm ngón tay.
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 này được chia sẻ giữa các ứng dụng chạy trong trình duyệt và PWA đã cài đặt, nhờ đó, 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ùng một quyền.
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 cấp 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ờ thực sự 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 quy trình 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 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 Chrome DevTools
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 xem trang web bạn muốn trong Trình duyệt Oculus.
- Mở Google Chrome trên máy tính rồi chuyển đến
chrome://inspect/#devices. - Tìm thiết bị Oculus liên quan, theo sau là một nhóm thẻ Trình duyệt Oculus hiện đang mở trên thiết bị.
- Nhấp vào kiểm tra 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 Cửa hàng Oculus để khám phá PWA. Giống như mọi trình duyệt khác, PWA đã cài đặt cũng hoạt động trong Trình duyệt Oculus dưới dạng 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, Trình duyệt Oculus sẽ giúp họ dễ dàng chuyển sang ứng dụng nếu muốn.
PWA mẫu trên 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ửa sổ ứng dụng độc lập, không có thanh URL và có thể thay đổi kích thước tuỳ ý.
PWA của các nhà phát triển khác
Tại thời điểm viết bài viết này, có một số ít nhưng ngày càng nhiều 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, 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 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 hoạt 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ó thêm nhiều PWA như Slack, Dropbox hoặc Canva, như đã được hé lộ trong một video có sự góp mặt của 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 đã 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 sẽ 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 tiêu chí cài đặt của Chrome và quy cách của 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 quy cách của Tệp kê khai ứng dụng web không áp đặt các 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 để ứng dụng có thể 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, giú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 độc quyền không bắt buộc trong Tệp kê khai ứng dụng web 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 tài nguyên nguồn mở và một công cụ dòng lệnh (CLI) cho Node.js. Bubblewrap do nhóm Google Chrome phát triển để giúp các nhà phát triển tạo, xây dựng và ký một dự án Android khởi chạy PWA dưới dạng 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 tệp APK phổ quát để mở TWA trên các thiết bị Android thông thường và Trình duyệt Meta Quest trên các 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
Khi chạy Bubblewrap lần đầu tiên, công cụ này 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ụ xây dựng SDK Android.
Để tạo một dự án Android tương thích với Meta Quest bao bọc PWA của bạn, hãy chạy lệnh init bằng cờ --metaquest và làm theo trình hướng dẫn:
bubblewrap init --manifest="https://your.web.app/manifest.json" --metaquest
Sau khi tạo dự án, hãy tạo bản dựng và ký 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 Oculus Platform Utility
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à xuất bản
chúng lên Cửa hàng Meta Quest 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 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 đang hoạt động, bạn vẫn có thể tạo tệp APK cho PWA bằng tệp kê khai cục bộ và tham số --manifest-content-file.
Để giữ cho tệp kê khai đơn giản nhất có thể, hãy sử dụng tham số --package-name có giá trị trong 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ễ nhất và do đó là cách nên dùng để đóng gói PWA cho Meta Quest vào thời điểm hiện tại.
PWABuilder là một dự án nguồn mở do Microsoft phát triển, cho phép nhà phát triển đóng gói và ký các PWA của họ để phát hành lên nhiều cửa hàng ứng dụ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 rất dễ dàng, bạn chỉ cần nhập URL của PWA, nhập/chỉnh sửa siêu dữ liệu cho ứng dụng rồi nhấp vào nút Tạo.
PWABuilder cho phép nhà phát triển lựa chọn công cụ nâng cao để đóng gói PWA cho thiết bị Meta Quest.
Bạn có thể chọn Meta Quest để sử dụng Oculus Platform Utility.
Bạn có thể 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ể cài đặt không qua cửa hàng ứng dụng vào 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ì công cụ này sẽ cung cấp một lệnh bí danh thuận tiện để cài đặt không qua cửa hàng ứng dụng cho tệp APK:
bubblewrap install
Ứng dụng cài đặt không qua cửa hàng ứng dụng sẽ xuất hiện trong phần Không rõ nguồn gốc trong ngăn chứa ứng dụng.
Gửi ứng dụng
Việc tải lên và gửi PWA đến Oculus Store được đề cập chi tiết trong tài liệu của Trung tâm 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 của họ thông qua các nền tảng như SideQuest trực tiếp đến người tiêu dùng một cách an toàn và bảo mật mà không cần cửa hàng phê duyệt. Điều này cho phép họ cung cấp ứng dụng trực tiếp cho 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ẻ
Để thử nghiệm các ứng dụng nhiều thẻ, tôi đã tạo một PWA thử nghiệm nhỏ minh hoạ nhiều tính năng liên kết: 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 trên máy 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 thử nghiệm.
Phiên bản Oculus của SVGcode
Để thử nghiệm hướng dẫn, tôi đã tạo một phiên bản Oculus cho PWA gần đây nhất của mình, SVGcode. Bạn có thể tải tệp APK kết quả 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 đã biên dịch ngược. Tìm hướng dẫn tạo bản dựng trong package.json.
Ứng dụng hoạt động tốt trên Oculus, 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 có thể giúp ích. Chỉ có một tính năng không hoạt động là chụm để thu phóng. Tôi mong đợi tính năng này 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 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
Tính năng hỗ trợ PWA trên Oculus Quest không chỉ dành cho 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 có thắc mắc về 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 không?
Sau đây là bản ghi màn hình của bài kiểm thử Lời nhắc tác nhân người dùng trong Bài kiểm thử WebXR của Nhóm công tác về web sống động.
Như bạn có thể thấy, việc vào chế độ thực tế ảo cần có sự cho phép của người dùng. Hệ thống sẽ yêu cầu cấp quyền một lần cho mỗi nguồn gốc. Yêu cầu cấp quyền sẽ thoát khỏi chế độ hiển thị tối đa. Tính năng thông báo hiện chưa được hỗ trợ.
Theo dõi cử động của tay
Bạn có thể dùng tay để tương tác với PWA ở chế độ hiển thị tối đa nhờ API đầu vào bằng tay WebXR và hệ thống theo dõi cử động của tay dựa trên AI của Meta.
Dưới đây là bản ghi màn hình của Mẫu theo dõi cử động của tay trong Mẫu WebXR của Nhóm công tác về web sống động.
Thực tế tăng cường/thực tế hỗn hợp (Chế độ nhìn xuyên qua)
Như đã thông báo tại Meta Connect 2022, Trình duyệt Meta Quest đã bổ sung tính năng hỗ trợ cho Thực tế tăng cường (AR) WebXR, 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ụ khởi đầu về A-Frame đã được sửa đổi một chút với các mô hình thu nhỏ, 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 có thể khai báo, có thể sử dụng lại, dễ đọc, dễ hiểu và dễ sao chép và dán.
Sau đâ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ó camera đơn sắc nên chế độ truyền qua sẽ có màu xám, trong khi Meta Quest Pro có camera màu.
Kết luận
PWA trên Oculus Quest 2 rất thú vị và đầy hứa hẹn. Khung vẽ ảo vô tận cho phép người dùng điều chỉnh tỷ lệ màn hình cho phù hợp nhất với công việc hiện tại, 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ù tính năng nhập bằng theo dõi cử động của tay trong Thực tế ảo vẫn cò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 vẫn đủ 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à những PWA thông thường có thể được sử dụng mà 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ó 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ế. Đây là PWA trong VR và AR trên web. Tương lai tươi sáng!
Xác nhận
Ảnh Oculus Quest 2 của Maximilian Prandstätter trên Flickr. Hình ảnh trên 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 được phát hiện của ứng dụng và ảnh động theo dõi cử động của tay do Meta cung cấp. Bài đăng này đã được Joe Medley xem xét.