Pemrograman Animasi SDF Rick and Morty

 (danielchasehooper.com)
2 poin oleh GN⁺ 2025-02-08 | 1 komentar | Bagikan ke WhatsApp

Belajar pemrograman shader

  • Membuat animasi Rick dan Morty: Animasi ini dibuat dengan 240 baris kode, dan menjelaskan cara membuat animasi untuk video, video game, atau sekadar bersenang-senang dengan menggunakan shader GPU dan signed distance field tanpa library atau gambar.
  • Editor live coding: Contoh dapat dijalankan dan dimodifikasi melalui editor live coding yang tertanam di halaman.

Dasar-dasar shader

  • Menggunakan GLSL: Kodenya ditulis dalam OpenGL Shading Language (GLSL), dan memerlukan fungsi color_for_pixel yang dijalankan di GPU untuk setiap piksel.
  • Menentukan warna piksel: Fungsi yang menentukan warna piksel seiring waktu adalah inti dari pembuatan animasi.

Menggambar bentuk dasar

  • Menggambar lingkaran: Lingkaran dapat digambar dengan memvisualisasikan jarak dari pusat piksel.
  • Signed distance field (SDF): Jarak di dalam bentuk dinyatakan negatif, sedangkan di luar bernilai positif, sehingga dapat menghasilkan berbagai efek.

Beragam fungsi bentuk

  • Kurva Bezier, bintang, persegi panjang membulat: Berbagai bentuk kompleks dapat digambar menggunakan bermacam fungsi SDF.

Menggambar Rick

  • Merekreasi wajah: Untuk merekreasikan wajah Rick dalam kode, diperlukan banyak percobaan dan kesalahan, serta penggunaan gambar referensi untuk meningkatkan akurasi.
  • Menambahkan outline: Fungsi signed distance dapat digunakan untuk menggambar outline bentuk.

Menggabungkan dan mencerminkan bentuk

  • Menggabungkan bentuk: Saat menggabungkan dua bentuk untuk menggambar outline, digunakan fungsi min().
  • Pencerminan: Fungsi abs() dapat digunakan untuk membuat bentuk simetris terhadap suatu sumbu.

Teknik lanjutan

  • Distorsi domain: Bentuk dapat didistorsi dengan memberi offset acak pada posisi piksel.
  • Efek animasi: Distorsi domain dapat dianimasikan untuk menciptakan efek visual yang unik.

Menggambar gigi tak terbatas

  • Menggunakan parabola: Bentuk gigi dapat digambar dengan parabola, dan ini membantu menghindari duplikasi kode saat menggambar banyak gigi.

Tulisan ini menjelaskan cara membuat animasi kompleks melalui pemrograman shader, serta menunjukkan bahwa hasil kreatif dapat diperoleh dengan memanfaatkan berbagai teknik dan alat.

Bacaan terkait

1 komentar

 
GN⁺ 2025-02-08
Pendapat Hacker News

  • Karya yang sangat keren dan postingan yang luar biasa. Untuk anti-aliasing yang halus pada SDF, ada baiknya menggunakan aastep

  • Pengembangan shader benar-benar berada di level yang berbeda. Proses mengubah nilai floating-point dan langsung melihat hasilnya sangat memuaskan

  • Postingan yang sangat bagus. Merekomendasikan playlist YouTube terkait dari Inigo Quilez

  • Kualitas karya, kualitas penjelasan, dan tantangan yang diberikan kepada pembaca semuanya berada di tingkat tertinggi. Terima kasih sudah membagikannya

  • Ini adalah pengantar GLSL yang sangat terstruktur dengan baik. Saya penasaran bagaimana penerapannya di Vulkan atau WebGPU/WebGL

  • Menyelesaikan animasi ini selama 8 bulan mencerminkan kesabaran yang luar biasa

  • Saya penasaran apakah selama proses pengembangan ada pekerjaan berulang untuk menyesuaikan nilai desimal, atau editor apa yang digunakan. Proses menemukan nilai desimal yang tepat untuk 240 baris bisa memakan banyak waktu

  • Tingkat penyelesaian halamannya sangat mengagumkan

  • Pemrograman shader memang berada di level yang berbeda. Upaya dan perhatian terhadap detail yang dibutuhkan untuk membuat animasi ini sungguh mengejutkan. Jauh lebih banyak kerja manual dibandingkan pengembangan tradisional

  • Sulit mengungkapkan betapa mengesankannya karya ini