陶俊

（江漢大學(xué) 數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院，湖北 武漢 430056）

基于WireFusion的網(wǎng)絡(luò)在線三維試衣系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

陶俊

（江漢大學(xué) 數(shù)學(xué)與計(jì)算機(jī)科學(xué)學(xué)院，湖北 武漢 430056）

針對實(shí)際視覺效果要求較高的衣物在線選擇，實(shí)現(xiàn)的網(wǎng)絡(luò)在線三維試衣系統(tǒng)能夠讓虛擬的衣物變得更加具體，滿足了試衣用戶的交互性和真實(shí)性的需求。該系統(tǒng)將3DMax和WireFusion兩個(gè)軟件結(jié)合，將模型導(dǎo)入到WireFusion，在WireFusion中設(shè)置三維模型的交互動作。基于Java虛擬機(jī)，將生成的三維系統(tǒng)嵌入到Web頁面中，實(shí)現(xiàn)網(wǎng)絡(luò)在線功能。實(shí)驗(yàn)演示說明該三維試衣系統(tǒng)具有較好的操作性和實(shí)用性。

試衣系統(tǒng)；三維模型；WireFusion

0 引言

隨著數(shù)字化技術(shù)的高速發(fā)展，人們已不滿足二維信息，“實(shí)時(shí)性”和“交互性”是商品3D展示的魅力所在，虛擬現(xiàn)實(shí)與商業(yè)的結(jié)合，為體驗(yàn)零距離式營銷方式裝上了一對翅膀。近年來，服裝電子商務(wù)的日益普及和網(wǎng)上試衣間的迅速發(fā)展，讓人們已不能滿足于簡單的文字介紹和圖形展示，同時(shí)也對服裝商品展示的交互性和真實(shí)性有了更高的需求。三維試衣系統(tǒng)的研制在未來有可能開創(chuàng)一個(gè)新的網(wǎng)絡(luò)時(shí)代，讓虛擬的網(wǎng)絡(luò)變得更加具有真實(shí)性。因此，針對三維試衣的開發(fā)與研究具有非常重大的意義和價(jià)值［1］。

3D試衣是一個(gè)新興的概念，在國外也屬于新鮮事物。目前，市面流行的3D試衣系統(tǒng)只有國外的M VM、C ME等，國內(nèi)只有C2pop軟件。3D試衣的過程比較復(fù)雜，而且難點(diǎn)較多。網(wǎng)絡(luò)上常見的試衣系統(tǒng)只是平面照片的粘合而已，并不是真正意義上的三維試衣［2］。

1 三維試衣系統(tǒng)的開發(fā)工具與設(shè)計(jì)思路

1.1 W ireFusion

WireFusion是一個(gè)拖放式的可視化編程工具，它不需要編寫任何代碼，就可以設(shè)計(jì)出先進(jìn)的、交互式動態(tài)Web3D網(wǎng)頁。WireFusion是一個(gè)多媒體平臺，集成了幾種不同的媒體類型，成為一個(gè)單一的播放器。它支持三維和二維、Macromedia的F lash、視頻和MP3音頻，也能夠創(chuàng)造360°的全景圖、幻燈片及縮放圖像。WireFusion使得創(chuàng)作的作品更有效率，不但可幫助創(chuàng)造先進(jìn)、體積小、高效的快速互動Web3D網(wǎng)頁，而且所創(chuàng)作的網(wǎng)頁在客戶端不需要安裝插件就可觀看，大大方便了訪問者，可形成一個(gè)非常大的互聯(lián)網(wǎng)觀眾群。

WireFusion的作品設(shè)計(jì)方式是采用預(yù)編程，在WireFusion里有一套W ireFusion對象。使用或重用已設(shè)計(jì)好的對象，可確保設(shè)計(jì)作品的文件小且穩(wěn)定。編程方式非常類似于傳統(tǒng)的編程技術(shù)，數(shù)據(jù)或資料 （俗稱參數(shù)，如數(shù)字、字符串、顏色、圖像等）由一個(gè)函數(shù)送到另一個(gè)函數(shù)。但是，區(qū)別于常規(guī)技術(shù)是，WireFusion是把兩個(gè)有關(guān)聯(lián)對象用連接線連接，顯得非常直觀。當(dāng)有新的對象，無論從D emicron或第三方，都可以輕易安裝到WireFusion中，現(xiàn)在WireFusion約有50多個(gè)對象，其中半數(shù)都與圖形有關(guān)［3-4］。

