GLTF（GL Transmission Format）是一种专为高效传输和渲染 3D 模型设计的文件格式。今天，我们将以一次深入解析 GLTF 文件的过程，带你全面了解它的结构、关联方式以及使用方式。

一、初识 GLTF 文件

在开始我的介绍之前，我先放一张官方的图片，上面使用图形化的方式描述了gltf的格式规范（英文的），各位看官可以在官方网站上找到这张图：

GLTF 文件通常以 .gltf 或 .glb 作为后缀名，其中 .gltf 是 JSON 格式文件，可能会附带二进制文件（.bin）和图片素材；而 .glb 则是将所有数据整合成一个二进制文件。

解析的第一步是加载 JSON 文件，我们以 Node.js 为例：

1. const fs = require(‘fs’);
3. const gltfPath = ‘./model.gltf’;
4. const gltfData = JSON.parse(fs.readFileSync(gltfPath, ‘utf-8’));
5. console.log(‘GLTF 文件内容:’, gltfData);

读取后的文件内容是一个包含多个字段的 JSON 结构：asset 描述文件信息，scenes 定义场景结构，nodes 是场景中具体的节点等。

二、核心数据结构与关联

1. scenes 和 nodes

scenes 是 GLTF 的入口，每个场景会引用若干节点（nodes）。

1. “scenes”: [
2. {
3. “nodes”: [0]
4. }
5. ],
6. “nodes”: [
7. {
8. “name”: “RootNode”,
9. “children”: [1, 2]
10. },
11. {
12. “mesh”: 0
13. },
14. {
15. “mesh”: 1
16. }
17. ]

关联关系图：

1. Scene (0) –> Node (0: RootNode)
2. |–> Node (1: Mesh 0)
3. |–> Node (2: Mesh 1)

在代码中，我们可以递归解析场景和节点：

1. function traverseNodes(nodes, currentNodeIndex) {
2.  const node = nodes[currentNodeIndex];
3.  console.log(‘Node:’, node.name);
4. ​
5.  if (node.children) {
6.    node.children.forEach(childIndex => traverseNodes(nodes, childIndex));
7. }
8. }
9. ​
10. const nodes = gltfData.nodes;
11. gltfData.scenes[0].nodes.forEach(nodeIndex => traverseNodes(nodes, nodeIndex));

2. meshes 和 primitives

meshes 定义几何数据，它由一个或多个 primitives 构成，而 primitives 包含顶点属性和材质信息。

1. “meshes”: [
2. {
3. “primitives”: [
4. {
5. “attributes”: {
6. “POSITION”: 0,
7. “NORMAL”: 1
8. },
9. “indices”: 2,
10. “material”: 0
11. }
12. ]
13. }
14. ]

• POSITION: 定义顶点位置。
• NORMAL: 定义法线方向。
• indices: 定义三角形索引。

关联关系图：

Mesh --> Primitive --> Attributes (POSITION, NORMAL, ...) --> Accessors --> BufferViews --> Buffers

3. buffers 和 bufferViews

顶点、索引等数据存储在二进制文件中，通过 buffers 字段引用。

1. “buffers”: [
2. {
3.    “uri”: “model.bin”,
4.    “byteLength”: 1024
5. }
6. ],
7. “bufferViews”: [
8. {
9.    “buffer”: 0,
10.    “byteOffset”: 0,
11.    “byteLength”: 512,
12.    “target”: 34963
13. }
14. ]

关联示意图：

Buffer (model.bin) --> BufferView (byteOffset, byteLength)

通过 Node.js 加载并解析 buffer 数据：

1. const bufferData = fs.readFileSync(‘./model.bin’);
2. const bufferView = gltfData.bufferViews[0];
3. const extractedData = bufferData.slice(
4.  bufferView.byteOffset,
5.  bufferView.byteOffset + bufferView.byteLength
6. );
7. console.log(‘提取的二进制数据:’, extractedData);

4. materials 和 textures

materials 定义了模型的材质属性，包括金属度、粗糙度等，而 textures 则关联了图片数据。

1. “materials”: [
2. {
3.    “pbrMetallicRoughness”: {
4.      “baseColorTexture”: {
5.        “index”: 0
6.     }
7.   }
8. }
9. ],
10. “textures”: [
11. {
12.    “source”: 0
13. }
14. ],
15. “images”: [
16. {
17.    “uri”: “texture.png”
18. }
19. ]

关联流程：

Material --> Texture --> Image (texture.png)

三、构建图形化示意图

以下是关联关系的总体结构图：

1. 顶层结构：场景与节点

Scene --> Nodes --> Meshes

1. 几何数据路径

Mesh --> Primitive --> Attributes --> Accessors --> BufferViews --> Buffers

1. 材质与纹理路径

Material --> Texture --> Image

四、完整解析示例

将以上模块结合起来，我们可以解析完整的 GLTF 模型。

1. function parseGLTF(gltfPath, binPath) {
2.  const gltfData = JSON.parse(fs.readFileSync(gltfPath, ‘utf-8’));
3.  const bufferData = fs.readFileSync(binPath);
4. ​
5.  gltfData.scenes.forEach(scene => {
6.    console.log(‘Scene:’, scene);
7.    scene.nodes.forEach(nodeIndex => {
8.      traverseNodes(gltfData.nodes, nodeIndex);
9.   });
10. });
11. ​
12.  gltfData.meshes.forEach(mesh => {
13.    mesh.primitives.forEach(primitive => {
14.      const positionAccessor = gltfData.accessors[primitive.attributes.POSITION];
15.      const positionBufferView = gltfData.bufferViews[positionAccessor.bufferView];
16.      const positionData = bufferData.slice(
17.        positionBufferView.byteOffset,
18.        positionBufferView.byteOffset + positionBufferView.byteLength
19.     );
20.      console.log(‘顶点位置数据:’, positionData);
21.   });
22. });
23. }
24. ​
25. parseGLTF(‘./model.gltf’, ‘./model.bin’);

通过上述代码，我们完成了从场景到几何数据、再到材质与纹理的完整解析。