Outsource Three.js: Quy Trình Vận Hành White-Label

Quyết định outsource Three.js là phần dễ. Phần dễ hỏng là vận hành: ai có quyền repo, khách xem tiến độ thế nào mà không gặp dev, cập nhật chạy qua chênh múi giờ ra sao, việc lên hóa đơn kiểu gì, và cuối cùng bàn giao lại đúng những gì. Sai mấy điểm đó thì một build 3D xuất sắc vẫn thành một engagement tệ. Đúng mấy điểm đó thì studio bạn chạy một chuyên gia WebGL senior mượt như một hire nội bộ — dưới thương hiệu bạn, theo quy trình bạn.

Tôi là Hon Tran, creative developer và thành viên ban giám khảo Awwwards, đã chạy đúng mô hình này với các studio ở Na Uy, Đan Mạch, Thụy Điển, Malta và Mỹ hơn 11 năm. Đây là cẩm nang vận hành: hợp đồng, công cụ, nhịp giao tiếp và tài liệu bàn giao khiến việc outsource Three.js trở nên vô hình với khách của bạn. Nếu bạn vẫn đang cân nhắc có nên hợp tác không, bắt đầu ở white-label WebGL không cần tuyển in-house; bài này là phần làm thế nào.

Bước 1 — NDA và điều khoản white-label, trước mọi brief

Không gì nhúc nhích cho tới khi ký hai văn bản. Thứ nhất, NDA song phương — danh tính khách, brief và file thiết kế bảo mật cả hai chiều. Thứ hai, một thỏa thuận white-label ghi rõ ba điều:

• Tôi không công khai nhận khách của bạn hay trưng dự án nếu chưa có văn bản đồng ý.
• Toàn bộ deliverable, repo và asset phái sinh là của bạn khi thanh toán xong.
• Tên tôi không xuất hiện công khai trừ khi bạn chọn thêm vào.

Agency cần điều này bằng văn bản, không phải bằng niềm tin, và tôi xem là bất di bất dịch. Đó là nền tảng cả engagement đứng lên — khách không bao giờ được nhận ra có hai studio trong phòng.

Bước 2 — Scoping: tách phần tiêu chuẩn, phần khó, và spike

Bạn gửi Figma, reference motion và ý đồ. Tôi trả về một scope chia việc thành ba rổ trung thực:

• Tiêu chuẩn — layout, hành vi responsive, các pattern GSAP đã biết. Dễ đoán.
• Khó — một shader riêng, hệ hạt GPGPU, rig camera chạy theo scroll. Làm được, nhưng tốn thời gian thật.
• Research spike — hiệu ứng tôi cần prototype trước khi ước lượng được. Có cái ba ngày; có cái ba tuần. Tôi đánh dấu để pitch của bạn không hứa một mốc tôi không giữ nổi.

Bạn nhận báo giá cố định theo giai đoạn, không tính đồng hồ chạy. Nhờ đó bạn báo giá khách tự tin và bảo vệ biên lợi nhuận. Để đặt kỳ vọng ngân sách với khách từ đầu, đưa họ xem chi phí một website chuyển động, nhiều motion.

Bước 3 — Quyền repo và môi trường

Đây là chỗ hầu hết engagement outsource bị rò. Setup sạch:

• Repo — tôi làm trong org GitHub/GitLab của bạn trên feature branch, hoặc một repo mới bàn giao cho bạn. Kiểu nào bạn cũng sở hữu. Commit gọn, chiến lược branch rõ, PR để team bạn review.
• Staging — mỗi push build một URL preview Vercel/Netlify bạn chuyển thẳng cho khách. Họ review bản thật trên thiết bị thật; bạn không phải share màn hình máy tôi.
• Secret — env var nằm trong dashboard hosting, không bao giờ trong repo. Nếu 3D lấy dữ liệu từ CMS, tôi nhận một token giới hạn, thu hồi được — không phải key production của bạn.

# Nhịp mà khách thực sự thấy: mỗi push = một link preview mới.
git push origin feature/webgl-hero
#  ↳ Vercel build → https://your-studio-git-webgl-hero.vercel.app
#    Bạn chuyển link đó. Khách review. Thương hiệu bạn trên URL.

Điểm mấu chốt: khách trải nghiệm pipeline staging của studio bạn. Dev đằng sau là hạ tầng vô hình.

Bước 4 — Nhịp giao tiếp qua múi giờ

Tôi ở TP.HCM (GMT+7) và làm async-first với studio EU, Trung Đông và Mỹ. Chênh giờ là lợi thế, không phải lỗi — tôi bàn giao tiến độ khi team bạn ngủ, để sáng ra đã có cái mới trên staging. Nhịp hiệu quả:

