蘋果公司正在擴(kuò)展其在XR領(lǐng)域的足跡，比如最近從WebXR挖來的高管，就為Vision Pro平臺帶來了新的可能性。

在筆者上一篇硬件評測的文章《【評測】Vision Pro新伴侶，國產(chǎn)消費(fèi)級8K相機(jī)—影石Insta360 X4》中，展示了通過Apple Vsion Pro 體驗(yàn) Insta360 X4 拍攝的 360° 全景照片和全景視頻。

全新的計算平臺上，單眼 4K 的魅力再次被展示得淋漓盡致，特別是超高分辨率全景照片的演示下，盡顯科技感，可以說是“空間影像”的另類補(bǔ)充。

圖源：VR陀螺

接下來，跟隨筆者的腳步，我們一同解鎖 Vision Pro 上的 WebXR 功能，并基于相關(guān)項(xiàng)目在云端部署 360° 全景內(nèi)容，以及背后更多的開發(fā)故事。

一、蘋果支持WebXR，2022年就已埋下伏筆

在教程開啟前，我們再來重溫一下 WebXR 的相關(guān)知識。

WebXR 是一種適用于網(wǎng)絡(luò)瀏覽器的標(biāo)準(zhǔn)化 API，使得開發(fā)者能夠在網(wǎng)頁上構(gòu)建 XR 內(nèi)容，無需用戶安裝專門的應(yīng)用程序。WebXR 由 W3C 的 Immersive Web Group 定義，它統(tǒng)一了以往的 WebVR 標(biāo)準(zhǔn)，并加入了對增強(qiáng)現(xiàn)實(shí)的支持，因此能夠服務(wù)于更廣泛的 XR 應(yīng)用場景。

圖源：網(wǎng)絡(luò)

通過 WebXR，開發(fā)者可以利用網(wǎng)頁技術(shù)（如 JavaScript）創(chuàng)建應(yīng)用，這些應(yīng)用能夠運(yùn)行在各種支持 WebXR 的設(shè)備上，包括 VR 頭戴設(shè)備、支持 AR 的智能手機(jī)、平板電腦等。用戶可以使用 VR/MR 設(shè)備，通過瀏覽器訪問的形式，直接體驗(yàn)沉浸式的 XR 內(nèi)容。

從開發(fā)層面看，WebXR 降低 XR 內(nèi)容的開發(fā)門檻，更開放的瀏覽器形式的訪問，也推動內(nèi)容生態(tài)的多樣化和繁榮，同時為用戶提供簡單易得的沉浸式內(nèi)容訪問途徑。在 XR 產(chǎn)業(yè)發(fā)展的早期階段，WebXR 提供了強(qiáng)大的開發(fā)支持，大量的全景照片、全景視頻網(wǎng)頁內(nèi)容也應(yīng)運(yùn)而生。

Immersive Web Group 的主席有三位，分別是三星的 Ada Rose Cannon、微軟的 Ay?egül Y?net 和谷歌的 Chris Wilson。2022 年，Cannon 在社交平臺上宣布她已加入蘋果公司，并在該公司從事 AR/VR 方面的工作——這為后來在蘋果Vision Pro 在 Safari 上支持 WebXR 其實(shí)埋下了伏筆。

圖源：網(wǎng)絡(luò)

二、打開VisionOS中的WebXR功能

VisionOS 中的 Safari 瀏覽器現(xiàn)已支持 WebXR，但必須進(jìn)行一些設(shè)置才能使其正常工作。

如何在 Safari 中為 Apple Vision Pro 啟用 WebXR 步驟：

1.打開設(shè)置。

2.選擇應(yīng)用程序。

3.選擇Safari。

圖源：網(wǎng)絡(luò)

4.滾動到窗口底部并選擇高級。

5.滾動到窗口底部并選擇功能標(biāo)志。

6.在實(shí)驗(yàn)性 XR 功能下，啟用WebXR 設(shè)備 API和WebXR 手寫輸入模塊。

7.在 WebKit 功能標(biāo)志下，啟用WebXR 增強(qiáng)現(xiàn)實(shí)模塊、WebXR GamePads 模塊、GPU 進(jìn)程：DOM 渲染。

圖源：網(wǎng)絡(luò)

8.退出設(shè)置。

9.打開Safari，或者如果它已打開，請刷新啟用WebXR 的頁面以檢查其是否正常工作。

