基于增強現實技術的沉浸式交互應用設計

楊 路，王 松，劉逸豪

(1.安徽公安職業學院，安徽 合肥 230031；2.南京工業大學，江蘇 南京 211816；3.中國電信安徽公司，安徽 合肥 230000；4.合肥市公安局，安徽 合肥 230031)

0 引言

信息化1.0 階段的特點在于用計算機技術把信息以數字化的形式重新呈現，信息應用停留在以PPT 為代表的被動式二維空間演示層面，以展示與傳遞為主，且提供的數字化資源交互性較差，對用戶的吸引力弱，用戶使用的積極性、主動性不足［1-5］。面對上述現狀，從提升用戶的空間使用意愿為切入點，進行了增強現實（Augmented Reality，簡稱AR）技術設計。作為虛擬現實（Virtual Reality，簡稱VR）技術的重要分支，AR 借助計算機技術將包含各種虛擬對象的虛擬空間與現實環境對象相疊加，當攝像頭掃描到標識物后會在屏幕上呈現虛擬空間，產生良好的場景沉浸感，大大提高用戶的視覺體驗，同時提供與虛擬對象自然的交互功能，賦予用戶主動權，激發內在的使用興趣與動力，讓用戶主動沉浸其中，提升應用的信息傳遞效果。

1 設計思路

應用設計主要包括三個部分：（1）建立虛擬空間，包括文本、圖片、音視頻、模型等。（2）識別標識物并顯示虛擬空間，實現虛實融合。本文識別兩種標識物：圖片和平面。（3）人機交互，用戶能夠以手姿方式與虛擬空間進行交互獲得相關信息。應用運行后開啟攝像頭，當攝像頭掃描到真實環境中的標識物后即顯示虛擬空間，用戶可以通過手姿等方式實現交互，充滿趣味性，兩種標識物的設計降低了應用使用的空間限制。

2 設計環境與流程

2.1 軟硬件環境

應用設計的硬件運行環境有移動式和頭戴式兩類。考慮到頭戴式設備造價不菲，技術還在完善中，而智能手機等移動設備已經普及，本文采用An?droid 智能手機設備作為硬件平臺。軟件環境負責建立虛擬空間、實現虛實融合和交互功能，選擇Uni?ty3D 生成虛擬信息，虛實融合開發包采用PTC 的Vuforia 和Google 的ARCore。Vuforia 支 持2D/3D 識別，掃描真實物體進行識別、虛擬按鍵，尤其是使用Vuforia 檢測圖片，所以基于Unity3D+Vuforia［6-8］設計圖片識別應用。考慮到圖片標識物并不是隨處可見，選擇平面作為第二種標識物，提高應用的實用性。Vuforia 的Ground plane 可用于平面檢測，但在測試中發現其功能不穩定，漂移和抖動現象時常出現，且運行時設備的發熱量較大。ARCore 是Google 開發的用于創建AR 的SDK，可進行位置跟蹤、標識關鍵點并構建虛實融合的世界，還可以實現平面檢測，因此基于Unity3D+ARCore 設計平面檢測應用，交互腳本采用C#編寫。

2.2 設計流程

設計流程如圖1所示。（1）新建Unity3D工程，導入Vuforia/ARCore 插件包。（2）基于Vuforia的項目添加ARCamera 和ImageTarget，前者代表攝像頭，后者代表要識別的圖片。在Vuforia 官網下載圖片標識物的數據庫文件并導入Unity3D 工程，在ImageTar?get的Database 屬性選擇導入的數據庫，Image Target屬性選擇要識別的圖片，這樣在Unity3D 下的主窗口就可以看到圖片了；基于ARCore 的項目添加AR?Core Device和Environment Light，前者負責與設備相關的操作，包括更新檢測的平面、設備位置等，后者處理光照相關事宜。（3）布置虛擬空間，圖片識別的虛擬空間安放在ImageTarget 下，根據應用設計布置在圖片的合適位置，在ARCore 的平面檢測中，首先定義一個空白對象，在它的Inspector 窗口掛載可視化框架腳本appcontroller，appcontroller 上掛載AR?Core Device 的First Person Camera 和要顯示的虛擬空間的prefab即可。（4）編寫交互腳本并進行測試。