Kênh	Dùng cho	Tần suất
Cập nhật văn bản hàng ngày (Slack Connect / email)	Đã ship gì, tiếp theo gì, vướng gì	Mỗi ngày làm
Loom walkthrough	Review motion & 3D — cách duy nhất tin cậy để review animation async	Mỗi milestone
Board chung (Linear / Notion / Trello)	Scope, trạng thái giai đoạn, log quyết định	Trực tiếp
Call giờ overlap	Kickoff, duyệt milestone, gỡ vướng	Khi cần, buổi sáng của bạn

Motion không review được qua ảnh tĩnh — phải thấy nó chuyển động. Một Loom 90 giây của scene phản ứng theo scroll cho feedback tốt hơn một call một tiếng, và được ghi lại. Vì thế tài liệu review là video, không phải một buổi share màn hình bạn phải dự trực tiếp.

Bước 5 — Hóa đơn và dòng tiền chạy thế nào

Khách trả cho studio của bạn; bạn trả cho đối tác. Chuyện tiền không chạm vào quan hệ khách. Cấu trúc thường gặp:

• Đặt cọc để mở một giai đoạn (thường 40–50%), thanh toán phần còn lại khi nghiệm thu giai đoạn.
• Cố định theo giai đoạn, để báo giá cho khách có giá vốn đã biết bên dưới.
• Bằng USD, remote, hóa đơn quốc tế chuẩn — không bất ngờ.

Vì scope cố định theo giai đoạn, bạn luôn biết biên lợi nhuận trước khi cam kết với khách. Yêu cầu thay đổi là dòng riêng, báo giá trước khi làm — nguyên nhân số một bào mòn biên là những "chỉnh nhỏ" không báo giá chồng chất.

Bước 6 — Bàn giao: bạn thực sự nhận lại gì

Engagement kết thúc bằng một gói team bạn sở hữu được mà không phải gọi tôi mãi:

• Repo, có tài liệu — component Three.js/R3F dễ đọc, uniform shader có chú thích, breakpoint rõ ràng.
• Một Loom kiến trúc ngắn — scene cấu trúc thế nào, sửa cái gì ở đâu.
• Tiện ích tái dùng — các helper animation/WebGL, để dự án sau xuất phát sẵn lợi thế.
• Cửa sổ launch — tôi sẵn sàng tới lúc go-live, và có gói retainer bảo trì nếu bạn muốn. Phần lớn đối tác agency đều lấy, vì pitch tiếp theo thường lại cần đúng hỏa lực này.

Khả năng bảo trì đó là ranh giới giữa đối tác white-label và vendor khóa chân. Bạn không bao giờ nên bị giữ làm con tin bởi người đã build phần 3D của bạn. Xem chuẩn mực mà bàn giao phải đạt, ghé kho dự án.

Checklist vận hành

Trước khi outsource một build Three.js, xác nhận tất cả những điều này đã thỏa thuận bằng văn bản:

• Đã ký NDA song phương + thỏa thuận white-label
• Đã định rõ quyền sở hữu và quyền truy cập repo
• Pipeline staging/preview khách xem được
• Nhịp cập nhật văn bản hàng ngày + review Loom
• Scope và lịch thanh toán cố định theo giai đoạn
• Quy trình yêu cầu thay đổi (báo giá trước khi làm)
• Bàn giao có tài liệu + retainer tùy chọn

FAQ

Bạn có làm được bên trong codebase và quy ước hiện có của chúng tôi?

Có — setup Next.js/React, lint, chiến lược branch của bạn. Nếu chưa có quy ước, tôi dựng nền tảng sạch, dễ bảo trì để team bạn nắm sau bàn giao.

Bạn review animation kiểu async thế nào?

Loom. Motion phải được thấy chuyển động — một walkthrough ghi lại scene phản ứng theo scroll cho feedback sắc hơn call trực tiếp và lưu lại cho cả team. Ảnh tĩnh không dùng được cho 3D.

Ai sở hữu code và IP?

Bạn, khi thanh toán xong — repo, asset và tác phẩm phái sinh. Điều đó ghi trong thỏa thuận white-label trước khi bắt đầu.

Quy mô engagement nào hợp lý để outsource?

Từ một hero WebGL hay microsite đến cả một build nhắm giải. Nếu bạn đang cân đối tác với tuyển người hay một agency full-service, xem creative dev vs agency vs template vs Webflow, và câu hỏi trước khi thuê creative developer.

Chạy một chuyên gia WebGL senior dưới thương hiệu bạn

Nếu bạn muốn vận hành trở nên vô hình với khách — sẵn sàng NDA, thân thiện múi giờ, scope cố định, bàn giao có tài liệu — đó là cách tôi làm với studio. Gửi brief ở trang hire, hoặc xem tác phẩm trước trong kho dự án. Studio bạn nắm khách; tôi làm phần Three.js chạy như đồng hồ bên dưới.