《VR平院校史館》的設(shè)計(jì)與實(shí)現(xiàn)

彭偉國(guó) 李文松

平頂山學(xué)院 計(jì)算機(jī)學(xué)院（軟件學(xué)院） 河南 平頂山 467000

引言

在平頂山學(xué)院60華誕之際，2019年10月平頂山學(xué)院（以下簡(jiǎn)稱(chēng)平院）校史館正式落成開(kāi)放。開(kāi)發(fā)一款VR版的平院校史館，校內(nèi)外師生和游客可通過(guò)網(wǎng)絡(luò)身臨其境的去參觀校史館，是線上展示校情的平臺(tái)和窗口，以增強(qiáng)師生的集體榮譽(yù)感、時(shí)代責(zé)任感，提升學(xué)校的社會(huì)美譽(yù)度，達(dá)到良好的教育宣傳效果。

1 項(xiàng)目策劃

通過(guò)已有校園虛擬漫游項(xiàng)目分析，可知大部分項(xiàng)目在場(chǎng)景上主要呈現(xiàn)的是三維模型、圖片、文字等，在交互功能上主要有交互式地圖、漫游路線、圖片展示、語(yǔ)音解說(shuō)等。VR平院校史館在項(xiàng)目策劃上，吸取了已有類(lèi)似項(xiàng)目交互設(shè)計(jì)的先進(jìn)經(jīng)驗(yàn)，將VR項(xiàng)目交互形式分成圖文交互、視頻觀看、語(yǔ)音解說(shuō)、答題測(cè)試、圖片消消樂(lè)等多種形式，在不失趣味性的前提下，真實(shí)還原平院校史館的實(shí)際場(chǎng)景布局。為此，本項(xiàng)目在功能策劃上有注冊(cè)與登錄、虛擬漫游、虛擬交互、校史導(dǎo)學(xué)、小游戲等。

2 項(xiàng)目實(shí)現(xiàn)技術(shù)

本項(xiàng)目使用主流的Unity引擎進(jìn)行開(kāi)發(fā)；用戶(hù)借助HTC VIVE設(shè)備，可以通過(guò)戴頭盔、拿手柄的方式實(shí)現(xiàn)對(duì)角色的控制；開(kāi)發(fā)過(guò)程中采用單例設(shè)計(jì)模式，使項(xiàng)目滿(mǎn)足“高內(nèi)聚、低耦合”的需求。本項(xiàng)目的3D場(chǎng)景使用Maya建模軟件進(jìn)行制作，然后使用C#編程語(yǔ)言實(shí)現(xiàn)交互功能。

3 項(xiàng)目詳細(xì)設(shè)計(jì)

3.1 場(chǎng)景設(shè)計(jì)

本項(xiàng)目的場(chǎng)景主要由房屋建筑、展板、桌子、燈等一些物品組成。房屋建筑主要是參考現(xiàn)實(shí)中的校史館進(jìn)行設(shè)計(jì)，場(chǎng)景總共分為四個(gè)部分。第一個(gè)部分主要是由一間房子劃分開(kāi)來(lái)，中間豎立著平頂山學(xué)院的牌子；第二個(gè)部分是一個(gè)走廊加一個(gè)方形的房子，中間豎立一個(gè)圓柱，圓柱上面是一個(gè)像扇子一樣的建筑；第三個(gè)部分是一個(gè)走廊和一個(gè)圓形展臺(tái)建筑；第四個(gè)部分是一個(gè)圓形建筑加上一個(gè)圓臺(tái)。

VR校史館虛擬場(chǎng)景里面有許多展板，分為前言展板、內(nèi)容展板、后記展板。前言展板主要介紹?；铡⑿Ｓ?xùn)、校歌、校史的簡(jiǎn)介；內(nèi)容展板主要有校史模塊、院系模塊、黨建模塊、民主管理、團(tuán)學(xué)活動(dòng)、學(xué)校規(guī)劃；后記展板主要是回望歷史、審視當(dāng)下和展望未來(lái)，全力譜寫(xiě)新時(shí)代平頂山學(xué)院的絢麗華章。

玩家以虛擬的第一視角的形式，在場(chǎng)景里面游走，手握HTCVIVE手柄、頭戴頭顯設(shè)備來(lái)操作虛擬人物以達(dá)到體驗(yàn)的效果。

3.2 功能設(shè)計(jì)

依據(jù)項(xiàng)目交互功能設(shè)計(jì)，項(xiàng)目設(shè)計(jì)了登錄注冊(cè)界面、開(kāi)始界面、加載界面、視頻播放界面、答題界面、消消樂(lè)界面、柱狀圖界面等UI界面。在功能設(shè)計(jì)上，以面向?qū)ο蟪绦蛟O(shè)計(jì)思想為指導(dǎo)，運(yùn)用C#語(yǔ)言編寫(xiě)交互腳本，通過(guò)類(lèi)圖的形式設(shè)計(jì)了登錄與注冊(cè)功能、虛擬漫游功能、虛擬交互功能、校史導(dǎo)學(xué)功能、小游戲功能等方面。在此，以虛擬交互功能設(shè)計(jì)為例進(jìn)行詳細(xì)闡述。

