基于VR技術(shù)的三維校園漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

李滿 陳展鵬

摘? 要：基于VR技術(shù)的三維校園漫游系統(tǒng)，是根據(jù)VR技術(shù)的三大特征——沉浸感、交互性和構(gòu)想性去設(shè)計(jì)實(shí)現(xiàn)的，其中使用到三維建模軟件3DS MAX、功能實(shí)現(xiàn)軟件Unity3D 5.5.3f以及SteamVR插件和VRTK插件。本文主要實(shí)現(xiàn)漫游功能、UI交互功能。借助于虛擬現(xiàn)實(shí)設(shè)備，能夠做到足不出戶就能觀察到真實(shí)的虛擬校園。

關(guān)鍵詞：校園漫游;虛擬現(xiàn)實(shí);Unity3D;C#

中圖分類號：TP391.41? ? ? ?文獻(xiàn)標(biāo)識碼：A 文章編號：2096-4706（2019）19-0100-04

Abstract：The design and implementation of 3D campus roaming system based on VR technology is designed according to the three characteristics of VR technology-immersion，interactivity and conception，including 3D modeling software 3DS MAX，function realization software Unity 3D 5.5.3f，as well as the steam SteamVR plugin and the VRTK plugin. This topic mainly implements roaming functions and UI interaction functions. With the help of virtual reality devices，real virtual campuses can be observed without leaving home.

Keywords：campus roaming system;VR;Unity3D;C#

0? 引? 言

隨著科技的進(jìn)步，VR（Virtual Reality，虛擬現(xiàn)實(shí)）技術(shù)和設(shè)備開始走向大眾，據(jù)IDC（國際數(shù)據(jù)公司）近期發(fā)布的《中國VR/AR市場季度跟蹤報(bào)告》顯示，2019年第一季度中國頭顯設(shè)備出貨量接近27.5萬臺，同比增長15.1%[1]。VR設(shè)備的俏銷說明VR的應(yīng)用越來越廣泛，如在教育、醫(yī)療、旅游、游戲及建筑行業(yè)的應(yīng)用如日中天，各個(gè)大學(xué)也紛紛把校園以VR形式搬到線上，達(dá)到宣傳學(xué)校、提高學(xué)校社會知名度的目的。

在國內(nèi)，BAT（B——百度，A——阿里巴巴，T——騰訊）三巨頭都在投資虛擬現(xiàn)實(shí)。僅在中國網(wǎng)民中，BAT就已經(jīng)擁有了非常龐大的虛擬現(xiàn)實(shí)內(nèi)容受眾群體。如：

百度在2017年提出建造世界上最大的中國語言VR服務(wù);阿里巴巴建設(shè)了VR購物體驗(yàn)系統(tǒng)，推出VR商場——Buy+;2015年，騰訊公布了Tencent VR SDK及開發(fā)者支持計(jì)劃，并且系統(tǒng)闡釋了對虛擬現(xiàn)實(shí)領(lǐng)域硬件和平臺兩大部分的規(guī)劃。

在國內(nèi)不少高校已經(jīng)建立起VR實(shí)驗(yàn)室，開展虛擬現(xiàn)實(shí)相關(guān)的教學(xué)活動和研究活動。并且把校園以VR的形式搬到線上，達(dá)到更直觀地宣傳學(xué)校的目的[2]。

未來，5G技術(shù)帶來的高帶寬和低時(shí)延等優(yōu)勢，將帶動VR應(yīng)用市場朝著更高精度、更強(qiáng)專業(yè)性的行業(yè)領(lǐng)域深入發(fā)展。IDC中國終端系統(tǒng)研究部市場分析師譚睿指出：“在經(jīng)歷了一段技術(shù)與生態(tài)的沉淀期后，國內(nèi)VR/AR行業(yè)將伴隨著迭代產(chǎn)品進(jìn)入市場從而釋放增長潛能。VR/AR產(chǎn)業(yè)作為5G技術(shù)重要的落地應(yīng)用場景之一，深度應(yīng)用云計(jì)算、語音交互等技術(shù)，建立先發(fā)優(yōu)勢。”[3]

1? 校園漫游系統(tǒng)總體設(shè)計(jì)

