Lập trình hoạt hình SDF của Rick and Morty

 (danielchasehooper.com)
2 điểm bởi GN⁺ 2025-02-08 | 1 bình luận | Chia sẻ qua WhatsApp

Học lập trình shader

  • Tạo hoạt hình Rick và Morty: Hoạt hình này được tạo bằng 240 dòng mã, giải thích cách tạo hoạt hình cho video, trò chơi điện tử hoặc mục đích giải trí bằng shader GPU và signed distance field mà không cần thư viện hay hình ảnh.
  • Trình soạn thảo live coding: Có thể chạy và chỉnh sửa ví dụ thông qua trình soạn thảo live coding được nhúng trong trang.

Cơ bản về shader

  • Sử dụng GLSL: Mã được viết bằng OpenGL Shading Language (GLSL), cần có hàm color_for_pixel chạy trên GPU cho từng pixel.
  • Xác định màu pixel: Hàm quyết định màu của pixel theo thời gian là cốt lõi của việc tạo hoạt hình.

Vẽ các hình cơ bản

  • Vẽ hình tròn: Có thể vẽ hình tròn bằng cách trực quan hóa khoảng cách từ tâm pixel.
  • Signed distance field (SDF): Khoảng cách bên trong hình được biểu thị bằng giá trị âm, bên ngoài là giá trị dương, từ đó có thể tạo ra nhiều hiệu ứng khác nhau.

Các hàm hình dạng đa dạng

  • Đường cong Bézier, ngôi sao, hình chữ nhật bo góc: Có thể vẽ các hình phức tạp bằng nhiều hàm SDF khác nhau.

Vẽ Rick

  • Tái hiện khuôn mặt: Đã trải qua nhiều lần thử và sai để tái hiện khuôn mặt Rick bằng mã, đồng thời dùng ảnh tham chiếu để tăng độ chính xác.
  • Thêm đường viền: Có thể vẽ đường viền của hình bằng hàm signed distance.

Kết hợp và đối xứng hình dạng

  • Kết hợp hình dạng: Khi kết hợp hai hình để vẽ đường viền, sử dụng hàm min().
  • Đối xứng: Có thể làm hình đối xứng theo một trục bằng abs().

Kỹ thuật nâng cao

  • Domain warping: Có thể làm biến dạng hình bằng cách offset ngẫu nhiên vị trí pixel.
  • Hiệu ứng hoạt hình: Có thể tạo hiệu ứng thị giác độc đáo bằng cách hoạt họa domain warping.

Vẽ hàm răng vô hạn

  • Sử dụng parabol: Có thể dùng parabol để vẽ hình răng, đồng thời tránh lặp mã khi vẽ nhiều chiếc răng.

Bài viết này giải thích cách tạo hoạt hình phức tạp thông qua lập trình shader, đồng thời cho thấy có thể tạo ra các kết quả sáng tạo bằng cách tận dụng nhiều kỹ thuật và công cụ khác nhau.

Bài viết liên quan

1 bình luận

 
GN⁺ 2025-02-08
Ý kiến trên Hacker News

  • Bài làm thật sự rất ấn tượng và bài viết cũng rất xuất sắc. Với SDF, có thể dùng aastep để có anti-aliasing mượt mà

  • Phát triển shader thật sự ở một đẳng cấp khác. Quá trình thay đổi các giá trị dấu chấm động và xem kết quả ngay lập tức mang lại cảm giác rất thỏa mãn

  • Bài viết rất hay. Khuyên xem playlist YouTube liên quan của Inigo Quilez

  • Chất lượng của tác phẩm, chất lượng phần giải thích và thử thách dành cho người đọc đều ở mức hàng đầu. Cảm ơn vì đã chia sẻ

  • Đây là phần giới thiệu về GLSL được cấu trúc rất tốt. Không biết trên Vulkan hay WebGPU/WebGL thì sẽ như thế nào

  • Việc hoàn thành hoạt hình này trong suốt 8 tháng phản ánh một mức độ kiên nhẫn phi thường

  • Không biết trong quá trình phát triển có lặp đi lặp lại việc tinh chỉnh các giá trị thập phân hay không, hoặc đã dùng trình soạn thảo nào. Quá trình tìm ra các giá trị thập phân phù hợp cho 240 dòng có thể rất tốn thời gian

  • Mức độ trau chuốt của trang này thật đáng kinh ngạc

  • Lập trình shader đúng là ở một đẳng cấp khác. Công sức bỏ vào để tạo ra hoạt hình và sự chú ý đến từng chi tiết thật đáng kinh ngạc. Nó đòi hỏi nhiều thao tác thủ công hơn rất nhiều so với phát triển truyền thống

  • Thật khó để diễn tả mức độ ấn tượng của tác phẩm này