Cesium开发基础篇 | 05glTF介绍及加载
作者：互联网
到目前为止，我们已经介绍了如何利用Cesium显示影像数据、地形高程数据、矢量数据，以及空间可视化方面的几何数据（Entity），感兴趣的同学可以阅读我前面写的文章。在三维数据方面，Cesium支持模型文件glTF，以及三维瓦片数据3D Tiles。本次我们先从glTF说起，3D Tiles的讲解留给下一章节。
1glTF介绍
glTF全称是 Graphics Language Transmission Format （图形语言传输格式），是一种针对GL(WebGL，OpenGL ES以及OpenGL)接口的运行时资产传递格式，由澳大利亚的 Khronons 集团进行维护，并于2017年6月5日在GitHub上（https://github.com/KhronosGroup/glTF）公布了glTF 2.0的规范，此文也是针对于2.0版本进行介绍的。glTF通过提供高效、可扩展、可互操作的格式来传输和加载三维内容，填补了3D建模工具与现代图形应用程序之间的空白，它已成为了 Web 上的3D 对象标准（Web导出的通用标准），可以说glTF是3D 模型的JPEG格式，几乎每个3D Web框架都支持glTF。随着glTF的不断发展，glTF形成了自己庞大的生态系统，同时收到了各行业的大力支持。所以，如果有人要为你提供3D 模型，你就可以要求他们提供glTF格式的模型。
同时，Cesium官方GitHub中也提供了obj转glTF的源码库，感兴趣的可以前往这里https://github.com/CesiumGS/obj2gltf查看。
目前，glTF 3D模型格式有两种：
*.gltf： 基于JSON的文本文件，可使用文本编辑器轻松编辑，通常会引用外部文件，例如纹理贴图、二进制网格数据等；
*.glb： 是二进制格式，通常文件较小且自包含所有资源，但不容易编辑。
要获取glb文件，可以直接从3D建模程序中导出它们，也可以使用工具将gltf转换为glb。在线转换工具推荐 MakeGLB （https://sbtron.github.io/makeglb/），当然，如果您使用的是VS Code编辑器，建议安装 glTF Tools 扩展工具，能够非常方便的查看glTF的数据结构、glTF和glb互转等。
2glTF场景描述结构
glTF的核心是一个JSON文件，另外还支持外部数据。具体而言，一个glTF模型可包括以下三部分内容：
JSON格式的文件（.gltf），其中包含完整的场景描述，并通过场景结点引用网格进行定义 。包括：节点层次结构、材质（定义了3D对象的外观）、相机（定义义了渲染程序的视锥体设置 ）、mesh（网格）、动画（定义了3D对象的变换操作，比如选择、平移操作）、蒙皮（定义了3D对象如何进行骨骼变换）等；
.bin包含几何和动画数据以及其他基于缓冲区的数据的二进制文件；
图像文件（.jpg，.png）的纹理。
如下图所示：
以其他格式定义的文件（例如图像文件）可以存储在通过URI引用的外部文件中，并排存储在GLB容器中，或使用数据URI直接嵌入到JSON中，一个有效的glTF模型必须指定其版本。
glTF的JSON结构
场景对象已数组的形式存储在JSON文件中，可以使用数组中各个对象的索引来访问它们：
"meshes" :
[
{ ... }
{ ... }
...
],
这些索引还用于定义对象之间的关系。上面的示例定义了多个网格对象，并且一个节点可以使用网格索引引用上面定义的其中一个网格对象：
"nodes":
[
{ "mesh": 0, ... },
{ "mesh": 5, ... },
...
}
下图概述了glTF的JSON部分的顶级元素：
下面我对这些元素进行简要说明：
scene： glTF格式的场景结构描述条目。它通过引用node来定义场景图；
node： 场景图层次中的一个节点。它可以包含一个变换(比如旋转或平移)，并且可以引用其他（子）节点 。此外，它可以引用网格和相机，以及描述网格变换的蒙皮；
camera： 定义了用于渲染场景的视锥体配置；
mesh： 描述了出现在场景中几何对象实际的几何数据。它是指accessor用于访问实际几何数据material的对象，并且是指在渲染对象时定义其外观的 ；
skin： 定义了用于蒙皮的参数，参数的值通过一个accessor对象获得。
animation： 描述了一些结点如何随时间进行变换(比如旋转或平移)；
accessor： 一个访问任意数据的抽象数据源。被mesh、skin和animation元素使用来提供几何数据、蒙皮参数和基于时间的动画值。它通过引用一个bufferView对象，来引用实际的二进制数据；
material： 包含了定义3D对象外观的参数。它通常引用了用于3D对象渲染的texture对象；
texture： 定义了一个sampler对象和一个image对象。sampler对象定义了image对象在3D对象上的张贴方式。
更多详情，可查阅glTF 2.0规范（https://github.com/KhronosGroup/glTF/tree/master/specification/2.0/）以及glTF官方教程（https://github.com/KhronosGroup/glTF-Tutorials/tree/master/gltfTutorial）
下面是一个最小巧的glTF格式文件的内容，它描述了一个简单的三角形。
{
"scenes" : [
{
"nodes" : [ 0 ]
}
],
"nodes" : [
{
"mesh" : 0
}
],
"meshes" : [
{
"primitives" : [ {
"attributes" : {
"POSITION" : 1
},
"indices" : 0
} ]
}
],
"buffers" : [
{
"uri" : "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=",
"byteLength" : 44
}
],
"bufferViews" : [
{
"buffer" : 0,
"byteOffset" : 0,
"byteLength" : 6,
"target" : 34963
},
{
"buffer" : 0,
"byteOffset" : 8,
"byteLength" : 36,
"target" : 34962
}
],
"accessors" : [
{
"bufferView" : 0,
"byteOffset" : 0,
"componentType" : 5123,
"count" : 3,
"type" : "SCALAR",
"max" : [ 2 ],
"min" : [ 0 ]
},
{
"bufferView" : 1,
"byteOffset" : 0,
"componentType" : 5126,
"count" : 3,
"type" : "VEC3",
"max" : [ 1.0, 1.0, 0.0 ],
"min" : [ 0.0, 0.0, 0.0 ]
}
],
"asset" : {
"version" : "2.0"
}
}
3glTF相关工具推荐
glTF在线验证：http://github.khronos.org/glTF-Validator
浏览-Sketchfab：https://sketchfab.com/（需要注册账号，并且要上传模型才能浏览）
浏览-PlayCanvas查看器：https://playcanvas.com/viewer
浏览-ThreeJS查看器：https://gltf-viewer.donmccurdy.com
浏览-BabylonJS查看器：https://sandbox.babylonjs.com
gltf转glb：https://sbtron.github.io/makeglb
obj2gltf：https://github.com/CesiumGS/obj2gltf
FBX2glTF：https://github.com/facebookincubator/FBX2glTF
COLLADA2GLTF：https://github.com/KhronosGroup/COLLADA2GLTF
4Cesium加载glTF模型
Cesium提供了两种方式加载glTF模型，分别是通过 Entity API 和 Primitive API 两个 API 实现的。核心代码如下：
var position = Cesium.Cartesian3.fromDegrees(-120.05, 44, 0);
var heading = Cesium.Math.toRadians(45);
var pitch = 0;
var roll = 0;
var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position,
hpr
);
var model_entity = viewer.entities.add({
name: "gltf模型",
position: position,
// 默认情况下，模型是直立的并面向东。
// 通过 Quaternion 为 Entity.orientation 属性指定值来控制模型的方向，控制模型的航向，俯仰和横滚。
orientation: orientation,
model: {
show: true,
uri: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
scale: 1.0, // 缩放比例
minimumPixelSize: 128, // 最小像素大小
maximumScale: 20000, // 模型的最大比例尺大小。minimumPixelSize的上限
incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
runAnimations: true, // 是否应启动模型中指定的glTF动画
clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
// 指定模型是否投射或接收来自光源的阴影 type:ShadowMode
// DISABLED 对象不投射或接收阴影;ENABLED 对象投射并接收阴影;CAST_ONLY 对象仅投射阴影;RECEIVE_ONLY 对象仅接收阴影
shadows: Cesium.ShadowMode.ENABLED,
heightReference: Cesium.HeightReference.NONE,
},
});
// viewer.trackedEntity = entity; // 相机保持在实体上
var origin = Cesium.Cartesian3.fromDegrees(-120, 44.0, 0);
// 创建一个本地的东北向上坐标系，其原点为经度-120度，纬度44.0度。
// 可以随时更改模型的modelMatrix属性以移动或旋转模型。
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
var model = viewer.scene.primitives.add(
Cesium.Model.fromGltf({
url: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
modelMatrix: modelMatrix,
minimumPixelSize: 128,
maximumScale: 20000,
})
);
model.readyPromise.then(function (model) {
// Play all animations when the model is ready to render
model.activeAnimations.addAll();
});
这里简单说一下 modelMatrix 属性，该属性类型是 Matrix4 ，即4x4转换矩阵，用于将模型坐标转换为世界坐标，也就是为模型创建一个局部坐标系。正如示例中的代码那样，为模型创建了一个本地的东北向上坐标系，其原点为经度-120度，纬度44.0度。在 Cesium 调试器面板中勾选显示参考框架，能够很清晰的看到该模型对应的X、Y、Z轴以及原点。
标签：对象,模型,加载,Cesium,https,05glTF,3D,glTF 来源： https://blog.csdn.net/baidu_40393148/article/details/118155621