基于WebGL的面輔料三維虛擬展示系統(tǒng)設(shè)計

馬曉彤,祝雙武,陳夢琦

(西安工程大學(xué) 紡織科學(xué)與工程學(xué)院,陜西 西安 710048)

隨著經(jīng)濟(jì)全球化和互聯(lián)網(wǎng)的高速發(fā)展,紡織行業(yè)的生產(chǎn)銷售形式發(fā)生了巨大的變化,各類企業(yè)嘗試通過虛擬化、數(shù)字化產(chǎn)品打通產(chǎn)業(yè)鏈,降低各自的經(jīng)營成本,提升抗風(fēng)險能力以應(yīng)對劇烈的市場競爭[1]。如何減少生產(chǎn)成本、增加用戶數(shù)量及黏性,從而提升紡織企業(yè)的競爭力,無疑是現(xiàn)在的一個熱點問題。

針對紡織面料而言,線下展示和選購可以觸摸到面料的真實質(zhì)感,但如果要查看最終效果必須要制作服裝樣品,制樣時間長、原料浪費等問題會增加企業(yè)生產(chǎn)成本。除面料外,輔料也是擴(kuò)展服裝功能、發(fā)揮裝飾點綴作用的關(guān)鍵元素,設(shè)計師對紡織服裝輔料的合理搭配可以起到畫龍點睛的效果。隨著紡織CAD、電子商務(wù)、虛擬時裝等領(lǐng)域的崛起,為了讓相關(guān)人員更方便、快捷、直觀地看到面料的顏色、樣式及質(zhì)感,構(gòu)建基于三維模型的面輔料虛擬展示系統(tǒng)十分必要,它可以輔助傳統(tǒng)的展示及服裝設(shè)計過程。國內(nèi)面料和服裝的個性定制及展示技術(shù)也已經(jīng)獲得了一些成果,華柄宇等[2]基于平面服裝款式圖進(jìn)行了多身位的面料映射,使用圖像二值化等方法對模擬出來的面料效果圖進(jìn)行了展示,但不能與用戶實時交互;宋瑩[3]基于旗袍的款式特征和要素進(jìn)行了旗袍個性定制和展示系統(tǒng)的研發(fā);林俊聰?shù)萚4]利用三維人體重建,進(jìn)行了基于服裝自適應(yīng)變形的個性化虛擬展示,但這些都側(cè)重于服裝款式的設(shè)計和調(diào)整。目前對于服裝面輔料及其搭配效果的三維虛擬展示系統(tǒng)鮮有介紹和應(yīng)用。

開發(fā)出基于Web GL的多功能面輔料虛擬展示系統(tǒng),采用Unity3D引擎進(jìn)行場景渲染并通過對著色器(Shader)的調(diào)整保留面料紋理的鮮明色彩與清晰度。系統(tǒng)中包含T恤、衛(wèi)衣、沖鋒衣等多個運動裝模型,用戶可自定義模型整體或側(cè)邊帶等局部位置的面輔料花紋及顏色,結(jié)合虛擬現(xiàn)實、三維展示及交互技術(shù)來全方位觀察面料的色彩、樣式及上身效果,具有廣闊的市場前景。同時系統(tǒng)還具有場景光源調(diào)整、背景切換、上下衣搭配等輔助功能,進(jìn)一步增強了虛擬展示系統(tǒng)的真實感。

1 系統(tǒng)設(shè)計流程

三維虛擬展示系統(tǒng)的核心要素即交互設(shè)計和虛擬展示技術(shù),從建立三維模型、準(zhǔn)備紋理貼圖、渲染三維場景、設(shè)計和完善交互界面等方面依次進(jìn)行面輔料三維展示系統(tǒng)的開發(fā)。系統(tǒng)開發(fā)流程如圖1所示。

圖1 系統(tǒng)開發(fā)流程

1.1 三維模型建立

圖2 T恤三維模型的建立

