glTF格式详解

简介

本文主要通过总结glTF文件格式来对3d模型有一个整体的认识概念，对glTF有了一个清晰的概念后我们可以简单试下如何解析一个glTF文件为模型，并且简单介绍下我对glTF文件在实际项目中应用优化的落地实践。

glTF作为一个标准的3d场景和模型文件格式，类似于图形中的jpeg，有两种文件扩展名：.gltf(JSON/ASCII)或者.gbl（二进制文件）两种类型。下图我们可以看到我在blender里简单放了一个cube后导出glTF2.0文件的话可以选择以下三种格式：glTF二进制（.glb）、glTF分离（.gltf+bin+纹理）、glTF嵌入式（.gltf）。

.gltf+bin+纹理

由于glb和glTF嵌入式主要是把所有的二进制 纹理数据全部打入到了一个文件中，道理是一样的，所以我们这里重点来拆解gltf+bin+纹理结构类型。

我们先来看一个.gltf+bin+纹理图片的文件目录例子，.gltf其实就是一个json文件，里面包括了3d 模型的场景的结构和组成。我们先来看这个json文件下的top-level elements：

这其中包含了一个模型场景中必备的几个元素：
asset标签里介绍了glTF版本这些基础信息；
scene，scenes，nodes标签里包含了一个场景的基本元素；
materials标签里包含了每个对象是如何呈现出来的定义；
meshes 标签里定义了所有的3d对象的几何形状；
textures, images, samplers标签里包含了物体的表面外观，贴纸等信息；
accessors, buffers, bufferViews标签里包含了整个3d模型场景里的数据引用和数据布局的描述。

当然还有我这个gltf里不包括的，也很常见的几个标签元素：
cameras 标签里包含了查看场景的配置信息；
上面标签信息我们下文都会有各自的案例介绍来帮助大家更全面的理解。

asset

glTF2.0版本以及是blender导出的等基础信息。关于glTF2.0与1.0的更新区别 可以参考这里。

scene, scenes, nodes

我们先来看我们这个gltf文件的结构

这代表我们scene里有一个场景，这个场景下包括了19个nodes节点，具体每个节点的属性我们看nodes节点，

nodes作为一个jsonArrayList包括了rotation旋转信息，scale大小 信息，translation位移信息等。然后每个节点都会指向一个mesh或者一个camera，上图中我们的模型中的nodes就指向的是meshid为0，name为转义过后的\ue573\u9762的mesh。然后在渲染的时候会将这些元素全部附加到这些个节点上，创建这些元素的实例就会使用节点上的各种旋转信息，大小信息，位移信息等进行变换了。
当然如果你的模型中出现group的时候，那么你的nodes下的节点会出现children，children是一个数组，里面的id对应的是nodes节点下的nodes[x]，即为nodes[x]是有children的节点的children。
另外在模型场景中如果我们对某个mesh做动画的话，这里的translation，scale，rotation都是可变的，会随着动画的进行而重新建模。

materials

ok我们接下来来看materials，在3d设计中，要创造出逼真的效果，就必须弄清楚材质属性。材质的意思就是虚拟中模拟物体真实的物体性质，例如颜色、反光、透明、贴图等；而材质球就是对这个材质的属性整合的统称。
这里我们重点来看pbrMetallicRoughness属性，baseColorTexture属性是应用于对象的主要纹理，基本颜色因子包括了三个基础颜色，RED GREEN BLUE和代表alpha的比例因子。如果没有使用纹理的话，这些值的意思就是金属粗糙度纹理的颜色。粗糙度纹理包含金属度值“蓝色”颜色通道，粗糙度值包含“绿色”颜色通道。
metallicFactor代表了金属系数，很明显我们上面的模型中金属系数为0。
当然除了金属粗糙度以外，material可能还包括其他影响对象外观的特性，这里建议直接在threejs editor里调整好再用于开发，editor上可以很直观的看到金属感和粗糙度上变更后效果的差异。

