一种基于款式轮廓图的服装虚拟展示方法

朱欣娟， 戴 炳， 赵 辉， 林 丽

(1.西安工程大学 计算机科学学院，陕西 西安 710048； 2.山东如意毛纺织股份有限公司，山东 济宁 272000； 3.山东如意集团，山东 济宁 272000)

一种基于款式轮廓图的服装虚拟展示方法

朱欣娟1， 戴 炳1， 赵 辉2， 林 丽3

(1.西安工程大学 计算机科学学院，陕西 西安 710048； 2.山东如意毛纺织股份有限公司，山东 济宁 272000； 3.山东如意集团，山东 济宁 272000)

针对目前服装产品研发过程中需要反复画服装效果图，导致效率低下，提出一种基于款式轮廓图的服装效果虚拟展示方法，该方法只需设计师提供一幅服装款式轮廓图，通过计算机款式描述、面料区域及填充参数定义和界面交互，即可实现不同面料制作服装效果的快速展示.给出了该方法的技术路线和服装纹理映射填充算法、立体感算法等关键技术要点，构筑了移动终端服装定制原型系统.试验结果表明，该方法能够快速展示不同面料制作服装效果，简洁高效，可大大提高服装研发和客户交互效率.

款式轮廓图； 服装虚拟展示； 面料纹理映射填充； 服装定制

工业4.0战略计划的提出对传统制造业产生了巨大的影响，客户对个性化产品的需求已经迫使制造企业主动寻找解决方案来满足客户的需求[1].大型服装企业纷纷采用基于互联网的在线个性化定制系统来提升服装产品的技术附加值，如凡客、宝鸟等[2]，其虚拟展示系统，典型的如凡客衬衣定制系统展示，客户可以通过系统方便地选择不同衬衣款型、面料、颜色等信息，对具体的细节进行选择设计，系统实时展示客户个性化设计的服装效果照片.美国的Mysuit[3]服装企业所提供的西服套装高级定制虚拟展示系统，客户可以选择服装款式，如休闲款式或者经典款式来开始定制，后续的选择还有面料种类、花色、服装领型、口袋类型、几粒扣、是否开衩等款式部件信息，每次选择完成会在网页实时更新服装的手绘渲染图片等.普莱士、红岭等品牌推出了基于三维虚拟展示技术的服装定制.服装定制过程是客户交互式选择面料等服装设计元素的过程，其核心和关键技术是服装展示技术，顾客需要看到自己所选款式的实时虚拟展示效果.三维虚拟展示可较好地模拟服装的真实效果，真实感强.目前对三维服装虚拟展示技术的研究成为热点[4-6]，其缺点是需要专业人员对服装和人体进行建模[7]，开发成本昂贵， 由于设计师和建模技术人员分属两个不同的技术环节，造成从设计到最终展示的开发周期相对较长.目前，从国内外众多购物网站来看，服装商品大多通过图片这种二维形态来展示其廓型和局部细节[8]，这种方式具有成本低廉、加载快捷、实时性强等优点，因而在实际中应用最为广泛，成为当前服装E-Commerce领域虚拟展示的主流技术[9-10].基于图像的虚拟展示研究由于其实际应用价值较高，近年来已取得了许多研究成果[11-13].

