Oculus Quest 2 là một thiết bị đội đầu thực tế ảo (VR) do Oculus (một bộ phận của Meta) sản xuất. 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ị đội đầu thực tế ảo (VR) do Oculus (một bộ phận của Meta) sản xuất. Đây là phiên bản kế nhiệm của chiếc 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ả một tai nghe độc lập có hệ điều hành nội bộ dựa trên Android và với phần mềm thực tế ảo 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 Qualcomm Snapdragon XR2 trên một con chip có 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 với độ 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 tại, có 3 trình duyệt dành cho Oculus Quest 2: Wolvic (phiên bản kế nhiệm của Firefox Reality) và Oculus Browser (trình duyệt tích hợp). 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.
"Oculus Browser hỗ trợ các tiêu chuẩn web mới nhất và những 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 hiệu quả trong Oculus Browser vì trình duyệt này sử dụng công cụ kết xuất Chromium. Trình duyệt 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 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 cho biên 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 bài có dạng 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 thấy, phiên bản 18.1.0.2.46.337441587 hiện tại của Oculus Browser 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 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
- Tạo nút đánh dấu trang
- Nút đổi kích thước có các lựa chọn hẹp, vừa 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 có các tính năng sau:
- Nút đóng
- Nút thu nhỏ
- Nút có biểu tượng ba dấu chấm với các lựa chọn quay lại, tiến 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, Oculus Browser 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, Oculus Browser 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, ví dụ: 24 khung hình/giây. Oculus Quest 2 có tỷ lệ pixel thiết bị là 1,5 để hiển thị văn bản rõ 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), đã thông báo rằng 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 lên 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 khi xuất xưởng. Oculus Browser 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à các trải nghiệm ứng dụng đã cài đặt.
Kích thước cửa sổ PWA
Người dùng có thể tuỳ ý đổ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 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ể điều khiển PWA bằng bộ điều khiể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 bàn tay. Bạn có thể cuộn bằng cách dùng cần điều khiển 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 một mục nào đó, người dùng có thể trỏ và chụm.
Quyền cho PWA
Các quyền trong Oculus Browser 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 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 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ự, tất cả các 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 thực sự không 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 hoàn thiện.
Gỡ lỗi PWA thông qua Công cụ của Chrome cho nhà phát triển
Sau khi bạn 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 các 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.
- Khởi chạy Google Chrome trên máy tính rồi chuyển đến
chrome://inspect/#devices. - Tìm thiết bị Oculus mà bạn muốn, sau đó sẽ là một nhóm thẻ của Trình duyệt Oculus hiện đang mở trên thiết bị đó.
- Nhấp vào inspect (kiểm tra) trên thẻ Oculus Browser 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, 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, Oculus Browser 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, Oculus Browser sẽ giúp họ dễ dàng chuyển sang ứng dụng nếu muốn.
Các 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. Những 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ể 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 này, có một số lượng nhỏ nhưng ngày càng tăng các ứng dụng PWA 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ụ thiết yếu cho công việc như email, cuộc trò chuyện, cuộc gọi, ghi chú, việc cần làm và danh sách việc cần làm ngay trong 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.
Nhiều ứng dụng web có thể cài đặt (PWA) khác như Slack, Dropbox hoặc Canva sẽ ra mắt, như đã được hé lộ trong một video có sự xuất hiện 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 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à thông số kỹ thuật 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 thông số kỹ thuật của Tệp kê khai ứng dụng web không áp dụng các hạn chế như vậy. Một ví dụ khác là start_url. Chrome yêu cầu nghiêm ngặt ứng dụng phải có tham số này thì mớ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, nhờ đó họ có thể truyền các tham số còn 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 quyền không bắt buộc mà bạn 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) cho Node.js. Bubblewrap được 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 của bạn dưới dạng một Hoạt động web đáng tin cậy (TWA).
Meta Quest Browser hiện chưa hỗ trợ đầy đủ TWA, nhưng kể từ phiên bản 1.18.0, Bubblewrap hỗ trợ việc đóng gói PWA cho các thiết bị Meta Quest.
Nó có thể tạo các tệp APK chung để mở một TWA trên các thiết bị Android thông thường và Meta Quest Browser 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ẽ đề nghị 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ộ công cụ 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 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ẽ 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 xuất bản 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 để xuất bản ứ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 Meta Quest Store và App Lab.
Đặt tên tệp đầu ra thông qua tham số -o và đường dẫn đến Android SDK thông qua tham số --android-sdk.
Chỉ 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 APK cho PWA bằng cách sử dụng tệp kê khai cục bộ và tham số --manifest-content-file.
Để giữ cho tệp kê khai càng thuần tuý càng tốt, hãy sử dụng tham số --package-name có giá trị theo 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 các tác giả, sử dụng PWABuilder là cách dễ nhất và do đó là cách được đề xuất để đóng gói PWA cho Meta Quest ở thời điểm hiện tại.
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 để xuất bản 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.
Đóng gói PWA bằng PWABuilder cũng dễ dàng như nhập URL của một 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 chọn công cụ nâng cao để đóng gói PWA cho các 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 mục 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 theo cách thủ công 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 biệt hiệu thuận tiện để tải tệp APK lên thiết bị:
bubblewrap install
Các ứng dụng được cài đặt bên ngoài sẽ xuất hiện trong mục Nguồn không xác định trong ngăn ứ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 lên Oculus Store, nhà phát triển cũng có thể phân phối ứng dụng của mình 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ó sự phê duyệt của cửa hàng. Nhờ đó, họ có thể 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 đầu phát triển, thử nghiệm hoặc nhắm đến một đối tượng duy nhất.
Kiểm thử ứng dụng có nhiều thẻ
Để kiểm thử các ứng dụng có 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, giữ nguyên thẻ hiện tại, mở một cửa sổ trình duyệt mới và mở trong WebView giữ nguyên 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 của ứng dụng kiểm thử.
Một phiên bản SVGcode dành cho Oculus
Để thử nghiệm hướng dẫn này, 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ả output.apk xuống 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ó phiên bản đã gỡ lỗi. Tìm hướng dẫn tạo bản dựng trong package.json.
Ứng dụng này hoạt động bình thường trên Oculus, bao gồm cả khả năng mở và lưu tệp. Oculus Browser không hỗ trợ File System Access API, nhưng phương pháp dự phòng sẽ giúp ích. Tính năng duy nhất không hoạt động là thu phóng bằng cách chụm ngón tay. Tôi mong đợi nó 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 nhau. 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ộ (PWA) 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 thông thường. Nhà phát triển có thể tạo trải nghiệm 3D sống động cho thực tế ảo 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 thực tế ảo (nếu có)?
Sau đây là bản ghi màn hình về thử nghiệm Lời nhắc về tác nhân người dùng của Nhóm công tác về web sống động trong Các thử nghiệm WebXR.
Như bạn có thể thấy, để chuyển sang chế độ thực tế ảo, người dùng phải cấp quyền. Bạn chỉ cần cấp quyền một lần cho mỗi nguồn. Yêu cầu cấp quyền sẽ khiến chế độ sống động thoát ra. 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ờ WebXR Hand Input API và hệ thống theo dõi cử chỉ tay dựa trên AI của Meta.
Sau đây là bản ghi màn hình của Hand Tracking Sample (Mẫu theo dõi bàn tay) trong WebXR Samples (Các mẫu WebXR) của Nhóm công tác về web nhập vai.
Thực tế tăng cường/hỗn hợp (Truyền qua)
Như đã thông báo tại Meta Connect 2022, Meta Quest Browser đã bổ sung tính năng hỗ trợ cho Thực tế tăng cường (AR) WebXR, còn được 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 hơi khác một chút về A-Frame với các mô hình được thu nhỏ và bầu trời cũng như mặt phẳng bị ẩn cho chế độ 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 dựa trên 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.
Sau đây là một bản ghi màn hình về 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 có màu xám, còn 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. 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. Tính năng 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ù tính năng nhập bằng tay trong thực tế ảo 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 vẫn chưa hoạt động một cách đáng tin cậy, 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 ở 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 trình bao bọc APK mỏng mà không cần bất kỳ API dành riêng cho nền tảng nào. 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ế. Chúc các PWA ngày càng phát triển trong VR và AR trên web. Tương lai tươi sáng!
Lời cảm ơn
Ảnh chụp Oculus Quest 2 của Maximilian Prandstätter trên Flickr. Hình ảnh trên Cửa hàng Oculus về các ứng dụng Instagram, Facebook, Oculus Browser và Spike, cũng như hình minh hoạ về khả năng khám phá ứng dụng và ảnh động về tính năng theo dõi bàn 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.