基于Web的網絡試衣間系統

泮雯雯等

摘 要： 運用3D模型構造軟件（MAKEHUMAN、BLENDER、MARVELOUS DESIGNER、POSER等）來實現用戶3D虛擬模特的構造及不同材質服裝的形態仿真，同時利用BLENDER4WEB組件將模特的試衣效果圖嵌入網站中以網頁形式展示，能讓用戶全方位地觀察3D虛擬模特的試衣效果。該基于Web的3D虛擬網絡試衣間系統能根據用戶提供的形體參數匹配出最符合條件的3D虛擬模特并實現試衣展示功能，有效地幫助用戶選購服裝。

關鍵詞： Web； 3D； 虛擬模特； 試衣系統

中圖分類號：TP393 文獻標志碼：A 文章編號：1006-8228（2015）05-35-03

Abstract： The Web-based system of 3D virtual online fitting room is based on the web technology to show the 3D virtual models with garments according to the information provided by the users. The system is implemented using 3D modeling software， such as MAKEHUMAN， BLENDER， MARVELOUS DESIGNER and POSER. These software can build the users' virtual models and garments of different materials. Meanwhile， the system utilizes BLENDER4WEB to show the 3D virtual models in WebPages. In a word， the system provides the effective references to help users fitting and choosing clothes online.

Key words： Web； 3D； virtual model； fitting room

0 引言

隨著計算機技術、網絡虛擬系統的普及，網上購物逐漸成為人們購買日常生活用品的主要渠道之一。然而，在網絡零售環境下，服裝公司不僅需要克服時尚行業的短暫性，還要克服顧客的消費心理難題。作為四大基本需求之一，當今人們對服裝有著更“苛刻”的要求，希望服裝不僅要保暖，還要合身、美觀和個性化。因此，人們更注重根據個人的體型特征挑選服飾[1]。

若在B2C的商務運作模式下，消費者能通過網絡虛擬環境選購自己心儀的服飾，將節省大量的企業營銷、運輸、倉儲成本，同時也提高了購買率。

目前，人們使用的網絡服飾交易平臺主要有阿里巴巴、淘寶網等，這些平臺的服裝效果是通過二維平面圖來展示，服裝的顏色、款式、材質面料、等難以通過二維平面圖準確地體現。據調研資料顯示，近50%的人不通過網絡購買服飾，而大部分有過網上購買服飾經歷的顧客都表示在購物過程中出現過尺碼、款式或色彩不滿意等問題[2]，88%的調查者表示，對網上購買服裝不能試穿存在顧慮。

綜上所述，如果網絡服裝交易平臺能夠提供一種3D服裝試穿系統，它能基于用戶本人的形體參數生成相應的3D虛擬模型，此外還能夠通過布料的材質、尺寸等信息模擬服裝，并通過虛擬模型展現出來，用戶便可以通過此平臺觀察衣服的試穿效果，從而減少人們網上購買服裝的顧慮，促進服飾的網絡銷售。

1 系統分析與設計

“基于Web的網絡試衣間系統”的設計遵循軟件系統的生命周期的原則，系統設計應該遵循的重要原則有：實用性、可靠性、先進性、可擴充性、安全性；用戶界面友好、健壯性、可自適應性[3]。

1.1 系統需求分析

“基于Web的網絡試衣間系統”應具有以下功能。

⑴ 建立人體模型。系統能根據用戶輸入的形體參數，匹配相對應的人體模型，模擬用戶實際體型。

⑵ 選擇服裝。系統能展示一系列服裝，用戶可用鼠標在服裝展示區進行挑選，供試衣所用。

⑶ 試穿功能。系統允許用戶通過操作將選中的服裝移動至模擬客戶的虛擬模特身上進行試穿，并在此模特身上展示。

⑷ 展示功能。系統允許客戶在虛擬試衣完成后，通過鼠標自由旋轉模特，全方位觀察試穿效果。

1.2 系統框架設計

本文設計的系統架構為Browser/Server/Database Server的B/S架構，客戶可通過瀏覽器訪問該3D虛擬試衣間系統，服務器端采用Web方式進行應用系統開發，并使用應用邏輯服務和數據庫服務，它們與客戶端形成三級系統結構。這樣的三級系統結構具有結構清晰、易于維護、運行速度快等優勢[4]。

2 系統功能設計

本文3D虛擬試衣系統主要功能包括客戶端處理和服務端處理。客戶端處理為客戶提供進入該系統后的各項服務，有用戶試體驗、用戶身份驗證、服裝展示、服裝試穿四個功能模塊。系統提供服裝展示平臺，并為初次登陸該系統的用戶提供虛擬模特構建的服務，用戶選中所需的服裝后，可在虛擬模特身上試穿，并且多角度觀察試穿效果。服務端功能解決系統內部的處理問題：服裝管理、模特管理、客戶信息管理等。系統前臺和后臺功能分別如圖1和圖2所示。