现实中，目前许多服装厂的设计部，都是依据客户需求，设计师手工设计绘制服装的二维效果图，提交客户进行交流修改，绘制二维效果图主要采用Photoshop或CorelDRAW软件[14-15]，往往需要查看不同面料的制作效果，绘图工作量大.文献[16]提出了一种由草绘服装款式图生成三维虚拟展示模型的方法，该方法首先需要一个三维人体模型，设计师在该人体模型的平面图界面上绘制服装款式图，核心算法是由平面的(x，y)坐标推算z坐标，服装款式图上的关键点(breakpoints)如果与人体模型区域重合，则认为其z坐标与人体模型对应z坐标基本相等，否则要单独定义该点z坐标，同时，需要定义多种折纹线(fold lines)以产生褶皱阴影效果.其草绘服装款式图绘制的复杂度和所需要的技巧与三维建模工作量相差不大.基于此，本文提出并实现了一种基于款式轮廓图的二维服装虚拟展示方法，该方法只需要设计师提供一幅服装款式轮廓图，提交给服装展示系统，通过简单的计算机交互操作，即可实现不同服装面料制作效果的快速展示.为了提高虚拟展示的真实感效果，采用基于3次贝塞尔曲线的纹理映射算法实现面料纹理与服装外轮廓走势相一致，采用服装纹理立体感算法实现面料纹理的模拟三维真实感视觉效果，使款式轮廓图面料填充更加自然真实.最后对面料效果图使用基于改进浮雕算法的服装阴影算法，通过对部分区域和整体背景区域的阴影效果叠加获取服装真实感渲染效果图.

1 基于款式轮廓图的服装虚拟展示方法

基于款式轮廓图的服装虚拟展示方法整体流程分为款式定义和客户查看虚拟展示两部分，各自的操作流程分别如图1和2所示.

图1 款式定义流程Fig.1 The processing of styles definition

图2 客户查看虚拟展示流程Fig.2 The processing of client view virtual display

由图1可知，设计师设计出款式轮廓图，调入系统首先进行款式描述.服装款式描述包括定义款式名称、编号、款式特征信息等，例如西服的款式特征包括整体廓形和细节部件，其中，整体廓形可以分为标准型、修身型等，细节部件可分为前门襟、袖衩、领子、袖扣、手巾袋、大袋、胸省、下口、背部等.其次采用区域生长算法、阈值法和区域标号法等算法提取定义款式轮廓图的数字化信息[10]，包括服装面料区域、边缘信息(如面料填充参数包括区域面料填充方向、面料缩放倍数等，其他参数如服装中轴线信息和扣子位置信息等).最后将款式描述及定义参数存入款式数据库待查.

由图2可知，客户通过用户界面选择款式轮廓图特征属性，通过款式数据库查询提取款式轮廓图及对应款式参数，客户在面料库中选择填充面料，运用面料区域填充算法及服装阴影算法，展示虚拟成衣效果.

2 面料区域填充算法

基于服装款式轮廓图设计及虚拟展示系统主要运用图像处理技术实现服装面料填充以及服装虚拟展示.采用基于3次贝塞尔曲线的服装走势算法以及服装纹理立体感算法来实现具有真实感的服装款式效果图.

2.1 面料区域填充原理

面料区域填充原理图如图3所示.图3(a)为服装轮廓线图，鼠标依次点击图3(a)中的图像封闭区域中任意点作为种子点，由图像区域增长算法，可以得到图3(b)服装面料区域定义.

(a) 服装轮廓图 (b) 服装面料区域定义

(c) 面料纹理图案 (d) 3次贝塞尔曲线定义

(e) 基于3次贝塞尔曲线面料变形 (f) 立体感面料变形

(g) 服装效果

区域增长算法的基本思想是将具有相似性质的像素集合起来构成区域.首先在待识别的每个区域中选择一个种子点作为生长的起始点，然后在种子点的邻域中搜索与种子点的相似特征度满足指定生长准则的像素，并与种子点所在区域合并.此时将新合并的像素作为新的种子点，继续以上搜索和合并过程，直到没有可以合并的像素为止[17].

图3(b)定义了3种面料区域，分别用不同颜色的色块代表该区域将填充不同的服装面料种类，定义结果采用和图像大小相同的矩阵文件保存，以供以后面料的快速填充调用.图3(c)是面料图，假设图3(b)的1号面料区域采用图3(c)底图面料，则需要将该面料图案按照定义好的缩放比缩放平铺至图3(a)尺寸大小，并按照定义面料方向(角度)旋转(图3(c)面料旋转方向为0o)，然后将对应区域像素点复制到图3(b)对应面料区域，即可得到服装面料填充图.由于服装面料是柔性体，悬挂或穿着时服装外轮廓会自然弯曲，相应面料纹理也会随之自然变化.直接复制图3(c)面料纹理图案像素点至图3(b)的1号衣袖区域像素点，这显然不符合实际面料纹理变形特征，与服装外轮廓走向不匹配.同时，由于服装袖子外形为柱体，从视觉上来说，衣袖中心区域与靠近衣袖轮廓边缘区域距离观察点远近不同，区域的面料纹理(如网格或条纹)形状存在视觉上的差异和变形.