圖1 應用設計流程圖

3 應用設計

3.1 基于Unity3D+Vuforia的圖片識別應用設計

3.1.1 虛擬空間

UGUI 是Unity3D 內置用于虛擬空間開發的系統，包含Canvas 和EventSystem 兩個基本對象。Can?vas 是畫布，場景中所有UI 對象（如Text、Image 等）都是它的子對象，支持Screen Space-Overlay、Screen Space-Camera 和World Space 三種UI 渲染模式，應用需要在UI 上顯示3D 物體，選擇Screen Space-Camera 模式。虛擬空間主要包括Text、Image、But?ton、Audio、Video Playerback、VirtualButton 和三維模型等元素。Text控件用來顯示特定文本信息，Image控件用來做界面圖表或界面裝飾，由于Image 只能用來顯示Sprite，要先把圖片類型修改為Sprite 才能顯示。Button 是按鈕交互式控件，Audio用于音頻播放，joystick 是easy touch 提 供 的 虛 擬 搖 桿，Video Playerback 和VirtualButton 是Vuforia 提供用來實現視頻播放和虛擬按鍵的預設件。音視頻是虛擬空間設計的關鍵點，GameObject-＞CreateEmpty 創建Audio 對象，選中對象的Inspector-＞Add Component添加Audio Source，在Audio Source 的AudioClip 選擇要播放的音頻文件，ARcamera 為Audio Listener。考慮到距離對音頻源音量的影響，聲音文件要設置為2D sound。下載并導入Video Playback，在Assets-＞Vuforia Video Playback-＞prefabs 下找到Video 并作為子對象放到ImageTarget 下，查看Video 的Video Playback Behaviour 屬性，Path 表示要播放的視頻路徑，Vuforia 支持兩種方式使用視頻文件：（1）本地文件，視頻資源放在Assets-＞StreamingAssets 文件夾中，在Path 中輸入視頻完整的名字+后綴即可。（2）網絡視頻，以URL形式訪問，應用選擇本地文件。

3.1.2 圖片識別

包括官網操作與Unity3D 操作兩部分，步驟如下。（1）官網操作，注冊Vuforia 官網賬號，登錄后點擊Develop -＞License Manager -＞Get Development Key，在這里自定義應用的名稱，選擇應用運行平臺類型。因為應用運行在智能手機平臺，所以選擇Mobile。完成后能看到自己創建的新應用，點擊應用名稱，復制license key，在Unity3D 中需要使用。下一步選擇Target Manager-＞Add Database，定義新建數據庫的名稱，選擇設備類型，這里要注意，Vufo?ria提供了免費和付費兩種服務，免費服務下設備類型只能選擇Device，付費用戶可以選擇Cloud 云端服務。新建數據庫后點擊名稱進行添加操作，點擊Add Target，這里是圖片識別，選擇Single Image，點擊Browse 上傳圖片標識物，Name 自定義，點擊Add完成操作后下載圖片標識物的數據庫文件，該文件包含了圖片識別的關鍵特征信息，攝像頭掃描時會把檢測信息與數據庫文件信息進行實時匹配［9-11］。從提高識別率的角度，建議盡量選擇包含尖銳信息、重復信息少的圖片作為標識物。因為開發環境是Unity3D，下載數據庫開發平臺選擇Unity Editor。（2）Unity3D 操作，導入Vuforia 和圖片標識物的數據庫文件，把ARCamera 和ImageTarget 拖到項目窗口中并刪除main camera。點擊ARCamera，把上一步復制的key 放到App License Key 里，加載數據庫并激活。點擊ImageTarget，在Database 和Image Target中選擇要識別的圖片，把3.1.1節建立的虛擬空間放到ImageTarget 下面即可。需要注意的是可能出現添加了ImageTarget 和選擇Database 后要識別的圖片變成白色色塊，看不到本來內容的情況。解決辦法如下：在Unity3D 的project-＞editor-＞QCAR-＞Im?ageTargetTexture 下找到導入的圖片標識物文件夾，在里面找到要識別的圖片，點擊查看Inspector，把Texture Type 改成Default，Texture Shape 改成2D，保存后再去查看，圖片就能正常顯示。

