基于Web的虛擬校園漫游系統(tǒng)的開發(fā)

孟麗麗，季 昆，王佳琪

(1.華北理工大學(xué) 機(jī)械工程學(xué)院，河北 唐山 063210；2.華北理工大學(xué) 建筑工程學(xué)院，河北 唐山 063210)

0 引 言

在我國多地的眾多重點(diǎn)院校，已積極地投入到了虛擬現(xiàn)實(shí)技術(shù)領(lǐng)域的科研行動(dòng)，使用不同的方法來構(gòu)建數(shù)字校園[1-3]。比如武漢理工大學(xué)研究了VR虛擬漫游技術(shù)中三維場(chǎng)景的建模以及交互設(shè)計(jì)；廈門理工大學(xué)尹大偉等研究了虛擬校園漫游系統(tǒng)實(shí)現(xiàn)中的檢測(cè)碰撞以及角色交互等實(shí)現(xiàn)機(jī)制；山東理工大學(xué)高猛研究了漫游系統(tǒng)中的角色控制技術(shù)[4-6]。總體來講，虛擬校園漫游技術(shù)取得了一定的成果，其漫游技術(shù)包括電子式地圖和網(wǎng)絡(luò)三維可視化兩個(gè)方面[7]。但也有一些學(xué)校開發(fā)的漫游系統(tǒng)，漫游功能受限、模型建立較為粗糙，很難給用戶帶來完全沉浸式和高交互性的體驗(yàn)。近些年，互聯(lián)網(wǎng)三維技術(shù)得到很快地發(fā)展，在Web網(wǎng)頁上實(shí)現(xiàn)三維場(chǎng)景交互逐步變?yōu)檠芯康臒狳c(diǎn)[8]。鑒于此，本文以華北理工大學(xué)為研究對(duì)象，將傳統(tǒng)的幾何建模技術(shù)與基于圖像的繪制技術(shù)進(jìn)行結(jié)合，并從不同功能視角進(jìn)行漫游設(shè)計(jì)，使得用戶直接通過Web網(wǎng)頁在校園中進(jìn)行自由漫步，同時(shí)又可以在特定的場(chǎng)景中進(jìn)行環(huán)視，猶如親身站在校園中觀看景觀，既增強(qiáng)了用戶體驗(yàn)，又增強(qiáng)了媒體的交互性和沉浸感，對(duì)學(xué)校的形象宣傳、信息化管理將產(chǎn)生重要的作用。

1 虛擬校園漫游系統(tǒng)方案設(shè)計(jì)與開發(fā)流程

1.1 虛擬校園漫游系統(tǒng)方案設(shè)計(jì)

華北理工大學(xué)坐落在沿?，F(xiàn)代化城市、環(huán)渤海經(jīng)濟(jì)區(qū)工業(yè)重鎮(zhèn)——唐山市唐山灣生態(tài)城，學(xué)校主要由A區(qū)、B區(qū)、C區(qū)、D區(qū)4個(gè)區(qū)和梅園、蘭園、竹園、菊?qǐng)@4個(gè)生活區(qū)，以及核心教學(xué)區(qū)、圖書館、校禮堂等建筑組成。為了更加逼真地展示真實(shí)的校園場(chǎng)景，在虛擬校園漫游系統(tǒng)開發(fā)過程中，本文以Photoshop作為圖像處理工具、AutoCAD對(duì)校園場(chǎng)景圖片進(jìn)行線條描繪、3DSMAX進(jìn)行場(chǎng)景建模、Unity3D 進(jìn)行漫游系統(tǒng)的開發(fā)與設(shè)計(jì)，最后進(jìn)行系統(tǒng)的整合，完成在線發(fā)布。

本文在設(shè)計(jì)華北理工大學(xué)的虛擬漫游系統(tǒng)時(shí)主要解決以下問題：①華北理工大學(xué)三維模型的主體內(nèi)容的構(gòu)建；②華北理工大學(xué)三維虛擬場(chǎng)景建模技術(shù)與優(yōu)化技術(shù)；③場(chǎng)景交互技術(shù)的設(shè)計(jì)與實(shí)現(xiàn)。

本系統(tǒng)按照如下步驟和技術(shù)路線來實(shí)現(xiàn)上述的設(shè)計(jì)：

