holodepth

Three.js · glTF pipeline · Karakter

Esnek geometri: Skinning system (deri giydirme)

Statik bir gövdeyi döndürmek kolaydır; bir insanın kolu büküldüğünde dirsek çevresindeki yüzeyin gerçekçi biçimde katlanması gerekir. Skinning, iskeleti oluşturan kemiklerin (bones), model yüzeyindeki köşe noktalarını (vertices) nasıl ve ne kadar etkileyeceğini yöneten sistemdir.

glTF ile gelen karakterlerde bu veri çoğu zaman hazır gelir; anlamanız gereken şey, deformasyonun nerede tanımlandığı (ağırlıklar, bind) ve nerede işlendiği (GPU) yönüdür. Önceki konuda AnimationClip kemikleri hareket ettiriyordu; bu sayfada o hareketin mesh yüzey geometrisine nasıl yansıdığını netleştiriyoruz. Sahne grafiği kuralları Scene graph sayfasında; burada yalnızca deformasyon katmanına odaklanıyoruz.

Önce okuyun: Animation clips, Node hiyerarşisi, Attributes & buffers.

Aşağıdaki lab, Animation clips sayfasıyla aynı yerel Soldier.glb dosyasını kullanır: üst kol kemiğini döndürünce SkinnedMesh yüzeyinin nasıl büküldüğünü görürsünüz. «Skinning kapalı» modunda aynı geometri statik (bind pozu) çizilir — kemik döner ama yüzey takip etmez; bu, ağırlıkların GPU’da devreye girmesi farkını tek sahneye indirger.

Skinning lab · Soldier.glb · Three.js r170 Yükleniyor…

Model kullanım notu

Bu üç boyutlu model harici bir kaynaktan (Three.js resmi örnek deposu, yerel kopya) temin edilmiştir; yalnızca bu sayfadaki konuyu anlatmak için kullanılmaktadır. Hak sahibi veya yetkili bir merci tarafından kaldırılması veya düzeltilmesi talep edilirse talep makul süre ve usule uygun şekilde değerlendirilip gereği yapılabilir.

Nasıl okunur: Önce skinning açıkken kol kaydırıcısını oynatın — dirsek çevresindeki geometrinin yumuşakça takip ettiğini görün. Aynı açıda skinning kapalı yapın: iskelet (çizgileri açarak) dönmeye devam ederken gövde «donmuş» kalır; bu, vertex ağırlıkları olmadan aynı ağın neden «robot gibi» kaldığını gösterir. Animation clips ile aynı model kullanıldığı için iki konu arasında süreklilik vardır.

SkinnedMesh: canlı geometri

Three.js’te sert bir gövde için Mesh yeterlidir; kemikle bükülen yüzeylerde ise SkinnedMesh kullanılır. Bu yapı, iskelet dönüşümlerini GPU’ya taşıyarak üçgen ağının gerçek zamanlı deforme edilmesini sağlar. Canlı deformasyon için skinning labına bakın.

Skeleton

Skeleton, kemik referanslarını (bones) ve bağ pozuna ait ters matrisleri (bone inverses) bir arada tutar; böylece SkinnedMesh hangi veriyi shader’a göndereceğini bilir.

Bones

Her kemik sahne grafiğinde bir Object3D düğümüdür: ebeveynin dönüşümü çocuklara yürür; yüzeydeki köşeler ise ağırlık listesine göre ilgili kemiklerin birleşik etkisini alır. Kemik ağacını isimle aramak için düğüm adlandırma pratiği burada da geçerlidir.

Vertex weights (köşe ağırlıkları)

Deri üzerindeki her nokta tek bir kemiğe bağlı değildir. Dirsek gibi eklem bölgelerinde bir vertex, hem üst kol hem alt kol kemiklerinden pay alır; bu paylar ağırlık olarak saklanır. Bu öznitelikler geometri tarafında tutulur; buffer kavramı için attributes sayfasına bakın.

Ağırlık (weight)

Köşe başına, hangi kemiklerin devreye gireceğini ve paylarını tanımlar. Dışa aktarımda bu paylar çoğu zaman etkili kemik kümesinde toplama göre normalize edilir; shader da aynı köşe için birden fazla dönüşümü buna göre karıştırır.

Etki

Eklem yakınında köşe, bağlı olduğu kemiklerin dönüşümlerinin ağırlıklı birleşimini izler; geçiş yumuşaktır. Ağırlık boşlukları veya hatalı atamalar ise eklemde «yırtılma», yüzeyde ise «çökme» gibi görsel kusurlara dönüşür.