本文以廣州工商學(xué)院三水校區(qū)為藍(lán)本，設(shè)計(jì)完成校園的漫游系統(tǒng)。主要解決模型、移動、場景切換、UI交互以及打包發(fā)布五個(gè)問題，如圖1所示。模型由美工、美術(shù)人員進(jìn)行搭建。移動和UI交互需要用到SteamVR和VRTK（Virtual Reality Toolkit）這兩個(gè)插件去實(shí)現(xiàn)，場景切換需要載入和UI交互配合使用。打包發(fā)布用軟件的打包工具。

1.1? 用戶漫游移動

在SteamVR插件的[CameraRig]上添加VRTK的VRTK_HeightAdjustTeleport腳本實(shí)現(xiàn)虛擬現(xiàn)實(shí)的基本遠(yuǎn)程傳送，通過調(diào)整這個(gè)腳本的參數(shù)可以調(diào)整是否使用重力、速度等的參數(shù)。

在SteamVR的[CameraRig]下的兩個(gè)Controller上都掛載VRTK的VRTK_Tracked Object和VRTK_Simple Pointer來實(shí)現(xiàn)在手柄上添加一條射線，方便用戶知道自己在往哪個(gè)方向傳送和知道哪些地方能夠過去、哪些地方不能過去。再配合VRTK_ControllerEvents等腳本實(shí)現(xiàn)手柄射線控制用戶移動[4]。

1.2? 場景切換

Unity3D引擎由于場景物體過多會導(dǎo)致過度占用內(nèi)存，所以一個(gè)場景之中一般不能存在過多的物體，否則會占用大量內(nèi)存，影響用戶體驗(yàn)。這個(gè)時(shí)候就需要使用場景切換。場景切換有四種方法。

第一種是同步載入，代碼是Application.LoadLevel（）;第二種是異步載入，代碼是Application.LoadLevelAsync（）;第三種是同步附加式載入，代碼是Application.LoadLevel Addictive（）;第四種是異步附加式載入，代碼是Application.LoadLevelAddictiveAsync（）。

使用同步載入的時(shí)候，在A場景切到B場景時(shí)，Unity3D會銷毀A場景顯示B場景，但是如果B場景比較大的時(shí)候會感到異常的卡頓。

使用異步載入的時(shí)候，載入場景是在后臺進(jìn)行的，所以在切換場景的時(shí)候不會卡頓，適合載入大型場景的時(shí)候使用。

使用同步附加式載入的時(shí)候，在載入結(jié)束后場景A和場景B將會同一時(shí)間存在，比較適合地圖比較大的時(shí)候使用。

異步附加式載入跟同步附加式載入的區(qū)別依舊是一個(gè)在主線程運(yùn)行一個(gè)在后臺線程異步進(jìn)行。

1.3? UI交互

在Unity3D中有兩種方法制作UI交互面板。一個(gè)是NGUI插件，另一個(gè)是Unity自帶的UGUI。NGUI和UGUI都是出自同一個(gè)制作組，前者是在Unity3D沒有UI制作面板的時(shí)候由NGUI的制作組制作發(fā)布供給用戶使用;后者則是在Unity3D 5.X版本之后Unity的公司招募這個(gè)制作組制作的。

1.3.1? 使用NGUI進(jìn)行制作UI交互面板

在創(chuàng)建NGUI的時(shí)候，系統(tǒng)會自動檢測有沒有UI Root和NGUI的Camera，如果沒有，會自動生成UI Root和Camera，所有UI空間都必須放在UI Root中。其中，Sprite是圖片，使用Sprite的時(shí)候需要把圖片打包成圖集，使用NGUI的Atlas Maker把圖片打包，然后使用圖片，通過調(diào)整參數(shù)調(diào)整圖片大小等。Label是文字，值得注意的是NGUI自帶的字體不支持中文，需要使用Unity3D里的字體才能支持中文。Texture也是圖片，它與Sprite的區(qū)別是不用把圖片打包成圖集，一般用于制作背景。Prefab Toolbar把里面需要的按鈕放上去就能直接使用，按鈕背景可以根據(jù)自己喜好去修改[5]。

1.3.2? 使用UGUI進(jìn)行制作UI交互面板

因?yàn)槭浅鲎酝粋€(gè)制作組，跟NGUI部分原理相同。UGUI使用的時(shí)候需要添加一個(gè)Canvas（畫布），用作于承載體，所以UGUI的控件也必須放在Canvas里。Panel相當(dāng)于NGUI的Texture，image相當(dāng)于NGUI的Sprite，Text相當(dāng)于NGUI的Label。功能一樣，但是，使用image的時(shí)候，圖片不需要打包成圖集，可以直接放進(jìn)去使用。功能按鈕控件的使用方法和NGUI基本相同，導(dǎo)入就能直接使用。

