glTF/glb 格式完整指南：3D 模型交付的新标准-GLB下载网 - GLB/GLTF模型与格式资源免费下载，支持在线浏览与转换

glTF/glb 格式完整指南：3D 模型交付的新标准

什么是glTF？

glTF（GL Transmission Format）是 Khronos 集团开发的一种 3D 场景和模型传输格式。它也称为“JPEG in 3D”，专为高效的 3D 内容交付而设计。

1.0 版本于 2015 年发布，glTF 2.0 现已被广泛采用为标准。

glb格式下载官网

主要设计目标

紧凑的文件大小：针对网络传输进行了优化
快速加载：发送到 GPU 的处理最少
互作性：跨不同平台的一致显示
可扩展性：灵活的机制来添加新功能

glTF的特点

1. 高效的数据结构

与 FBX 和 OBJ 等传统格式相比，glTF 在以下方面具有优势：

减小文件大小：

FBX 格式是一种专有的二进制格式，往往具有冗余元数据
OBJ 格式具有很强的可读性，但它通常包含相同数据的重复项
glTF 通过分层参考系统消除了重复数据，在多个位置使用同一网格时仅保存一次数据

提高加载速度：

常规格式需要在读取后转换为 GPU 格式
glTF 以可直接复制到 GPU 缓冲区的格式存储顶点数据，大大减少了 CPU 处理时间

内存效率：

顶点数据以数组格式连续存储，以避免内存碎片 { “scene”: 0, “scenes”: [ { “nodes”: [0] } ], “nodes”: [ { “mesh”: 0, “name”: “Cube” } ], “meshes”: [ { “primitives”: [ { “attributes”: { “POSITION”: 0, “NORMAL”: 1, “TEXCOORD_0”: 2 }, “indices”: 3, “material”: 0 } ] } ] }

2. GPU优化

顶点数据以可直接复制到 GPU 缓冲区的格式存储，需要最少的 CPU 预处理。

3. 基于物理的渲染（PBR）支持

glTF 2.0 默认支持现代 PBR 材质：

{ “materials”: [ { “name”: “Material”, “pbrMetallicRoughness”: { “baseColorFactor”: [1.0, 1.0, 1.0, 1.0], “metallicFactor”: 0.0, “roughnessFactor”: 1.0 } } ] }

文件结构

glTF 可以以多种文件格式分发：

1. 标准 glTF（.gltf + .bin + 纹理）

model.gltf # JSONメタデータ model.bin # バイナリデータ texture_diffuse.png # テクスチャファイル texture_normal.png # ノーマルマップ

2. 二进制 glTF （.glb）

将所有数据合并到一个文件中：

model.glb # JSONメタデータ + バイナリデータ + テクスチャ

JSON 元数据

glTF 文件的核心 JSON 结构：

{ “asset”: { “version”: “2.0”, “generator”: “samething generated tools name” }, “accessors”: […], “bufferViews”: […], “buffers”: […], “materials”: […], “meshes”: […], “nodes”: […], “scenes”: […], “textures”: […] }

二进制数据

顶点坐标、法线、UV 坐标、索引数据等以高效的二进制格式存储。

glTF 2.0 中的改进

1. 基于物理的渲染（PBR）的标准化

金属粗糙度工作流程
准确表示环境光
材料的物理精度

2. 增强动漫能力

与传统 2.0D 格式相比，glTF 3 在动漫功能方面有了显着改进：

关键帧动漫：

沿时间轴的详细关键帧控制
支持线性、步进和样条插值
同时控制多个动漫轨迹

动漫目标的扩展：

独立控制位置、旋转和刻度
材质参数动漫
变形目标（混合形状）的权重控制 { “animations”: [ { “channels”: [ { “sampler”: 0, “target”: { “node”: 1, “path”: “rotation” } } ], “samplers”: [ { “input”: 4, “interpolation”: “LINEAR”, “output”: 5 } ] } ] }

3. 蒙皮和变形

支持角色动漫和面部动漫。

实现示例

装入Three.js

import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’; const loader = new GLTFLoader(); loader.load(‘path/to/model.glb’, function (gltf) { scene.add(gltf.scene); // アニメーションの再生 if (gltf.animations.length > 0) { const mixer = new THREE.AnimationMixer(gltf.scene); const action = mixer.clipAction(gltf.animations[0]); action.play(); } }, function (progress) { console.log(‘Loading progress:’, progress.loaded / progress.total * 100 + ‘%’); }, function (error) { console.error(‘Loading error:’, error); });

装入Babylon.js

BABYLON.SceneLoader.ImportMesh(“”, “path/to/”, “model.glb”, scene, function (meshes) { // メッシュが読み込まれた後の処理 meshes.forEach(mesh => { mesh.position = new BABYLON.Vector3(0, 0, 0); }); });

扩展

glTF 的主要特点之一是其可扩展性。关键扩展：

KHR_materials_unlit

非发光材料（移动优化）：

{ “materials”: [ { “extensions”: { “KHR_materials_unlit”: {} }, “pbrMetallicRoughness”: { “baseColorTexture”: { “index”: 0 } } } ] }

KHR_draco_mesh_compression

几何体压缩（文件大小减小）

一种称为 draco 压缩的算法可以减小网格的数据大小。但是，由于有损压缩，一些数据被重写。

KHR_lights_punctual

点光源、定向光源、聚光灯

EXT_texture_webp

支持 WebP 格式纹理