基于Unity 3D的絲綢之路虛擬學(xué)習(xí)系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)?

閆興亞 魏夢(mèng)婕 王馨梅

（西安郵電大學(xué)計(jì)算機(jī)學(xué)院 西安 710121）

1 引言

虛擬現(xiàn)實(shí)［1］（Virtual Reality，VR）在教育領(lǐng)域的應(yīng)用顛覆了傳統(tǒng)的教學(xué)方式，通過(guò)虛擬化教學(xué)環(huán)境，學(xué)習(xí)者可以通過(guò)一定的硬件設(shè)備與虛擬世界進(jìn)行互動(dòng)實(shí)現(xiàn)知識(shí)的學(xué)習(xí)［2］，解決傳統(tǒng)課堂中互動(dòng)性、情境性、沉浸性不強(qiáng)的問(wèn)題，在教學(xué)的實(shí)踐中具有廣闊的應(yīng)用前景。2003年美國(guó)林登實(shí)驗(yàn)室推出的Second Life（SL）項(xiàng)目和2009年澳大利亞和新西蘭合作成立的虛擬世界工作組等是典型代表。其中，SL項(xiàng)目提出要探索個(gè)體在虛擬世界獲得教育與成長(zhǎng)的可能，學(xué)生可以采用一個(gè)“化身”投身到虛擬世界的學(xué)習(xí)中去，其具體執(zhí)行過(guò)程與角色扮演游戲有些類似［3］。2011年以來(lái)，每年都會(huì)舉行關(guān)于虛擬現(xiàn)實(shí)技術(shù)的專業(yè)國(guó)際會(huì)議IEEE VR（IEEE Virtu?al Reality Conference），有效促進(jìn)了領(lǐng)域內(nèi)學(xué)者之間的交流互動(dòng)。2017年5月10日，IEEE（電氣和電子工程師協(xié)會(huì)）與IEEE標(biāo)準(zhǔn)協(xié)會(huì)（IEEE Standards As?socaition）宣布了針對(duì)虛擬現(xiàn)實(shí)和增強(qiáng)現(xiàn)實(shí)的8個(gè)IEEE標(biāo)準(zhǔn)項(xiàng)目，其中包括沉浸式用戶界面、真實(shí)世界的虛擬對(duì)象映射、虛擬對(duì)象與現(xiàn)實(shí)世界之間的互操作性等多個(gè)領(lǐng)域。同年，虛擬現(xiàn)實(shí)作為情景化學(xué)習(xí)的關(guān)鍵技術(shù)成為《2017新媒體聯(lián)盟中國(guó)高等教育技術(shù)展望：地平線項(xiàng)目區(qū)域報(bào)告》十二項(xiàng)教育技術(shù)的重要發(fā)展之一［4］。

虛擬現(xiàn)實(shí)學(xué)習(xí)能夠提高學(xué)生對(duì)知識(shí)的掌控力。Cai，Wang和Chiang設(shè)計(jì)了幾個(gè)面向初中生的關(guān)于化學(xué)物質(zhì)結(jié)構(gòu)認(rèn)識(shí)的虛擬融入操作實(shí)驗(yàn)，實(shí)驗(yàn)中，學(xué)生可以采用自然交互方式對(duì)虛擬出來(lái)的微觀世界中的分子、原子進(jìn)行操作、組合和創(chuàng)作［5］。虛擬現(xiàn)實(shí)學(xué)習(xí)環(huán)境還被應(yīng)用在具體操作技能的培訓(xùn)課程中。Y Eugenia、Νikiteas Nikolaos、P Despina等通過(guò)在腹腔鏡手術(shù)中使用虛擬現(xiàn)實(shí)模擬器構(gòu)建訓(xùn)練環(huán)境，能夠訓(xùn)練基礎(chǔ)外科手術(shù)技能，提供改進(jìn)腹腔鏡手術(shù)性能的替代手段［6］。虛擬現(xiàn)實(shí)學(xué)習(xí)環(huán)境可以模擬危險(xiǎn)性較強(qiáng)的現(xiàn)實(shí)環(huán)境，在避免傷害的情況下完成教學(xué)任務(wù)。Buono、Cortese和Lionett等設(shè)計(jì)的虛擬消防逃生系統(tǒng)，實(shí)驗(yàn)參與者對(duì)于滅火逃生相關(guān)概念的掌握以及對(duì)滅火器的使用、成功逃脫至集合點(diǎn)的能力均較佳。

