基于增強現(xiàn)實技術的用戶體驗設計

季 鈺，周 蓓

（常熟理工學院 計算機科學與工程學院，江蘇 常熟 215500）

增強現(xiàn)實（Augmented Reality，AR）［1］，是指利用計算機技術，將虛擬物體實時地疊加到一個真實畫面或空間，形成具有實時交互的三維圖像畫面，給用戶帶來更真實的體驗和感受.AR由于其在真實環(huán)境和虛擬環(huán)境中起到了一個連續(xù)體的作用，其相關的應用提供了一個新的人機交互方式.AR系統(tǒng)具有3個突出的特點：（1）真實世界和虛擬的信息集成；（2）具有實時交互性；（3）在三維尺度空間中增添定位虛擬物體.目前在世界范圍內(nèi)，AR技術受到了越來越多研究者的關注，國內(nèi)也有學者開始將這項技術應用到各種展示過程中［2］83.AR技術通過計算機立體化、生動化、全方位的呈現(xiàn)，營造更具真實感的交互情境，構建更有效的展示環(huán)境.隨著蘋果的ARKit和谷歌的ARCore的相繼推出與付諸實踐，AR領域迎來前所未有的發(fā)展契機.本文將AR技術應用于汽車展示APP系統(tǒng)，通過Unity3D創(chuàng)建的三維場景，為用戶提供汽車全方位、立體化的展示，并可通過AR識別技術，將現(xiàn)實場景與虛擬模型結合，給用戶帶來更真實的情景體驗.

1 總體設計

1.1 用戶體驗設計

本文設計的汽車展示APP不同于一般的產(chǎn)品二維圖像展示，而是將汽車放置在三維場景中，用戶可通過手勢和觸摸的方式與場景交互，了解汽車的外觀、內(nèi)飾的特性及各部分的數(shù)據(jù)參數(shù).主要功能包括：實現(xiàn)汽車整體360°外觀及內(nèi)飾交互展示及動態(tài)顯示車體各部分的數(shù)據(jù)參數(shù)；車型選擇及車型信息顯示；更改車體顏色、基本配置；控制車燈、開關車門等交互式體驗；利用攝像頭實現(xiàn)AR識別及現(xiàn)實場景融入體驗等.

通過AR技術，將汽車的真實影像與計算機的三維場景結合，提供實時交互，使用戶獲得身臨其境的體驗［3］.

1.2 系統(tǒng)框架設計

汽車展示APP系統(tǒng)基于Unity3D引擎開發(fā)，采用面向?qū)ο笤O計方法.系統(tǒng)框架如圖1所示：控制器Controller負責處理用戶交互，包括模型控制、顏色控制、開關控制等；視圖View負責模型視圖顯示，控制并實現(xiàn)界面動畫；數(shù)據(jù)模型Model負責處理數(shù)據(jù)邏輯，讀取并顯示相關數(shù)據(jù)信息.為方便處理用戶交互所產(chǎn)生的界面狀態(tài)變化，避免狀態(tài)與狀態(tài)之間的耦合［4］，采用有限狀態(tài)機FSM負責管理用戶界面的交互狀態(tài).

圖1 系統(tǒng)總體框架

2 主要功能實現(xiàn)

2.1 展示線設計

系統(tǒng)中汽車的三維模型采用maya建模，而圍繞著車身的動態(tài)展示線則由Unity3D中的網(wǎng)格面片（Mesh）構成.通過為模型對象添加MeshFilter組件，指定該模型對象使用哪一個Mesh，再通過MeshRenderer組件渲染MeshFilter指定的Mesh.在Mesh中存儲著三維模型的數(shù)據(jù)：vertices頂點數(shù)據(jù)、triangles三角形頂點、uv紋理坐標和normals法線向量.

展示線由直線和曲線構成，設計父類MeshBase和兩個子類RectMesh和RingMesh分別用于繪制直線和曲線，類圖如圖2所示.

圖2 數(shù)據(jù)展示線類圖

例如，圖3矩形面片由兩個三角面構成，三角形的渲染順序與三角形的正面法線呈左手螺旋定則.如果渲染一個正方形面，就需要保證組成這個正方形的兩個小三角形的正面法線都指向屏幕.三角頂點順序為：三角形1：0—>3—>1，三角形2：0—>2—>3.UV坐標的左下角為（0，0），右上角為（1，1），如圖4（1）所示，4個頂點坐標為：頂點0（0，0），頂點1（1，0），頂點2（0，1），頂點3（1，1）.將正方形面片繪制在ZX軸平面中，假設寬高分別為W、L，Pivot軸心點在面片中心，Y軸坐標值默認為0，則4個頂點的空間坐標點為：頂點0（-W/2，0，-L/2），頂點1（W/2，0，-L/2），頂點2（-W/2，0，L/2），頂點3（W/2，0，L/2），如圖4（2）所示.

圖3 矩形網(wǎng)格

圖4 坐標示例