(1)進(jìn)行華北理工大學(xué)三維模型的構(gòu)建。通過實(shí)地考察和實(shí)景拍照，獲得華北理工大學(xué)各處建筑物的平面圖層數(shù)據(jù)和實(shí)景圖像?？紤]到學(xué)校面積較大，該系統(tǒng)通過谷歌地圖(Google Earth)和學(xué)校官方微信獲得學(xué)校的地形俯視圖，并導(dǎo)入AutoCAD中進(jìn)行二維線條描繪，利用Photoshop對(duì)實(shí)景圖像進(jìn)行處理，轉(zhuǎn)換成3DSMAX需要的紋理貼圖。然后開始構(gòu)建學(xué)校的三維模型。經(jīng)過處理后，將建成的模型以.fbx格式導(dǎo)入到Unity3D平臺(tái)，實(shí)現(xiàn)系統(tǒng)的各個(gè)功能。

(2)學(xué)校全景展示。利用谷歌地圖API生成學(xué)校各個(gè)建筑物、道路、大門等的布局圖，將之前制作好的校園場(chǎng)景圖與谷歌地圖上的華北理工大學(xué)場(chǎng)景對(duì)應(yīng)關(guān)聯(lián)，并通過互聯(lián)網(wǎng)生成華北理工大學(xué)的URL。

(3)四季場(chǎng)景技術(shù)展示。本文以對(duì)華北理工大學(xué)春季場(chǎng)景為設(shè)計(jì)基礎(chǔ)，更換天空背景，改變花草的顏色以及樹木的預(yù)設(shè)體和粒子系統(tǒng)制作的雨滴的預(yù)設(shè)體以及通過代碼C#生成頂點(diǎn)和面片并用Shader代碼渲染和控制Shader的參數(shù)，實(shí)現(xiàn)不同四季場(chǎng)景的展示。

1.2 虛擬校園漫游系統(tǒng)開發(fā)流程

華北理工大學(xué)虛擬校園漫游系統(tǒng)的開發(fā)遵循著系統(tǒng)開發(fā)的一般步驟，即經(jīng)過系統(tǒng)分析、設(shè)計(jì)、開發(fā)、測(cè)試、反復(fù)修改且漸進(jìn)完成所規(guī)劃內(nèi)容[9]。本系統(tǒng)的具體開發(fā)主要可分位兩大部分：其中第一部分是通過CAD和3DMax對(duì)校園的環(huán)境和建筑等進(jìn)行建模，構(gòu)建華北理工大學(xué)的三維模型；第二部分是將三維模型導(dǎo)入到Unity3D中，通過代碼實(shí)現(xiàn)用戶與華北理工大學(xué)虛擬校園場(chǎng)景的交互。具體的設(shè)計(jì)流程如圖1所示。

圖1 系統(tǒng)詳細(xì)設(shè)計(jì)流程

2 關(guān)鍵技術(shù)與實(shí)現(xiàn)

2.1 模型的構(gòu)建

在對(duì)校園進(jìn)行三維建模時(shí)需要精確掌握校園中的各個(gè)場(chǎng)景的基本信息。

(1)本文通過谷歌地圖獲得校園整體尺寸比例，和學(xué)校設(shè)計(jì)圖紙得到學(xué)校各個(gè)建筑物的輪廓數(shù)據(jù)。

(2)通過學(xué)校官方微信發(fā)布的高清校園平面圖，并將其導(dǎo)入AutoCAD中利用描點(diǎn)工具將二維線條描繪，并依據(jù)所獲得數(shù)據(jù)進(jìn)行合理的縮放，使模型的二維輪廓大小與實(shí)際建筑相差不大。

(3)將調(diào)整好的二維線條導(dǎo)入3DSMAX中，過程中可能會(huì)有部分點(diǎn)斷開，所以需要運(yùn)用二維捕捉，利用畫線工具重新進(jìn)行描點(diǎn)[10]。然后添加擠出或者殼修改器擠出模型的粗模。這里擠出高度為5層樓的高度，約為15 m。然后進(jìn)行模型的細(xì)加工，將建立出的粗模轉(zhuǎn)換為可編輯多邊形，在編輯多邊形的頂點(diǎn)層級(jí)、邊層級(jí)以及多邊形層級(jí)分別進(jìn)行編輯處理，額外建造出窗戶、百葉窗、門等小模型，利用合并命令將其整合在同一個(gè)建筑上，同時(shí)也結(jié)合基本幾何體的排列組合方法進(jìn)行操作，合理安排建筑位置，使建筑更復(fù)合校園場(chǎng)景。各個(gè)建筑先獨(dú)立完成，然后再進(jìn)行合并，以建立出想要建立的模型。