1.4? Unity的打包與發(fā)布

在制作好之后要把自己制作好的東西打包發(fā)布成exe、apk等格式的文件供用戶使用，因?yàn)檫@個(gè)三維校園漫游系統(tǒng)是在PC端運(yùn)行的，所以需要將文件打包成exe格式發(fā)布供用戶下載使用。

2? 三維校園漫游系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

2.1? 前期準(zhǔn)備

在制作三維校園漫游系統(tǒng)之前，首先要進(jìn)行拍攝，掌握學(xué)校每一棟建筑的特點(diǎn)，這對于建模和場景搭建都有非常深遠(yuǎn)的影響。以學(xué)生宿舍為例，學(xué)生宿舍結(jié)構(gòu)都是一樣的，只不過是位置和房間的數(shù)量不同，掌握好這些基本條件，很快就能將大量宿舍的模型創(chuàng)建出來。同時(shí)還需要準(zhǔn)備一張學(xué)校的俯視圖和施工圖，這樣方便場景搭建，能夠很好地確定每個(gè)模型在場景中的具體位置。

2.2? 場景搭建

場景搭建是至關(guān)重要的一步，如果沒搭建好場景就開始制作，會導(dǎo)致一些功能的實(shí)現(xiàn)出現(xiàn)bug。在搭建場景時(shí)，需要注意比例。在Unity3D里面所使用的單位是米，所以在建模和搭建場景要使用米來做單位，防止因?yàn)閱挝槐壤粚Χ鴮?dǎo)致出現(xiàn)模型失調(diào)等bug。在制作初期通常使用白模或者是低精度模去搭建場景，以便保持進(jìn)度一致，在完成低模場景搭建后再進(jìn)行功能實(shí)現(xiàn)，在后期將白模或者低精度模替換成有貼圖的高精度模型，并不會影響到功能的實(shí)現(xiàn)。圖2是制作三維校園漫游系統(tǒng)使用白模搭建的校門口場景。在使用虛擬現(xiàn)實(shí)設(shè)備調(diào)試時(shí)，由于純白色的模型顯示會對眼睛造成傷害，要把模型加上顏色，如紫色，方便觀察以及后期的調(diào)試。

在搭建場景時(shí)，使用地形工具創(chuàng)建河流和湖泊，首先要先將地形抬高，再按住Shift+鼠標(biāo)左鍵，對地形進(jìn)行降低處理，再在降低的地形上放置Unity3D官方提供的水材質(zhì)，把水鋪上去就能完成河和人工湖了。如圖3所示為校園內(nèi)河流添加水面后的效果。

2.3? 漫游系統(tǒng)的實(shí)現(xiàn)

漫游系統(tǒng)的實(shí)現(xiàn)主要是靠SteamVR插件和VRTK這兩個(gè)插件共同完成，SteamVR插件主要是使用[CameraRig]預(yù)制體。這個(gè)預(yù)制體是已經(jīng)自帶相機(jī)的，所以需要?jiǎng)h除或者隱藏場景中的主要攝像機(jī)，以獲取SteamVR的攝像機(jī)。[CameraRig]下是帶有兩個(gè)控制手柄的，這個(gè)控制手柄只有在運(yùn)行的時(shí)候才會顯示出來。這兩個(gè)手柄都已經(jīng)是有對應(yīng)的腳本功能的，使用時(shí)只要獲取按鈕就能實(shí)現(xiàn)交互功能。使用SteamVR_TrackedObject trackdeObjec;這句代碼能夠獲取到SteamVR手柄[6]。

在開始前輸入這一段代碼能夠獲取到手柄上的組件。

void Awake（）

{

//獲取手柄上的這個(gè)組件

trackdeObjec = GetComponent<SteamVR_TrackedObject>（）;

}

在獲取完手柄組件之后，在FixedUpdate中獲取手柄的輸入“var device = SteamVR_Controller.Input（（int）trackdeObjec. index）;”，然后使用if（）條件語句來設(shè)置事件，例如下面這一句是當(dāng)觸碰到扳機(jī)鍵后，控制臺會打印出“觸碰扳機(jī)鍵，持續(xù)中…”：

if （device.GetTouch（SteamVR_Controller.ButtonMask.Trigger））

