holodepth

Babylon.js · Animasyon

Keyframe animation: zaman çizgisinde örnekleme

Anahtar kare, bir özelliğin belirli bir zaman damgasında alması gereken değeri sabitler — ara zamanlardaki değer ise motor tarafından interpolasyon ile üretilir. Bu sayfa Babylon.js dünyasında bu düşüncenin sahne grafiğine nasıl bağlandığını ve üç yaygın tuzak (dönüş izi, zaman birimi, döngü sınırı) üzerinden okunmasını verir.

Holodepth Three.js tarafında aynı kavram çoğu zaman KeyframeTrack ve AnimationClip ile anlatılır; burada özellik hedefi, iz ( track) ve oynatıcı zamanı aynı matematikle ama Babylon.js yaşam döngüsünde ele alınır — «hangi sınıfın adı ne» ezberinden çok veri şekli önemlidir.

Özet: dört sabitleme

Ne? Soru Belirti
Hedef Hangi düğüm, hangi özellik? Pozisyon oynar, ölçek sabit kalır — ya da tersi.
Zaman birimi Kare mi, saniye mi, normalize mi? «Çok hızlı / çok yavaş» sabit saniye beklenirken.
İnterpolasyon İki anahtar arası nasıl «yumuşar»? Mekanik köşe veya süzülme fazla.
Dönüş Euler mi, dörtlü mü? Gimbal sıçraması, beklenmedik eksen.

Anahtar kare ve zaman parametresi

Her anahtar kaydı tipik olarak (zaman, değer) çiftiyle gelir; oynatıcı çalışırken güncel parametre t, zaman çizelgesinde iki komşu anahtarın arasına düşer ve motor bu aralıkta ara değeri üretir. Burada kritik olan değerin biçiminden önce zamanın biriminin tutarlı olmasıdır: aynı klip içinde bir izi saniye, diğerini kare indeksi, üçüncüsünü [0, 1] normalize süre ile ölçmek «bir saniye sürdü sanıp aslında bir kare oynadı» gibi sapmalara yol açar. Dışa aktarılan dosyada farklı birim geliyorsa içe aktarımda tek birimde normalize edin; bu bölüm izlerin hedef düğümünü (bölüm 2) veya eğri türünü (bölüm 3) ele almaz.

İz, hedef düğüm ve özellik yolu

Bir klibi «tek sayı akışı» gibi düşünmek yanıltıcıdır; motor çoğu zaman özellik başına bir iz ( track) saklar. Konum için üç skaler veya vektör izi, ölçek için üç bileşen, dönüş için dörtlü ( quaternion) veya Euler açıları ayrı kanallar olabilir. Aynı hedef düğüme bağlı izler bile farklı anahtar zamanları taşıyabilir; hepsini aynı saniyede «snap»lemek tasarım kolaylığı, farklı fazlarda tutmak ise ince kontrol gerektirir — ikisi de geçerli, yeter ki dışa aktarım ve oynatıcı aynı varsayımla okusun. Bu bölüm iki anahtar arasında değerin nasıl yumuşadığını (bölüm 3) veya döngü modunu (bölüm 4) tanımlamaz; yalnızca hedef özellik yolu ve iz ayrımını sabitler.

Dönüş izi için kısa uyarı

Euler ile anahtarlama editörde sezgisel olsa da ara karelerde gimbal kilidi ve eksen sıçraması riski taşır; uzun dönüşlerde dörtlü izi tercih eden ekipler yaygındır. Bir karar verildiyse sahne genelinde ve içe aktarımda aynı temsile sadık kalın; bir izde Euler, komşu izde dörtlü «karışımı» iç içe dönüştürücülerde özellikle kaçının — interpolasyon modu (bölüm 3) seçiminizi görsel olarak maskeleyebilir fakat matematiksel tutarsızlığı silmez.

İnterpolasyon: doğrusal, eğri, süreklilik

