EP.7 第一個(gè)VR應(yīng)用程序

在之前的章節(jié)中赌蔑，我們已經(jīng)學(xué)習(xí)了基本的開發(fā)虛擬現(xiàn)實(shí)應(yīng)用的基本技術(shù)峭竣。除此之外改含，我們也對多種已經(jīng)/即將面世的虛擬現(xiàn)實(shí)開發(fā)和應(yīng)用平臺進(jìn)行了調(diào)查闻葵，也了解了一些流行的用于創(chuàng)建虛擬現(xiàn)實(shí)應(yīng)用的工具民泵。在最后一章中，我們將要把前面介紹的所有知識進(jìn)行總結(jié)和綜合槽畔，并創(chuàng)建出一個(gè)端對端的應(yīng)用程序栈妆。

由于本書篇幅和時(shí)間的限制，我們暫時(shí)無法開發(fā)出一個(gè)產(chǎn)品級質(zhì)量的應(yīng)用程序厢钧。但此處將詳細(xì)介紹開發(fā)一個(gè)支持簡單用戶交互的虛擬現(xiàn)實(shí)應(yīng)用程序的過程鳞尔，作為練習(xí)，本章中我們會開發(fā)一個(gè)可以被絕大部分人立刻理解的應(yīng)用程序：一個(gè)基于智能手機(jī)平臺的照片瀏覽器早直，而此處使用的開發(fā)工具和平臺為谷歌公司的Cardboard VR寥假。?

書中的圖片7-1是一副NEXUS5的屏幕截圖：Yosemite國家公園的360°全景照片，在Cardboard上被并排渲染出來霞扬。在屏幕的下方是四張半透明的縮略圖糕韧，如果用戶瀏覽時(shí)注視著某一張縮略圖，這張圖片就會變得不透明以告訴用戶：用戶在此處選中了該圖片喻圃。通過觸摸Cardboard機(jī)器外部的電磁開關(guān)就可以進(jìn)入被選中圖像的全景畫面萤彩，以上內(nèi)容就是該章節(jié)要嘗試構(gòu)建的應(yīng)用程序。

回憶一下斧拍，當(dāng)開發(fā)Cardboard應(yīng)用時(shí)乒疏，我們有幾種選擇可以使用的工具和編程語言。在此處我們選擇Unity3D饮焦，它是現(xiàn)階段最流行的虛擬現(xiàn)實(shí)應(yīng)用開發(fā)環(huán)境怕吴，同時(shí)我們也可以通過基于Java的安卓開發(fā)環(huán)境（基于android studio IDE）窍侧。 此外，我們也可以通過HTML5語言對瀏覽器端口的網(wǎng)頁代碼進(jìn)行移動端的編寫转绷，此處同樣采用了基于Javascript的虛擬現(xiàn)實(shí)框架伟件，例如Three.js。在最后议经，我決定使用Unity3D進(jìn)行本章的軟件開發(fā)斧账。Unity引擎不僅十分流行，他同樣具有許多優(yōu)點(diǎn)：例如可以進(jìn)行有用的圖形化處理煞肾，拖拽功能同樣優(yōu)秀咧织，這些便捷的功能使我們可以把注意力集中在如何設(shè)計(jì)應(yīng)用，而不是繁雜的細(xì)節(jié)上籍救。盡管如此习绢，用戶界面的創(chuàng)建仍然有些復(fù)雜和繁瑣，所以如果你對Uniyu不是特別了解的話則需要仔細(xì)遵守每一步提示蝙昙。

在為Cardboard開發(fā)一個(gè)簡單的360°圖片瀏覽器時(shí)闪萄，我們將回顧很多前面章節(jié)中我們已經(jīng)討論過的內(nèi)容，其中包括：

1. 創(chuàng)造一個(gè)三維場景

2. 利用Unity3D引擎和編輯器來開發(fā)虛擬現(xiàn)實(shí)應(yīng)用程序

3.利用Cardboard SDK渲染立體場景奇颠，并且使用手機(jī)的加速度計(jì)來跟蹤運(yùn)動軌跡败去；

4. 類似于其他大量VR應(yīng)用程序所使用的功能：創(chuàng)造一個(gè)基于實(shí)現(xiàn)和點(diǎn)擊的交互界面

5. 創(chuàng)建一個(gè)基于Android平臺的應(yīng)用程序

