1.前言
- 在FVS使用部分glb模型文件时，会出现类似卡顿，加载慢等等问题，一般是因为建模上并没有按照FVS所需要的建模规范来进行，但引起的原因可能是多样的，所以在此可以使用一些工具来简单判断问题的原因，并且提出对于建模的要求。
- 建议在排查前先简单了解一下gltf2.0格式，然后根据模型来源软件，找到相应软件导出glb的教程，里面涵盖了相关的模型导出、优化、和部分问题解决的针对性方法。
2.问题汇总
|
类别
|
问题
|
原因
|
排查方法
|
解决方法
|
|
文件问题
|
glb模型导入FVS后卡顿明显
|
mesh数量过多
（对于3dsmax导出的glb文件尤其明显）
|
通过babylonjs沙盒来查看mesh数量，一般mesh数大于3000就会比较卡顿
|
在三维软件中将可以合并在一起的对象均合并起来，尽可能减少对象数量（建议在三维软件内控制在500个以内）
（类似组合、打组的方式并不能合并对象，导出后依然是零散的对象）
|
|
glb模型文件大小很大，导致在FVS里加载速度很慢
（大于100M的文件一般就偏大了，根据场景大小有浮动）
|
贴图数据过大-贴图数量过多
|
通过babylonjs沙盒(3.1.1)来查看模型使用的贴图数，一般数量大于100就会容易导致文件很大
|
在三维软件中减少贴图使用，可以使用属性材质就避免使用贴图，并检查是否用到重复的贴图
|
|
贴图数据过大-贴图分辨率过大
|
通过babylonjs沙盒(3.1.2)来查看所用贴图的分辨率，一般较多贴图使用了2k以上分辨率就会容易导致文件很大
|
通过PS、图压等工具去压缩贴图的分辨率，对于不需要透明度通道的贴图均转换为jpg格式
|
|
模型面数过多
|
通过babylonjs沙盒(3.1.1)来查看模型的面数
（粗略100w面的模型需要占用10M的数据，不含材质）
|
在三维软件中，对于面数过高的对象，可以通过塌陷，反细分等等方式去精简面数，从而降低整体面数
|
|
未使用draco压缩网格
|
通过babylonjs沙盒（3.1.4）来查看模型的导出信息，搜索draco若没有相关信息，则表示文件没有经过压缩
|
在三维软件中导出时勾选压缩后再导出（适用于3dsmax，maya，blender导出）
如果无法导出时压缩，可以通过gltf-pipeline来压缩glb文件
|
|
材质问题
|
模型只显示了一半，背后不显示
|
材质上开启了背面剔除
|
通过babylonjs沙盒(3.1.3)来查看对应材质中的背面剔除，选项为开启状态则会容易出现模型只显示一半的情况
|
在三维软件将材质的背面剔除选项取消勾选再导出
|
|
模型塑料感比较重
|
材质上金属度和糙度的表现较差，没有质感的区分
|
通过babylonjs沙盒(3.1.3)来查看对应材质的金属糙度贴图通道，如果没有对应贴图且金属度和糙度也不是合适的参数，则会容易导致模型没有质感的区分
如果有对应的贴图，但若属糙度贴图上只有蓝色，说明只导出来金属度，若只有绿色说明只导出来糙度
|
在三维软件中添加对应的金属度和糙度贴图
|
|
模型表面很平，没有细节
|
材质上法线贴图的表现较差，没有表现出凹凸的效果
|
通过babylonjs沙盒(3.1.3)来查看对应材质法线贴图通道，若没有法线贴图则容易出现该问题
若有法线贴图，但材质表现上依旧很平说明法线贴图强度过低
|
在三维软件中添加对应的法线贴图再导出
|
|
模型没有想要的自发光效果
|
没有自发光贴图
|
通过babylonjs沙盒(3.1.3)来查看对应材质的自发光通道，若没有自发光贴图则会出现该问题
|
在三维软件中添加对应的自发光贴图再导出
|
|
模型没有想要的半透明效果
|
没有alpha贴图，或者alpha模式设置有问题
|
通过babylonjs沙盒(3.1.3)来查看对应材质的漫射贴图的透明度，来判断导出时是否有alpha贴图
再查看该材质的alpha模式，如果不是alpha blend则不会有半透明效果
|
在三维软件中添加对应的alpha贴图，并且将alpha模式调整为alpha blend
|
3.排查方法教程
3.1 babylonjs沙盒
使用Chrome或者Microsoft Edge打开babylonjs沙盒网页（一个glb模型预览工具，链接为https://sandbox.babylonjs.com），将glb模型拖入窗口中，加载完成后点击右下角的按钮来调出菜单栏
 
3.1.1总览数据
在右侧菜单中点击第三个按钮查看文件的总览数据，其中需要注意以下几项
- 预览帧数：一般60帧即为流畅，若在babylon.js中帧率较低，则在FVS中帧率一定不高，显示上会有明显卡顿
- 模型mesh数：模型中独立的网格的数量，是影响FVS性能的明显因素（因为导出glb后，模型会根据材质的不同进一步拆分为单个材质的网格，所以mesh数往往要比三维软件中的对象数要高不少）
- 模型面数：模型中所有网格的三角面数（因为导出glb后，模型会将所有的四边面和多边面自动转换为三角面，所以模型面数也比三维软件中的面数多不少）
- 模型使用贴图数：
3.1.2贴图信息
在左侧菜单中点击texture来展开贴图栏，在右侧菜单中点击第一个选项来切换到选中信息，然后点击左侧菜单中的一项贴图，在右侧菜单中即可以看到选中贴图的预览和分辨率
点击贴图下面的edit选项即可再弹出窗口中放大观察贴图
3.1.3材质信息
在左侧菜单中展开materials栏，然后在列表中选中想要查看的材质，点击右边栏的第一个按钮即可查看该材质的相应参数，其中需要注意的有以下几个，对于贴图可以点击贴图名称跳转到纹理信息界面，从而能预览贴图
- 背面剔除：会将模型的背面剔除不显示
- Alpha（不透明度）：模型不透明的程度，数值从0到1，表现为完全透明到不透明，需要搭配alpha模式来表现模型的透明效果
- alpha模式：用于决定模型是怎么透明的，和alpha值搭配表现透明效果，Opaque为不透明，alpha test则只能表现全透明和不透明两种，alpha blend可以表现半透明效果
- 漫射贴图（通道）：用于表现材质上的颜色，另外该贴图的alpha通道用于表现材质的透明程度
- 金属糙度贴图（通道）：用于表现材质上的金属度和糙度，该贴图上的绿色通道用于表现粗糙度，蓝色通道用于表现金属度
- 法线贴图（通道）：用于表现材质上凹凸不平的效果，建议使用OpenGL标准下的normal贴图（不要使用directX标准，也不要使用bump贴图）
- 自发光贴图（通道）：用于表现材质上的自发光的效果
- 漫射颜色：材质的基础颜色，
- 自发光颜色：材质自发光的颜色
- 金属度：数值为0为非金属，数值为1为金属
- 糙度：材质粗糙的程度，数值从0到1
 
3.1.4 导出相关信息
点击右侧菜单的工具栏，其中展开 gltf validation栏，再点击超链接来打开更多细节窗口，在窗口中按CTRL+F打开查找选项，输入下列关键词来检索相关信息
draco：查找该关键词，有图上所示的文本即表示该文件经过draco压缩，没有相关文本即表示该文件没有压缩 
generator ：查找该关键词，有该文本，则可以找到该文件是通过什么方式导出的，若没有该文本，则不能确定导出方式 
| 
