Optimización de GLB animados: un caso de estudio con CesiumMan

¿Cuánto se gana al reducir las muestras de animación o los triángulos después de comprimir? Probamos CesiumMan, un personaje público con deformación por esqueleto, para evaluar esas decisiones por separado. Meshopt logró la mayor parte del ahorro en bytes; reducir la frecuencia de muestreo de la animación aportó muy poco.

El modelo y las condiciones de prueba

El GLB de origen ocupa 438,044 bytes y contiene 4,672 triángulos, una animación y un esqueleto de deformación con 19 articulaciones. Ejecutamos gltfpack 1.3 nativo en Windows el 2 de octubre de 2026. Todas las exportaciones partieron del mismo original. Las texturas conservaron su formato original; se conservaron los nodos con nombre, los materiales con nombre y los datos extras. El muestreo de animación se mantuvo en los 30 FPS predeterminados, salvo en la prueba a 15 FPS.

Origen y licencia del modelo · Descargar las mediciones y el hash del archivo de origen

Compara el archivo completo, no solo la cantidad de claves

Aquí, las claves de animación son la suma de los recuentos de los accesores de entrada de todos los muestreadores de animación, no poses distintas ni fotogramas renderizados. Todas las salidas siguen teniendo una animación y 19 articulaciones del esqueleto de deformación. Esas cantidades no demuestran que los tiempos, las transformaciones o la deformación permanezcan intactos.

Qué aportó cada cambio

Meshopt redujo el original en un 52.6% sin solicitar una reducción de triángulos. Incluso la exportación conservadora modificó los datos de animación: su cantidad de claves pasó de 2,736 a 1,205. Conservar todos los triángulos no es una configuración sin pérdidas.

A 15 FPS, la cantidad de claves volvió a reducirse casi a la mitad, pero el archivo solo ocupaba 1,528 bytes menos que la exportación Meshopt a 30 FPS: un ahorro del 0.74%. Para este modelo, mantendríamos los 30 FPS salvo que una comprobación independiente del movimiento justificara una frecuencia menor. Tener menos claves no se traduce en la misma reducción porcentual del archivo completo.

El objetivo del 50% de triángulos se alcanzó exactamente: 2,336 triángulos. Se ahorraron 13,972 bytes, o un 6.72%, frente a usar solo Meshopt. Activar la simplificación agresiva con ese mismo objetivo produjo el mismo tamaño en bytes y la misma cantidad de triángulos en esta prueba, por lo que aquí no ofreció ninguna ventaja de tamaño. Este resultado no es generalizable a otras mallas.

Examina la misma pose y después el movimiento

Estos renderizados usan la primera animación a los 0.5 segundos, la misma cámara e iluminación y Three.js 0.180.0. Las texturas siguen siendo visibles y el personaje conserva su silueta general en esta vista. Una imagen fija no permite determinar la calidad del movimiento ni revelar todos los errores de deformación; examina los codos, las rodillas y la transición del bucle en tu propio visor.

También hay una diferencia temporal: Three.js indica una duración de 2.0000 segundos para el clip de origen, unos 2.0083 segundos para las exportaciones a 30 FPS y 2.0417 segundos para la exportación a 15 FPS. Si tu aplicación sincroniza acciones con la duración del clip, prueba esa integración en lugar de dar por hecho que los tiempos originales se han conservado.

Reproducir las exportaciones

Usa el GLB de origen como input.glb en cada uno de los comandos siguientes. Estos comandos corresponden a las opciones del sitio. Las salidas Meshopt requieren un decodificador compatible, y los archivos optimizados también requieren compatibilidad con la cuantización de geometría.

gltfpack -i input.glb -o conservative.glb -kn -km -ke
gltfpack -i input.glb -o meshopt.glb -cc -kn -km -ke
gltfpack -i input.glb -o fps15.glb -cc -af 15 -kn -km -ke
gltfpack -i input.glb -o half.glb -si 0.5 -cc -kn -km -ke

Nuestra elección inicial para este recurso sería Meshopt a 30 FPS conservando todos los triángulos. Considera la versión con la mitad de los triángulos cuando el coste de la geometría sea importante y las comprobaciones de deformación sean satisfactorias. Estas mediciones abarcan un solo personaje pequeño; no miden el tiempo de GPU, la velocidad de carga ni la fidelidad de la animación en distintos dispositivos.

Modelo: CesiumMan, © 2017 Cesium, con licencia CC BY 4.0. Los renderizados muestran nuestras versiones derivadas optimizadas junto al original. El logotipo de Cesium sigue formando parte del modelo; los derechos de marca son independientes. Cesium no ha avalado este sitio ni esta comparación. CC BY 4.0 · Aviso sobre marcas comerciales

Cargar modelos de gltfpack en Three.js → · Reducción de polígonos GLB con gltfpack →