在此部分，我們建立的照片瀏覽器使用了大量的Google VR SDK在Unity中使用的案例烈拒，如果需要的話讀者可以先回顧第六章的內(nèi)容圆裕。

7-1 360°全景拼圖

360°的全景拼圖已經(jīng)變得越來越常見：在IOS平臺上有許多應(yīng)用程序可以拍攝360°全景圖像，而用戶可以通過簡單的觸摸屏幕和朝著各個(gè)方向轉(zhuǎn)動手機(jī)荆几，應(yīng)用程序就可以將多層圖像無縫拼接成一張全景圖片葫辐，并且在大部分情況下都有不錯(cuò)的效果。在許多Android平臺的手機(jī)伴郁，例如三星Note4和Google Nexus5中已經(jīng)自帶了全景圖像的應(yīng)用程序了耿战。

360°全景圖像只是一種特殊排列的圖像，這種圖像和其他標(biāo)準(zhǔn)圖片的存儲格式相同焊傅，通常被存儲為PNG或者JPEG剂陡。這種排列被稱為等距離圓柱投影，這種布局方式最早可被追租到兩千年以前的景點(diǎn)地圖投影狐胎，在教材中的圖7-2展示了圖7-1所展示的全景圖像在矩形視口下的效果鸭栖，而圖片7-1則被輸出為球型視口。

7-2 創(chuàng)建項(xiàng)目

首先握巢，我們需要創(chuàng)建一個(gè)Unity項(xiàng)目晕鹊，創(chuàng)建幾何對象并導(dǎo)入通過照片創(chuàng)建球型視口三維環(huán)境的資源。在執(zhí)行該步驟時(shí)，該項(xiàng)目還不需要在Android平臺上運(yùn)行溅话，也不要Cardboard晓锻。實(shí)際上，我們只是建立并預(yù)覽了該工程文件飞几，以確保建立了一個(gè)正確的三維場景砚哆。

7-2-1 獲取軟件，硬件與樣本代碼

如果你想重建該項(xiàng)目屑墨，你需要獲得以下項(xiàng)目：

· Unity3D 5.2版本或更高躁锁。此處可在......處下載

· 面向Unity的Cardboard SDK開發(fā)環(huán)境以及該開發(fā)環(huán)境的指示說明

· 一個(gè)具有側(cè)懸掛開關(guān)的Google Cardboard觀看器，此處需要一個(gè)側(cè)懸掛電磁開關(guān)卵史。購買鏈接在主頁

· 一個(gè)能運(yùn)行Cardboard VR的安卓手機(jī)战转，作者此處使用了NEXUS 5生成和測試變異的應(yīng)用程序。

· 應(yīng)用程序的源代碼以躯，可以再Github上找到槐秧，此處文件夾Unity Code包含了所有的模塊，如果想一步步按照示例來做寸潦，可以把這部分代碼放到Unity項(xiàng)目的目錄下，此處文件夾360°Viewer含有一個(gè)完整的Unity 項(xiàng)目社痛，可以隨意使用见转。

7-2-2 創(chuàng)建一個(gè)新的Unity場景和工程文件

· 創(chuàng)建一個(gè)新的Unity工程文件

· 把該工程文件命名為360°Viewer

· Unity會創(chuàng)建一個(gè)只有相機(jī)和燈光的默認(rèn)場景

· 從主界面中選擇場景，Unity會建議輸入文件名來保存場景

· 將場景命名為360°Viewer蒜哀，并保存到文件夾中斩箫。

· 將全景圖像導(dǎo)入到Unity工程文件中

· 在示例代碼中找到文件夾Spherepano， 并將該文件夾導(dǎo)入到Unity工程文件的Assets中撵儿。

· 此處會有 Importing Assets的進(jìn)度條乘客，之后文件夾會被現(xiàn)實(shí)出來

· 文件夾中的每張圖像都會有一副縮略圖。

7-2-3 創(chuàng)建一個(gè)全景背景

現(xiàn)在淀歇，我們要如何把一張等距圓柱投影的360°全景圖變成一個(gè)360°的虛擬現(xiàn)實(shí)全景圖像呢易核？答案會比你想象中的簡單得多：我們只需要把圖片設(shè)置為一個(gè)球型的表面材質(zhì)即可。

