Membangun dunia terbuka di browser, bagian 25: Satu skeleton, semua pakaian
Oleh Oleg Sidorkin, CTO dan Co-Founder Cinevva
Baru mengikuti seri ini? Gunakan panduan seri. Panduan itu menjelaskan apa itu spike dan menautkan semua bagian.
Bagian 24 membuat dunia menjadi persisten dan memberi angin pada vegetasinya. Bagian ini kembali membahas orang-orang di dalamnya, tetapi dari sisi pakaian: bisakah kreator memilih tubuh dasar, mengganti pakaian, memilih gaya rambut, dan memainkan animasi apa pun, semuanya dengan paket aset gratis, tanpa melakukan rigging maupun membuat animasi? Membuat rig kustom bukanlah hal yang tepat untuk dikurangi risikonya. Pertanyaan yang perlu dijawab adalah apakah paket CC0 mampu menanggung seluruh kebutuhan tersebut.
Paket yang dibuat agar semuanya saling cocok
Buka Spike 50 di tab baru ↗ · Lihat kode sumber
Quaternius menyediakan empat aset yang kesesuaiannya nyaris mencurigakan: Universal Base Characters dengan tubuh laki-laki dan perempuan, ditambah delapan gaya rambut dan dua set alis; Modular Character Outfits yang dibagi menjadi bagian tubuh, lengan, kaki, dan alas kaki dengan aksesori seperti pelindung bahu dan tudung; serta Universal Animation Library paket satu dan dua, dengan total 262 klip yang mencakup pergerakan, pertarungan, memanjat, bertani, memancing, gerakan diam, dan gerakan sosial. Pemeriksaan terhadap glTF-nya mengungkap alasan semuanya cocok: setiap mesh dalam keempat paket tersebut di-rig ke skeleton bergaya UE5 dengan 65 joint yang sama, nama joint yang sama, bind pose yang sama, mulai dari root melalui pelvis dan tulang belakang hingga kepala, lengan simetris dengan lima belas joint jari di setiap sisi, serta kaki simetris. Tidak diperlukan retargeting. Ini benar-benar kebalikan dari masalah retargeting tiga skeleton pada Spike 35, ketika rig wajah dengan 213 bone harus bekerja dengan rig Mixamo 65 bone. Di sini, keempat paket tersebut memang sengaja dibuat menggunakan skeleton milik pustaka animasi, dan kecocokannya sempurna.
Hal itu mengubah spike ini menjadi latihan binding, bukan persoalan pipeline animasi. Layer dasar memuat glTF tubuh, mengkloning scene dengan SkeletonUtils.clone agar setiap karakter memperoleh instance skeleton baru alih-alih meneruskan perubahan bone kembali ke scene cache milik loader, lalu menyimpan skeleton 65 bone tersebut sebagai skeleton kanonis bersama objek armature yang menjadi root animasi.
Melakukan rebinding mantel ke tubuh
Trik yang membuat semuanya berfungsi adalah bahwa mesh pakaian tidak bisa begitu saja dipindahkan parent-nya ke dalam scene, karena mesh itu masih mereferensikan bone dari glTF-nya sendiri, yang berada dalam subtree berbeda. Setiap bagian modular—tubuh petani atau kaki penjaga hutan—hadir sebagai SkinnedMesh tersendiri dengan kloning armature yang sama. Proses binding menelusuri bone milik skeleton sumber dalam urutan aslinya, mencari setiap bone berdasarkan nama di skeleton kanonis, lalu membuat Skeleton baru dari bone yang telah di-rebind tersebut sambil menggunakan kembali matriks bind-inverse dari sumber. Setelah itu, proses tersebut memanggil SkinnedMesh.bind dengan matriks bind identitas milik sumber. Seusai binding, mesh dilepaskan dari scene sumbernya dan ditempatkan langsung di bawah root karakter. Karena matriks bind menyimpan transformasi dunia pada saat binding dan root berada pada identitas, transformasi dunia milik mesh itu sendiri tidak pernah memengaruhi hasil, dan skinning sepenuhnya berlangsung melalui bone yang kini digunakan bersama.
Rambut dan alis juga merupakan slot, dan keduanya mengoreksi asumsi yang keliru. Struktur folder menyebutkan "rigged to head bone," yang mengisyaratkan bahwa rambut adalah mesh statis yang ditempatkan sebagai child dari kepala dengan offset yang sudah di-bake. Ternyata tidak. Setiap file rambut adalah SkinnedMesh yang diberi weight di seluruh 65 joint, dengan weight rambut panjang merambat ke bagian atas tulang belakang dan leher agar rambut menjuntai ketika karakter menunduk. Jadi, rambut menempuh jalur rebinding berdasarkan nama yang sama seperti bagian pakaian lainnya. Satu-satunya kasus khusus adalah slot tubuh pakaian: saat dipasang, mesh tubuh dasar disembunyikan agar tidak menembus pakaian, sementara lengan, kaki, alas kaki, dan aksesori cukup ditumpuk karena paket tersebut dirancang agar semuanya bisa digunakan bersama tubuh dasar yang tetap terlihat di bagian tempat pakaian membiarkan kulit terbuka.
262 animasi secara gratis
Setelah skeleton digunakan bersama, animasi hampir terasa antiklimaks. Kedua GLB pustaka dimuat, klip-klipnya digabungkan menjadi satu daftar bernama, dan nama track dalam klip tersebut mereferensikan nama joint yang persis sama melalui bone.position, bone.quaternion, dan bone.scale. Sebuah AnimationMixer yang berakar pada armature karakter menemukan bone tersebut berdasarkan nama dan menggerakkannya secara langsung, dengan crossfade saat berganti. Panel kanan viewer menampilkan daftar seluruh 262 klip yang dapat difilter, lengkap dengan label sumber, sehingga pencarian "fish" menampilkan semua animasi memancing dari kedua pustaka. Pencahayaan tiga titik standar dengan bayangan lembut, grid polar di bawah kaki, dan tone mapping ACES menjaga tekstur dasar bergaya tetap mudah dibaca tanpa menghilangkan detail bayangan pada bodysuit gelap.
Dampaknya terhadap pengurangan risiko produk sangat besar. Fitur kustomisasi avatar dapat diluncurkan dengan paket CC0 tanpa pekerjaan rigging dan tanpa pembuatan animasi: masukkan keempat paket, hubungkan UI lemari pakaian, dan langsung tersedia variasi sekitar enam pakaian dikalikan delapan gaya rambut, dua jenis kelamin, dan 262 animasi. Skeleton dengan 65 joint cukup kecil sehingga biaya GPU skinning dapat diabaikan, dan pekerjaan batched skinning dari Spike 45 sudah mampu menangani lebih dari 200 avatar dengan rig sebesar ini. CC0 tidak memiliki batasan penggunaan, sehingga aman untuk penggunaan komersial pada platform kreator berbayar. Pertanyaan terbuka yang tersisa adalah pakaian yang diunggah sendiri, yang merupakan masalah Fase 3 dan dapat diselesaikan melalui retargeting saat unggahan ke skeleton kanonis ini—kebalikan dari retargeting runtime pada Spike 35. Ukuran asetnya sekitar 147 MB di disk dalam bentuk PNG 2K mentah dan GLB animasi tanpa kompresi, yang dalam produksi dapat diperkecil menjadi sekitar 30 MB menggunakan kompresi tekstur KTX2 dan satu tahap pemrosesan dengan gltf-transform.
Teknologi yang dirujuk dalam bab ini
Satu skeleton kanonis untuk seluruh paket. Empat paket Quaternius (tubuh dasar, pakaian modular, dan dua pustaka animasi) semuanya di-rig ke skeleton bergaya UE5 dengan 65 joint yang identik, nama joint yang sama, dan bind pose yang sama, sehingga penggabungannya tidak memerlukan retargeting. Mengkloning tubuh dasar dengan SkeletonUtils.clone memberi setiap karakter instance skeleton baru alih-alih mengubah scene cache milik loader.
Rebinding skeleton berdasarkan nama. Setiap bagian modular menyertakan SkinnedMesh sendiri yang mereferensikan armature-nya sendiri. Proses rebinding menelusuri bone sumber secara berurutan, memetakan masing-masing berdasarkan nama ke skeleton kanonis, membuat Skeleton baru dengan menggunakan kembali bind-inverse dari sumber, lalu memanggil SkinnedMesh.bind dengan matriks bind identitas. Setelah itu, mesh ditempatkan di bawah root karakter bersama agar skinning sepenuhnya berjalan melalui bone yang digunakan bersama. Slot tubuh pakaian menyembunyikan tubuh dasar untuk mencegah clipping; slot lainnya ditumpuk.
Rambut sebagai slot ber-skinning. Rambut bukan attachment statis pada bone kepala, melainkan SkinnedMesh yang diberi weight di seluruh 65 joint. Rambut panjang diberi weight hingga bagian atas tulang belakang dan leher agar menjuntai saat karakter menunduk. Rambut menempuh jalur rebinding yang sama seperti bagian pakaian.
Retargeting animasi berbasis nama secara gratis. Klip Animation Library mereferensikan joint berdasarkan nama yang persis sama, sehingga AnimationMixer yang berakar pada armature bersama dapat menggerakkan seluruh 262 klip secara langsung dengan crossfade, tanpa retargeting per klip. Lisensi CC0 mencakup penggunaan komersial, dan jumlah joint yang kecil membuat GPU skinning cukup murah untuk menggunakan kembali jalur batched skinning dari Spike 45. Lihat LOD berbasis GPU.
Bagian 25 dari 29. Sebelumnya: Bagian 24 - Menyimpan dunia, dan angin yang bisa dilihat Berikutnya: Bagian 26 - Air yang tetap meyakinkan pada setiap skala Panduan seri: /blog/2026-02-25-open-world-browser-series-guide