基于WebGL的緯編提花織物三維仿真

鄭培曉， 蔣高明

(江南大學 針織技術教育部工程研究中心， 江蘇 無錫 214122)

隨著互聯網技術不斷融合、創新與突破，WebGL技術逐漸革新，從而推動應用程序擺脫線下固定機的桎梏實現在任意網絡瀏覽器上運行，將二維網頁升級為動態三維網頁。一個典型的WebGL應用程序由HTML5、JavaScript和GLSL(著色器)代碼組成[1]，可跨平臺運行，不受時間地域限制。與傳統的OpenGL技術相比，WebGL技術具有三維效果直觀性強、圖形交互速度快、模型渲染質量高[2]等優勢。

緯編提花針織物[3-4]作為緯編產品的一大分支，因其花型效應千變萬化，廣受消費者青睞，市場需求不斷增加。為了滿足緯編生產企業中設計開發人員對設計環節高效便捷的需求，緯編提花織物計算機輔助設計[5]平臺的研究和開發成為大勢所趨。顯然CAD技術在提花織物中的發展為數字化設計奠定了基礎，將提花織物的仿真推向了一個新的起點。自20世紀30年代Pierce[6]提出第1個仿真模型以來，織物可視化的仿真研究開始在計算機圖形學和紡織工程領域得到發展。非常多的學者基于該模型做了大量的研究并提出了新的仿真模型和方法，目前仿真方法可分為二維仿真和三維仿真方法。盧致文等[7-8]提出了一種基于紗線紋理的橫編線圈快速仿真方法獲取帶有不同紗線紋理的線圈圖元，并對圖元進行分區，最終根據線圈串套關系對上下線圈的不同區域進行分層貼圖實現織物的真實感仿真，這種仿真方法雖然能正確顯示線圈之間的串套關系從而增加仿真的真實感，但這屬于典型的二維仿真方法，該方法需要對不同的線圈類型和其周圍線圈的串套關系進行分類分層分區，無法達到快速仿真的要求。Kaldor等[9-10]和Yuksel等[10-11]等多年來致力于研究纖維或紗線層次的針織物服裝渲染和三維仿真，可描繪細膩豐富的紗線紋理細節和色彩變化，仿真效果逼真，但是大量的數據處理與計算對硬件配置要求非常高，無法普遍適用。目前對緯編織物的仿真研究還局限于單機版的應用程序，利用互聯網技術實現該類織物的可視化研究較少。

本文通過分析總結緯編提花織物的仿真結構特點，提出了一種基于WebGL的緯編提花織物三維仿真方法，建立了不同線圈類型的型值點幾何數學模型和線圈平移模型，運用矩陣計算可快速確定不同組織位置的型值點坐標，最終利用WebGL技術實現三維結構仿真和服裝虛擬仿真。

1 緯編提花織物的仿真結構特點

表1 不同提花效應中線圈類型的仿真結構參數Tab.1 Simulation structural parameters of loop types in different jacquard effects

2 緯編提花織物的數學模型建立

2.1 線圈幾何模型的建立

緯編針織物的線圈根據織針動作彎曲成圈，由針編弧、沉降弧和圈柱組成。實際織物中，由于線圈是一種非剛性物質，線圈串套容易在線圈接觸部位出現應力集中和空間彎曲等現象，導致紗線直徑產生變化。本文的主要研究目的是實現不同緯編提花效應的織物三維結構仿真與服裝虛擬仿真，為了便于建立線圈幾何模型和減少計算量，本文將紗線做理想化假設，如紗線直徑均勻一致未產生形變、紗線光滑連續無捻度、線圈根據中軸線結構對稱等[13]。參照經典的二維Peirce線圈模型，分別在線圈的3個部段添加控制點(型值點)建立緯編正面線圈8點模型如圖1所示。其中O點為線圈中心點，假設P2、O、P73點均在X軸上。P1～P8控制點距離中心點的橫向距離依次為-w1、-w2、-w3、-w4、w4、w3、w2、w1，縱向距離依次為-h1、h2、h3、h4、h4、h3、h2、-h1，其中h2=0。同理，反面線圈也為8點模型，各點的Z坐標與正面線圈相應點的Z坐標根據面XOY對稱；正反線圈由正面線圈和反面線圈組成，為16點模型，其中反面線圈中各點的X坐標相對正面線圈各點Y坐標向右平移0.5個圈距。