首先浪默，讓我們在Unity中創(chuàng)建一個(gè)球體牡直。在Hierarchy菜單中，點(diǎn)擊鼠標(biāo)右鍵會出現(xiàn)一個(gè)創(chuàng)建對象的菜單纳决，此處選擇3DObject-sphere并創(chuàng)建該物體碰逸。在Unity中默認(rèn)的球體半徑為1，默認(rèn)材質(zhì)為灰色純色阔加。此時(shí)我們需要把球體的大小放大到10倍饵史，此時(shí)需要確保該物體的名字在Hirecrachy菜單內(nèi)為Sphere，之后再觀察者界面內(nèi)，我們需要找到球的變換組建胳喷，再下面將會看到Scale屬性湃番，分別設(shè)置xyz的值為10。此時(shí)工作界面的尺寸單元更合適厌蔽。

之后為了添加紋理牵辣，我們只需要把紋理拖動并在球型對象上松開即可。在工程界面內(nèi)奴饮，打開spherepano文件夾纬向，你會看到4站縮略圖，選擇pan0并拖拽到Hierarchy視口下的sphere對象上戴卜。此時(shí)該全景圖片已經(jīng)被成功的映射到了球面上逾条，效果如圖7-3所示。

然而投剥，目前的狀態(tài)并非溫泉正確：Unity默認(rèn)會把相機(jī)放在（0师脂，1，-10）江锨，這意味著相機(jī)的位置在地平面上方一個(gè)單位以及屏幕外10個(gè)單位吃警。

如果我們需要在虛擬現(xiàn)實(shí)應(yīng)用中觀察到全景圖像，相機(jī)的位置應(yīng)該在笛卡爾坐標(biāo)系的原點(diǎn)啄育。這樣無論用戶朝向什么房線觀看酌心，球面和相機(jī)就會始終保持相同的距離。所以我們需要回到Hierarchy面板中挑豌，選擇Main Camera安券，并設(shè)置相機(jī)的位置坐標(biāo)為（0，0氓英，0)侯勉，這樣操作可以將相機(jī)設(shè)置在原點(diǎn)處。

現(xiàn)在我們已經(jīng)創(chuàng)建了全景圖像并添加了材質(zhì)貼圖铝阐，也將相機(jī)的初始位置設(shè)定到了原點(diǎn)址貌，我們實(shí)際上即將完成工程文件的調(diào)試了，此時(shí)我們可以點(diǎn)擊預(yù)覽按鈕徘键。此時(shí)我們會觸發(fā)一個(gè)窗口芳誓，對設(shè)置好的場景在做面上進(jìn)行預(yù)覽，此時(shí)的預(yù)覽結(jié)果為圖7-4啊鸭。

這并非我們的預(yù)期锹淌，全景圖去哪了？不要擔(dān)心赠制，我們會稍后修復(fù)這個(gè)問題赂摆，我們需要下討論后端的渲染問題挟憔。

7-2-4 后端渲染

在現(xiàn)代的3D渲染系統(tǒng)中，所有的渲染工作都使用了shader組件：一段旨在計(jì)算每一個(gè)三維定點(diǎn)位置烟号，并在二維視窗內(nèi)繪制每一個(gè)像素的高級編程代碼绊谭。Unity也是如此，編輯器提供了一個(gè)標(biāo)準(zhǔn)Shader組件汪拥，此時(shí)已經(jīng)足夠用于許多場景达传，例如網(wǎng)格的著色和光照，或者在其表面添加一張紋理迫筑。此外宪赶，如果有需求場景，Unity還允許用戶開發(fā)和使用自己的shader脯燃。

標(biāo)準(zhǔn)Shader非常智能搂妻。他展示了多種多樣的優(yōu)化方法，其中一種就是背面剔除渲染法辕棚。簡單地說欲主，背面就是三角形和多邊形從觀察方向無法看到的一個(gè)面會被剔除渲染的方法。例如逝嚎，如果有一個(gè)類似于球的幾何紋理的面扁瓢，由于這些面在幾何對象的內(nèi)部，因此在大多數(shù)情況下無法被觀察到补君。 標(biāo)準(zhǔn)的Unity Shader將會將這些內(nèi)部面忽略引几，并不進(jìn)行渲染。但是當(dāng)相機(jī)從內(nèi)部朝外看是赚哗，就會像前面講解的情況一樣她紫，因此我們需要關(guān)閉背面渲染提出功能硅堆。