由此可以實現(xiàn)一個矩形面片對象的渲染.但是該面片對象的軸心點位置只能在網(wǎng)格的中心點，不能滿足Mesh動畫的需求.而網(wǎng)格的中心點位置是由頂點坐標在坐標軸中的位置決定的，通過修改頂點坐標的位置，從而可以實現(xiàn)軸心點的移動.創(chuàng)建枚舉類型PivotAlign，設置3個值類型Left，Center，Right；創(chuàng)建PivotAlign兩個對象：WidthAlign，LengthAlign，分別表示軸心點在水平和垂直方向的軸心位置.例如：WidthAlign值為Left，LengthAlign值為right，軸心點的位置在網(wǎng)格的左上角.水平和垂直各3種值的枚舉類型，共有9種軸心點可能的位置.根據(jù)當前矩形軸心點所在位置，依次修改頂點坐標Vertices，即可實現(xiàn)移動軸心點的位置（圖5給出了其中兩種可能的位置）.

繪制曲線的方法和繪制直線大致相同.以繪制圓環(huán)為例說明：首先設置圓環(huán)的分段數(shù)為segment個，三角形頂點順序依次為：0，2，3，0，3，1，2，4，5，2，5，3，4，6，7，4，7，5……三角形頂點個數(shù)為segment*2*3，如圖6所示.

UV中每一小段的V值為1/segment，則UV坐標分別為：0（0，0），1（1，0），2（0，1/segment），3（1，1/segment），4（0，2/segment），5（ 1，2/segment），6（ 0，3/segment），7（1，3/segment）等，UV坐標個數(shù)為segment*2+2，如圖 7所示.

圓環(huán)半徑為r，圓環(huán)寬度為width，則內(nèi)環(huán)半徑minRadius為r-width*0.5，外環(huán)半徑maxRadius為r+width*0.5，每一小段對應的角度為α，即360°/segment，圓環(huán)上的點坐標為（R*Cos（α），R*Sin（α）），則網(wǎng)格的頂點坐標如下.

頂點0：（minRadius，0，0），

頂點1：（maxRadius，0，0），

頂點2：（minRadius*Cos（α），0，minRadius*Sin（α）），

頂點3：（maxRadius*Cos（α），0，maxRadius*Sin（α）），

頂點4：（minRadius*Cos（2*α），0，minRadius*Sin（2*α）），

頂點5：（maxRadius*Cos（2*α），0，maxRadius*Sin（2*α））等，頂點坐標個數(shù)segment*2+2.

綜上所述，圍繞車體的展示線條由若干直線和曲線組成，可以通過上述方法實現(xiàn)繪制渲染（見圖8）.

圖5 軸心點位置示例

圖6 曲線局部坐標示例

圖7 曲線UV坐標示例

2.2 場景交互設計

（1）360°全景

在場景中設置主攝像機，通過單指滑動控制攝像機的旋轉(zhuǎn)和推拉操作，實現(xiàn)三維場景中的全景展示.手指滑動如圖9所示，將鼠標開始點擊的位置記錄為last MousePos，移動后的位置記為mousePosition.將兩個值相減后得到的水平和垂直距離之差，分別按比率增加到攝像機對象的旋轉(zhuǎn)Y軸和X軸，從而實現(xiàn)控制攝像機根據(jù)手指滑動的距離旋轉(zhuǎn)相應的角度.

（2）局部縮放功能

利用Unity提供的屏幕觸摸事件（Touch類）記錄觸屏手指的個數(shù)、位置、狀態(tài)等相關信息.如圖10所示，首先記錄雙指剛接觸到屏幕的距離為lastTouchDistance，當手指開始滑動時，計算當前雙指的距離減去lastTouchDistance，距離長度記為targetCameraDistance.將計算的值按照一定比率和攝像機對象的Z軸相加減，控制主攝像機的遠近移動，實現(xiàn)場景局部縮放功能.

（3）Mesh動畫

Mesh動畫是否播放是根據(jù)水平方向旋轉(zhuǎn)角度決定的.動態(tài)創(chuàng)建Mesh網(wǎng)格時，將Mesh分成了3類left，right，front.如圖11所示，當攝像機旋轉(zhuǎn)Y軸角度在范圍（1）內(nèi)時，播放front顯示動畫，而在其他范圍則隱藏.同理，在范圍（2）中播放right類網(wǎng)格，在范圍（3）中播放left類網(wǎng)格.當前攝像機所處位置應該播放left類網(wǎng)格的顯示動畫，隱藏另外兩種網(wǎng)格類型.

圖8 展示線渲染效果

圖9 單指滑動示例

2.3 車身交互設計

圖10 雙指縮放示例

圖11 Mesh動畫與攝像機位置關系

（1）車身拆解動畫

通過設置組成車身每個部件的位置和大小，實現(xiàn)車身的拆解動畫.將車身對象每個部件的原始位置和大小記錄在對象的屬性originalPoses和originalScales中.實現(xiàn)汽車的拆解動畫只需要將部件的位置移動至目標位置，并將大小縮放為0，同時顯示底盤模型.實現(xiàn)部件組裝動畫只需要將當前位置和大小漸變?yōu)樵嫉奈恢煤痛笮〖纯?

（2）更換車型和輪轂

