GLB格式详解

ABZIM • 2025-02-01 13:34 • 编程

一、GLB格式介绍

GLB是一种用于表示3D模型的文件格式，是GLTF格式的二进制版本，通过使用二进制格式，GLB能够更高效地加载模型，同时也增加了模型的安全性，避免了模型被不当地修改。

GLB格式具有以下特点：

1. 二进制格式，加载速度快

2. 自包含，包含了模型的所有数据，包括纹理、材质、动画等

3. 可压缩，可以使用Gzip或Brotli等算法进行压缩，减小文件大小

4. 平台无关，可以在Web、移动平台、桌面平台等各种场景中使用

二、GLB文件结构

GLB格式文件包含两部分：Header和Chunk。

Header：

  0      4     'g'
  1      4     'l'
  2      4     'T'
  3      4     'F'
  4      4     版本号，默认为2
  8      4     文件长度，单位为字节

Chunk：

Chunk包含两部分：Chunk头和Chunk内容。

Chunk头包含以下信息：

  0      4     Chunk长度，单位为字节
  4      4     Chunk类型，分别为JSON和二进制数据，分别对应的数值为0x4E4F534A和0x004E4942

Chunk内容根据Chunk类型的不同而不同。当Chunk类型为JSON时，Chunk内容为JSON格式的数据，该数据与GLTF格式的JSON部分相同；当Chunk类型为二进制数据时，Chunk内容为二进制格式的数据。

三、GLB文件加载过程

在Web中，我们可以使用三种方式加载GLB模型：XMLHttpRequest，Fetch API，和WebGL API。

其中，XMLHttpRequest和Fetch API是通过XMLHttpRequest对象和fetch函数发送HTTP请求获取GLB模型数据，再将数据传入GLTFLoader进行解析和渲染；WebGL API则是通过WebGLRenderingContext.loadGLTF函数直接加载GLB模型。

四、GLB模型制作

我们可以使用多种3D建模软件来制作GLB模型，最常用的是Blender。

在Blender中，我们可以通过如下步骤将模型保存为GLB格式：

1. 点击File -> Export -> glTF 2.0 (.glb)，打开导出面板

2. 修改导出设置，包括是否导出动画、是否压缩、是否合并节点等

3. 点击Export GLB按钮，保存为GLB格式的文件

五、GLB模型优化

为了提高GLB模型的加载速度和性能，我们可以进行以下优化：

1. 合并节点：将多个有关联的节点合并为一个节点

2. 压缩纹理：使用较小的纹理分辨率和压缩算法，减小纹理大小

3. 去除不必要数据：去除模型中不必要的材质、动画、节点等数据，减小文件大小

4. 减小面数：减小模型的三角面数，减小模型的文件大小和渲染消耗

六、GLB模型示例代码

以下是一个简单的使用GLTFLoader加载GLB模型的代码示例：

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

const loader = new GLTFLoader();
loader.load(
    'model.glb',
    function (gltf) {
        scene.add(gltf.scene);
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },
    function (error) {
        console.error(error);
    }
);

原创文章，作者：ABZIM，如若转载，请注明出处：https://www.506064.com/n/333521.html