gltf、glb压缩------gltfpack

在web端常用的都是gltf模型，但经常会有模型过大的情况，就算采用glb依然会过大，这次介绍一下gltfpack这个模型优化库。

gltfpack介绍

gltfpack是一个可以自动优化glTF文件以减少下载大小并提高加载和渲染速度的工具。gltfpack通过优化网格以进行顶点获取和变换缓存、量化几何以减少内存消耗和大小、合并网格以减少绘制调用计数、量化和重新采样动画以减少动画大小并简化播放，从而显着改变了glTF数据，以及通过删除或折叠冗余节点来修剪节点树。它还会在请求时简化网格。

gltfpack用法

默认使用

npm install -g gltfpack
gltfpack -i scene.gltf -o scene.glb

默认情况下，gltfpack输出已使用各种缓存优化器和量化针对GPU消耗进行了优化的常规.glb/文件。.gltf这些文件可以由支持KHR_mesh_quantization扩展的GLTF加载器加载，例如three.js (r111+) 和Babylon.js (4.1+)。

具体命令参数详见

在前端进行解压则需要引入examples/jsm/libs/meshopt_decoder.module.js.

const gltfLoader = new GLTFLoader();
gltfLoader.setKTX2Loader(ktx2Loader);
gltfLoader.setMeshoptDecoder(MeshoptDecoder);

示例

压缩后的模型 : 4.7M
未压缩的模型：37M

参考

1. 3D性能优化 | 说一说glTF文件压缩
2. threejs关于模型的格式介绍,模型转换,模型压缩,模型加载的相关总结