Đến nội dung
codecrush®
Case Studies8 min read12 tháng 9, 2026

Chúng tôi dựng cả Việt Nam 3D để bạn bay qua

Nguyên một đất nước, 58.296 tam giác, một tab trình duyệt, không cần app. Cách chúng tôi làm bản đồ 3D tương tác cho chiến dịch — và một bản đồ để bạn nghịch ngay.

Code Crush Team

Gamification Agency

Bản đồ địa hình 3D của Việt Nam dựng trong trình duyệt, có nhãn Fansipan, Vịnh Hạ Long, Huế và Đồng bằng sông Cửu Long

Phần lớn website chiến dịch thể hiện tiến độ bằng một thanh ngang. Nó đầy dần từ trái sang phải. Mọi người vỗ tay lịch sự.

Chúng tôi được yêu cầu thể hiện một triệu dặm lái xe xanh hơn trải khắp Việt Nam, và một thanh tiến độ nghe thật phí cho cả một đất nước.

Nên chúng tôi dựng luôn đất nước đó.

Nó đây. Không phải video, không phải ảnh quay màn hình — chính là scene thật. Kéo nó, xoay nó, phóng to vào vùng núi. Rồi kéo thanh trượt phía dưới và xem rừng mọc lên.

Bản đồ thật. Được dựng như một concept cho buổi pitch chiến dịch của Toyota Việt Nam, nên các con số dặm là dữ liệu minh họa — còn địa hình, đường sá và cây cối là công việc thật.
Mở trong tab mới

Cứ từ từ. Phần còn lại vẫn ở đây thôi.

Một thanh tiến độ là một cơ hội bị bỏ lỡ

Chuyện lạ về địa lý trong marketing là thế này: các thương hiệu đứng trên nó suốt ngày mà gần như không bao giờ dùng tới nó.

Khách hàng của bạn ở đâu đó. Cửa hàng của bạn ở đâu đó. Chiến dịch của bạn đang thắng ở Hà Nội và đứng im ở Cần Thơ, và ai đó đang giữ sự thật ấy trong một file bảng tính, ở một cột, cạnh một cột khác. Một đất nước là biểu đồ trực quan nhất từng được phát minh, vậy mà ta cứ ép nó thành các thanh ngang.

Ngay khi nơi chốn thật hiện lên màn hình, ba điều xảy ra mà chẳng cần ai yêu cầu:

Người ta tìm thành phố của mình trước tiên. Lần nào cũng vậy. Đó là cơ chế tương tác đáng tin cậy nhất chúng tôi từng làm ra.
Cuộc đua giữa các vùng trở nên hiển nhiên thay vì phải giải thích. Không ai cần chú thích để hiểu rằng miền Bắc xanh hơn miền Nam.
Tiến độ thôi là một con số và trở thành một cảnh quan. "38%" chẳng nói lên điều gì. Một đất nước phủ rừng được nửa thì nói lên rất nhiều.

Phản biện quen thuộc là bản đồ chỉ để trang trí. Không phải. Nó chính là giao diện.

Thứ bạn đang thật sự kéo qua kéo lại

Việt Nam trong khung cửa sổ đó là một mô hình độ cao thật, không phải hình minh họa của một mô hình độ cao. Fansipan cao vì Fansipan vốn cao.

Trên một máy tính đủ khỏe, địa hình được dựng bằng 58.296 tam giác. Đường sá và sông ngòi chạy trên đó đến từ dữ liệu OpenStreetMap — đó là lý do mạng lưới đường thật sự đi đúng chỗ nó đi, và cũng là lý do có một dòng ghi công ở góc bản đồ: dữ liệu OSM được dùng miễn phí, nhưng không được phép nhận vơ là của mình.

Miền Bắc ở cự ly gần: địa hình thật, hình học đường và sông lấy từ OSM, rừng low-poly và vài mô hình địa danh. Những trụ cáp treo leo dọc sống núi là đặt bằng tay.
Miền Bắc ở cự ly gần: địa hình thật, hình học đường và sông lấy từ OSM, rừng low-poly và vài mô hình địa danh. Những trụ cáp treo leo dọc sống núi là đặt bằng tay.

Mọi thứ nằm gọn trong một file HTML tự chứa duy nhất. Lưới địa hình được nướng sẵn vào đó dưới dạng một khối nhị phân, font nhúng sẵn, mô hình nhúng sẵn. Không có tile server phải trả tiền, không có API key phải xoay vòng, không có gì sẽ hỏng sau mười tám tháng vì một nhà cung cấp đổi bảng giá. Bạn có thể chép file vào USB và nó vẫn chạy trên máy bay.

Chi tiết cuối không phải để làm màu. Đó đúng là tình huống một khách hàng xem pitch trong phòng họp với wi-fi tệ hại.

Làm một đất nước trở nên nhận ra được không nằm ở độ chính xác

Đây là phần khiến chúng tôi bất ngờ ở lần đầu.

Bạn có thể dựng đường bờ biển chính xác tới từng mét mà người xem vẫn nheo mắt. Sự nhận ra không đến từ độ chính xác, nó đến từ bốn năm nơi chốn mà người ta thật sự có cảm xúc. Nên bản đồ gọi tên Fansipan, Vịnh Hạ Long, Huế và Đồng bằng sông Cửu Long, rồi để phần còn lại đẹp và vô danh.

Logic đó cũng đúng với đồ trang trí. Cây cối không chính xác về mặt thực vật học. Có một mái chùa ở phía Bắc, vài ngôi nhà sàn, một cụm công trình ở chỗ đáng lẽ là thành phố — tất cả đều low-poly, đều rẻ để vẽ, và tất cả đang làm một lượng công việc khổng lồ để thuyết phục bạn rằng bạn đang nhìn một nơi chốn chứ không phải một vật thể.

Một bản đồ chính xác 100% và dễ đọc 0% là một bản xuất GIS. Không ai đặt hàng chúng tôi một bản xuất GIS.

Thanh trượt mới là nơi chiến dịch sống

Tất cả những gì ở trên là phong cảnh. Cơ chế nằm ở thanh trượt.

Kéo nó và đất nước xanh lên: đồi trọc phủ rừng, màu sắc chuyển, bộ đếm leo dần về một triệu. Kéo ngược về 0 và nơi này lại nhợt nhạt, trống trải. Đó là toàn bộ câu chuyện của chiến dịch gói trong một thao tác, và mất khoảng bốn giây để hiểu, không cần một dòng chữ nào.

Trái: thanh trượt ở 0. Phải: thanh trượt ở một triệu. Cùng địa hình, cùng góc máy, cảm giác hoàn toàn khác — và không ai cần được giải thích cơ chế.
Trái: thanh trượt ở 0. Phải: thanh trượt ở một triệu. Cùng địa hình, cùng góc máy, cảm giác hoàn toàn khác — và không ai cần được giải thích cơ chế.

Chúng tôi quay lại mô thức này liên tục vì nó đảo ngược quan hệ thường thấy. Bình thường khán giả đọc về tiến độ chiến dịch. Ở đây họ vận hành nó, nghĩa là họ buộc phải tìm xem mức tối đa trông ra sao. Ai cũng kéo thanh trượt tới cuối. Ai cũng vậy.

Rồi mới tới mấy trò biểu diễn

Một khi cả đất nước đã lên màn hình và chạy mượt, việc thêm phần hoành tráng gần như miễn phí, nên chúng tôi không kiềm chế:

Một chuyến bay có dẫn đường. Bấm một nút, máy quay cất lên, nghiêng cánh và đi vòng đất nước qua chín điểm dừng — về bản chất giống một video tự chạy, chỉ khác là người xem có thể giành lấy quyền điều khiển bất cứ lúc nào và đi chỗ khác.
Lấy nét theo vùng. Bắc, Trung, Nam — mỗi lựa chọn chỉ đổi khung hình chứ không tải lại trang.
Một làn sóng ánh sáng chạy dọc chiều dài đất nước mỗi khi chạm một cột mốc.
Màn trình diễn drone cất cánh từ toàn bản đồ ở mốc 250.000 dặm, vì có người hỏi "chạm một phần tư đầu tiên thì có gì?" và "hiện một thông báo" là một câu trả lời tệ.

Không có thứ nào trong đó khó về mặt kỹ thuật một khi scene đã tồn tại. Đó chính là điều đáng nói. Phần tốn kém là cả đất nước; mấy màn biểu diễn chỉ là một cuối tuần.

Đang giữa chuyến bay. Hành trình được lập sẵn nhưng không bao giờ khóa người xem lại — chạm vào bản đồ bất cứ lúc nào là bạn cầm lái.
Đang giữa chuyến bay. Hành trình được lập sẵn nhưng không bao giờ khóa người xem lại — chạm vào bản đồ bất cứ lúc nào là bạn cầm lái.

Bắt 16 MB phải ngoan

Giờ tới nửa kém hào nhoáng, vì một bản đồ không ai tải nổi là một bản đồ chưa ai từng thấy.

File duy nhất đó nặng khoảng 16 MB, phần lớn là địa hình. Những gì chúng tôi làm với nó:

