基于纹理合成技术的云服饰增强现实系统设计与实现

朱文曦 桂 彦 欧阳甜甜 卜 凡 李 思 晋向黎

（长沙理工大学计算机与通信工程学院,湖南 长沙 410114）

增强现实（Augmented Reality，AR）技术是在虚拟现实（Virtual Reality，VR）技术上发展而来，其通过运动相机或可穿戴显示装置的实时连续标定，将三维虚拟物体、场景等稳定一致地投影至用户视窗[1]，增强用户对现实世界的感知。目前，增强现实技术具有广阔的应用场景。

对于传统的服饰设计，设计师只能通过平面手稿或电子设计稿的形式再现脑海中的设计规划与理念。这样的设计方式导致服装设计的效率较低，且难以保证设计表达的质量。完成的设计在与制造厂进行对接时，往往出现UV错误等问题，导致实际产品与设计形象相差甚远。设计师们希望有一个高效且便携的应用，能够将平面设计稿迅速准确地呈现出立体效果，以供设计参考。尽管当前市场上已经有大量成熟的专业图像编辑软件如Adobe Photoshop等，或三维建模软件如3D Studio Max等，但这些软件的体量庞大且功能繁杂，对计算机性能提出了较高要求的同时，也对用户的专业技能提出了较高要求。设计师在展示一款产品的时候，往往更多地通过二维图片的形式进行展现，倘若需要以三维形式展示产品，往往依赖OpenGL[2]技术，比如通过Unity 3D或Unreal Engine 4开发一个桌面应用。若需要将虚拟的产品融于真实场景，还需要依赖Kinect等采集设备[3]。

随着WebGL技术的引入，Web应用突破了曾经无法支持三维渲染的局限，三维的虚拟物体在线地融合于真实场景具备了充分的可行性，其体验与交互普遍得到了极大的提升。

由此，本团队对三维模型渲染技术、增强现实技术加以综合应用，设计了一款轻量级Web应用，以解决上述的“痛点”。为充分辅助三维模型贴图并增强现实展示的功能，团队还设计了一款桌面级应用，它基于纹理合成技术，能够从现实图片或存在瑕疵的纹理中截取其中的有效纹理，生成更大尺寸的无缝平面图像，用于提升模型贴图的效果。用户不需要太多的专业知识储备，就能够快速上手使用本系统，满足二维图像合成与三维模型贴图的设计需求，实现“轻办公”。

1 系统设计

1.1 总体设计

本系统主要分为两大模块：二维纹理图像合成、三维服饰模型贴图。其功能结构如图1所示。

图1 系统功能结构图

1.2 核心功能需求

1.2.1 纹理图像合成

用户上传想要合成的图片，在图片中选择并截取纹理区域后，系统以该区域为纹理样本，按照其表面的几何形状以及调整的参数，合成一张视觉上较为完整的图片，并且自动保存在指定目录中。

1.2.2 合成图像的编辑

图片保存在指定目录后，用户可以对合成图进行进一步的图像编辑处理，支持图像放大缩小、锐化、模糊（包含高斯模糊、平均模糊、中值模糊）、亮度调整、对比度调整等操作。相关操作完毕后，生成的图片将会覆盖原有图片，保存在同一目录。

1.2.3 用户登录与注册

若用户想要进行三维模型贴图，需先进行登录。若无账户，用户需先进行注册，完成注册后，输入正确的用户名、密码及验证码方可进入“服饰贴图”界面，体验本系统的完整功能。

1.2.4 三维模型贴图

用户点击“上传贴图”按钮并上传自定义图片后，系统会对三维人物模型中的服饰进行UV贴图，并实时呈现于网页之中。

1.2.5 三维模型控制

系统提供了多种服饰模型，用户可点击相应按钮，对服饰模型进行切换，使用鼠标拖移或者手指移动人物模型，能够对其进行缩放、旋转等操作。除此之外，用户能够通过手机或平板电脑，进行增强现实预览，多方位查看人物模型贴图服饰的效果。由此，用户能够对二维纹理图像有更为直观、更加立体的感受。

2 二维纹理图像合成模块实现

2.1 技术方案

二维纹理图像合成的技术实现涵盖了MySQL数据库、OpenCV跨平台计算机视觉库、Qt跨平台C++应用程序开发框架，技术方案如图2所示。

图2 二维纹理图像合成技术方案图

2.2 基于MRF模型的纹理合成

基于样图的纹理合成技术发展较快，目前已存在大量的相关技术。本文主要基于MRF模型的纹理合成算法[4]来实现现实二维纹理图像合成模块。

在图像特征匹配的初始情况下，设计师可从原输入图中取任一纹理单元作为“种子”写入合成图中，然后从该“种子”相邻纹理单元开始，如图3（b）所示，在样图中按扫描线顺序从左至右、从上至下移动匹配窗口。移动过程中，系统将匹配窗口中与前一纹理单元相似度最高的纹理单元，写至合成图并与前一纹理单元进行拼接。由此迭代，直至合成图铺满，如图3（c）所示，新的纹理就此合成。

图3 纹理合成算法效果图