(4)三維模型建立完整之后需要對(duì)其進(jìn)行貼圖材質(zhì)的賦予。本文利用圖像處理軟件Photoshop將采集到的圖片進(jìn)行剪裁、對(duì)比度、飽和度、以及曝光度處理[11]。將處理過的貼圖賦予到材質(zhì)編輯器中的材質(zhì)實(shí)例球上并進(jìn)行UVW貼圖的調(diào)整，以增強(qiáng)模型的真實(shí)感。材質(zhì)類型選用stan-dard 標(biāo)準(zhǔn)材質(zhì)，使后期將模型導(dǎo)入到Unity中材質(zhì)不會(huì)丟失，得以保留。貼圖后的校園B區(qū)模型如圖2所示。

圖2 貼圖后B區(qū)模型

2.2 三維場(chǎng)景的優(yōu)化與整合

學(xué)校建筑物較多，場(chǎng)景包含過多的模型，模型建立完成后文件占用內(nèi)存過大，導(dǎo)致用戶在操作上出現(xiàn)等待較長的時(shí)間，為改善這種情況則需對(duì)模型進(jìn)行優(yōu)化[12]?？s小模型的總體大小，為后面Unity3D功能開發(fā)提供便利，增強(qiáng)系統(tǒng)的流暢度，使游覽者擁有更好的漫游體驗(yàn)。此次模型優(yōu)化采用了以下方法：

(1)同一種材質(zhì)的物體其中之一轉(zhuǎn)化成可編輯多邊形，然后對(duì)其使用附加命令，將一棟樓中所有物體附加到一起之后使用塌陷命令，方便建筑整體移動(dòng)和減少物體的面數(shù)。在制作小模型的時(shí)候，充分利用合并命令，例如路燈、垃圾桶、窗戶、門等，利用合并命令將多個(gè)物體轉(zhuǎn)化成一個(gè)物體，減小場(chǎng)景中物體數(shù)量，進(jìn)而減小了文件大小。

(2)使用貼圖來代替復(fù)雜的建筑模型。因?yàn)樘貏e復(fù)雜的模型直接建立，模型面的數(shù)量會(huì)增加，導(dǎo)致文件的體積增加。另外，使用的貼圖照片要盡量小，系統(tǒng)中使用的模型選擇的是幾十k的png或jpg格式圖片。

(3)場(chǎng)景中模型的距離適當(dāng)。模型的面距離比較近，容易引起閃爍，較遠(yuǎn)的時(shí)候使得內(nèi)存增大并且會(huì)使相同的材質(zhì)無法合并。同時(shí)在保證基本相似的情況下，刪除部分小模型和在漫游過程中不可見的面。

(4)在Unity3D中的導(dǎo)入界面，根據(jù)模型內(nèi)存的大小和適合普通電腦運(yùn)行的模型大小，選擇網(wǎng)格壓縮對(duì)模型進(jìn)行適當(dāng)壓縮[13]。有低度壓縮、中度壓縮和高度壓縮3個(gè)選項(xiàng)。一般選擇低度壓縮和中度壓縮。而高度壓縮會(huì)破壞模型原有的結(jié)構(gòu)。

模型的各個(gè)部分完全建立之后，對(duì)各部分進(jìn)行整合處理。本系統(tǒng)是在3DSMAX中搭建一個(gè)個(gè)獨(dú)立模型后合成一個(gè)較為完整的校園場(chǎng)景，將模型直接合并于3DSMAX中，在3DSMAX中利用對(duì)齊、捕捉等操作實(shí)現(xiàn)模型的集成。場(chǎng)景整合后導(dǎo)出fbx格式的場(chǎng)景文件。導(dǎo)入U(xiǎn)nity3D中為下一步做準(zhǔn)備。

3 交互設(shè)計(jì)與實(shí)現(xiàn)

將整合后的場(chǎng)景模型導(dǎo)入到Unity3D中進(jìn)行交互設(shè)計(jì)與實(shí)現(xiàn)。結(jié)合JavaScript和C#.Net語言實(shí)現(xiàn)場(chǎng)景交互。其中不同的漫游形式、不同季節(jié)的漫游、校園官網(wǎng)和地圖導(dǎo)航以及信息交互是其主要功能。