基于此，本文提出基于Unity 3D的絲綢之路虛擬學(xué)習(xí)系統(tǒng)。Unity3D是一個(gè)對(duì)編輯器、地形編輯、著色器、腳本等特性全面整合的專業(yè)游戲引擎［7］，可發(fā)布系統(tǒng)至Windows、Mac和Android等平臺(tái)。絲綢之路虛擬學(xué)習(xí)系統(tǒng)以Unity3D為開(kāi)發(fā)平臺(tái)，以3Dmax，Maya，Photoshop等軟件為輔助工具，搭建絲綢之路三維教學(xué)場(chǎng)景。系統(tǒng)搭建過(guò)程中實(shí)現(xiàn)了包括LOD、碰撞檢測(cè)、自主尋路、基于NGUI的UI制作等技術(shù)，采用C#語(yǔ)言實(shí)現(xiàn)各模塊之間的功能交互，創(chuàng)建了一個(gè)集專業(yè)性，沉浸感，交互性，趣味性等特點(diǎn)的絲綢之路虛擬學(xué)習(xí)系統(tǒng)。與傳統(tǒng)學(xué)習(xí)方式不同，學(xué)習(xí)者通過(guò)與虛擬環(huán)境中物體進(jìn)行動(dòng)態(tài)交互，實(shí)現(xiàn)對(duì)知識(shí)的掌握與理解。實(shí)踐結(jié)果表明，基于Unity3D的絲綢之路虛擬學(xué)習(xí)系統(tǒng)對(duì)于提高學(xué)習(xí)者的積極性有良好的作用。

2 系統(tǒng)總體構(gòu)架模型

基于軟件工程的思想，結(jié)合絲綢之路教學(xué)理念，絲綢之路虛擬教學(xué)系統(tǒng)的開(kāi)發(fā)主要分為兩個(gè)階段：第一階段是系統(tǒng)前期的分析策劃與素材的收集、整理與制作；第二階段是在Unity3D中進(jìn)行場(chǎng)景的搭建以及和模塊之間交互功能的實(shí)現(xiàn)。其流程圖如圖1所示。首先，根據(jù)系統(tǒng)的實(shí)際需求確定各模塊的功能；其次，搜集有關(guān)絲綢之路的相關(guān)資料信息，確保系統(tǒng)中的知識(shí)教學(xué)與事實(shí)相符。搜集的資料包括，絲綢之路的地圖，以及絲綢之路主要經(jīng)過(guò)城市的人文和地理信息等等；再次，利用3Dmax或Maya等建模軟件進(jìn)行三維建模，相關(guān)場(chǎng)景平面圖設(shè)計(jì)，將制作好的模型文件以FBX格式導(dǎo)出。最后將三維模型導(dǎo)入U(xiǎn)nity工程中進(jìn)行系統(tǒng)的第二階段開(kāi)發(fā)。第二階段的開(kāi)發(fā)包括兩方面的內(nèi)容：第一，場(chǎng)景的搭建，其中主要包括絲綢之路主要涉及城市的分布、周圍環(huán)境、場(chǎng)景烘焙、碰撞檢測(cè)等。第二，實(shí)現(xiàn)各模塊功能的交互，這里采用C#語(yǔ)言進(jìn)行模塊功能的開(kāi)發(fā)，完成絲綢之路虛擬學(xué)習(xí)系統(tǒng)。

圖1 系統(tǒng)搭建流程圖

3 系統(tǒng)實(shí)現(xiàn)的關(guān)鍵技術(shù)

3.1 基于邊折疊的LOD算法

LOD［8］（level of detail）細(xì)節(jié)層次模型，是一種保證繪制實(shí)時(shí)性的經(jīng)典算法，廣泛應(yīng)用在場(chǎng)景可視化與視野仿真領(lǐng)域中?；舅枷胧牵簽槊恳粋€(gè)原始多面體模型生成具有不同復(fù)雜度的多個(gè)版本［9］，在場(chǎng)景渲染過(guò)程中，根據(jù)物體離攝像機(jī)的距離來(lái)采用適當(dāng)?shù)哪Ｐ蛠?lái)表達(dá)物體。如果模型遠(yuǎn)離攝像機(jī)，則選擇較粗糙的LOD模型繪制，如果模型離攝像機(jī)較近則選擇精細(xì)的LOD模型進(jìn)行繪制。本文采用的是基于邊折疊的LOD算法，具體方法如圖2所示。

圖2 邊折疊法

邊折疊算法的步驟可以表示為

1）刪除所有同時(shí)包含頂點(diǎn)1和頂點(diǎn)2的三角形；

2）刪除與頂點(diǎn)1相關(guān)的三角形，用頂點(diǎn)2來(lái)代替頂點(diǎn)1；

3）刪除頂點(diǎn)1；

完成上述步驟，便可以得到簡(jiǎn)化后的圖1。重復(fù)上述步驟最終可以得到圖4。一般的，每此簡(jiǎn)化會(huì)去除一個(gè)頂點(diǎn)，兩個(gè)面和三條邊。