然而屿储，標(biāo)準(zhǔn)Unity著色器不提供類似的功能。幸運(yùn)的是渐逃，一些被開發(fā)出來的Shader代碼可以幫助我們規(guī)范并提出背面渲染的Shader够掠。

下面我們會列舉出這個(gè)Unity著色器的完整代碼，使用時(shí)需要將它添加到項(xiàng)目中茄菊。這段代碼采用了Unity著色器語言疯潭，Unity編譯器將該代碼編譯為計(jì)算機(jī)顯卡所采用的匯編編碼，注意斜體行會設(shè)置Cull Off面殖，使圖形硬件畫出圖像內(nèi)部的三角形而不是將這些面剔除竖哩。

把改代碼放入到項(xiàng)目中后，我們可以觀察全景圖了脊僚。之后我們需要將調(diào)試好的著色器賦給球面網(wǎng)格：

· 首先在代碼實(shí)例中找到DoubleSided.shader相叁， 把她拖拽到Project面板左面的Assets子面板中。

· 在Project面板右面的Detail子面板中單擊鼠標(biāo)右鍵并選擇Create-Material，命名為DoubleSided增淹， 新的材質(zhì)應(yīng)該出現(xiàn)在子面板中并被選中椿访，Inspector面板中會顯示該材質(zhì)的屬性。

· 繼續(xù)關(guān)注Project面板虑润，在該我文件架結(jié)構(gòu)中選中spherenpano成玫。此時(shí)將Project面板的右面圖像pan0拖拽到Inspector面板中DounbleSided材質(zhì)的Base紋理預(yù)覽區(qū)域。

· 在Assets自面板中選擇材質(zhì)DoubleSided拳喻，并在Hierarchy視口中將其拖拽到Sphere上哭当。

如果改動順利，我們可以看到Unity編輯器中的變化：4個(gè)視口左下角的Game視口將會顯示全景圖像的預(yù)覽舞蔽。如果將圖7-5與圖7-3進(jìn)行對比荣病，我們可以看到圖7-3左下角的預(yù)覽圖像也僅僅顯示了Unity通用的天空北京而不是全景圖像。此時(shí)我們可以得出結(jié)論：球體的正反兩面都被渲染了渗柿。

點(diǎn)擊Preview按鈕个盆，我們可以看到桌面預(yù)覽窗口如圖7-6所示，現(xiàn)在我們馬上就要成功了朵栖。

7-3. 添加Cardboard VR的支持

到現(xiàn)在為止我們還沒有關(guān)注過Cardboard VR的設(shè)置和在Android平臺上生成應(yīng)用的過程颊亮。我們現(xiàn)在想要建立一個(gè)正常工作的三維全景圖像。二正如你看到的那樣陨溅，在把Vr界面渲染到Cardboard VR上并在手機(jī)上運(yùn)行仍需要一些工作终惑，這也是本節(jié)接下來要著重介紹的。

為了讓Cardboard能支持該應(yīng)用程序门扇，我們需要將Cardboard SDK導(dǎo)入到Unity項(xiàng)目中雹有，此時(shí)我們應(yīng)該按照以下步驟：

· 找到在Unity IDE中的工程標(biāo)簽頁，并選擇Assets-Import package進(jìn)行素材包的導(dǎo)入

· 你會看到一個(gè)文件對話框臼寄，用該對話框找到Unity SDK的下載位置霸奕。

· 選擇文件 Cardboard SDK For Unity， unity package吉拳，如果是通過克隆GitHub來進(jìn)行下載质帅，可以在根目錄下找到他。

· 如果你點(diǎn)擊了Open留攒， Unity會自動掃描文檔并給你提供一個(gè)可以導(dǎo)入內(nèi)容的表單煤惩。然后把所有的包Double導(dǎo)入到項(xiàng)目中，選中列表中所有的項(xiàng)目炼邀，并單擊import按鈕魄揉，就能在Assets面板中看到這些之前沒有被導(dǎo)入的資源。

現(xiàn)在我們可以吧Cardboard 立體渲染和頭部跟蹤分工控制器添加到場景中了拭宁。在Project面板中找到名為Cardboard Main的Prefab洛退，并選擇文件夾 Prefabs票彪，會在Detal面板中出現(xiàn)每一個(gè)Prefab的圖標(biāo)，在這個(gè)面板內(nèi)把Cardboard main拖拽到Hierarchy面板中不狮，就可以吧Prefab添加到場景中降铸。