3.1 漫游功能的實(shí)現(xiàn)

本系統(tǒng)漫游形式分角色漫游和自由漫游，角色漫游是有人物參與，身臨其境，漫步校園，在Unity3D中使攝像機(jī)位于角色的后上方跟隨角色。自由漫游技術(shù)以獨(dú)立于角色的一種視角在場(chǎng)景中任意漫游，此形式下攝像機(jī)位于整個(gè)場(chǎng)景的后上方俯瞰場(chǎng)景，不跟隨角色。角色漫游方式是通過鼠標(biāo)與鍵盤控制人物行走、跳躍、轉(zhuǎn)換視角。自由漫游方式通過鼠標(biāo)轉(zhuǎn)換方向，鍵盤控制上下前后左右的前進(jìn)，校園漫游如圖3和圖4所示。下面主要介紹角色漫游實(shí)現(xiàn)的關(guān)鍵技術(shù)以及不同季節(jié)場(chǎng)景技術(shù)的實(shí)現(xiàn)。

圖3 角色視角漫游

圖4 自由視角校園漫游

3.1.1 角色漫游技術(shù)中相機(jī)環(huán)視控制及相機(jī)跟隨

本系統(tǒng)角色漫游技術(shù)的實(shí)現(xiàn)中采用父子關(guān)系的方式來實(shí)現(xiàn)相機(jī)跟隨。Unity3D中攝像機(jī)相當(dāng)于人物的眼睛，在人物位置變動(dòng)時(shí)對(duì)攝像機(jī)進(jìn)行控制，將攝像機(jī)放在人物中，并一直跟隨鼠標(biāo)移動(dòng)。人物角色當(dāng)作父物體，攝像機(jī)作為人物角色的子物體。并將第一人稱攝像機(jī)作為第三人稱攝像機(jī)的子物體，通過響應(yīng)鼠標(biāo)的輸入來進(jìn)行旋轉(zhuǎn)。使攝像機(jī)跟隨角色運(yùn)動(dòng)，以達(dá)到觸覺和視覺上身臨其境的感受。代碼完成后賦予第三人稱攝像機(jī)。核心代碼如下：

public class MouseLook： MonoBehaviour {

public enum RotationAxes{…}

public RotationAxes axes=RotationAxes.MouseXAndY;

public float sensitivityX=15F，sensitivityY=15F;

public float minimumX=-360F，maximumX=360F;

public float minimumY=-60F，maximumY=60F;

float rotationY=0F;

void Start(){…}//使剛體不改變旋轉(zhuǎn)

void Update(){…}//調(diào)整角度

}

3.1.2 不同季節(jié)場(chǎng)景技術(shù)的實(shí)現(xiàn)

基于場(chǎng)景風(fēng)格化設(shè)計(jì)的思想，為增強(qiáng)用戶的體驗(yàn)感，更好地展示華北理工大學(xué)不同場(chǎng)景的校園景觀。本系統(tǒng)根據(jù)季節(jié)性的變化，設(shè)計(jì)了4種不同的場(chǎng)景，即春季、夏季、秋季、冬季。本系統(tǒng)以春季場(chǎng)景為設(shè)計(jì)基礎(chǔ)；秋季場(chǎng)景在春季場(chǎng)景的基礎(chǔ)之上，更換天空背景，改變花草的顏色以及樹木的預(yù)設(shè)體；夏季場(chǎng)景則在春季場(chǎng)景的基礎(chǔ)之上，更換天空的背景，增添一個(gè)由粒子系統(tǒng)制作的雨滴的預(yù)設(shè)體；冬季在夏季的基礎(chǔ)上更換天空背景，改變花草的顏色以及樹木的預(yù)設(shè)體，使用代碼C#生成頂點(diǎn)和面片并用Shader代碼渲染和控制Shader的參數(shù)使雪花飄起來，以達(dá)到不同季節(jié)不同景觀的效果，能夠較為真實(shí)的模擬學(xué)校四季的自然環(huán)境，如圖5、圖6所示。

圖5 冬季場(chǎng)景

圖6 夏季場(chǎng)景

用戶可通過場(chǎng)景界面上的按鈕實(shí)現(xiàn)對(duì)不同場(chǎng)景的切換。代碼完成后賦予任意物體即可。核心代碼如下：

