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

Cách chúng tôi biến mascot 2D thành nhân vật 3D

33 xương, 5 animation, 4 biểu cảm và không một texture nào. Cách một mascot thương hiệu phẳng trở thành nhân vật biết đi, vẫy tay và ăn mừng — kèm hai demo.

Code Crush Team

Gamification Agency

Artwork 2D chính thức của Miraito do Toyota cung cấp đặt cạnh nhân vật 3D có rig do Code Crush dựng lại

Phần lớn mascot thương hiệu có một cuộc đời khá buồn. Chúng sinh ra trong một file illustrator, được duyệt ba tư thế trong bộ nhận diện, rồi dành phần đời còn lại đứng ở góc một banner, vẫy tay với không ai cả.

Thật phí, vì mascot là thứ duy nhất trong bộ nhận diện mà người ta sẵn lòng có quan hệ tình cảm với nó.

Đây là Miraito. Chiến dịch Million Green Miles của Toyota Việt Nam giao cho chúng tôi nhân vật này dưới dạng tranh tham chiếu phẳng, và chúng tôi dựng lại thành một nhân vật 3D biết đi, vẫy tay, ăn mừng, chỉ tay, tự chớp mắt, và có thể đặt vào một game, một landing page hay một filter AR.

Nó đây. Xoay nó, đổi animation, kéo các thanh biểu cảm, và — phần vui nhất — tick vào ô bộ xương để nhìn thấy rig bên dưới.

Đúng bản review đã gửi cho khách hàng. Mọi nút ở đây đều thật: năm animation, bốn biểu cảm khuôn mặt, lớp phủ bộ xương và lưới, cùng công tắc chất lượng mobile.
Mở trong tab mới

Cứ bấm thoải mái. Lát nữa tôi sẽ giải thích bạn vừa làm hỏng cái gì.

Một mascot không cử động được thì không dẫn dắt được gì

Khoảng cách giữa "chúng tôi có mascot" và "mascot của chúng tôi làm được việc" là rất lớn, và gần như hoàn toàn là khoảng cách sản xuất.

Tranh phẳng cho bạn một sticker. Một nhân vật 3D có rig cho bạn một người dẫn: thứ có thể chào người chơi khi bắt đầu game, phản ứng khi họ thắng, chỉ vào chỗ cần bấm, quay mặt theo con trỏ trên trang sản phẩm, hoặc xuất hiện trong cả trăm ảnh marketing vào tuần sau mà không phải đặt lịch họa sĩ.

Cùng một nhân vật. Hoàn toàn khác về loại tài sản.

Trước hết phải hiểu nhân vật thật sự là gì

Trước khi dựng bất cứ thứ gì, ai đó phải quyết định phần nào của bức vẽ là nhân vật, và phần nào chỉ là cách nó được vẽ hôm đó.

Thứ chúng tôi bắt đầu: artwork chính thức của Miraito do Toyota cung cấp. Hai tư thế, phẳng, không có turnaround — không có gì cho thấy phía sau mũ hay cách tai nghe gắn vào.
Thứ chúng tôi bắt đầu: artwork chính thức của Miraito do Toyota cung cấp. Hai tư thế, phẳng, không có turnaround — không có gì cho thấy phía sau mũ hay cách tai nghe gắn vào.

Hai bức tranh. Đó là toàn bộ brief cho một nhân vật giờ phải đứng vững ở mọi góc nhìn, nghĩa là một phần không nhỏ của công việc này là đoán một cách có kỷ luật.

Với Miraito: chiếc lá mọc ra từ mũ là bất di bất dịch. Khuôn mặt dạng màn hình bo tròn với hai con mắt xanh là bất di bất dịch. Hai đĩa tai nghe đỏ, chiếc huy hiệu năng lượng nhỏ trên ngực, đôi ủng đỏ — đều chịu lực. Độ cong chính xác của bờ vai thì ít hơn nhiều.