圖1 正面線圈8點模型Fig.1 8 points model of front loop. (a) Front view; (b) Side view

2.2 線圈型值點模型建立

緯編提花織物中包括正面成圈、反面成圈、正反成圈和浮線4種線圈類型。為了讓仿真效果更加符合實際，線圈之間連接更為自然美觀，本文中線圈模型中浮線類型不添加控制點，因此，對其他3種線圈類型分別建立型值點數學模型，型值點二維矩陣L(Loop)為各線圈類型的基本數學模型。不同提花效應的線圈型值點會根據表1仿真結構特點中的參數Tf、Nf、Tb、Nb建立相應的二維矩陣。為了便于運用矩陣乘法計算各線圈型值點經組織平移后的型值點坐標，在矩陣中增加1列均為1的列向量，各線圈類型矩陣定義為p×4矩陣。

式中：n取值為1～3，分別代表正面線圈、反面線圈、正反線圈；m取值為1～9，分別代表不同的提花效應，與表1中一致；Lnm表示n號線圈類型m號提花效應的型值點模型；p為各線圈類型的型值點數量；L(1,1)～L(p,1)、L(1,2)～L(p,2)、L(1,3)～L(p,3)分別為線圈類型p個型值點的X、Y、Z坐標。

2.3 線圈平移模型建立

緯編提花織物仿真時，花型意匠圖根據不同提花效應得到相應的工藝編織圖，將3種線圈放置于編織圖相對應的空間坐標系位置，同一編織行的線圈與線圈之間首尾相連形成具有一定空間彎曲性的虛擬紗線。為了避免相同線圈類型重復計算型值點，確定每種線圈類型的型值點二維矩陣后，需要根據編織位置信息對線圈進行平移。以圖2中線圈類型1的平移對平移原理進行說明，在3×3的組織中，將正面線圈從位置(1,2)處沿著箭頭方向移至(3,3)處，線圈中心移動的橫向距離為2T，縱向距離為N，8個型值點移動的距離與線圈中心一致。

圖2 線圈平移示意圖Fig.2 Diagram of loop translation

由于不同提花效應具有不同的仿真結構特點，如表1所示，因此各線圈類型也需要根據提花效應分別建立線圈平移模型二維矩陣T(Translation)。

式中：i為工藝編織圖的縱行號；c為花型意匠圖橫列號；a為型值點根據不同提花效應仿真結構特點在Y軸方向的偏移量。上述標準線圈是指大小不根據提花效應的仿真結構特點變形的原始線圈，具有初始的線圈參數。

各提花效應的線圈在不同編織行上的Y軸偏移量不同，根據表1中的仿真結構特點對基本線圈模型中的變量a進行說明，表2示出了不同提花效應中線圈類型的a值。反面線圈類型可拆分為正面線圈和反面線圈的組合，其a值與同一提花效應的相應線圈類型的數值對應。

表2 不同提花效應中線圈類型的平移參數a值Tab.2 Translational parameter a of loop types in different jacquard effects

3 緯編提花織物的三維仿真

3.1 緯編提花線圈單元的仿真

基于緯編提花織物線圈型值點模型，利用WebGL技術中JavaScript編寫的三維圖形引擎庫Three.js中封裝的管道幾何體TubeGeometry函數，依次沿著線圈型值點拉伸出1條三維樣條曲線來模擬紗線彎曲路徑。首先，由于管道幾何體TubeGeometry的頂點位置坐標在三維空間笛卡爾坐標系中需要X、Y、Z3個分量，所以頂點坐標使用三維向量Vector3對型值點X、Y、Z坐標進行創建。再使用引擎庫中自帶的SplineCurve3函數將型值點依次相連創建一條平滑的曲線。這個過程形成的曲線直徑只有1個像素點，不能模擬具有一定細度的紗線，之后通過TubeGeometry函數賦予曲線半徑、橫截面分段數、曲線段數等參數信息使曲線更好地模擬線圈形態。圖3為緯編提花線圈單元的三維仿真效果圖。為了區分正面線圈和反面線圈，反面線圈以側視圖顯示，通過圖中各線圈結構單元進行組合即可仿真純色提花織物。

圖3 線圈單元的三維仿真圖Fig.3 3-D simulation of loop units.

3.2 織物三維結構仿真的實現

