Công nghệ XR (VR/AR/MR) đang rất phát triển và phổ biến, đặc biệt khi chúng ta có thể trình diễn nó ngay trên nền tảng web thông qua các trình duyệt web phổ thông mà không đòi hỏi thêm phần cứng đi kèm nào cả. Điều này thật là tuyệt vời, nó cho phép các web developer dễ dàng xây dựng và xuất bản các ý tưởng WebXR của mình, chia sẻ nó trên internet giống như một website.
Để đóng góp vào điều này phải kể tới rất nhiều WebXR Framework, API, Library… đã xuất hiện trên thế giới kể từ khi VR trên web được hỗ trợ trong Chrome và Firefox vào năm 2016 (WebVR 1.0) và AR (thực tế ảo tăng cường) được hỗ trợ sẵn trong Chrome dành cho Android kể từ tháng 11/2020. Bây giờ các công nghệ này đã đạt đến điểm đủ ổn định để các nhà phát triển thực sự có thể bắt đầu dựa vào nó, lựa chọn của bạn thì sao? Nếu bạn vẫn còn đang cân nhắc thì hãy xem tiếp bài viết này nhé?
WebXR là gì?
WebXR hay WebXR Device API là giao diện lập trình ứng dụng web (API) cho phép hỗ trợ truy cập từ các thiết bị thực tế ảo và thực tế tăng cường, chẳng hạn như HTC Vive, Oculus Rift, Oculus Quest, Google Cardboard, HoloLens, Magic Leap hoặc Thực tế ảo nguồn mở (OSVR), trong trình duyệt web.
Lịch sử của WebXR
API WebVR lần đầu tiên được hình thành vào đầu năm 2014 bởi Vladimir Vukićević từ Mozilla . Những người đóng góp cho API bao gồm Brandon Jones (Google), Boris Smus và những người khác từ nhóm Mozilla. Vào ngày 1 tháng 3 năm 2016, nhóm Mozilla VR và nhóm Google Chrome đã công bố bản phát hành phiên bản 1.0 của đề xuất API WebVR. Việc tái cấu trúc API sau đó đã mang lại nhiều cải tiến hơn cho WebVR.
Chrome 79 (phát hành 13 tháng 12 năm 2019) là trình duyệt đầu tiên phát hành với WebVR 1.0 API được bật theo mặc định. Điều này có nghĩa là bước đầu tiên để vượt qua một trong những trở ngại lớn nhất đối với WebXR cuối cùng đã được giải quyết: tính ổn định. Trước đây, thật sự khó để duy trì một dự án WebXR / WebVR / WebAR vì API trình duyệt mà nó dựa trên vẫn còn đang thử nghiệm.
WebVR 1.0 nhanh chóng được thay thế bằng WebVR 1.1, mặc dù chỉ có phiên bản nhỏ tăng lên, nhưng đã đủ thay đổi để phá vỡ bất kỳ ứng dụng nào. được viết bằng WebVR 1.0.
Chrome 81 (11/2020), hỗ trợ thực tế tăng cường (AR) được chín thức bổ sung và WebVR đổi thành WebXR. Trong khi bản cập nhật cho API GamePad mở rộng việc sử dụng nâng cao của bộ điều khiển cho VR được bổ sung ngay sau đó.
Các trình duyệt khác cũng nhanh chóng hỗ trợ các thông số kỹ thuật này, bao gồm Firefox Reality, Oculus Browser, Edge và trình duyệt Helio của Magic Leap, trong số những trình duyệt khác.
Như vậy, WebXR hiện đã được hỗ trợ trong các phiên bản phát hành của trình duyệt sau:
- Các phiên bản Microsoft Edge
- Chrome 79+
- Chrome for Android 98+
- Opera 66+
- Opera Mobile 64+
- Samsung Internet 12+ Oculus.
Một số WebXR framework tiêu biểu
Sau đây là danh sách về các Framework và mọi thứ bạn cần để tạo nội dung WebXR. Chúng tôi sẽ cập nhật liên tục hki có thêm thông tin về các Frameworks này hoặc bổ sung cái mới hơn.
| Name | Type | Built On | Notes |
|---|---|---|---|
| 8th Wall | Cloud Platform | WebGL | AR-focused |
| A-Frame | Framework | three.js | — |
| AR.js | Library | WebGL | AR-focused |
| ATON | Framework | three.js | — |
| babylon.js | Engine | WebGL | — |
| echo3D | Cloud Platform | model-viewer/A-Frame/ar.js | model-viewer used for “See on floor”, A-Frame+AR.js used in marker tracking, A-Frame+jeelizFaceFilter used in face tracking |
| Ethereal Engine | Engine | three.js | — |
| FRAME | Cloud Platform | babylon.js | Geared towards conferencing and galleries |
| Godot | Engine | WebGL | Requires additional setup to export |
| Hubs | Cloud Platform | A-Frame | Geared towards conferencing and galleries |
| JanusWeb | Framework | Elation Engine | — |
| Immersions | Library | babylon.js | — |
| LÖVR | Framework | WebGL | Requires additional compilation step (see WebXR section) |
| model-viewer | Library | WebGL | Limited interactivity |
| nunuStudio | Engine | three.js | Both web and native engine versions available |
| p5.xr | Library | p5.js | — |
| Playcanvas | Engine | WebGL | Web-only editor |
| React XR | Library | three.js | — |
| Rhodonite | Library | WebGL | — |
| Rogue Engine | Engine | three.js | — |
| spacesvr | Framework | three.js/React XR | — |
| Spoke | Scene Editor | three.js | Used to author Hubs scenes |
| three.js | Library | WebGL | — |
| threlte | Library | three.js | Renderer for Svelte |
| Unity | Engine | WebGL | Requires external exporter |
| Verge3D | Toolkit | three.js | Includes visual programming interface |
| Virtual Maker | Cloud Platform | babylon.js | Web-only editor |
| VRIA | Framework | A-Frame | Focused on data visualization |
| VrLand | Cloud Platform | A-Frame | Geared towards conferencing, galleries, and web3 |
| vtk.js | Library | WebGL | Focused on data visualization |
| Wonderland Engine | Engine | WebGL | — |
| WorldCore | Engine | three.js | — |
| Zea | Engine | WebGL | CAD-focused |
Thách thức và hạn chế của WebXR
Phát triển các ứng dụng XR trên nền tảng web có nhiều sự khác biệt lớn so với các ứng dụng Windows hoặc Mobile App (Native).
Load Time (thời gian tải)
Ứng dụng XR thường bao gồm hầu hết các tài nguyên được đóng gói trong bản cài đặt. Người dùng hầu như sẽ không phải chờ đợi thêm cho việc tải ngay khi kích hoạt. Người dùng sẽ cảm thấy khó chịu khi phải chờ đợi một trang web tải quá lâu, đây là một thách thức lớn mà bạn phải cân nhắc nếu không muốn khách hàng của mình bỏ đi vì thiếu kiên nhẫn.
- Giải pháp:
Làm nội dung trò chơi trang WebXR của bạn nhỏ và tối ưu nhất, sử dụng tính năng nén và nói chung là đảm bảo thời gian tải nhanh là chìa khóa để giữ cho người dùng của bạn hài lòng. Áp dụng lazy load cho các nội dung khác chưa cần thiết ban đầu trong khi đang chạy.
Các định dạng dựa trên văn bản thường yêu cầu thời gian phân tích cú pháp lâu hơn, vì vậy hãy cân nhắc sử dụng các định dạng nội dung nhị phân để thay thế. Đối với hình ảnh, các định dạng như WebP và Basis Universal có thể cải thiện kích thước tệp trên CPU và GPU so với hình ảnh PNG và JPEG truyền thống.
Performance
Các trang web được chạy trong một sandbox của trình duyệt nhằm bảo đảm an toàn cho thiết bị. Đây cũng là thách thức lớn về hiệu suất khi mà bạn sẽ bị giới hạn về Memory, CPU, GPU cùng với khả năng hỗ trợ API từ trình duyệt. Đây là một sự khác biệt lớn so với các ứng dụng Native.
- Giải pháp:
Đảm bảo bạn xem hiệu suất và tối ưu hóa theo phạm vi của mình. Giữ nội dung nhỏ gọn và giải quyết “spend” cho các nội dung quan trọng và dựa trên khoảng cách với người dùng.
Các tiện ích mở rộng trình duyệt đặc biệt như OCULUS_multiview2 có thể giúp tăng hiệu suất hiển thị GPU. Những người khác, như WEBGL_multi_draw sắp tới sẽ giúp cải thiện hiệu suất của CPU.
Hầu hết các framework sẽ có tài liệu hướng dẫn cải thiện hiệu suất hoặc thủ thuật tối ưu liên quan. Kiểm tra điều đó để xem bạn có thể làm gì hay không.
Scalability
Với các ứng dụng VT (native application) bạn thường nhắm mục tiêu một vài thiết bị rất cụ thể và tối ưu cho nó. Thâm chí bạn có thể điều chỉnh từng bản dựng riêng cho mỗi nền tảng (Android, iOS, Windows…)
Tuy nhiên điều này sẽ phá vỡ hoàn toàn khi bạn build một ứng dụng WebXR. Bản thân nó phục vụ cho trình duyệt, có nghĩa là bất kỳ thiết bị nào chạy trình duyệt này cũng có thể chạy ứng dụng WebXR của bạn. Điều đó có nghĩa là bạn cần xem xét tất cả các khả năng mở rộng, các vấn đề mà người dùng gặp phải trên tất cả các thiết bị của họ.
Nếu hộ trợ các thiết bị VR, có nghĩa là đi kèm với một loạt các phương thức nhập: từ điều khiển ánh nhìn đơn giản, đến bộ điều khiển 3-dof, 6-dof, theo dõi tay và theo dõi mắt. Bạn sẽ cần phải quyết định mẫu số chung thấp nhất có thể chạy ứng dụng của mình.
- Giải pháp:
Để có khả năng mở rộng tốt hơn, bạn có thể phân chia tải nội dung phụ thuộc vào loại thiết bị VR hoặc tải dần theo các thao tác của người dùng.
Tạm kết
Có nhiều WebXR Framework hay Library được tạo ra nhằm hỗ trợ người dùng tạo các ứng dụng XR ngay trên nền tảng Web. Tuy nhiên, chúng đều có những ưu khuyết điểm mà bạn cần tìm hiểu và cân nhắc trước khi sử dụng. Một số chỉ chú trọng và WebAR, số khác lại tập chung vào các tính năng hiển thị 3D(WebGL), một số lại tối ưu cho thiết bị VR…
Hy vọng bài viết trên sẽ giúp ích cho các bạn trong việc chọn lựa WebXR framework chính của mình để phát triển ứng dụng XR trên nền tảng Web. Nếu có ý kiến đóng góp hoặc câu hỏi liên quan, xin đừng ngần ngại gửi cho chúng tôi tại mục comment bên dưới đây nhé. Chúc các bạn thành công.
