国产日韩欧美一区二区三区三州_亚洲少妇熟女av_久久久久亚洲av国产精品_波多野结衣网站一区二区_亚洲欧美色片在线91_国产亚洲精品精品国产优播av_日本一区二区三区波多野结衣 _久久国产av不卡

?

基于Web的網(wǎng)絡(luò)試衣間系統(tǒng)

2015-05-30 01:26:57泮雯雯等
計(jì)算機(jī)時(shí)代 2015年5期
關(guān)鍵詞:試衣間試衣人體模型

泮雯雯等

摘 要: 運(yùn)用3D模型構(gòu)造軟件(MAKEHUMAN、BLENDER、MARVELOUS DESIGNER、POSER等)來實(shí)現(xiàn)用戶3D虛擬模特的構(gòu)造及不同材質(zhì)服裝的形態(tài)仿真,同時(shí)利用BLENDER4WEB組件將模特的試衣效果圖嵌入網(wǎng)站中以網(wǎng)頁形式展示,能讓用戶全方位地觀察3D虛擬模特的試衣效果。該基于Web的3D虛擬網(wǎng)絡(luò)試衣間系統(tǒng)能根據(jù)用戶提供的形體參數(shù)匹配出最符合條件的3D虛擬模特并實(shí)現(xiàn)試衣展示功能,有效地幫助用戶選購服裝。

關(guān)鍵詞: Web; 3D; 虛擬模特; 試衣系統(tǒng)

中圖分類號(hào):TP393 文獻(xiàn)標(biāo)志碼:A 文章編號(hào):1006-8228(2015)05-35-03

Abstract: The Web-based system of 3D virtual online fitting room is based on the web technology to show the 3D virtual models with garments according to the information provided by the users. The system is implemented using 3D modeling software, such as MAKEHUMAN, BLENDER, MARVELOUS DESIGNER and POSER. These software can build the users' virtual models and garments of different materials. Meanwhile, the system utilizes BLENDER4WEB to show the 3D virtual models in WebPages. In a word, the system provides the effective references to help users fitting and choosing clothes online.

Key words: Web; 3D; virtual model; fitting room

0 引言

隨著計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)虛擬系統(tǒng)的普及,網(wǎng)上購物逐漸成為人們購買日常生活用品的主要渠道之一。然而,在網(wǎng)絡(luò)零售環(huán)境下,服裝公司不僅需要克服時(shí)尚行業(yè)的短暫性,還要克服顧客的消費(fèi)心理難題。作為四大基本需求之一,當(dāng)今人們對(duì)服裝有著更“苛刻”的要求,希望服裝不僅要保暖,還要合身、美觀和個(gè)性化。因此,人們更注重根據(jù)個(gè)人的體型特征挑選服飾[1]。

若在B2C的商務(wù)運(yùn)作模式下,消費(fèi)者能通過網(wǎng)絡(luò)虛擬環(huán)境選購自己心儀的服飾,將節(jié)省大量的企業(yè)營(yíng)銷、運(yùn)輸、倉儲(chǔ)成本,同時(shí)也提高了購買率。

目前,人們使用的網(wǎng)絡(luò)服飾交易平臺(tái)主要有阿里巴巴、淘寶網(wǎng)等,這些平臺(tái)的服裝效果是通過二維平面圖來展示,服裝的顏色、款式、材質(zhì)面料、等難以通過二維平面圖準(zhǔn)確地體現(xiàn)。據(jù)調(diào)研資料顯示,近50%的人不通過網(wǎng)絡(luò)購買服飾,而大部分有過網(wǎng)上購買服飾經(jīng)歷的顧客都表示在購物過程中出現(xiàn)過尺碼、款式或色彩不滿意等問題[2],88%的調(diào)查者表示,對(duì)網(wǎng)上購買服裝不能試穿存在顧慮。

綜上所述,如果網(wǎng)絡(luò)服裝交易平臺(tái)能夠提供一種3D服裝試穿系統(tǒng),它能基于用戶本人的形體參數(shù)生成相應(yīng)的3D虛擬模型,此外還能夠通過布料的材質(zhì)、尺寸等信息模擬服裝,并通過虛擬模型展現(xiàn)出來,用戶便可以通過此平臺(tái)觀察衣服的試穿效果,從而減少人們網(wǎng)上購買服裝的顧慮,促進(jìn)服飾的網(wǎng)絡(luò)銷售。

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

