达永编程网

程序员技术分享与交流平台

三维WebGIS必须要掌握的数据格式——Gltf格式详解

作为三维GIS可视化的开源项目,Cesium以其强大的功能和丰富的生态成为三维GIS可视化的首选,而Gltf作为Cesium唯一支持的模型格式,已经成为web端显示三维模型的标杆,因此学习Cesium想要加载模型,必须了解,包括后面要学习的3Dtiles其内部模型也是gltf,今天就简单介绍下gltf格式。

一、GLTF简介

Gltf是由Khronos Group组织定义的,该组织是一个非营利性联盟,负责制定和维护多项开放标准,包括熟知的渲染引擎比如 OpenGL、Vulkan、WebGL 以及 glTF等。

glTF设计之初就是专为高效传输和渲染3D内容设计的开放格式,旨在成为“3D 领域的JPEG,尤其是Cesium将其应用之后,大大推进了Gltf的发展,目前最新的GLTF版本是2.0版本。

二、GLTF格式

GLTF是将JSON以及多个二进制数据结合在一起,不仅可以完美的体现其友好的交互性,而且二进制数据可以更大程度的降低文件大小,二进制数据包括几何顶点、纹理信息、动画等信息,其它交互性的属性均以json格式对外展示。下面主要介绍Gltf主要结构:

Scenes:定义场景的入口,其属性包括一般包含一个或多个节点,比如:

"scenes": [{

"nodes": [0, 1] // 引用的节点索引

}]

Nodes:描述场景中的对象,其属性包括相机索引(camera)、子节点索引(children)、节点蒙皮索引(skin)、变换矩阵(matrix)、网格索引(mesh)、旋转参数(rotation)、缩放比例尺(scale)、平移参数(translation)等,比如:

"nodes": [{

"name": "Car",

"mesh": 0, // 引用的网格索引

"translation": [0, 2, 0], // 位置偏移

"rotation": [0, 0, 0, 1], // 旋转四元数

"scale": [1, 1, 1] // 缩放

}]

Accessor:描述如何从二进制缓冲区(buffers)中读取数据,定义数据类型、格式和范围,其属性包括缓冲视图索引(bufferView)、缓冲区视图偏移量(byteOffset)、数据类型(componentType)、是否归一化(normalized)、元数据数量(count)、数据维度(type)

、访问器组件最大值(max)、访问器组件最小值(min)等,比如:

"accessors": [{

"bufferView": 0, // 引用的 bufferView 索引

"componentType": 5126, // 数据类型(如 5126=float)

"type": "VEC3", // 数据维度(VEC3=三维向量)

"count": 1024, // 数据项数量

"min": [-1, -1, -1], // 数据最小值(用于包围盒计算)

"max": [1, 1, 1] // 数据最大值

}]

Buffer:实际的二进制文件或内容,其属性包括二进制文件(uri),二进制长度(bytelength)等,比如:

"buffers": [{

"uri": "model.bin", // 二进制文件路径

"byteLength": 4096 // 文件大小(字节)

}],

Buffer View:定义一个缓冲区的视图,其属性参数包括:缓冲区索引(buffer)、数据起始偏移量(byteOffset)、数据长度(byteLength)、顶点属性之间的步幅 (byteStride)、缓冲区类型(target)等,比如:

"bufferViews": [{

"buffer": 0, // 引用的 buffer 索引

"byteOffset": 0, // 数据起始偏移量

"byteLength": 2048, // 数据段长度

"target": 34963 // 用途(34963=ARRAY_BUFFER 34962=ELEMENT_ARRAY_BUFFER)

}]

Meshes:定义模型的几何形状,包含一个或多个图元(primitives),其核心属性就是图元(primitive),包括attributes、indices、material、mode、targets比如:

"meshes": [{

"primitives": [{

"attributes": {

"POSITION": 0, // 顶点坐标(对应 accessors 索引)

"NORMAL": 1, // 法线向量

"TEXCOORD_0": 2 // 纹理坐标

},

"indices": 3, // 顶点索引(三角形连接顺序)

"material": 0 // 引用的材质索引

}]

}]

Materials:控制模型表面的颜色、纹理、金属度、粗糙度等物理渲染(PBR)属性,其属性主要包括pbr的材质属性(pbrMetallicRoughness)、法线贴图(normalTexture)、遮挡纹理(occlusionTexture)、自发光纹理(emissiveTexture)、自发光因子(emissiveFactor)、材质的透明渲染模式(alphaMode)、透明属性值(alphaCutoff)、是否双面(doubleSided)等,比如:

"materials": [{

"name": "Metal",

"pbrMetallicRoughness": {

"baseColorFactor": [1, 0, 0, 1], // 基础颜色(RGBA)

"metallicFactor": 0.9, // 金属度(0-1)

"roughnessFactor": 0.1, // 粗糙度(0-1)

"baseColorTexture": { // 基础颜色贴图

"index": 0 // 引用的纹理索引

}

},

"normalTexture": { // 法线贴图

"index": 1,

"scale": 1.0 // 法线强度

},

"emissiveFactor": [0, 0.5, 0] // 自发光颜色

}]

其中pbrMetallicRoughness属于物理渲染PBR的控制属性,其可以控制属性如下:

baseColorFactor:材料基础颜色的,默认: [1,1,1,1]

baseColorTexture:基础颜色纹理

metallicFactor:材料的金属度因子

roughnessFactor:材质的粗糙度因子

metallicRoughnessTexture:金属粗糙度纹理

以上只是介绍了gltf的主要属性,除此之外gltf还有很多属性没有介绍,想要了解更多的可以直接上其官网
https://registry.khronos.org/glTF/specs/2.0/glTF-2.0.html查看。

三、GLTF扩展

目前基于Cesium的应用,Gltf被定义了很多种扩展插件,目的是为了提高gltf的加载效率,比如目前比较流行的顶点压缩方式有Draco、Meshopt、MeshQuan等几种压缩方式,而此外还有纹理压缩方式KTX2,其中Meshopt、MeshQuan以及KTX2可以试用开源项目gltfpack实现,Draco的压缩可以使用开源的gltf-pipeline,这是一个开源的js项目。

而这些开源库处理以后的gltf如果需要在cesium中加载,就需要引入指定的插件,比如解析Draco压缩后的模型解析就需要使用
KHR_draco_mesh_compression,而通过MeshQuan压缩的模型,需要匹配KHR_mesh_quantization,此外KTX2需要匹配KHR_texture_basisu插件,而这些插件在Cesium的最新版本中都已经默认引入,比如小编验证的cesium1.105版本中是无需手动引入的,而cesium-1.98是需要引入的,关于gltf的插件,由于其内容过多,想了解的可以参考
https://github.com/KhronosGroup/glTF/tree/main/extensions/其官方的文档。

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言