因此，本文采用基于3次贝塞尔曲线服装走势算法获取服装外轮廓走势信息，如图3(d)中虚线为定义的左袖子走势3次贝塞尔曲线，其中基于3次贝塞尔曲线服装走势算法包括交互获取4个坐标点P0～P3，该系列坐标点代表服装外轮廓走势特征，系统自动拟合3次贝塞尔曲线，接着对绘制的曲线计算相对距离并在矩阵中保存，命名此矩阵为偏移矩阵.然后客户选择面料库中的面料，根据获得的偏移矩阵对贝塞尔曲线块定义的面料进行走势变形，如图3(e)虚线框中面料所示，接着对走势变形的面料使用服装立体感算法，获取从服装区域中心至轮廓边缘逐渐均匀收窄的纹理面料柱状立体感效果，如图3(f)虚线框中面料所示.最后，根据对应的图3(b)1号面料区域，填充纹理面料.依据以上算法原理，用户可以快速切换不同面料定义区域的面料进行效果查看，直至确定最终的服装效果如图3(g)所示.

左衣袖区域采用不同方式面料填充的效果对比如图4所示.由图4可见，图4(c)最符合人体视觉特征.

图4 不同方式面料填充效果Fig.4 Filling effect of fabric by different ways

2.2 基于3次贝塞尔曲线的面料纹理映射算法

服装面料是柔性体，悬挂或穿着时服装外轮廓会自然弯曲，相应面料纹理也会随之自然变化.以图3(g)服装款式效果图的袖子为例，服装款式轮廓图的袖子轮廓自然弯曲下垂，导致该区域面料纹理也随外轮廓自然弯曲发生形变.针对以上特征，本文采用3次贝塞尔曲线来模仿服装款式轮廓图的自然弯曲走势.根据4个点确定一条光滑的3次贝塞尔曲线，假设4个坐标点依次为P0，P1，P2，P3，则3次贝塞尔曲线表达式为

B(t)=P0(1-t)3+P1t(1-t)2+
P2t2(1-t)+P3t3(0≤t≤1)

(1)

接着对绘制的曲线计算相对距离并在矩阵中保存，此矩阵命名为偏移矩阵.偏移矩阵获取原理如图5所示.

图5 偏移矩阵获取原理Fig.5 The gaining principle of offset matrix

在图5中，原点为款式图左上角像素点位置，首先定义一个矩阵A[m]，m为P0～P3点的y轴坐标高度差.图中曲线为系统由P0，P1，P2，P3拟合得到的3次贝塞尔曲线.对于该曲线上的任意一个像素点D(xi，yi)，其唯一对应矩阵中的一个成员A[i]，其中i=D(yi)-P0(y)，i为正整数；A[i]=Δx=D(xi)-P0(x)，A[i]为浮点数.

得到偏移矩阵A[m]后，根据获取的偏移矩阵和客户选择的填充面料对面料进行变形，本文采用横向差值算法进行面料变形，使面料变形后连续自然.首先获取上述偏移矩阵中偏移量Δx，定义Δf为Δx小数部分并取绝对值，假设变形前面料像素点为P(x，y)，对应变形后的面料点为P′(x，y).变形算法见式(2)，变形填充效果如图4(b)所示.

P′(x，y)=ΔfP(x+Δx-Δf，y)+(1-Δf)·
P(x+1+Δx-Δf)

(2)

2.3 服装纹理立体感算法

