glTF /glb规范及其输出方法

什么是 glTF？
常见的图像格式包括 PNG 和 JPEG。 有 MP3 音频和 MP4 视频。 那么，3D 模型最常见的格式是什么？
已经有通用格式，例如 和 （COLLADA） 和专用于 3D 建模工具的文件格式。 但是，这些文件格式在 Internet 上使用时效率低下，因为它们非常依赖建模工具，并且即使它们是通用格式，它们也旨在供脱机使用。.obj.fbx.dae.3ds.blend
glb官方下载 glbxz.com glb/gltf格式文件
glTF 通过提供完全开放、公开且与平台无关的文件格式来解决这些问题。 它的出现是为了在 3D 模型中像 PNG 和 MP4 一样站立。 glTF 是一种用于 3D 运行时（包括 WebGL 和 OpenGL）的文件格式，旨在通过 Internet 进行分发。
glTF 规范由 Kronos Group（一个类似于 HTML 中的 W3C 的组织）在 GitHub 上开发，关于 glTF 的扩展规范和问题的讨论仍在积极进行中。

添加图片注释，不超过 140 字（可选）
glTF 的 MIME 类型正式注册为 model/gltf+json，可以说是官方认可的规范。

添加图片注释，不超过 140 字（可选）
现在，正如你们中的一些人通过查看 MIME 类型可能已经注意到的那样，glTF 是 JSON 格式。 因此，您也可以使用文本编辑器打开它。 然而，实际上，虽然它是 JSON，但它并不是手写的文件。 glTF 文件将由 3D 建模工具直接输出。 另一方面，由于它是 JSON 格式，因此具有易于解析的优点，并且可以使用 JavaScript 加载并在 WebGL 中使用。
glTF 1.0 于 2015 年首次发布。 2017 年，glTF 2.0 发布，更加抽象和通用。 glTF 2.0 删除了对 glTF 1.0 中存在的着色器的直接引用，同时增加了对 PBR（基于物理的渲染）* 参数的支持。

• 术语：基于物理的渲染
  基于物理的着色是一种渲染技术，可再现现实世界的物理现象，例如光线的反射和散射。
  让我们看一下 glTF 1.0 和 glTF 2.0 中 glTF 的一般文件结构示例。 glTF 1.0 文件内容的示例类似于以下代码（请放心，它不是应该由人工编写的文件）： 您可以看到着色器的源代码在名为 .uri
  "programs": { "program0": { "attributes": [ "a_position" ], "fragmentShader": "fragmentShader0", "vertexShader": "vertexShader0" } }, "shaders": { "vertexShader0": { "type": 35633, "uri": "./my-vertex-shader-source.txt" }, "fragmentShader0": { "type": 35632, "uri": "./my-fragment-shader-source.txt" } },
  对于 glTF 2.0 中的 PBR，它可以用基色（反照率）、粗糙度（粗糙度）和金属感（金属）的最小值来表示。
  glTF 2.0 文件内容的示例可能类似于以下代码（别担心，这也不是应该由人类编写的文件）：
  { "materials": [ { "name": "gold", "pbrMetallicRoughness": { "baseColorFactor": [ 1.000, 0.766, 0.336, 1.0 ], "metallicFactor": 1.0, "roughnessFactor": 0.0 } } ] },
  这种抽象允许 glTF 广泛使用，而无需依赖运行时或着色器语言（如 OpenGL 或 DirectX）。
  glTF 提供的字段不仅允许您定义网格和材质，还允许您定义骨骼动画和变形动画，例如，可用于游戏角色。 还有一个扩展区域，其中一个是 Draco 压缩支持*。 但是，扩展是否实际可用取决于 glTF 编码器和解码器的功能。
  *术语：Draco
  Draco 是 Google 专为开放许可的 3D 模型开发的一种超级强大的压缩方法。 可以将 3D 模型的数据容量压缩到大约 1/10。
  许多 3D 建模工具、游戏引擎和 WebGL 库已经支持 glTF。
  言归正传，您还可以在 Facebook 上上传 glTF 文件。 您可以在 Facebook 上发布使用 ARKit 和 ARCore 兼容的智能手机相机的 3D 扫描场景的时代可能指日可待。