由于客戶對產(chǎn)品具有個性化展示的需求,在三維建模時,需要劃分模型區(qū)域,考慮每個區(qū)域圖案銜接處三維模型貼圖的參數(shù)設(shè)置[5],方便面輔料在模型的不同區(qū)域進(jìn)行展示。因此模型的建立是分塊逐步搭建的,依次建立前后衣片、袖子、袖口、雙肋、腰帶、后領(lǐng)帶等,初步建立好模型之后打磨衣物模型的細(xì)節(jié)和紋理,使模型渲染后的效果更加逼真[6]。按照這種方法分別建立了T恤、衛(wèi)衣、沖鋒衣、長褲、短褲5個運動裝模型。

1.2 紋理貼圖準(zhǔn)備

要將面輔料在三維模型的不同部位進(jìn)行展示,關(guān)鍵是要為模型創(chuàng)建UV貼圖以便在3D模型上包裹二維面輔料紋理。如圖3所示,UV[7]即二維空間的水平、垂直坐標(biāo)軸,它可以將圖片上的點精確對應(yīng)到三維模型的表面,確定模型各部位紋理貼圖的大小,防止拉伸變形,使其更好地貼合到衣物模型的局部位置上。

圖3 T恤模型各部位UV展開圖

在進(jìn)行面輔料的三維展示之前,設(shè)計人員使用織物仿真CAD系統(tǒng)進(jìn)行面輔料的設(shè)計與仿真,或直接進(jìn)行面輔料的掃描獲得效果圖,然后將設(shè)計好的原始面料效果圖導(dǎo)入系統(tǒng)數(shù)據(jù)庫中。原始面料效果圖所應(yīng)用的模型部位不同,其大小沒有固定的數(shù)值,對比發(fā)現(xiàn)原始面料效果圖與模型的UV貼圖通常大小不一致,所以在使用面料圖之前要先根據(jù)模型各部位大小對其進(jìn)行拼接、裁剪、鏡像等操作,以確保與模型的UV貼圖大小一致,將調(diào)整好的面料圖保存到特定文件夾里以備后續(xù)調(diào)用。

1.3 三維場景渲染

完成模型的建立后,將所有衣物模型轉(zhuǎn)換為FBX格式導(dǎo)入到Unity3D引擎中,進(jìn)行模型的加載和三維場景的渲染。Unity3D是包含三維游戲、建筑可視化、實時三維動畫等類型內(nèi)容的多平臺專業(yè)游戲引擎,可一鍵完成系統(tǒng)的多平臺開發(fā)和部署。因此在眾多圖形引擎中[8]選用Unity3D進(jìn)行系統(tǒng)開發(fā)。

場景Scene主要用于加載天空盒、光源、材質(zhì)等基本條件并保存、跟蹤所要渲染的模型。攝像機(jī)決定了場景的視野范圍,可根據(jù)模型調(diào)整相機(jī)的位置、數(shù)量和視口的大小,方便用戶選取更合適的角度來觀察整個三維世界。同時光源也是非常重要的[9],系統(tǒng)中選用了平行光及環(huán)境光,環(huán)境光是維持場景基礎(chǔ)亮度的元素,平行光則可以照亮場景中的所有對象并且光線強度不會受距離的影響而發(fā)生改變,通常用于模仿陽光等遠(yuǎn)距離光源。

創(chuàng)建好場景之后導(dǎo)入外部模型及材質(zhì),將其添加到場景中,可自由定義模型的位置、角度以及與相機(jī)的距離等,到此時已經(jīng)滿足了面料展示的基本條件。

1.4 WebGL發(fā)布及交互

WebGL技術(shù)是將JavaScript和OpenGL ES結(jié)合在一起的3D繪圖標(biāo)準(zhǔn),可以在所有兼容WebGL的瀏覽器中流暢地展示三維場景和模型。目前簡化開發(fā)出了很多優(yōu)秀的Web GL框架,它們封裝了底層的圖形接口,例如Three.js[10]、Babylon.js、PlayCanvas等。系統(tǒng)選擇在Unity中構(gòu)建WebGL項目,它支持大部分桌面主流瀏覽器以及部分移動設(shè)備瀏覽器。

經(jīng)過上述分析，發(fā)現(xiàn)IEC 61375標(biāo)準(zhǔn)中存在矛盾之處，如果T_LI小于T_ST(如果RPT與源設(shè)備距離較近，可忽略線路延時)，將導(dǎo)致RPT在某些特定工況下無法正常轉(zhuǎn)發(fā)數(shù)據(jù)幀，而T_LI由t_source決定。通過簡單計算可得知，t_source應(yīng)大于4 μs，那么其取值范圍將變?yōu)? μs