1.2 三維試衣系統(tǒng)的設(shè)計(jì)思路

該系統(tǒng)的難點(diǎn)在于如何給三維模型穿上衣服，點(diǎn)擊更換衣服時(shí)如何脫下身上已穿的衣服然后換上點(diǎn)擊的衣服，如何實(shí)現(xiàn)三維衣服和模型的貼合。要實(shí)現(xiàn)這些，可以從以下3種思路去實(shí)施。

（1）在3DMax中設(shè)置好模型后，將所有的模型都加入到場景中，通過設(shè)置衣服的坐標(biāo)設(shè)定好動畫，在WireFusion中將模型的端口打開，點(diǎn)擊相應(yīng)的按鈕就播放相應(yīng)的動畫，實(shí)現(xiàn)衣服的更換。

（2）在3DMax中將所有的衣服模型都加入到場景中，設(shè)置好衣服和模特的位置關(guān)系，將所有的衣服都穿在模特身上，而在Wire F usion中將所有的衣服模型的端口打開，并設(shè)置所有的衣服的屬性為隱藏，點(diǎn)擊相應(yīng)按鈕后顯示對應(yīng)的模型，隱藏其他模型。

（3）通過WireFusion內(nèi)置的Java物體，編寫Java源代碼，從外部加載模型，只要對Java物體賦予相應(yīng)的屬性 （在Java中添加In－ports方法），只需提供文件夾名參數(shù)即可實(shí)現(xiàn)換衣操作。

第一種思路中，通過設(shè)置坐標(biāo)實(shí)現(xiàn)衣服的更換雖然可以達(dá)到換衣目的，但由于是3D試衣，模特能夠360°旋轉(zhuǎn)，當(dāng)旋轉(zhuǎn)到一定的角度時(shí)，其他衣服的模型就會顯現(xiàn)出來。第二種思路中，通過設(shè)置 “顯示—隱藏”屬性來實(shí)現(xiàn)衣服的更換，解決了第一種思路中所提到的問題，其他的衣服不論怎么旋轉(zhuǎn)都不會顯現(xiàn)。但是，將所有的模型都加入到場景中，由于Java虛擬機(jī)的內(nèi)存限制，會出現(xiàn)內(nèi)存溢出，導(dǎo)致程序無法正常運(yùn)行。而第一種思路中也會出現(xiàn)這個(gè)問題，故前兩種思路都有各自的缺點(diǎn)［5-6］。第三種思路解決了第一、二種思路中出現(xiàn)的問題，而且提供參數(shù)可以方便地實(shí)現(xiàn)衣服的更換。因此該系統(tǒng)采用第三種思路來實(shí)現(xiàn)具體功能。

2 三維試衣系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)流程

三維試衣系統(tǒng)提供了方便的試衣功能。該系統(tǒng)提供一些衣服模型，用戶可以根據(jù)自己的意愿選擇搭配。在試衣過程中，用戶可以方便地查看模特的著裝，可以直接查看模特背面和正面，還提供了放大衣服、放大褲子的視圖。用戶可以通過鼠標(biāo)和鍵盤來放大、旋轉(zhuǎn)和移動三維模型，從而實(shí)現(xiàn)360°旋轉(zhuǎn)查看模特的著裝。此外，該系統(tǒng)支持背景切換、屏幕快照、場景伸縮等功能。

該試衣系統(tǒng)的主要設(shè)計(jì)流程是：3DMax建模→將模型導(dǎo)出為wrl格式→在WireFusion中設(shè)計(jì)交互。

2.1 導(dǎo)出模型

