基于Web的虛擬校園漫游系統的開發

孟麗麗，季 昆，王佳琪

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

0 引 言

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

1 虛擬校園漫游系統方案設計與開發流程

1.1 虛擬校園漫游系統方案設計

華北理工大學坐落在沿海現代化城市、環渤海經濟區工業重鎮——唐山市唐山灣生態城，學校主要由A區、B區、C區、D區4個區和梅園、蘭園、竹園、菊園4個生活區，以及核心教學區、圖書館、校禮堂等建筑組成。為了更加逼真地展示真實的校園場景，在虛擬校園漫游系統開發過程中，本文以Photoshop作為圖像處理工具、AutoCAD對校園場景圖片進行線條描繪、3DSMAX進行場景建模、Unity3D 進行漫游系統的開發與設計，最后進行系統的整合，完成在線發布。

本文在設計華北理工大學的虛擬漫游系統時主要解決以下問題：①華北理工大學三維模型的主體內容的構建；②華北理工大學三維虛擬場景建模技術與優化技術；③場景交互技術的設計與實現。

本系統按照如下步驟和技術路線來實現上述的設計：

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

(2)學校全景展示。利用谷歌地圖API生成學校各個建筑物、道路、大門等的布局圖，將之前制作好的校園場景圖與谷歌地圖上的華北理工大學場景對應關聯，并通過互聯網生成華北理工大學的URL。

(3)四季場景技術展示。本文以對華北理工大學春季場景為設計基礎，更換天空背景，改變花草的顏色以及樹木的預設體和粒子系統制作的雨滴的預設體以及通過代碼C#生成頂點和面片并用Shader代碼渲染和控制Shader的參數，實現不同四季場景的展示。

1.2 虛擬校園漫游系統開發流程

華北理工大學虛擬校園漫游系統的開發遵循著系統開發的一般步驟，即經過系統分析、設計、開發、測試、反復修改且漸進完成所規劃內容[9]。本系統的具體開發主要可分位兩大部分：其中第一部分是通過CAD和3DMax對校園的環境和建筑等進行建模，構建華北理工大學的三維模型；第二部分是將三維模型導入到Unity3D中，通過代碼實現用戶與華北理工大學虛擬校園場景的交互。具體的設計流程如圖1所示。

圖1 系統詳細設計流程

2 關鍵技術與實現

2.1 模型的構建

在對校園進行三維建模時需要精確掌握校園中的各個場景的基本信息。

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

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

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

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

圖2 貼圖后B區模型

2.2 三維場景的優化與整合

學校建筑物較多，場景包含過多的模型，模型建立完成后文件占用內存過大，導致用戶在操作上出現等待較長的時間，為改善這種情況則需對模型進行優化[12]?？s小模型的總體大小，為后面Unity3D功能開發提供便利，增強系統的流暢度，使游覽者擁有更好的漫游體驗。此次模型優化采用了以下方法：

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

(2)使用貼圖來代替復雜的建筑模型。因為特別復雜的模型直接建立，模型面的數量會增加，導致文件的體積增加。另外，使用的貼圖照片要盡量小，系統中使用的模型選擇的是幾十k的png或jpg格式圖片。

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

(4)在Unity3D中的導入界面，根據模型內存的大小和適合普通電腦運行的模型大小，選擇網格壓縮對模型進行適當壓縮[13]。有低度壓縮、中度壓縮和高度壓縮3個選項。一般選擇低度壓縮和中度壓縮。而高度壓縮會破壞模型原有的結構。

模型的各個部分完全建立之后，對各部分進行整合處理。本系統是在3DSMAX中搭建一個個獨立模型后合成一個較為完整的校園場景，將模型直接合并于3DSMAX中，在3DSMAX中利用對齊、捕捉等操作實現模型的集成。場景整合后導出fbx格式的場景文件。導入Unity3D中為下一步做準備。

3 交互設計與實現

將整合后的場景模型導入到Unity3D中進行交互設計與實現。結合JavaScript和C#.Net語言實現場景交互。其中不同的漫游形式、不同季節的漫游、校園官網和地圖導航以及信息交互是其主要功能。

3.1 漫游功能的實現

本系統漫游形式分角色漫游和自由漫游，角色漫游是有人物參與，身臨其境，漫步校園，在Unity3D中使攝像機位于角色的后上方跟隨角色。自由漫游技術以獨立于角色的一種視角在場景中任意漫游，此形式下攝像機位于整個場景的后上方俯瞰場景，不跟隨角色。角色漫游方式是通過鼠標與鍵盤控制人物行走、跳躍、轉換視角。自由漫游方式通過鼠標轉換方向，鍵盤控制上下前后左右的前進，校園漫游如圖3和圖4所示。下面主要介紹角色漫游實現的關鍵技術以及不同季節場景技術的實現。

圖3 角色視角漫游

圖4 自由視角校園漫游

3.1.1 角色漫游技術中相機環視控制及相機跟隨

本系統角色漫游技術的實現中采用父子關系的方式來實現相機跟隨。Unity3D中攝像機相當于人物的眼睛，在人物位置變動時對攝像機進行控制，將攝像機放在人物中，并一直跟隨鼠標移動。人物角色當作父物體，攝像機作為人物角色的子物體。并將第一人稱攝像機作為第三人稱攝像機的子物體，通過響應鼠標的輸入來進行旋轉。使攝像機跟隨角色運動，以達到觸覺和視覺上身臨其境的感受。代碼完成后賦予第三人稱攝像機。核心代碼如下：

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(){…}//使剛體不改變旋轉

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

}

3.1.2 不同季節場景技術的實現

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

圖5 冬季場景

圖6 夏季場景

用戶可通過場景界面上的按鈕實現對不同場景的切換。代碼完成后賦予任意物體即可。核心代碼如下：

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 校園官網和地圖導航的實現

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

public class website: MonoBehaviour {

void Start(){}

void Update(){}

private void OnGUI()

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

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

}

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

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

}}}

3.3 信息交互功能實現

信息功能交互的實現，可以提高用戶的體驗感，幫助用戶對學校各處建筑物的了解。信息交互功能的實現需靠代碼來實現，用戶通過鼠標點擊建筑即可彈出相應建筑的簡介的功能，如圖7所示。代碼完成后賦予要顯示信息的物體即可。系統為學校、圖書館、核心教學區以及大學生服務中心添加了信息窗口，為用戶進一步了解學校的相關信息提供了很好的平臺。核心代碼如下：

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, "圖書館簡介");

}

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

void OnMouseDown()//鼠標點擊事件;

{…}}

圖7 校園信息窗口

4 結束語

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