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 có thể giúp người dùng tương tác với trải nghiệm AR dễ dàng như thế nào. Web giúp AR trở nên thuận tiện và có thể truy cập được ở mọi nơi.
Hiện chúng tôi đã bật bản minh hoạ này trong Chrome Canary trên các 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 một đề xuất WebXR mới (API Kiểm thử lượt truy cập WebXR), vì vậy, API này nằm dưới cờ và dự định vẫn ở trong Canary khi chúng tôi thử nghiệm và tinh chỉnh đề xuất API mới với các thành viên khác của 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 2 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 trên Chacmool tập trung vào giáo dục, tận dụng tính 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 tác phẩm điêu khắc cổ của Chacmool. Người dùng có thể đặt một bức tượng có kích thước thật trong thực tế và di chuyển xung quanh để xem tác phẩm điêu khắc từ nhiều góc độ và khoảng cách. Bản chất sống động của AR cho phép người dùng tự do khám phá, khám phá và chơi thoả thích nội dung, giống như trong thế giới thực. Khi xem một đối tượng trong AR, thay vì nhìn đối tượng đó trên màn hình 2D phẳng, chúng ta có thể hiểu sâu hơn về những gì mình đang nhìn vì có thể thấy đối tượng đó từ nhiều góc độ và khoảng cách bằng một mô hình tương tác rất trực quan: đi quanh đối tượng và tiến gần hơn hoặc xa hơn về mặt thực tế. 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. Việc này giúp người dùng kết nối trực tiếp nội dung được mô tả trong văn bản và vị trí của các tính năng đó 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 từ bản minh hoạ thực tế tăng cường dựa trên nền tảng web đầu tiên của nhóm WebXR, WebAR-Article. Thông tin về tác phẩm điêu khắc được lấy từ trang Nghệ thuật và văn hoá của Google, còn mô hình 3D do CyArk, đối tác của Google Arts & Culture cung cấp. Để mô hình 3D xuất hiện trên web, chúng tôi sử dụng kết hợp Meshlab và Mesh Mixer để sửa chữa mô hình và giải quyết lưới của mô hình nhằm giảm kích thước tệp. Sau đó, Draco, một thư viện để nén và giải nén các 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 trình chạy web được dùng để tải mô hình trên một luồng ở chế độ 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 trang không được cuộn.
Chúng tôi 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 sử dụng công cụ gỡ lỗi từ xa của Chrome để giúp kiểm tra trải nghiệm sẽ tạo ra chu kỳ lặp lại nhanh chóng giữa các lần thay đổi mã và Chrome có các công cụ tuyệt vời 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 thực tế tăng cường/thực tế ảo
Hầu hết các nguyên tắc về thiết kế và kỹ thuật khi thiết kế cho trải nghiệm thực tế tăng cường gốc đều áp dụng cho việc tạo trải nghiệm thực tế tăng cường dựa trên web. Nếu bạn muốn tìm hiểu thêm về các phương pháp chung hay nhất, hãy xem Nguyên tắc thiết kế thực tế tăng cường mà chúng tôi mới phát hành gần đây.
Cụ thể, khi thiết kế trải nghiệm AR dựa trên nền tảng 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. Việc này ngăn người dùng cuộn xem hoặc bị các phần tử khác trên trang web phân tâm. Quá trình chuyển đổi sang AR phải suôn sẻ và liền mạch, hiển thị chế độ xem máy ảnh trước khi vào phần giới thiệu AR (ví dụ: vẽ một ô ô). Điều quan trọng cần lưu ý về AR dựa trên nền tảng web là không giống như AR gốc, nhà phát triển không có quyền truy cập vào khung máy ảnh, ước tính ánh sáng, neo hoặc mặt phẳng. Vì vậy, điều quan trọng là nhà thiết kế và nhà phát triển cần lưu ý những giới hạn này khi thiết kế trải nghiệm thực tế tăng cường dựa trên nền tảng web.
Ngoài ra, do có nhiều thiết bị dùng cho trải nghiệm web, nên điều quan trọng là bạn phải tối ưu hoá hiệu suất để tạo ra trải nghiệm tốt nhất cho người dùng. Vì vậy: hãy giảm số lượng nhiều ánh sáng, cố gắng tránh sử dụng ít ánh sáng nhất có thể, tính toán trước bóng đổ nếu có thể và giảm thiểu hàm gọi vẽ. Khi hiển thị văn bản trong AR, hãy sử dụng các kỹ thuật hiển thị 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 từ mọi khoảng cách và góc độ. Khi đặt chú giải, hãy xem xét góc nhìn của người dùng như một dữ liệu đầu vào khác và chỉ hiển thị chú thích khi phù hợp (tức là chú thích dựa trên độ gần xuất hiện khi người dùng tập trung vào khu vực mà họ quan tâm).
Cuối cùng, vì nội dung này dựa trên nền tảng web, nên bạn cũng phải áp dụng các phương pháp thiết kế chung hay nhất cho web. Đảm bảo trang web mang đến trải nghiệm tốt trên các 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ính năng nâng cao tiến bộ cũng có nghĩa là 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 có AR).
Nếu bạn quan tâm đến việc phát triển trải nghiệm thực tế tăng cường dựa trên web của riêng mình, chúng tôi có một bài đăng đồng hành tại đây sẽ cung cấp thêm thông tin chi tiết về cách tự bắt đầu xây dựng AR trên web. (Bạn cũng có thể xem nguồn cho bản minh hoạ Chacmool.) WebXR Device API đang được tích cực 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ợ tất cả các 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 để tham gia trò chuyện!