Eine offene Welt im Browser bauen, Teil 25: Ein Skelett, jedes Outfit
Von Oleg Sidorkin, CTO und Mitgründer von Cinevva
Neu hier? Nutze den Serienleitfaden. Er erklärt, was ein Spike ist, und verlinkt alle Teile.
In Teil 24 wurde die Welt persistent und ihre Vegetation bekam Wind. In diesem Teil geht es wieder um die Menschen darin, diesmal aber aus Sicht der Garderobe: Kann ein Creator einen Basiskörper auswählen, Kleidung austauschen, eine Frisur wählen und jede beliebige Animation abspielen – alles mit einem kostenlosen Asset-Paket, ohne Rigging und ohne eigene Animationen zu erstellen? Das Erstellen eines individuellen Rigs ist nicht das Risiko, das wir reduzieren müssen. Die entscheidende Frage ist, ob ein CC0-Paket die gesamte Last tragen kann.
Ein Paket, dessen Bestandteile füreinander gemacht sind
Spike 50 in einem neuen Tab öffnen ↗ · Quellcode ansehen
Quaternius bietet vier Assets an, die beinahe verdächtig gut zusammenpassen: Universal Base Characters mit männlichen und weiblichen Körpern sowie acht Frisuren und zwei Augenbrauen-Sets, Modular Character Outfits, unterteilt in Körper-, Arm-, Bein- und Fußteile samt Zubehör wie Schulterplatten und einer Kapuze, sowie die Pakete eins und zwei der Universal Animation Library mit insgesamt 262 Clips für Fortbewegung, Kampf, Klettern, Landwirtschaft, Angeln, Leerlaufanimationen und soziale Gesten. Eine Untersuchung ihrer glTFs zeigte, warum sie zusammenpassen: Jedes einzelne Mesh in allen vier Paketen ist an dasselbe UE5-artige Skelett mit 65 Gelenken gebunden – mit denselben Gelenknamen und denselben Bind-Posen, vom Root über Becken und Wirbelsäule bis zum Kopf, mit gespiegelten Armen samt jeweils fünfzehn Fingergelenken und gespiegelten Beinen. Kein Retargeting erforderlich. Das ist das genaue Gegenteil des Retargeting-Problems mit drei Skeletten aus Spike 35, bei dem ein Gesichts-Rig mit 213 Bones mit einem Mixamo-Rig mit 65 Bones kommunizieren musste. Hier wurden alle vier Pakete absichtlich auf dem Skelett der Animationsbibliothek erstellt, und die Übereinstimmung ist exakt.
Dadurch wurde aus dem Spike eine Binding-Übung statt einer Aufgabe für die Animationspipeline. Die Basisschicht lädt den glTF eines Körpers, klont die Szene mit SkeletonUtils.clone, damit jeder Charakter eine neue Skelettinstanz erhält und Bone-Änderungen nicht in die vom Loader zwischengespeicherte Szene zurückfließen, und speichert dieses Skelett mit 65 Bones zusammen mit dem Armature-Objekt, das als Wurzel der Animation dient, als kanonische Referenz zwischen.
Einen Mantel neu an einen Körper binden
Der entscheidende Trick besteht darin, dass man das Mesh eines Outfits nicht einfach in die Szene umhängen kann, weil es weiterhin auf die Bones seines eigenen glTF verweist, die sich in einem anderen Teilbaum befinden. Jedes modulare Teil – etwa der Körper eines Bauern oder die Beine eines Waldläufers – kommt als eigenes SkinnedMesh mit einem eigenen Klon derselben Armature an. Beim Binding werden die Bones des Quellskeletts in ihrer ursprünglichen Reihenfolge durchlaufen, jeweils anhand ihres Namens im kanonischen Skelett gesucht und daraus ein neues Skeleton erstellt, das die inversen Bind-Matrizen der Quelle wiederverwendet. Anschließend wird SkinnedMesh.bind mit der Identitäts-Bind-Matrix der Quelle aufgerufen. Nach dem Binding wird das Mesh von seiner Quellszene gelöst und direkt unter dem Charakter-Root eingehängt. Da die Bind-Matrix die Welttransformation zum Zeitpunkt des Bindings erfasst und der Root auf der Identität liegt, wirkt sich die eigene Welttransformation des Meshes nie auf das Ergebnis aus, und das Skinning erfolgt vollständig über die nun gemeinsam genutzten Bones.
Auch Haare und Augenbrauen sind Slots, und sie korrigierten eine falsche Annahme. Die Ordnerstruktur sagte „an den Head-Bone geriggt“, was vermuten ließ, dass Haare ein statisches Mesh seien, das mit einem fest eingebrannten Offset an den Kopf gehängt wird. Das stimmt nicht. Jede Haardatei ist ein SkinnedMesh, das über alle 65 Gelenke gewichtet ist. Bei langen Haaren reichen die Gewichtungen bis in die obere Wirbelsäule und den Hals, sodass sie fallen, wenn der Charakter nach unten blickt. Haare durchlaufen daher denselben namensbasierten Rebinding-Pfad wie jedes Outfit-Teil. Der einzige Sonderfall ist der Körper-Slot des Outfits: Wird er eingesetzt, wird das Mesh des Basiskörpers ausgeblendet, damit es nicht durch das Outfit hindurchragt. Arme, Beine, Füße und Accessoires werden dagegen einfach übereinandergelegt, da das Paket so erstellt wurde, dass sie zusammen mit dem sichtbaren Basiskörper funktionieren, wo immer die Kleidung Haut freilässt.
262 kostenlose Animationen
Sobald das Skelett gemeinsam genutzt wird, ist die Animation fast schon unspektakulär. Die beiden Bibliotheks-GLBs werden geladen, ihre Clips zu einer einzigen benannten Liste zusammengeführt, und die Track-Namen in diesen Clips verweisen über bone.position, bone.quaternion und bone.scale auf die exakten Gelenknamen. Ein AnimationMixer, dessen Wurzel die Armature des Charakters ist, findet diese Bones anhand ihrer Namen, steuert sie direkt an und überblendet beim Wechsel. Der rechte Bereich des Viewers enthält eine filterbare Liste aller 262 Clips samt Quellenkennzeichnung. Eine Suche nach „fish“ zeigt damit sämtliche Angelanimationen aus beiden Bibliotheken an. Eine standardmäßige Dreipunktbeleuchtung mit weichen Schatten, ein Polarraster unter den Füßen und ACES Tone Mapping sorgen dafür, dass die stilisierten Basistexturen gut lesbar bleiben, ohne die Schatten des dunklen Bodysuits zu verschlucken.
Für das Produkt beseitigt dies erhebliche Risiken. Die Avatar-Anpassung kann auf Grundlage eines CC0-Pakets ohne jegliche Rigging-Arbeit und ohne das Erstellen eigener Animationen veröffentlicht werden: Die vier Pakete einfügen, eine Garderobenoberfläche anschließen, und schon stehen standardmäßig ungefähr sechs Outfits mal acht Frisuren mal zwei Geschlechter mal 262 Animationen an Variationsmöglichkeiten zur Verfügung. Das Skelett mit 65 Gelenken ist klein genug, dass die Kosten des GPU-Skinnings vernachlässigbar sind, und die Arbeit am gebündelten Skinning aus Spike 45 bewältigt bereits mehr als 200 Avatare mit einem Rig dieser Größe. CC0 bringt keine Nutzungsbeschränkungen mit sich, daher ist auch die kommerzielle Verwendung auf einer kostenpflichtigen Creator-Plattform unproblematisch. Offen bleibt noch die Frage nach individuell hochgeladenen Outfits. Das ist ein Problem für Phase 3, das durch Retargeting beim Upload auf dieses kanonische Skelett gelöst wird – also die Umkehrung des Laufzeit-Retargetings aus Spike 35. Die Assets belegen auf dem Datenträger als rohe 2K-PNGs und unkomprimierte Animations-GLBs etwa 147 MB. Für die Produktion ließe sich das mit KTX2-Texturkompression und einem gltf-transform-Durchlauf auf ungefähr 30 MB reduzieren.
In diesem Kapitel verwendete Technologie
Ein kanonisches Skelett für ein gesamtes Paket. Vier Quaternius-Pakete – Basiskörper, modulare Outfits und zwei Animationsbibliotheken – sind an ein identisches UE5-artiges Skelett mit 65 Gelenken, denselben Gelenknamen und denselben Bind-Posen geriggt, sodass für ihre Kombination kein Retargeting erforderlich ist. Das Klonen der Basis mit SkeletonUtils.clone gibt jedem Charakter eine neue Skelettinstanz, statt die zwischengespeicherte Szene des Loaders zu verändern.
Namensbasiertes Neuzuordnen von Skeletten. Jedes modulare Teil enthält ein eigenes SkinnedMesh, das auf seine eigene Armature verweist. Beim Rebinding werden die Quell-Bones der Reihe nach durchlaufen, anhand ihrer Namen dem kanonischen Skelett zugeordnet und zum Erstellen eines neuen Skeleton verwendet, das die inversen Bind-Matrizen der Quelle wiederverwendet. Danach wird SkinnedMesh.bind mit der Identitäts-Bind-Matrix aufgerufen und das Mesh unter dem gemeinsamen Charakter-Root eingehängt, sodass das Skinning vollständig über die gemeinsam genutzten Bones läuft. Der Körper-Slot des Outfits blendet den Basiskörper aus, um Überschneidungen zu vermeiden; andere Slots werden übereinandergelegt.
Haare als geskinntes Slot-Element. Haare sind kein statischer Anhang am Head-Bone, sondern ein SkinnedMesh, das über alle 65 Gelenke gewichtet ist. Bei langen Haaren reichen die Gewichtungen bis in die obere Wirbelsäule und den Hals, sodass sie beim Blick nach unten fallen. Sie durchlaufen denselben Rebinding-Pfad wie Outfit-Teile.
Kostenloses namensbasiertes Animations-Retargeting. Die Clips der Animation Library verweisen anhand ihrer exakten Namen auf Gelenke. Dadurch kann ein AnimationMixer, dessen Wurzel die gemeinsam genutzte Armature ist, alle 262 Clips direkt und mit Überblendung steuern – ohne Retargeting pro Clip. Eine CC0-Lizenz deckt die kommerzielle Nutzung ab, und die geringe Zahl an Gelenken hält das GPU-Skinning günstig genug, um den Pfad für gebündeltes Skinning aus Spike 45 wiederzuverwenden. Siehe GPU-gesteuertes LOD.
Teil 25 von 29. Zurück: Teil 24 – Eine Welt speichern und sichtbarer Wind Weiter: Teil 26 – Wasser, das in jedem Maßstab überzeugt Serienleitfaden: /de/blog/2026-02-25-open-world-browser-series-guide