一種基于款式輪廓圖的服裝虛擬展示方法

朱欣娟， 戴 炳， 趙 輝， 林 麗

(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