{

Debug.Log（"觸碰扳機(jī)鍵，持續(xù)中…"）;

}

這就是SteamVR手柄按鈕的獲取以及功能的實(shí)現(xiàn)。

在獲取SteamVR手柄按鈕之后，就需要實(shí)現(xiàn)漫游功能，而VRTK這個(gè)插件的腳本正好能夠?qū)崿F(xiàn)漫游功能。VRTK_HeightAdjustTeleport這個(gè)腳本能實(shí)現(xiàn)基本的傳送功能，把它掛載到SteamVR的攝像機(jī)上，但是它必須要使用VRTK的世界坐標(biāo)。然后使用VRTK_Tracked Object、VRTK_Simple Pointer、VRTK_ControllerEvents等腳本，掛載在SteamVR手柄上，能實(shí)現(xiàn)可視化傳送目標(biāo)，能夠根據(jù)射線顏色和目標(biāo)點(diǎn)來確定傳送的地方。

if （pointer.gameObject.activeSelf）

{

Ray pointerRaycast = new Ray（transform.position， transform.forward）;

RaycastHit pointerCollidedWith;

var rayHit = Physics.Raycast （pointerRaycast， out pointerCollidedWith， pointerLength，～layersToIgnore）;

var pointerBeamLength = GetPointerBeam Length（rayHit， pointerCollidedWith）;

SetPointerTransform（pointerBeamLength， pointerThickness）;

}

這一段代碼實(shí)現(xiàn)可視化傳送，在手柄上發(fā)射一條射線，射線擊中的地方就是傳送的目的地。但是要注意，因?yàn)橛行┑胤绞遣荒苓^去的，所以要給物體加上碰撞體的組件，否則會出現(xiàn)穿模。

在添加碰撞體組件時(shí)要注意包裹住整個(gè)模型，以免出現(xiàn)因?yàn)椴糠执┠６a(chǎn)生bug。添加完碰撞體組件后，有阻擋的地方射線會變成紅色，用戶就無法傳送到紅色的地方。

2.4? 場景跳轉(zhuǎn)的實(shí)現(xiàn)

實(shí)現(xiàn)場景跳轉(zhuǎn)需要使用UI交互，UI交互是用戶體驗(yàn)最重要的環(huán)節(jié)。在這個(gè)三維校園漫游系統(tǒng)里面，選擇使用異步載入的方式，以防止部分用戶因設(shè)備問題導(dǎo)致加載卡頓。異步載入使用SceneManager.LoadSceneAsync（）方法進(jìn)行載入場景。首先是在場景A里面創(chuàng)建一個(gè)Canvas，然后在Canvas里面創(chuàng)建一個(gè)Button，新建一個(gè)腳本，用于實(shí)現(xiàn)跳轉(zhuǎn)加載場景，因?yàn)榧虞d場景里面就只有一張圖片和加載條，所以一般用戶很快就能讀取到加載場景。所以腳本直接使用同步載入。代碼如下：

public class ToLoading ： MonoBehaviour，IPointerClickHandler

{

[Tooltip（"Loading"）]

public string nextSceneName="Loading";

public void OnPointerClick（PointerEventData eventData）

{

SceneManager.LoadScene（nextSceneName）;

}

}

在加載場景Loading里面放入圖片和滑動條以及文字，在文字上新建一個(gè)腳本就能實(shí)現(xiàn)異步載入。完成異步載入，能夠使得電腦配置較差的用戶在切換場景時(shí)不會過于卡頓。

任何漫游系統(tǒng)都不能缺少場景切換，如果場景較小，對于設(shè)備要求不高的可以使用同步載入;如果場景較大，對于設(shè)備要求較高的就需要使用異步載入。如果說場景較大對設(shè)備要求不高但是切換場景后不銷毀前一個(gè)場景那就是用同步附加式載入;對設(shè)備要求高則用異步附加式載入。

2.5? UI交互實(shí)現(xiàn)

UI交互是非常常見也是必需的一種功能，三維校園漫游系統(tǒng)是使用虛擬現(xiàn)實(shí)設(shè)備手柄去體驗(yàn)UI交互的。所以需要使用到SteamVR插件和VRTK插件。

在右手的手柄上添加以下幾個(gè)組件：VRTK_Controller Events;VRTK_Controller Actions;VRTK_Pointer;VRTK_UI Pointer以及VRTK_Straight Pointer Render。添加完組件之后要注意指定Renderer，否則無法運(yùn)行。

