朱文曦 桂 彥 歐陽(yáng)甜甜 卜 凡 李 思 晉向黎

（長(zhǎng)沙理工大學(xué)計(jì)算機(jī)與通信工程學(xué)院,湖南 長(zhǎng)沙 410114）

增強(qiáng)現(xiàn)實(shí)（Augmented Reality，AR）技術(shù)是在虛擬現(xiàn)實(shí)（Virtual Reality，VR）技術(shù)上發(fā)展而來(lái)，其通過(guò)運(yùn)動(dòng)相機(jī)或可穿戴顯示裝置的實(shí)時(shí)連續(xù)標(biāo)定，將三維虛擬物體、場(chǎng)景等穩(wěn)定一致地投影至用戶視窗[1]，增強(qiáng)用戶對(duì)現(xiàn)實(shí)世界的感知。目前，增強(qiáng)現(xiàn)實(shí)技術(shù)具有廣闊的應(yīng)用場(chǎng)景。

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

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

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

1 系統(tǒng)設(shè)計(jì)

1.1 總體設(shè)計(jì)

本系統(tǒng)主要分為兩大模塊：二維紋理圖像合成、三維服飾模型貼圖。其功能結(jié)構(gòu)如圖1所示。

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

1.2 核心功能需求

1.2.1 紋理圖像合成

用戶上傳想要合成的圖片，在圖片中選擇并截取紋理區(qū)域后，系統(tǒng)以該區(qū)域?yàn)榧y理樣本，按照其表面的幾何形狀以及調(diào)整的參數(shù)，合成一張視覺上較為完整的圖片，并且自動(dòng)保存在指定目錄中。

1.2.2 合成圖像的編輯

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

1.2.3 用戶登錄與注冊(cè)

若用戶想要進(jìn)行三維模型貼圖，需先進(jìn)行登錄。若無(wú)賬戶，用戶需先進(jìn)行注冊(cè)，完成注冊(cè)后，輸入正確的用戶名、密碼及驗(yàn)證碼方可進(jìn)入“服飾貼圖”界面，體驗(yàn)本系統(tǒng)的完整功能。

1.2.4 三維模型貼圖

用戶點(diǎn)擊“上傳貼圖”按鈕并上傳自定義圖片后，系統(tǒng)會(huì)對(duì)三維人物模型中的服飾進(jìn)行UV貼圖，并實(shí)時(shí)呈現(xiàn)于網(wǎng)頁(yè)之中。

1.2.5 三維模型控制

系統(tǒng)提供了多種服飾模型，用戶可點(diǎn)擊相應(yīng)按鈕，對(duì)服飾模型進(jìn)行切換，使用鼠標(biāo)拖移或者手指移動(dòng)人物模型，能夠?qū)ζ溥M(jìn)行縮放、旋轉(zhuǎn)等操作。除此之外，用戶能夠通過(guò)手機(jī)或平板電腦，進(jìn)行增強(qiáng)現(xiàn)實(shí)預(yù)覽，多方位查看人物模型貼圖服飾的效果。由此，用戶能夠?qū)ΧS紋理圖像有更為直觀、更加立體的感受。

2 二維紋理圖像合成模塊實(shí)現(xiàn)

2.1 技術(shù)方案

二維紋理圖像合成的技術(shù)實(shí)現(xiàn)涵蓋了MySQL數(shù)據(jù)庫(kù)、OpenCV跨平臺(tái)計(jì)算機(jī)視覺庫(kù)、Qt跨平臺(tái)C++應(yīng)用程序開發(fā)框架，技術(shù)方案如圖2所示。

圖2 二維紋理圖像合成技術(shù)方案圖

2.2 基于MRF模型的紋理合成

基于樣圖的紋理合成技術(shù)發(fā)展較快，目前已存在大量的相關(guān)技術(shù)。本文主要基于MRF模型的紋理合成算法[4]來(lái)實(shí)現(xiàn)現(xiàn)實(shí)二維紋理圖像合成模塊。

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

圖3 紋理合成算法效果圖

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

2.3 MySQL管理參數(shù)列表

Qt與MySQL數(shù)據(jù)庫(kù)進(jìn)行連接，存儲(chǔ)、獲取算法相關(guān)的有效參數(shù)。當(dāng)用戶點(diǎn)擊圖像合成系統(tǒng)的可執(zhí)行文件時(shí)，在聯(lián)網(wǎng)的環(huán)境下，系統(tǒng)自動(dòng)連接至遠(yuǎn)程MySQL數(shù)據(jù)庫(kù)，查詢紋理合成算法的相關(guān)字段名稱及參數(shù)數(shù)值。

2.4 Qt平臺(tái)開發(fā)桌面應(yīng)用

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

圖4 二維紋理圖像合成系統(tǒng)界面

引入OpenCV庫(kù)后，本團(tuán)隊(duì)基于Qt開源框架[6]實(shí)現(xiàn)了圖像合成系統(tǒng)的主要的邏輯操作。由于用戶上傳的圖片可能存在破損、瑕疵，系統(tǒng)設(shè)計(jì)了截圖功能，讓用戶能夠在圖像合成之前對(duì)有效區(qū)域進(jìn)行截取，實(shí)現(xiàn)效果如圖5所示。

