基于虛擬現實技術的商品展示平臺研究

李廣麗,張紅斌

(華東交通大學 1.信息工程學院;2.軟件學院,江西 南昌 330013)

虛擬現實(Virtual Reality,也稱VR)技術是融合了人工智能技術、多媒體技術、計算機圖形學技術和計算機網絡技術而發展起來的一種全新的計算機人機交互技術[1],用戶可以體驗由計算機生成的三維虛擬環境,并自然地與虛擬環境進行視覺、聽覺甚至是觸覺和味覺的實時交互,獲取與真實世界相似或相仿的操作體驗。

近年來,隨著Web的普及,電子商務也得到了飛速的發展,人們足不出戶就可以通過Web完成商品的瀏覽、選購、下訂單等電子交易。文中的虛擬展示平臺也是一個基于Web的電子商務系統,它融虛擬現實技術和電子商務技術于一體,在Web環境中為用戶提供多感知、深度沉浸感的人機交互界面,突出了產品的展示效果,加深用戶對產品的理性認識,為電子商務網站獲取更大的銷售回報創造基本條件。

1 相關技術介紹

1.1 3DMax介紹

虛擬展示平臺設計的基礎是三維模型的構建。由于Virtools沒有建模功能,故需要采用第三方的建模軟件來完成三維建模。3DMax是一款三維建模軟件,它已經成為游戲開發、電影電視、動畫制作等行業的必備工具軟件[2]。本文采用它來制作系統所需的三維模型,并保存為.nmo格式,方便在Virtools中導入,構建虛擬展示平臺的三維交互環境。

1.2 Virtools介紹

Virtools將三維建模工具創建的3D對象作為單獨的組件,分配獨立的制作任務[3]。在任務制作過程中,由于Virtools的架構十分開放,故它允許設計者使用BuildingBlocks(行為交互模塊,簡稱BB)來設計用戶與3D對象交互的行為腳本。設計者只要在圖形化交互界面上將BB賦予到3D對象或虛擬角色上,并通過流程圖方式決定BB中前后行為的處理順序,實現交互腳本的設計[4]。基于虛擬現實的商品展示平臺需借助Virtools來整合所有的三維模型,并完成最關鍵的行為交互設計。

2 系統設計

2.1 功能設計

基于虛擬現實的商品展示平臺是一個以展示商品為核心的Web服務平臺。Web用戶根據自己的偏好,觀察商品的三維模型外觀,并了解商品的主要性能參數,若要進一步熟知商品的主要功能,還可通過更復雜的虛擬交互體驗獲取[5]。因此,商品的三維建模力求逼真,而虛擬交互體驗則借助人的視覺或聽覺提供趣味性極強的在線商品操作,如“翻轉”、“打開”、“關閉”、“聽音樂”、“觀視頻”等操作。消費者足不出戶就可獲取對商品的真實感官,從而激發對商品采購的熱情。本系統以設計一個銷售電腦的網上門店為例。

考慮到電腦采購者的電腦知識水平參差不齊,故在電腦三維模型展示時,既要提供直觀、平民化的交互體驗,還需提供專業的電腦性能參數供專業的電腦使用者體驗。此外,要讓用戶充分地沉浸于虛擬現實場景中,并可自由漫游。故系統包括如下主要功能:

(1)設計一個虛擬的電腦銷售門店。該門店銷售的所有電腦都可通過虛擬環境進行展示,而用戶可與之進行交互,獲取與真實電腦銷售門店相仿的漫游感官。

(2)設計電腦三維模型。它是虛擬電腦銷售門店的核心元素。它的建模與貼圖要求十分細致,且必須加入人機交互。因此,電腦的三維建模將更加靈活細膩,外觀更加精細美觀。此外,在人機交互中加入視頻、聲音、動畫等感官刺激,為漫游者演示電腦的“視頻播放”、“圖像顯示”、“聲音播放”等功能,使漫游者可更加深入地認識電腦商品的性能。