現(xiàn)在我們可以在桌面上預(yù)覽你的場景了。該場景應(yīng)該和圖7-7中顯示的截圖類似

接下來摇零，我們需要確保一切順利：是時(shí)候在手機(jī)上檢查了推掸。查看前面章節(jié)的內(nèi)容以建立一個(gè)安卓的Build：

· 在Unity主菜單中選擇File-build Settings， 打開Build Settings 對話框驻仅。

· 在左下角的平臺列表中選擇Android谅畅，然后點(diǎn)擊Switch Platform。

· 把建立的場景添加到Build欄目中噪服。這個(gè)操作會打開Inspector菜單一設(shè)置Plater Settings面板毡泻，找到Bundle Identifier設(shè)置，并把該設(shè)置改為一個(gè)合理的Android 應(yīng)用包的名字粘优。此時(shí)應(yīng)該改變Unity提供的默認(rèn)值仇味，否則Unity會在編譯過程中報(bào)錯(cuò)。作者使用了vr.cardboard作為名字雹顺。此處同樣需要把最低要求的API版本更新為安卓4.4丹墨。

· 選擇resolution和Presentation選項(xiàng)，并把玩家設(shè)定從默認(rèn)朝向改為景觀左側(cè)嬉愧。

· 最后贩挣，回到Build Settings對話框并插入手機(jī)，點(diǎn)擊Build & Run按鈕没酣。此時(shí)我們需要提供保存.apk文件王财，因此需要為他提供一個(gè)文件名。我選擇了360°Viewer作為文件名裕便，這里是在你的應(yīng)用程序菜單上所需要顯示的名稱绒净，點(diǎn)擊保存以把.apk文件進(jìn)行保存。

如果一切進(jìn)展順利闪金，Unity會吧你所做的安卓程序包推送到手機(jī)上并打開該app疯溺。把你的手機(jī)放入Cardboard Viewer中论颅，嘗試進(jìn)行調(diào)試并戴上這個(gè)設(shè)備沒看一看周圍：你會看到一個(gè)成功的3D全景圖了哎垦！書中的圖7-8展示了成功版本的軟件的一個(gè)截圖畫面。

之后我們還需要進(jìn)行一些小的調(diào)整：例如你可以看到恃疯，在你觀察Cardboard Viewer時(shí)漏设，全景圖像的會出現(xiàn)一些黑色區(qū)域和閃爍。這是因?yàn)楣庹盏脑蚪裢Ｔ谶@個(gè)場景中我們沒有用到廣元郑口，但是Unity在除此創(chuàng)建項(xiàng)目是默認(rèn)的放置了一個(gè)光源鸳碧。在Hierarchy面板中找到名為Directional Light的項(xiàng)目，把它刪除犬性。而且我們也不需要默認(rèn)相機(jī)這個(gè)組件瞻离，此處同樣可以將它刪除。

我們可以嘗試在這個(gè)瀏覽器內(nèi)觀察另一張照片乒裆。在Project 面板中套利，我們可以在spherepano下選擇Pan2的縮略圖，并把它拖拽到Hierarchy的球上鹤耍。確定運(yùn)行桌面玉蘭是否正常肉迫，然后點(diǎn)擊Build And Run沒帶上瀏覽器設(shè)備，我們就可以看到新的全景圖了：Yosemite大峽谷的天空稿黄。你同樣會看到在Materials文件夾內(nèi)出現(xiàn)了一個(gè)新的材質(zhì)：pan2喊衫。在你把文件從資源中拖拽到面板內(nèi)球上的時(shí)候，Unity自動為你創(chuàng)建了這個(gè)材質(zhì)杆怕。這個(gè)新材質(zhì)的Shader屬性也同樣被設(shè)置為了Doublesided著色器族购，因?yàn)閁nity會記憶上一個(gè)材質(zhì)的屬性并應(yīng)用于當(dāng)前材質(zhì)。

現(xiàn)在幾乎大功告成了陵珍。我們可以使用自己的360°圖像查看器來體驗(yàn)各種全景圖片了联四，但我們不愿意每次都在編輯器中切換圖像并重新生成軟件。所以我們要制作一個(gè)用戶交互界面撑教，以便在應(yīng)用程序內(nèi)部進(jìn)行圖像的切換朝墩。

7-4 創(chuàng)建一個(gè)基于視線-點(diǎn)擊的用戶界面