Bind matrix ve pose

İskelet modele bağlandığında (bind) genellikle T-pose, A-pose veya stüdyonuzun standart bir duruşu referans alınır. Bu referans, sonradan gelen animasyonların tutarlı görünmesi için kritiktir.

Bind / inverse bind

Bağ anındaki kemik uzayı, sonradan «şimdi kemik nereye gitti?» sorusunu yanıtlamak için referans alınır. Uygulamada çoğu zaman inverse bind matrix olarak saklanan bu bilgi, mevcut kemik matrisleriyle çarpılarak köşeyi doğru yere taşır.

Deformasyon

Kare başına, köşe önce bağ referansına göre kemik uzayına alınır, güncel kemik dönüşümleriyle birleştirilir; sonuç, statik ağın animasyonlu yüzeye dönüşmesidir.

GPU skinning ve CPU skinning

Modern WebGL yığınında ciltleme çoğunlukla vertex shader içinde yapılır: kemik matrisleri uniform olarak gelir, her köşe kendi ağırlıklarına göre dönüştürülür.

Performans: binlerce köşeyi her karede CPU’da yeniden yazmak pahalıdır; GPU bu işi paralel yürüterek 60+ FPS hedefini sürdürülebilir kılar. Üretimde CPU yolu genelde özel araçlar veya hata ayıklama senaryoları içindir.

JavaScript teknik örneği

glTF yükleyicisi çoğu alanı sizin için doldurur; aşağıdaki parça, sahneyi dolaşıp SkinnedMesh bulmak ve kemiklere müdahale etmek için bir başlangıç iskeletidir. Kemik adları ('Neck' gibi) dışa aktarma ayarınıza göre değişir. Klibi oynatma ve mixer.update akışı animasyon klipleri bölümündeki örnekle birleştirilir — burada yalnızca iskelet erişimini gösteriyoruz. 

// Örnek: gltf GLTFLoader ile yüklendikten sonra
gltf.scene.traverse((node) => {
  if (node.isSkinnedMesh) {
    const { skeleton } = node;
    console.log(skeleton.bones); // İskelet listesi

    // Bind / rest poza ilişkin senaryolarda skeleton.pose() kullanılabilir
    skeleton.pose();
  }
});

// Örnek: isme göre kemik (SkinnedMesh üzerinden)
const skinnedMesh = /* ... bir SkinnedMesh referansı ... */;
const skeleton = skinnedMesh.skeleton;
const neckBone = skeleton.getBoneByName('Neck');
if (neckBone) {
  neckBone.rotation.x = Math.PI / 8;
}

Teknik sınır: kemik limiti

WebGL profiline bağlı olarak, bir geçiş programına aynı anda gönderilebilecek kemik matrisi sayısı sınırlıdır; GPU tarafında başka kaynaklarla birlikte düşünülen bir «paylaşılan bütçe» gibidir — doku tarafındaki birim limitiyle aynı değildir ama aynı verimsiz büyüme riskini paylaşır; özet için texture unit bütçesi sayfasına paralel okuyabilirsiniz.

Risk: aşırı detaylı iskelet (parmak eklemleri, yüz rig’i vb.) düşük donanımlarda parçalanmış mesh’lere, düşük kaliteye veya üst sınırı aşan shader derlemelerine yol açabilir.

Çözüm: kemik sayısını makul tutmak, gerektiğinde rig’i basitleştirmek veya ileri senaryolarda kemik matrislerini dokuya yazan texture skinning gibi tekniklere yönelmek.

HoloDepth «Skinning» checkpoint’i

Özet

Skinning, klibi sahneye taşıyan «ara katmandır»: AnimationClip kemikleri hareket ettirir; inandırıcılığı ise doğru ağırlıklar ve bağ referansı verir. Bu ikisi zayıfsa hareket doğru görünse bile yüzey yine güven vermez.

glTF pipeline bu sayfada tamamlanır; omurgayı baştan gözden geçirmek için Scene graph sayfasına dönebilirsiniz.

HoloDepth özet stratejisi

  • Ağırlık kontrolü: Yırtılma veya çökme görüyorsanız, Blender vb. ortamda weight paint ve kemik atamalarını gözden geçirin.
  • T-pose referansı: Modeli standart bir pozda bind edin; aksi halde animasyonlar yamuk veya kısa gelebilir.
  • İskelet hiyerarşisi: Ebeveyn–çocuk zinciri doğru kurulmalıdır ki hareket zincirleme aksın; ayrıntı için node hiyerarşisi sayfasına bakın.