在虛擬現(xiàn)實(shí)系統(tǒng)中，用戶(hù)與虛擬世界之間要實(shí)現(xiàn)自然的交互，必須采用特殊的輸入輸出設(shè)備，用以識(shí)別用戶(hù)的各種信息輸入，并實(shí)時(shí)生成逼真的反饋信息。VR輸入設(shè)備如動(dòng)作捕捉、手勢(shì)識(shí)別、聲音感知等體感類(lèi)設(shè)備，通過(guò)感知用戶(hù)輸入信息，與虛擬世界進(jìn)行交互，輸入設(shè)備是實(shí)現(xiàn)消費(fèi)者交互、沉浸感的重要技術(shù)[1]。

根據(jù)設(shè)計(jì)，本項(xiàng)目就是要借助HTC VIVE設(shè)備來(lái)實(shí)現(xiàn)這個(gè)功能。兩個(gè)帶有按鈕和振動(dòng)反饋的手柄，一個(gè)可以看見(jiàn)虛擬場(chǎng)景的頭盔，它們會(huì)實(shí)現(xiàn)用戶(hù)與虛擬世界的交互。首先就是設(shè)備如何使用，怎么才算連接成功，其次是怎么獲取手柄的接口，最后就是通過(guò)按鈕與虛擬世界的交互。

虛擬交互功能是在Control Manage類(lèi)里面實(shí)現(xiàn)，hand變量是指兩個(gè)手柄，m_pose變量是指手柄的動(dòng)作，m_Touch變量是指手柄圓盤(pán)的位置，類(lèi)圖如圖1所示：

圖1 虛擬交互功能類(lèi)圖

4 項(xiàng)目詳細(xì)實(shí)現(xiàn)

4.1 場(chǎng)景實(shí)現(xiàn)

場(chǎng)景中主要由房子、展臺(tái)、圓柱、展板、燈等物體組成，對(duì)于場(chǎng)景的實(shí)現(xiàn)，一是模型的制作、貼圖的制作，二是場(chǎng)景的布局（展板的位置、大小等內(nèi)容）。

根據(jù)項(xiàng)目設(shè)計(jì)總共有四個(gè)房間，運(yùn)用Maya軟件先制作出墻體的形狀，然后通過(guò)復(fù)制、移動(dòng)、壓扁、調(diào)整位置，制作出房子形狀；通過(guò)Maya多切割工具和擠壓工具形成房頂上的各種形狀；然后，創(chuàng)建幾個(gè)立方體，用來(lái)制作展板、展臺(tái)、攝像頭等房屋設(shè)施；針對(duì)房屋每個(gè)部分進(jìn)行UV操作，保存圖片在Photoshop軟件里做貼圖，然后在Maya里面添加材質(zhì)；最后，在Maya里將模型導(dǎo)出，格式為fbx，然后將它導(dǎo)入到Unity。

前言展板、內(nèi)容展板、后記展板制作步驟幾乎一樣，都是創(chuàng)建Text和Image，并改變其內(nèi)容和參數(shù)。

4.2 功能實(shí)現(xiàn)

從VR環(huán)境搭建、VR按鍵和頭盔、VR視頻播放三方面為例分析本項(xiàng)目功能的實(shí)現(xiàn)。

（1）VR環(huán)境搭建

HTC VIVE是一款虛擬頭盔，是VR虛擬現(xiàn)實(shí)交互設(shè)備，HTC Vive套件由頭戴式顯示器（HMD)、兩個(gè)基站、兩個(gè)無(wú)線操控手柄和一個(gè)串流盒構(gòu)成[2]。VR環(huán)境搭建分為兩個(gè)步驟，第一步驟是SteamVR的導(dǎo)入，第二步驟是Player的設(shè)置。

1）SteamVR的導(dǎo)入

從Unity Asset資源商店里導(dǎo)入SteamVR插件；在Unity中將PlayerSetting的設(shè)置為OpenVR；打開(kāi)Window下的SteamVRInput編輯界面，默認(rèn)的default不用改，Actions 下In則為要輸入的事件，out為輸出事件；點(diǎn)擊In里面的“+”，Name為當(dāng)前事件的名字，Type為事件的返回值類(lèi)型，Required目前測(cè)試3種選擇沒(méi)有區(qū)別，Localized String直接設(shè)置為當(dāng)前事件的名字一樣即可；定義一個(gè)觸摸板觸摸事件，類(lèi)型為boollean，編輯完后點(diǎn)擊save and generate按鈕就可以把這個(gè)事件寫(xiě)入到SteamVR_Input_ActionSet_default_In；點(diǎn)擊Open binding UI按鈕，進(jìn)行手柄按鍵的操作。

2）Player的設(shè)置