將Unity WebGL項目發(fā)布到網(wǎng)頁中使得三維模型動畫成為其中一部分,使用Unity內(nèi)部定義的函數(shù)與JavaScript方法交互即可實現(xiàn)命令和信息的實時傳遞。首先在網(wǎng)頁代碼的頭部使用＜script＞標(biāo)簽來初始化Unity WebGL程序,使用gameInstance.Send Message()方法可以實現(xiàn)JavaScript向Unity中的物體發(fā)送命令。而實現(xiàn)Unity調(diào)用JavaScript中的方法則需要建立Plugins文件夾,將所有的JavaScript函數(shù)以jslib文件類型存放進(jìn)去,使用Library Manager.library類庫對其進(jìn)行調(diào)用。這樣保證Web GL程序可以嵌入到任何網(wǎng)頁上而不會與頁面本身的代碼發(fā)生沖突。

1.5 面料紋理映射

將WebGL程序發(fā)布到網(wǎng)頁中后,即可進(jìn)行交互界面功能的調(diào)用。關(guān)于面料的紋理映射問題,Unity中的Unity Web Request對象提供了一個模塊化系統(tǒng),用于構(gòu)建HTTP請求和處理HTTP響應(yīng),它的主要目的是讓Unity游戲與Web瀏覽器后端進(jìn)行交互,所以使用Unity Web Request對象將修改好的面料圖加載到場景中,作為一個texture2D對象。

接下來獲取要進(jìn)行紋理映射的模型子物體,將texture2D對象賦值給其Mesh Renderer組件的material屬性,其背后含義是在場景中創(chuàng)建了一個新的材質(zhì)球,并修改其Albedo貼圖為該面料圖。同時修改material屬性的渲染模式Render Mode為Cutout,確保只顯示面料圖的紋理部分,忽略其透明部分,使得面輔料與模型整體或局部位置更加貼合,色彩更加鮮明。這樣就完成了紋理映射的基礎(chǔ)過程,效果如圖4所示。

圖4 面輔料紋理映射

2 系統(tǒng)功能實現(xiàn)

使用Unity3D、Eclipse、SQL Server作為面輔料三維展示系統(tǒng)的開發(fā)工具,分為主要功能及輔助功能兩大模塊對系統(tǒng)進(jìn)行設(shè)計和實現(xiàn)。系統(tǒng)的功能結(jié)構(gòu)如圖5所示。

圖5 系統(tǒng)功能結(jié)構(gòu)

2.1 系統(tǒng)界面設(shè)計

面料三維展示系統(tǒng)的交互界面設(shè)計是十分重要的,它是用戶與系統(tǒng)交換信息、傳達(dá)指令的媒介,實現(xiàn)了系統(tǒng)內(nèi)部信息與用戶之間的語言轉(zhuǎn)換[11]。管理員或普通用戶登錄賬號后即可進(jìn)入面輔料三維展示系統(tǒng)初始主界面,如圖6所示。

圖6 系統(tǒng)初始主界面

2.2 三維展示系統(tǒng)的主要功能

系統(tǒng)的初始主界面中包含側(cè)邊菜單欄及位于攝像機(jī)視口正中央的T恤模型。運動風(fēng)格的表達(dá)趨于多樣性,無法具體定義,因此系統(tǒng)向用戶提供了基本款的T恤、連帽衛(wèi)衣、沖鋒衣、運動長褲、短褲模型。在側(cè)邊菜單欄中點擊“工具欄”按鈕后頁面上方會出現(xiàn)下拉工具欄,用戶可根據(jù)需要隨意切換衣物模型。