在3DMax中建立好模型后，先將其導(dǎo)出為wrl格式的文件，然后再導(dǎo)入到WireFusion中。導(dǎo)出可采取以下操作：點(diǎn)擊“文件”中的“導(dǎo)出”，在保存類型下拉列表中選擇“VRML97（*.WRL）”項(xiàng)，選擇保存目錄和文件名，點(diǎn)擊 “確定”,導(dǎo)出為WireFusion可支持的文件，在彈出的對話框中，在“生成”標(biāo)簽下勾選“法線”和“坐標(biāo)插補(bǔ)器”并取消其他選項(xiàng)。

2.2 試衣系統(tǒng)的界面設(shè)計(jì)

該試衣系統(tǒng)主要用到的界面元素有：3D Scene、ImageButton、Scene、Image、Sound、Progressor、Motion Guide、Java、URL。這些都可以在WireFusion的Library中找到。設(shè)計(jì)主要將界面分為7個(gè)大的區(qū)域：功能按鈕區(qū)域、4個(gè)衣服選擇區(qū)域、背景選擇區(qū)域和模特顯示區(qū)域。除了模特顯示區(qū)域外，其他的區(qū)域都放在場景（Scene）中，這樣便于管理編輯。整個(gè)設(shè)計(jì)需要很多的界面元素和復(fù)雜的邏輯，這就會使Script Area中的界面變得很復(fù)雜，必須將同一區(qū)域中的元素放在同一Scene中，方便管理編輯。根據(jù)所設(shè)計(jì)的布局，將相應(yīng)的元素拖入Script Area，并在Stage區(qū)域設(shè)置好相應(yīng)的大小和位置。

2.2.1 功能按鈕區(qū)域的設(shè)計(jì) 在Script Area中拖入一個(gè)Scene物體，并命名為 “Buttons”，雙擊進(jìn)入“Buttons”場景，從Library的“Widgets”文件夾下拖入“”到Script Area中，在彈出的對話框中選擇“ChangeGraphics”按鈕改變按鈕圖像，可以根據(jù)需要設(shè)定按鈕的4種狀態(tài)的圖像。依次完成其他按鈕的設(shè)計(jì)。

2.2.2 衣服選擇區(qū)域的設(shè)計(jì) 按照上述制作按鈕區(qū)域的步驟，做好衣服選擇區(qū)域的界面布局。在Library下的“Misc”文件夾中拖動“”到Script Area，名稱為“Motion Guide 1”，雙擊進(jìn)入屬性設(shè)置對話框，在場景中點(diǎn)擊鼠標(biāo)繪制一條從右向左的直線，調(diào)整好位置，其中“At startup”下拉列表中選擇“Do nothing”。點(diǎn)擊“OK”完成運(yùn)動路徑的繪制。

2.2.3 背景選擇區(qū)域的設(shè)計(jì) 依次從Library中的“MultiMedia”文件夾下拖入 3個(gè)“”到Script Area，名稱默認(rèn)為“Image 5”、“Image 6”、“Image 7”。選擇相應(yīng)的圖片，并調(diào)整好相應(yīng)的位置以及是否被激活等參數(shù)。從Library中的“Misc”文件夾下拖入3個(gè)“”到Script Area，命名為 “background”，進(jìn)入該場景，設(shè)計(jì)好界面元素、布局以及各個(gè)按鈕之間的顯示隱藏關(guān)系 （這里不再敘述具體的步驟）。接下來建立“buttons”場景中“back”和“back 1”按鈕與“background”場景的連接，實(shí)現(xiàn)背景選擇場景的淡入與淡出，這需要借助

“”物體，并設(shè)置相應(yīng)的參數(shù)。然后進(jìn)行各自的功能鏈接。

2.2.4 模特顯示區(qū)域的設(shè)計(jì) 相機(jī)設(shè)置是通過雙擊Script Area的 “3D Scene 1”物件進(jìn)入設(shè)置窗口，點(diǎn)擊“Camera”標(biāo)簽，點(diǎn)擊“Add Camera”按鈕，在“Name：”下的文本框中輸入相機(jī)的名稱，接下來調(diào)整好模型后，選擇輸入相機(jī)的名稱，點(diǎn)擊“Set Camera”按鈕添加一個(gè)相機(jī)。

