基于3D模擬與匹配技術(shù)的試衣系統(tǒng)

袁自勇　李瑤　傅威

摘要：通過(guò)真人模特實(shí)拍圖建立人體模型，運(yùn)用疊加層技術(shù)將人體模型與衣服模型匹配，并且將試衣效果圖以網(wǎng)頁(yè)的方式展現(xiàn)出來(lái)。該3D虛擬試衣系統(tǒng)可以根據(jù)用戶選擇的模特性別及身材參數(shù)來(lái)構(gòu)造虛擬人體模特，實(shí)現(xiàn)試衣展示和價(jià)格核算功能，并通過(guò)服務(wù)器端的數(shù)據(jù)庫(kù)保存用戶的個(gè)人信息和衣服搭配方案，更好地幫助用戶選擇衣服。

關(guān)鍵詞：3D；網(wǎng)頁(yè)；疊加層技術(shù)；試衣系統(tǒng)

中圖分類號(hào)：TP302 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）08-0108-03

1概述

據(jù)調(diào)查，我國(guó)的網(wǎng)民數(shù)量已達(dá)6.49億，互聯(lián)網(wǎng)普及率高達(dá)近50%。而網(wǎng)絡(luò)購(gòu)物作為一種新興的購(gòu)物模式，因其物美價(jià)廉而受到不少消費(fèi)者的喜愛(ài)。但是據(jù)我們了解，雖然各大網(wǎng)上購(gòu)物平臺(tái)都有商品評(píng)價(jià)機(jī)制，且商品具有實(shí)物照片，但是作為買(mǎi)家仍然有諸多不便，服裝類商品不能試穿，尺碼也不統(tǒng)一。導(dǎo)致很多消費(fèi)者網(wǎng)上購(gòu)買(mǎi)的衣服并不合身，造成不愉快的購(gòu)物體驗(yàn)。我們的產(chǎn)品正是基于這一點(diǎn)來(lái)開(kāi)發(fā)出的3D試衣技術(shù)。利用人體的參數(shù)來(lái)構(gòu)成真人3D模型，代替消費(fèi)者“試穿”其想要購(gòu)買(mǎi)的衣物，為其買(mǎi)此類商品提供較為可靠的參考。

中國(guó)的3D模型市場(chǎng)是一個(gè)巨大的市場(chǎng)，越來(lái)越多的公司開(kāi)始向3D產(chǎn)業(yè)邁進(jìn)，但是3D模型應(yīng)用到服裝業(yè)的市場(chǎng)幾乎空白?，F(xiàn)今3D技術(shù)發(fā)展已經(jīng)較為成熟，在游戲，影視和動(dòng)畫(huà)行業(yè)早已投入使用。近幾年3D打印技術(shù)的迅猛發(fā)展更是使3D技術(shù)日趨成熟，布料仿真，衣物動(dòng)畫(huà)技術(shù)的相繼出現(xiàn)，使3D虛擬試衣成為現(xiàn)實(shí)。而我們的3D試衣系統(tǒng)能為用戶選購(gòu)衣服時(shí)提供較大的方便，具有很大的發(fā)展空間。

2系統(tǒng)分析與設(shè)計(jì)

項(xiàng)目的意義在于為消費(fèi)者的服裝購(gòu)物提供便利，使廣大網(wǎng)上消費(fèi)者能夠快速地找到適合自身的衣物。該項(xiàng)目的另一意義在于實(shí)現(xiàn)3D環(huán)境下的兩個(gè)不同單位的相互匹配（即3D人體模型與服裝之間的匹配），該項(xiàng)目將3D模擬技術(shù)與電子商務(wù)結(jié)合，不僅思想新穎，而且具有很大的市場(chǎng)空間。

本項(xiàng)目設(shè)計(jì)的3D試衣系統(tǒng)能夠多方位地展示服裝和模特的三維模型，進(jìn)而完成虛擬試衣并翻轉(zhuǎn)展示，填補(bǔ)了國(guó)內(nèi)3D虛擬試衣系統(tǒng)的空白，極大地提高了虛擬試衣的真實(shí)性。和國(guó)外的3D虛擬試衣間相比，本系統(tǒng)也有其突出特點(diǎn)。由于建設(shè)性地把服裝操控技術(shù)引入虛擬試衣間的設(shè)計(jì)中，3D試衣系統(tǒng)有較好的實(shí)時(shí)性，并且允許用戶對(duì)虛擬模特身上的服裝做交互式微調(diào)，增加了用戶試衣的靈活性。

2.1系統(tǒng)需求分析

“基于3D模擬與匹配技術(shù)的試衣系統(tǒng)”應(yīng)具有以下功能：

1）用戶登錄功能。我們每個(gè)進(jìn)人試衣系統(tǒng)的用戶都有自己的賬號(hào)密碼，保證了用戶信息的安全性和保密性。

2）性別選擇功能。進(jìn)人試衣系統(tǒng)，用戶可自由選擇性別，這樣可以有不同的衣服可供選擇。