服装袖子外形为柱体，从视觉上来说，由于衣袖中心区域与靠近衣袖轮廓边缘区域距离观察点远近不同，区域的面料纹理(如网格或条纹)大小存在视觉上的差异和形变.为了模拟这种三维真实感视觉效果，二维服装图像进行面料填充时不能采用平铺模式，如填充衣袖时， 衣袖纵向中轴区域面料纹理间隔是均匀的，越接近边缘，面料纹理越窄，存在被挤压的感觉.本文采用面料纹理立体感算法实现该效果的面料变形.

(3)

面料纹理立体感变形填充效果如图4(c)所示.

3 基于改进浮雕算法的服装阴影效果

为了使二维服装虚拟展示整体效果更具有立体感，本文对服装款式效果图3(g)进行基于改进浮雕算法的服装阴影算法研究.服装阴影算法原理如图6所示.

图6 服装阴影算法原理Fig.6 Principle of clothing shadow algorithm principle

定义图3(b)中除去服装面料区域和轮廓线区域以外的像素点区域为背景区域，设服装效果图3(g)为X，浮雕厚度为n，光照角度为145°，浮雕后图像为Y.服装阴影算法步骤如下所述.

(1) 对于X(i，j)，按式(4)计算浮雕效果，如图6(a)所示.

(4)

式(4)中：当Y(i，j)>255时，令Y(i，j)=255.

图6(a)和图3(g)相比，前者增加了服装整体立体感效果，但是，服装面料失真.

(2) 找出外轮廓阴影部分像素点，复制到图3(g).遍历款式(图3(g))和服装浮雕效果图6(a)，结合上述定义的背景区域，判断如果款式效果图中当前像素点(x，y)以及像素点(x-n，y)不为背景，而(x+n，y)为背景时，那么当前点在浮雕效果图中为外轮廓阴影点，则把浮雕效果图中当前像素点复制给款式效果图，否则仍然保留款式效果图点.

(3) 对于服装面料区域服装部件所产生的阴影，如领带部分产生的阴影，需要将该阴影和衬衣面料进行图像合成操作.首先将领带单独作为图像实体，其余区域作为背景，运用式(4)浮雕算法运算得到领带阴影(如图6(b)所示)；然后将该阴影部分像素点Z按照式(5)和图3(g)对应像素点衬衣面料X进行图像合成，得到合成后的像素点M.

M=αX+(1-α)Z，α=0.4

(5)

其中：α为图像合成系数.

结合浮雕效果图，服装部件(领带、衣领等)浮雕效果图和款式效果图复制合成得最终服装阴影效果图如图6(c)所示，观察可见，该效果图比直接填充面料的款式(图3(g))立体感效果更强.

4 系统实例

图7所示为服装定制系统，包括服务器、轮廓款式图设计端、手机APP展示端、主要实现款式图设计查询、面料区域及参数定义、面料选择、服装虚拟展示，以及生成订单等功能，其中轮廓款式图设计和服装虚拟展示是该系统的核心功能.手机APP端采用安卓2.2模拟器实现功能，编写环境为eclipse，使用Java语言开发；轮廓款式图设计端采用Visual Studio 2008和SQL Server 2005为开发环境，使用C#语言开发.

图7 服装定制系统结构功能Fig.7 Structure and function of clothing customization system

4.1 轮廓款式图设计端

图7所示的轮廓款式图设计端主要实现下述4个功能.

(1) 款式信息定义：该模块包括轮廓款式图获取，款式类型、款式部件选择，款式图像填充区域定义，面料填充方向定义，服装外轮廓走势定义等，如图8所示.

图8 款式信息定义界面Fig.8 The interface of clothing definition

