摘要:交互事件交互根據自由度可分為和,顯然,所有的頭顯都應支持方向的追蹤。交互事件除了,現在大部分還搭配,用戶通過手持手柄可以與虛擬場景進行交互。
前兩期主要介紹了開發WebVR應用的基本套路,不過開發出來的場景還只是“可遠觀而不可褻玩”,缺乏交互性,本期將帶大家走進VR交互世界,看看WebVR事件是如何開發的。
VR交互有哪些?在可交互的VR世界里,用戶不再只是個觀察者,而是虛擬世界中一個生命,可以與虛擬世界進行通信。這種通信應該是雙向的:虛擬場景能感知你的存在(位置、方向),同時你的輸入又對物體產生作用。這里借鑒一個VR游戲場景:
一位MM想讓你給她選衣服,彈出一個菜單讓你選,你用touchpad滑動選擇給MM裝扮,你選了一條裙子并點擊手柄的按鈕確認;
MM問你看起來好不好看,你趕緊點頭;
MM很高興,讓你給她拍照,這時候你的手柄已變成了相機,對準她按下按鈕就可以拍照;
然而你二話不說蹲下去想欣賞MM的裙底,結果MM生氣了,游戲結束!
上述共采用了四種交互方式,根據輸入設備可分為headset頭顯交互和gamepad手柄交互,前者通過頭顯行為觸發事件(如2、4),后者通過手柄行為觸發事件(如1、3)。
這些交互行為都需要硬件支持(比如陀螺儀和加速計提供方向追蹤支持),我們需要通過JavaScript API來獲取headset或者gamepad的動態數據。
由于各VR產商的頭顯和手柄具有差異,因此對于用戶交互層面的支持度也參差不齊,以下展示各主流VR平臺在頭顯和手柄方面的在交互上的支持情況。
VR類型 |headset|gamepad
:------------:|:------------:|:------------:
Cardboard|3-DoF|無
Daydream Smartphone VR|3-DoF|3-DoF
Daydream Standalone VR|6-DoF|?-DoF
Gear VR|3-DoF|3-DoF
Oculus Rift|6-DoF|6-DoF
HTC Vive|6-DoF|6-DoF
Microsoft MR|6-DoF|6-DoF
表中的DoF(degree of freedom)就是我們常說的自由度,主要為Orientation自由度和Position自由度兩種。
Orientation自由度,支持方向追蹤,一般由陀螺儀、加速計等傳感器支持
Position自由度,支持位置追蹤,一般分為outside-in(外向追蹤)的紅外追蹤技術和inside-out(內向追蹤)的SLAM技術支持
通常在VR體系里,3-DoF指的是VR硬件支持Orientation,6-DoF指的是支持Orientation + Position。
Headset交互事件Headset交互根據自由度可分為3-DoF和6-DoF,顯然,所有的VR頭顯都應支持Orientation方向的3-DoF追蹤。
3-DoF依賴于設備的陀螺儀和加速計支持,根據頭部朝向來渲染場景視角,可以支持gaze注視和搖頭點頭的行為,一般以手機VR為主;
6-DoF則指的是支持空間追蹤,由于可以感知空間移動,可以支持Lean, dodge, duck的交互方式,如Oculus Rift和Htc Vive,以及Microsoft MR和Daydream Standalone等。
實現headset交互,首先是要能看得到虛擬世界,上期WebVR深度剖析中VR渲染是實現headset交互的第一步,我們需要使用WebVR API來獲取headset數據。
這里再復習一下:當用戶戴著headset扭頭或走動時,渲染器在每幀通過VRFrameData的視覺-投影矩陣,動態計算出每個物體的MVP復合矩陣,最后進行頂點和片元繪制。
令人興奮的是,three.js已經將這個過程封裝到了相機和渲染器中,幫我們實現了第一步。
第二步,我們需要讓三維場景感知用戶(頭部)的存在,舉個例子,當一個球朝著玩家丟過來的時候,玩家機靈一躲,程序根據球體與玩家的位置判斷玩家是否躲閃成功。
這時候,我們還需要用到VRFrameData一個重要屬性pose,通過frameData.pose返回一個VRPose對象,可獲取headset的傳感器信息,比如位置、方向、速度和加速度等。
屬性|類型|說明
:------------:|:------------:|:------------:
position|Float32Array|返回headset的位置矩陣
orientation|Float32Array|返回headset的方向矩陣
angularAcceleration|Float32Array|返回x, y, z軸每秒的角加速度
angularVelocity |Float32Array|返回x, y, z軸每秒的角速度
linearAcceleration|Float32Array|返回x, y, z軸每秒的線性加速度
linearVelocity |Float32Array|返回x, y, z軸的線性速度
通過這幾個屬性,我們可以讓相機具備物理數據,擁有實體感知能力,而不單單只是觀察者模式。
比如,下面實現用戶在使用HTC Vive此類6-DoF的headset時,走動超過范圍彈出警告的功能:
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; // 解構用戶位置的x,y,z坐標 if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) { // 當用戶離初始點超過20×20×20的空間時,彈出警告 showWarningToast(); // 展示警告框 } }
同樣,three.js在VR模式下會自動將VRPose的position和orientation轉化成camera的Object3D屬性,因此我們可以直接調用camera.position和camera.quaternation/rotation獲取用戶的位置和朝向,代碼簡化如下:
update() { const { camera, userModel } = this; userModel.position.copy(camera.position); const { x, y, z } = userModel.position; // 解構用戶位置坐標 if ( Math.abs(x) > 20 || Math.abs(y) > 20 || Math.abs(z) > 20 ) { showWarningToast(); // 用戶離初始點超過20×20×20的空間時,彈出警告框 } }
基本的headset交互事件就是這樣,理解了這些,我們可以實現gaze事件監聽,點頭搖頭事件監聽等。
GamePad交互事件除了headset,現在大部分VR還搭配gamepad,用戶通過手持手柄可以與虛擬場景進行交互。
對于gamepad手柄而言,也有3-DoF和6-DoF的兩種類型:
3-DoF如daydream controller,只支持方向追蹤,于是google推薦采用laser激光筆進行交互。
6-DoF如Oculus touch,可以進行方向和位置追蹤,因此可以很好的模擬手臂的動作。
相比headset傳感器輸入產生的交互,gamepad還多了各種輸入元件,如按鈕、touchpad觸控板或thumbstick手搖桿等。
于是,根據手柄輸入硬件又可將gamepad事件分為三類:
A. 傳感器事件:由傳感器對手柄進行物理追蹤,如激光筆交互;
B. 按鈕事件:通過點擊按鈕產生的交互行為;
C. 控制單元事件:由thumbstick, touchpad輸入產生,如swipe滑動來翻頁等。
那么如何實現gamepad的交互事件呢?其實換個問題就是:如何訪問手柄的硬件信息,答案是使用Gamepad API,詳見WebVR開發教程——交互事件(二)使用Gamepad
WebVR開發教程——深度剖析 關于WebVR的開發調試方案以及原理機制
WebVR開發教程——標準入門 使用Three.js開發WebVR場景的入門教程
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89439.html
摘要:返回的位置矩陣返回的方向矩陣返回軸每秒的角加速度返回軸每秒的角速度返回軸每秒的線性加速度返回軸的線性速度與只有的如和的只包含方向矩陣,因此為而為而的如和由于和兼具,因此和都為。 showImg(https://segmentfault.com/img/remote/1460000011814572?w=680&h=383);上期 WebVR開發教程——交互事件(一)頭顯與手柄 從頭顯和...
摘要:開發傳送門開發教程交互事件一頭顯與手柄開發教程交互事件二使用開發教程深度剖析關于的開發調試方案以及原理機制開發教程標準入門使用開發場景的入門教程 showImg(https://segmentfault.com/img/remote/1460000011814846?w=1240&h=587); Cardboard可以說是手機VR頭顯的元老了,狹義上指的是Google推出的一個帶有雙凸...
摘要:通過佩戴的分離式頭顯瀏覽連接在主機端的網頁,現支持的瀏覽器主要是火狐的和設置的谷歌。的概念大概就如此,這次我們將采用的方式來測試我們的場景,現在踏上我們的開發之旅。 showImg(https://segmentfault.com/img/remote/1460000008904026); WebVR即web + VR的體驗方式,我們可以戴著頭顯享受沉浸式的網頁,新的API標準讓我們可...
摘要:在文末,我會附上一個可加載的模型方便學習中文藝術字渲染用原生可以很容易地繪制文字,但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以說是 HTML5 技術生態鏈中最為令人振奮的標準之一,它把 Web 帶入了 3D 的時代。 初識 WebGL 先通過幾個使用 Web...
閱讀 1682·2019-08-30 15:54
閱讀 3332·2019-08-26 17:15
閱讀 3522·2019-08-26 13:49
閱讀 2582·2019-08-26 13:38
閱讀 2291·2019-08-26 12:08
閱讀 3035·2019-08-26 10:41
閱讀 1369·2019-08-26 10:24
閱讀 3376·2019-08-23 18:35