引選衣功能。系統(tǒng)要能夠比較主觀的展示出一系列的衣服，展示的房間里是一個(gè)2D仿3D服裝庫(kù)，用戶可以通過(guò)鼠標(biāo)或者鍵盤(pán)操作來(lái)選擇喜歡的服裝，以供虛擬試衣之用。

4）角度轉(zhuǎn)換功能。我們的模特試衣效果，可以進(jìn)行正反轉(zhuǎn)換，這樣可以為用戶提供更好的視覺(jué)體驗(yàn)。

5）模特體型改變功能。不同的人擁有不同的體型，我們?yōu)槟Ｌ卦O(shè)立了三種體型，可供用戶自由選擇，這樣可以看出衣服的真正穿著效果。

6j金額計(jì)算功能。本系統(tǒng)會(huì)自動(dòng)計(jì)算用戶選擇衣服的總價(jià)格，供用戶購(gòu)買(mǎi)衣服提供參考。

7）搭配收藏功能。系統(tǒng)具備收藏用戶衣服搭配的功能，方便日后的查找。

2.2系統(tǒng)框架設(shè)計(jì)

“基于3D模擬與匹配技術(shù)的試衣系統(tǒng)”是使用真人模特實(shí)拍圖建立男女原始模型，并運(yùn)行Java、C++、HTML等語(yǔ)言實(shí)現(xiàn)界面的生成與后臺(tái)的搭建。最終可以通過(guò)設(shè)置人體模型的三圍等數(shù)據(jù)，將衣服套穿在模型上，給用戶更好的視覺(jué)體驗(yàn)。

該系統(tǒng)采用模塊化設(shè)計(jì)，模塊之間是松耦合的，當(dāng)需求發(fā)生變化的時(shí)候，向系統(tǒng)中添加和刪減模塊十分簡(jiǎn)單。該系統(tǒng)充分考慮到負(fù)載平衡的問(wèn)題，隨著訪問(wèn)量的增加，可以通過(guò)調(diào)整服務(wù)器配置參數(shù)方面來(lái)提供更多的用戶在線訪問(wèn)的功能。

此外，系統(tǒng)采用Mysql數(shù)據(jù)庫(kù)，即時(shí)保存用戶的選擇和偏好，以便商家和用戶分析查看，而且數(shù)據(jù)的安全性也得以保證。由于用戶試穿的訪問(wèn)量比較大，加上有大量的圖片素材，可以采用P2P技術(shù)進(jìn)行匹配，保證系統(tǒng)運(yùn)行的流暢性。

3系統(tǒng)功能設(shè)計(jì)

3.1系統(tǒng)總體結(jié)構(gòu)

本系統(tǒng)主要由客戶端與服務(wù)端兩部分構(gòu)成，其中客戶端包括登錄模塊，以及試衣與瀏覽模塊，而服務(wù)端主要包括系統(tǒng)管理模塊與數(shù)據(jù)交互模塊。系統(tǒng)功能結(jié)構(gòu)圖如圖1所示。

3.2系統(tǒng)各模塊設(shè)計(jì)

3.2.1客戶端系統(tǒng)主要功能如下

3.2.1.1登錄與注冊(cè)模塊

在登錄界面新用戶注冊(cè)成為會(huì)員，檢驗(yàn)用戶信息是否合法，如不合法，提示用戶修改；如合法，將用戶登錄信息經(jīng)數(shù)據(jù)傳遞模塊傳送的數(shù)據(jù)庫(kù)儲(chǔ)存，保證在下次用戶登錄系統(tǒng)時(shí)能正確的驗(yàn)證用戶的注冊(cè)信息。

3.2.1.2試衣與瀏覽模塊

1）服裝方面：從數(shù)據(jù)庫(kù)中調(diào)出已有的服裝展示給用戶，使用戶瀏覽不同品牌和不同類型的服裝，用戶可以自由選擇服裝搭配，在相應(yīng)的模特上觀看試穿效果，以便于用戶選擇，用戶可以收藏自己喜歡的搭配，以便于下次更好的尋找。

2）模特方面：用戶可以自由選擇適合自己體型的模特，可以從多角度觀看衣服在模特身上試穿的效果，為購(gòu)買(mǎi)衣服提供參考。

3.2.2服務(wù)端系統(tǒng)

主要功能如下：

3.2.2.1系統(tǒng)管理模塊

系統(tǒng)對(duì)用戶信息及個(gè)人三維模特進(jìn)行數(shù)據(jù)存儲(chǔ)，確保用戶信息不會(huì)出現(xiàn)錯(cuò)亂，每當(dāng)新增加一個(gè)用戶信息，或服裝增加時(shí)，都會(huì)對(duì)數(shù)據(jù)庫(kù)進(jìn)行更新，確保系統(tǒng)穩(wěn)定運(yùn)行同時(shí)便于管理員對(duì)系統(tǒng)進(jìn)行維護(hù)管理。