由图8可见，通过左侧的一组可选框定义服装部件属性，中部显示调入系统的款式轮廓图，右侧上部为定义款式图图像特征的一组工具箱，右侧下部同步显示所定义的参数.该界面定义了2个面料填充区域，该过程需要人工鼠标在款式图界面选取面料区域识别种子点，对于衣袖区域，由2个封闭小区域构成，需要点选2次.面料填充方向定义对于每种面料区域需人工鼠标画一条方向线，系统自动计算角度.服装外轮廓走势定义需要沿服装轮廓走向选取4个点，系统依此绘制3次贝塞尔曲线，实现面料自动变形填充.系统操作简单，人工定义工作量大小取决于服装款式包含的面料种类和填充区域数量，一般所有定义操作可在30～60 s内完成.保存时将以上定义所有参数存入数据库或文件，供后续面料填充调用.

(2) 款式信息管理：该模块主要包括轮廓款式信息添加、删除、修改、查询和浏览功能.

(3) 款式信息发布：该模块主要是款式设计师将设计好的服装款式效果图发布到服务器，为客户个性化定制提供必要的服务.

(4) 订单管理：该模块主要对客户下的订单进行管理，比如获取客户信息以及订单信息等.

4.2 服务器

图7所示的系统服务器分为Web服务器和数据库服务器.设计人员将设计好的款式信息上传至服务器.Web服务器存储服装款式图像的文件信息，其中有服装款式轮廓图、服装款式效果图以及矩阵文本信息等.数据库服务器存储服装款式图的属性信息，包括款式图编号、款式图部件编号、填充区域路径、纹理走向、面料编号、面料种类、面料图案等.Web服务器和数据库服务器通过HTTP协议和手机APP端进行交互.

4.3 手机APP端

图7所示的手机APP端功能主要包括用户注册/登录、服装款式选择、服装部件选择、面料选择(如图9所示)、服装虚拟展示(如图10所示)以及生成订单.

服装款式选择主要如西服上装体型是标准、修身还是特殊体型；服装部件选择主要包括衣领、前门襟、手巾袋、袖袋等，客户根据自己的喜好选择不同的类型；面料选择是根据面料类型如棉布、麻布、化纤等进行选择.然后根据客户个性化的选择展示服装面料填充后的效果图，此过程通过与服务器交互获取图像对应的文件信息，通过图像处理技术实现面料填充以及面料切换.服装虚拟展示是实现定制服装虚拟效果展示的过程；生成订单是结合客户提供的信息以及定制服装信息的过程.

图9 服装面料选择Fig.9 Clothing fabric choice

图10 服装虚拟展示Fig.10 Virtual clothing display

5 结 语

本文提出一种基于款式轮廓图的服装虚拟展示方法，该方法与企业现有研发服装款式方法无缝结合.本文方法只需一张款式轮廓图，不论多少种面料和部件，面料效果图由系统自动生成，大大减少了展示工作量.采用Photoshop或CorelDRAW绘制款式轮廓图，服装定义工作量小.由于不需要三维建模，直接将款式轮廓图加载系统即可快速展示，与三维展示系统相比具有成本低廉、款式设计和展示快捷简便、软件性价比高等优点.通过手机APP发布展示效果，客户也可直接通过APP进行服装效果查询和定制，大大提高了企业和终端客户的沟通效率.通过本文的服装走势纹理映射算法和服装纹理立体感算法使款式轮廓图面料填充更加自然真实，应用基于改进浮雕算法的服装阴影算法，获取服装立体感效果图，一定程度上弥补了服装二维展示相比三维展示的缺陷.当然，从二维款式轮廓线到三维服装的映射算法是下一步需要努力的方向.

[1] MOHAJERI B， NYBERG T， KARJALAINEN， et al. The impact of social manufacturing on the value chain model in the apparel industry[C]//Proceedings of 2014 IEEE International Conference on Service Operations and Logistics， and Informatics. Qingdao， China： Institute of Electrical and Electronics Engineers Inc，2014：378-381.

[2] 刘洋.基于MTM的服装定制系统的设计与实现[J].纺织科技进展，2008(6)：86-88.

[3] Mysuit[EB/OL].(2015-03-01). http：//www.mysuitny.com/website/default.aspx.

[4] TEJA M， KARTHIK S，KUMARI K， et al. Virtual 3D trail mirror to project the image reality[J]. Smart Innovation， Systems and Technologies，2015，31：165-174.

