在瀏覽器中復刻 visionOS 交互 | 鍵盤

0 評論 4166 瀏覽 2 收藏 7 分鐘

有沒有可能可以基于 WebXR 復刻蘋果 visionOS 的交互設計呢?這篇文章里,作者嘗試“復刻”visionOS中的虛擬鍵盤設計,不妨來看一下。

這是《LetsHackVision Pro》系列的第一篇,本系列將會基于 WebXR 復刻蘋果 visionOS 的交互設計。你可以在(最好是支持手勢識別的 VR )瀏覽器中訪問 https://lets.hackvision.pro/keyboard 體驗。

一、visionOS 虛擬鍵盤

visionOS 虛擬鍵盤設計有以下幾個特點:

  • 可以通過手勢直接輸入(Direct Touch);
  • 當手指懸在按鍵上方時,將呈現點亮效果(Hover Effect),以提示用戶;
  • 雖然理論上擁有無限空間,但 visionOS 虛擬鍵盤仍然采用和 iOS/iPadOS 一致的布局,以保持產間的體驗一致性。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

visionOS Keyboard

在瀏覽器中復刻 visionOS 交互 | 鍵盤

Hover Effect

二、WebXR Device API

Immersive Web Developer Home

WebXR 基于 WebGL 的 3D 圖形渲染能力,借助 XR 設備接口(Device API)可訪問與虛擬現實(VR)和增強現實(AR)設備相關的輸入(如頭部位置、控制器位置等),實現通過 Web 技術開發 XR 應用。

THREE.js是一個著名的 WebGL 3D 圖形庫,它提供了一個高級抽象來通過 WebGL 在瀏覽器中實現3D圖形和動畫。lets.hackvision.pro將采用基于 THREE.js 封裝的 A-Frame 框架,它的聲明式語法設計、實體組件系統(Entity Component System,ECS)和 Apple 的 SwiftUI、RealityKit 非常類似。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

WebXR Frameworks

三、WebXR 開發環境

WebXR 的開發環境只需要 Chrome 瀏覽器和由 Meta 開發的一款插件:Immersive Web Emulator,用來模擬 XR 設備和控制器,不僅可以模擬控制器的位置,還可以實現手勢模擬、按鍵模擬等?;旧夏憧梢栽跊]有任何 XR 設備的情況下,僅用 Chrome 瀏覽器完成大部分開發。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

Immersive Web Emulator

1. 鍵盤布局

按照 visionOS 的鍵盤布局,保留 26 個字母 + 空格鍵 + Shift + Del,這里最難的其實是模擬 visionOS 真實的毛玻璃效果,僅通過普通材質的色彩+透明度,基本很難達到仿真的效果,但這里重點在于交互的實現,以后肯定會有更多模擬 visionOS UI 的 3D 素材出現。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

v0

在瀏覽器中復刻 visionOS 交互 | 鍵盤

v1

2. Direct Touch

根據 WebXR Hand Input 定義的手部特征點追蹤,可以獲得每一幀食指指尖(index-finger-tip)的空間坐標,計算其與目標物體(按鍵)的距離,當距離小于一定閾值,判定為接觸并觸發pressed事件。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

Hand Joints

為按鍵添加觸控響應效果:

在瀏覽器中復刻 visionOS 交互 | 鍵盤

3. Hover Effect

懸停點亮效果也可以通過計算食指指尖??和按鍵指尖的距離來估計,但這個距離如果太小無法起到提示用戶的效果,如果太大又容易受到旁邊按鍵的干擾。我們在這里利用raycaster的屬性,重新定義射線的范圍和指向,其中方向以上圖的【8、9】兩個點確定,范圍設定在 10cm(far: 0.1)。

與射線交匯的對象(按鍵)通過監聽raycaster-intersected事件來改變自身材質顏色并播放鍵盤聲效,以實現 Hover Effect。

在瀏覽器中復刻 visionOS 交互 | 鍵盤

Finger Raycaster

4. 輸入與編輯功能

最后根據各按鍵綁定的觸發事件,在預覽窗口中實時呈現輸入字母、大小寫切換等功能:

在瀏覽器中復刻 visionOS 交互 | 鍵盤

Keyboard Input

四、在 VR 設備中訪問

在支持手勢追蹤的 VR 設備瀏覽器中(需要在瀏覽器中打開#webxr-hands實驗特性),訪問 https://lets.hackvision.pro/keyboard

在瀏覽器中復刻 visionOS 交互 | 鍵盤

本文由 @V2XR 原創發布于人人都是產品經理。未經許可,禁止轉載。

題圖來自 Unsplash,基于 CC0 協議

該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!