什么是网格数(Mesh数)?
网格数含义
网格数,也是Mesh数,是指一个glb模型文件中独立网格的数量,这个数量较多时,会导致渲染卡顿,从而影响到产品中的性能
对于相对应的三维软件中,类似可以认为是 对象数,文件中独立的对象越多,就会使导出glb文件中的网格数变多
同时,网格数并不与模型的复杂程度有关,复杂的模型可以通过合并对象的方式来减少其网格数,从而提升产品性能
网格数相关的常见问题
1.导入模型后出现如下提示弹窗

2.在自定义组件下,直接导入模型后发现出现了比较明显的卡顿

3.导入模型后发现并没有明显卡顿,但再复制几份模型后发现卡顿明显
4.部分看起来复杂的模型导入产品不会卡顿,但一些看起来简单的模型反而卡顿明显
当遇到以上情况时,推荐在三维软件中通过合并对象的方式,来减少导出glb文件中的网格数。
如何实现网格数优化?
查看glb文件中的网格数
我们这边可以通过下面的方式,先去简单查看一个glb文件里面的网格数是多少。
1.使用浏览器打开babylon.js模型沙盒网站,点击右下角的上传按钮,将需要测试的glb文件上传,并等待加载完成


2.加载完成后,点击右下角齿轮图表调出详细界面

3.在右边的界面上点击参数图标来查看具体数据,在具体参数栏中找到Total Meshes一栏,其对应的数值即为该文件中的网格数,即测试文件的总网格数为5378

在blender中优化网格数
此处以blender为例,列举如何在blender中合并对象来减少网格数
blender下载
1.打开blender官网(https://www.blender.org),进入blender官网页面,点击上方Download,或点击Download Blender;

2.进入版本选择页面,选择本人电脑系统适用的版本,再点击Download Blender;

3.进入下载页面,点击Aliyun (China)或下方的链接均可以正常下载

在blender中导入模型
打开blender,点击左上角的 文件 - 导入 - glTF 2.0,来弹出导入窗口,在弹出窗口中找到所要导入的glb文件,然后点击 导入glTF 2.0 即可完成导入模型
(注意:如果是其他通用格式的模型,也可以点击blender主界面左上角的 文件 - 导入-中选择对应的文件类型来导入模型)

查看模型的物体数
在三维视图中,点击顶部栏图示的按钮弹出设置选项,在其中勾选 统计信息,即可在三维视图的左侧看到当前视图下的物体数、面数等参数,其中的物体数就是mesh数/网格数。建议在blender内将对象数量合并至1000以内。

选中模型并合并网格数
1.在三维视图中,按T键调出工具栏,点击工具栏最上方的 选择工具,滑动光标将其切换至框选工具

2.在三维视图中,按住 鼠标中键 调整视角,长按并拖动 鼠标左键 来 框选 出想要合并的物体(可以在三维视图中按 A键 来选择所有可见的物体)。如果框选范围比较大,可以按住shift+鼠标左键继续选择想要合并的活动物体,框选后的物体边缘高亮。选中完成后,点击 鼠标右键 调出菜单,点击其中的 合并 来合并所有选中的物体,即可完成合并物体


4.合并物体后,物体数/网格数仅剩下650,在1000以下

5.导出合并后的模型
点击左上角标题栏的 文件-导出-gltf 2.0,来调出导出面板。可以按照下图的推荐设置来调整导出设置,然后根据需求调整文件路径和文件名称,最后点击导出gltf 2.0完成导出。




6.现在我们将文件重新导入到设计器中,已经不会出现上传失败和显示卡顿的问题了

拓展-选择
加减选择:按住shift,用 鼠标左键 可以将 点击的物体 额外添加进选择里,也就是 多选,同时可以通过点击已选择的物体来取消选择,也就是 减选
相同材质选择:点击物体,按 shift+L键 可以选择按材质选择物体,即可选择对应材质的所有未隐藏物体
套索选择:按住ctrl键,用鼠标右键拖动出一个套索范围,即可选择这个范围内所有的物体
按住shift+ctrl键,用鼠标右键拖动出一个套索范围,即可将这个范围内的所有物体取消选择
反转选择:按ctrl+I键,即可取消选中的物体,并选择其他之前未选中的物体 |