Cesium

GLTF文件格式详解

2023-02-04  本文已影响0人  WebGiser

参考：https://github.com/KhronosGroup/glTF

制作GLTF模型数据

可以在blender(开源免费)、C4D(闭源收费)软件中制作模型，然后导出成GLTF格式的文件。


image.png
image.png
image.png

test.gltf文件内容为：

{
    "asset" : {
        "generator" : "Khronos glTF Blender I/O v3.3.32",
        "version" : "2.0"
    },
    "scene" : 0,
    "scenes" : [
        {
            "name" : "Scene",
            "nodes" : [
                0
            ]
        }
    ],
    "nodes" : [
        {
            "mesh" : 0,
            "name" : "Cube"
        }
    ],
    "materials" : [
        {
            "doubleSided" : true,
            "name" : "\u6750\u8d28.002",
            "pbrMetallicRoughness" : {
                "baseColorTexture" : {
                    "index" : 0
                },
                "metallicFactor" : 0,
                "roughnessFactor" : 0.5
            }
        }
    ],
    "meshes" : [
        {
            "name" : "Cube",
            "primitives" : [
                {
                    "attributes" : {
                        "POSITION" : 0,
                        "NORMAL" : 1,
                        "TEXCOORD_0" : 2
                    },
                    "indices" : 3,
                    "material" : 0
                }
            ]
        }
    ],
    "textures" : [
        {
            "sampler" : 0,
            "source" : 0
        }
    ],
    "images" : [
        {
            "mimeType" : "image/jpeg",
            "name" : "\u5fae\u4fe1\u56fe\u7247_20201019153241",
            "uri" : "%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20201019153241.jpg"
        }
    ],
    "accessors" : [
        {
            "bufferView" : 0,
            "componentType" : 5126,
            "count" : 24,
            "max" : [
                1,
                1,
                1
            ],
            "min" : [
                -1,
                -1,
                -1
            ],
            "type" : "VEC3"
        },
        {
            "bufferView" : 1,
            "componentType" : 5126,
            "count" : 24,
            "type" : "VEC3"
        },
        {
            "bufferView" : 2,
            "componentType" : 5126,
            "count" : 24,
            "type" : "VEC2"
        },
        {
            "bufferView" : 3,
            "componentType" : 5123,
            "count" : 36,
            "type" : "SCALAR"
        }
    ],
    "bufferViews" : [
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 0,
            "target" : 34962
        },
        {
            "buffer" : 0,
            "byteLength" : 288,
            "byteOffset" : 288,
            "target" : 34962
        },
        {
            "buffer" : 0,
            "byteLength" : 192,
            "byteOffset" : 576,
            "target" : 34962
        },
        {
            "buffer" : 0,
            "byteLength" : 72,
            "byteOffset" : 768,
            "target" : 34963
        }
    ],
    "samplers" : [
        {
            "magFilter" : 9729,
            "minFilter" : 9987
        }
    ],
    "buffers" : [
        {
            "byteLength" : 840,
            "uri" : "test.bin"
        }
    ]
}

GLTF数据格式规范

GLTF文件格式

glTF 导出格式有两种后缀格式可供选择：.gltf 和 .glb：

GLTF文件内容解析

参考：https://www.jianshu.com/p/905671909b25、https://blog.csdn.net/hometoned/article/details/125187834

解析文件时，我习惯于从scene开始解析，gltf文件本身就是一个场景文件。可以从scene开始一步一步去完成整个文件的解析。

概述

模型加载顺序为，先加载gltf文件，然后解析依次读取scenes、nodes、meshes、accessors、bufferViews、buffers、materials、textures、images。其中每个mesh包括一个bufferViews和一个materials。每一层的递进都有数组下标来确定。

scenes 场景
  scenes:[{nodes:0}]，
  scene:0

一般模型只有一个也是默认场景，如果是多个，则根据对应的scene字段确定哪一个是默认场景，参考数据结构部分的数据，每一个scene都包含一个nodes字段，指定了scene的根结点。本例中nodes对应的值为0，代表根节点为nodes字段下对应的第一个元素。

nodes 节点
  nodes:[
  {
     name:"rootModel",
     children:[1]
  },
  {
     name:"floor1",
     children:[2]
  },
  {
     name:"room1",
     mesh:0
  }
]

nodes用来组装模型层级，第一个节点是父节点，children字段指定它所包含的子节点。
nodes节点分为俩种，一种是有children字段的，最终会渲染成group，一种是有mesh字段的最终渲染为mesh，mesh字段的值为meshes数组的小标。

meshes 网络
  meshes:[
    {
      name:"mesh1",
      primitives:[
          {attributes:{POSITION:0, NORMAL :1,TEXCOORD_0:0},indices:0, material:0,mode:4}
      ]
    }
]

网格由多个面和材质组成，通过primitives字段指定。

accessors 访问器
  accessors:[
        {name:"postions_0", componentType:5126, count:100, bufferView:0, byteOffset:0,type:"VEC3",max:[],min:[]}
  ]

访问器是链接bufferView和mesh之间的桥梁，主要作用是对bufferView中数据进行进一步描述

bufferViews 缓冲区视图
   bufferViews:[ 
      {name:"view0",buffer:0,byteLength: 144, byteOffset: 0, byteStride: 12, target: 34962}
   ]
buffers 缓冲区
  buffers:[{name:1,uri:"1.bin"}]
从mesh走到bin文件，模型的骨骼已经确定了，顶点、法线、面、都有了，剩下的就是给模型添加材质贴图，这一部分也是从mesh出发，由mesh下的material字段指定对应的材质
materials 材质
  materials:[
        {name:"m0", pbrMetallicRoughness:{baseColorTexture:{index:0}}}
    ]
textures 纹理
  textures:[{name:"t0",source:0}],
images 贴图
  images:[{name:"img0",uri:"1.jpg"]

总的流程如下图


image.png

压缩优化

npm install  gltf-pipeline
上一篇 下一篇

猜你喜欢

热点阅读