Aynı anahtar kümesiyle bile ara yol tamamen interpolasyon seçimine bağlıdır: iki uç arasında düz çizgi ( linear) en öngörülebilir maliyetli yoldur; eğri ( spline) ise kontrol noktaları ve teğetlerle daha süzülür bir yörünge verir, fakat özellikle konumda «kameranın nereden geçtiği» konusunda daha az doğrudan denetim sunar. Teğet ( tangent) sürekliliği zayıfsa hız vektöründe köşe veya ani sıçrama görürsünüz; bu noktada animasyon matematiği grafik düzenleyicide eğri yumuşatmaya yaklaşır. Bu bölüm zaman birimini (bölüm 1) veya oynatıcının döngü haritalamasını (bölüm 4) değiştirmez; yalnızca iki anahtar arası ara örnekleme sözleşmesidir.

Oynatma: döngü, yön ve hız ölçeği

Anahtar tablosu «bir kez oynat» diye sabitlenmez; klibin süresi dolduğunda ne olacağı oynatma katmanında çözülür: sürekli tekrar ( loop), son karede durma ( clamp), ileri-geri ( ping-pong) gibi. Bu seçenekler ham anahtarları değiştirmez; yalnızca oynatıcı zamanını klip aralığına nasıl geri saracağınızı veya sınırlayacağınızı değiştirir. Hız ölçeği ( speed) tek bir çarpanla süreyi uzatıp kısaltır — tasarım iterasyonunda klibi yeniden export etmeden ritim ayarı yapmanızı sağlar. Bu bölüm izlerin hedef yolunu (bölüm 2) veya spline teğetlerini (bölüm 3) ele almaz.

  • Zaman kaynağı: oynatıcıdaki t değişimini sahne döngüsündeki delta ile aynı mantıkta ilerletin; sabit kare varsayımı ile gerçek süre karışırsa hem oyun mantığı hem animasyon kayar ( Render loop).
  • Senkron: aynı karaktere bağlı birden fazla klip veya iz varsa hız çarpanı ve döngü modunu paylaşıp paylaşmayacağınızı baştan seçin; biri loop iken diğeri clamp kalmak ayak sesi ile üst gövde arasında ince desenkron üretir.

İçeriden üretim ve dış kaynak klibi

Anahtarları çalışma anında kodla üretmek ile glTF / FBX dosyasından okunan klibi oynatmak, oyun tarafında aynı soyutlamada buluşur: hedef düğüm, iz listesi ve zaman ilerlemesi. Fark yalnızca verinin nerede üretildiği ve hangi araçların anahtarları yuvarladığıdır. Dış dosyada en sık görülen tuzaklar: zaman ölçeğinin beklenenden 100× hızlı olması, eksen el değişimi ( coordinate frame) yüzünden «yere gömülü» veya ters dönük oynatma, birim ölçeğinin sahne köküyle çarpışmasıdır. Bu yüzden içe aktarımı Asset loading ve sahne ölçeği doğrulamasıyla birlikte yürütün; bu bölüm interpolasyon eğrisi (bölüm 3) veya döngü politikası (bölüm 4) ayrıntısına girmez.

Three.js ile üst üste okuma

Çakışmayı önleyen çerçeve

Three.js tarafında AnimationClip ve KeyframeTrack kalıbı, zamanı ilerleten AnimationMixer ile birlikte anlatılır. Babylon.js’te sınıf adları ve sahne bağlama API’si farklı olsa da taşımanız gereken zihinsel paket aynıdır: klip süresi → hedefe bağlı izler → oynatıcı zamanı ve döngü politikası. Önceki bölümler bu paketin parçalarını ayrı ayrı sabitler; kütüphane değişince tek tek API eşlemesi yapılır, soru listesi değişmez. Hangi motorda olursanız olun «hangi özellik, hangi anahtarlarla, hangi t kuralıyla gidiyor?» yanıtını tek cümlede yazabilmek entegrasyonun sınavıdır.

Sıradaki: iskelet ve kılıf

Özellik izleri ve oynatma soyutlaması netleştikten sonra aynı klibi kemiklere bağlamak için Skeleton animation sayfasına geçebilirsiniz. Önceki adım: Animation state machine.