基于WebGL的面輔料三維虛擬展示系統設計

馬曉彤,祝雙武,陳夢琦

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

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

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

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

1 系統設計流程

三維虛擬展示系統的核心要素即交互設計和虛擬展示技術,從建立三維模型、準備紋理貼圖、渲染三維場景、設計和完善交互界面等方面依次進行面輔料三維展示系統的開發。系統開發流程如圖1所示。

圖1 系統開發流程

1.1 三維模型建立

圖2 T恤三維模型的建立

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

1.2 紋理貼圖準備

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

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

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

1.3 三維場景渲染

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

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

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

1.4 WebGL發布及交互

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

經過上述分析，發現IEC 61375標準中存在矛盾之處，如果T_LI小于T_ST(如果RPT與源設備距離較近，可忽略線路延時)，將導致RPT在某些特定工況下無法正常轉發數據幀，而T_LI由t_source決定。通過簡單計算可得知，t_source應大于4 μs，那么其取值范圍將變為4 μs

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

1.5 面料紋理映射

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

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

圖4 面輔料紋理映射

2 系統功能實現

使用Unity3D、Eclipse、SQL Server作為面輔料三維展示系統的開發工具,分為主要功能及輔助功能兩大模塊對系統進行設計和實現。系統的功能結構如圖5所示。

圖5 系統功能結構

2.1 系統界面設計

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

圖6 系統初始主界面

2.2 三維展示系統的主要功能

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

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

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

圖7 T恤面料及側邊帶展示

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

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

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

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

圖9 商標的虛擬展示效果

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

圖10 分欄視圖展示

2.3 三維展示系統的輔助功能

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

圖11 模型搭配、背景圖切換及燈光亮度調整

3 系統內存利用率測試

在網頁中進行三維展示會占用較多的瀏覽器內存,內存利用率過高會使得網頁卡頓,在移動端甚至會出現崩潰等問題導致系統無法正常使用。因此在三維模型面數、紋理圖片分辨率、三維場景資源、數據庫信息、系統功能及操作步驟等完全相同的條件下,分別使用Three.js和Unity Web GL進行了面輔料三維展示系統的構建,在PC端和移動端進行了測試。

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

表1 兩種構建方式內存占用量對比 單位:MB

4 結束語

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