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

陶俊

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

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

陶俊

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

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

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

0 引言

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

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

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

1.1 W ireFusion

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

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

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

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

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

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

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

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

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

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

該試衣系統(tǒng)的主要設(shè)計流程是：3DMax建?！鷮⒛Ｐ蛯?dǎo)出為wrl格式→在WireFusion中設(shè)計交互。

2.1 導(dǎo)出模型

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

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

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

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

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

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

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

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

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

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

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

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

3 實驗演示與測試

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

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

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

左右兩邊分別有四欄三維衣物模型，分別是上衣、褲子、套裝和內(nèi)衣。點擊欄目里面的三維衣物模型，即可為三維模特穿上所點擊的衣服，各種衣服可以任意搭配，相互不受影響，完全由用戶決定。4個衣服欄可以伸縮，點擊相應(yīng)的按鈕，可以將衣服界面顯示或隱藏起來。每個欄目上有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)，這樣用戶可以觀看到各個角度的狀態(tài)。另外，通過點擊屏幕中間的4個旋轉(zhuǎn)按鈕能夠達(dá)到同樣的效果。試衣三維旋轉(zhuǎn)效果如圖3所示。

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

圖2 換衣效果演示

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

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

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

4 結(jié)語

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

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

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

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

［4］ 魯鵬程，易小琳，毛國君，等.基于UML的服裝試衣系統(tǒng)設(shè)計與實現(xiàn)［J］.北京工業(yè)大學(xué)學(xué)報，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中實現(xiàn)物體間碰撞檢測的研究［J］.北京廣播電視大學(xué)學(xué)報，2008（3）：58-61.

TP319

A

1673-0143（2012）02-0057-04

2011－12－16

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

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

曾 婷）