Làm sai bước này và bạn tạo ra một thứ chính xác về kỹ thuật nhưng xa lạ về cảm xúc. Người ta nhận ra nhân vật như nhận ra khuôn mặt: bóng dáng trước, tỉ lệ sau, chi tiết xếp hàng rất xa. Việc đầu tiên của chúng tôi là bảo vệ bóng dáng.

52.980 tam giác và không một texture

Đây là điều tôi muốn chỉ vào nhất, vì nó là quyết định ít hiển nhiên nhất trong cả bản dựng.

Mô hình hoàn thiện có 52.980 tam giác, nặng 2,5 MB dưới dạng GLB, và dùng một material, không texture nào.

Không một cái nào. Không trải UV, không bake texture, không bản đồ màu 4K. Mọi màu trên nhân vật — mũ xanh, mặt kem, ủng đỏ — đều là hình học và material, chứ không phải một tấm ảnh vẽ căng lên hình học.

Lưới dưới lớp da. Mọi thứ bạn thấy là màu đều được dựng bằng hình học thật, nên file nhẹ và các cạnh luôn sắc nét.
Lưới dưới lớp da. Mọi thứ bạn thấy là màu đều được dựng bằng hình học thật, nên file nhẹ và các cạnh luôn sắc nét.

Lựa chọn đó trả lại cho bạn ba lần:

Nó sắc nét ở mọi mức phóng. Không có độ phân giải texture nào để cạn. Đẩy máy quay sát vào mặt, đôi mắt vẫn là những hình khối sạch sẽ, vì chúng vốn là hình khối.
Nó bé xíu. 2,5 MB cho một nhân vật rig đầy đủ kèm năm animation là không đáng kể. Một nhân vật có texture cùng chất lượng sẽ nặng gấp bốn năm lần trước cả khi nén.
Đổi màu là đổi một giá trị, không phải vẽ lại. Muốn bản vàng giới hạn cho Tết? Đó là đổi material, không phải quay lại chỗ họa sĩ texture.

Đánh đổi thì sòng phẳng: cách này chỉ hợp với nhân vật cách điệu. Nếu mascot của bạn có lông, vải dệt hay họa tiết in, nó cần texture và file sẽ nặng lên. Miraito làm từ các khối nhựa trơn, nên hình học thắng.

33 xương, và 8 cái chịu phần suy nghĩ

Bên dưới bề mặt là một bộ xương — 33 xương — cộng 8 điều khiển IK trong Blender.

Bật lớp phủ bộ xương. Đường xanh lá là chuỗi cột sống; các đường xanh dương chạy ra hai bàn tay và xuống dọc hai chân.
Bật lớp phủ bộ xương. Đường xanh lá là chuỗi cột sống; các đường xanh dương chạy ra hai bàn tay và xuống dọc hai chân.

Số xương chẳng có gì đặc biệt. Các điều khiển IK mới là phần quan trọng, và chúng là khác biệt giữa một bộ rig mà animator thích dùng và một bộ rig mà animator âm thầm ghét.

Không có IK, đặt một bàn chân nghĩa là xoay hông, rồi đầu gối, rồi cổ chân, rồi lặp lại cho tới khi bớt sai. Có IK, bạn tóm lấy bàn chân, đặt nó vào chỗ bàn chân cần ở, và cái chân tự lo phần còn lại. Tay cũng vậy. Tám điều khiển: hai chân, hai tay, và các điểm đích giữ cho khuỷu và gối gập đúng chiều thay vì bẻ ngược như ghế xếp.

Bạn cảm nhận điều này ở chi phí sửa. "Cho bạn ấy vẫy cao hơn chút được không?" phải là việc năm phút, không phải làm lại animation.

Khuôn mặt gói gọn trong bốn con số

Các biểu cảm hoàn toàn không phải xương. Chúng là morph target — những biến thể được điêu khắc sẵn của lưới mà bộ dựng hình nội suy giữa chúng, mỗi cái chạy bằng một giá trị từ 0 đến 1.

Miraito có bốn: mắt trái, mắt phải, nụ cười, ngạc nhiên.

