什么是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 格式纹理

支持更高级的基于物理的渲染参数

作为最新趋势，在SIGGRAPH2025上发表的演讲中， 漫反射透射和体积散射 已宣布正在扩大通信。