使用三維圖形引擎庫Three.js中的管道幾何體TubeGeometry函數將同一編織行的線圈型值點依次相連即可得到緯編提花織物三維串套結構。在此基礎上輔以光照、紗線顏色、細度、紋理等信息就可很好地呈現緯編提花織物三維仿真效果。為了更好地根據線圈各型值點在Z軸方向上的變化增強織物的立體感，本文使用1束環境光和3束平行光相結合的光源，能夠良好地呈現陰影程度，織物花型更加清晰。提花織物之所以稱為提花是因為紗線顏色種類多樣，于是使用MeshPhongMaterial函數根據穿紗信息對每一編織行的仿真樣條賦予不同的顏色等材質信息，增強仿真織物的花色效果。

3.3 織物三維虛擬仿真的實現

緯編提花織物因其多樣的花色和圖案受到廣大消費者的青睞，為了更好地呈現緯編提花織物在服裝上的效果，提高消費者購買力，本文截取提花織物三維結構仿真花型循環作為紋理單元映射于服裝模型表面，從而實現緯編提花織物的三維虛擬仿真。通過三維圖形引擎庫Three.js中的THREE.OBJLoader加載外部創建的OBJ服裝模型，該服裝模型包含了紋理坐標、尺寸數據等信息。在進行提花織物三維結構仿真循環截圖前，需要將仿真背景設置為透明，從而保證紋理圖片不受背景顏色的影響、花型清晰。在截圖過程中，最重要的步驟是確定花型循環截圖的起始位置、截取寬度和高度，這是保證花型能夠循環連續、不錯位的首要前提。由于通過WebGL技術實現三維仿真時仿真物體處于空間坐標系中，存在屏幕坐標與空間坐標不一致的情況，無法精準對位截圖。因此在確定花型循環截圖的參數時，需要通過坐標轉換方法將空間坐標轉換為屏幕坐標。由于三維仿真截圖時截取的是二維平面圖，只需根據X、Y坐標確定截圖位置，因此不考慮Z軸方向的坐標轉換。

首先使用方法worldVector.project根據三維圖形交互時正交相機所在的空間位置將空間坐標轉換為標準設備坐標，該過程與相機設置的高度、角度等有關，再經由如圖4所示的坐標對應關系將標準設備坐標轉換為屏幕坐標，標準設備坐標系以空間中心為原點，4個頂點的坐標分別為(-1,1)、(1,1)、(-1,-1)、(1,-1)，而屏幕坐標系以左上角的頂點為原點，4個頂點的坐標分別為(0,0)、(W,0)、(0,H)、(W,H)，其中：W和H分別表示屏幕寬度和屏幕高度。已知標準設備坐標中的坐標(xE,yE)，可通過下列公式計算得到屏幕坐標(xs,ys)。

xs=xEW+W;ys=-yEH+H

圖4 坐標轉換示意圖Fig.4 Diagram of coordinate transformation.

確定截圖位置后將截取圖片繪制于Canvas中， 此時Canvas的作用相當于一個容器，用于存儲紋理圖。之后將Canvas中的內容作為紋理材質循環映射至服裝模型表面，輔以光照、場景等實現緯編提花織物三維虛擬仿真展示。與二維虛擬仿真不同，本文中的仿真模型可360°旋轉，紋理圖是根據服裝輪廓映射于服裝表面，花型圖案會因服裝褶皺、裙擺等產生形變，結合光照等外部因素，可進一步提升虛擬仿真的立體感和真實感，仿真效果更加接近實物。

4 仿真結果與討論

緯編提花織物不同的提花類型具有不同的花型效果，這種效果不僅體現在織物反面，也會在織物正面顯露。本文利用上述圖形可視化仿真方法，在Windows 10系統、Intel Core i7-8750H CPU和8 GB RAM中，使用Visual C#和 JavaScript語言編寫了緯編提花織物三維仿真Web應用程序，對于小花型的仿真計算時間可忽略不計，100像素×100像素的花型型值點計算時間也只需要0.674 s。仿真效果直觀清晰。圖5中展示了Web應用程序設計仿真的5種不同提花類型的三維結構仿真效果圖，包括浮線提花、空氣層提花、橫條提花、豎條提花和芝麻點提花，通過三維仿真圖可清楚地觀察到線圈串套關系、結構特點、花型效應等。圖中二色提花的花型大小為8像素×8 像素，三色提花的花型大小為10像素×10 像素，其中每個分圖的左側為仿真圖正面，右側為仿真圖反面。