[5] MAGNENAT-THALMAAA N，VOLINO P，KEVELHAM B， et al. An interactive virtual try on[C]//Proceedings of 2011 IEEE Virtual Reality. Singapore：IEEE Computer Society， 2011：263-264.

[6] MAGNENAT-THALMANNL N，KEVELHAML B，VOLINO P， et al. 3D web-based virtual try on of physically simulated clothes[J]. Computer-Aided Design， 2011，8(2)：163-174.

[7] 梁惠娥，张守用.虚拟三维服装展示技术的现状与发展趋势[J].纺织导报，2015(3)：70-73.

[8] 高长宽，胡守忠.数字化服装虚拟展示、网络定制商务系统的研究[J].上海纺织科技，2014，42(4)：57-60.

[9] GARCIA C， BESSOU N. Image processing design flow for virtual fitting room applications used in mobile devices[C]//Proceedings of IEEE International Conference on Electrio/Information Technology. Spain： IEEE Computer Society， 2012：1-5.

[10] 贺行行，李济，朱欣娟，等.面向网络定制的服装展示系统[J].西安工程大学学报，2015，29(2)：172-176.

[11] ZHENGLONG Z， BO S， SHAOJIE Z， et al. Image-based clothes animation for virtual fitting[C]//Proceedings of SIGGRAPH Asia 2012 Technical Briefs. Singapore： Association for Computing Machinery， 2012.

[12] HAUSWIESNER S， STRAKA M， REITMAYR G. Virtual try-on through image-based rendering[J]. IEEE Transactions on Visualization and Computer Graphics， 2013，19(9)：1552-1565.

[13] YAMADA H， HIROSE M， KANAMORI Y， et al. Image-based virtual fitting system with garament image reshaping[C]//Proceedings of 2014 International Conference on Cyberworlds. Santander， Spain： Institute of Electrical and Electronics Engineers Inc，2014：47-54.

[14] 魏娟.Photoshop平面设计在服装纺织中的创新应用[J].纺织报告，2014(10)：60-62.

[15] 何钰菡.电脑辅助设计手段在服装设计中的应用与发展[D].重庆：西南大学纺织服装学院，2013：2.

[16] EMMANUEL T，JAMIE W， LAURENCE B， et al. A sketch-based interface for clothing virtual characters[J]. IEEE Comput Graph，2007，27(1)：72-81.

[17] PAVLIDIS T， LIOW Y T. Integrating region growing and edge detection[J]. IEEE Trans on Pattern Analysis and Machine Inte lligence， 1990， 12(3)： 225-233.

(责任编辑： 刘园园)

A Virtual Clothing Display Approach Based on the Garment Drawing

ZHUXinjuan1，DAIBing1，ZHAOHui2，LINLi3

(1.College of Computer Science， Xi’an Polytechnic University， Xi’an 710048，China； 2.Shandong Ruyi Woolen Textile Co.Ltd.， Jining 272000，China； 3.Shandong Ruyi Group， Jining 272000，China)

A virtual clothing display approach based on the garment drawing is presented in response to the issue that clothing renderings need to be drawn repeatedly during research and development process of clothing， which result in an inefficient use of resources.Designers simply provide a picture of a dress style profile， and then different effect of ready-made clothing by different fabrics from the dress style can be quickly showed after the style description， fabric filling area and parameter definition.Technical route and key technologies such as the fabric texture mapping and filling， stereo feeling algorithm， etc.are given out.The mobile prototype system of garment customization is developed.Experimental results show that it can quickly display different fabric production effect and greatly improve the efficiency of customer interaction.

garment drawing； virtual clothing display； fabric texture filling and mapping； garment customization

1671-0444(2017)01-0088-07

2015-12-24

陕西省科技厅自然科学基金资助项目(2013JM8034)

朱欣娟(1969—)，女，河南开封人，教授，博士，研究方向为智能信息处理. E-mail：1527254991@qq.com

TP 391.9

A