2.1 客戶端處理模塊

⑴ 用戶試體驗模塊。在該模塊中用戶無需注冊便可體驗系統的一些基本功能。當用戶進入系統后點擊Go to try按鈕便可進入該區域，選擇服裝展示區的服裝便可進行試穿并觀察試衣效果。此模塊旨在消除用戶對網站需先注冊后體驗的反感，提升用戶對系統的信任度。

⑵ 用戶身份驗證。用戶身份驗證包括用戶注冊和用戶登錄兩個模快。

用戶注冊：首先驗證客戶是否已經在該系統中注冊，若無，則進入用戶注冊窗口，輸入用戶信息進行注冊。信息提交后，系統將檢查這些信息，若合法，則將用戶信息存入數據庫；反之，將提示用戶進行修改。

用戶登錄：用戶合法注冊后，能登陸并完全使用試衣系統。也可以修改帳號和密碼等個人信息。

⑶ 服裝展示功能。服裝展示功能提供瀏覽服裝的功能，包括服裝的展示和查詢[5]。

服裝展示：從數據庫中取出服裝圖片并在頁面上進行展示。

服裝查詢：提供方便快捷的服裝查詢功能。通過輸入服裝的種類、品牌等關鍵詞進行分類查詢。

⑷ 試衣間。主要分為構建3D人體模特和選擇服裝。

構建模特：輸入用戶的形體參數，包括性別、身高和三圍。系統根據后臺的匹配算法找出相應的3D模特。

選擇服裝：用戶可點擊需要試穿的服裝，系統會生成試穿成功后的虛擬模特。同時用戶可通過拖曳鼠標對虛擬模特進行旋轉、縮放并觀察試穿效果。

2.2 服務端模塊

管理人員只有通過系統身份驗證進入系統。

⑴ 用戶管理。用戶在進入試衣間時，如果已向系統提供了合法的形體參數，則管理人員會在服務端構建相應的虛擬模特，并且存儲在數據庫，以供用戶調用。

⑵ 虛擬模特構建。在管理端，管理人員根據用戶提交的個人體型參數記錄，通過使用相應服務端軟件構建相應虛擬模特，并及時存入數據庫中。

⑶ 服裝管理。當系統載入新的服裝后，管理人員將服裝的圖片和相關信息填入數據庫中。

2.3 效果圖展示

2.3.1 網頁首頁效果圖

用戶在首頁里可找到網站的基本信息介紹、使用方法以及用戶登錄注冊功能導航等內容（見圖3）。

2.3.2服裝區域展示圖

用戶在此區域可隨意挑選服裝，同時也可根據頁面左側的分類框里分類顯示服裝類型，便于用戶選擇（見圖4）。

2.3.3 3D模式展示圖

用戶在此區域可以任意拖拉模特的位置，縮放其大小并從任意角度觀察穿衣效果（見圖5）。

3 系統的關鍵技術

3.1 基于Blender4web的3D顯示技術

3.1.1 Blender4web技術介紹

Bledner4web是一Triumph公司為實現在瀏覽器上顯示3D圖形、音頻交互等功能開發的一個開源框架。Blender4web密切結合了Blender里的3D建模和動畫工具。它結合了WEBGL和瀏覽器的顯示技術，可以不用插件就能在瀏覽器上顯示3D動畫。從技術上來說，Blender4web是網頁的一個3D庫，也是Blender進行調試優化的組件[6]。

3.1.2 Blender4web 在本系統中的應用

在3D虛擬試衣間中，根據用戶輸入的形體數據匹配得到一個3D的人體模特顯示在試衣區域。用戶通過鼠標的拖拉可以360度觀看試衣效果，同時通過滾輪滑動自由縮放，可操作性強。以下描述3D人體模型及試衣場景的設計。

⑴ 首先使用Poser、Makehuman、Marvelous Desginer等人體模型軟件和成衣制作軟件，制作出人體模型和服裝，然后從這些軟件中導出.dae、.obj、.mhx等格式的文件。值得一提的是，導出的模型只需滿足能導入進Blender的基本要求即可，另外，Blender有豐富的可擴展插件，用戶可選擇自己需要的Import-Export插件添加進Blender。

⑵ 將制作好的人體模型文件導入Blender中。利用Blender對模型進行雕刻、渲染使模型更逼真。在渲染時可通過調節顏色、紋理參數實現。服裝的渲染可直接在Blender里通過雕刻渲染來做，也可從外部導入UV圖。在此基礎上為模型穿上服裝，用戶可以通過鼠標和鍵盤自由地觀察人體模型[7]。