浮線提花中每一種色紗在每一橫列中都要參與編織成圈，因此d(表示色紗數)個編織行形成1個橫列，且每個線圈背后都有其他色紗形成的浮線，從圖5(a)的反面可看出浮線提花存在浮線過長的情況，在實際生產過程中需要通過間隔編織集圈來縮短浮線。空氣層提花(圖5(b))具有正反面花型效應互補的特點，雙面都具有清晰的花型，正反面的連接發生在花型交界處，因此該類提花織物花型區域呈中空狀態，可墊入襯緯紗增加花型的立體感和柔軟感。橫條提花的主要編織特點為正面根據花型選針編織，d個編織行形成1個正面橫列，反面每一根色紗在每根針上都編織成圈，d個編織行形成d個反面橫列，從而導致織物正反面縱密不一致。橫條提花如圖5(c)、(d)所示，反面呈橫條紋，正反面線圈大小有明顯差異，縱密比為1∶d，且正面花型可明顯觀察到反面線圈的沉降弧，影響花型清晰度。豎條提花的花型效應如圖5(e)、(f)所示，反面根據色紗顏色呈豎條排列，織物結構均勻，但是當正面橫密較稀疏時，豎條效應容易顯露在織物正面，影響正面花型效果。芝麻點提花是雙面提花中較為常用的提花類型，避免了上述提花類型存在的問題，如圖5(g)、(h)所示，反面不同顏色的線圈成跳棋式分布，正面花型效應清晰，織物結構相對均勻。本文提出的基于WebGL的仿真方法通過矩陣模型轉換與計算可快速實現緯編提花織物的三維結構仿真，建立的三維線圈模型逼真，不同提花類型織物的線圈串套結構合理，組織結構和特點易于辨別和理解。與二維仿真相比，三維仿真的織物立體感和真實感更強，花型效應清晰。

緯編提花織物應用最廣的領域為服裝，三維結構仿真的真實感和立體感無疑進一步增加了服裝展示的真實感和美感。圖6示出了緯編二色千鳥格花型和三色折線花型在不同服裝模型上的展示效果。通過紋理映射的方法將圖中花型三維結構仿真圖映射于服裝模型表面，從右側的三色花型圖虛擬仿真圖中可觀察到胸部紋理間距比腰部紋理間距大，可見紋理圖可根據服裝自身的褶皺產生形變，結合光照后使服裝立體感增強，并且可多方位多角度展示三維服裝仿真效果，充分體現服裝的美感，視覺體驗更加真實。

好的花型設計對服裝往往有錦上添花的效果，通過提花織物的三維虛擬仿真不僅可體現服裝在人體上的穿著效果，設計人員還可借助虛擬仿真工具瀏覽設計花型的三維空間展示效果，反向輔助設計開發人員對花型圖案進行創新設計、服裝色彩搭配等，從而省略服裝成衣的打樣環節、縮短開發周期，節約企業成本。

圖5 各提花類型三維仿真效果圖Fig.5 3-D simulation renderings of different jacquard types.(a) Two-color floating jacquard; (b) Two-color air-layer jacquard; (c) Two-color horizontal-stripe jacquard; (d) Three-color horizontal-stripe jacquard; (e) Two-color vertical-stripe jacquard; (f) Three-color vertical-stripe jacquard; (g) Two-color bird eye jacquard; (h) Three-color bird eye jacquard

圖6 提花織物三維虛擬仿真效果圖Fig.6 3-D virtual simulation rendering of jacquard fabrics

5 結 論

本文根據緯編提花織物的結構特點分析總結了各類提花類型中不同線圈類型的仿真結構規律，構建線圈幾何數學模型和線圈平移模型，運用矩陣算法計算織物組織內所有線圈型值點的空間坐標。基于WebGL技術，利用三維圖形引擎庫Three.js和紋理映射方法實現了織物三維結構仿真和服裝三維虛擬仿真。本文所提出的方法能夠實現不同反面提花效應的緯編提花織物的可視化仿真，構建的線圈幾何模型和線圈平移模型可適用于多種緯編織物仿真，在本方法的基礎上賦予虛擬樣條微觀真實感，可進一步提升面料真實感，減小反復打樣對可持續發展的桎梏，為后續結構和服裝仿真研究提供理論參考。