然后開始設(shè)置UI。創(chuàng)建UGUI，把GUI的模式設(shè)置為World Space，如果不設(shè)置World Space的話會無法使用UI的。在Canvas上添加一個(gè)VRTK_UI Canvas組件用于交互。然后把需要的按鈕等放進(jìn)去就能使用虛擬現(xiàn)實(shí)設(shè)備去進(jìn)行UI交互了。

但是這樣還不夠，不能讓UI面板一直顯示在視線前面，需要先把UI面板隱藏，然后添加一個(gè)腳本，獲取到手柄的輸入，當(dāng)用戶按下菜單鍵的時(shí)候讓UI面板顯示，不需要時(shí)再按一次將其隱藏。

2.6? 音樂的添加

音樂也是必須要有的功能，可以讓用戶在輕松愉快的音樂聲中漫游虛擬校園。

在SteamVR的攝像機(jī)上添加一個(gè)Audio Source組件，把準(zhǔn)備好的音樂放進(jìn)去就能夠?qū)崿F(xiàn)音樂的播放，可以設(shè)置循環(huán)播放;如果音樂太少可以使用Audio Clip編輯音頻添加多音樂進(jìn)去。也可以通過添加UI來調(diào)整聲音的大小，添加一個(gè)Slider，然后設(shè)置腳本綁定Audio Source組件的音量，就能實(shí)現(xiàn)聲音大小調(diào)整的功能了。

2.7? 打包發(fā)布

設(shè)計(jì)完成，調(diào)試通過，最后就要進(jìn)行打包發(fā)布。在選項(xiàng)File中找到Build Setting，然后設(shè)置發(fā)布，選擇PC端打包發(fā)布，把做好的場景拖進(jìn)去，然后點(diǎn)擊Build就能打包發(fā)布了。要注意場景順序不要打亂，否則發(fā)布之后會導(dǎo)致場景混亂和bug的出現(xiàn)。

3? 結(jié)? 論

三維校園漫游系統(tǒng)的開發(fā)，是技術(shù)和藝術(shù)綜合知識能力的應(yīng)用，要有整體規(guī)劃，要掌握拍攝技術(shù)、建模技術(shù)，要懂美工和編程等等，作為VR技術(shù)開發(fā)人員，必須要技藝兩全，有開拓創(chuàng)新精神和團(tuán)隊(duì)合作意識，綜合素質(zhì)要高。

盡管整個(gè)三維校園漫游系統(tǒng)的開發(fā)已經(jīng)完成，功能內(nèi)容已經(jīng)實(shí)現(xiàn)，具有一定的使用價(jià)值，但是由于時(shí)間關(guān)系和開發(fā)經(jīng)驗(yàn)不足，在這個(gè)系統(tǒng)中仍有值得去改進(jìn)的地方，比如所代碼的簡化完善、場景優(yōu)化等等。

參考文獻(xiàn)：

[1] 趙佳蕊.2019年Q1中國VR頭顯出貨量同比增長15.1%，增量來自桌面頭顯 [EB/OL].智東西.（2019-07-10）.http：//www. sohu.com/a/326214839_115978，2019-07-10.

[2] VR小哥.深度解析BAT在VR領(lǐng)域的布局和投資 [EB/OL].（2018-03-07）.http：//www.sohu.com/a/225049842_ 100085695.

[3] 盧雁明.國外VR虛擬現(xiàn)實(shí)技術(shù)的發(fā)展及應(yīng)用現(xiàn)狀 [EB/OL].（2016-11-09）.http：//www.yuloo.com/mbgx/1611/ 1475372.shtml.

[4] Karli Watson，Christian Nagel，等著.C#入門經(jīng)典：第5版 [M].齊立波，譯.北京：清華大學(xué)出版社，2010.

[5] 程杰.大話設(shè)計(jì)模式 [M].北京：清華大學(xué)出版社，2007.

[6] 銳萌瑞.SteamVR插件使用 [EB/OL].（2018-01-29）.https：//blog.csdn.net/qq_34552886/article/details/79200302.

作者簡介：李滿（1966.12-），女，漢族，河南南陽人，副教授，本科，碩士，研究方向：計(jì)算機(jī)應(yīng)用;陳展鵬（1997.10-），男，漢族，廣東廣州人，本科，學(xué)士學(xué)位，研究方向：數(shù)字媒體技術(shù)。