Khi chuẩn bị cho Google I/O, chúng tôi muốn làm nổi bật những khả năng thú vị của công nghệ thực tế tăng cường (AR) trên web. Chacmool là một bản minh hoạ trải nghiệm web mang tính giáo dục mà chúng tôi xây dựng để cho thấy AR dựa trên web có thể giúp người dùng tương tác với các trải nghiệm AR một cách dễ dàng như thế nào. Web giúp AR trở nên thuận tiện và có thể truy cập ở mọi nơi.
Chúng tôi hiện đã bật bản minh hoạ này trên
Chrome Canary
trên
thiết bị Android tương thích với ARCore chạy Android O trở lên. Bạn cũng cần cài đặt ARCore.
Công việc này dựa trên đề xuất WebXR mới (WebXR Hit Test API), vì vậy, công việc này sẽ được gắn cờ và dự kiến sẽ vẫn ở Canary khi chúng tôi kiểm thử và tinh chỉnh đề xuất API mới với các thành viên khác trong Nhóm cộng đồng Web sống động. Trên thực tế, để truy cập vào bản minh hoạ, bạn cần bật hai cờ trong chrome://flags:
#webxr và #webxr-hit-test. Sau khi bật cả hai tính năng này và khởi động lại Canary, bạn có thể xem bản minh hoạ Chacmool.
Trải nghiệm thực tế tăng cường Chacmool tập trung vào việc giáo dục, tận dụng bản chất sống động và tương tác của AR để giúp người dùng tìm hiểu về các bức tượng Chacmool cổ đại. Người dùng có thể đặt một bức tượng kích thước thật trong thực tế và di chuyển xung quanh để xem bức tượng từ nhiều góc độ và khoảng cách khác nhau. Tính chất sống động của công nghệ AR cho phép người dùng tự do khám phá, tìm hiểu và chơi với nội dung, giống như họ có thể làm trong thế giới thực. Khi xem một đối tượng trong AR, thay vì xem đối tượng đó trên màn hình 2D phẳng, chúng ta có thể hiểu rõ đối tượng mình đang xem vì có thể xem đối tượng đó từ nhiều góc độ và khoảng cách khác nhau bằng cách sử dụng một mô hình tương tác rất trực quan: đi bộ xung quanh đối tượng và tiến lại gần hoặc lùi xa hơn. Ngoài ra, trong trải nghiệm này, có các chú thích được đặt trực tiếp trên tác phẩm điêu khắc. Điều này cho phép người dùng trực tiếp kết nối nội dung được mô tả trong văn bản và vị trí của các đặc điểm đó trên tác phẩm điêu khắc.
Bản minh hoạ này được xây dựng trong khoảng một tháng, tận dụng một số thành phần trong bản minh hoạ AR đầu tiên trên web của nhóm WebXR, WebAR-Article. Thông tin về bức tượng được lấy từ trang Arts & Culture của Google, còn mô hình 3D do đối tác của Google Arts & Culture là CyArk cung cấp. Để chuẩn bị mô hình 3D cho web, chúng tôi đã sử dụng kết hợp Meshlab và Mesh Mixer để sửa mô hình và giảm kích thước tệp của lưới. Sau đó, Draco, một thư viện để nén và giải nén lưới hình học 3D và đám mây điểm được dùng để giảm kích thước tệp của mô hình từ 44,3 megabyte xuống chỉ còn 225 kilobyte. Cuối cùng, một worker web được dùng để tải mô hình trên luồng nền để trang vẫn tương tác được trong khi mô hình được tải và giải nén, một thao tác thường gây ra hiện tượng giật và ngăn cuộn trang.
Chúng tôi không thể nhấn mạnh đủ rằng, vì chúng tôi đang phát triển trên máy tính và triển khai trên điện thoại, nên việc sử dụng các công cụ gỡ lỗi từ xa của Chrome để giúp kiểm tra trải nghiệm sẽ tạo ra một chu kỳ lặp nhanh tuyệt vời giữa các thay đổi về mã. Ngoài ra, Chrome còn có các công cụ tuyệt vời dành cho nhà phát triển để gỡ lỗi và kiểm tra hiệu suất.
Các phương pháp hay nhất cho trải nghiệm AR/VR
Hầu hết các nguyên tắc thiết kế và kỹ thuật để thiết kế trải nghiệm AR gốc đều áp dụng cho việc tạo trải nghiệm AR dựa trên web. Nếu bạn muốn tìm hiểu thêm về các phương pháp hay nhất nói chung, hãy xem nguyên tắc thiết kế AR mà chúng tôi mới phát hành.
Cụ thể, khi thiết kế trải nghiệm AR dựa trên web, tốt nhất bạn nên sử dụng toàn bộ màn hình (tức là chuyển sang chế độ toàn màn hình tương tự như cách trình phát video chuyển sang chế độ toàn màn hình trên thiết bị di động) khi sử dụng AR. Điều này giúp người dùng không cuộn chế độ xem hoặc bị các thành phần khác trên trang web làm mất tập trung. Quá trình chuyển đổi sang AR phải diễn ra suôn sẻ và liền mạch, hiển thị chế độ xem camera trước khi chuyển sang phần giới thiệu về AR (ví dụ: vẽ một đường ngắm). Điều quan trọng cần lưu ý về AR trên web là không giống như AR gốc, nhà phát triển chưa có quyền truy cập vào khung máy ảnh, tính năng ước tính ánh sáng, neo hoặc mặt phẳng. Vì vậy, nhà thiết kế và nhà phát triển cần lưu ý những hạn chế này khi thiết kế trải nghiệm AR trên web.
Ngoài ra, do có nhiều thiết bị được dùng để trải nghiệm web, nên bạn cần tối ưu hoá hiệu suất để tạo ra trải nghiệm người dùng tốt nhất. Vì vậy: hãy giữ số lượng đa giác ở mức thấp, cố gắng sử dụng ít đèn nhất có thể, tính toán trước bóng nếu có thể và giảm thiểu các lệnh gọi vẽ. Khi hiển thị văn bản trong AR, hãy sử dụng các kỹ thuật kết xuất văn bản hiện đại (tức là dựa trên trường khoảng cách đã ký) để đảm bảo văn bản rõ ràng và dễ đọc ở mọi khoảng cách và góc độ. Khi đặt chú thích, hãy coi ánh mắt của người dùng là một phương thức nhập khác và chỉ hiển thị chú thích khi chúng có liên quan (tức là chú thích dựa trên khoảng cách sẽ xuất hiện khi người dùng tập trung vào một khu vực quan tâm).
Cuối cùng, vì nội dung này dựa trên web, nên bạn cũng cần áp dụng các phương pháp thiết kế hay nhất chung cho web. Đảm bảo trang web mang lại trải nghiệm tốt trên nhiều thiết bị (máy tính, máy tính bảng, thiết bị di động, tai nghe, v.v.) – việc hỗ trợ tăng cường dần cũng đồng nghĩa với việc thiết kế cho các thiết bị không hỗ trợ AR (tức là hiển thị trình xem mô hình 3D trên các thiết bị không hỗ trợ AR).
Nếu bạn quan tâm đến việc phát triển trải nghiệm AR dựa trên web của riêng mình, chúng tôi có một bài đăng đi kèm tại đây sẽ cung cấp thêm thông tin chi tiết về cách bắt đầu tự xây dựng AR trên web. (Bạn cũng có thể xem nguồn của bản minh hoạ về Chacmool.) WebXR Device API đang trong quá trình phát triển và chúng tôi rất mong nhận được ý kiến phản hồi để có thể đảm bảo API này hỗ trợ mọi loại ứng dụng và trường hợp sử dụng. Vì vậy, vui lòng truy cập vào GitHub và tham gia cuộc trò chuyện!