由于Java程序運(yùn)行時(shí)的內(nèi)存限制，如果將所有的衣服模型放在程序中，采用上面所提到的“顯示—隱藏”方法，會導(dǎo)致內(nèi)存溢出而出現(xiàn)程序無法正常運(yùn)行，因此采用編寫Java代碼從外部導(dǎo)入模型的方法，這就需要將模型轉(zhuǎn)換為w3f格式的文件。轉(zhuǎn)換步驟如下：選擇衣服模型，點(diǎn)擊“Object”標(biāo)簽下“Diffuse Color Map”中的“…”按鈕，選擇相應(yīng)的貼圖。設(shè)置好貼圖后保存為w3f格式的模型文件。按照此步驟將所有的衣服模型轉(zhuǎn)換為w3f格式，為后面從外部加載模型做準(zhǔn)備。

2.3 W ireFusion中交互的設(shè)計(jì)

整個(gè)設(shè)計(jì)與實(shí)現(xiàn)過程主要是將 3DMax和WireFusion軟件結(jié)合起來，將模型導(dǎo)入到Wire-Fusion以及在WireFusion中設(shè)置物體的動作。其中最重要的是怎么設(shè)計(jì)物體的交互動作。由于WireFusion是基于可視化界面、通過物體的輸入輸出端口連接各個(gè)物體的模塊化的設(shè)計(jì)軟件，這樣的設(shè)計(jì)方式不用自己寫代碼（除Java物體外），不需要花太多的時(shí)間去編寫程序，降低了程序設(shè)計(jì)的門檻。但是，對事物的邏輯順序的要求并不亞于編寫程序時(shí)的算法設(shè)計(jì)，只有理順動作的邏輯才能做好動作的交互。另外，由于是模塊化的設(shè)計(jì)，當(dāng)某些交互的邏輯較為復(fù)雜時(shí)，物體之間的連線會變得相當(dāng)復(fù)雜，看上去就像是非常復(fù)雜的電路，這樣不利于修改交互、添加交互或者刪除交互等方面的維護(hù)工作，如果整個(gè)項(xiàng)目的規(guī)模比較大，邏輯會更加的復(fù)雜，這樣物體之間的連線會大大增加，維護(hù)難度也將大大增加。

在設(shè)計(jì)與實(shí)現(xiàn)過程中，如果里面的邏輯過于復(fù)雜、模型文件過多過大、圖片素材過多或者多媒體文件比如聲音文件過多，都會使設(shè)計(jì)所得的文件容量增大，其后果是得到了美觀友好的界面，但是卻無法正常運(yùn)行。因?yàn)镴ava虛擬機(jī)的最大內(nèi)存限制，運(yùn)行時(shí)加載到內(nèi)存的文件容量大于虛擬機(jī)最大內(nèi)存限制時(shí)，就會出現(xiàn)內(nèi)存溢出異常，即使再美觀友好的界面，再強(qiáng)大的功能也無法給用戶體驗(yàn)到。所以設(shè)計(jì)與實(shí)現(xiàn)過程中對所用的模型以及素材的優(yōu)化十分重要。

3 實(shí)驗(yàn)演示與測試

要運(yùn)行三維試衣系統(tǒng)首先必須安裝虛擬機(jī)，本實(shí)例采用的是jdk－6u10.exe虛擬機(jī)。安裝完虛擬機(jī)并設(shè)置好環(huán)境變量后，實(shí)驗(yàn)環(huán)境配置完成，可以測試三維試衣系統(tǒng)。

系統(tǒng)運(yùn)行后初始界面如圖1所示。

圖1 系統(tǒng)初始界面

左右兩邊分別有四欄三維衣物模型，分別是上衣、褲子、套裝和內(nèi)衣。點(diǎn)擊欄目里面的三維衣物模型，即可為三維模特穿上所點(diǎn)擊的衣服，各種衣服可以任意搭配，相互不受影響，完全由用戶決定。4個(gè)衣服欄可以伸縮，點(diǎn)擊相應(yīng)的按鈕，可以將衣服界面顯示或隱藏起來。每個(gè)欄目上有1、2、3、4翻頁字樣的可以進(jìn)行翻頁，查看更多隱藏的衣服。上述功能如圖2所示。所有三維模型由3DMax制作和網(wǎng)絡(luò)下載得到。

