glTF & GLB All In One

glTF = JSON 描述文件 + 外部资源

1. .gltf（核心）JSON 文件

描述：

• mesh 网格
• material 材质
• animation 动画
• node hierarchy 节点层级

2. .bin 二进制文件

vertex(vertices) 顶点数据（positions / normals / UV）位置/坐标 法线 UV

3. texture 纹理贴图
   .png / .JPG / EXR 等外部文件

model.gltf
model.bin
diffuse.png
normal.png
...
xyz.png

优点：

• 可读、可调试
• 方便拆解资产
• 适合开发阶段

缺点：

• 请求多（N+1 问题）
• 容易资源丢失
• 不适合线上分发

GLB = glTF 的二进制打包版

结构：
model.glb （一个文件包含所有内容）

内部包含：

• JSON chunk
• binary chunk（mesh）
• embedded textures（可选）

优点:（非常重要）

• 单文件加载, 一个 HTTP 请求搞定
• 更快, 减少 IO 请求延迟
• 更安全, 不会丢贴图/依赖
• 更适合生产环境, CDN 分发友好

缺点：

• 不可读
• 不方便手工修改
• debug 不直观

.gltf 与 .glb 的区别？

https://chatgpt.com/c/6a38f777-3e18-83ea-b699-ead7e8d36e75

A loader for the glTF 2.0 format.

glTF (GL Transmission Format) is an open format specification for efficient delivery and loading of 3D content. Assets may be provided either in JSON (.gltf) or binary (.glb) format. External files store textures (.jpg, .png) and additional binary data (.bin). A glTF asset may deliver one or more scenes, including meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and/or cameras.

glTF (GL Transmission Format) is an open format specification whenever possible. Be advised that image bitmaps are not automatically GC-collected when they are no longer referenced, and they require special handling during the disposal process.

glTF（GL传输格式）是一种用于高效传输和加载3D内容的开放格式规范。资源可以以JSON（.gltf）或二进制（.glb）格式提供。外部文件存储纹理（.jpg、.png）和其他二进制数据（.bin）。一个glTF资源可以包含一个或多个场景，其中包括网格、材质、纹理、蒙皮、骨骼、变形目标、动画、灯光和/或摄像机。

glTF（GL传输格式）尽可能采用开放格式规范。请注意，图像位图在不再被引用时不会自动被垃圾回收，因此在处置过程中需要特殊处理。

https://threejs.org/docs/?q=gltf#GLTFLoader

https://threejs.org/docs/?q=gltf#GLTFExporter

https://threejs.org/manual/?q=gltf#en/load-gltf

https://threejs.org/docs/#manual/en/introduction/Loading-3D-models

https://threejs.org/manual/#en/loading-3d-models

glTF - Runtime 3D Asset Delivery

glTF – 运行时 3D 资源交付

3D资产交付格式

glTF：3D领域的JPEG

glTF的核心是一个JSON文件，它描述了包含3D模型的场景的结构和组成，这些模型可以存储在单个二进制glTF文件（.glb）中。该文件的顶级元素包括：场景和节点、摄像机、网格、缓冲区、材质、纹理、蒙皮和动画。

2022年，glTF 2.0作为ISO/IEC 12113:2022国际标准发布，确立了glTF作为3D资产格式的全球地位。

https://www.khronos.org/gltf/
https://www.khronos.org/gltf/#gltf-spec

PBR (Physically Based Rendering)

KTX (Khronos Texture)

https://github.com/KhronosGroup/glTF

demos

.gltf 多文件(.pngs, .bin)

https://github.com/KhronosGroup/glTF-Sample-Assets/tree/main/Models/GlassHurricaneCandleHolder

.glb 单文件

WebGL & Three.js glTF loader

https://cdn.xgqfrms.xyz/webgl/three.js/gltf-loader/index.html

https://cdn.xgqfrms.xyz/webgpu/three.js/gltf-loader/index.html

WebGL & Three.js FBX loader

https://cdn.777737777.xyz/webgl/three.js/fbx-loader/index.html

Blender

Blender 模型导出的格式 (glTF 2.0)

.abc .usd* .obj .ply .stl .fbx .dae .bvh .glb/.gltf
.svg .pdf

.glb 单个文件

.gltf, .bin, .png 多个文件

Blender 模型导入的格式 (glTF 2.0)

.abc .usd* .obj .ply .stl .fbx .dae .bvh .svg .glb/.gltf

压缩工具

https://gltf-compressor.com/

UV

在 Three.js 中，UV 是指用于将 2D 纹理图像（贴图）包裹并映射到 3D 模型表面的二维坐标系统。

U 和 V 轴：为了区别于 3D 空间中的 X、Y、Z 坐标，UV 使用 U 和 V 来表示 2D 纹理的水平和垂直坐标。
坐标范围：UV 坐标通常被归一化在 [0.0, 1.0] 之间，即 (0,0) 代表图片的左下角（或左上角，取决于引擎），(1,1) 代表右上角。
对应关系：3D 模型上的每个顶点都会在几何体数据中绑定一个 UV 坐标，例如 (u, v)，这个对应关系决定了材质渲染时的贴图拉伸或平铺效果。

UV坐标定义了如何将二维纹理贴图映射到三维几何体的表面上。

每个顶点的UV坐标决定了纹理贴图的哪一部分应用在该顶点对应的位置上。

U轴：通常表示纹理图像的水平方向（从左到右），范围为0到1。
V轴：通常表示纹理图像的垂直方向（从下到上），范围为0到1。

通过设置每个顶点的 UV坐标，可以精确控制纹理在模型上的分布方式。

解决 3DMax 导出的模型与贴图，在 Web 中引用路径保错的问题！

FBX 是“3D资产的结构说明书”，TGA 是“贴在模型上的图片素材”。

https://chatgpt.com/c/6a38f777-3e18-83ea-b699-ead7e8d36e75

refs

https://www.cnblogs.com/xgqfrms/p/15908681.html

---

---

©xgqfrms 2012-2021

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---