meshes

mesh的意思其实就是模型的几何体，与material配合，每个网格图元都有一个渲染模式，该模式是一个常量，指示是否应渲染为点。线。或三角形基本体还引用顶点的音调和属性，使用访问器的属性来访问其数据。这里我们主要来看primitives属性，primitives引用了顶点的vertices和属性，使用访问器的属性就可以直接访问他的数据了。每个属性都是通过将attributename映射到包含属性数据的访问器的索引来定义的。渲染网格时，此数据将用作顶点属性。例如，属性可以定义顶点的位置和法线：

textures, images, samplers

textures包含有关可应用于渲染对象的纹理的信息：材质引用纹理来定义对象的基本颜色，以及影响对象外观的物理属性。
这些图像定义了用于纹理的imagedata，数据通过一个URI(图像在文件中的位置)来给定，或者通过引用一个bufferView和一个MIME类型来定义存储在缓冲区视图中的iamgedata类型。这个很好理解

accessors, buffers, bufferViews

buffers包含了用于三维模型几何体、动画和蒙皮的数据缓冲区视图等结构信息。每个缓冲区使用URL引用一个二进制数据文件。它是一个原始数据块的源，每个缓冲区视图引用一个缓冲区。它是字节偏移量（byteoffset）和字节长度（abytelength），定义属于bufferview的缓冲区的部分，以及可选的Openglbuffer目标。访问器定义如何对bufferview的数据进行交互。它们可以定义引用bufferview开始的附加字节偏移量，并包含有关bufferview数据类型和布局的信息。
其实可以这么理解，例如，当类型为“VEC2”且组件类型为GL FLOAT（5126）时，可以将数据定义为浮点值的二维向量。所有值的范围存储在“最小值”和“最大值”属性中。多个存取器的数据可以在bufferview中交错。在这种情况下。bufferview将有一个bytestride属性，该属性表示Accessor的一个元素的开头之间有多少字节。

cameras

camera总共分为两种，透视相机和正交相机，它们定义了投影矩阵。透视camerazfar的远剪裁平面距离的值是可选的。当省略时，摄像机会为无限投影使用一个特殊的投影矩阵。
当文件中一个节点引用摄像机时，就可以理解成创建了一个相机的实例，该相机实例的摄像机矩阵其实就是该node下的transform、scale等变换矩阵给到的。

压缩优化

图片压缩

上面我们看到其实一个模型的texutures是直接引用外部的URI链接来引用图片然后链接到面上的贴图，那么如果从图片角度，我们就可以做到图片的压缩来实现模型的压缩。
blender里导出的默认是png格式的图片，那么我们就可以转换成webp格式，至于webp格式比png的区别，如果不知道的朋友可以去看这篇webp相对png、jpg有什么优势。

经测试，图一中的模型，压缩前为2.21MB，压缩后为1.01MB，压缩率可见一斑，而且如果你是webp无损压缩的话，理论上来说模型效果其实没啥影响。

这里推荐一个官方出的插件，EXT_texture_webp.

当然这个方案也有一个问题，如果你是使用threejs 的话，webp的不支持浏览器类型和threejs 不支持的浏览器有所出入，适配上需要考虑到这一点。

EXT_meshopt_compression

刚才我们压缩针对的是texture图片资源，那么这个方案我们针对的就是glTF文件中的各种二进制数据了，理论上来说glTF文件中的二进制数据包含了各种顶点属性数据、索引数据、变形目标增量、动画输入输出数据，他们可能会占据整个glTF文件中很大一部分，所以这些二进制数据我们可以采用gzip通用压缩的形式去处理。

使用方式：

gltfpack -i untitled.glb -o untitled-meshopt-compression.glb -cc

经测试，图一中的模型，压缩前为2.21mb，压缩后为1.45mb。

总结

其实gltf官方还给了我们很多优秀的压缩插件，具体我们可以查看glTF官方git地址，https://github.com/KhronosGroup/glTF 查阅。