基于Unity3D的Web三維可視化

(成都理工大學(xué) 四川 成都 610059)

基于Unity3D的Web三維可視化

戢騰楊鵬

(成都理工大學(xué)四川成都610059)

本文詳細(xì)地介紹了利用三維開發(fā)引擎Unity3D做為平臺，SketchUp作為建模軟件，IIS作為網(wǎng)絡(luò)服務(wù)器的開發(fā)的網(wǎng)絡(luò)三維校園漫游系統(tǒng)。對Unity3D在Web環(huán)境下發(fā)布和瀏覽三維數(shù)據(jù)方法可行性做出評價，并對Web3D技術(shù)的未來發(fā)展前景做了展望和預(yù)測。

三維校園；Web3D；Unity3D；SketchUp

一、引言

隨著社會的不斷發(fā)展和科技的進(jìn)步，人們已經(jīng)對于城市樣貌、游戲已經(jīng)不再滿足于原來二維平面數(shù)據(jù)。“既然真實的世界是三維的，那么科學(xué)探索為什么不借助三維形式呢？”既然有了需求，那么開發(fā)者們就會將目光集中于此。在這樣的環(huán)境下，如今的Web早已不是當(dāng)初簡單的文字和圖片的靜態(tài)信息了，已經(jīng)慢慢地向視頻、音頻及動畫等動態(tài)信息發(fā)展。現(xiàn)在打開一個網(wǎng)頁會見到各種各樣的gif動態(tài)圖、網(wǎng)頁flash廣告以及在線小游戲等動態(tài)信息[1]。這些發(fā)展中，三維技術(shù)變得逐漸熱門起來。三維技術(shù)的發(fā)展與應(yīng)用無疑會利用到互聯(lián)網(wǎng)[2]。由于三維技術(shù)是模擬真實世界的，那么它的發(fā)展必將給人們帶來全新的視覺沖擊。而把三維技術(shù)和網(wǎng)絡(luò)結(jié)合起來就是Web3D技術(shù)，Web3D技術(shù)比起以前的flash、動畫多了真實感，可以讓用戶有身臨其境的感覺。而Web3D實際上就是以前的虛擬現(xiàn)實技術(shù)發(fā)展過來的[3]。它的目的就是在網(wǎng)絡(luò)上模擬現(xiàn)實，建立虛擬的三維世界。Web3D技術(shù)目前在網(wǎng)上有著廣泛的應(yīng)用。例如在網(wǎng)上展示三維商品，可以更加吸引用戶；在三維的城市地圖下面虛擬旅游參觀，可以讓用戶對景觀有真實去過的感受；還可以建立虛擬人物，在虛擬社區(qū)里面交流等一些娛樂。因此研究Unity3D在web環(huán)境下發(fā)布和瀏覽三維數(shù)據(jù)的方法，對推動web環(huán)境下的三維應(yīng)用有重要的現(xiàn)實意義。

二、Unity3D簡介

Unity3D是個強大的集成游戲引擎和編譯器，通過它你可以快速高效的建立對象和導(dǎo)入外部資源(圖像、影音及模型等等)，并且可以用代碼將他們關(guān)聯(lián)在一起。Unity3D它的編輯器是可視化的，它圍繞這樣的原則而構(gòu)建：用戶可以使用一個簡單的拖放動作來完成任何任務(wù)，甚至可以連接腳本，為變量賦值或者是創(chuàng)建復(fù)雜的包含多個部分的資源。Unity3D還擁有一個集成的腳本環(huán)境、內(nèi)置網(wǎng)絡(luò)功能，可以針對多個平臺開發(fā)部署。

三、三維校園場景數(shù)據(jù)獲取

(一)地物位置數(shù)據(jù)

三維場景中的地物位置信息可以從校園CAD底圖上獲取，也可以從一些衛(wèi)星地圖上獲取，本文通過在Sketchup添加校園Google Earth中的衛(wèi)星影像，獲取了地物的相對位置關(guān)系。

(二)地物高度數(shù)據(jù)

由于工作量的關(guān)系，本文采取的策略是：一般建筑模型高度為：樓層數(shù)×3米；如果該建筑為公共建筑物則底層一般為3.5到4米左右。

(三)地物紋理信息數(shù)據(jù)

紋理數(shù)據(jù)可以展現(xiàn)逼真的視覺效果。通過數(shù)碼相機或手機采集各建筑物的外形輪廓，從而獲得三維地物建模所需的紋理圖片。經(jīng)PhotoShop等圖像處理軟件進(jìn)行裁切、變換等處理，使之成為正射狀態(tài)，用于地物貼圖。