本系统基于MRF模型的纹理合成，在纹理块间的匹配方式和拼接方式上进行了拓展、优化。其中，改进了以往的随机匹配纹理块的方式，采用卷积比较纹理单元间的相似度，搜索重合区域与原图相似度最高的区域进行匹配，使得相邻纹理块之间的重合区域基本上不会发生随机错乱情况。此外，纹理块之间的拼接方式采用最小误差路径算法[5]，尽可能地避免纹理块边缘的模糊、错位等问题发生，保证了合成质量。

2.3 MySQL管理参数列表

Qt与MySQL数据库进行连接，存储、获取算法相关的有效参数。当用户点击图像合成系统的可执行文件时，在联网的环境下，系统自动连接至远程MySQL数据库，查询纹理合成算法的相关字段名称及参数数值。

2.4 Qt平台开发桌面应用

为满足普通人群的使用要求，本团队将系统的图形化界面设计得更为简洁、美观，如图4所示。在保证界面简洁的同时，给用户提供了足够的操作提示信息，帮助他们顺利地进行图像合成。

图4 二维纹理图像合成系统界面

引入OpenCV库后，本团队基于Qt开源框架[6]实现了图像合成系统的主要的逻辑操作。由于用户上传的图片可能存在破损、瑕疵，系统设计了截图功能，让用户能够在图像合成之前对有效区域进行截取，实现效果如图5所示。

图5 用户裁剪有效区域

3 三维服饰模型贴图模块实现

3.1 技术方案

三维服饰模型贴图模块采用前后端分离搭建在线网站，后端涵盖MySQL数据库、近年来较为热门的MyBatis-Plus及Spring Boot框架，前端涵盖Three.js开源框架及WebGL技术，其中三维模型与场景借助Blender软件平台实现，技术方案如图6所示。

图6 三维服饰模型贴图模块技术方案图

3.2 Blender建模与渲染材质

Blender平台提供了大量而完整的套件，包含建模、渲染、合成、贴图等工具[7]。本团队以人物模型作为父级物体，将相应的服饰、定位框物体作为子级关联，从而保证了在增强现实场景下不断移动人物模型的过程中，保持服饰与其相对距离。为保证人物模型渲染的效果，对服饰与材质的UV贴图映射关系进行充分的设置，并且采用漫射BSDF的着色器进行材质输出。此外，场景信息将以LZMA压缩方式导出为glTF格式文件，降低浏览器加载模型的开销。

3.3 MyBatis-Plus处理数据访问层

网站的登录注册模块中，通过MyBatis-Plus框架技术，对MySQL数据库中的用户信息数据进行访问，大大简化了传统的JDBC操作。其中，数据库存储的用户密码经过MD5散列处理，为用户数据的安全性提供保障。

3.4 Spring Boot技术处理业务逻辑层

后端控制器处理用户的注册、登录，通过控制层的拦截器，保障服饰贴图页面访问的安全性。用户若要进入该页面，必须成功登录账号。拦截器会检查用户的Session是否携带了用户信息，若用户信息不为空，则正常获取服务；若用户信息为空，则重定向至登录页面。

3.5 利用WebGL技术完成三维渲染

前端基于开源HTML5跨屏框架ZUI，针对手机端、桌面电脑两种尺寸进行响应式网页设计。本系统采用前后端分离模式[8]，团队根据Swagger 2接口文档进行前后端数据交互开发。前端对用户注册或登录的表单数据进行校验，校验合法后传至后端。

此外，前端开源框架Three.js是基于原生WebGL封装运行的三维引擎。因而通过调用Three.js提供的API[9]，能够将存储三维模型的数据文件加载并解析，再通过Canvas在网页中绘制三维场景[10]，展现于浏览器视窗之中。除此之外，Three.js能够通过浏览器调用设备摄像头的权限采集真实场景，将虚拟的三维模型叠加于真实场景中[11]。三维服饰模型渲染效果如图7所示。

图7 三维服饰模型渲染效果图

4 系统测试

对于二维纹理图像合成模块，测试客户端环境为Windows 10系统。对于三维服饰模型贴图模块，测试服务端环境为Windows 10系统，数据库MySQL 5.7.30，JDK 1.8，而测试客户端环境为IOS 14.3系统，使用XRViewer浏览器访问系统网站。测试效果如图8所示。

图8 测试效果图

从测试效果来看，系统的核心功能符合项目组的预期目标，图像纹理合成质量较高，较少情况出现边缘模糊或错位的问题。贴图模型能够增强纹理图案的表面细节，具有一定的真实感。在增强现实场景下，虚拟的人物模型定位相对准确，偏移量在合理的范围之内，为用户提供了良好的参考。

5 总结

经过上述的研究与实践，团队在部署、测试系统的过程中，验证了基于图像合成技术的云服饰增强现实系统的可行性。纹理合成算法能够在轻量级桌面应用上高效的实现。此外，通过WebGL技术及Three.js开源框架所设计的网站系统，轻量且简洁，交互性良好，同时充分降低用户使用门槛。该系统能够使更广泛的普通人群享受计算机技术、互联网服务带来的便利，尽可能地满足人们在服装设计领域的普通需求。

显然，本系统仍然存在提升的空间，团队将在以后的研究中，着力于优化图像合成算法、压缩系统规模、简化用户的操作流程、提高部署服务器的性能，使系统能够迈上更高的台阶，为用户带来更优质的体验。