作者：木马

一、为什么做mesh回归

随着3D云设计工具的发展，用户可通过云设计工具，进行家居、公装、建筑、地产等全空间领域的云设计。目前，云设计工具中包含较多的设计工具，如硬装、定制和BIM等。众多的工具衍生出众多的测试工作量，需要有一种针对性的效能回归方案。

二、什么是mesh

一个3D模型的统一表达方式，所有的面拆分成多个三角形，进行表示。如下图所示：

三、mesh回归的应用场景

| BIM的水暖电管。

| 定制的门窗造型。

| 定制编辑器的扫掠，斜切扫掠。

| 硬装的瓷砖，地板，水刀，石材，线条，集成墙板。

四、如何设计和实现

4.1 知己知彼

先查看业务的设计思路，获取必要的信息。

4.2查看开发代码

因为中台只负责存储，并没有解压逻辑+转换逻辑，需自己进行解压方式编写

4.3获取源信息

V: 表示一个三角形顶点，每行对应的三个数据表示该顶点的XYZ轴坐标，然后每3行代表了一个三角形。

4.4校验计算

拥有了三角形的顶点， 利用海尔公式求面积：

S=(x1y2-x1y3+x2y3-x2y1+x3y1-x2y2)。

墙面被mesh处理后，理论上所有的三角形面积之和=工具中墙面积，如下图所示：

4.5 解决的bug类型

4.5.1  面缺失问题

常见的问题：生成的屋顶有破面，显示不完整。

解决思路：通过计算mesh的三角形面积之和进行校验。

4.5.2 水刀形状缺失问题

常见的问题：水刀面上纹理和形状缺失。

解决思路：通过计算mesh的三角形个数进行校验（左图 红圈为缺失的部分）

为什么不使用面积判断？

答：水刀是一种复杂的图案，三角面片过小，计算上会存在误差且计算量庞大，使用三角化个数判断是最有效且快速的方式。

4.5.3 法向量错误问题

常见的问题：mesh方向反了，导致预览效果错误，部分效果不可见。

解决思路：通过校验mesh的法向量。

4.6 接口工具集成

将上述三种校验形式集成到接口平台中，由底层逻辑自动去计算实际数据与预期数据进行判断，达到自动化回归的功能。

4.7 成果展示

运行一段时间后，我们来看看成果如何？

从下图可以看到，对应的3种校验方式都发现了一些bug。

自动化手段发现的占比从原来的 0%上升到13%

五、效能进阶

5.1  麻烦的UV问题

虽然4.5中解决了部分类型的bug，但是还有一类常见问题得不到有效解决：UV贴图效果的问题。如下图：

并且这类问题也是最难攻克且自动化的。因为涉及到材质图片的获取，UV坐标的校验及矩阵转换，需要全方面考虑。

5.2   解决思路

虽然麻烦，但是再难的问题也经不住反复的思考，mesh的纹理，是通过mtl文件（ps: mtl是专门定义一个纹理的文件，可网上搜索了解下）来控制。

只要知道原图的，且按照我司的特定比例计算，得到UV坐标，嵌入到mesh文件中，即可得到预览效果，如下图：

5.3  设计构思

上面的思路证明，只要按照一定的格式，即可将效果 “画”出来，这样我们就能进行效果对比，提升效率。

经过一番调研，three.js 可支撑起效果展现，且能进行效果对比。与研发商议可行性，并开始了dev design，涉及到了效果显示平台和效果回归平台开发。

相关介绍：

https://threejs.org/examples/#webgl_animation_cloth

此处感谢研发同学的大力支持，迅速开发好了效果显示平台，并提供接口，整体进度比想象中顺利很多。对接流程如下图：

5.4  结果展示

这里涉及到大量的开发工作，不再展开陈述，效果如下图所示：

通过方案id 和 面id 获取想要的回归的硬装材质，方便效果回归。

六、规划和展望

提升场景覆盖度

目前硬装工具线已经能够支持，部分定制参数化模型也可支持显示，后期可以和开发配合能全面支持定制等工具线。