Construir un mundo abierto en el navegador, parte 25: Un esqueleto, todos los atuendos
Por Oleg Sidorkin, CTO y cofundador de Cinevva
¿Acabas de llegar? Consulta la guía de la serie. Explica qué es un spike y enlaza todas las partes.
La parte 24 hizo que el mundo fuera persistente y dio viento a su vegetación. Esta parte vuelve a tratar sobre las personas que lo habitan, pero desde el lado del vestuario: ¿puede un creador elegir un cuerpo base, cambiar la ropa, escoger un peinado y reproducir cualquier animación, todo con un paquete de recursos gratuito, sin rigging ni creación de animaciones? Crear un rig personalizado no es lo que conviene validar para reducir riesgos. La pregunta que merece respuesta es si un paquete CC0 puede soportar toda la carga.
Un paquete creado para encajar
Abrir el Spike 50 en una pestaña nueva ↗ · Ver código fuente
Quaternius ofrece cuatro recursos que encajan de una forma casi sospechosamente perfecta: Universal Base Characters, con cuerpos masculinos y femeninos, además de ocho peinados y dos conjuntos de cejas; Modular Character Outfits, dividido en piezas para cuerpo, brazos, piernas y pies, con accesorios como hombreras y una capucha; y los paquetes uno y dos de Universal Animation Library, con un total de 262 clips que abarcan locomoción, combate, escalada, agricultura, pesca, poses inactivas y movimientos sociales. Al inspeccionar sus glTF se reveló por qué encajan: absolutamente todas las mallas de los cuatro paquetes están vinculadas al mismo esqueleto de estilo UE5 con 65 articulaciones, con los mismos nombres de articulaciones y las mismas poses de enlace, desde la raíz, pasando por la pelvis y la columna, hasta la cabeza, con brazos simétricos que incluyen quince articulaciones de dedos por lado y piernas simétricas. No hace falta retargeting. Esto es exactamente lo contrario del problema de retargeting entre tres esqueletos del Spike 35, donde un rig facial de 213 huesos tenía que comunicarse con un rig de Mixamo de 65 huesos. Aquí, los cuatro paquetes se crearon deliberadamente sobre el esqueleto de la biblioteca de animaciones, y la correspondencia es exacta.
Eso convirtió el spike en un ejercicio de vinculación en lugar de un problema de canalización de animaciones. La capa base carga el glTF de un cuerpo, clona la escena con SkeletonUtils.clone para que cada personaje obtenga una instancia nueva del esqueleto en vez de devolver las mutaciones de los huesos a la escena almacenada en caché por el cargador, y guarda en caché ese esqueleto de 65 huesos como referencia canónica junto con el objeto de armadura que sirve de raíz para la animación.
Revincular un abrigo a un cuerpo
El truco que hace funcionar todo esto es que no se puede simplemente cambiar la malla de un atuendo de padre dentro de la escena, porque sigue haciendo referencia a los huesos de su propio glTF, que se encuentran en un subárbol diferente. Cada pieza modular —el cuerpo de un campesino o las piernas de un explorador— llega como su propio SkinnedMesh con su propio clon de la misma armadura. La vinculación recorre los huesos del esqueleto de origen en su orden original, busca cada uno por nombre en el esqueleto canónico y crea un nuevo Skeleton a partir de esos huesos revinculados, reutilizando las matrices inversas de enlace del origen; después llama a SkinnedMesh.bind con la matriz de enlace identidad del origen. Tras la vinculación, la malla se separa de su escena de origen y pasa a depender directamente de la raíz del personaje. Como la matriz de enlace captura la transformación global en el momento de la vinculación y la raíz se encuentra en identidad, la transformación global de la propia malla nunca afecta al resultado y el skinning se realiza por completo a través de los huesos ahora compartidos.
El pelo y las cejas también son ranuras, y permitieron corregir una suposición errónea. La estructura de carpetas decía «vinculado al hueso de la cabeza», lo que sugería que el pelo sería una malla estática dependiente de la cabeza con un desplazamiento predefinido. No es así. Cada archivo de pelo es un SkinnedMesh ponderado entre las 65 articulaciones, y los pesos del pelo largo se extienden hasta la parte superior de la columna y el cuello para que caiga de forma natural cuando el personaje mira hacia abajo. Por tanto, el pelo sigue la misma ruta de revinculación por nombre que cualquier pieza de atuendo. El único caso especial es la ranura del cuerpo del atuendo: cuando se adjunta, la malla del cuerpo base se oculta para que no atraviese el atuendo, mientras que los brazos, las piernas, los pies y los accesorios simplemente se superponen, porque el paquete se diseñó para que coexistieran con el cuerpo base visible allí donde la ropa deja piel al descubierto.
262 animaciones gratuitas
La animación resulta casi trivial una vez que se comparte el esqueleto. Se cargan los dos glb de las bibliotecas, sus clips se combinan en una única lista con nombres y las pistas de esos clips hacen referencia a los nombres exactos de las articulaciones mediante bone.position, bone.quaternion y bone.scale. Un AnimationMixer cuya raíz es la armadura del personaje encuentra esos huesos por nombre y los controla directamente, aplicando una transición fundida al cambiar. El panel derecho del visor contiene una lista filtrable con los 262 clips y una etiqueta de origen, de modo que buscar «fish» muestra todas las animaciones de pesca de ambas bibliotecas. Una iluminación estándar de tres puntos con sombras suaves, una cuadrícula polar bajo los pies y el mapeo tonal ACES mantienen legibles las texturas base estilizadas sin empastar las sombras del traje oscuro.
La reducción de riesgos para el producto es considerable. La función de personalización de avatares puede publicarse con un paquete CC0 sin ningún trabajo de rigging ni creación de animaciones: basta con incorporar los cuatro paquetes y conectar una interfaz de vestuario para obtener, desde el primer momento, aproximadamente seis atuendos por ocho peinados, por dos sexos y por 262 animaciones de variación. El esqueleto de 65 articulaciones es lo bastante pequeño como para que el coste del skinning en la GPU sea insignificante, y el trabajo de skinning por lotes del Spike 45 ya permite manejar más de 200 avatares con un rig de este tamaño. CC0 no impone restricciones de uso, por lo que puede utilizarse comercialmente en una plataforma de pago para creadores. La pregunta pendiente son los atuendos personalizados que suban los usuarios, un problema de la fase 3 que se resolverá aplicando retargeting en el momento de la subida hacia este esqueleto canónico, a la inversa del retargeting en tiempo de ejecución del Spike 35. Los recursos ocupan alrededor de 147 MB en disco como archivos PNG 2K sin procesar y glb de animación sin comprimir, una cifra que en producción se reduciría a unos 30 MB mediante compresión de texturas KTX2 y una pasada con gltf-transform.
Tecnología mencionada en este capítulo
Un único esqueleto canónico para todo el paquete. Los cuatro paquetes de Quaternius —cuerpos base, atuendos modulares y dos bibliotecas de animaciones— están vinculados a un esqueleto idéntico de estilo UE5 con 65 articulaciones, los mismos nombres de articulaciones y las mismas poses de enlace, por lo que combinarlos no requiere retargeting. Clonar la base con SkeletonUtils.clone proporciona a cada personaje una instancia nueva del esqueleto en lugar de mutar la escena almacenada en caché por el cargador.
Revinculación del esqueleto por nombre. Cada pieza modular incluye su propio SkinnedMesh, que hace referencia a su propia armadura. La revinculación recorre los huesos de origen en orden, asigna cada uno por nombre al esqueleto canónico, crea un nuevo Skeleton reutilizando las matrices inversas de enlace del origen y llama a SkinnedMesh.bind con la matriz de enlace identidad. Después, hace que la malla dependa de la raíz compartida del personaje para que el skinning se ejecute por completo a través de los huesos compartidos. La ranura del cuerpo del atuendo oculta el cuerpo base para evitar intersecciones; las demás ranuras se superponen.
El pelo como ranura con skinning. El pelo no es un elemento estático adjunto al hueso de la cabeza, sino un SkinnedMesh ponderado entre las 65 articulaciones. El pelo largo tiene pesos asignados a la parte superior de la columna y al cuello para que caiga de forma natural cuando el personaje mira hacia abajo. Sigue la misma ruta de revinculación que las piezas de los atuendos.
Retargeting gratuito de animaciones basado en nombres. Los clips de Animation Library hacen referencia a las articulaciones por su nombre exacto, por lo que un AnimationMixer cuya raíz es la armadura compartida controla directamente los 262 clips con transición fundida, sin retargeting individual por clip. La licencia CC0 permite el uso comercial, y el reducido número de articulaciones mantiene el skinning en la GPU lo bastante barato como para reutilizar la ruta de skinning por lotes del Spike 45. Consulta LOD controlado por la GPU.
Parte 25 de 29. Anterior: Parte 24 - Guardar un mundo y hacer visible el viento Siguiente: Parte 26 - Agua que funciona a cualquier escala Guía de la serie: /es/blog/2026-02-25-open-world-browser-series-guide