Rick and Morty SDF animasyon programlama

 (danielchasehooper.com)
2 puan yazan GN⁺ 2025-02-08 | 1 yorum | WhatsApp'ta paylaş

Shader programlamayı öğrenmek

  • Rick ve Morty animasyonu üretimi: Bu animasyon 240 satır kodla oluşturuldu ve kütüphane ya da görsel kullanmadan, GPU shader'ları ve signed distance field kullanarak video, video oyunu veya eğlence amaçlı animasyonların nasıl yapılacağını anlatıyor.
  • Canlı kodlama editörü: Sayfaya gömülü canlı kodlama editörü üzerinden örnekleri çalıştırıp değiştirebilirsiniz.

Shader temelleri

  • GLSL kullanımı: Kod, OpenGL Shading Language (GLSL) ile yazılmış ve her piksel için GPU üzerinde çalışan color_for_pixel fonksiyonunu gerektiriyor.
  • Piksel rengini belirleme: Zamana göre pikselin rengini belirleyen fonksiyon, animasyon üretiminin temelini oluşturuyor.

Temel şekiller çizmek

  • Daire çizmek: Pikselin merkezden olan uzaklığını görselleştirerek daire çizebilirsiniz.
  • Signed distance field (SDF): Şeklin içindeki mesafe negatif, dışındaki ise pozitif gösterilerek çeşitli efektler verilebilir.

Çeşitli şekil fonksiyonları

  • Bezier eğrileri, yıldızlar, yuvarlatılmış dikdörtgenler: Çeşitli SDF fonksiyonları kullanılarak daha karmaşık şekiller çizilebilir.

Rick'i çizmek

  • Yüzü yeniden oluşturmak: Rick'in yüzünü kodla yeniden oluşturmak için çok sayıda deneme-yanılma yapıldı ve doğruluğu artırmak için referans görseller kullanıldı.
  • Kontur eklemek: Signed distance fonksiyonları kullanılarak şekillerin konturları çizilebilir.

Şekilleri birleştirme ve yansıtma

  • Şekil birleştirme: İki şekli birleştirip kontur çizerken min() fonksiyonu kullanılır.
  • Yansıtma: abs() fonksiyonu kullanılarak şekiller bir eksene göre simetrik hale getirilebilir.

İleri teknikler

  • Domain warping: Piksel konumlarına rastgele ofset ekleyerek şekiller bozulabilir.
  • Animasyon efektleri: Domain warping animasyonlu hale getirilerek özgün görsel efektler oluşturulabilir.

Sonsuz diş çizmek

  • Parabol kullanımı: Diş şeklini çizmek için paraboller kullanılabilir ve birden fazla diş çizerken kod tekrarından kaçınılabilir.

Bu yazı, shader programlama yoluyla karmaşık animasyonların nasıl oluşturulacağını anlatıyor ve çeşitli teknikler ile araçlar kullanarak yaratıcı sonuçlar elde edilebileceğini gösteriyor.

İlgili okumalar

1 yorum

 
GN⁺ 2025-02-08
Hacker News görüşleri

  • Gerçekten harika bir çalışma ve mükemmel bir yazı. SDF'de pürüzsüz anti-aliasing için aastep kullanmak iyi olur

  • Shader geliştirme gerçekten bambaşka bir seviye. Kayan noktalı değerleri değiştirip sonucu anında görmek çok tatmin edici

  • Çok iyi bir yazı. Inigo Quilez'in ilgili YouTube oynatma listesi tavsiye edilir

  • İşin kalitesi, anlatımın kalitesi ve okura sunduğu meydan okuma üst düzey. Paylaştığın için teşekkürler

  • GLSL için çok iyi yapılandırılmış bir girişti. Vulkan ya da WebGPU/WebGL tarafında nasıl olduğunu merak ediyorum

  • Bu animasyonu 8 ayda tamamlamış olmak inanılmaz bir sabrı yansıtıyor

  • Geliştirme sürecinde ondalık değerleri ince ayarlayarak tekrar tekrar denemeler mi yaptı, yoksa belirli bir editör mü kullandı merak ediyorum. 240 satır boyunca uygun ondalık değerleri bulma süreci zaman alıcı olabilir

  • Sayfanın tamamlanmışlık düzeyi şaşırtıcı derecede yüksek

  • Shader programlama bambaşka bir seviye. Animasyon yapımına giren emek ve ayrıntılara gösterilen özen etkileyici. Geleneksel geliştirmeye göre çok daha fazla el emeği gerektiriyor

  • Bu çalışmanın ne kadar etkileyici olduğunu ifade etmek zor