(3)設計電腦銷售門店中的其它虛擬物體。包括桌子、椅子、展示臺等家具,豐富視覺感官和漫游體驗的真實感。

(4)設計場景中的燈光。攝影機的布置及數量要合理,以貼近人的真實感覺。

基于虛擬現實的商品展示平臺的總體架構如圖1所示。

圖1 三維虛擬展示平臺的總體架構圖

2.2 三維場景設計

系統需要進行建模的對象有虛擬門店的場景(包括墻、天花板、地面、展示臺、桌椅柜等)和虛擬電腦商品(包括電腦,電腦配件等)。系統采用3DMax7作為三維模型設計的工具。三維模型創建的流程[6]如下:

第1步:3D模型的生成,主要利用3DMax進行建模;

第2步:在3DMax中對模型賦材質與貼圖,需要利用PhotoShop修改和制作材質貼圖;第3步:改進設計出來的虛擬場景。

2.2.1 虛擬模型的三維設計

一般采用兩種方法來構建三維模型:基于模型的三維建模和基于圖像繪制的三維建模。設計人員可靈活選擇適合自己的建模方法[7]。以電腦商品中的“筆記本”為例,在建模時需要把它拆分成若干簡潔的模塊,然后分別建模每個模塊,最后再將模塊拼貼起來構成一個完整的筆記本三維模型。圖2是3D Max中筆記本電腦的三維建模,其它電腦的建模同理,不再贅述。

圖2 筆記本電腦的建模

圖3 貼圖后的筆記本電腦

2.2.2 材質與貼圖

模型建立完成之后就為模型賦予材質和貼圖[8]。材質的作用是形成物體的反射特性。一般使用3種顏色及對物體高光區的控制,就可構造出絕大部分的反射材質[9]。該材質簡單,但效果非常好。不同的虛擬對象有不同的賦予材質的方案。貼圖則是盡可能逼真地模擬物體表面的紋理,增加三維模型的復雜度,豐富其細節,使其能更加逼真、更加精細地再現實物。

本系統采用PhotoShop完成貼圖工作。Virtools中使用65536色或24位色的貼圖,且貼圖大小必須是2的次方,如64*64、512*512等,但不能超過512*512。貼圖最好是正方形,這樣可加快3D實時處理的速度[5]。貼圖使用的文件格式很多,如.jpg,.bmp等,但在同一個場景中最好使用同一種文件格式。可選擇有較高壓縮比的.jpg圖像貼圖。貼圖后的筆記本電腦如圖3所示。

3 人機交互控制腳本的設計

3.1 第一人稱相機的設計

第一人稱相機即從漫游者的角度來獲取對虛擬場景的認識,它包括前進、后推、上移、下移、俯視、仰視、左轉、右轉、物體滑動等漫游體驗。故需使用第一人稱相機做控制,且加入碰撞屬性,以增加交互的真實性,用戶漫游時會具有很強的切身觀察感。第一人稱相機的Building Blocks模塊設計如下:

(a)Set As Active Camera-Cameras/Montage/Set As Active Camera設置此相機為當前活動相機

(b)Switch On Key-Controllers/Keyboard/Switch On Key按鍵切換

(c)Translate-3D Transformations/Basic/Translate移動

(d)Rotate-3D Transformations/Basic/Rotate旋轉

(e)Object Slider-Collisions/3D Entity/Object Slider物體滑動

第一人稱相機的腳本圖如圖4。鍵盤控制相機移動,控制鍵分別為鍵盤上的↑、↓、←、→、Shift、Ctrl,它們的意義分別為鏡頭:前進、后退、左移、右移、上移、下移。每一次按鍵,移動單位為各個方向上的1單位距離,腳本實現如圖5。鍵盤控制相機旋轉,控制鍵分別為鍵盤上的G,V,C,B,F,H,它們的意義分別為鏡頭:俯視,仰視,左轉,右轉,左傾,右傾。每一次按鍵,移動單位為各個方向上的0.5弧度,腳本實現如圖6。對象碰撞設計:設定Camera的碰撞屬性Group Obstacles,Radius為碰撞半徑。

