基于紋理合成技術的云服飾增強現實系統設計與實現

朱文曦 桂 彥 歐陽甜甜 卜 凡 李 思 晉向黎

（長沙理工大學計算機與通信工程學院,湖南 長沙 410114）

增強現實（Augmented Reality，AR）技術是在虛擬現實（Virtual Reality，VR）技術上發展而來，其通過運動相機或可穿戴顯示裝置的實時連續標定，將三維虛擬物體、場景等穩定一致地投影至用戶視窗[1]，增強用戶對現實世界的感知。目前，增強現實技術具有廣闊的應用場景。

對于傳統的服飾設計，設計師只能通過平面手稿或電子設計稿的形式再現腦海中的設計規劃與理念。這樣的設計方式導致服裝設計的效率較低，且難以保證設計表達的質量。完成的設計在與制造廠進行對接時，往往出現UV錯誤等問題，導致實際產品與設計形象相差甚遠。設計師們希望有一個高效且便攜的應用，能夠將平面設計稿迅速準確地呈現出立體效果，以供設計參考。盡管當前市場上已經有大量成熟的專業圖像編輯軟件如Adobe Photoshop等，或三維建模軟件如3D Studio Max等，但這些軟件的體量龐大且功能繁雜，對計算機性能提出了較高要求的同時，也對用戶的專業技能提出了較高要求。設計師在展示一款產品的時候，往往更多地通過二維圖片的形式進行展現，倘若需要以三維形式展示產品，往往依賴OpenGL[2]技術，比如通過Unity 3D或Unreal Engine 4開發一個桌面應用。若需要將虛擬的產品融于真實場景，還需要依賴Kinect等采集設備[3]。

隨著WebGL技術的引入，Web應用突破了曾經無法支持三維渲染的局限，三維的虛擬物體在線地融合于真實場景具備了充分的可行性，其體驗與交互普遍得到了極大的提升。

由此，本團隊對三維模型渲染技術、增強現實技術加以綜合應用，設計了一款輕量級Web應用，以解決上述的“痛點”。為充分輔助三維模型貼圖并增強現實展示的功能，團隊還設計了一款桌面級應用，它基于紋理合成技術，能夠從現實圖片或存在瑕疵的紋理中截取其中的有效紋理，生成更大尺寸的無縫平面圖像，用于提升模型貼圖的效果。用戶不需要太多的專業知識儲備，就能夠快速上手使用本系統，滿足二維圖像合成與三維模型貼圖的設計需求，實現“輕辦公”。

1 系統設計

1.1 總體設計

本系統主要分為兩大模塊：二維紋理圖像合成、三維服飾模型貼圖。其功能結構如圖1所示。

圖1 系統功能結構圖

1.2 核心功能需求

1.2.1 紋理圖像合成

用戶上傳想要合成的圖片，在圖片中選擇并截取紋理區域后，系統以該區域為紋理樣本，按照其表面的幾何形狀以及調整的參數，合成一張視覺上較為完整的圖片，并且自動保存在指定目錄中。

1.2.2 合成圖像的編輯

圖片保存在指定目錄后，用戶可以對合成圖進行進一步的圖像編輯處理，支持圖像放大縮小、銳化、模糊（包含高斯模糊、平均模糊、中值模糊）、亮度調整、對比度調整等操作。相關操作完畢后，生成的圖片將會覆蓋原有圖片，保存在同一目錄。

1.2.3 用戶登錄與注冊

若用戶想要進行三維模型貼圖，需先進行登錄。若無賬戶，用戶需先進行注冊，完成注冊后，輸入正確的用戶名、密碼及驗證碼方可進入“服飾貼圖”界面，體驗本系統的完整功能。

1.2.4 三維模型貼圖

用戶點擊“上傳貼圖”按鈕并上傳自定義圖片后，系統會對三維人物模型中的服飾進行UV貼圖，并實時呈現于網頁之中。

1.2.5 三維模型控制

系統提供了多種服飾模型，用戶可點擊相應按鈕，對服飾模型進行切換，使用鼠標拖移或者手指移動人物模型，能夠對其進行縮放、旋轉等操作。除此之外，用戶能夠通過手機或平板電腦，進行增強現實預覽，多方位查看人物模型貼圖服飾的效果。由此，用戶能夠對二維紋理圖像有更為直觀、更加立體的感受。

2 二維紋理圖像合成模塊實現

2.1 技術方案

二維紋理圖像合成的技術實現涵蓋了MySQL數據庫、OpenCV跨平臺計算機視覺庫、Qt跨平臺C++應用程序開發框架，技術方案如圖2所示。

圖2 二維紋理圖像合成技術方案圖

2.2 基于MRF模型的紋理合成

基于樣圖的紋理合成技術發展較快，目前已存在大量的相關技術。本文主要基于MRF模型的紋理合成算法[4]來實現現實二維紋理圖像合成模塊。

在圖像特征匹配的初始情況下，設計師可從原輸入圖中取任一紋理單元作為“種子”寫入合成圖中，然后從該“種子”相鄰紋理單元開始，如圖3（b）所示，在樣圖中按掃描線順序從左至右、從上至下移動匹配窗口。移動過程中，系統將匹配窗口中與前一紋理單元相似度最高的紋理單元，寫至合成圖并與前一紋理單元進行拼接。由此迭代，直至合成圖鋪滿，如圖3（c）所示，新的紋理就此合成。

圖3 紋理合成算法效果圖