添加图片注释，不超过 140 字（可选）
glTF 的规格很复杂，但这就是您在使用它时需要了解的全部内容。 我们通常在 Web 开发中大量使用 PNG 图像，但很少有人深入了解 PNG 本身的规范。 同样，我认为当涉及到 glTF 时，“可用知识”比“文件格式本身的知识”更重要。
输出 glTF 文件
从这里开始，我将介绍如何将 3D 模型输出为 glTF 文件。 输出 glTF 文件有两种主要方法：
将现有的 3D 模型文件（或例如）转换为 glTF 格式.obj.dae
使用 3D 建模工具以 glTF 格式输出
前者是将 OBJ 和 COLLADA 等传统文件格式的 3D 模型数据简单地转换为 glTF 的过程。 您可以从 Web 服务或命令行使用转换函数。 在转换过程中，您将无法编辑 3D 模型本身，但如果您的目标是使用现有资源获取 glTF 文件，则这就足够了。
转换工具的一个例子是 Web 服务 “glTF Model Converter”，只需拖放模型文件即可使用。

添加图片注释，不超过 140 字（可选）
另一方面，您也可以直接从 3D 建模工具将 3D 模型输出为 glTF 以获取 glTF 文件。 目前，它通常作为建模工具的第三方扩展提供，但如果 glTF 得到广泛应用，它可能作为建模工具的内置功能提供。
导出器的一个示例是 Kronos Group 为 Blender 提供的 Khronos Group Blender 导出器。
在这里，我们来看看如何使用 “Khronos Group Blender Exporter” 输出 glTF。 许多 3D 建模工具都是昂贵的软件，但 Blender 是开源且免费使用的，并且具有与其他 3D 建模工具相当的功能。
使用 glTF 在 Blender 中输出 3D 模型
现在，我们来看看如何使用 Blender 输出到 glTF。 首先，如果你没有安装 Blender，那就去买吧。 您可以免费下载适用于 Windows、macOS 和 Linux 的应用程序。
在 Blender 主页上，选择“下载 Blender”以下载并安装与您使用的作系统匹配的应用程序。

添加图片注释，不超过 140 字（可选）
此外，您还应该下载“Khronos Group Blender Exporter”，它是作为 Blender 的附加组件提供的。 “Khronos Group Blender Exporter” 在 GitHub 上进行管理。 从项目存储库的 “Clone or donwload” 中，选择 “Donwload ZIP” 以获取附加组件。

添加图片注释，不超过 140 字（可选）
一旦你手头有 Blender 和 Khronos Group Blender Exporter，就在 Blender 中安装 Khronos Group Blender Exporter。 首先，将 “io_scene_gltf2” 文件夹放在指定的目录中。 放置位置因作系统而异。 “io_scene_gltf2”文件夹存储在下载的 ZIP 文件的“scripts/addons”中。
图片上传失败
​重试
放置提取的 io_scene_gltf2 文件夹。 请注意，地点的位置因作系统而异。
对于 Windows
C:\Program Files\Blender Foundation\Blender\2.7X\scripts\addons\

添加图片注释，不超过 140 字（可选）
对于 macOS
/Applications/blender.app/Contents/Resources/2.7X/scripts/addons/
由于 blender.app 不是文件夹，因此通常无法打开它，但可以右键单击（双指单击）Blender.app 并选择 Show Package Contents （显示包内容） 以查看应用程序包中的文件。

添加图片注释，不超过 140 字（可选）
从这里开始，这是 Windows 和 macOS 的常见作。
放置 “Khronos Group Blender Exporter” 后，在 Blender 中激活该插件。 打开 Blender（如果 Blender 已打开，请将其关闭），然后转到菜单栏中的 [文件] 并选择 [用户首选项...]以打开设置。

添加图片注释，不超过 140 字（可选）
当设置屏幕打开时，请按照以下步骤激活附加组件。
选择 Add-ons 选项卡并搜索 “gltf”
检查您刚刚放置的名称为“Import-Export： glTF 2.0 format”的附加组件
按底部的 [保存用户设置] 按钮进行应用。

添加图片注释，不超过 140 字（可选）
这样就完成了设置。 让我们从 Blender 输出 glTF。 您可以从下面下载 Blender 的模型文件以练习作。 最好在实际移动双手的同时尝试一下。
用于练习作的 Blender 模型文件
（点击以下链接开始下载）

