孟麗麗，季 昆，王佳琪

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

0 引 言

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

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

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

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

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

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

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

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

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

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

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

圖1 系統(tǒng)詳細設計流程

2 關鍵技術與實現(xiàn)

2.1 模型的構建

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

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

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

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

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

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

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

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

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

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

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

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

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

3 交互設計與實現(xiàn)

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

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

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

圖3 角色視角漫游

圖4 自由視角校園漫游

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

本系統(tǒng)角色漫游技術的實現(xiàn)中采用父子關系的方式來實現(xiàn)相機跟隨。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 不同季節(jié)場景技術的實現(xiàn)

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

圖5 冬季場景

圖6 夏季場景

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

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

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

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 信息交互功能實現(xiàn)

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

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){…}//對話框函數(shù);

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

{…}}

圖7 校園信息窗口

4 結束語

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