本系統基于MRF模型的紋理合成，在紋理塊間的匹配方式和拼接方式上進行了拓展、優化。其中，改進了以往的隨機匹配紋理塊的方式，采用卷積比較紋理單元間的相似度，搜索重合區域與原圖相似度最高的區域進行匹配，使得相鄰紋理塊之間的重合區域基本上不會發生隨機錯亂情況。此外，紋理塊之間的拼接方式采用最小誤差路徑算法[5]，盡可能地避免紋理塊邊緣的模糊、錯位等問題發生，保證了合成質量。

2.3 MySQL管理參數列表

Qt與MySQL數據庫進行連接，存儲、獲取算法相關的有效參數。當用戶點擊圖像合成系統的可執行文件時，在聯網的環境下，系統自動連接至遠程MySQL數據庫，查詢紋理合成算法的相關字段名稱及參數數值。

2.4 Qt平臺開發桌面應用

為滿足普通人群的使用要求，本團隊將系統的圖形化界面設計得更為簡潔、美觀，如圖4所示。在保證界面簡潔的同時，給用戶提供了足夠的操作提示信息，幫助他們順利地進行圖像合成。

圖4 二維紋理圖像合成系統界面

引入OpenCV庫后，本團隊基于Qt開源框架[6]實現了圖像合成系統的主要的邏輯操作。由于用戶上傳的圖片可能存在破損、瑕疵，系統設計了截圖功能，讓用戶能夠在圖像合成之前對有效區域進行截取，實現效果如圖5所示。

圖5 用戶裁剪有效區域

3 三維服飾模型貼圖模塊實現

3.1 技術方案

三維服飾模型貼圖模塊采用前后端分離搭建在線網站，后端涵蓋MySQL數據庫、近年來較為熱門的MyBatis-Plus及Spring Boot框架，前端涵蓋Three.js開源框架及WebGL技術，其中三維模型與場景借助Blender軟件平臺實現，技術方案如圖6所示。

圖6 三維服飾模型貼圖模塊技術方案圖

3.2 Blender建模與渲染材質

Blender平臺提供了大量而完整的套件，包含建模、渲染、合成、貼圖等工具[7]。本團隊以人物模型作為父級物體，將相應的服飾、定位框物體作為子級關聯，從而保證了在增強現實場景下不斷移動人物模型的過程中，保持服飾與其相對距離。為保證人物模型渲染的效果，對服飾與材質的UV貼圖映射關系進行充分的設置，并且采用漫射BSDF的著色器進行材質輸出。此外，場景信息將以LZMA壓縮方式導出為glTF格式文件，降低瀏覽器加載模型的開銷。

3.3 MyBatis-Plus處理數據訪問層

網站的登錄注冊模塊中，通過MyBatis-Plus框架技術，對MySQL數據庫中的用戶信息數據進行訪問，大大簡化了傳統的JDBC操作。其中，數據庫存儲的用戶密碼經過MD5散列處理，為用戶數據的安全性提供保障。

3.4 Spring Boot技術處理業務邏輯層

后端控制器處理用戶的注冊、登錄，通過控制層的攔截器，保障服飾貼圖頁面訪問的安全性。用戶若要進入該頁面，必須成功登錄賬號。攔截器會檢查用戶的Session是否攜帶了用戶信息，若用戶信息不為空，則正常獲取服務；若用戶信息為空，則重定向至登錄頁面。

3.5 利用WebGL技術完成三維渲染

前端基于開源HTML5跨屏框架ZUI，針對手機端、桌面電腦兩種尺寸進行響應式網頁設計。本系統采用前后端分離模式[8]，團隊根據Swagger 2接口文檔進行前后端數據交互開發。前端對用戶注冊或登錄的表單數據進行校驗，校驗合法后傳至后端。

此外，前端開源框架Three.js是基于原生WebGL封裝運行的三維引擎。因而通過調用Three.js提供的API[9]，能夠將存儲三維模型的數據文件加載并解析，再通過Canvas在網頁中繪制三維場景[10]，展現于瀏覽器視窗之中。除此之外，Three.js能夠通過瀏覽器調用設備攝像頭的權限采集真實場景，將虛擬的三維模型疊加于真實場景中[11]。三維服飾模型渲染效果如圖7所示。

圖7 三維服飾模型渲染效果圖

4 系統測試

對于二維紋理圖像合成模塊，測試客戶端環境為Windows 10系統。對于三維服飾模型貼圖模塊，測試服務端環境為Windows 10系統，數據庫MySQL 5.7.30，JDK 1.8，而測試客戶端環境為IOS 14.3系統，使用XRViewer瀏覽器訪問系統網站。測試效果如圖8所示。

圖8 測試效果圖

從測試效果來看，系統的核心功能符合項目組的預期目標，圖像紋理合成質量較高，較少情況出現邊緣模糊或錯位的問題。貼圖模型能夠增強紋理圖案的表面細節，具有一定的真實感。在增強現實場景下，虛擬的人物模型定位相對準確，偏移量在合理的范圍之內，為用戶提供了良好的參考。

5 總結

經過上述的研究與實踐，團隊在部署、測試系統的過程中，驗證了基于圖像合成技術的云服飾增強現實系統的可行性。紋理合成算法能夠在輕量級桌面應用上高效的實現。此外，通過WebGL技術及Three.js開源框架所設計的網站系統，輕量且簡潔，交互性良好，同時充分降低用戶使用門檻。該系統能夠使更廣泛的普通人群享受計算機技術、互聯網服務帶來的便利，盡可能地滿足人們在服裝設計領域的普通需求。

顯然，本系統仍然存在提升的空間，團隊將在以后的研究中，著力于優化圖像合成算法、壓縮系統規模、簡化用戶的操作流程、提高部署服務器的性能，使系統能夠邁上更高的臺階，為用戶帶來更優質的體驗。