基于邊折疊的LOD算法可以通過(guò)減少地形繪制所需的三角形個(gè)數(shù)生成連續(xù)的LOD模型，并且保留了模型的幾何信息以及紋理、拓?fù)涞戎匾卣餍畔?。該算法是根?jù)攝像機(jī)離模型的距離來(lái)選擇適當(dāng)?shù)哪Ｐ?，在不影響畫面視覺(jué)效果的前提下，通過(guò)減少場(chǎng)景的幾何復(fù)雜度，提高圖像渲染的速度，從而解決了系統(tǒng)運(yùn)行流暢度的問(wèn)題［10］。

3.2 射線碰撞檢測(cè)

虛擬環(huán)境中碰撞檢測(cè)的目標(biāo)是如何在實(shí)時(shí)交互的需求下完成對(duì)復(fù)雜對(duì)象的碰撞檢測(cè)［11］。例如：當(dāng)移動(dòng)物體遇到障礙物，如果沒(méi)有設(shè)計(jì)碰撞檢測(cè)，則移動(dòng)物會(huì)穿過(guò)障礙物，從而產(chǎn)生失真現(xiàn)象［12］。一般的碰撞檢測(cè)是通過(guò)檢測(cè)兩個(gè)實(shí)體所占的幾何空間是否相交來(lái)判斷是否發(fā)生了碰撞，無(wú)法確定碰撞的具體位置，本文采用的射線碰撞檢測(cè)是檢測(cè)虛擬世界中發(fā)出的一條射線與一個(gè)平面是否相交的問(wèn)題［13］，因此準(zhǔn)確的碰撞需要的是精確計(jì)算出射線與物體表面的交點(diǎn)，即碰撞點(diǎn)位置。

假設(shè)射線公式是由式（1）所示，且空間中存在一個(gè)平面，指定p1為該面上的一點(diǎn)，以矢量N表示為該面的法矢量，以這兩個(gè)矢量既能確定出這個(gè)平面，由式（2）表示出任意平面公式為

式中，P、P0、a均為三維矢量，其中P0表示為該射線的起點(diǎn)，P表示為射線上任意一點(diǎn)，a表示該射線的方向，t屬于0，正無(wú)窮。當(dāng)t=0時(shí)，P為七點(diǎn)P0，t為其他數(shù)值時(shí)，P則為射線上某一點(diǎn)，此時(shí)t則表示為該起點(diǎn)與該點(diǎn)之間的距離。

式中d為坐標(biāo)系原點(diǎn)與平面距離。

假設(shè)射線與平面相較于一點(diǎn)P，則P必定為式（1）與式（2）的公共解，反之由以上二式解方程組得：

以式（3）帶入式（1）即解出射線與平面的碰撞點(diǎn)位置。

3.3 自動(dòng)尋路

Unity自從3.5版本之后增加了NavMesh尋路功能，但是由于不是自帶的功能，所以需要設(shè)定網(wǎng)格和烘焙過(guò)程［14］。用戶首先編輯好地形場(chǎng)景，然后將場(chǎng)景中的靜態(tài)物體設(shè)置為Navigation Static物體，之后點(diǎn)擊Bake進(jìn)行導(dǎo)航烘焙，Unity將根據(jù)已經(jīng)烘焙的物體在游戲三維坐標(biāo)中Y軸的正向進(jìn)行網(wǎng)格節(jié)點(diǎn)計(jì)算，從而形成一張?jiān)谟螒驁?chǎng)景中的淡藍(lán)色網(wǎng)格節(jié)點(diǎn)導(dǎo)航地圖。地圖形成后，給需要被導(dǎo)航的游戲?qū)ο蠹由螻avMeshAgent組件，這樣游戲?qū)ο蟊憧衫@開(kāi)障礙物并沿著最短路徑到達(dá)目的點(diǎn)［15］。其主要代碼如下所示：

Private NavMeshAgent agent；

Viod Star（）

｛

//獲取組件

agent=GetComponent＜NavMeshAent＞（）

｝

void Update（）

｛

if（Input.GetMouseButtonDown（0））

｛

//攝像機(jī)到點(diǎn)位置的射線

Ray ray=Camrea.main.ScreenPointToRay（Input.mousePosition）；

RaycastHit rayhit；

if（Physics.Raycast（ray，out rayhit））

｛

//判斷點(diǎn)擊的是否是地形

if（！rayhit.collider.name.Equals（“Terrain”））

｛

return；

｝

//點(diǎn)擊位置坐標(biāo)

Vector3 point=rayhit.point；

//轉(zhuǎn)向

transform.LookAt（new Vector3（point.x，transform.posi?tion.y ，point.z））；

//設(shè)置尋路的目標(biāo)點(diǎn)

Agent.SetDestination（point）；

｝

｝

｝

3.4 基于NGUI的UI制作