四、地物模型制作

目前，嚴(yán)格的說，三維建模已經(jīng)不算是很新的技術(shù)了，建立三維模型的軟件越來也多，例如3D Max、Maya、SketchUp等等，其中SketchUp是一套令人耳目一新的設(shè)計軟件，可快速構(gòu)建建筑草圖，創(chuàng)作建筑方案，被建筑師譽為最優(yōu)秀的建筑草圖工具。本文選擇的是SketchUp三維建模，建模步驟如下：

1)加載地物位置數(shù)據(jù)，繪制出地物的平面輪廓，

2)利用地物高度數(shù)據(jù)和拉伸工具，繪制出地物的主體結(jié)構(gòu)

3)通過前期對建筑的(通過照片、影像以及實地觀看等)了解，借助工具對地物的細(xì)節(jié)部分進(jìn)行細(xì)化

4)對地物模型進(jìn)行貼圖

5)完成貼圖后，要刪除多余的線條及輔助線

6)將建好的地物模型以.fbx格式單個導(dǎo)出，便于Unity3D導(dǎo)入模型

圖1 SketchUp建立模型圖

五、地物模型發(fā)布

(一)添加模型

Unity3D創(chuàng)建工程的所有文件(腳本、對象、場景、任何文件)都組織到一個Project文件夾里面，每一個Project文件夾都包含一個Assets(資源)文件夾。而導(dǎo)入的模型文件就存放在Assets(資源)文件夾中。在Unity3D中可以從Project視圖里面找到所需要的模型，在Inspector視圖中修改其詳細(xì)信息(例如：模型的位置、大小及腳本等等)

(二)調(diào)整模型

因此將Unity3D的模型大小調(diào)整有兩種方法：一種方法是修改FBXImporter中的Scale Factor數(shù)值，將Scale Factor的數(shù)值恢復(fù)為1，但這樣做會占用模型資源，比較消耗物理緩存；另一種方法是從Hierarchy中選中待修改物品，使用Scale同時放大x，y，z各100倍，這種設(shè)置耗費的資源比較少，同時還能通過使用腳本來進(jìn)行這個放大操作，十分方便。

(三)調(diào)整貼圖

對于三維校園場景框架中的一些特殊地物的貼圖，如地磚，先選擇Inspector中的Wrap Mode(包裹模式)，該功能決定貼圖會無限的平鋪還是只顯示一次。再選擇Repeat讓貼圖平鋪，或者選擇Clamp 讓貼圖的邊緣拉伸并在改變大小時填滿任何縫隙；對于一些透明的貼圖，應(yīng)該選擇Alpha通道，而不是默認(rèn)的diffuse散射通道。

(四)添加腳本

對于導(dǎo)入Unity的模型場景，它是靜態(tài)，是不可操作的。需要使用腳本編程來實現(xiàn)交互性。如果說模型、貼圖之類的可以給游戲環(huán)境一個物理描述和設(shè)置，那么腳本和代碼會給游戲及其內(nèi)容以生命。Unity內(nèi)置地支持三種腳本語言：C#、Boo(Python的一個變種)和JavaScript，本文中利用JavaScript實現(xiàn)了如下功能：1)能夠?qū)φw的模型場景進(jìn)行旋轉(zhuǎn)和縮放2)選中建筑模型時可以彈出該建筑的信息3)能以第一人稱視角在場景里行走以及飛行等等

在寫腳本之前可以先為導(dǎo)入的模型添加碰撞效果。由于主要研究web三維可視化，因此所有的建筑模型只需要添加Mesh Collider 網(wǎng)格碰撞器即可。Unity3D中提供了許多關(guān)于碰撞屬性，例如摩擦力、物體表面材質(zhì)等等。

要觸發(fā)功能來達(dá)到用戶與計算機交互，即響應(yīng)條件，因此需要為此場景創(chuàng)建GUI(用戶界面)。通俗的說，GUI相當(dāng)于門，一個不好的、難以使用的門會讓用戶止步于門前。Unity3D的GUI系統(tǒng)是基于立即模式的，例如屏幕上放置GUI一個按鈕：

function OnGUI()