當(dāng)用戶點擊側(cè)邊菜單欄中的“設(shè)計”按鈕時,界面中會出現(xiàn)帶有“袖口”“袖帶”“肋帶”“后頸帶”等局部位置字樣的側(cè)邊工具欄,如圖6所示?？紤]到服裝的功能性以及整體設(shè)計效果,系統(tǒng)對不同模型的面輔料展示區(qū)域進(jìn)行了區(qū)分。系統(tǒng)在數(shù)據(jù)庫中對面料紋理和輔料紋理分別進(jìn)行了存儲,用戶選擇模型后點擊“衣服面料”按鈕彈出面料列表,在列表中選擇圖片即可進(jìn)行模型整體區(qū)域的面料紋理映射。除衣服整體面料展示外,還包括以下輔料的展示。

(1)袖帶、袖口、肋帶、后頸帶、腰帶、腳踝帶等局部位置織帶。點擊“帶子圖樣”按鈕后界面右側(cè)會彈出織帶列表,為了方便用戶快速查找所需要的織帶,系統(tǒng)中設(shè)置了產(chǎn)品類別、產(chǎn)品條寬、產(chǎn)品材質(zhì)、料品編碼、錄入年份等查詢條件。因為織帶種類和功能的不同,在設(shè)計數(shù)據(jù)庫時為其設(shè)置了多個字段以作區(qū)分,用戶可根據(jù)所選模型部位以及所需織帶類型進(jìn)行針對性的搜索,以獲得最佳展示效果,如圖7所示。

圖7 T恤面料及側(cè)邊帶展示

(2)衛(wèi)衣帽繩、腰部抽繩、帽繩束頭。抽繩除了具有實用性之外還可以為衣服增添裝飾性和設(shè)計感。系統(tǒng)中設(shè)置了9種不同尺寸的抽繩束頭,針對每種尺寸用戶可選擇金屬、塑料、鍍金、磨砂等不同材質(zhì)與帽繩進(jìn)行搭配。Unity提供的標(biāo)準(zhǔn)著色器(Standard Shader)可以非常出色地處理金屬、塑料、玻璃等材質(zhì),本系統(tǒng)在著色器中為抽繩束頭添加了顏色貼圖、金屬度貼圖、粗糙度貼圖及法線貼圖。同時使用了HDR全景圖作為場景的天空盒,與一般圖片不同的是,它具有較高的分辨率并且每個像素中保存有該點的亮度信息,可以渲染出更接近現(xiàn)實環(huán)境亮度的場景,與上述貼圖相結(jié)合以呈現(xiàn)更真實的抽繩頭材質(zhì)效果,如圖8所示。

圖8 帽繩束頭的虛擬展示效果

(3)魔術(shù)貼、袖標(biāo)、拉鏈等。魔術(shù)貼、拉鏈等輔料產(chǎn)品在服裝行業(yè)的應(yīng)用范圍非常廣泛,對于服裝的完整性、功能性、均衡性而言具有重要意義。系統(tǒng)在沖鋒衣模型的袖口處設(shè)置了魔術(shù)貼,開襟處設(shè)置了拉鏈。用戶可根據(jù)沖鋒衣整體面料風(fēng)格及效果,在數(shù)據(jù)庫中選擇合適的魔術(shù)貼樣式貼合到模型上并隨意改變拉鏈顏色。

(4)商標(biāo)。鑒于Logo對品牌而言意義重大,本系統(tǒng)在數(shù)據(jù)庫中設(shè)置了“用戶名稱”字段,對用戶來源進(jìn)行了區(qū)分,賦予不同使用者商標(biāo)的使用權(quán)限。系統(tǒng)在T恤模型上設(shè)置了多處常用的Logo位置以作備選,同時對于每個品牌,商標(biāo)列表中包含大中小等不同尺寸的Logo圖片供用戶設(shè)計和切換,效果如圖9所示。

圖9 商標(biāo)的虛擬展示效果

當(dāng)用戶想要查看某部位輔料展示效果時,點擊側(cè)邊菜單欄中“袖口”“袖帶”等不同按鈕即可將攝像機(jī)拉近到當(dāng)前模型的對應(yīng)位置,并在織帶列表中選擇合適的紋理貼圖,點擊對應(yīng)圖片進(jìn)行輔料的更換。用戶可使用鼠標(biāo)控制模型的移動、旋轉(zhuǎn)和縮放,從不同角度和距離查看面輔料的展示效果。系統(tǒng)中設(shè)置有分欄功能,在頁面中克隆出原始視角的三維模型,如圖10所示,設(shè)計人員可以分別在兩個視口上對同一模型進(jìn)行面輔料切換,以實現(xiàn)不同效果的對比觀察。除多視口觀察之外,系統(tǒng)中還設(shè)置了模型搭配預(yù)覽功能,可以實現(xiàn)不同上裝模型與長褲、短褲模型的搭配,幫助設(shè)計人員進(jìn)行成套運動裝的面料搭配選擇和上身效果的查看。

