Balinaya yüzmeyi öğretmek

Dene →

Bir arka plan animasyonunun, ölü bir maketten canlı bir hayvana dönüşme hikâyesi.

things.com.tr'nin arka planında bir kambur balina yüzüyor. Başta model iyi, ışık iyi, scroll'la dalıp çıkıyor... Harika. Teknik olarak her şey çalışıyor gibi gözüküyor...

Bir akşam Apple TV'nin o meşhur ekran koruyucusu takıldı gözüme: gerçek bir kambur balinanın videosu. Sonra bizim siteyi açtım. Aradaki fark utanç verici, bizimki yüzmüyor, havayla şişirilmiş bir oyuncak gibi, suyun içinde bir yerden bir yere taşınıyordu.

Aşağıdaki notlarım o farkı kapatma denemesinin kaydı. İşe yarayan var, yaramayan var. Bilgisayarı ısırasım geldiği doğrudur.

Teşhis: üç ayrı yalan

Balinanın cansızlığı tek bir sorun değil. Üç ayrı sorunun tam ortasında duruyoruz.

Birincisi materyal. Modelin .glb dosyasını açıp parse ettiğimde specular değerinin [2, 2, 2] olarak geldiğini gördüm. Fiziksel tavan 1.0. Yani model, ışığı fizik kurallarının izin verdiğinin iki katı yansıtıyor. Ne demek istiyorum? Islak deri değil, vinil. Balon. Tek satırlık düzeltme, ama "oyuncak" hissinin görsel yarısı buradan geliyordu.

İkincisi ışık: Bu daha sinsi... Balinanın gövdesi bir vertex shader ile bükülüyordu: omurga kıvrılıyor, kuyruk vuruyor, her şey doğru. Ama normaller güncellenmiyordu. Yani gövde bükülüyor, üzerindeki ışık olduğu yerde duruyordu.

Göz bunu yakalar. Formu değişen ama gölgelemesi değişmeyen bir yüzeyi beyin "katı, gergin bir kabuk" olarak okur. Tam olarak: şişirilmiş balon.

Üçüncüsü de hareketin kendisi. En zoru.

"Bu balina değil, suya bırakılmış bir odun"

Dalışa geçişi izlerken şunu fark ettim: balina suya batıyor. Bir kütük gibi, yerçekimiyle, pasif.

Oysa izlediğim videodaki balina dalışında en güçlü kuyruk vuruşlarını dalışın başında yapıyordu. Hayvan kendini aşağı iter. İtki olmayınca geriye tek görüntü kalıyor: yerçekimiyle batan cisim.

Ama asıl mesele daha derindi: hareketimiz pozisyon güdümlüydü. Scroll bir hedef pozisyon veriyor, gövde oraya yumuşatılarak gidiyordu. Gerçekte ise sıralama ters: önce vuruş olur, sonra gövde ivmelenir. Bende ne sebep-sonuç yok, sadece sonuç vardı.

Çözüm, kuyruk vuruşunu zamana bağlamak ve gövdenin takip hızını da buna bağlamaktı. Kuyruk vurduğu an gövde hedefe daha hızlı kapanıyor, vuruş sönünce süzülme durumuna dönüyor.

Anladım ki canlılık, nedensellikte saklıymış.

Boynu olmayan hayvan

Harekete başlangıcı düzelttikten sonra yeni bir şey rahatsız etmeye başladı: "balina boyunsuz gibi."

Deformasyon zinciri gecikmeyi gövde boyunca dağıtıyordu ama başta gecikme sıfırdı; kafa, scroll'a kilitliydi. Tek parça dökülmüş bir heykel gibi.

İki şey ekledim. Biri, baş ile gövde arasına yumuşak bir menteşe: kafatası sert bir blok olarak kalıyor ama hemen arkasında görünür bir eklem var. Diğeri daha ince: başa kendi mikro gecikmesini vermek. Baş bölgesi, omurga izini kendi istasyonundan değil biraz gerisinden taşıyor. Gövde hareket ettiğinde kafa bir tık geç takip ediyor.

Boyun, o bir tık gecikmenin kendisiymiş.

Öteleme değil, dönüş

Yükselişte balinanın başını kaldırmak gerekti. Ben de kaldırdım: değeri artırdım, biraz daha artırdım.