{

if(GUI.Button(Rect(10,10,100,40),”離開”)

{

Application.Quit();

}

}

界面上在屏幕(10,10)的位置顯示像素寬100像素，高80像素的按鈕。按鈕上顯示“離開”。當(dāng)單擊該按鈕后，GUI.Button()函數(shù)返回True，這就滿足if語句，隨后關(guān)閉當(dāng)前界面。但是值得注意的是，任何在屏幕上繪制的GUI元素，都必須在OnGUI()函數(shù)內(nèi)部調(diào)用。Unity3D中的任意GUI交互所返回的值都是布爾型變量。

對于本文所實現(xiàn)的功能可以由屏幕上的三個按鈕和場景中三個攝像機完成。具體如下圖：

圖2 功能流程圖

也就是說點擊屏幕上的一個按鈕就打開一個攝像機同時關(guān)閉其他兩個攝像機(但實際上實現(xiàn)的是打開一個按鈕先執(zhí)行的是關(guān)閉所有攝像機，再打開對應(yīng)的攝像機)這樣就可以切換多個鏡頭視角。

(五)場景優(yōu)化

雖然現(xiàn)在測試的三維場景模型在技術(shù)上已經(jīng)可以發(fā)布了，但還缺少一些環(huán)境。例如場景中顏色比較昏暗。因此需要創(chuàng)建光影效果。Unity3D預(yù)制了三種類型的光源，每種類型都模擬了現(xiàn)實世界中的一種常見光源——有向、點和聚光燈。其中有向光源的功能和太陽類似，比較適合三維建筑場景。

除此之外，場景中還缺少了一個很明顯的景色——天空。雖然默認(rèn)的藍(lán)色對整個場景來說沒什么太大的影響，但是相對于天空下面的光影以及繪制的地面來說，單調(diào)的藍(lán)色則顯得虛假，不真實。因此，添加一個天空背景變得很有必要。在Unity3D中，天空盒可以修改天空背景。天空盒是一個特殊的虛擬盒子，它包裹在場景周圍但是卻沒有實際的幾何信息存在，只是給人逼真效果和天空的假象。和光源相同，Unity3D官方也提供了幾種不同的天空場景供用戶選擇。

(六)運行發(fā)布

利用Unity3D將三維數(shù)據(jù)發(fā)布到網(wǎng)上，實際上就是發(fā)布Unity3D生成的.html文件。因此可以將其放在一些門戶網(wǎng)站中，在其界面添加熱鏈接即可。當(dāng)然也可以獨立發(fā)布。獨立發(fā)布網(wǎng)頁，首先需要選擇Web服務(wù)器，對于學(xué)生及初學(xué)者來說，微軟自帶的IIS服務(wù)器是一個很好的選擇，當(dāng)然也可以選擇Tomcat網(wǎng)絡(luò)服務(wù)器，不管是IIS還是Tomcat，它們都是比較簡單易操作的。

本文系統(tǒng)使用的是Windows操作系統(tǒng)，使用的是ASP的IIS服務(wù)器，一般來說，Win7以上的操作系統(tǒng)，都已經(jīng)安裝好IIS服務(wù)器，對于沒有安裝，可以打開任務(wù)管理器中程序與功能打開和添加功能，勾選IIS選項即可。然后添加網(wǎng)址、網(wǎng)頁的物理路徑即可在內(nèi)網(wǎng)瀏覽。在網(wǎng)頁瀏覽器中輸入本機內(nèi)網(wǎng)的IP地址即可瀏覽網(wǎng)頁。

圖3 發(fā)布web效果圖

六、總結(jié)

本文針對三維數(shù)據(jù)發(fā)布的需要，闡述了利用SketchUp建模以Unity3D為平臺在Web上發(fā)布三維數(shù)據(jù)的實現(xiàn)過程，解決了三維場景漫游、快速放大縮小旋轉(zhuǎn)等三維瀏覽的關(guān)鍵技術(shù)。除了場景漫游操作外，還可以選取三維建筑，查詢其屬性信息。同時場景還添加了天空背景以及光照陰影等仿真效果，證明了基于Unity3D的web三維可視化的可行性。隨著互聯(lián)網(wǎng)技術(shù)和Web3D研發(fā)技術(shù)的不斷提高，Web3D技術(shù)在未來的應(yīng)用勢必會越來越廣泛。而作為Web3D技術(shù)中熱門的Unity3D也必將在Web應(yīng)用和手機Web游戲應(yīng)用中越走越遠(yuǎn)。

[1]Luca Chittaro *,Roberto Ranon.Web3D technologies in learning,education and training:Motivations,issues,opportunities.Computers & Education.49(2007)3-18.

[2]John,N.W..The impact of Web3D technologies on medical education and training.Computers & Education,49(1),19-31.

[3]Menard,M.Game Development with Unity[M].機械工業(yè)出版社，2012.4:8-10.

戢騰(1992-)，男，漢族，湖北人，碩士研究生，測繪工程，成都理工大學(xué)；楊鵬(1991-)，男，漢族，河南人，碩士研究生，測繪工程，成都理工大學(xué)。