圖10 分欄視圖展示

2.3 三維展示系統(tǒng)的輔助功能

為了輔助面料在三維模型上的展示,系統(tǒng)中增加了背景圖選項以改變頁面背景,在數(shù)據(jù)庫中存放了多張不同色調(diào)和光線強度的場景圖供用戶自由挑選,效果如圖11所示;同時點擊下拉工具欄中的“光源”按鈕即可進(jìn)行場景光源設(shè)置,可根據(jù)需要手動調(diào)整環(huán)境光、平行光等不同方向的燈光亮度及光源顏色,配合頁面場景來增強面料虛擬展示的真實感;為了搭配面輔料樣式及場景色調(diào),系統(tǒng)中還設(shè)置了調(diào)色盤功能,顏色值在Javascript和Unity之間經(jīng)過了RGBA和16進(jìn)制的轉(zhuǎn)換,方便用戶為衣物模型的整體或局部位置挑選合適的面輔料顏色。進(jìn)行面輔料的展示或?qū)Ρ葧r還可以點擊開啟模型的360°自動旋轉(zhuǎn)功能,方便設(shè)計人員全方位查看面料的展示效果。除此之外,管理員賬戶可以管理普通用戶的賬號信息,并且賦予用戶使用不同商標(biāo)的權(quán)限,有助于三維展示系統(tǒng)的規(guī)范管理。

圖11 模型搭配、背景圖切換及燈光亮度調(diào)整

3 系統(tǒng)內(nèi)存利用率測試

在網(wǎng)頁中進(jìn)行三維展示會占用較多的瀏覽器內(nèi)存,內(nèi)存利用率過高會使得網(wǎng)頁卡頓,在移動端甚至?xí)霈F(xiàn)崩潰等問題導(dǎo)致系統(tǒng)無法正常使用。因此在三維模型面數(shù)、紋理圖片分辨率、三維場景資源、數(shù)據(jù)庫信息、系統(tǒng)功能及操作步驟等完全相同的條件下,分別使用Three.js和Unity Web GL進(jìn)行了面輔料三維展示系統(tǒng)的構(gòu)建,在PC端和移動端進(jìn)行了測試。

分別測試了在系統(tǒng)中按同樣順序連續(xù)切換5次模型、在相同模型的相同部位連續(xù)切換10款面料圖兩種情況下,不同三維展示構(gòu)建方式的瀏覽器內(nèi)存占用量。由表1可見,使用Unity WebGL方式建立三維展示系統(tǒng),瀏覽器運行時內(nèi)存占用量大大降低,且始終維持在較為穩(wěn)定的水平,在移動端優(yōu)勢更為明顯,避免了頁面刷新、崩潰等問題的出現(xiàn)。

表1 兩種構(gòu)建方式內(nèi)存占用量對比 單位:MB

4 結(jié)束語

介紹了基于WebGL的面輔料三維展示系統(tǒng),依托瀏覽器實現(xiàn)了面輔料在不同運動裝模型上的虛擬展示,此外系統(tǒng)中還設(shè)置了多種輔助功能來進(jìn)一步增強立體展示的真實效果。該系統(tǒng)分別使用了3DMax和Unity3D進(jìn)行三維衣物模型的構(gòu)建和場景渲染,適用于PC端所有支持WebGL技術(shù)的主流瀏覽器及部分移動端瀏覽器,用戶可以方便快速地在網(wǎng)頁中進(jìn)行場景、模型的加載以及紋理的切換,保留面料的鮮明色彩與清晰度,并且不會出現(xiàn)卡頓、顏色失真等問題。該系統(tǒng)已經(jīng)應(yīng)用到部分企業(yè),取得了良好的使用效果和反饋。