3.1.3 人機交互

人機交互包括兩類［12］：一類是移動類交互，另一類是按鍵類交互。移動類交互保證用戶通過手姿或虛擬搖桿控制位移變換，實現方式有兩種：一是借助插件，如easy touch、leantouch 等，二是借助Unity3D 提供的Input 類自定義編程實現，本文采用easy touch 插件，流程如下：（1）下載easy touch 插件并加載到Unity3D 中；（2）加載成功后導入Unity3D工程中；（3）參數設置，編寫腳本并拖拽到相關模型上即可，流程如圖2 所示。easy touch 還提供了充滿趣味性的虛擬搖桿功能（joystick），用戶可以控制搖桿來改變虛擬對象的位置，步驟如下：（1）新建joy?stick組件。（2）參數設置，joystick properties用來設置基本屬性，其中的joystick name 很關鍵，腳本代碼根據這個名字找到觸發事件的搖桿。joystick position&size 是虛擬搖桿的位置和大小，其中anchor 和off?set用于修改虛擬搖桿的位置，這里根據需求自行設置。joystick axes properties & events 是虛擬搖桿軸屬性和事件，其中的事件驅動類型interaction type選擇event notification，enable X axis 和enable Y axis 下的speed 用來設置搖桿的X 與Y 軸靈敏度，按需設置。joystick textures 是虛擬搖桿的紋理，可以根據自己的需要加載紋理修改搖桿的外觀。（3）編寫控制腳本，把腳本賦給要控制的物體即可。基本邏輯如下：定義處理搖桿事件函數，判斷搖桿名稱，如果不是操作的虛擬搖桿就返回，如果是就獲取搖桿偏移搖桿中心的X 與Y 坐標，判定X 或Y 的數值是否為0，如果不為0 則表明對搖桿進行了操作，獲取要控制物體的朝向并按朝向移動物體的位置實現移位操作，如圖3所示。

圖2 easy touch流程圖

圖3 joystick操作效果圖

按鍵類交互由UGUI 的Button 控件與Vuforia 提供的VirtualButton 共同實現，可實現觸摸Button 顯示文本或播放視頻等功能。VirtualButton 預設件放在Button控件特征點較為豐富的部位，當接觸Virtu?alButton 部位時，手指或其他物體對虛擬按鍵進行遮擋，導致該部分特征點位置信息出現改變或丟失，造成部位匹配錯誤，從而檢測出發生按鍵類事件。Unity3D 環境下的虛擬按鍵操作主要涉及到一個類（VirtualButtonEventHandler）和一個接口（IVir?tualButtonEventHandler），執行流程如下：（1）在對應的ImageTarget 下添加VirtualButton 組件；（2）查找所有的VirtualButtonBehaviour 組件并注冊事件；（3）根據不同的Button 名稱處理不同事件，即要實現IVir?tualButtonEventHandler 接 口 的OnButtonPressed 和OnButtonReleased 兩個方法。以觸摸按鍵如“使用幫助”顯示相關內容為例，首先在“使用幫助”按鍵上放置一個VirtualButton 預設件，修改VirtualButton名稱為“shiyongbangzhu”，定義一個文本對象“help_text”用于顯示內容，初始化時該對象隱藏，當觸發VirtualButton事件后，通過switch語句判定是哪個對象，如果是“shiyongbangzhu”這個對象，就把“help_text”設置為顯示，這樣就實現了按下顯示內容的功能。視頻點擊播放需要添加Play Video 腳本，但需注意執行該腳本時退出全屏就意味著重頭播放，所以如果希望實現繼續播放功能，還需要添加VideoPlaybackUIEventHandler 腳本。該腳本負責全屏設置，攝像頭設置等選項控制。如果處于全屏播放模式下點擊退出全屏，該腳本的OnTappedOn?FullscreenButton 函數執行，調用video.VideoPlayer.Pause（）方法暫停視頻播放，并調用video.VideoPlay?er.SeekTo（0.0f）將視頻回到起始位置。所以，為了實現退出全屏視頻繼續播放功能，執行video.Video?Player.Play（false，video.VideoPlayer.GetCurrentPosi?tion（）），其中GetCurrentPosition（）用于獲取當前播放位置，false 表示不是全屏模式，執行該語句可實現退出全屏視頻繼續播放功能，之后把完成的交互腳本掛載即可完成該應用的設計。