如果你已經(jīng)嘗試使用了一段時(shí)間的虛擬現(xiàn)實(shí)設(shè)備，那你肯定對基于視線跟蹤與點(diǎn)擊的交互界面很熟悉了伟姐。VR場景包含了很多漂浮的物體收苏，實(shí)質(zhì)上是一些三維圖標(biāo)，當(dāng)你注視這些圖標(biāo)時(shí)愤兵，這些圖標(biāo)會被標(biāo)記為高亮鹿霸。如果我們觸摸屏幕，點(diǎn)擊鼠標(biāo)或者進(jìn)行其他方式的交互之后秆乳，我們就會觸發(fā)某種行為懦鼠。

對于Cardboard來說，最流行的輸入方式就是傳統(tǒng)的電磁開關(guān)或者類似的觸摸開關(guān)屹堰。例如Dodocase里榮國Popsicle Stick進(jìn)行輸入肛冶，當(dāng)該物體觸摸手機(jī)屏幕表面是，它實(shí)際上是通過彎曲一塊電容塑料來產(chǎn)生于一個(gè)屬于安卓的用戶觸碰時(shí)間扯键，并模擬手指的觸摸睦袖，此時(shí)我們假設(shè)已經(jīng)有了一套具有電磁開關(guān)的Cardboard模型。這里我們會構(gòu)建一個(gè)有四個(gè)方形的半透明圖標(biāo)的簡單交互界面荣刑。他們位于倒數(shù)個(gè)第三個(gè)視圖內(nèi)馅笙，當(dāng)我們注視某個(gè)圖標(biāo)時(shí)伦乔，這個(gè)圖標(biāo)會變得不透明，并選中我們對應(yīng)的圖像董习。此時(shí)如果對電磁開關(guān)進(jìn)行觸發(fā)就會激活該圖標(biāo)烈和，并切換當(dāng)前瀏覽全景圖。在開始創(chuàng)建交互界面之前皿淋，我們需要進(jìn)行一些清理工作斥杜。在Material界面下找到pan0材質(zhì)。選擇該材質(zhì)沥匈，并重命名為PanoMaterial蔗喂。。這是全景圖的球面材質(zhì)名稱高帖，此處將創(chuàng)建四種材質(zhì)缰儿，每一種對應(yīng)一個(gè)界面圖標(biāo)，在制作更多物體之前散址，我們需要進(jìn)行材質(zhì)管理乖阵，用同樣的方法刪除名為pan1的材質(zhì)，這是我們在7-3中吧第二個(gè)全景圖拖到球面上時(shí)創(chuàng)建的预麸。

如果要創(chuàng)建而為平面瞪浸，我們需要制作一些三維圖表，此時(shí)我們需要使用扁平的方形對象吏祸。這里將從制作一個(gè)圖標(biāo)開始对蒲，設(shè)置正確的屬性并為其添加事件來控制塔。在制作好一個(gè)圖表之后贡翘，其他的圖標(biāo)都可以從第一個(gè)復(fù)制出來蹈矮。

在Hierarchy面板中，點(diǎn)擊鼠標(biāo)右鍵并選擇平面組件鸣驱。這會在場景中添加面向一個(gè)水平方向的放行對象泛鸟，我們在此處把對象重命名為PanoItem0。這個(gè)對象需要面對用戶而非平放踊东，所以我們需要給組件的rotation設(shè)置變換為（90北滥，180，0）闸翅，這個(gè)操作會讓平面沿著X軸向旋轉(zhuǎn)再芋，而且面對用戶。此外缎脾，我們還需要把這個(gè)對象放大到一個(gè)合適的大小祝闻，所以我們需要把組件的Scale設(shè)置為（0.05占卧，0.05遗菠，0.05）联喘，并把組建的Position設(shè)置為（0，0辙纬，2）豁遭，這箱操作會讓圖標(biāo)沿著z軸退回2個(gè)單位，并處在x和y方向的正中央贺拣。此時(shí)我們可以帶上觀看器觀看蓖谢，以測試如下的實(shí)現(xiàn)操作。

現(xiàn)在我們需要設(shè)置材質(zhì)譬涡。在Hierarchy面板中選中PanoItem0闪幽，并將Project面板中的pan1紋理拖拽到PanoItem0上，此時(shí)在平面上我們可以看到冰川點(diǎn)的全景紋理涡匀。然后我們需要設(shè)置圖像的透明度：我們需要選定PanoItem0的材質(zhì)組件盯腌，并把Shader組件的屬性修改為Standard。