圖5 用戶裁剪有效區(qū)域

3 三維服飾模型貼圖模塊實(shí)現(xiàn)

3.1 技術(shù)方案

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

圖6 三維服飾模型貼圖模塊技術(shù)方案圖

3.2 Blender建模與渲染材質(zhì)

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

3.3 MyBatis-Plus處理數(shù)據(jù)訪問(wèn)層

網(wǎng)站的登錄注冊(cè)模塊中，通過(guò)MyBatis-Plus框架技術(shù)，對(duì)MySQL數(shù)據(jù)庫(kù)中的用戶信息數(shù)據(jù)進(jìn)行訪問(wèn)，大大簡(jiǎn)化了傳統(tǒng)的JDBC操作。其中，數(shù)據(jù)庫(kù)存儲(chǔ)的用戶密碼經(jīng)過(guò)MD5散列處理，為用戶數(shù)據(jù)的安全性提供保障。

3.4 Spring Boot技術(shù)處理業(yè)務(wù)邏輯層

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

3.5 利用WebGL技術(shù)完成三維渲染

前端基于開源HTML5跨屏框架ZUI，針對(duì)手機(jī)端、桌面電腦兩種尺寸進(jìn)行響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。本系統(tǒng)采用前后端分離模式[8]，團(tuán)隊(duì)根據(jù)Swagger 2接口文檔進(jìn)行前后端數(shù)據(jù)交互開發(fā)。前端對(duì)用戶注冊(cè)或登錄的表單數(shù)據(jù)進(jìn)行校驗(yàn)，校驗(yàn)合法后傳至后端。

此外，前端開源框架Three.js是基于原生WebGL封裝運(yùn)行的三維引擎。因而通過(guò)調(diào)用Three.js提供的API[9]，能夠?qū)⒋鎯?chǔ)三維模型的數(shù)據(jù)文件加載并解析，再通過(guò)Canvas在網(wǎng)頁(yè)中繪制三維場(chǎng)景[10]，展現(xiàn)于瀏覽器視窗之中。除此之外，Three.js能夠通過(guò)瀏覽器調(diào)用設(shè)備攝像頭的權(quán)限采集真實(shí)場(chǎng)景，將虛擬的三維模型疊加于真實(shí)場(chǎng)景中[11]。三維服飾模型渲染效果如圖7所示。

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

4 系統(tǒng)測(cè)試

對(duì)于二維紋理圖像合成模塊，測(cè)試客戶端環(huán)境為Windows 10系統(tǒng)。對(duì)于三維服飾模型貼圖模塊，測(cè)試服務(wù)端環(huán)境為Windows 10系統(tǒng)，數(shù)據(jù)庫(kù)MySQL 5.7.30，JDK 1.8，而測(cè)試客戶端環(huán)境為IOS 14.3系統(tǒng)，使用XRViewer瀏覽器訪問(wèn)系統(tǒng)網(wǎng)站。測(cè)試效果如圖8所示。

圖8 測(cè)試效果圖

從測(cè)試效果來(lái)看，系統(tǒng)的核心功能符合項(xiàng)目組的預(yù)期目標(biāo)，圖像紋理合成質(zhì)量較高，較少情況出現(xiàn)邊緣模糊或錯(cuò)位的問(wèn)題。貼圖模型能夠增強(qiáng)紋理圖案的表面細(xì)節(jié)，具有一定的真實(shí)感。在增強(qiáng)現(xiàn)實(shí)場(chǎng)景下，虛擬的人物模型定位相對(duì)準(zhǔn)確，偏移量在合理的范圍之內(nèi)，為用戶提供了良好的參考。

5 總結(jié)

經(jīng)過(guò)上述的研究與實(shí)踐，團(tuán)隊(duì)在部署、測(cè)試系統(tǒng)的過(guò)程中，驗(yàn)證了基于圖像合成技術(shù)的云服飾增強(qiáng)現(xiàn)實(shí)系統(tǒng)的可行性。紋理合成算法能夠在輕量級(jí)桌面應(yīng)用上高效的實(shí)現(xiàn)。此外，通過(guò)WebGL技術(shù)及Three.js開源框架所設(shè)計(jì)的網(wǎng)站系統(tǒng)，輕量且簡(jiǎn)潔，交互性良好，同時(shí)充分降低用戶使用門檻。該系統(tǒng)能夠使更廣泛的普通人群享受計(jì)算機(jī)技術(shù)、互聯(lián)網(wǎng)服務(wù)帶來(lái)的便利，盡可能地滿足人們?cè)诜b設(shè)計(jì)領(lǐng)域的普通需求。

顯然，本系統(tǒng)仍然存在提升的空間，團(tuán)隊(duì)將在以后的研究中，著力于優(yōu)化圖像合成算法、壓縮系統(tǒng)規(guī)模、簡(jiǎn)化用戶的操作流程、提高部署服務(wù)器的性能，使系統(tǒng)能夠邁上更高的臺(tái)階，為用戶帶來(lái)更優(yōu)質(zhì)的體驗(yàn)。