基于Web的三維虛擬展館的設(shè)計(jì)與實(shí)現(xiàn)

李海濤 （大慶市科學(xué)技術(shù)局，黑龍江 大慶163302）

李 冀，賈常見，魏艷吉 （東北石油大學(xué)軟件學(xué)院，黑龍江 大慶163318）

展館，是一種載體，主辦方將自己心中所想以及所擁有的產(chǎn)品或技術(shù)以及成果等展示在其中［1］。隨著互聯(lián)網(wǎng)技術(shù)及眾多應(yīng)用手段的不斷成熟和發(fā)展，實(shí)體展館已不能滿足人們的需求，如傳統(tǒng)實(shí)體展館拘泥于場地的限制，參觀者在百忙之中需抽出時間到實(shí)體展館處才能參觀，所以三維虛擬展館應(yīng)運(yùn)而生。

三維虛擬展館就是利用計(jì)算機(jī)圖形學(xué)的技術(shù)構(gòu)建的數(shù)字化展覽館，是一種三維互動體驗(yàn)方式［2］。三維虛擬展館以傳統(tǒng)展館為基礎(chǔ)，利用三維虛擬技術(shù)將展館及其陳列品移植到互聯(lián)網(wǎng)上進(jìn)行展示、宣傳，突破了傳統(tǒng)意義上的時間與空間的局限。為此，筆者設(shè)計(jì)與實(shí)現(xiàn)了一種基于Web的三維虛擬展館展示平臺。

1 三維虛擬展館系統(tǒng)的特點(diǎn)

1）環(huán)境可控性 三維虛擬展館在網(wǎng)頁中顯示可通過窗口互動控制環(huán)境，虛擬展館在互動平臺上縮放自如，瀏覽者可以用第一視角方式360°自由瀏覽，并根據(jù)個人喜好進(jìn)行環(huán)境控制及音樂控制，系統(tǒng)用數(shù)字化而非實(shí)體的方式實(shí)現(xiàn)展示、典藏、研究等功能。

2）互動性 三維虛擬展館的互動性主要體現(xiàn)在獲取信息和顯示展館2個方面。用數(shù)字化的形式實(shí)現(xiàn)展館的存儲，用戶可以通過導(dǎo)航準(zhǔn)確定位到相應(yīng)地區(qū)、與電腦交互獲取互動游戲、并獲取擴(kuò)展資訊等等。

3）擴(kuò)充性 筆者創(chuàng)建的三維模型庫里面存儲了大量的展品模型，展館的信息被完全真實(shí)的反映出來。三維虛擬展館將所有信息展現(xiàn)在網(wǎng)絡(luò)中，是信息及時更新的系統(tǒng)，系統(tǒng)的可擴(kuò)充性大大提高。展館也可根據(jù)需要隨時增添刪除展臺展品信息，可擴(kuò)充性非常強(qiáng)。

4）信息的豐富性 相較于實(shí)體展館相，三維虛擬展館可反映更多的的信息量，除了展示各種展臺展品外，還能與數(shù)據(jù)庫配合，實(shí)現(xiàn)海量信息的管理和使用。另外，三維虛擬展館中還可以表達(dá)文字、圖形 （像）、聲音、flash動畫等多種信息，展館的各類信息在系統(tǒng)中用各種不同形式被整合起來，使信息的負(fù)載量和獲取量極大提高。

5）便利性 與傳統(tǒng)的實(shí)體展館的建設(shè)初期相同，三維虛擬展館在制作的過程也需要規(guī)劃展館面積、形狀、采集信息、繪制平面圖等，但卻不需要用一磚一瓦建設(shè)展館的工作，因此成本相對較低、制作周期短。利用網(wǎng)絡(luò)，用戶在任何地方隨時可以進(jìn)入瀏覽，不用到目的地購票入場瀏覽。

6）節(jié)約資源、低碳環(huán)保 相對于實(shí)體展館展示時所需的高昂的場館租借費(fèi)、布展費(fèi)以及遠(yuǎn)距離的展品運(yùn)輸費(fèi)和風(fēng)險(xiǎn)和展館參觀者遺留的垃圾對環(huán)境造成的負(fù)擔(dān)等等，三維虛擬展館可大大節(jié)省展館構(gòu)建的費(fèi)用，節(jié)省了大量資源，真正的實(shí)現(xiàn)了環(huán)保節(jié)能、低碳生活。

2 系統(tǒng)開發(fā)流程

首先收集前期需要的數(shù)據(jù)資料，計(jì)劃展館的面積和展臺的分布；統(tǒng)計(jì)要創(chuàng)建的展臺、展品等模型的數(shù)量；決定要實(shí)現(xiàn)的功能。之后進(jìn)行三維模型的構(gòu)建，以及后期的音效設(shè)計(jì)、字幕說明、展示動作設(shè)計(jì)、交互動作設(shè)計(jì)，到最終的平臺發(fā)布。用VR－Platform三維互動平臺實(shí)現(xiàn)系統(tǒng)交互功能的開發(fā)。該平臺能與3DSMAX軟件進(jìn)行無縫結(jié)合，支持3DSMAX的粒子系統(tǒng)、渲染效果、關(guān)鍵幀動畫和變形動畫等多種功能［3］。系統(tǒng)流程圖如圖1所示。