"Boynu yukarı baktırmıyorsun, burnunu uzatıyorsun."

Oysa "yukarı bakmak" bir dönüştür (rotate). Öteleme, vertex'leri birbirinden uzaklaştırdığı için burnu sündürüyordu. Ne kadar artırsam o kadar çok sünüyordu, çünkü yanlış işlemi daha çok yapıyordum.

Problemi büyüterek çözmeye çalışırken, aslında yanlış problemi çözmeye kalkıyordum.

Reddedilenler

Dört deneme çöpe gitti ve hepsinin kendi dersi var.

Yaw dönüşü. "Balina dalarken kendi ekseni etrafında dönse?" diye düşündüm. Onu dikey eksende çevirdim; balina yüzüyormuş gibi değil, bir tepsi gibi döndü. Gelen düzeltme netti: "sen yaw axis yapıyorsun, ben roll axis istiyorum. Longitudinal yani."

Tonneau (uçak gibi...). Doğru eksende, ama zamana bağlı. Mekanik durdu.

Scroll'a duyarlı rol. Daha iyi, ama hâlâ yanlış: balina rijit bir bütün olarak dönüyordu. Görüntünün tarifi şu: "yatakta yuvarlanıyormuş gibi." Videoda balina omurgası boyunca bükülerek dönüyor: önce yüzgeç yatar, baş takip eder, torsiyon dalgası kuyruğa doğru ilerler. Kütük gibi değil.

Dalış ve çıkışlarda daha az hata göstermek için acaba balinayı sahnenin dışına çıkarıp geri mi soksam? En iddialısı: balina dalarken ekranın sağından çıkacak, bir alt bölümde sol tarafını göstererek geri girecekti. Böylece 180 derecelik dönüşü hiç göstermeyip fiziği de çok zorlamayacaktım. Kâğıt üzerinde zarif. Scroll down ok, scroll up? Balina geri yüzüyor... Cardigans sizin için söylüyor.. Erase/Rewind...

Dördünde de ortak nokta şu: hareketi dışarıdan dayatmaya çalışınca işe yarayan düzeltmelerin hepsi ise parçalar arasındaki ilişkiyi değiştiriyor: gecikme, faz farkı, karşı hareket.

Son dokunuş: senkronu bozmak

Kuyruk ritmini gerçek bir kamburun temposuna uydurmaya çalışıp üstüne itiş-süzülme ekleyince biraz yüzme karakteri oturmaya başladı.

Sonra yüzgeçler aktif hale geldi. Harekete başlama anında yüzgeçler kuyruğun tersine süpürüyor: kalkışı yüzgeçler başlatıyor, kuyruk devralıyor. Bu da güzel.

Ve en son, en küçük, en etkili düzeltme:

"Yüzgeçle kollar senkron sallanmasın, çırpınıyor gibi duruyor.."

Yarım vuruş geriden, daha küçük..

Tek satır. Ama balina o satırdan sonra bir mekanizma olmaktan çıkıp canlanmaya başladı.

Geriye kalan

Bu sistemde hiçbir yerde "yüzme animasyonu" yok. Döngü yok, bake edilmiş klip yok, iskelet yok.

Gövde, kesitlerden oluşan bir zincir olarak düşünülüyor: burun şu an nerede ise, arkasındaki her istasyon burnun bir an önce bulunduğu yerde. Ne kadar geride, o kadar eski. Dalga dediğimiz şey, hayvanın kendi hareketinin izi.

Scroll durduğunda balina donmuyor, süzülmeye geçiyor. Yön değiştirdiğinde gövde bir S çiziyor, çünkü eski hareket hâlâ kuyrukta yolda.

Öğrendiğim şey şu: bir şeyin canlı görünmesi, ona ne kadar detay eklediğinle değil, parçalarının birbirine nasıl tepki verdiğiyle ilgili. Gecikme, karşı hareket, faz farkı.

Balina baştaki aynı balina. Artık yüzüyor. Ama mükemmel mi? Kesinlikle değil.

---

Masaüstündeki oyun alanında balinanın fiziğini kendin kurcalayabilirsin: dalış duruşu, salınım, kuyruk kazancı, menteşe noktaları. Yazıdaki dört düzeltmeyi tek tek kapatıp balinanın nasıl yeniden oyuncağa döndüğünü görebilirsin.