基于Unity的VR購(gòu)衣系統(tǒng)設(shè)計(jì)

徐 凌

(北京服裝學(xué)院 計(jì)算機(jī)信息中心，北京 100029)

1 引言

隨著個(gè)人電腦和智能手機(jī)的普及，網(wǎng)上購(gòu)物成為消費(fèi)者的主要購(gòu)物方式之一。2018上半年中國(guó)的網(wǎng)絡(luò)購(gòu)物用戶(hù)規(guī)模達(dá)到5.67億人，占網(wǎng)民的71%。服裝行業(yè)最先享受網(wǎng)購(gòu)紅利，超越電子產(chǎn)品和食品，成為網(wǎng)購(gòu)參與度最高的品類(lèi)。隨著服裝網(wǎng)購(gòu)規(guī)模的快速提升，截止到2017年，服裝網(wǎng)購(gòu)已經(jīng)將市場(chǎng)滲透率提升到40%以上[1]。

網(wǎng)店在介紹商品時(shí)主要通過(guò)文字、圖片和短視頻，對(duì)于消費(fèi)者來(lái)說(shuō)缺乏直接的購(gòu)物體驗(yàn)。近幾年來(lái)，淘寶、京東等各大電商已經(jīng)開(kāi)始虛擬現(xiàn)實(shí)購(gòu)物的技術(shù)研究。2016年初，淘寶和京東都成立了VR實(shí)驗(yàn)室。淘寶在當(dāng)年的“雙十一”正式上線(xiàn)了全新購(gòu)物方式—BUY+系統(tǒng)，構(gòu)建了7個(gè)虛擬商城，有超過(guò)800萬(wàn)的消費(fèi)者體驗(yàn)了VR購(gòu)物。而京東則聯(lián)合英特爾、HTC等數(shù)十家企業(yè)成立VR/AR產(chǎn)業(yè)聯(lián)盟，推出“VR購(gòu)物星系”應(yīng)用[2，3]。

VR即虛擬現(xiàn)實(shí)，自2012年來(lái)出現(xiàn)了以O(shè)culus為代表的一批可靠實(shí)用的VR頭盔，可以針對(duì)雙眼獨(dú)立成像，相對(duì)于普通的顯示設(shè)備，具有良好的浸入式體驗(yàn)效果[4]。因此，其在虛擬展覽、虛擬駕駛、虛擬景觀(guān)等VR應(yīng)用領(lǐng)域得到推廣[5，6]。

作為新興的技術(shù)，使用標(biāo)準(zhǔn)VR顯示設(shè)備的虛擬購(gòu)物應(yīng)用較少且不成熟，尤其是在服裝購(gòu)買(mǎi)方面。目前的服裝VR網(wǎng)購(gòu)系統(tǒng)存在缺少服裝動(dòng)態(tài)展示內(nèi)容和實(shí)用的虛擬試衣方法，對(duì)大批量、更新頻繁的商品建模成本大、效率低下等缺點(diǎn)，針對(duì)以上問(wèn)題，本文設(shè)計(jì)了基于Unity的VR購(gòu)衣系統(tǒng)，使用三維掃描方式批量建模，經(jīng)過(guò)優(yōu)化處理降低系統(tǒng)成本，并提出一種針對(duì)顧客體型定制等比例虛擬試衣模特的方法。

2 系統(tǒng)設(shè)計(jì)方案

2.1 系統(tǒng)總體結(jié)構(gòu)

系統(tǒng)按圖1的結(jié)構(gòu)進(jìn)行模型劃分。數(shù)據(jù)采集與處理模塊的內(nèi)容包括商品模型的掃描創(chuàng)建和優(yōu)化處理、顧客個(gè)性化虛擬人體模型的定制和生成；用戶(hù)信息管理模塊的內(nèi)容包括對(duì)顧客、賣(mài)家商店相關(guān)信息的添加、修改、查詢(xún)、刪除；商品信息管理模塊的內(nèi)容包括對(duì)商品相關(guān)信息的添加、修改、查詢(xún)、刪除；交易信息處理模塊的內(nèi)容包括對(duì)訂單流程的處理、留言的處理、網(wǎng)上支付的處理；用戶(hù)交互模塊的內(nèi)容包括在PC端和Android端的GUI交互界面設(shè)計(jì)；虛擬展示模塊的內(nèi)容包括虛擬店鋪的設(shè)計(jì)和顯示、服裝模型的靜態(tài)展示、服裝模型結(jié)合虛擬人體模型的動(dòng)態(tài)展示；數(shù)據(jù)庫(kù)模塊包括數(shù)據(jù)的存儲(chǔ)和管理、數(shù)據(jù)庫(kù)連接的實(shí)現(xiàn)、數(shù)據(jù)安全機(jī)制的實(shí)現(xiàn)。