3 三維場景的制作及模型的渲染

1）圖像采集 在建模之前，需要用高清數(shù)碼設(shè)備對展館、展臺及展品等實(shí)物的圖像資料進(jìn)行采集，主要包括三類：一是展館大體結(jié)構(gòu)、展臺的外觀，理清展館的布局；二是展臺上展品、裝飾品等的圖片，以便根據(jù)圖片構(gòu)建精細(xì)模型；三是實(shí)體紋理圖（包括展品、地面等等），主要采用特寫方式拍攝，盡量使視角端正清晰，用于模型的紋理貼圖。

2）幾何建模 目前，用于三維建模的軟件有很多種，筆者選用了操作相對靈活簡便的3DSMAX軟件進(jìn)行模型的創(chuàng)建。利用3dsMAX完成需要展示的產(chǎn)品的三維模型的構(gòu)建，在三維虛擬展館中共完成了696個模型的構(gòu)建，約16萬面。使用PhotoShop軟件處理采集回的圖像，制成紋理貼圖。在模型構(gòu)建完成后，為每個模型賦上貼圖紋理，力求與真實(shí)物體相符，因?yàn)槟Ｐ偷募y理和材質(zhì)不合適將會直接影響系統(tǒng)的效果。如果對物體的一些細(xì)節(jié)都通過細(xì)致建模的方法來實(shí)現(xiàn)，就會大大增加模型的面數(shù)，不見得有很好的真實(shí)感，也會減慢了加載速度，所以引入貼圖也可以有效地減少數(shù)據(jù)量。完成后的模型如圖2所示。

圖1 三維虛擬展館的構(gòu)建流程

圖2 完成后的模型效果圖

3）場景優(yōu)化 三維模型的構(gòu)造只是創(chuàng)建虛擬場景的第一步，考慮到虛擬現(xiàn)實(shí)系統(tǒng)要求實(shí)時展示和網(wǎng)絡(luò)帶寬的限制，虛擬展示系統(tǒng)的建模應(yīng)當(dāng)遵循一個原則：在能夠保證視覺效果的前提下，盡量采用比較簡單的模型［4］。因此模型優(yōu)化在場景創(chuàng)建時是重要的，建模時主要采用刪除隱藏面、減少分段數(shù)、使用紋理貼圖、使用Optimize修改器等方法。

4）貼圖烘焙 制作好了各個實(shí)體的三維模型后，需要給模型加上燈光、陰影以及反光等的效果，當(dāng)將模型導(dǎo)入到VR－Platform中時，光影效果不能被一同導(dǎo)入，所以需要將各種效果渲染到紋理以便永久保持，即烘焙，這樣看上去就有了真實(shí)的光影效果。選擇3dsMAX自帶的Mental ray渲染器，這種渲染器可以實(shí)現(xiàn)大型場景的烘焙，也可以快速渲染逼真的環(huán)境［5］。

4 展館功能的實(shí)現(xiàn)

在展館中所有展臺、展品以及各類裝飾物的三維模型都創(chuàng)建完成并將光影效果渲染到模型紋理上后，將所有模型統(tǒng)一導(dǎo)入到虛擬現(xiàn)實(shí)平臺VR－Platform中，加入碰撞檢測算法，貼近于物理碰撞，使人物不會從模型中穿過。接下來就是實(shí)現(xiàn)三維展館的一些基本功能。

1）選擇角色登陸展館 用戶進(jìn)入展館時可以選擇自己喜歡的角色登陸，用不同的視角參觀展館，增加漫游的趣味性。

要實(shí)現(xiàn)上述功能需要在虛擬現(xiàn)實(shí)平臺VR－Platform的高級界面中添加一個控件靜態(tài)圖片，為其附上一張?zhí)幚砗玫膱D片為背景，并設(shè)置其屬性，作為窗口底圖。然后在男士和女士圖形上分別添加一個圖片按鈕，并設(shè)置其貼圖使之成透明樣式，當(dāng)用戶登錄時，將其選擇的角色名保存在一個變量中，并在腳本編輯器中添加圖片按鈕的腳本，判斷變量的值。如果變量的值為“1”，設(shè)置控件靜態(tài)文本的文本內(nèi)容為：“您選擇了男士角色登錄”，然后切換到男士相機(jī)視角漫游展館；反之，設(shè)置控件靜態(tài)文本的文本內(nèi)容為：“您選擇了女士角色登錄”，然后切換到女士相機(jī)視角漫游展館。再添加一個圖片按鈕控件，設(shè)置文本內(nèi)容為“登錄”，在腳本編輯器中設(shè)置按鈕的腳本，隱藏登錄界面及登陸界面上的各個控件，播放事先錄制好的時間軸動畫表示將圖片隱藏的效果，顯示展館，打開用戶選擇的角色相機(jī)。