“基于Web的網(wǎng)絡(luò)試衣間系統(tǒng)”的設(shè)計(jì)遵循軟件系統(tǒng)的生命周期的原則,系統(tǒng)設(shè)計(jì)應(yīng)該遵循的重要原則有:實(shí)用性、可靠性、先進(jìn)性、可擴(kuò)充性、安全性;用戶界面友好、健壯性、可自適應(yīng)性[3]。

1.1 系統(tǒng)需求分析

“基于Web的網(wǎng)絡(luò)試衣間系統(tǒng)”應(yīng)具有以下功能。

⑴ 建立人體模型。系統(tǒng)能根據(jù)用戶輸入的形體參數(shù),匹配相對(duì)應(yīng)的人體模型,模擬用戶實(shí)際體型。

⑵ 選擇服裝。系統(tǒng)能展示一系列服裝,用戶可用鼠標(biāo)在服裝展示區(qū)進(jìn)行挑選,供試衣所用。

⑶ 試穿功能。系統(tǒng)允許用戶通過操作將選中的服裝移動(dòng)至模擬客戶的虛擬模特身上進(jìn)行試穿,并在此模特身上展示。

⑷ 展示功能。系統(tǒng)允許客戶在虛擬試衣完成后,通過鼠標(biāo)自由旋轉(zhuǎn)模特,全方位觀察試穿效果。

1.2 系統(tǒng)框架設(shè)計(jì)

本文設(shè)計(jì)的系統(tǒng)架構(gòu)為Browser/Server/Database Server的B/S架構(gòu),客戶可通過瀏覽器訪問該3D虛擬試衣間系統(tǒng),服務(wù)器端采用Web方式進(jìn)行應(yīng)用系統(tǒng)開發(fā),并使用應(yīng)用邏輯服務(wù)和數(shù)據(jù)庫服務(wù),它們與客戶端形成三級(jí)系統(tǒng)結(jié)構(gòu)。這樣的三級(jí)系統(tǒng)結(jié)構(gòu)具有結(jié)構(gòu)清晰、易于維護(hù)、運(yùn)行速度快等優(yōu)勢(shì)[4]。

2 系統(tǒng)功能設(shè)計(jì)

本文3D虛擬試衣系統(tǒng)主要功能包括客戶端處理和服務(wù)端處理。客戶端處理為客戶提供進(jìn)入該系統(tǒng)后的各項(xiàng)服務(wù),有用戶試體驗(yàn)、用戶身份驗(yàn)證、服裝展示、服裝試穿四個(gè)功能模塊。系統(tǒng)提供服裝展示平臺(tái),并為初次登陸該系統(tǒng)的用戶提供虛擬模特構(gòu)建的服務(wù),用戶選中所需的服裝后,可在虛擬模特身上試穿,并且多角度觀察試穿效果。服務(wù)端功能解決系統(tǒng)內(nèi)部的處理問題:服裝管理、模特管理、客戶信息管理等。系統(tǒng)前臺(tái)和后臺(tái)功能分別如圖1和圖2所示。

2.1 客戶端處理模塊

⑴ 用戶試體驗(yàn)?zāi)K。在該模塊中用戶無需注冊(cè)便可體驗(yàn)系統(tǒng)的一些基本功能。當(dāng)用戶進(jìn)入系統(tǒng)后點(diǎn)擊Go to try按鈕便可進(jìn)入該區(qū)域,選擇服裝展示區(qū)的服裝便可進(jìn)行試穿并觀察試衣效果。此模塊旨在消除用戶對(duì)網(wǎng)站需先注冊(cè)后體驗(yàn)的反感,提升用戶對(duì)系統(tǒng)的信任度。

⑵ 用戶身份驗(yàn)證。用戶身份驗(yàn)證包括用戶注冊(cè)和用戶登錄兩個(gè)模快。

用戶注冊(cè):首先驗(yàn)證客戶是否已經(jīng)在該系統(tǒng)中注冊(cè),若無,則進(jìn)入用戶注冊(cè)窗口,輸入用戶信息進(jìn)行注冊(cè)。信息提交后,系統(tǒng)將檢查這些信息,若合法,則將用戶信息存入數(shù)據(jù)庫;反之,將提示用戶進(jìn)行修改。