圖1 系統(tǒng)模塊劃分

2.2 數(shù)據(jù)庫(kù)物理模型設(shè)計(jì)

2.2.1實(shí)體關(guān)系

按實(shí)體類(lèi)型主要?jiǎng)澐譃橘u(mài)家、顧客、訂單、商品、物品五種，如圖2所示。其中同一種物品可能在不同的賣(mài)家按不同價(jià)格、說(shuō)明出售，因此與商品是一對(duì)多關(guān)系；同一個(gè)訂單可能包含了多個(gè)商品，同一個(gè)商品也可能出現(xiàn)在多個(gè)訂單里，兩者是多對(duì)多關(guān)系；賣(mài)家和顧客可以擁有多個(gè)訂單，與之是一對(duì)多關(guān)系；一種物品可以是多種商品，而一種商品只能是一種物品，兩者是一對(duì)多關(guān)系。

圖2 E-R關(guān)系圖

2.2.2物理模型設(shè)計(jì)

系統(tǒng)的數(shù)據(jù)主要用圖3所示五個(gè)表存儲(chǔ)。其中物品表除了物品基本介紹內(nèi)容外還要存儲(chǔ)該物品的三維模型；商品表可在所指向物品的基礎(chǔ)信息外添加自定義的介紹信息和價(jià)格、庫(kù)存量；顧客表包含顧客的基本信息和定制的虛擬試衣模特的人體模型；訂單表包含交易信息和訂單狀態(tài)字段。

圖3 數(shù)據(jù)庫(kù)物理設(shè)計(jì)

3 系統(tǒng)功能的實(shí)現(xiàn)

3.1 數(shù)據(jù)采集與建模

3.1.1服裝建模與處理

服裝模型通過(guò)三維掃描儀掃描生成外觀(guān)和紋理。由于初步生成的模型包含噪點(diǎn)、空洞、冗余信息和過(guò)多的面，需要經(jīng)過(guò)降噪、表面重建等處理步驟。之后經(jīng)過(guò)蒙皮、綁定骨骼、添加碰撞檢測(cè)系統(tǒng)的步驟，將服裝模型與人體模型的掛載點(diǎn)進(jìn)行標(biāo)準(zhǔn)化統(tǒng)一，以便實(shí)現(xiàn)換裝功能。

3.1.2自定義人體模型的生成

系統(tǒng)提供一整套帶骨骼和骨骼動(dòng)畫(huà)的標(biāo)準(zhǔn)人體模型，用戶(hù)選擇和自己體型近似的模型并對(duì)參數(shù)進(jìn)行微調(diào)，選擇近似的臉型、頭型，還可以選擇上傳正臉自拍照作為面部貼圖。服裝與虛擬試衣模特結(jié)合后效果如圖5所示。

圖4 帶骨骼的虛擬人體著裝模型

3.1.3店鋪環(huán)境建模

使用3dsMax制作貨架、燈具等設(shè)施，對(duì)于店鋪內(nèi)的柜臺(tái)、墻壁、地板等外形由矩形平面結(jié)構(gòu)拼合的規(guī)則物體，可以直接用Unity自帶的建模、貼圖功能實(shí)現(xiàn)。

3.2 虛擬店鋪的實(shí)現(xiàn)

賣(mài)家可以通過(guò)菜單在幾套標(biāo)準(zhǔn)店鋪模型中自選，并在貨架、墻壁上添加虛擬商品。具體實(shí)現(xiàn)方法是先在Unity中建立店鋪場(chǎng)景、導(dǎo)入店鋪環(huán)境模型、添加第一人稱(chēng)視角VR攝像機(jī)對(duì)象；然后在后臺(tái)通過(guò)賣(mài)家ID在數(shù)據(jù)庫(kù)商品表中查詢(xún)賣(mài)家出售的服裝種類(lèi)，獲取服裝的模型、陳列位置和其他信息；最后將服裝對(duì)象添加到虛擬店鋪的陳列位置上。

顧客在界面通過(guò)搜索店鋪名獲取賣(mài)家ID，并加載對(duì)應(yīng)的虛擬店鋪。顧客通過(guò)佩戴VR頭盔瀏覽虛擬店鋪和陳列的服裝，通過(guò)操作Touch工具發(fā)射的光線(xiàn)能夠選擇服裝，打開(kāi)商品信息界面。在商品信息界面里除了展示服裝的圖文說(shuō)明、庫(kù)存量、價(jià)格外，還包括虛擬試衣選項(xiàng)、購(gòu)買(mǎi)選項(xiàng)。

3.3 虛擬試衣的實(shí)現(xiàn)

