StreamVR外掛詳解二：UI及手柄
阿新 • • 發佈：2019-02-18
## HUD?
### 什麼是HUD
HUD (head-up display)是非VR遊戲中最常見的UI型別。它的用處是實時顯示狀態和提供按鈕、輸入框等控制元件。比如在遊戲中顯示生命值、彈藥數、分數、小地圖，以及技能按鈕、選單按鈕等，都會用到HUD。
### 為什麼不能在VR中使用HUD
HUD的實現方式是在遊戲畫面之上覆蓋一層專用的HUD畫面（overlay）。它有兩個特點：
1. HUD畫面是離攝像機鏡頭最近的物體，其他物體都會被HUD擋住
2. HUD在螢幕中位置是不變的，且很多元件在螢幕的邊緣
而這兩點在VR中都是很難被接受的。首先，如果距離太近，會讓使用者的眼睛無法聚焦。其次，VR中的螢幕不是矩形的，邊緣一般比較模糊，所以把UI放在邊緣會看不清楚；而且如果位置還是固定的，不受視野控制，那就更不自然了 ———— 使用者會因為看不清楚而本能地轉頭去看，而即使轉頭，它的位置還是在邊緣。
### 用什麼替代HUD
答案是立體UI。也就是說UI不再集中於一個平面。比如使用者在觀察一件展品時，展品的上方漂浮著一段文字描述（也可以是圖片、視訊），這種UI和虛擬世界中物體聯絡很緊密，使用者能很直觀地感受到它在描述哪件物品；還有種做法是在不遮擋視野的地方顯示資訊。比如在遠方的天空放置一個平板，使用者一擡頭就能從上面看到當前場景的資訊以及得分情況。這種UI適合展示不需要經常檢視的資訊。
如果要顯示和場景中物體無關而且需要經常檢視的UI，就需要用到Vive手柄了。舉幾個例子，Tilt Brush中右手是畫筆，而左手是調色盤（一共有4個功能不同的面板，比如調色、更換畫筆和場景、儲存照片等等，通過旋轉左手可以看到不同的面板）；Raw Data中手槍上有個數字顯示剩餘彈藥（漂浮的3D文字）；在Budget Cuts中，點選選單鍵後手柄上會出現一個物體欄（物品欄中會出現現有物品的模型，可以用另一隻手把它們拿出來）。注意，這些UI元素的形狀也是立體的，它們有的是3D文字，有的是模型。
## 與場景互動
### Vive手柄介紹
除了視野和位置的控制是由頭盔完成，Vive的主要輸入方式是通過手柄。手柄在輸入方面一是提供手的定位和定向，使得玩家的雙手的位置、手柄的方向、手心的朝向都可以體現在VR中；二是提供了這幾個按鍵：
1. 扳機鍵 (trigger)：最重要的按鍵，相當於鍵盤上的回車鍵。一般單擊用於確認選擇、開槍；按住不動用來拖拽、給氣球打氣，持續地開槍等等。
2. 側鍵 (grip): 用得頻率較少，可以用來實現緊握，比如緊握一根樹枝。也可以用來啟用物品或者觸發事件。
3. 選單鍵 (application menu)：最好用來彈出選單。比如程式或者遊戲的設定選單、物品欄。
4. 觸控板 (touchpad)： 最靈活的按鍵。硬體上它支援的功能有兩個：獲得觸控點的座標以及響應按鍵訊息。這個鍵很重要，因為：
a. 相比其他的按鍵，它不但能知道使用者何時按下了按鍵，還能知道手指在什麼位置按下的（通過一個二維座標，x,y的取值範圍都是[-1, 1]）
b. 即使不按下這個鍵，也能獲得觸控點座標，因此可以用於做簡單的手勢識別（比如上劃、右劃）
c. 這個鍵用拇指按很輕鬆。
在現有的應用中，觸控板被用來換子彈、選擇技能、更換工具、調節音量、瞬移（teleport）。
5. 系統鍵 (system button): 這個鍵是用來開啟手柄電源以及呼叫系統選單的，設計程式時一般情況下不要用到它。
### 選擇物體
1. 鐳射選擇。從手柄（或者其他自定義的手的模型）處射出一道鐳射，被鐳射指到的物體放大並高亮，然後按trigger鍵確認選擇。舉個例子，按下選單鍵後在使用者現在的視野正前方產生一個設定視窗，手柄此時射出一道綠色鐳射，被鐳射射中的控制元件會放大並高亮，此時按trigger，效果就像是用滑鼠點選了一下此處（適用於按鈕、進度條、文字框等控制元件）。
2. 觸碰選擇。如果物體距離使用者比較近，也可以使用觸碰選擇，當手柄接觸到某個物體後，讓這個物體高亮，等待使用者按trigger鍵確認。
## VR應用的UI
VR中工具類的應用可以用到平面UI。
### 平面UI示例
下圖是Steam Dashboard在VR中的效果：
可以看到如同非VR的應用一樣，SteamVR的主要UI都放在一個panel中。不同之處在於，這個panel現在擱置在一個3D世界裡，有透視效果；另外輸入方式改成了用手柄上射出的鐳射去指。
之所以用平面UI，是因為這種方式早已經被人們所習慣，而且已經積累了很多經驗。另外一個好處是它能在小面積內放下大量同類型的UI元素，比較適合做視訊列表、遊戲列表、主選單之類的介面。
### 浸入式體驗
在開始浸入式的體驗之後（比如切入到一個純3D的場景、遊戲、或者全景視訊），就不能把平面UI放在使用者的視野正前方了。這時可以參考上面"用什麼替代HUD"一節所講到的立體UI。還有一個方法是當用戶按下某個鍵時彈出一個平面選單，這需要適當的引導————可以在應用開始時告訴使用者怎麼操作；也可以加上文字解釋，讓使用者看向自己的手的時候，會發現手柄的按鍵旁邊都有一行小字解釋這個鍵的作用。
> 在Vive Cinema中，應用開始時是一個平面的視訊列表，使用者可以選擇播放哪個視訊、用什麼方式播放（平面、360度還是180度？是否是立體視訊？），選擇完視訊後，UI都會隱藏起來，開始浸入式播放。這個時候如果按選單鍵，會在視野正前方生成一個平面的視窗，在上面可以調整進度，或者選擇退出視訊。
## 參考資料
[uxofvr.com](