用戶登錄:用戶合法注冊(cè)后,能登陸并完全使用試衣系統(tǒng)。也可以修改帳號(hào)和密碼等個(gè)人信息。

⑶ 服裝展示功能。服裝展示功能提供瀏覽服裝的功能,包括服裝的展示和查詢[5]。

服裝展示:從數(shù)據(jù)庫中取出服裝圖片并在頁面上進(jìn)行展示。

服裝查詢:提供方便快捷的服裝查詢功能。通過輸入服裝的種類、品牌等關(guān)鍵詞進(jìn)行分類查詢。

⑷ 試衣間。主要分為構(gòu)建3D人體模特和選擇服裝。

構(gòu)建模特:輸入用戶的形體參數(shù),包括性別、身高和三圍。系統(tǒng)根據(jù)后臺(tái)的匹配算法找出相應(yīng)的3D模特。

選擇服裝:用戶可點(diǎn)擊需要試穿的服裝,系統(tǒng)會(huì)生成試穿成功后的虛擬模特。同時(shí)用戶可通過拖曳鼠標(biāo)對(duì)虛擬模特進(jìn)行旋轉(zhuǎn)、縮放并觀察試穿效果。

2.2 服務(wù)端模塊

管理人員只有通過系統(tǒng)身份驗(yàn)證進(jìn)入系統(tǒng)。

⑴ 用戶管理。用戶在進(jìn)入試衣間時(shí),如果已向系統(tǒng)提供了合法的形體參數(shù),則管理人員會(huì)在服務(wù)端構(gòu)建相應(yīng)的虛擬模特,并且存儲(chǔ)在數(shù)據(jù)庫,以供用戶調(diào)用。

⑵ 虛擬模特構(gòu)建。在管理端,管理人員根據(jù)用戶提交的個(gè)人體型參數(shù)記錄,通過使用相應(yīng)服務(wù)端軟件構(gòu)建相應(yīng)虛擬模特,并及時(shí)存入數(shù)據(jù)庫中。

⑶ 服裝管理。當(dāng)系統(tǒng)載入新的服裝后,管理人員將服裝的圖片和相關(guān)信息填入數(shù)據(jù)庫中。

2.3 效果圖展示

2.3.1 網(wǎng)頁首頁效果圖

用戶在首頁里可找到網(wǎng)站的基本信息介紹、使用方法以及用戶登錄注冊(cè)功能導(dǎo)航等內(nèi)容(見圖3)。

2.3.2服裝區(qū)域展示圖

用戶在此區(qū)域可隨意挑選服裝,同時(shí)也可根據(jù)頁面左側(cè)的分類框里分類顯示服裝類型,便于用戶選擇(見圖4)。

2.3.3 3D模式展示圖

用戶在此區(qū)域可以任意拖拉模特的位置,縮放其大小并從任意角度觀察穿衣效果(見圖5)。

3 系統(tǒng)的關(guān)鍵技術(shù)

3.1 基于Blender4web的3D顯示技術(shù)

3.1.1 Blender4web技術(shù)介紹

Bledner4web是一Triumph公司為實(shí)現(xiàn)在瀏覽器上顯示3D圖形、音頻交互等功能開發(fā)的一個(gè)開源框架。Blender4web密切結(jié)合了Blender里的3D建模和動(dòng)畫工具。它結(jié)合了WEBGL和瀏覽器的顯示技術(shù),可以不用插件就能在瀏覽器上顯示3D動(dòng)畫。從技術(shù)上來說,Blender4web是網(wǎng)頁的一個(gè)3D庫,也是Blender進(jìn)行調(diào)試優(yōu)化的組件[6]。

3.1.2 Blender4web 在本系統(tǒng)中的應(yīng)用

在3D虛擬試衣間中,根據(jù)用戶輸入的形體數(shù)據(jù)匹配得到一個(gè)3D的人體模特顯示在試衣區(qū)域。用戶通過鼠標(biāo)的拖拉可以360度觀看試衣效果,同時(shí)通過滾輪滑動(dòng)自由縮放,可操作性強(qiáng)。以下描述3D人體模型及試衣場(chǎng)景的設(shè)計(jì)。