找到SteamVR示例場(chǎng)景Player，將其拖到場(chǎng)景中即可實(shí)現(xiàn)基礎(chǔ)的瀏覽；調(diào)整合適大小，然后將其放入場(chǎng)景的第一個(gè)地方；選中Player添加相應(yīng)的代碼，對(duì)其進(jìn)行設(shè)置；運(yùn)行場(chǎng)景，如果能夠在頭盔里面看到場(chǎng)景的話，表示設(shè)置成功。

（2）VR手柄按鍵

1）獲取手柄按鍵的方法是聲明一個(gè)Hand類(lèi)型的變量，通過(guò)SteamVR_Input.GetStateDown方法獲取手柄按鍵。

2）手柄按鍵獲取后就要檢測(cè)與場(chǎng)景中UI的交互了，此時(shí)向Canvas物體中掛在SteamVRLaserWrapper腳本。

3）SteamVRLaserWrapper腳本主要實(shí)現(xiàn)射線與UI的碰撞問(wèn)題，首先引出OnPointerClick、OnPointerOut、OnPointerIn三個(gè)方法，然后連接EventSystem中的檢測(cè)方法，最后添加到相應(yīng)的事件上。

（3）VR視頻播放

視頻播放子功能主要是指用戶(hù)點(diǎn)擊按鈕進(jìn)行視頻的播放，它主要把視頻渲染到了UI界面上，然后將內(nèi)容展現(xiàn)給用戶(hù)。

本功能在PlayVideoOnUGUI類(lèi)和SliderEvent類(lèi)里面實(shí)現(xiàn)，PlayVideoOnUGUI類(lèi)和SliderEvent類(lèi)是依賴(lài)關(guān)系。PlayVideoOnUGUI類(lèi)處理是視頻加載邏輯，SliderEvent類(lèi)處理的是進(jìn)度條邏輯，ShowVideoTime方法處理的是進(jìn)度條顯示視頻時(shí)間的邏輯，類(lèi)圖如圖2所示：

圖2 視頻播放功能類(lèi)圖

該功能的主要實(shí)現(xiàn)，有以下幾個(gè)步驟：

1）在video組件里掛上PlayVideoOnUGUI腳本并且將相應(yīng)的Button添加上實(shí)踐。

2）在PlayVideoOnUGUI類(lèi)里面，首先將視頻渲染到原先定義好的UI界面上，獲取videoPlayer組件和rawImage組件，然后在Update里面將videoPlayer的texture賦值給rawImage的texture，最后在場(chǎng)景中就可以看到視頻在播放。

3）在PlayVideoOnUGUI類(lèi)里面，實(shí)現(xiàn)播放、暫停、關(guān)閉功能就要用到Bool指isPause和isClose，當(dāng)isPause為false且isClose為false時(shí)，用Play()方法來(lái)讓視頻播放；當(dāng)isPause為true且isClose為false時(shí)，用Pause()方法來(lái)讓視頻暫停；當(dāng)isPause為true且isClose為true時(shí)，用Stop()方法來(lái)讓視頻暫停并且讓原先的圖片將視頻替換掉。

4）實(shí)現(xiàn)進(jìn)度條功能，首先是ShowVideoTime方法，先獲取當(dāng)前的視頻播放時(shí)間，再將當(dāng)前視頻播放的時(shí)間顯示在 Text上，后把當(dāng)前視頻播放的時(shí)間比例賦值到Slider 上，然后就是在Update方法里面調(diào)用此方法，最后實(shí)現(xiàn)時(shí)間實(shí)時(shí)更新的效果。

5）在SliderEvent類(lèi)里面，創(chuàng)建SetVideoTimeValueChange方法，目的是當(dāng)前的 Slider 比例值轉(zhuǎn)換為當(dāng)前的視頻播放時(shí)間，然后在OnDrag方法里調(diào)用此方法并將isPause改為true，最后再OnEndDrag方法里將isPause改為false。

6）最后通過(guò)運(yùn)行場(chǎng)景，用戶(hù)可以點(diǎn)擊這些按鈕。界面效果如圖3所示：

圖3 VR視頻播放效果圖

5 結(jié)束語(yǔ)

VR平院校史館項(xiàng)目的實(shí)現(xiàn)，用戶(hù)從入館前到入館后有十幾個(gè)任務(wù)點(diǎn)，用戶(hù)完成一個(gè)任務(wù)之后才能進(jìn)入下一個(gè)任務(wù)點(diǎn)。任務(wù)分為圖文交互、視頻觀看、答題測(cè)試、圖片消消樂(lè)等。技術(shù)實(shí)現(xiàn)上，該項(xiàng)目使用主流的Unity引擎進(jìn)行開(kāi)發(fā)，用戶(hù)可以通過(guò)戴頭盔、拿手柄的方式在VR校史館內(nèi)進(jìn)行虛擬漫游和交互，能讓平院師生去通過(guò)虛擬環(huán)境了解平院六十年的發(fā)展史，增強(qiáng)了平院師生的集體榮譽(yù)感和時(shí)代責(zé)任感。