gltf-pipeline压缩gltf大小不变等问题

最近在做web3d的项目，就是把web模型通过webGl展示到浏览器，关于模型制作的方法，模型动画的交互，模型导出gltf的方法，本文主要讲的就是gltf压缩问题，这样可以把gltf模型提及压缩的最小，web显示速度更快。

GLTF介绍：

首先说下gltf是什么，glTF 称为“ 3D 界的 JPEG”，使用了更优的数据结构，为应用程序实时渲染而生，特别适合web3d的展示。内存更小方便传输。
glTF 导出格式有两种后缀格式可供选择：.gltf 和 .glb：

.gltf 文件导出时一般会输出两种文件类型，一是 .bin 文件，以二进制流的方式存储顶点坐标、顶点法线坐标和贴图纹理坐标、贴图信息等模型基本数据信息；二是 .gltf 文件，本质是 json 文件，记录对bin文件中模型顶点基本数据的索引、材质索引等信息，方便编辑，可读性较好；
glb 文件格式只导出一个 .glb 文件，将所有数据都输出为二进制流，通常来说会更小一点，若不关心模型内的具体数据可直接选择此类型。

GLTF压缩方法：

gtlf压缩的方法很多：

gltf-pipeline：用于压缩和解压缩 3D 几何网格（geometric mesh）和点云（point cloud）。换句话说，它显著缩小了 3D 图形文件的大小
KTX 2.0 2021 年 4 月 20 日，Khronos® 集团宣布批准KTX™ 2.0，为这种容器格式添加了对Basis Universal超压缩的支持，以实现可靠、无处不在的 GPU 纹理分布。Basis Universal 是由Binomial开发的一种压缩技术，可以生成紧凑的纹理，可以在运行时有效地转码为各种 GPU 压缩纹理格式。
换句话说：gltf-pipeline通过压缩模型网格，通过减点和面，实现体积变小，而KTX 2.0通过新技术，改变传统的png，jpg等格式的问题图片，实现压缩。

gltf-pipeline：

gltf-pipeline使用介绍：

首先全局安装

npm install -g gltf-pipeline

参数

参数	解释
-i	输入路径，需要压缩的模型路径和名称
-o	输出路径，压缩结果的模型路径和名称
-b	将输入的glTF转换为glb
-j	将输入的glb转换为glTF
-s	编写单独的缓冲区、着色器和纹理而不是把它们嵌入到glTF中
-t	只写出单独的纹理
-keepUnusedElements	保留未使用的材质、节点和网格
-d	使用Draco压缩网格。添加KHR_draco_mesh_压缩扩展
-draco.compressionLevel	Draco压缩级别[0-10]，大多数是10，最小值为0。值为0将会连续应用编码并保留face顺序。

其实还有很多参数没有列出来，因为我懒，所以只把常用的列出来了。

举例：
控制台cd到需要转换的文件目录
gltf三种存在形式

gltf单文件（json）
glb但文件（二进制文件）
gltf拆分（包括bin文件和纹理贴图）

gltf --------> glb

#压缩gltf文件 -b表示输出glb格式，-d表示压缩
gltf-pipeline -i scene.glb -b -d

glb --------> gltf

#压缩glb文件 -j表示输出gltf格式，-d表示压缩
gltf-pipeline -i model.gltf -j -d

glb --------> gltf(bin)

#压缩glb文件并将纹理图片分离出来
gltf-pipeline -i scene.glb -j -d -t

glb --------> glb(压缩)

#单纯压缩gltb
gltf-pipeline -i model.glb -b -d

注意：如果加了-d压缩，加载模型不能单纯的直接用GLTFLoader。需要引入DRACOLoader。

// Instantiate a loader
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/js/libs/draco/' );
loader.setDRACOLoader( dracoLoader );
loader.load(// 模型地址'models/gltf/duck/duck.gltf',// called when the resource is loadedfunction ( gltf ) {scene.add( gltf.scene );},// 进度处理（关于进度加载完模型不出来，下篇再讲）function ( xhr ) {console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );},// 报错处理function ( error ) {console.log( 'An error happened' );}
);

gltf-pipeline压缩无效，内存不变的问题

有时候，模型体积很大并不是，模型的网格面很多，所以通过-d压缩是几乎无效的，因为这种模型很大很可能是，纹理贴图很大。

像这样一样，贴图信息几乎已经有了40m，网速快的话加载也需要半分钟，网速慢就完全没希望了。
如果是贴图很大可以通过最新推出的KTX2.0来解决纹理问题，但是为了方便，不如直接压缩png图片，推荐一款软件 ImageOptim。几乎无损压缩，
体积可以缩小1/3.当然了这种软件多的是，大家可以随便用个美图秀秀或者ps也行。

接下里就是体积网格压缩，可适当提高压缩等级
gltf-pipeline -i model.gltf -j -d
直接输入命令就可以。
总结：最好是想把模型拆分乘bin和纹理图片的格式。如果bin和gltf文件过大就用gltf-pipeline，如果纹理过大就直接压缩纹理图片。