10.由于 Apple Vision Pro 不使用控制器，因此只能使用手部追蹤的演示和體驗(yàn)才能在頭顯上正常工作。

測試：在 Safari 里面打開 https://hughred22.github.io/360Viewer3/(原博主項(xiàng)目地址，由于鏈接太長，用戶可通過備忘錄或txt的方式隔空到Vision Pro中打開)，然后點(diǎn)擊右下角的“頭顯標(biāo)識”測試，查看是否可以正常打開“全景模式”使用。

以上教程內(nèi)容，以及項(xiàng)目源代碼來自 YouTube 博主 Hugh Hou，項(xiàng)目源代碼已被上傳到 Github：https://github.com/hughred22/360Viewer3。

三、通過Github項(xiàng)目，構(gòu)建WebXR應(yīng)用

基于該 Github 項(xiàng)目，有一定動手能力的朋友們甚至可以自己打造一個 WebXR 項(xiàng)目。

準(zhǔn)備：一臺服務(wù)器/云服務(wù)器，環(huán)境：支持 ES6 的 Node.js 版本

1.將項(xiàng)目壓縮包上傳到服務(wù)器指定目錄后解壓，或使用 git 命令一鍵獲?。?/p>

git clone https://github.com/hughred22/360Viewer3.git

br

2.運(yùn)行在項(xiàng)目的 package.json 文件中定義的 build 腳本：

#如果沒有進(jìn)入項(xiàng)目目錄，則需要先項(xiàng)目所在目錄：

cd /www/wwwroot/vision

npm run build

3.運(yùn)行結(jié)果如下，那就是成功了，在該項(xiàng)目目錄下會生成靜態(tài)文件/dist/。（圖中npm版本（10.5.0）與Node.js 版本（17.9.1）不兼容導(dǎo)致的警告，這里是筆者個例服務(wù)器環(huán)境配置問題，可忽略掉）

圖源：VR陀螺

4.最后，可以采用端口映射、或域名映射的方式添加/路徑/dist/。這樣就可以通過域名，或者服務(wù)器+端口的形式在 Vision Pro 中直接訪問使用了。如果想更換相關(guān)全景照片、全景視頻資源，可以在 assets 文件下，替換相關(guān)圖像視頻內(nèi)容，再進(jìn)行 build。

5.最終結(jié)果展示：

圖源：VR陀螺

以上項(xiàng)目代碼及教程內(nèi)容僅供學(xué)習(xí)參考，版權(quán)歸屬于原作者所有。

當(dāng)然，如果你是一名專業(yè)的開發(fā)者，那么你也可以借助 WebXR 打造自己獨(dú)特的應(yīng)用程序。不過相對于原有的 WebXR 項(xiàng)目構(gòu)建，要想在 Vision Pro 上可以使用，那可能有一些不同。

四、VisionOS中與眾不同的WebXR

事實(shí)上，在 Vision Pro 上開發(fā)一個 WebXR 的應(yīng)用程序并不簡單。

Ada Rose Cannon 與 Brandel Zachernuk 在今年 3 月份發(fā)表在 Webkit 的一篇文章《Apple Vision Pro 中引入 WebXR 自然輸入》中指出：Vision Pro 上運(yùn)行 WebXR 項(xiàng)目的一個挑戰(zhàn)是因?yàn)樗峭耆两降模⑶彝耆ㄟ^ WebGL 渲染，所以不可能通過 DOM 內(nèi)容或通過鼠標(biāo)、觸控板等在傳統(tǒng)網(wǎng)頁上提供的二維輸入來提供交互。

眾所周知，VisionOS 主要依賴眼動追蹤與手勢識別。而 WebXR 的初始網(wǎng)絡(luò)標(biāo)準(zhǔn)是假設(shè)所有輸入都將由硬件控制器提供。由于 VisionOS 的自然輸入交互與依賴于監(jiān)聽物理控制器和按鈕按下的 XR 平臺不同，因此許多現(xiàn)有的 WebXR 體驗(yàn)在 Apple Vision Pro 上無法按預(yù)期運(yùn)行。

其在文中寫道：我們（蘋果）一直在 W3C 中合作，將對 VisionOS 交互模型的支持納入到 WebXR 中，我們很高興能夠幫助 WebXR 社區(qū)添加對流行 WebXR 框架的支持。