⑴ 首先使用Poser、Makehuman、Marvelous Desginer等人體模型軟件和成衣制作軟件,制作出人體模型和服裝,然后從這些軟件中導(dǎo)出.dae、.obj、.mhx等格式的文件。值得一提的是,導(dǎo)出的模型只需滿足能導(dǎo)入進(jìn)Blender的基本要求即可,另外,Blender有豐富的可擴(kuò)展插件,用戶可選擇自己需要的Import-Export插件添加進(jìn)Blender。

⑵ 將制作好的人體模型文件導(dǎo)入Blender中。利用Blender對(duì)模型進(jìn)行雕刻、渲染使模型更逼真。在渲染時(shí)可通過調(diào)節(jié)顏色、紋理參數(shù)實(shí)現(xiàn)。服裝的渲染可直接在Blender里通過雕刻渲染來做,也可從外部導(dǎo)入U(xiǎn)V圖。在此基礎(chǔ)上為模型穿上服裝,用戶可以通過鼠標(biāo)和鍵盤自由地觀察人體模型[7]。

⑶ 將制作好的模型用Blender4web技術(shù)導(dǎo)出,直接形成.html文件。Blender里不包括Blender4web的導(dǎo)出模式,我們必須自己添加:先在bledner4web的官網(wǎng)上下載與Blender版本相對(duì)應(yīng)的add-on,然后在Blender里點(diǎn)擊File->User Preferences->Addons->Install From File(bledner4web插件的壓縮包)->導(dǎo)入后打鉤->Save User Settings。之后可以在File->Export里找到.html格式的導(dǎo)出類型。

3.2 基于three.js的3D顯示技術(shù)

3.2.1 three.js技術(shù)介紹

Three.js是一個(gè)開源WebGL庫,WebGL允許JavaScript操作GPU,在瀏覽器端實(shí)現(xiàn)真正意義的3D,它封裝了底層的圖形接口,使得程序員能夠用簡(jiǎn)單的代碼實(shí)現(xiàn)3D場(chǎng)景的渲染。此外,Three.js有很好的靈活性。幾乎不會(huì)有WebGL支持而Three.js實(shí)現(xiàn)不了的情況,當(dāng)然,除了WebGL之外,Three.js還提供了基于Canvas、SVG標(biāo)簽的渲染器[9]。

3.2.2 three.js在本系統(tǒng)中的應(yīng)用

⑴ 首先使用Poser、Makehuman、Marvelous Desginer等人體模型軟件和成衣制作軟件制作出人體模型和服裝,然后從這些軟件中導(dǎo)出.dae格式的文件。必須得帶有UV貼圖。

⑵ 編寫html文件,導(dǎo)入three.js的JavaScrript的庫。加入three.min.js、ColladaLoader.js、Detector.js、stats.min.js、OrbitControls.js用來構(gòu)建場(chǎng)景燈光、添加渲染效果等[10]。同時(shí)使得用戶可以通過鼠標(biāo)和鍵盤的操作,在場(chǎng)景自由地旋轉(zhuǎn)和移動(dòng)來實(shí)現(xiàn)視角的變換。最后將html文件嵌入在主程序中。

3.3 兩種3D顯示技術(shù)的比較

Blender4web技術(shù)專門是針對(duì)于Blender開發(fā)的,對(duì)于在Blender里的3D模型具有良好的適應(yīng)性,導(dǎo)出的html文件可以在Web里完美展現(xiàn)。而且操作簡(jiǎn)單,無需編寫3D顯示程序。

利用Three.js庫就如同使用Jquery庫來編寫JavaScript一樣,編寫起來很方便。程序員可在程序里對(duì)場(chǎng)景、模型、服裝做近一步的修飾。

本文所介紹的系統(tǒng)中使用了這兩種方法,做出的模型試衣效果都能滿足要求,惟一不同的是用three.js需自帶UV貼圖,而Blender4web不需要。

4 結(jié)束語