Cười ở 1,0, ngạc nhiên ở 0,65, mắt trái ở 0,9. Bốn thanh trượt, và bạn tìm ra một cú nháy mắt sửng sốt thật sự trong khoảng mười giây.
Cười ở 1,0, ngạc nhiên ở 0,65, mắt trái ở 0,9. Bốn thanh trượt, và bạn tìm ra một cú nháy mắt sửng sốt thật sự trong khoảng mười giây.

Bốn con số nghe có vẻ ít, cho tới khi bạn nhận ra chúng hòa trộn được. Nửa nụ cười cộng ngạc nhiên tối đa cho ra một khuôn mặt khác hẳn cả hai. Điều khiển hai mắt riêng cho phép nháy mắt, và cho phép chớp mắt tự động chạy liên tục bên dưới mọi thứ khác mà không xung đột. Mọi tổ hợp đều là một khuôn mặt hợp lệ — đúng thứ bạn cần khi nhân vật phải phản ứng với những sự kiện bạn chưa kịp viết kịch bản.

Một khuôn mặt dựng theo cách này cũng cực dễ điều khiển từ code. Người chơi thắng? Đẩy nụ cười lên 1 trong 200 mili giây. Không cần animator lúc chạy.

Năm animation đã là cả một tính cách

Nhân vật đi kèm năm vòng lặp: chờ, đi, chào, ăn mừng, chỉ tay.

Đang giữa động tác ăn mừng, đã tạm dừng. Đây là cái được dùng mỗi lần người chơi hoàn thành bất cứ thứ gì.
Đang giữa động tác ăn mừng, đã tạm dừng. Đây là cái được dùng mỗi lần người chơi hoàn thành bất cứ thứ gì.

Nếu chỉ đủ ngân sách cho một animation, hãy chọn động tác chờ. Đó là thứ không ai yêu cầu trong brief và là thứ chạy 95% thời gian. Một nhân vật đứng im phăng phắc bị đọc thành hỏng — như một tấm ảnh tải lỗi. Một nhân vật biết thở, dồn trọng tâm qua lại, để chiếc lá đung đưa nhẹ thì được đọc là đang sống, và ấn tượng đó làm việc cho thương hiệu của bạn nhiều hơn cái vẫy tay rất nhiều.

Bốn cái còn lại là từ vựng của một giao diện. Đi cho chuyển cảnh. Chào cho lúc xuất hiện. Ăn mừng cho thành công. Chỉ tay cho "nhìn đây, bấm vào đây". Đó gần như là mọi khoảnh khắc trong một hành trình chiến dịch mà nhân vật dẫn dắt có điều muốn nói.

Phần thật sự khiến nó được duyệt

Một bộ rig không kiểm tra được là bộ rig không ai ký duyệt. Nên mô hình không đến dưới dạng video hay ảnh GIF xoay vòng — nó đến dưới dạng chính công cụ bạn đã nghịch ở đầu bài này.

Bản review đầy đủ. Đội thương hiệu bên trái, trưởng nhóm animation bên phải, tất cả cùng nhìn một file thay vì nhìn vào lời mô tả của nhau.
Bản review đầy đủ. Đội thương hiệu bên trái, trưởng nhóm animation bên phải, tất cả cùng nhìn một file thay vì nhìn vào lời mô tả của nhau.

Trong đó có gì, và vì sao từng thứ có mặt:

Điều khiểnDành cho ai
Công tắc Chi tiết / MobileĐội thương hiệu, để duyệt đúng thứ một chiếc điện thoại sẽ dựng ra
Năm nút animation, tạm dừng, tốc độBất kỳ ai muốn kiểm tra một khoảnh khắc cụ thể
Tiến từng khung ở 1/24 giâyAnimator, người cần thấy tư thế đúng ở khung nó rơi vào
Lớp phủ bộ xương và lướiNgười duyệt kỹ thuật
Tư thế nghỉKiểm tra chính mô hình, chưa tạo dáng
Góc cố định: chính diện, ba phần tư, hông, sau lưngDuyệt thương hiệu, vốn luôn thực hiện từ các góc nhất quán
Nút đổi ngôn ngữNgười duyệt và người viết brief hiếm khi đọc cùng một thứ tiếng

