Link bài viết gốc： https://mp.weixin.qq.com/s/Ci7pNUCxGXF6p...
Không Cách丶 · Tài khoản công khai · Bàn phím của Không Cách · 2026-10-20 16:41
Bài viết này được chia sẻ lại, bản quyền thuộc về tác giả gốc, toàn văn căn cứ theo link bài gốc
Gần đây có rất nhiều case study dùng code để làm video, có người nhờ vậy mà nhanh chóng xây kênh thành công, có người dùng để quảng bá sản phẩm. Hiệu quả đều rất tốt.
Tôi đã xem qua một loạt video và thấy có đủ mọi phong cách: từ hòn đảo 3D, MV màu nước đến nét vẽ tay phác thảo.
Những hiệu ứng này thực sự thách thức nhận thức của tôi, càng xem càng thấy cuốn, rốt cuộc chúng được tạo ra như thế nào?
Chúng chỉ yêu cầu model xuất ra một đoạn code là đã tạo nên hiệu ứng sánh ngang với các video model.
Sự khác biệt cơ bản giữa video và code thì tôi nắm khá rõ:
Video model trực tiếp tạo ra từng pixel của mỗi khung hình.
Code model chỉ viết chương trình, còn khung hình do trình duyệt hoặc render engine tính toán ra từng khung một.
Các bộ phim truyện tranh chuyển động mà chúng ta xem đều được làm bằng các video model như Seedance 2.5.
Còn hiệu ứng do code tạo ra, bạn có thể xem video tôi vừa tự tay làm dưới đây:
Vậy nếu code model không vẽ bất kỳ một pixel nào, làm sao nó có thể tạo ra các phong cách như 3D, màu nước, vẽ tay hay bảng viết toán học?
Mang theo thắc mắc đó, tôi đã tìm hiểu các công nghệ đằng sau và tổng hợp lại trong bài viết này.
1 Đọc xong, bạn có thể hiểu được nguyên lý tạo nên những hiệu ứng động này
2 Nắm được một số thuật ngữ kỹ thuật, viết prompt chuẩn hơn để tận dụng tối đa năng lực của model
3 Luyện tập thêm là có thể tạo ra bất kỳ hiệu ứng video AI nào hiện có trên thị trường.
Các phong cách khác nhau chẳng qua là hàm số này được giao cho các công cụ khác nhau để vẽ:
Hồi nhỏ bạn từng chơi sách lật hoạt hình (flipbook) chưa? Mỗi trang vẽ một hình, lật thật nhanh là hình ảnh sẽ chuyển động.
Video cũng vậy. 30 khung hình mỗi giây (fps) nghĩa là một giây lật 30 trang. Dùng code làm video chính là để chương trình vẽ thay bạn từng khung hình đó.
Bạn viết một hàm số, đưa vào tham số thời gian, nó sẽ trả về cho bạn một khung hình:
Sau đó, renderer sẽ bắt đầu từ frame 0, gọi hàm này lần lượt từng khung hình, mỗi lần gọi sẽ chụp lại một ảnh, cuối cùng dùng FFmpeg ghép hàng trăm bức ảnh thành file MP4 và lồng thêm âm thanh.
Dùng video model để tạo khung hình thì mỗi lần quay gacha kết quả lại khác nhau, muốn chỉnh sửa một chi tiết nhỏ là cực kỳ khó.
Code thì khác, cùng một đoạn code render 100 lần thì cả 100 lần kết quả đều giống hệt nhau. Muốn dịch tiêu đề sang trái 20 pixel, chỉ cần đổi một con số là xong.
Khả năng tái lập và chỉnh sửa chuẩn xác chính là lợi thế thiết thực nhất của animation bằng code so với video AI.
Dưới đây tôi chia thành 4 nhóm với 9 nguyên lý kỹ thuật, kèm theo link mã nguồn mở và hướng dẫn để các bạn tiện tìm hiểu thêm
Nhóm 1: HyperFrames, Remotion, Motion Canvas
Đây là hướng đi phổ biến nhất hiện nay. Khung hình được viết dưới dạng trang web, rồi dùng một trình duyệt Chrome chạy ngầm (headless) để chụp ảnh màn hình.
Lý do rất đơn giản: model có năng lực viết web mạnh nhất và tỷ lệ lỗi thấp nhất.
1 HyperFrames
HyperFrames là công cụ animation AI mã nguồn mở của HeyGen, với tư duy coi video như một trang web. Chữ là <h1> , thẻ card là <div> , còn hiệu ứng animation được giao cho timeline của GSAP.
Điểm mấu chốt là timeline này ở trạng thái tạm dừng; khi render, framework sẽ nhích từng nấc để nhảy tới frame thứ n, chụp màn hình rồi mới nhích tiếp sang frame kế tiếp.
Nếu muốn xem hướng dẫn chính thức từ đội ngũ phát triển, bạn có thể xem video hướng dẫn nhập môn 5 phút của HeyGen: youtube.com/watch?v=IDkycf5vfhI
2 Remotion
Remotion dùng React để viết video. Mỗi khung hình là một component, và component này chỉ nhận duy nhất một đầu vào: hiện tại đang là frame thứ mấy.
Chẳng hạn như hai hàm này, interpolate chuyển đổi số thứ tự frame thành bất kỳ giá trị nào, spring tính toán hiệu ứng đàn hồi nảy bật. Phần số nhảy và biểu đồ cột bật lên bên dưới chính là tác phẩm của hai hàm này:
Nó có rào cản cao hơn HyperFrames một chút vì đòi hỏi bạn phải biết React.
Ưu điểm là ghép nối nhiều phân cảnh, khớp phụ đề theo từng từ (word-level sync) và làm template hàng loạt cực kỳ tiện lợi; chỉ cần đổi dữ liệu trong cùng một component là đã có ngay một video hoàn toàn mới.
Hướng dẫn Remotion: youtube.com/watch?v=z7Bkf3Vc63U
3 Motion Canvas
Cách viết của Motion Canvas thì ngược lại. Remotion cung cấp cho bạn số thứ tự frame để bạn tính toán khung hình; còn Motion Canvas lại cho phép bạn viết kịch bản theo trình tự thời gian:
Dòng được highlight bên trái chính là hành động đang thực thi ở bên phải. Nó tích hợp sẵn component khối mã (code block), rất nhiều video dạy lập trình đều dùng công cụ này để dựng.
Video giới thiệu do chính tác giả thực hiện: youtube.com/watch?v=WTUafAwrunE
Nhóm 2: Nét vẽ tay, minh họa phân lớp, màu nước
Sản phẩm vẽ bằng code thường hay bị chê là quá ngay ngắn, cứng nhắc, trông như slide PPT. Nhóm kỹ thuật này sinh ra chính là để giải quyết vấn đề "quá đậm chất AI".
4 rough.js: Nét vẽ tay phác thảo
Khi vẽ một đường thẳng, rough.js sẽ thêm một chút độ lệch ngẫu nhiên (offset) vào hai đầu mút, rồi xếp chồng hai ba đường cong hơi khác nhau lên, nhìn trông hệt như nét chì được viền lại hai lần.
5 Minh họa phân lớp: Xuất hiện từng lớp một
Tách một bức minh họa thành các layer: bầu trời, mặt trời, núi xa, núi gần, cây cối, chữ viết, rồi cho mỗi layer xuất hiện so le nhau nửa nhịp. Hiệu ứng viền nét vẽ tựa như ngòi bút lướt trên giấy được thực hiện dựa vào hai thuộc tính của SVG: đặt độ dài nét đứt bằng đúng độ dài toàn bộ đường path, sau đó giảm giá trị offset từ toàn bộ chiều dài về 0, nét vẽ sẽ chạy mượt mà từ đầu đến cuối.
Các video phổ biến kiến thức theo phong cách cắt dán giấy (paper cut-out) cũng áp dụng nguyên lý này, chỉ khác là mỗi layer được thay bằng một bức ảnh.
Trên GitHub có một dự án tên là Paper-Cut: trước tiên dùng image model tạo một bức ảnh hoàn chỉnh, tách ảnh thành các layer, sau đó dùng code để làm các layer chuyển động; toàn bộ quy trình hoàn toàn không cần đụng đến video model, nhờ đó tiết kiệm chi phí đáng kể.
6 Animation màu nước: Chồng 40 layer, mỗi layer chỉ 4.5%
Màu nước kỹ thuật số (digital watercolor) là mảng tôi nghiên cứu lâu nhất, nhưng nguyên lý của nó lại thú vị nhất. Đầu tiên, vẽ một đa giác, thêm một chút độ lệch ngẫu nhiên vào trung điểm của mỗi cạnh, rồi lặp lại thao tác này vài lần với các cạnh mới, bạn sẽ có được một hình dạng với đường viền lồi lõm tự nhiên.
Từ cùng một hình dạng, tạo ra hơn 40 phiên bản hơi khác nhau đôi chút, rồi xếp chồng từng lớp lên nhau với độ mờ (opacity) chỉ 4.5% mỗi lớp.
Vùng trung tâm được phủ hàng chục lớp nên màu sẽ đậm; vùng viền mép chỉ có vài lớp nên màu nhạt hơn. Hiệu ứng loang màu nước tự nhiên lập tức xuất hiện.
Thư viện p5.brush đã đóng gói sẵn thuật toán này cùng với các loại cọ vẽ như bút chì, bút dạ (marker), than chì.
Nhóm 3: Bảng viết toán học và lộ trình bản đồ
7 Manim
Manim là thư viện mã nguồn mở do tác giả Grant Sanderson phát triển. Nó coi mọi thứ trên khung hình đều là các đối tượng toán học. Một đường cong là một hàm số, một công thức được LaTeX render thành đường dẫn vector.
Animation thực chất là phép nội suy (interpolation) giữa hai trạng thái: đường cong được vẽ từ điểm đầu đến điểm cuối, các ký hiệu giống nhau trong công thức sẽ lướt sang vị trí mới.
Rất khuyến khích bạn xem bản demo do chính tác giả thực hiện: youtube.com/watch?v=rbu7Zu5X1zI
8 Lộ trình bản đồ: Video thuyết trình nói đến đâu, đường vẽ chạy đến đó
Hiệu ứng này mà dùng video model AI thì cực kỳ khó tinh chỉnh, nhưng dùng code thì ngược lại, rất đơn giản:
- Thu âm lồng tiếng trước, dùng TTS xuất timestamp cho từng câu nói
- Mỗi câu nói tương ứng với một điểm trên lộ trình
- Giữa hai câu nói, tiến trình đường vẽ sẽ di chuyển mượt mà từ điểm trước tới điểm kế tiếp
Có âm thanh trước, dựng khung hình sau. Hình trên chỉ là ảnh minh họa, vị trí các thành phố là do tôi tiện tay đặt vào thôi.
Nếu thực sự muốn làm video du lịch, trải nghiệm di chuyển, bạn phải dùng bản đồ thực tế. Về mảng này, tôi đã từng tự viết một skill tên là map-motion.
Nguyên lý tương tự như đã nói ở trên, chỉ có điều bản đồ nền được thay bằng Gaode Map, lộ trình cũng là đường đi thực tế dành cho ô tô, đi bộ hoặc xe đạp do Gaode tính toán.
Bạn chỉ cần yêu cầu AI viết một file JSON "bảng phân cảnh camera", ghi rõ bắt đầu lao xuống từ đâu, đi đường nào, dừng ở đâu; nó sẽ tự gọi Gaode để phân tích địa danh, lấy lộ trình, tính toán góc máy, sau đó mở Chromium để vẽ từng frame một và cuối cùng bàn giao cho FFmpeg xuất ra định dạng MP4 và GIF.
Chẳng hạn như đoạn mở đầu Vlog thường thấy kiểu "Tôi đang ở đây": góc máy từ Trái Đất lao thẳng xuống Song Lang, Đại Lý, tâm ngắm khóa mục tiêu, các thông số kinh độ - vĩ độ trên bảng tọa độ nhảy liên tục.
Hay như cảnh đạp xe quanh Hồ Thanh Hải: lộ trình được vẽ nối dài từng đoạn, đồng hồ đo quãng đường ở góc trên bên phải tăng dần theo, bên dưới là biểu đồ mặt cắt cao độ (dưới đây là bản xem trước tốc độ 2x):
Repo skill ở đây: SpaceZephyr/map-motion.
Nhóm 4: Video 3D với three.js và Blender
8 three.js
three.js dùng để dựng phối cảnh 3D trên trang web, trong scene chỉ có ba yếu tố: vật thể, ánh sáng và camera. Chìa khóa để làm video chính là camera.
Trước tiên dùng vài điểm nối lại thành một đường cong mượt mà, tại giây thứ t, camera sẽ được đặt tại vị trí tương ứng trên đường cong và hướng góc nhìn về phía trước một chút.
prompt có thể viết theo 3 phần: chủ thể là gì, trong khung hình nên có gì, và những gì không được phép xuất hiện. Ví dụ: "Chủ thể là một chiếc thuyền nhỏ; trong cảnh có biển, hòn đảo, vài cái cây; không được xuất hiện bất kỳ văn bản hay phụ đề nào".
Bạn có thể xem hướng dẫn tại link này: youtube.com/watch?v=58k6PLYnOuI
9 Blender
Để có chất cảm đất sét (claymation) hay những nhân vật 3D thực thụ, bạn vẫn cần đến Blender. Giờ đây bạn không cần phải tự mình học Blender nữa, đã có một plugin tên là Blender MCP cho phép AI thao tác trực tiếp với Blender: thêm một hình cầu, đổi sang chất liệu đất sét nhám mờ, đặt keyframe ở frame thứ 1 và frame thứ 30.
AI còn có thể yêu cầu một ảnh chụp màn hình để xem hình ảnh đã chuẩn chưa rồi mới sửa tiếp. Hướng dẫn: youtube.com/watch?v=Ci9Xc-VPc04
Cuối cùng, nên lựa chọn như thế nào?
Trong các dự án mã nguồn mở được giới thiệu ở trên đều có sẵn skill chính thức. Bạn có thể lưu lại các từ khóa dự án này, để khi mô tả cho model, hãy áp dụng công nghệ tương ứng nhằm tạo hiệu ứng động.
Bạn cũng có thể tìm kiếm theo từ khóa để học hỏi thêm nhiều tài liệu mã nguồn mở.
Nếu chỉ có thể chọn một cái để học trước, lời khuyên của tôi là HyperFrames.
Hệ sinh thái mã nguồn mở của nó phong phú nhất, có vô số skill để dùng, thêm vào đó model viết HTML cũng chuẩn và ổn định nhất; các thư viện như rough.js, p5, three.js đều có thể đưa vào trang web của HyperFrames để cùng render.
Tôi đã tổng hợp bảng dưới đây để bạn dễ dàng lựa chọn công nghệ phù hợp khi làm video.
Tôi là Không Cách, liên tục chia sẻ những suy nghĩ và thực tiễn về sản phẩm AI
Bạn đã từng dùng công cụ viết code làm video nào khác chưa? Hãy chia sẻ ở phần bình luận nhé. Nếu thấy hữu ích, hãy like và share để ủng hộ tôi nhé.
Học tương tác với AI (NotebookLM)
Ngoài đọc , bạn có thể nghe , xem và xem hoạ thông tin ở đầu bài. Bài này còn có bộ công cụ tương tác do AI tạo: Bài kiểm tra trắc nghiệm, Thẻ ghi nhớ, Sơ đồ tư duy, Bản trình bày và Báo cáo chuyên sâu.
Mở không gian học tương tác