barger.zip

在 Blender 中打开模型文件（如果您使用的是练习模型文件，则为 barger.blend）。 打开后，从菜单栏中选择 File > Export > glTF2.0 （glTF） 。 如果您在导出列表中没有看到 “glTF2.0”，请查看附加组件安装过程。

添加图片注释，不超过 140 字（可选）
导出完成后，您将获得多个文件。 主体 “. gltf“，其中网格等顶点以二进制格式存储。 bin“和纹理图像。 此处输出的多个文件都是必需的文件。
图片上传失败
​重试
顺便说一句，当我用文本编辑器打开主机的 glTF 文件时，我得到了以下“. gltf“文件。
"buffers" : [ { "byteLength" : 325416, "uri" : "barger.bin" } ], "images" : [ { "uri" : "meat.png" }, { "uri" : "buns.png" }, { "uri" : "cheese.png" }, { "uri" : "pickles.png" }, { "uri" : "tomato.png" } ],
现在您有了一个 WebGL 的 3D 模型文件！
注意纹理图像的格式和大小
在 Web 上使用时，纹理图像的格式必须采用可在 Web 浏览器中显示的格式，例如 PNG 或 JPEG。
另一方面，3D 模型可能使用 Web 浏览器不支持的纹理，例如 TGA、TIFF 和 DDS。 在这种情况下，从 glTF 链接的图像文件可能会以 Web 浏览器不支持的格式输出。
如果纹理图像不是 Web 友好的，您可以提前在 3D 建模器上更改纹理图像的格式，或者在 glTF 输出后将图像文件转换为 JPEG，以便在浏览器中加载 glTF。 小心图像格式。
此外，即使纹理图像以 PNG 或 JPEG 格式提供，图像也可能很大。 如果您在 Web 上使用它，2048px 就可以了，即使对于大纹理图像也是如此。 太大的纹理图像将需要更长的时间来下载。 根据需要缩小它。 但是，请注意将纹理图像保持为 2 的幂大小。 如果大小不是 2（2 n） 的幂，则很难处理为浮点（浮点类型），并且性能会下降，图像不会很好地缩小。
用于对相关文件进行分组的 GLB 格式
从本质上讲，glTF 3D 模型由一个 JSON 格式的 glTF 文件以及它引用的网格数据和图像文件的几个相关文件组成*。 但是，如果将其划分为多个文件，则文件管理会变得复杂。
*注意：使用 dataURI
glTF 文件中的相关资源基本上由相对 URL 引用。 事实上，您还可以使用 dataURI 通过 URL 进行引用。 在这种情况下，您还可以将所有资源嵌入到 glTF JSON 文件中。 但是，与原始文件相比，dataURI 资源将增加约 30% 的容量。
因此，有一种机制允许您将这些合并到一个文件中。 这个文件称为 glb （glTF-Binary）。
glTF 文件和 glb 文件完全相同，可以从 glTF 转换为 glb 或从 glb 转换为 glTF。
您还可以使用 “glTF Model Converter” 在 glTF 和 glb 之间进行转换。 在屏幕底部的“选择目标 glTF 版本”中，您可以通过将一组 glTF 文件拖放到选中“glTF 2.0”和“输出 glb”的屏幕中来将它们转换为单个 glb 文件。
添加图片注释，不超过 140 字（可选）
现在，乍一看，单个文件中的 glb 更易于管理，并且似乎比 glTF 更好。 但是，由于 GLB 是单个文件，因此内容是未知的。
glb：这是一个单独的文件，但你不知道里面有什么
glTF：多个文件，但您知道什么构成
了解了 glTF 和 glb 的特性，我推荐以程。
在开发过程中，使用 glTF 输出并检查文件结构。
如果纹理图像文件太大或图像格式无法在 Web 上处理，可以对其进行编辑，然后转换为 glb 进行制作
请注意，上述发布到 Facebook 的 3D 模型必须是单个 glb 文件。
在本文中，我介绍了如何导出到 glTF 文件。 在下一篇文章中，我将解释如何使用 Web 技术显示 glTF 和 glb 文件。