什么是 GLTF 和 GLB
GLTF（GL Transmission Format）由 Khronos Group 于 2015 年发布，定位是"做 3D 图形领域的 JPEG"——就像 JPEG 是照片的标准格式、MP4 是视频的标准格式，GLTF 要做 3D 内容的通用交换格式。
它有两个文件形式：
// .gltf — JSON 文本 + 独立的 .bin 几何数据 + 贴图文件
scene.gltf ← JSON 文本（场景结构、材质、动画信息）
scene.bin ← 二进制几何数据（顶点、法线、索引）
texture_diffuse.png ← 贴图文件（独立存储）
// .glb — 把上面所有文件打包成一个二进制文件
scene.glb ← 单文件包含所有几何+贴图+场景信息GLTF 的核心优势：① GPU 友好的数据结构（几何数据可直接上传到显存，无需解析转换）；② 完整支持 PBR（基于物理的渲染）材质——金属度、粗糙度、法线贴图等；③ 支持骨骼动画和变形目标（Blend Shapes）；④ 开放标准、免版税、生态繁荣。
在线查看 GLTF/GLB 的步骤
- 打开 3D 模型查看器。
- 将 .gltf 或 .glb 文件拖入页面。如果是 .gltf，确保同目录下有配套的 .bin 文件和贴图文件夹。
- 模型加载后，PBR 材质自动渲染——金属的反射、粗糙度、法线凹凸都能正确显示。
- 如果模型含动画，点击播放按钮观看骨骼动画或变形目标（morph targets）效果。
核心功能一览
PBR 材质完整渲染
金属度、粗糙度、法线、AO、发光贴图全支持，接近游戏引擎画质。
动画播放
支持骨骼蒙皮动画和变形目标（Morph Targets），可切换播放不同动画剪辑。
GLTF + GLB 双模式
JSON 文本 .gltf 和二进制 .glb 都能打开，自动检测格式。
环境光照预览
使用基于图像的光照（IBL）环境贴图，模型在真实光照环境中预览。
GLTF vs OBJ vs FBX：谁是未来
| 维度 | GLTF/GLB | OBJ | FBX |
|---|---|---|---|
| 标准性质 | 开放标准（Khronos） | 开放但无官方维护 | Autodesk 私有 |
| PBR 材质 | 原生完整支持 | 仅 Blinn-Phong（MTL） | 支持但规范复杂 |
| 骨骼动画 | 原生支持 | 不支持 | 完整支持 |
| GPU 友好 | 是（二进制可直接上传显存） | 否（需文本解析） | 部分 |
| Web / 移动端 | 最佳选择 | 勉强可用 | 不推荐 |
常见应用场景
- 电商 3D 商品展示：Shopify、Amazon 等平台的 3D 商品预览均使用 GLB 格式。将产品模型转为 GLB 后嵌入商品详情页，用户可在浏览器中旋转缩放查看。
- AR 试穿/试戴：眼镜、鞋子、手表等 AR 试戴功能基于 GLTF 的 PBR 材质实现逼真渲染。
- 网页 3D 交互：Three.js、Babylon.js 等 WebGL 框架首选 GLTF 格式，加载速度快、渲染效果好。
- 元宇宙/虚拟空间：VRChat、Decentraland 等平台的角色和场景多采用 GLTF/GLB。
- 游戏资源预览：Unity 和 Unreal Engine 均支持 GLTF 导入导出，下载的 3D 素材先在线预览再导入项目。
常见问题 FAQ
GLTF 和 GLB 有什么区别？该用哪个？
.gltf 是 JSON 文本文件，贴图和几何数据通过独立链接引用，适合开发调试（可直接查看和编辑 JSON 场景结构）。.glb 是把所有数据打包成一个二进制文件，体积更小、只需一次 HTTP 请求就能加载完毕，适合生产部署和分发。建议：开发阶段用 .gltf 方便调试，上线时转为 .glb。
GLTF 比 OBJ/FBX 好在哪里？
GLTF 专为 Web 和实时渲染设计：原生 PBR 材质（金属度、粗糙度等物理属性）、GPU 可直接消费的二进制几何数据（无需文本解析）、内置骨骼动画和 Blend Shapes。OBJ 只能用简单的 MTL 材质且不支持动画，FBX 虽然是全功能格式但属于 Autodesk 私有格式、Web 端解析复杂。如果目标平台是 Web/移动端/AR，GLTF 是目前最优选。
怎么把其他格式（OBJ/FBX/STL）转成 GLTF/GLB？
使用 速工具 的 3D 模型格式转换器，选择源格式文件 → 目标格式选择 GLTF 或 GLB → 点击转换 → 下载转换结果。转换在浏览器本地完成，文件不会被上传。如果源模型的贴图是简单的漫反射贴图，转换器会自动生成基础的 PBR 材质映射。
GLB 文件可以直接放到网页里展示吗？
可以，这正是 GLB 的核心设计目标之一。使用 Three.js 的 GLTFLoader：new GLTFLoader().load('model.glb', gltf => scene.add(gltf.scene))，几行代码就能在网页中展示可交互的 3D 模型。无需任何插件，浏览器原生支持 WebGL 渲染。