該系統(tǒng)充分展現(xiàn)了3D的優(yōu)勢，可以通過鼠標(biāo)對模型進(jìn)行360°的旋轉(zhuǎn)，這樣用戶可以觀看到各個(gè)角度的狀態(tài)。另外，通過點(diǎn)擊屏幕中間的4個(gè)旋轉(zhuǎn)按鈕能夠達(dá)到同樣的效果。試衣三維旋轉(zhuǎn)效果如圖3所示。

為了配合試衣的整體效果，該系統(tǒng)提供了3個(gè)不同的背景。這樣用戶可以通過不同的背景來為模特穿上不同類別的衣服。界面最下面的一排功能按鈕里，最右邊的一個(gè)就是背景選擇按鈕，可以通過不同背景的切換來達(dá)到不同的效果，如圖4所示。

圖2 換衣效果演示

圖3 試衣三維旋轉(zhuǎn)效果演示

圖4 不同背景切換搭配不同類別的衣服

其他按鈕操作簡單方便，功能實(shí)用。從左到右依次是拍照 （保存圖像）、放大衣服、放大褲子、快捷鍵、幫助、旋轉(zhuǎn)、背面視圖、正面視圖、重置視圖、重置所有（包括衣服）、背景選擇等功能。這些功能能夠幫助用戶進(jìn)一步看清衣服具體細(xì)節(jié)和熟悉系統(tǒng)詳細(xì)操作，更加完善了三維試衣系統(tǒng)的功能。

4 結(jié)語

整個(gè)三維試衣系統(tǒng)通過3DMax和WireFusion兩個(gè)軟件聯(lián)合應(yīng)用，將模型導(dǎo)入到WireFusion，在WireFusion中設(shè)置三維模型的試衣交互動作。基于Java和可視化界面，編寫模塊動作和交互的邏輯，簡化了程序設(shè)計(jì)難度，實(shí)現(xiàn)了換衣?lián)Q裝、360°旋轉(zhuǎn)、局部細(xì)節(jié)放大、背景切換等一系列功能。該三維試衣系統(tǒng)具有較好的操作性和實(shí)用性，對網(wǎng)絡(luò)衣物的瀏覽和營銷具有非常重大的意義和價(jià)值。

［1］ 歐陽凱毅.基于Flash的三維在線試衣系統(tǒng)［J］.電腦與電信，2010（2）：60-61，64.

［2］ 王建一，郝慧.三維試衣系統(tǒng)人體建模方法總結(jié)與系統(tǒng)前景展望［J］.價(jià)值工程，2011，30（15）：170-171.

［3］ 崔樹芹，余勝生，胡新榮.3D試衣系統(tǒng)中個(gè)性化人體建模方法［J］.華中科技大學(xué)學(xué)報(bào)：自然科學(xué)版，2009，37（10）：25-28.

［4］ 魯鵬程，易小琳，毛國君，等.基于UML的服裝試衣系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)［J］.北京工業(yè)大學(xué)學(xué)報(bào)，2008，34（9）：1001-1004.

［5］ 李瑞芬.網(wǎng)上試衣系統(tǒng)中服裝建模優(yōu)化技術(shù)研究［J］.數(shù)字技術(shù)與應(yīng)用，2011（4）：71-72.

［6］ 唐士亮，王鳳祿，李笑濤.關(guān)于WireFusion中實(shí)現(xiàn)物體間碰撞檢測的研究［J］.北京廣播電視大學(xué)學(xué)報(bào)，2008（3）：58-61.

TP319

A

1673-0143（2012）02-0057-04

2011－12－16

湖北省統(tǒng)計(jì)科研計(jì)劃一般項(xiàng)目 （HB112－18）；武漢市科技局計(jì)劃項(xiàng)目 （200851799524－08）；2010年江漢大學(xué)大學(xué)生學(xué)術(shù)科技項(xiàng)目

陶 俊 （1976—），男，副教授，博士，研究方向：計(jì)算機(jī)視覺和三維重建。

曾 婷）