一、GLB格式介绍
GLB是一种用于表示3D模型的文件格式,是GLTF格式的二进制版本,通过使用二进制格式,GLB能够更高效地加载模型,同时也增加了模型的安全性,避免了模型被不当地修改。 GLB格式具有以下特点:
- 二进制格式,加载速度快
- 自包含,包含了模型的所有数据,包括纹理、材质、动画等
- 可压缩,可以使用Gzip或Brotli等算法进行压缩,减小文件大小
- 平台无关,可以在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格式:
- 点击File -> Export -> glTF 2.0 (.glb),打开导出面板
- 修改导出设置,包括是否导出动画、是否压缩、是否合并节点等
- 点击Export GLB按钮,保存为GLB格式的文件
五、GLB模型优化
为了提高GLB模型的加载速度和性能,我们可以进行以下优化:
- 合并节点:将多个有关联的节点合并为一个节点
- 压缩纹理:使用较小的纹理分辨率和压缩算法,减小纹理大小
- 去除不必要数据:去除模型中不必要的材质、动画、节点等数据,减小文件大小
- 减小面数:减小模型的三角面数,减小模型的文件大小和渲染消耗
六、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);
}
);