public class season: MonoBehaviour {

void OnGUI(){ if (GUI.Button(new Rect(410，0，85，30)，"春季Spring")){…}

if (GUI.Button(new Rect(495，0，85，30)，"夏季Rain")){…}

if (GUI.Button(new Rect(580，0，85，30)，"秋季Autumn")){…}

if (GUI.Button(new Rect(665，0，85，30)，"冬季Rain")){…}

}

void Start(){}

void Update(){}}

3.2 校園官網(wǎng)和地圖導(dǎo)航的實(shí)現(xiàn)

為方便用戶快捷地了解華北理工大學(xué)的校園相關(guān)信息和查找學(xué)校各建筑的地理位置與布局，系統(tǒng)在場(chǎng)景界面中添加了學(xué)校的官網(wǎng)鏈接和百度地圖的鏈接，通過點(diǎn)擊相應(yīng)的按鈕，即可快速登錄到相應(yīng)的網(wǎng)站。代碼完成后賦予任意物體即可。核心代碼如下：

public class website: MonoBehaviour {

void Start(){}

void Update(){}

private void OnGUI()

{if (GUI.Button(new Rect(0, 0, 130, 30), "華北理工大學(xué)"))

{Application.OpenURL("http://www.ncst.edu.cn/");

}

if (GUI.Button(new Rect(240, 0, 90, 30), "地圖導(dǎo)航"))

{Application.OpenURL("https://j.map.baidu.com/gw2oP");

}}}

3.3 信息交互功能實(shí)現(xiàn)

信息功能交互的實(shí)現(xiàn)，可以提高用戶的體驗(yàn)感，幫助用戶對(duì)學(xué)校各處建筑物的了解。信息交互功能的實(shí)現(xiàn)需靠代碼來實(shí)現(xiàn)，用戶通過鼠標(biāo)點(diǎn)擊建筑即可彈出相應(yīng)建筑的簡(jiǎn)介的功能，如圖7所示。代碼完成后賦予要顯示信息的物體即可。系統(tǒng)為學(xué)校、圖書館、核心教學(xué)區(qū)以及大學(xué)生服務(wù)中心添加了信息窗口，為用戶進(jìn)一步了解學(xué)校的相關(guān)信息提供了很好的平臺(tái)。核心代碼如下：

public class information: MonoBehaviour {

public bool WindowShow=false;

void Start(){}

void Update(){}

void OnGUI()

{

if (WindowShow)

GUI.Window(0, new Rect(10, 30, 700, 850), MyWindow, "圖書館簡(jiǎn)介");

}

void MyWindow(int WindowID){…}//對(duì)話框函數(shù);

void OnMouseDown()//鼠標(biāo)點(diǎn)擊事件;

{…}}

圖7 校園信息窗口

4 結(jié)束語

本文采用三維建模的方法，通過3DSMAX三維建模軟件構(gòu)建華北理工大學(xué)的各種場(chǎng)景建筑物，利用Photoshop圖像處理軟件將材質(zhì)貼圖應(yīng)用到建筑物中，并通過Unity3D游戲開發(fā)軟件將虛擬現(xiàn)實(shí)技術(shù)應(yīng)用到數(shù)字化校園的建設(shè)中。開發(fā)了一套具有基本校園漫游功能、場(chǎng)景變換、校園官網(wǎng)和地圖導(dǎo)航鏈接、信息交互以及不同的漫游方式的虛擬校園漫游系統(tǒng)。最后集成整合與HTML，完成基于Web的虛擬現(xiàn)實(shí)校園的開發(fā)。用戶可通過網(wǎng)絡(luò)進(jìn)行校園漫游，并對(duì)校內(nèi)不同建筑和場(chǎng)景進(jìn)行了解，獲得更真實(shí)的感受。因本系統(tǒng)制作了校園大部分的建筑模型，場(chǎng)景模型大部分是用貼圖處理的，又開發(fā)了4種不同的季節(jié)場(chǎng)景。所以場(chǎng)景文件比較大，虛擬與現(xiàn)實(shí)場(chǎng)景有所差別，導(dǎo)致不同的季節(jié)場(chǎng)景切換的時(shí)間會(huì)比較長。所以模型優(yōu)化和場(chǎng)景逼真性將是本系統(tǒng)需要改進(jìn)的一個(gè)非常重要的方向。