动画 GLB 优化实测:CesiumMan 案例

压缩之后,再减少动画采样或三角面,还能省多少?我们用公开的骨骼角色模型 CesiumMan 分别测试。大部分体积收益来自 Meshopt,降低动画采样率带来的额外收益很小。

模型与测试条件

原始 GLB 为 438,044 字节,包含 4,672 个三角面、1 段动画和 19 个关节的蒙皮。2026 年 10 月 2 日,我们在 Windows 上使用原生 gltfpack 1.3 测试。每次都从同一个原始文件导出,纹理保留原格式,并保留有名称的节点、材质和 extras。除 15 FPS 测试外,动画采样均使用默认的 30 FPS。

模型来源与许可证 · 下载测量数据与源文件哈希

比较整个文件,而不只看关键帧数量

设置文件大小(字节)三角面动画关键帧数
原始模型438,0444,6722,736
保守优化269,4524,6721,205
Meshopt · 30 FPS207,7684,6721,205
Meshopt · 15 FPS206,2404,672625
Meshopt · 保留 50% 三角面193,7962,3361,205

这里的动画关键帧数,是各动画采样器输入访问器元素数量之和,不代表不同姿势数或实际渲染帧数。所有输出仍有 1 段动画和 19 个蒙皮关节,但数量相同不能证明时间、变换或变形效果不变。

每项调整实际省了多少

没有要求减面时,Meshopt 就将原文件体积缩小了 52.6%。即便使用保守优化,动画数据也发生了变化:关键帧数从 2,736 降到 1,205。保留全部三角面并不等于无损。

降到 15 FPS 后,关键帧数再次接近减半,但文件只比 30 FPS 的 Meshopt 版本少了 1,528 字节,节省 0.74%。对于这个模型,我们倾向于保留 30 FPS,除非单独检查动作后确认值得降低采样率。关键帧减少的比例,并不会等比例转化为整个文件的体积收益。

保留 50% 三角面的目标恰好达成,输出为 2,336 个三角面。相比只用 Meshopt,少了 13,972 字节,节省 6.72%。在相同目标下开启激进简化,本次得到的字节数和三角面数都相同,没有带来额外的体积收益。其他网格不一定有同样结果。

先比较同一姿势,再检查动作

CesiumMan — 原始模型
原始模型
CesiumMan — Meshopt · 30 FPS
Meshopt · 30 FPS
CesiumMan — Meshopt · 15 FPS
Meshopt · 15 FPS
CesiumMan — 保留 50% 三角面
保留 50% 三角面

这些图使用第一段动画的 0.5 秒时刻、相同相机和灯光,由 Three.js 0.180.0 渲染。这个视角下,纹理正常显示,角色整体轮廓仍然保留。静态图无法证明动作质量,也不能暴露所有变形问题;请在自己的查看器中检查肘部、膝盖和循环衔接。

动画时长也有变化:Three.js 读取的原始片段为 2.0000 秒,30 FPS 输出约为 2.0083 秒,15 FPS 输出约为 2.0417 秒。如果应用按片段时长同步动作,应实际测试这部分逻辑,不能假设原始时间信息完全保留。

复现导出结果

以下每条命令都用原始 GLB 作为 input.glb,参数与本站选项对应。Meshopt 输出需要兼容的解码器,优化后的文件还需要查看器支持几何量化。

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

对于这个模型,我们会先选 30 FPS 的 Meshopt,保留全部三角面。当几何开销确实重要,且变形检查通过时,再考虑三角面减半的版本。这些测量只针对一个小型角色,没有测量 GPU 耗时、加载速度或不同设备上的动画保真度。

模型:CesiumMan,© 2017 Cesium,采用 CC BY 4.0 许可。渲染图展示了原始模型和我们优化后的衍生版本。Cesium 标志仍是模型的一部分,商标权单独适用。Cesium 未为本站或本次对比背书。 CC BY 4.0 · 商标声明

在 Three.js 中加载 gltfpack 模型 → · 使用 gltfpack 为 GLB 模型减面 →

打开优化工具 ↗