在Inspector面板中陨瘩，點(diǎn)擊材質(zhì)名字旁邊的小箭頭可以展開材質(zhì)屬性腕够。在主Map界面中，我們可以看到紋理映射相關(guān)的屬性：在Albedo屬性旁邊我們就可以看到第二章全景圖的縮略圖舌劳。在縮略圖的右邊帚湘，會有一個(gè)彩色的矩形以表達(dá)該材質(zhì)當(dāng)前顯示的顏色。雙擊該選項(xiàng)啟動材質(zhì)顏色的選擇界面甚淡，在輸入框A里吧Alpha值設(shè)置為128大诸，此時(shí)A被設(shè)置為了一種半透明材質(zhì)。之后回到Inspector面板贯卦，找到材質(zhì)的Rendering Mode屬性底挫，設(shè)置為半透明。

在我們完成了上述操作之后脸侥，可以點(diǎn)擊Preview按鈕建邓，我們可以看到如圖7-9的圖像：第二章全景圖的半透明方形圖標(biāo)顯示在視窗的中央，而這就是我們創(chuàng)建的第一個(gè)圖標(biāo)睁枕。

創(chuàng)建完成一個(gè)按鈕后官边，我們需要制作一個(gè)完整的用戶交互界面。由于完成了一個(gè)圖標(biāo)，此處我們將把該圖標(biāo)復(fù)制來生成其他三個(gè)圖標(biāo)。我們可以按如下步驟進(jìn)行操作：

· 在Hierarchy面板中選擇PanItem0找爱，到Inspector面板中設(shè)置Position為（-1些举，2，-1彰檬，2），之后該圖標(biāo)就會被放在場景的左下角惹盼。

· 在Hierarchy面板中選擇PanoItem0妄辩，然后單擊鼠標(biāo)右鍵選擇Copy惑灵，再單擊鼠標(biāo)右鍵選擇Paste每次是我們可以看到PanoItem（1）出現(xiàn)在了上面的層次結(jié)構(gòu)圖中。重復(fù)這一個(gè)步驟兩次眼耀，我們會得到PanoItem2和PanoItem3兩個(gè)對象英支，之后可以按照相等的間距推測出以下幾個(gè)對象的Position。

此時(shí)我們進(jìn)入Game預(yù)覽哮伟，在場景下方我們可以看到四個(gè)橫著排列的圖標(biāo)干花。

現(xiàn)在我們需要把圖標(biāo)的紋理改成不同的圖片，否則每個(gè)圖表看起來都是一樣的楞黄。在Project面板中打開spherepano池凄，我們可以看到每個(gè)紋理的縮略圖，此時(shí)我們可以把他們分別拖拽到Hiearchy面板中對應(yīng)的對象上鬼廓，分別拖拽成功之后在game預(yù)覽會出現(xiàn)更新后的紋理修赞。

此時(shí)我們可以進(jìn)行最后一步：由于拖拽的新紋理會導(dǎo)致Unity自動創(chuàng)建新的材質(zhì)，所以我們需要設(shè)置每個(gè)材質(zhì)的著色器桑阶，透明度和渲染模式柏副。回到第一個(gè)圖標(biāo)蚣录，并找到Inspector中的材質(zhì)組件割择，并確定Shader被設(shè)置為了Standard，雙擊Albedo旁邊的顏色縮略圖萎河，在彈出的顏色選擇界面設(shè)置alpha值為128荔泳，并把RenderingMode設(shè)置為Transparent，其他材質(zhì)也需要進(jìn)行同樣的設(shè)置虐杯。

最后我們可以測試一下效果：把手機(jī)連接到計(jì)算機(jī)上玛歌，并在菜單中選擇File-build standard，并點(diǎn)擊Build and run按鈕擎椰。當(dāng)Unity把我們做好的Android應(yīng)用包載入到手機(jī)中后支子，程序會自動啟動。把我們的手機(jī)插入到Cardboard觀看器中并試著旋轉(zhuǎn)方向达舒，注釋每一個(gè)圖標(biāo)并按下電磁開關(guān)值朋，我們就可以享受大量的360°全景照片了！

到現(xiàn)在為止巩搏，我們已經(jīng)完成了第一個(gè)可用的虛擬現(xiàn)實(shí)應(yīng)用程序昨登，恭喜！