POSMARS - WebAR & Gamification cho sự kiện và điểm bán

Mình hiện tại đang làm freelancer 3D CGI, chuyên dựng các asset đồ họa hỗ trợ cho các dự án của khách hàng. Dưới đây là chia sẻ về quá trình xây dựng POSMARS – một công cụ WebAR & Gamification chạy trên trình duyệt di động mà không cần cài app.

Dưới đây là video demo ngắn giới thiệu về trải nghiệm thực tế của dự án:

Ý tưởng xuất phát từ khi còn làm ở brand

Hồi mình còn làm thiết kế ở brand, mỗi lần chạy chiến dịch Activation hay Event, nhãn hàng rất ít khi duyệt làm AR hay mini-game công nghệ, lý do thường vì chi phí triển khai đắt đỏ kèm rào cản kỹ thuật khá lớn. Thời điểm đó, giải pháp khả thi nhất là dùng filter của các bên như SparkAR (Facebook) hoặc TikTok. Nhưng làm vậy thì phụ thuộc hoàn toàn vào ứng dụng của họ, duyệt filter rất lâu, chưa kể điện thoại của khách hàng phải có sẵn các app đó và đăng nhập thì mới trải nghiệm được. Việc bắt khách tải một cái app nặng mấy chục MB rồi đăng ký tài khoản chỉ để chơi một cái game 30 giây thì hầu như ai cũng lười và bỏ qua (tới 85% khách hàng từ chối tham gia vì lý do này).

Dù vậy, dưới góc nhìn thiết kế, mình vẫn thấy AR và các hoạt động tương tác là mảng hữu ích để tiếp cận khách hàng trực quan và dễ dàng hơn.

Sau đợt Meta thông báo đóng cửa SparkAR, cộng thêm việc các công cụ AI hỗ trợ code bắt đầu mạnh lên, mình quyết định tự xây dựng giải pháp WebAR riêng dựa trên các mã nguồn mở (open-source) như MindAR, MediaPipe. Mục tiêu là người dùng chỉ cần quét mã QR là tự động mở camera chơi game luôn, không cần thông qua ứng dụng trung gian nào (Zero-Install).

Tuy nhiên, quá trình build cũng gặp khá nhiều vấn đề thực tế mà một designer CGI như mình phải tự mò mẫm giải quyết.

Hai vấn đề kỹ thuật thực tế nhất

1. Tối ưu hóa file 3D nặng

Vì bình thường mình làm Freelancer 3D CGI quen tay dựng file nặng, khi đưa lên web thì thiết bị di động khó tải nổi, đặc biệt là khi dùng mạng di động ngoài trời không ổn định. Mình đã nhờ AI hướng dẫn build một công cụ nhỏ để tự động nén file .glb trực tiếp từ Blender. Tool này giúp giảm được khoảng 90% dung lượng file ban đầu mà chất lượng hiển thị của mô hình 3D trên màn hình điện thoại vẫn ở mức ổn.

2. Lỗi chặn quyền truy cập Camera từ Trình duyệt tích hợp (In-App Browser)

Ở Việt Nam, khách tham gia sự kiện hầu hết đều quét mã QR từ camera mặc định của Zalo hoặc Facebook. Trình duyệt tích hợp (In-app browser) của các ứng dụng này thường tự động chặn quyền truy cập camera hoặc WebGL của điện thoại để đảm bảo bảo mật. Kết quả là trang WebAR bị lỗi, camera đen xì hoặc vỡ giao diện.

Để xử lý, mình dùng script detect User-Agent của thiết bị. Nếu phát hiện người dùng đang truy cập từ in-app browser của Facebook/Zalo/TikTok, trang web sẽ hiển thị một tooltip hướng dẫn trực quan: “Vui lòng bấm vào dấu 3 chấm (…) và chọn ‘Mở bằng trình duyệt hệ thống’ (Safari đối với iOS hoặc Chrome đối với Android)”. Giải pháp này giúp người dùng tự chuyển hướng ra trình duyệt ngoài và camera hoạt động bình thường trở lại.

Bảo mật dữ liệu & Tuân thủ pháp lý

Dù là dự án do mình tự code bằng AI, bảo mật thông tin khách hàng vẫn là ưu tiên hàng đầu:

AR Data Privacy: Luồng camera của WebAR chạy local 100% trên thiết bị, hoàn toàn không gửi hình ảnh về server.
AI Data Privacy: Với các tính năng như AI Photo Booth, ảnh chụp selfie của người dùng sẽ tự động xóa sạch vĩnh viễn trên đám mây sau 24 giờ.
Form Đăng Ký: Tích hợp hộp kiểm đồng ý (Consent Checkbox) tuân thủ nghiêm ngặt Nghị định 13/2023/NĐ-CP về bảo vệ dữ liệu cá nhân tại Việt Nam.

Dự án thực tế đầu tiên: Chiến dịch Tarot cùng Colorkey

Dự án đầu tiên mình áp dụng thử nghiệm là cho một khách hàng cũ làm chiến dịch chạy cho các dòng sản phẩm mặt nạ của Colorkey. Mình đề xuất giải pháp WebAR nhận diện cử chỉ tay (Hand Gesture AR bằng MediaPipe) để người dùng quét QR, giơ tay trước camera điện thoại để vuốt và rút bài Tarot ảo nhận quà dùng thử.

Kết quả thu về thực tế: