Cây Cầu AR Geolocation của Nutifood – Hành Trình Kết Nối Khán Giả từ Giải Pháp Công Nghệ Marvy

1. Idea & Concept

Nutifood là nhà tài trợ chính cho dự án xây dựng cây cầu đi bộ trị giá hàng ngàn tỉ đồng bắc qua sông Sài Gòn, nối quận 1 với TP Thủ Đức. Dự án đã chính thức khởi công và khoan mũi cọc đầu tiên vào ngày 28/4/2025, mở ra kỳ vọng về một công trình biểu tượng mới của thành phố. (tuoitre 2025)

Nhằm lan tỏa câu chuyện ý nghĩa này đến cộng đồng, Marvy được chọn để triển khai một trải nghiệm Web AR độc đáo, đưa mô hình 3D của cây cầu vào không gian số. Người dùng chỉ cần truy cập liên kết Web AR, không cần tải app, đã có thể “ngắm cầu” từ hai bờ sông – đúng vị trí thực tế mà công trình sẽ xuất hiện.

Đây là sự kết hợp đặc biệt giữa AR Geo Location và truyền thông đô thị, biến không gian thành phố thành một “sân khấu số” để người dân và du khách cùng trải nghiệm trước hình ảnh cây cầu. Không chỉ đơn thuần là một sản phẩm công nghệ, trải nghiệm này còn mang ý nghĩa gắn kết cộng đồng, tạo niềm háo hức chờ đợi ngày khánh thành.

• Thông điệp kết nối: Không chỉ kết nối hai bờ sông, cầu còn kết nối công nghệ với đời sống, đưa hình ảnh tương lai vào hiện tại.
• Tính tương tác cao: Người dùng chỉ cần đến đúng tọa độ được định vị, mở ứng dụng và ngắm mô hình 3D của cây cầu với góc nhìn 360°.
• Gắn kết cộng đồng: Hoạt động trải nghiệm AR được thiết kế như một sự kiện mở, khuyến khích mọi người chia sẻ hình ảnh và lan tỏa tinh thần xây dựng thành phố xanh – hiện đại.

2. Thách thức công nghệ & giải pháp của Marvy

a. Triển khai ngoài trời quy mô lớn, chỉ trong 9 ngày

Với một dự án Web AR thông thường, việc thiết kế UX/UI và tối ưu kỹ thuật đã mất vài tuần. Trong dự án này, toàn bộ quá trình – từ ý tưởng, demo, chỉnh sửa, test thực tế đến bàn giao – đều gói gọn trong 1/3 thời gian tiêu chuẩn.

→ Giải pháp: làm việc song song nhiều hạng mục, tăng ca liên tục, ưu tiên công nghệ nhanh nhưng không đánh đổi chất lượng trải nghiệm.

b. Mô hình 3D ban đầu quá nặng cho Web AR

Bản model gốc của cây cầu có độ chi tiết cao, nhiều polygon và texture lớn, gây lag và load chậm trên các dòng điện thoại phổ thông.

→ Giải pháp: remesh, giảm dung lượng nhiều lần nhưng vẫn giữ các chi tiết nhận diện (vòm cầu, lan can, ánh sáng phản chiếu mặt nước).

c. Định vị GPS với 2 tọa độ khác nhau

Khác với AR Geo thông thường chỉ dùng một tọa độ, Marvy thiết lập hai điểm GPS – một trên mỗi bờ sông – để mang đến hai góc nhìn riêng.

→ Giải pháp: đo đạc, calibrate riêng từng điểm, test trên nhiều thiết bị.

d. Sóng yếu & nhiễu GPS do vị trí đặc thù

Vị trí trên sông dễ bị nhiễu do tàu thuyền, sai lệch GPS khác nhau giữa các hãng điện thoại.

→ Giải pháp: nhiều lần đo đạc, so sánh giữa các thiết bị, áp dụng mẹo “lắc điện thoại hình số 8” để hiệu chỉnh la bàn và bắt tọa độ chính xác hơn

3. UX/UI Design

• UX: Người dùng chỉ cần truy cập link hoặc quét mã QR để kích hoạt AR, không cần tải app. Hai chế độ xem tương ứng với hai tọa độ GPS.
• UI: Giao diện tối giản, ưu tiên hình ảnh cầu và các nút điều hướng rõ ràng. Mockup flow dưới đây minh họa hành trình trải nghiệm từ quét QR → cho phép truy cập camera → hiển thị mô hình cầu → chuyển đổi góc nhìn.

Giao diện truy cập website Nutifood AR Geolocation 

4. 3D Modelling – Cây cầu Sài Gòn

Đội ngũ Marvy đã tiếp nhận bản mô hình cầu gốc với độ chi tiết kiến trúc cực cao, thể hiện chính xác từng chi tiết vòm, lan can và ánh sáng phản chiếu. Tuy nhiên, để mô hình vận hành mượt trên Web AR, nhóm đã:

• Tối ưu dung lượng: giảm từ hàng trăm nghìn polygon xuống mức polygon tiêu chuẩn mà vẫn giữ được các yếu tố nhận diện đặc trưng.
• Tối ưu texture: nén và điều chỉnh ánh sáng ảo để vừa đẹp mắt vừa nhẹ tải.
• Đồng bộ tỉ lệ & tọa độ: đảm bảo mô hình ăn khớp với vị trí thực tế ở cả hai điểm GPS.

Quá trình này đòi hỏi nhiều vòng thử nghiệm giữa thiết bị mạnh và yếu, để đảm bảo trải nghiệm mượt mà cho đa dạng người dùng.

Hình thực tế

Model 3D đã qua Marvy xử lý

5. Lập trình Web AR

a.Công nghệ sử dụng

Marvy ứng dụng AR Geolocation – công nghệ hiển thị nội dung ảo tại đúng vị trí địa lý ngoài đời thực. Người dùng chỉ cần cấp quyền định vị và hướng camera điện thoại về khu vực đã được thiết lập, hệ thống sẽ hiển thị mô hình 3D trùng khớp với không gian thật.

Khi vị trí AR được xác định, người dùng có thể:

• Di chuyển xung quanh để xem mô hình cây cầu ở nhiều góc độ khác nhau

• Phóng to / thu nhỏ mô hình AR tùy theo nhu cầu
• Quan sát chi tiết thiết kế ở cự ly gần
• Thưởng thức các hiệu ứng particle lấp lánh mang phong cách hiện đại, trẻ trung – đại diện cho kỷ nguyên số và tinh thần đổi mới của thành phố

Tìm hiểu thêm về công nghệ AR Geolocation: tại đây

b. Lập trình Trải nghiệm AR (Userflow)

• Bước 1: Người dùng scan QR Code được đặt tại 2 điểm trải nghiệm để mở liên kết đến trang web AR.

Hướng dẫn được đặt tại ngay vị trí scan QR Code tại 2 vị trí chân cầu

• Bước 2: Trình duyệt mở website, hiển thị thông báo yêu cầu quyền truy cập camera. Người dùng cho phép truy cập để bắt đầu kích hoạt hiệu ứng AR.
• Bước 3: Người dùng làm theo hướng dẫn hiển thị trên màn hình, như di chuyển điện thoại, định vị vị trí, hoặc hướng camera về khu vực sẽ được xây dựng nên cây cầu để kích hoạt mô hình cây cầu theo dạng 3D hiệu ứng AR. 
• Bước 4:Trải nghiệm hiệu ứng AR trực tiếp trên thiết bị, bao gồm ngắm mô hình cầu 3D, tương tác, xoay, phóng to/thu nhỏ, hoặc chụp ảnh – quay video để chia sẻ.

6. Tổng kết

Trải nghiệm AR đã thu hút hơn hàng nghìn lượt quét QR Code và người tham gia chỉ trong tuần đầu diễn ra sự kiện. Nội dung AR không chỉ tạo sự hứng thú tại chỗ, mà còn được chia sẻ rộng rãi trên mạng xã hội, giúp lan tỏa thương hiệu vượt ngoài phạm vi sự kiện. 

Thành công tại sự kiện Nutifood ở TP. Hồ Chí Minh chứng minh tính hiệu quả và sức hút của giải pháp. Đây là nền tảng để nhân rộng triển khai trong các chiến dịch quảng bá và kích hoạt thương hiệu, giúp thương hiệu chạm đến khách hàng một cách sáng tạo và ấn tượng hơn.

Một số hình ảnh người tham gia trải nghiệm