3D建模

threejs性能优化之gltf文件压缩（二）

在使用Three.js进行3D图形开发时，GLTF（GL Transmission Format）文件因其高效性和灵活性而广受欢迎。然而，随着模型复杂度的增加，GLTF文件的大小也会显著增加，这可能会对加载时间和渲染性能产生负面影响。为了优化Three.js中的GLTF文件性能，文件压缩是一个重要的步骤。

wangming

Sep 19, 2024 • 7 min read

3D模型在线预览提供多种低代码平台3D模型在线预览解决方案，实现了将多种3D模型格式无缝集成到低代码业务表单中。这意味着用户可以在不离开低代码平台的情况下，直接查看和操作3D模型，极大地提升了数据可视化的效果和用户交互体验。

glTF文件压缩

如上面介绍，glTF 文件包括.gltf/.glb 文件、.bin 文件以及纹理资源。glTF2.0 相关的插件主要有以下：

那么我们从中取一些来分析一下。

网格压缩

KHR_draco_mesh_compression

最常见的一种网格压缩方式，采用开源的Draco算法，用于压缩和解压缩3D 网格和点云，并且可能会改变网格中顶点的顺序和数量。压缩的使文件小得多，但是在客户端设备上需要额外的解码时间。

压缩方式

可以使用gltf-pipelinegltf 文件优化工具进行压缩

使用方式（在 Three.js 中）

性能分析对比

这个 glb 文件原大小为 3.2M，draco 压缩后为 1.8M，约为原文件的56% 。

从上面的代码中可以看出，创建解码器实例需要引入额外的库来进行解码，setDecoderPath会自动请求 wasm 文件来进行解密操作。而这两个 wasm 文件同时也增加了请求时间和请求数量，那么加上这两个文件，真实的压缩率约为62.5% 。

所以，如果一个项目需要加载多个 glTF 文件，那么可以创建一个 DRACOLoader 实例并重复使用它。但如果项目只需要加载一个 glTF 文件，那么使用 draco 算法是否具有“性价比”就值得考量了。

用 demo 进行一下性能对比：

可见 draco 算法首次加载和解密时间，要大于原文件。而在实际项目中，这个差距更加明显，并且偶尔会出现解密堵塞的情况，需要重新进入页面才能恢复功能。

除此以外，还有一个很直观的问题，模型画质的损失是肉眼可观的。

总而言之，如果要将 draco 压缩算法运用到大规模项目中，需要结合实际项目进行以下对比：

(1) 请求两个文件+解密耗时，与本身 glb 文件压缩后的体积大小相比，真实性能对比；
(2) 画质是否会出现设计师无法接受的损失。

KHR_mesh_quantization

顶点属性通常使用FLOAT类型存储，将原始始浮点值转换为16位或8位存储以适应统一的3D或2D网格，也就是我们所说的quantization向量化，该插件主要就是将其向量化。

例如，静态 PBR-ready 网格通常需要每个顶点POSITION（12 字节）、TEXCOORD（8 字节）、NORMAL（12 字节）和TANGENT（16 字节），总共 48 字节。通过此扩展，可以用于SHORT存储位置和纹理坐标数据（分别为 8 和 4 字节）以及BYTE存储法线和切线数据（各 4 字节），每个顶点总共 20 字节。