WebVR開(kāi)發(fā)教程——交互事件（一）頭顯與手柄
時(shí)間：2023-05-28 17:09:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-05-28 17:09:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
WebVR開(kāi)發(fā)教程——交互事件（一）頭顯與手柄：前兩期主要介紹了開(kāi)發(fā)WebVR應(yīng)用的基本套路，不過(guò)開(kāi)發(fā)出來(lái)的場(chǎng)景還只是“可遠(yuǎn)觀而不可褻玩”，缺乏交互性，本期將帶大家走進(jìn)VR交互世界，看看WebVR事件是如何開(kāi)發(fā)的。
VR交互有哪些？
在可交互的VR世界里，用戶不再只是個(gè)觀察者，而是虛擬世界中一個(gè)生命，可以與虛擬世界進(jìn)行通信。這種通信應(yīng)該是雙向的：虛擬場(chǎng)景能感知你的存在（位置、方向），同時(shí)你的輸入又對(duì)物體產(chǎn)生作用。這里借鑒一個(gè)VR游戲場(chǎng)景：
- 一位MM想讓你給她選衣服，彈出一個(gè)菜單讓你選，你用touchpad滑動(dòng)選擇給MM裝扮，你選了一條裙子并點(diǎn)擊手柄的按鈕確認(rèn)；
- MM問(wèn)你看起來(lái)好不好看，你趕緊點(diǎn)頭；
- MM很高興，讓你給她拍照，這時(shí)候你的手柄已變成了相機(jī)，對(duì)準(zhǔn)她按下按鈕就可以拍照；
- 然而你二話不說(shuō)蹲下去想欣賞MM的裙底，結(jié)果MM生氣了，游戲結(jié)束！
VR女友——點(diǎn)頭與搖頭上述共采用了四種交互方式，根據(jù)輸入設(shè)備可分為headset頭顯交互和gamepad手柄交互，前者通過(guò)頭顯行為觸發(fā)事件（如2、4），后者通過(guò)手柄行為觸發(fā)事件（如1、3）。
這些交互行為都需要硬件支持（比如陀螺儀和加速計(jì)提供方向追蹤支持），我們需要通過(guò)JavaScript API來(lái)獲取headset或者gamepad的動(dòng)態(tài)數(shù)據(jù)。
由于各VR產(chǎn)商的頭顯和手柄具有差異，因此對(duì)于用戶交互層面的支持度也參差不齊，以下展示各主流VR平臺(tái)在頭顯和手柄方面的在交互上的支持情況。
表中的DoF(degree of freedom)就是我們常說(shuō)的自由度，主要為Orientation自由度和Position自由度兩種。
- Orientation自由度，支持方向追蹤，一般由陀螺儀、加速計(jì)等傳感器支持
- Position自由度，支持位置追蹤，一般分為outside-in(外向追蹤)的紅外追蹤技術(shù)和inside-out(內(nèi)向追蹤)的SLAM技術(shù)支持
通常在VR體系里，3-DoF指的是VR硬件支持Orientation，6-DoF指的是支持Orientation + Position。
Headset交互事件
Headset交互根據(jù)自由度可分為3-DoF和6-DoF，顯然，所有的VR頭顯都應(yīng)支持Orientation方向的3-DoF追蹤。
- 3-DoF依賴(lài)于設(shè)備的陀螺儀和加速計(jì)支持，根據(jù)頭部朝向來(lái)渲染場(chǎng)景視角，可以支持gaze注視和搖頭點(diǎn)頭的行為，一般以手機(jī)VR為主；
- 6-DoF則指的是支持空間追蹤，由于可以感知空間移動(dòng)，可以支持Lean, dodge, duck的交互方式，如Oculus Rift和Htc Vive，以及Microsoft MR和Daydream Standalone等。
DoF of Headset實(shí)現(xiàn)headset交互，首先是要能看得到虛擬世界，上期WebVR深度剖析中VR渲染是實(shí)現(xiàn)headset交互的第一步，我們需要使用WebVR API來(lái)獲取headset數(shù)據(jù)。
這里再?gòu)?fù)習(xí)一下：當(dāng)用戶戴著headset扭頭或走動(dòng)時(shí)，渲染器在每幀通過(guò)VRFrameData的視覺(jué)-投影矩陣，動(dòng)態(tài)計(jì)算出每個(gè)物體的MVP復(fù)合矩陣，最后進(jìn)行頂點(diǎn)和片元繪制。
令人興奮的是，three.js已經(jīng)將這個(gè)過(guò)程封裝到了相機(jī)和渲染器中，幫我們實(shí)現(xiàn)了第一步。
第二步，我們需要讓三維場(chǎng)景感知用戶（頭部）的存在，舉個(gè)例子，當(dāng)一個(gè)球朝著玩家丟過(guò)來(lái)的時(shí)候，玩家機(jī)靈一躲，程序根據(jù)球體與玩家的位置判斷玩家是否躲閃成功。
6DoF 躲閃小球這時(shí)候，我們還需要用到VRFrameData一個(gè)重要屬性
pose，通過(guò)
frameData.pose返回一個(gè)
VRPose對(duì)象，可獲取headset的傳感器信息，比如位置、方向、速度和加速度等。
VRPose
通過(guò)這幾個(gè)屬性，我們可以讓相機(jī)具備物理數(shù)據(jù)，擁有實(shí)體感知能力，而不單單只是觀察者模式。
比如，下面實(shí)現(xiàn)用戶在使用HTC Vive此類(lèi)6-DoF的headset時(shí)，走動(dòng)超過(guò)范圍彈出警告的功能：
update() { const { vrdisplay, frameData, userModel } = this; frameData = vrdisplay.getFrameData(frameData); const vrpose = frameData.pose; userModel.position.fromArray(vrpose.position); // 將VRPose位置矩陣賦予用戶角色 const { x, y, z } = userModel.position; // 解構(gòu)用戶位置的x,y,z坐標(biāo) if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) { // 當(dāng)用戶離初始點(diǎn)超過(guò)20×20×20的空間時(shí)，彈出警告 showWarningToast(); // 展示警告框 }}同樣，three.js在VR模式下會(huì)自動(dòng)將VRPose的
position和
orientation轉(zhuǎn)化成camera的Object3D屬性，因此我們可以直接調(diào)用
camera.position和
camera.quaternation/rotation獲取用戶的位置和朝向，代碼簡(jiǎn)化如下：
update() { const { camera, userModel } = this; userModel.position.copy(camera.position); const { x, y, z } = userModel.position; // 解構(gòu)用戶位置坐標(biāo) if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) { showWarningToast(); // 用戶離初始點(diǎn)超過(guò)20×20×20的空間時(shí)，彈出警告框 }} 基本的headset交互事件就是這樣，理解了這些，我們可以實(shí)現(xiàn)gaze事件監(jiān)聽(tīng)，點(diǎn)頭搖頭事件監(jiān)聽(tīng)等。
GamePad交互事件
除了headset，現(xiàn)在大部分VR還搭配gamepad，用戶通過(guò)手持手柄可以與虛擬場(chǎng)景進(jìn)行交互。
對(duì)于gamepad手柄而言，也有3-DoF和6-DoF的兩種類(lèi)型：
- 3-DoF如daydream controller，只支持方向追蹤，于是google推薦采用laser激光筆進(jìn)行交互。
- 6-DoF如Oculus touch，可以進(jìn)行方向和位置追蹤，因此可以很好的模擬手臂的動(dòng)作。
相比headset傳感器輸入產(chǎn)生的交互，gamepad還多了各種輸入元件，如按鈕、touchpad觸控板或thumbstick手搖桿等。
于是，根據(jù)手柄輸入硬件又可將gamepad事件分為三類(lèi)：
A. 傳感器事件：由傳感器對(duì)手柄進(jìn)行物理追蹤，如激光筆交互；
B. 按鈕事件：通過(guò)點(diǎn)擊按鈕產(chǎn)生的交互行為；
C. 控制單元事件：由thumbstick, touchpad輸入產(chǎn)生，如swipe滑動(dòng)來(lái)翻頁(yè)等。
那么如何實(shí)現(xiàn)gamepad的交互事件呢？其實(shí)換個(gè)問(wèn)題就是：如何訪問(wèn)手柄的硬件信息，答案是使用Gamepad API，詳見(jiàn)WebVR開(kāi)發(fā)教程——交互事件（二）使用Gamepad
WebVR開(kāi)發(fā)傳送門(mén)：
WebVR開(kāi)發(fā)教程——深度剖析 關(guān)于WebVR的開(kāi)發(fā)調(diào)試方案以及原理機(jī)制
WebVR開(kāi)發(fā)教程——標(biāo)準(zhǔn)入門(mén) 使用Three.js開(kāi)發(fā)WebVR場(chǎng)景的入門(mén)教程
在線咨詢(xún)