3.2 基于Unity3D+ARCore的平面檢測應用設計

平面檢測應用的虛擬空間建立和人機交互實現同3.1.1 和3.1.3 的內容，不再贅述。關鍵的平面識別可視化流程如圖4所示。第一步搭建可視化框架：基于C#編寫appcontroller 框架腳本，定義check?Device 方法和applicationlifecycle 方法。前者在start函數中調用，用于初始時刻檢查設備的工作狀態：依次檢測攝像頭是否授權、手機是否支持和運行是否遇到錯誤等情況，通過showmessage（）方法彈出要告知用戶的信息，如果發生嚴重錯誤，調用doqui（t）方法退出應用。后者在update 函數中調用，用于檢查當前設備是否處于有效的跟蹤狀態：如果處于有效跟蹤狀態，那么就一直跟蹤用于設備；如果當前設備不是正在跟蹤，那么就讓應用休眠一會；如果應用處于正在退出狀態，那么就不進行下一步的操作。第二步制作平面的prefab：create-＞3D object-＞plane，命名為detectedplanevisual，其中position 要全部設置為0，scale 全部設置為1，添加detected plane visualizer 渲染腳本完成prefab 制作。第三步實現檢測平面的可視化：對appcontroller 腳本進行更新，添加命名空間GoogleARCore.Examples.Common，定義一個新的變量planeObject代表平面，實例化兩個list存放新檢測到的平面和已經檢測到的所有平面，之后在update 函數中更新代碼。平面檢測應用了AR?Core 提供的射線檢測方法，關鍵屬性TrackableHit?Flags用于過濾需要進行碰撞檢測的對象類型，本文只檢測在邊界內和多邊形內的平面，根據用戶點擊點構建射線做碰撞檢測，如果發生了碰撞，擊中的是平面且不是平面的背面，則實例化虛擬對象的prefab，并生成一個anchor，把對象的prefab 掛載到anchor以便ARCore 跟蹤定位物體位置；如果擊中的是背面，則不做其他操作。

4 測試與小結

圖4 平面檢測可視化流程圖

圖5 基于路由器圖片的應用效果

圖6 基于校徽圖片的應用效果

圖7 平面檢測應用效果

以路由器圖片和某校校徽圖片為標識物，基于Unity3D+Vuforia 設計應用，提供了交互功能，用戶可根據需要通過虛擬搖桿和觸摸的方式完成位移或按鍵操作。如圖5 所示，通過左下方的虛擬搖桿移動右上方的路由器模型。如圖6所示，觸摸“豐碑永駐”顯示相關文本和圖片介紹，觸摸“play video”播放視頻。基于Unity3D+ARCore 設計了平面識別應用，如圖7所示，攝像頭掃描到辦公桌平面即顯示校園樓宇模型，降低了圖片標識物帶來的使用限制，提高了應用的實用性。