蘋果主要針對了 Vision Pro 上WebXR 在使用自然輸入交互、持續(xù)互動、將瞬態(tài)輸入與手部追蹤相結(jié)合等幾個模塊進(jìn)行了開發(fā)側(cè)講解。

1. 自然輸入交互

由于 VisionOS 中的 WebXR 需要使用空間輸入，而不是觸控板、觸摸或鼠標(biāo)，并且 DOM 在 WebXR 會話中不可見，因此輸入作為 XRSession 本身的一部分提供。與輸入相關(guān)的事件，例如select，selectstart然后selectend從會話對象中調(diào)度。

XRInputSources 在xrSession.inputSources數(shù)組中可用。由于 VisionOS 中的默認(rèn) WebXR 輸入是瞬態(tài)的，因此該數(shù)組為空 – 直到用戶捏住為止。此時，一個新輸入將添加到數(shù)組中，并且會話將觸發(fā)一個inputsourceschange事件，然后觸發(fā)一個selectstart事件。您可以使用它們來檢測手勢的開始。為了區(qū)分這種新的輸入類型，它有一個 transient-pointer的 targetRayMode。

圖源：網(wǎng)絡(luò)

2. 手、眼、指針的互動

XRInputSource包含對與輸入相關(guān)的空間中兩個不同位置的引用：the targetRaySpace和 the gripSpace。targetRaySpace表示用戶的注視方向，該空間從用戶眼睛之間的原點(diǎn)開始，并指向用戶在手勢開始時所注視的內(nèi)容。targetRaySpace最初設(shè)置為用戶注視的方向，但隨著用戶手的移動而不是眼睛的移動而更新，也就是說，手向左移動時，該指針也會向左移動，gripSpace表示當(dāng)前時間點(diǎn)用戶捏合手指的位置。

targetRaySpace可以用于查找用戶在開始手勢時想要交互的內(nèi)容，通常通過指針投射到場景中并拾取相交的對象，并且gripSpace可用于用戶手附近的對象的定位和方向以實(shí)現(xiàn)交互目的，例如，按下開關(guān)、轉(zhuǎn)動旋鈕或從虛擬環(huán)境中拾取物品。

互動結(jié)束：session當(dāng)用戶松開捏合時，對象會觸發(fā)三個事件。

圖源：網(wǎng)絡(luò)

3. 將瞬態(tài)輸入與手部追蹤相結(jié)合

VisionOS 中 Safari 上的 WebXR 也繼續(xù)支持全手部跟蹤，在體驗(yàn)期間提供手部關(guān)節(jié)信息。如果調(diào)用navigator.xr.requestSession已 hand-tracking作為附加功能包含在內(nèi)，并且這是由用戶授予的，則inputSources列表中的前兩個輸入將是tracked-pointers提供此聯(lián)合信息的標(biāo)準(zhǔn)輸入。由于這些輸入在會話期間持續(xù)存在，因此任何transient-pointer輸入都將顯示在列表的下方。手部輸入僅提供姿勢信息，不會觸發(fā)任何事件。

可以看到 Vision Pro 上關(guān)于 WebXR 的開發(fā)設(shè)計，主要的是解決人機(jī)交互上的問題。因?yàn)?Vision Pro 上獨(dú)特的眼動追蹤與手勢交互特性，讓開發(fā)者不得不做出更多的調(diào)整，以適應(yīng)蘋果的交互規(guī)則。

一個不得不思考的問題是，當(dāng)大部分開發(fā)者都涌入 APP 生態(tài)開發(fā)時，還有多少開發(fā)者會開發(fā) WebXR 的項(xiàng)目，他們的用戶價值和商業(yè)價值又在哪里？

當(dāng)然，存在即合理。也許基于 WebXR 開發(fā)者們可能的確會有一些非 APP 形式特定的場景內(nèi)容，想要在瀏覽器中去展示，而不是受限于各種規(guī)則與審核的傳統(tǒng) APP，它們將擁有更高的自由度。

參考鏈接：

基于Vision Pro的360度全景內(nèi)容項(xiàng)目參考來源：https://www.youtube.com/watch?v=76fcXzXWk2c&t=200s

更多 Vision Pro WebXR 開發(fā)細(xì)節(jié)可參考：https://webkit.org/blog/15162/introducing-natural-input-for-webxr-in-apple-vision-pro/