Chẳng thứ nào hào nhoáng. Tất cả đều cắt bớt một vòng email.

Rồi nó phải sống ở đâu đó thật

Một nhân vật trong trình xem là một nhân vật trong chân không. Đây là cùng mô hình đó, cùng file GLB đó, đặt vào một landing page chiến dịch — chào bạn, đứng trên bục, với bộ điều khiển mascot được giấu sau một bảng review để khách hàng vẫn nghịch được chuyển động mà phần giàn giáo ấy không lên bản phát hành.

Bản landing page, bằng tiếng Việt. Vẫn file nhân vật 2,5 MB đó, giờ đang làm việc: chào hỏi, chỉ vào mục tiêu, cho trang một thứ gì đó đang sống.
Mở trong tab mới

Chiến dịch mà nó thuộc về còn có một bản đồ 3D Việt Nam để bạn bay qua, nửa còn lại của cùng một buổi pitch. Mascot chào bạn, bản đồ cho bạn thấy mọi người đã cùng làm được gì.

Chúng tôi cần gì từ bạn, và chúng tôi sẽ không làm gì

Nói trước cho sòng phẳng về cách việc này diễn ra:

Thứ giúp ích. Tranh tham chiếu từ càng nhiều góc càng tốt — kể cả turnaround vẽ thô. Bộ hướng dẫn thương hiệu. Mọi file 3D đã có. Nếu nhân vật từng được làm thành thú nhồi bông hay bộ đồ hóa trang, hãy gửi ảnh, vì đã có người giải xong bài toán "phía sau lưng trông ra sao".

Thứ chúng tôi sẽ hỏi. Phần lớn nhân vật có bản quyền đi kèm quy định sử dụng, và một bản dựng lại 3D nằm ở vị trí khó xử ngay cạnh điều khoản "không được vẽ lại". Nên bản dựng của chúng tôi đi tới đội thương hiệu như một đề xuất để duyệt, không phải như chuyện đã rồi, và các vị trí đặt ảnh phẳng trong deck dùng artwork chính thức chứ không phải bản của chúng tôi.

Thứ này không phải là gì. Nó không phải rig điện ảnh. Không có hệ xương khuôn mặt, không mô phỏng vải, không biến dạng cơ. Đó là một nhân vật thời gian thực làm ra để trụ ở 60 khung hình/giây trên điện thoại trong trình duyệt, và phần lớn tay nghề nằm ở việc biết chính xác nên bỏ đi cái gì.

Thứ nó không sửa được. Nếu nhân vật không ổn về mặt thiết kế, 3D sẽ nói điều đó to hơn chứ không nhỏ đi. Chúng tôi chưa từng thấy chiều sâu cứu nổi một mascot yếu.

Gửi mascot của bạn cho chúng tôi

Nếu bạn có một nhân vật đang sống trong file PDF, nhiều khả năng nó làm được nhiều hơn những gì hiện đang được giao.

Chúng tôi dựng trong Blender, giao glTF, và toàn bộ đi qua cùng quy trình với mọi thứ chúng tôi pitch. Xem thêm các công việc 3D của studio, hoặc những game thương hiệu mà các nhân vật này thường dẫn dắt.

Hoặc cứ gửi cho chúng tôi phần tranh và chúng tôi sẽ nói cần những gì để làm nó vẫy tay.

Miraito là mascot thuộc sở hữu của Toyota. Bản dựng 3D trình bày ở đây do Code Crush thiết kế và phát triển như một concept cho buổi pitch chiến dịch của Toyota Việt Nam, được trình như một đề xuất chứ không phải artwork đã được thương hiệu phê duyệt cuối cùng.

Thẻ

3D mascotcharacter rigging3D modelingBlendermorph targetscharacter animationbrand mascotWebGLglTFVietnam
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.