顧客選擇了服裝并添加到試衣列表后加載虛擬試衣間，將列表中的服裝模型添加到個(gè)人的虛擬試衣模特上?？梢酝ㄟ^(guò)VR頭盔在試衣間內(nèi)圍繞著裝人體走動(dòng)并觀(guān)看效果，試衣人體模型可以按用戶(hù)在菜單上選擇的幾種靜態(tài)姿勢(shì)展示，也能通過(guò)加載骨骼動(dòng)畫(huà)演示服裝在人體走動(dòng)、跑動(dòng)、跳躍時(shí)的懸垂和碰撞效果；還能實(shí)時(shí)調(diào)整服裝尺寸使之更加合身。

在技術(shù)上，通過(guò)數(shù)據(jù)庫(kù)顧客表讀取和加載試衣人體模型，將人體模型的對(duì)應(yīng)位置蒙皮更換成服裝就實(shí)現(xiàn)了換裝，演示中的靜態(tài)姿勢(shì)和運(yùn)動(dòng)效果是通過(guò)播放人體模型在系統(tǒng)中預(yù)先錄制的幾套骨骼動(dòng)畫(huà)實(shí)現(xiàn)的。

3.4 購(gòu)物和訂單處理機(jī)制

顧客在未登錄的情況下就可以搜索和查看出售的服裝信息，如果要加入購(gòu)物車(chē)就會(huì)彈出登錄窗口，只有登錄后才能生成訂單。確認(rèn)付款后，賣(mài)方會(huì)收到消息并發(fā)貨；顧客則會(huì)在發(fā)貨后收到發(fā)貨通知消息。顧客可以在發(fā)貨前取消訂單并退款，在收貨后可以執(zhí)行評(píng)價(jià)或者退換操作，這一過(guò)程中訂單狀態(tài)會(huì)發(fā)生相應(yīng)改變。顧客購(gòu)物和訂單處理的流程如圖5所示。

圖5 購(gòu)物處理流程圖

在數(shù)據(jù)通訊方面，客戶(hù)端向服務(wù)端的API接口發(fā)出請(qǐng)求，服務(wù)端將接收到的信息轉(zhuǎn)換為JSON字段，根據(jù)其類(lèi)型轉(zhuǎn)入對(duì)應(yīng)處理流程。客戶(hù)端則在本地解析和加載由服務(wù)端發(fā)來(lái)的打包為JSON格式的信息。

4 測(cè)試效果

完成開(kāi)發(fā)后，將客戶(hù)端通過(guò)Unity工具欄菜單下的Build功能打包為.apk文件，安裝進(jìn)Android手機(jī)和VR頭盔設(shè)備里；在服務(wù)器端安裝Oracle數(shù)據(jù)庫(kù)和服務(wù)端程序并錄入數(shù)據(jù)。顧客購(gòu)物界面如圖6所示。

圖6 顧客購(gòu)物界面

使用Touch控制行走，第一人稱(chēng)VR攝像機(jī)向側(cè)面移動(dòng)后不同視角的試衣效果如圖7(a)、圖7(b)所示。將VR頭盔視角中的畫(huà)面投射到屏幕上，左、右目鏡會(huì)單獨(dú)成像。在實(shí)際佩戴頭盔時(shí)左右目鏡各自對(duì)應(yīng)左右眼，通過(guò)視覺(jué)差能模擬人眼的觀(guān)察角度，實(shí)現(xiàn)視場(chǎng)的深度感和浸入感[7，8]。與同類(lèi)網(wǎng)購(gòu)系統(tǒng)相比，基于Unity的VR購(gòu)衣系統(tǒng)擁有直觀(guān)的試衣展示效果、更豐富的展示內(nèi)容。

圖7 虛擬試衣的VR頭盔視角

5 結(jié)語(yǔ)

網(wǎng)絡(luò)購(gòu)物的過(guò)程中僅通過(guò)圖文和視頻已經(jīng)不能滿(mǎn)足顧客對(duì)服裝商品信息的了解需求，隨著VR技術(shù)的發(fā)展，在不親臨實(shí)體店的情況下，就可實(shí)現(xiàn)虛擬試衣體驗(yàn)?；赨nity工具的引擎和外接式VR頭盔構(gòu)建的VR購(gòu)衣系統(tǒng)在實(shí)現(xiàn)服裝網(wǎng)購(gòu)基本流程的同時(shí)提供虛擬試衣功能，較好地實(shí)現(xiàn)了服裝動(dòng)態(tài)展示的浸入式觀(guān)看效果，進(jìn)一步豐富了商品展示手段，也為該類(lèi)型VR應(yīng)用的開(kāi)發(fā)提供了有價(jià)值的參考。