⑶ 將制作好的模型用Blender4web技術導出，直接形成.html文件。Blender里不包括Blender4web的導出模式，我們必須自己添加：先在bledner4web的官網上下載與Blender版本相對應的add-on，然后在Blender里點擊File->User Preferences->Addons->Install From File（bledner4web插件的壓縮包）->導入后打鉤->Save User Settings。之后可以在File->Export里找到.html格式的導出類型。

3.2 基于three.js的3D顯示技術

3.2.1 three.js技術介紹

Three.js是一個開源WebGL庫，WebGL允許JavaScript操作GPU，在瀏覽器端實現真正意義的3D，它封裝了底層的圖形接口，使得程序員能夠用簡單的代碼實現3D場景的渲染。此外，Three.js有很好的靈活性。幾乎不會有WebGL支持而Three.js實現不了的情況，當然，除了WebGL之外，Three.js還提供了基于Canvas、SVG標簽的渲染器[9]。

3.2.2 three.js在本系統中的應用

⑴ 首先使用Poser、Makehuman、Marvelous Desginer等人體模型軟件和成衣制作軟件制作出人體模型和服裝，然后從這些軟件中導出.dae格式的文件。必須得帶有UV貼圖。

⑵ 編寫html文件，導入three.js的JavaScrript的庫。加入three.min.js、ColladaLoader.js、Detector.js、stats.min.js、OrbitControls.js用來構建場景燈光、添加渲染效果等[10]。同時使得用戶可以通過鼠標和鍵盤的操作，在場景自由地旋轉和移動來實現視角的變換。最后將html文件嵌入在主程序中。

3.3 兩種3D顯示技術的比較

Blender4web技術專門是針對于Blender開發的，對于在Blender里的3D模型具有良好的適應性，導出的html文件可以在Web里完美展現。而且操作簡單，無需編寫3D顯示程序。

利用Three.js庫就如同使用Jquery庫來編寫JavaScript一樣，編寫起來很方便。程序員可在程序里對場景、模型、服裝做近一步的修飾。

本文所介紹的系統中使用了這兩種方法，做出的模型試衣效果都能滿足要求，惟一不同的是用three.js需自帶UV貼圖，而Blender4web不需要。

4 結束語

該3D試衣系統實現了3D模特試衣及試衣效果全方位展示等功能，為用戶在進行虛擬試衣時提供有效依據，減少用戶在網上購買服裝時的顧慮。該3D試衣系統具有廣闊的應用前景。對企業來說，改變了傳統行業的銷售模式，降低了成本；對用戶來說，該系統不僅讓用戶體驗服裝試穿的樂趣，還能成為個人形象設計的平臺。該3D試衣系統是服裝網絡銷售的革命性創新，在不久的將來它定會成為一種新型的創意產業。當然，該系統還可以做進一步優化。例如通過減小3D人體模型數據量來進一步加快人體模型的打開速度[11]；將Blender 建模技術內嵌于試衣系統中使系統自動地完善3D人體模型庫等。

參考文獻：

[1] 牛霞.虛擬現實在展示設計中的應用研究[D].西北大學，2014.

[2] 梁佳晨.動態實時虛擬試衣及圖像驅動的三維模型變形[D].廈門大學，2013.

[3] 孫珊珊，黎國進，顧治華.基于虛擬現實的三維網上試衣間的研究[J].湖北工業大學學報，2011.26（4）.

[4] 張闖，徐婷，黃駿霆.淺析三維立體試衣系統在電子商務中的應用[J].商場現代化，2014.24：42-43

[5] 張婷婷，裘建新，朱夢豪等.網上試衣間的構造[J].上海工程技術大學學報，2013.27（4）.

[6] https：//www.blend4web.com/en/about/

[7] 楊漾，姚杭飛，楊琛，許淑華.基于Unity 3D的虛擬家具商城的設計與實現[J].計算機時代，2014.6.

[8] 劉民，萬江平.基于Flash 3D的在線虛擬漫游系統設計與實現[J].計算機時代，2014.5.

[9] 曾云，陳盈盈，張岳.基于人體識別的在線虛擬試衣系統[J].電視技術，2014.11.

[10] JingFeng Ma， JiaJun Bu， Kai Hou et al.. An energy conductionmodel for cell image segmentation[J].Chinese Science Bulletin，2011.56（10）.

[11] 徐康熙，郝泳濤.基于物理引擎PhysX的3D試衣系統的設計與實現[J].電腦知識與技術，2014.10（8）.