實現(xiàn)車型及輪轂的更換時，需要銷毀原有的模型，并在原位置上實例化選擇模型對象，利用Unity提供的PlayerPrefs類保存用戶偏好設置，它是以鍵值對的形式將數(shù)據(jù)保存在本地文件中.可以根據(jù)鍵名讀取保存的數(shù)據(jù).在更換時，PlayerPrefs記錄下當前選擇配置的名稱，以便下一次初始化選擇的模型.

除此之外，還可以實現(xiàn)車身顏色的選擇以及控制車燈及車門的開關效果.

2.4 AR識別

系統(tǒng)采用Easy AR實現(xiàn)圖像識別，通過掃描車型圖片可以實現(xiàn)將該車型的三維模型與現(xiàn)實世界疊加.

（1）Easy AR簡介

Easy AR由上海視辰開發(fā)，是一款免費的AR引擎，支持使用平面目標的AR，支持1 000個以上本地目標的流暢加載和識別，支持基于硬解碼視頻（包括透明視頻和流媒體）的播放，支持二維碼識別，支持多目標同時跟蹤，支持PC端和移動端等多個平臺.

（2）圖像識別

EasyARSDk能使用計算機圖像技術計算攝像機和識別物體之間的相對位置，從而實現(xiàn)將3D虛擬對象疊加到識別物上［2］85.本文中，采用多卡識別技術，通過識別平面圖像目標，將前文中創(chuàng)建的三維模型作為平面目標的子物體，控制其顯示與隱藏，從而將虛擬的三維對象與現(xiàn)實場景融合.圖12顯示了兩種車體模型的識別效果.

（3）AR交互設計

從虛擬的三維場景到AR的場景，依然可以實現(xiàn)汽車模型的縮放，車門的開關等交互.由于處在AR場景中，因此使用Unity射線Raycast實現(xiàn)判斷.射線是在三維世界中從一個點沿一個方向發(fā)射的一條無限長的線，若在軌跡上與碰撞器的模型發(fā)生碰撞，則停止發(fā)射，并返回碰撞模型的信息，保存在RayCastHit類中.碰撞器是Unity物理組件的一類，添加了碰撞器的對象才可以和射線發(fā)生碰撞.

如控制車門的開關，通過射線檢測判斷手指是否點擊到車門上，當手指點擊屏幕時，射線從屏幕上的點發(fā)射到三維空間中，如果觸碰到車門的碰撞器，則開關車門，車門開關動畫和上文中實現(xiàn)方法相同（如圖13所示）.同理，可在AR場景中，實現(xiàn)360°旋轉(zhuǎn)、車體縮放等交互控制.

綜上所述，系統(tǒng)通過FSM控制開始場景、主場景、展示場景、AR展示場景的切換.如圖14所示，在主場景中，用戶可查看車型，更換輪轂、車漆顏色等交互操作；在展示場景中實現(xiàn)360°觀察汽車的內(nèi)外部信息，局部放大縮小等；在AR場景中，實現(xiàn)了多卡識別，將3D模型映射到現(xiàn)實場景中.

圖12 多卡識別效果

圖13 AR中控制車門開關效果

圖14 展示場景

3 系統(tǒng)性能分析

作為一款APP設計，需要系統(tǒng)具有較高的執(zhí)行效率.Unity Profiler是Unity3D的性能分析器，可以幫助開發(fā)者分析GPU、CPU、內(nèi)存、渲染和音頻的性能.圖15的時間軸中顯示的數(shù)據(jù)可以查看到某一幀的詳細信息.Rendering Profiler主要包含了三角形、頂點、以及通道等模塊，每一個模塊對應一個不同的顏色，其中DrawCalls表示當前任務在當前幀內(nèi)繪制調(diào)用的次數(shù).CPU Usage Profiler顯示每一幀各個任務調(diào)度耗費的時間.

通常情況下，幀率越低，一幀渲染時間就越長，表現(xiàn)起來就越緩慢卡頓.但是渲染次數(shù)降低，設備的發(fā)熱量就會越小.相反幀率越高，一幀渲染時間就會越短，表現(xiàn)起來就會越流暢.但是渲染次數(shù)增大，設備的發(fā)熱量就相對越大.所以一般游戲幀率控制在30幀，也就是每隔33 ms渲染一次，流暢度和發(fā)熱量相對都是最優(yōu).從圖15可以看出，系統(tǒng)總體的幀速率較均衡，除個別幀外，大多數(shù)幀都處于最優(yōu)渲染速率.

圖15 Rendering編輯器

4 結論

本文通過AR技術，利用移動設備和相機鏡頭，打造出一種新的用戶體驗，模糊消費者的屏幕和他們周圍的現(xiàn)實世界之間的界限.使得消費者在網(wǎng)上看車展就如同身臨其境一般，甚至比線下實體看車展有更棒的體驗效果.汽車產(chǎn)品與消費者之間的溝通由原來的一對多變?yōu)橐粚σ?，并且融入新元素和個性化的互動內(nèi)容，通過3D場景或動畫數(shù)字疊加給用戶一種全新的、沉浸式的體驗，促使消費者更容易“買單”.