3.2.2.2數(shù)據(jù)交互模塊

用戶在客戶端所產(chǎn)生的數(shù)據(jù)回饋給數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)根據(jù)數(shù)據(jù)類型進(jìn)行數(shù)據(jù)綜合管理，再根據(jù)數(shù)據(jù)分析調(diào)用相應(yīng)的衣服反饋給客戶端，達(dá)到系統(tǒng)有序高效的運(yùn)轉(zhuǎn)。

3.3效果圖展示

3.3.1用戶登錄界面

用戶可在登錄界面登錄或注冊(cè)賬號(hào)（如圖2）。

3.3.2挑選與試衣界面

用戶可在左側(cè)的衣物區(qū)點(diǎn)擊相應(yīng)的衣物，在右側(cè)的人物模型上瀏覽相應(yīng)的情況必要時(shí)可進(jìn)行人物的翻轉(zhuǎn)（如圖3）。

4系統(tǒng)的關(guān)鍵技術(shù)

4.1B/S結(jié)構(gòu)

B/S結(jié)構(gòu)（Browser/Server），是WEB興起后的一種網(wǎng)絡(luò)結(jié)構(gòu)模式。該模式將系統(tǒng)功能實(shí)現(xiàn)的核心部分集中到服務(wù)器上，客戶機(jī)上只要安裝一個(gè)瀏覽器，服務(wù)器安裝數(shù)據(jù)庫(kù)即可，瀏覽器通過(guò)Web Server同數(shù)據(jù)庫(kù)進(jìn)行數(shù)據(jù)交互。

本系統(tǒng)采用模塊化設(shè)計(jì)，所有的模塊都是P2B/S結(jié)構(gòu)實(shí)現(xiàn)，將客戶機(jī)的壓力大大減低，負(fù)荷均勻地分配給服務(wù)器。此外，B/S結(jié)構(gòu)從根本上彌補(bǔ)了傳統(tǒng)的二層模式的C/S結(jié)構(gòu)的缺陷。首先BIS建立在廣域網(wǎng)之上，比C/S具有更強(qiáng)的適應(yīng)范圍。其次，B/S的多重結(jié)構(gòu)要求構(gòu)件相對(duì)獨(dú)立的功能，能夠相對(duì)較好的重用。而且，B/S建立在瀏覽器上，有更加豐富和生動(dòng)的表現(xiàn)方式與用戶交流，減低難度和開(kāi)發(fā)成本。

4.2AJAX開(kāi)發(fā)技術(shù)

AJAX即“Asynchronous Javascript And XML”，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。傳統(tǒng)的網(wǎng)頁(yè)如果需要更新內(nèi)容，必須重載整個(gè)網(wǎng)頁(yè)頁(yè)面。

本系統(tǒng)通過(guò)XMLHTTPRequest對(duì)象，使得JavaScript可在不重載頁(yè)面的情況與Web服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁(yè)面的情況下，就可以產(chǎn)生局部刷新的效果。此外本系統(tǒng)中使用$.ajax（）方法實(shí)現(xiàn)試衣間的前端與數(shù)據(jù)庫(kù)的交互，采用post請(qǐng)求方式來(lái)請(qǐng)求服務(wù)器進(jìn)行處理。

4.3疊加層技術(shù)

本系統(tǒng)采用真人模特實(shí)拍圖建立男、女兩個(gè)原始模型，如果用戶先穿上了一件襯衫，然后在外面再穿上一件西裝，需要實(shí)現(xiàn)兩件衣服疊穿的效果，通過(guò)疊加層的技術(shù)去模擬衣服搭配的效果，再配合衣服圖片制作的時(shí)候加入的立體效果和適當(dāng)?shù)年幱?，讓試衣效果盡可能的逼真。此外再通過(guò)CSS的style屬性控制層是否顯示來(lái)實(shí)現(xiàn)是否試穿某件衣服的效果和css的z-in-dex屬性控制層的疊加來(lái)實(shí)現(xiàn)衣服的疊穿效果。

5結(jié)束語(yǔ)

該虛擬試衣系統(tǒng)實(shí)現(xiàn)了真人人體模型試穿衣服、衣服價(jià)格核算以及試衣效果多方位展示的功能，為用戶在網(wǎng)購(gòu)衣服時(shí)提供了有效的參考。該系統(tǒng)采用B/S結(jié)構(gòu)取代了傳統(tǒng)的二層模式的C/S結(jié)構(gòu)，大大降低了客戶機(jī)的配置要求和負(fù)荷，保證了真正的Thin-Client機(jī)制，符合當(dāng)前網(wǎng)絡(luò)應(yīng)用發(fā)展趨勢(shì)，具有較好的發(fā)展前景。當(dāng)然該系統(tǒng)還存在著改進(jìn)之處，比如通過(guò)加入領(lǐng)帶、包、飾品等的搭配效果，以及360度旋轉(zhuǎn)、試衣間情景再現(xiàn)功能，讓試衣過(guò)程更趨完善。