圖4 第一人稱相機的整體腳本

圖5 鍵盤控制相機鏡頭的移動

圖6 鍵盤控制相機鏡頭的旋轉

3.2 電腦商品的多方位展示設計

用戶在漫游過程中,可通過單擊電腦商品完成與電腦三維模型的交互。可對商品進行鍵盤的移動和旋轉展示,達到每個角度都能展示的目的,當再次單擊商品后,商品歸回原位,等待下次被用戶單擊拾取。具體程序流程如圖7所示。

圖7 電腦商品的多方位展示控制流程

電腦商品的Building Blocks模塊設計如下:

(a)Switch On Key-Controllers/Keyboard/Switch On Key按鍵切換

(b)Translate-3D Transformations/Basic/Translate移動

(c)Rotate-3D Transformations/Basic/Rotate旋轉

(d)Wait Message-Logics/Message/Wait Message等待消息

(e)Deactivate Script-Narratives/Script Management/Deactivate Script禁用腳本

(f)Activate Script-Narratives/Script Management/Activate Script激活腳本

(g)Set Quaternion Orientation-3D Transformations/Basic/Set Quaternion Orientation設置朝向

(h)Set Position-3D Transformations/Basic/Position設置位置

其按鍵切換、移動、旋轉等的腳本類似于第一人稱相機腳本,不再贅述。僅給出等待鼠標左擊恢復初始狀態的實現:商品接受鼠標左鍵點擊后,設置成它在三維場景里的初始坐標,同時設置它的四元參數朝向(初始朝向)。然后禁止移動和旋轉的進行,進而觸發腳本,返回初始處于等待被選取的狀態。設置如圖8所示。

圖8 等待鼠標左擊恢復初始狀態腳本

3.3 部分交互功能體驗

1)點擊按鈕播放聲音。腳本描述:通過觸發按鈕或者三維實體播放一段音樂。Building Blocks如下,腳本如圖9所示。

(a)Wave Player-Sounds/Basic/Wave Player聲音播放器

(b)Wait Message-Logics/Message/Wait Message等待消息

2)點擊按鈕播放電影片段。腳本描述:通過觸發按鈕或者三維實體播放一電影。Building Blocks如下,腳本同圖9,故省略。

(a)Move Player-Materials-Textures/Animation/Move Player影片播放器

(b)Wait Message-Logics/Message/Wait Message等待消息

3)筆記本電腦的翻開和閉合。腳本描述:單擊筆記本屏幕部分的虛擬實體,讓屏幕繞著中軸(參照物)轉動一個特定的角度,即完成閉合。翻開只需繞負方向的軸轉相同的角度即可。Building Blocks如下,腳本如圖10所示。

(a)Rotate Around-3D Transformations/Basic/Rotate Around圍繞旋轉

(b)Wait Message-Logics/Message/Wait Message等待消息

圖9 等待鼠標左擊播放音樂

圖10 筆記本電腦的蓋子翻開與閉合的腳本

4 系統實現

4.1 在Virtools中導入三維模型

運用3DMax的Explorer軟件將3DMax中構建的三維模型以.nmo的格式輸出。.nmo文件是Virtools默認的用于存儲漫游角色、三維場景以及三維模型等的文件格式,它可以被Virtools識別,以便文件導入。三維模型被默認導入到Virtools的資源庫中,當.nmo文件被導入之后,即可添加實現交互的腳本。

4.2 進入場景及選中商品

用戶成功登錄之后即進入三維虛擬場景,IE中的3D播放插件自動加載三維場景,載入電腦銷售門店的三維虛擬場景,如圖11所示。作為實驗,只在三維場景中放置了一臺筆記本電腦的樣品,若漫游用戶單擊該商品即選中該商品,如圖12所示。接著,漫游用戶就可以與該虛擬電腦完成多種不同的交互。