用戶界面（User Interface，UI）是任何系統(tǒng)都必不可少的一部分，好的UI設(shè)計(jì)應(yīng)該能貫穿整個(gè)產(chǎn)品開(kāi)發(fā)流程，而非單純的圖形界面設(shè)計(jì)，并且可以將系統(tǒng)功能邏輯分散化，不用關(guān)注跳轉(zhuǎn)和顯示關(guān)閉等細(xì)節(jié)問(wèn)題，更好地展示系統(tǒng)本身的功能效果［16］。絲綢之路虛擬學(xué)習(xí)系統(tǒng)的界面設(shè)計(jì)采用的NGUI提供的界面工具來(lái)完成UI界面的制作。NGUI（Next-Gen UI）是使用C#語(yǔ)言編寫的一個(gè)Unity插件。該插件嚴(yán)格遵循“KISS 原則”［17］，即 Keep It Simple，Stupid，指的是UI設(shè)計(jì)應(yīng)當(dāng)注重簡(jiǎn)約。它將各個(gè)功能都封裝成了腳本，并且將常用的一些組件做成了預(yù)設(shè)物，它可以在編輯狀態(tài)下來(lái)任意調(diào)整位置及大小，還可以添加一些UI特效。在本系統(tǒng)中，利用NGUI插件制作了系統(tǒng)地圖導(dǎo)航模型，系統(tǒng)菜單欄、按鈕、工具箱、答題面板等界面。同時(shí)NGUI的Anchor能夠使各個(gè)UI元素具有屏幕自適應(yīng)功能，使系統(tǒng)能夠適應(yīng)不同分辨率的屏幕。

4 系統(tǒng)效果展示

基于Unity 3D的絲綢之路虛擬學(xué)習(xí)系統(tǒng)包括總路線圖、城市漫游、城市概況認(rèn)知、在線考評(píng)、資源庫(kù)五個(gè)模塊。系統(tǒng)效果及部分功能模塊截圖如圖3～5所示。

圖3 總路線圖

圖4 城市漫游

圖5 城市概況

其中，總路線圖是古絲綢之路所經(jīng)城市的一個(gè)三維展示，用戶可以看到古絲綢之路的全貌，并且可以點(diǎn)擊地圖上分布的城市名進(jìn)行城市漫游。城市漫游是用戶對(duì)城市進(jìn)行第一視角的漫游，通過(guò)完成系統(tǒng)設(shè)置在建筑物中的任務(wù)，獲得相應(yīng)的道具，打開(kāi)通關(guān)盒子才能進(jìn)行下一個(gè)城市的漫游。該模塊采用任務(wù)激勵(lì)，使得系統(tǒng)具有一定的娛樂(lè)性，提高用戶的學(xué)習(xí)興趣。城市概況認(rèn)知是絲綢之路主要城市的簡(jiǎn)介，在系統(tǒng)的右下角配以語(yǔ)音、文字解說(shuō)，該模塊使用戶可以快速地了解城市的人文地理信息。在線考評(píng)是進(jìn)入系統(tǒng)后的后臺(tái)考評(píng)系統(tǒng)，是對(duì)用戶關(guān)于絲綢之路的理論知識(shí)進(jìn)行一個(gè)全面的測(cè)評(píng)。資源庫(kù)是是對(duì)絲綢之路主要城市風(fēng)土、特產(chǎn)以及城市主要建筑物的一個(gè)視頻介紹。

5 結(jié)語(yǔ)

本文對(duì)基于Unity 3D的絲綢之路虛擬學(xué)習(xí)系統(tǒng)進(jìn)行了詳細(xì)的研究，文中重點(diǎn)討論了虛擬學(xué)習(xí)系統(tǒng)的設(shè)計(jì)以及涉及到的關(guān)鍵技術(shù)，系統(tǒng)中引進(jìn)了任務(wù)激勵(lì)游戲機(jī)制，在發(fā)揮虛擬現(xiàn)實(shí)技術(shù)優(yōu)勢(shì)的同時(shí)，實(shí)現(xiàn)了學(xué)習(xí)者對(duì)所學(xué)知識(shí)積極主動(dòng)的探索。虛擬現(xiàn)實(shí)技術(shù)是信息技術(shù)進(jìn)步的重要成果，信息技術(shù)只有被接受與持續(xù)使用的時(shí)候，其價(jià)值才會(huì)真正發(fā)揮出來(lái)。未來(lái)虛擬學(xué)習(xí)必將成為教育發(fā)展的時(shí)代趨勢(shì)，并將不斷出現(xiàn)在多個(gè)領(lǐng)域。本系統(tǒng)的開(kāi)發(fā)將會(huì)為其他領(lǐng)域的虛擬培訓(xùn)以及虛擬現(xiàn)實(shí)項(xiàng)目的開(kāi)發(fā)提供一定的參考價(jià)值，同時(shí)具備推廣應(yīng)用價(jià)值。