GLTF Binary（GLB）格式解析

GLB（glTF Binary）是 GLTF（GL Transmission Format） 的二进制版本，所有数据都存储在一个 .glb 文件中，使其更适合网络传输和加载。

---

1. GLB 与 GLTF 的区别

格式	扩展名	特点	适用场景
GLTF（JSON）	.gltf	文本格式，几何、材质、纹理分开存储	可读性强，适合编辑
GLB（二进制）	.glb	二进制格式，所有数据（网格、贴图、动画）封装在一起	更小文件体积，更快加载

✅ GLB 优势：

• 更快加载（适用于 Web 3D 和游戏）

• 更小体积（比 GLTF + 纹理文件更紧凑）

• 易于分发（一个文件包含所有数据）

---

2. GLB 文件结构

GLB 文件由 3 个主要部分组成：

1. Header（文件头，12 字节）

   • 4 字节：魔数（Magic Number，glTF 标志）

   • 4 字节：版本号（当前为 2）

   • 4 字节：文件总长度

2. JSON Chunk（GLTF 元数据）

   • 包含场景、材质、网格、动画等信息（类似 .gltf 文件）

3. Binary Chunk（二进制数据）

   • 存储顶点、索引、纹理等数据（减少 HTTP 请求）

----------------------------------------------------
| Header (12 bytes)                                |
----------------------------------------------------
| JSON Chunk (scene, nodes, meshes, materials...) |
----------------------------------------------------
| Binary Chunk (geometry, textures, animations...)|
----------------------------------------------------

---

3. 如何加载 GLB 文件？

（1）Three.js 加载 GLB

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载 GLB 文件
const loader = new GLTFLoader();
loader.load('model.glb', function (gltf) {
    scene.add(gltf.scene);
}, undefined, function (error) {
    console.error('加载失败', error);
});

// 渲染
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

（2）Babylon.js 加载 GLB

const scene = new BABYLON.Scene(engine);
BABYLON.SceneLoader.Append("", "model.glb", scene, function () {
    console.log("GLB 加载成功");
});

---

4. 如何导出 GLB？

（1）Blender 导出 GLB

1. 打开 Blender

2. 选择模型

3. 点击 File > Export > glTF 2.0 (.glb, .gltf)

4. 选择 .glb 作为导出格式

5. 点击 Export glTF 2.0

（2）Three.js 导出 GLB

import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';

const exporter = new GLTFExporter();
exporter.parse(scene, function (gltf) {
    const blob = new Blob([gltf], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'scene.glb';
    a.click();
}, { binary: true });

---

5. GLB 适用场景

✅ Web 3D（Three.js, Babylon.js）
✅ 游戏引擎（Unity, Unreal Engine）
✅ AR / VR 应用（WebXR, ARKit, ARCore）
✅ 3D 电商 & 配置器（如在线 3D 预览）
✅ 实时渲染（比 FBX / OBJ 更快）

---

6. 总结

🔹 GLB 是 GLTF 的二进制版本，所有数据都封装在一个文件中
🔹 比 GLTF + 纹理文件更紧凑，加载更快
🔹 适用于 Web 3D、游戏开发、AR/VR、实时渲染
🔹 Blender / Three.js / Babylon.js / Unity / Unreal 均支持 GLB