圖11 電腦銷售門店的虛擬場景主界

圖12 單擊選中一臺筆記本電腦

4.3 操作交互體驗

漫游用戶可以選擇從不同的角度或距離來觀察該商品,獲取對商品外觀的感性認識,如圖13所示。此外,漫游用戶還可以嘗試打開或關閉筆記本電腦,獲取對商品的操作體驗,如圖14所示。漫游用戶還可以選擇欣賞播放視頻、音樂等,獲取對商品功能的更深層次的認識。

圖13 任選角度和距離觀察商品

圖14 筆記本的閉合

4.4 系統發布及測試

借助Virtools把交互、特效、動畫、燈光等設計完成后,即可將作品發布。Virtools有兩種發布形式:Web網頁格式和exe格式。考慮在Web環境上應用本系統,故選擇將其打包成Web網頁格式。具體發布過程:利用Virtools中的Create Web Page命令把.cmo文件(Virtools默認保存的工程文件)直接發布成HTML的網頁格式并且附帶生成.vmo格式的文件。發布之后,作為瀏覽器客戶端還需要安裝Virtools的Web Player插件,保證虛擬現實場景的正常瀏覽,該插件可從Web免費獲取。

此外,對系統運行過程中的流暢性、運行時間進行了簡單的測試,測試的環境分單機測試和內部100M局域網測試。單機測試時建議CPU采用AMD 3200+或以上CPU,內存128MB以上,顯示器支持800*600或以上分辨率,16位高彩色,顯卡則要求64MB以上的獨立顯卡,最好支持Direct 3D或OpenGL圖形加速。表1是本系統在三臺不同配置的PC機上的單機測試情況。測試表明,單機環境下系統能正常運轉,系統加載速度基本可以接受,軟件運行的效果良好。

表1 系統在不同硬件環境下的測試

作為實驗,目前僅在局域網范圍內進行了網絡訪問可行性的測試,把生成的網頁放置在100M局域網內的一臺Web Server上,然后在其它客戶端機器通過IE訪問該虛擬現實平臺主頁,以進行測試。測試結果:場景加載時間較長,超過30秒,運行比較流暢,運行效果良好。

本軟件的開發為消費類電子商品的虛擬展示平臺的設計提供了良好的思路:首先,設計商品的3D模型,然后,運用Virtools為3D模型加入互動腳本,最后,把虛擬展示系統導出為Web網頁格式,在Web上發布,即可為Web用戶提供商品的三維虛擬交互體驗。

[1]陳定方,羅亞波,等.虛擬設計[M].北京:機械工業出版社,2007.

[2]王梅艷.虛擬現實技術的歷史與未來[J].中國現代教育裝備,2007(1):108-110.

[3]李昌國,朱福全,譚良,等.基于3D和Virtools技術的虛擬實驗開發方法研究[J].計算機工程與應用.2006(31):84-86.

[4]王龍江,荊旭,焦學健,等.基于虛擬現實技術的校園漫游系統[J].山東理工大學學報:自然科學版,2007,21(4):89-93.

[5]王方,王崢.3dsMax模型及動畫輸出為Virtools格式的方法[J].現代電影技術應用技術研究,2007(10):49-54.

[6]劉明昆.3維游戲設計師寶典——VIRTOOLS開發工具篇[M].成都:四川電子音像出版中心,2005:173-183.

[7]王煒,包衛東,張茂軍,等.虛擬仿真系統導論[M].北京:國防科技大學出版社,2006.

[8]劉曉艷,林琿,張宏.虛擬城市建設原理與方法[M].北京:科學出版社,2003:105-139.

[9]方小峰.基于虛擬現實的城市規劃三維仿真設計系統[J].計算機仿真,2007,24(3):230-234.