該3D試衣系統(tǒng)實(shí)現(xiàn)了3D模特試衣及試衣效果全方位展示等功能,為用戶在進(jìn)行虛擬試衣時(shí)提供有效依據(jù),減少用戶在網(wǎng)上購買服裝時(shí)的顧慮。該3D試衣系統(tǒng)具有廣闊的應(yīng)用前景。對(duì)企業(yè)來說,改變了傳統(tǒng)行業(yè)的銷售模式,降低了成本;對(duì)用戶來說,該系統(tǒng)不僅讓用戶體驗(yàn)服裝試穿的樂趣,還能成為個(gè)人形象設(shè)計(jì)的平臺(tái)。該3D試衣系統(tǒng)是服裝網(wǎng)絡(luò)銷售的革命性創(chuàng)新,在不久的將來它定會(huì)成為一種新型的創(chuàng)意產(chǎn)業(yè)。當(dāng)然,該系統(tǒng)還可以做進(jìn)一步優(yōu)化。例如通過減小3D人體模型數(shù)據(jù)量來進(jìn)一步加快人體模型的打開速度[11];將Blender 建模技術(shù)內(nèi)嵌于試衣系統(tǒng)中使系統(tǒng)自動(dòng)地完善3D人體模型庫等。

參考文獻(xiàn):

[1] 牛霞.虛擬現(xiàn)實(shí)在展示設(shè)計(jì)中的應(yīng)用研究[D].西北大學(xué),2014.

[2] 梁佳晨.動(dòng)態(tài)實(shí)時(shí)虛擬試衣及圖像驅(qū)動(dòng)的三維模型變形[D].廈門大學(xué),2013.

[3] 孫珊珊,黎國(guó)進(jìn),顧治華.基于虛擬現(xiàn)實(shí)的三維網(wǎng)上試衣間的研究[J].湖北工業(yè)大學(xué)學(xué)報(bào),2011.26(4).

[4] 張闖,徐婷,黃駿霆.淺析三維立體試衣系統(tǒng)在電子商務(wù)中的應(yīng)用[J].商場(chǎng)現(xiàn)代化,2014.24:42-43

[5] 張婷婷,裘建新,朱夢(mèng)豪等.網(wǎng)上試衣間的構(gòu)造[J].上海工程技術(shù)大學(xué)學(xué)報(bào),2013.27(4).

[6] https://www.blend4web.com/en/about/

[7] 楊漾,姚杭飛,楊琛,許淑華.基于Unity 3D的虛擬家具商城的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代,2014.6.

[8] 劉民,萬江平.基于Flash 3D的在線虛擬漫游系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代,2014.5.

[9] 曾云,陳盈盈,張?jiān)?基于人體識(shí)別的在線虛擬試衣系統(tǒng)[J].電視技術(shù),2014.11.

[10] JingFeng Ma, JiaJun Bu, Kai Hou et al.. An energy conductionmodel for cell image segmentation[J].Chinese Science Bulletin,2011.56(10).

[11] 徐康熙,郝泳濤.基于物理引擎PhysX的3D試衣系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù),2014.10(8).

猜你喜歡
試衣間試衣人體模型
“稱霸”試衣間
基于單片機(jī)控制的網(wǎng)購試衣機(jī)器人
電子制作(2018年18期)2018-11-14 01:47:56
基于乘員體型的車輛安全性研究
汽車文摘(2015年11期)2015-12-14 19:10:11
淘寶試衣間
Coco薇(2015年12期)2015-12-10 03:00:23
Family makes 45—foot icicle in front yard
糗事串燒
華聲(2015年12期)2015-07-06 01:30:13
3D體感試衣鏡 對(duì)著屏幕可試衣
體驗(yàn)創(chuàng)新:3D人體掃描儀測(cè)三圍
虛擬試衣系統(tǒng)關(guān)鍵技術(shù)
絲綢(2014年12期)2014-02-28 14:56:18
Virual fitting room“試衣魔鏡”
将乐县| 如皋市| 敦化市| 莒南县| 白沙| 茂名市| 土默特右旗| 福安市| 灵台县| 莒南县| 隆德县| 嫩江县| 平南县| 泽普县| 西充县| 华阴市| 芒康县| 东兰县| 西峡县| 勃利县| 石柱| 临潭县| 郎溪县| 澄江县| 偏关县| 巫山县| 临沭县| 德阳市| 阿拉善盟| 来宾市| 房山区| 德庆县| 台中市| 广丰县| 西昌市| 阿坝| 油尖旺区| 华安县| 视频| 清镇市| 大冶市|