2）展館漫游 展館漫游是三維虛擬展館最基本的功能，也是虛擬展館的重要特征。下面簡要介紹其實(shí)現(xiàn)的方法。將制作好的三維模型統(tǒng)一導(dǎo)入到虛擬現(xiàn)實(shí)平臺VR－Platform中，細(xì)微調(diào)整模型的位置、大小，讓它們看上去更加一致和諧美觀。添加一些骨骼動畫，包括了登錄后引領(lǐng)用戶漫游的男士和女士。若用戶選擇女士角色登錄，則設(shè)置女士骨骼動畫模型的顯示隱藏屬性為顯示，用戶就可以開始漫游了。用戶可以用第一視角方式360°自由瀏覽。展館漫游截圖如圖3所示。

3）展區(qū)快速定位 在菜單的子菜單 【展區(qū)】下再添加一層子菜單，表示各個展區(qū)的名稱，點(diǎn)擊展區(qū)的按鈕，可以快速切換至相應(yīng)展臺的位置。下面簡單介紹其實(shí)現(xiàn)方法。

在 【展區(qū)】按鈕下添加9個圖片按鈕，分別賦上用Photoshop處理好的圖片，如新型材料、精細(xì)化工等。然后在展區(qū)的提示牌上架設(shè)定點(diǎn)相機(jī)，相機(jī)的名字對應(yīng)展區(qū)的名字。在腳本編輯器中編輯各個圖片按鈕的腳本語句，點(diǎn)擊按鈕，通過名稱切換相機(jī)，如“切換相機(jī) （通過名稱），電子信息展區(qū)，0”。句中“電子信息展區(qū)”為要切換到的展區(qū)名稱，0為重置相機(jī)。此時，便可快速定位到用戶想?yún)⒂^的展區(qū)處。

4）用戶留言 在高級界面中添加一個窗口，在窗口上添加控件，靜態(tài)圖片、靜態(tài)文本、輸入框與圖片按鈕。顯示留言界面時，用戶可以輸入對展館的看法，點(diǎn)擊 【提交】按鈕，將留言內(nèi)容存入數(shù)據(jù)庫；點(diǎn)擊 【取消】按鈕，取消留言，關(guān)閉留言對話框。留言及查看留言界面如圖4所示。

圖3 展館漫游截圖

圖4 留言及查看留言界面

5）音量控制 在高級界面中添加2個圖片按鈕控件 （一個用來開啟音樂，另一個用來關(guān)閉音樂），一個滑竿控件。點(diǎn)擊圖片按鈕開啟或關(guān)閉音樂創(chuàng)建打開或關(guān)閉音樂的函數(shù)。在腳本編輯器中編輯控制音量的函數(shù)，獲取到滑動條的值，將其賦給變量a，設(shè)置音量大小為a。拖動滑竿就可以自定義設(shè)置音量的大小。

5 發(fā)布系統(tǒng)

在VR－Platform中 【文件】下選擇發(fā)布為VRPIE文件，VRP－IE使用ActiveX技術(shù)，將VR－Platform作為控件嵌入到IE瀏覽器中，并能夠根據(jù)HTML所傳遞進(jìn)來的消息去解釋和執(zhí)行VRP的腳本函數(shù)和命令。這樣就可將制作好的三維虛擬展館發(fā)布到網(wǎng)絡(luò)上，以供瀏覽參觀。

6 結(jié) 語

基于Web的三維虛擬展館系統(tǒng)具有廣泛的應(yīng)用領(lǐng)域，隨著虛擬展館開發(fā)技術(shù)的成熟，其商業(yè)價值也將會得到進(jìn)一步的利用和開發(fā)。屆時，各類博物館的展品也將在網(wǎng)絡(luò)中呈現(xiàn)，各種大型的商品展覽會將在網(wǎng)絡(luò)上召開。人們足不出戶參觀展館、挑選商品的愿望將會實(shí)現(xiàn)。

［1］游珊珊.博覽建筑內(nèi)外環(huán)境設(shè)計(jì)研究 ［D］.武漢：華中科技大學(xué)，2011.

［2］孫元浩，龔震宇，俞建新，等 .虛擬展覽館的構(gòu)建方法 ［J］.系統(tǒng)仿真學(xué)報(bào)，2003，15（3）：322－325.

［3］韓樂，吳秀芹，趙旦春，等 .基于VRP的數(shù)字校園設(shè)計(jì)與實(shí)現(xiàn) ［J］.長江大學(xué)學(xué)報(bào) （自然科學(xué)版），2011，8（11）：86－88.

［4］孫染 .基于Internet的虛擬展示系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn) ［D］.北京：北京郵電大學(xué)，2011.

［5］紀(jì)菲 .網(wǎng)絡(luò)景觀電子地圖的設(shè)計(jì)與研發(fā) ［D］.青島：中國海洋大學(xué)，2009.