Lưới có nhiều bậc. Scene tự xem nó đang chạy trên cái gì rồi dựng địa hình tương ứng. Bản 58.296 tam giác là bậc cao nhất; máy yếu hơn nhận một đất nước nhẹ hơn, thay vì một đất nước chi tiết chạy như trình chiếu ảnh.
Hình học nén Draco, và bộ giải mã phục vụ từ tên miền của chúng tôi — một chiến dịch không nên sập chỉ vì CDN của bên thứ ba có một buổi chiều tệ hại.
Không gì được tải cho tới khi bạn yêu cầu. Để ý là phần nhúng ở trên không tải 16 MB ngay khi bạn mở bài viết. Nó đợi một cú nhấp. Mọi demo chúng tôi đặt trước khán giả đều được đối xử như vậy: tốc độ trang của chính mình không đáng đem đánh đổi cho một scene mà phần lớn người đọc sẽ lướt qua.
Màn hình chờ làm một việc có ích. Nó vẽ đường viền Việt Nam trong lúc địa hình được lắp ráp, biến thời gian chờ thành đoạn mở đầu. Chiêu cũ. Lần nào cũng hiệu quả.

Những gì một bản đồ như thế này không làm được

Công bằng là công bằng.

Đây không phải GIS thời gian thực. Dữ liệu trong demo là mô phỏng — bộ đếm kia là một thanh trượt, không phải cơ sở dữ liệu, và một chiến dịch thật cần một server phía sau với hành trình thật, danh tính thật và chống gian lận thật trước khi công bố bất kỳ con số nào.

Nó cũng không phải công cụ tìm đường. Nó sẽ không cho bạn biết đường nhanh nhất từ Huế đi Đà Nẵng. Nó vẽ đường; nó không suy nghĩ về đường.

Địa hình được cách điệu. Độ cao thật, nhưng kịch tính hóa: các đỉnh được phóng đại, vì một Việt Nam trung thực về địa lý nhìn từ quỹ đạo thì khá phẳng và khá buồn tẻ.

Và đó là một trang nặng. Đẹp, nhưng nặng. Bất cứ thứ gì phát cho lượng lớn người dùng di động đều nhận một bản nhẹ hơn, một bậc thấp hơn và một phương án 2D — một đánh đổi thật sự, không phải một dòng chú thích.

Những bản đồ chúng tôi có thể làm cho bạn

Nếu chiến dịch của bạn có một chữ ở đâu, nhiều khả năng nó cần một bản đồ. Vài dạng chúng tôi thích:

Dạng chiến dịchBản đồ làm gì
Mục tiêu tập thể toàn quốcĐất nước đầy dần, xanh dần, sáng lên khi mọi người cùng góp
Hệ thống cửa hàng hoặc đại lýĐiểm bán như một cảnh quan 3D, không phải một danh sách ghim
Cuộc đua giữa các vùngBắc, Trung, Nam so kè, trực tiếp và dễ đọc
Hành trình hoặc lộ trìnhMột tuyến đường với các điểm dừng mở khóa dần
Dự án bất động sảnKhu đất, khu vực xung quanh và tiến độ phân kỳ trong một scene

Chúng tôi dựng chúng bằng Three.js, với dữ liệu độ cao thật, hình học OpenStreetMap thật và mô hình làm trong Blender — cùng quy trình được mô tả trong cách chúng tôi làm đề xuất chiến dịch. Nếu bạn muốn xem chúng tôi còn làm gì với WebGL, có nguyên một studio ở đâymột danh mục game thương hiệu.

Hoặc bỏ qua phần đọc và gửi cho chúng tôi một brief. Nếu trong đó có một đất nước, chúng tôi đã thấy hứng thú rồi.

Bản đồ Việt Nam là một prototype concept do Code Crush thiết kế và phát triển cho buổi pitch chiến dịch của Toyota Việt Nam. Số dặm, phần thưởng và tiến độ trong demo chỉ mang tính minh họa. Hình học đường và sông © những người đóng góp cho OpenStreetMap.

Thẻ

3D mapsinteractive mapWebGLThree.jsdata visualisationOpenStreetMapterrainVietnamcampaign mechanicsbranded games
Bản tin miễn phí

Nhận thông tin chuyên sâu về gamification gửi hằng tuần

Tham gia cùng các quản lý thương hiệu và marketer để nhận những nội dung hay nhất của chúng tôi về game thương hiệu, chiến lược tương tác và tiếp thị tương tác — không spam, hủy đăng ký bất cứ lúc nào.

Không spam. Hủy đăng ký bất cứ lúc nào. Chúng tôi tôn trọng hộp thư của bạn.

Hãy cùng tạo ra điều mà khán giả của bạn sẽ yêu thích

Từ game thương hiệu đến trải nghiệm 3D nhập vai — chúng tôi thổi hồn vào sự tương tác.