一、文件结构

  一个gltf模型一般包含一下几个文件：
  .bin   二进制文件存放顶点、法线、面、uv等数据
  .gltf  描述模型的综合信息
  img文件夹  存放模型贴图

二、gltf模型信息详解

1、数据结构：

  {
    scene:0,
    scenes:[{nodes:0}],
    nodes:[
      {
         name:"rootModel",
         children:[1]
      },
      {
         name:"floor1",
         children:[2]
      },
      {
         name:"room1",
         mesh:0
      }
    ],
    meshes:[
        {
          name:"mesh1",
          primitives:[
              {attributes:{POSITION:0, NORMAL :1,TEXCOORD_0:0},indices:0, material:0,mode:4}
          ]
        }
    ],
    accessors:[
        {name:"postions_0", componentType:5126, count:100, bufferView:0, byteOffset:0,type:"VEC3",max:[],min:[]},
        {name:"texcoods_0", componentType:5126, count:100, bufferView:0, byteOffset:0,type:"VEC2",max:[],min:[]},
        {name:"indices_0", componentType:5123, count:100, bufferView:0, byteOffset:0,type:"SCALAR",max:[],min:[]}
    ],
    bufferViews:[
        {name:"view0",buffer:0,byteLength: 144, byteOffset: 0, byteStride: 12, target: 34962},
        {name:"view1",buffer:0,byteLength: 100, byteOffset: 144, byteStride: 8, target: 34962},
        {name:"view2",buffer:0,byteLength: 100, byteOffset: 244, byteStride: 8, target: 34962}
    ],
    buffers:[{name:1,uri:"1.bin"}],
    materials:[
        {name:"m0", pbrMetallicRoughness:{baseColorTexture:{index:0}}}
    ],
    textures:[{name:"t0",source:0}],
    images:[{name:"img0",uri:"1.jpg"]
    animations:[]
  }

2、概述

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

3、各字段详解

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字段指定。

• attributes 指定了顶点、顶点法线、uv坐标在accessors数组的对应数据的下标。
  POSITION - 顶点
  NORMAL - 顶点法线，顶点法线不是必须，导入引擎 时可生成
  TEXCOORD_0 - uv坐标
• indices 指定了面在accessors数组的对应数据的下标
• material 指定了该mesh的材质在materials数组中的下标

accessors 访问器

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

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

• componentType 数据类型浮点或者整形
• count 数量总和（顶点总数或者面总数，通过此字段可计算模型的总顶点数、总面数，对于模型性能分析和优化有很大作用
• bufferView 对应数据在bufferViews中的下标

bufferViews 缓冲区视图

   bufferViews:[ 
      {name:"view0",buffer:0,byteLength: 144, byteOffset: 0, byteStride: 12, target: 34962}
   ]

• buffer 对应的数据在buffers数组中的下标
• byteLength 该缓冲区对于的数据长度
• byteOffset 在buffer中的起始位置

buffers 缓冲区

  buffers:[{name:1,uri:"1.bin"}]

• uri 该缓冲区对于的bin文件，bin文件的作用参考第一部分的介绍

从mesh走到bin文件，模型的骨骼已经确定了，顶点、法线、面、都有了，剩下的就是给模型添加材质贴图，这一部分也是从mesh出发，由mesh下的material字段指定对应的材质

materials 材质

  materials:[
        {name:"m0", pbrMetallicRoughness:{baseColorTexture:{index:0}}}
    ]

• baseColorTexture 对应textures数组下标

textures 纹理

  textures:[{name:"t0",source:0}],

• source 对应images数组下标

images 贴图

  images:[{name:"img0",uri:"1.jpg"]

总的流程如下图

gltf加载流程图

三、内存占用

模型的内存占用主要包括四个部分，分别是内存、gpu、图片缓存、cpu，其中主要决定性能的是gpu和图片缓存

• gpu ：

对于gpu占用主要有一个问题，如何计算一个模型的gpu占用，有没有公式可以算出来？针对这个问题就需要搞明白那些因素决定gpu占用。

模型内存占用图

为了方便计算，我们用面替换点，一个最多对应3个点因此可得

仔细观察数据表，大致可以得出绘制一个面的所占有的内存在0.8kb-3.1kb之间，我们取最大值并向上取整，可以大致按每个面3.1k的内存去估算

最终可得出:

(T代表单个材质，faces代表模型总面数）

• 图片缓存 ：

图片缓存有很多文章说明，基本公式是

图片缓存其实是纹理缓存，对于场景切换，需要注意注销纹理，释放图片缓存。

四、性能优化

有了上面的内存占用，性能优化的点就比较清晰了

• 模型面数优化
  可以在制作模型时，通过原始数据减少模型面数，也可以通过脚本动态减面，例如threejs的SimplifyModifier。

• 纹理优化

  
  
  纹理渲染流程图

如果不追求过高的效果，可以直接减小图片尺寸，如果对与效果要求很高，可以采用压缩纹理技术

不同格式gpu占用

basis纹理

• 减少drawcall
  减少cpu与gpu通信次数，类似于雪碧图技术，可通过合并mesh合并材质等方法达到
  (附上一个查看工具：spector)
• 光照
  适当减少光源数，尽量用贴图代替光照效果，如不需要光照剔除法线亦可减小模型物理内存，提供渲染效率