2023年5月20日，由中共福州市委宣傳部作為指導單位，福州廣播電視臺、93913-XR信息與產(chǎn)業(yè)服務、OmgXR元宇宙興趣社群主辦的“2023 XRIC產(chǎn)業(yè)年會暨「金V獎」頒獎盛典”，在福州海峽國際會展中心隆重舉行。

XRIC產(chǎn)業(yè)年會暨「金V獎」頒獎盛典是目前我國XR產(chǎn)業(yè)規(guī)格最高、規(guī)模最大的年度盛會，大會梳理了元宇宙技術體系與產(chǎn)業(yè)鏈各環(huán)節(jié)發(fā)展情況，涵蓋了元宇宙新技術基礎設施、虛擬世界建設及內(nèi)容、虛擬數(shù)字人以及元宇宙價值體系等內(nèi)容。現(xiàn)場菁英齊聚，大咖云集，同時還有數(shù)萬名觀眾通過在線直播收看了本場活動。

在大會的主旨演講環(huán)節(jié)，來自Meta Reality Labs VR Web Platform的Felix Zhang（張?zhí)祛＃┳髁祟}為「Unleashing The Future of WebXR」的分享。

如今，隨著虛擬現(xiàn)實技術的發(fā)展，開發(fā)者們在互聯(lián)網(wǎng)中創(chuàng)建出越來越多身臨其境、引人入勝的虛擬現(xiàn)實體驗，元宇宙的概念也正在成為現(xiàn)實。而WebXR則處于這一趨勢的前沿，提供了一種可訪問且跨平臺的方式來構建虛擬現(xiàn)實和增強現(xiàn)實體驗。Felix Zhang（張?zhí)祛＃┰谘葜v中詳細介紹了WebXR平臺及其功能，總結了關于WebXR的關鍵操作步驟，分享了自身的開發(fā)經(jīng)驗，以幫助廣大開發(fā)者更好地了解并著手WebXR開發(fā)。

WebXR平臺及其功能介紹

Felix Zhang首先對WebXR平臺及其功能進行了介紹。WebXR平臺用于在網(wǎng)絡上創(chuàng)建身臨其境的增強現(xiàn)實 (AR) 和虛擬現(xiàn)實 (VR) 體驗，它建立在開放標準之上，為平臺提供了一組統(tǒng)一的API，實現(xiàn)了跨越各種設備和瀏覽器的跨平臺兼容性。作為WebVR的繼任者，WebXR現(xiàn)在還加入了MR功能，使其成為面向VR和AR開發(fā)者的更加通用的平臺。

Felix Zhang（張?zhí)祛＃┍硎荆瑥V大開發(fā)者之所以不開發(fā)原生XR應用，而是廣泛應用WebXR進行開發(fā)，是基于以下幾點原因：

1、易于訪問。在WebXR平臺，用戶可以通過網(wǎng)絡瀏覽器直接訪問體驗，無需下載或安裝其他應用程序。

2、跨平臺兼容性。開發(fā)者只需開發(fā)一次，應用程序即可在多個設備上運行，只需進行最少量的平臺特定調(diào)整。

3、便于更新維護。只需在服務器上更新，用戶就能體驗到最新版本，無需手動更新。

4、豐富用戶體驗。WebXR允許開發(fā)者使用他們熟悉的網(wǎng)絡技術進行開發(fā)，例如HTML、CSS和JavaScript，從而進一步組合并豐富用戶的體驗。

不過Felix Zhang（張?zhí)祛＃┮脖硎?，盡管WebXR平臺擁有更強大的功能，但相較于原生XR應用，WebXR目前依然不夠流行。他認為，對于開發(fā)者而言，這兩個平臺雖然有所差別，但這些差別目前正在縮小，如果開發(fā)者在設計WebXR體驗時將性能問題納入考量，并采用正確的技術來進行構建，完全可以創(chuàng)造出可以媲美原生XR體驗的美妙體驗。

接下來，F(xiàn)elix Zhang（張?zhí)祛＃榇蠹椰F(xiàn)場演示了兩個屢獲殊榮的WebXR體驗，分別是Project Flowerbed和Spatial Fusion。

Project Flowerbed是一個沉浸式、冥想式的VR園藝體驗，旨在展現(xiàn)WebXR的無限可能。該項目去年在Meta Connect大會上公布，今年早些時候Meta已經(jīng)正式將其開源。在構建Project Flowerbed的過程中，Meta站在WebXR開發(fā)人員的立場上，找出了WebXR與原生XR應用的差異并彌合了它們。這個過程還催生了新一代的WebXR模擬器——Immersive Web Emulator。

Spatial Fusion則專為在Meta Quest 2和Meta Quest Pro上獲得最佳體驗而設計。這也是Meta首次嘗試在Quest瀏覽器平臺創(chuàng)建優(yōu)質(zhì)的WebXR混合現(xiàn)實體驗，并集中展示了Presence Platform上所有Meta認為對WebXR未來十分重要的特性。

Felix Zhang（張?zhí)祛＃┻M一步指出了WebXR可支持的Presence Platform的五大特性，即：Passthrough（直通）、Anchors（錨點）、Hit-test（碰撞檢測）、Planes（平面識別）和Hands（手部追蹤）。

1、Passthrough（直通）。這是WebXR中的一項特性，即允許用戶在查看周圍的真實環(huán)境的同時對其進行增強，將虛擬對象疊加其上。在WebXR平臺上，Passthrough使用Meta Quest設備上的攝像頭來捕捉用戶周圍環(huán)境的視頻，然后將虛擬內(nèi)容疊加到實時視頻流上。這創(chuàng)造了虛擬對象是現(xiàn)實世界的一部分的錯覺，并允許用戶以更自然的方式與它們交互。WebXR Passthrough是創(chuàng)建沉浸式MR體驗的重要功能，可無縫融合虛擬和現(xiàn)實世界的元素。

2、Anchors（錨點）。在WebXR中，Anchor（錨點）是現(xiàn)實世界中被設備追蹤的一個點，成為混合現(xiàn)實體驗中放置虛擬對象的參考。錨點允許將虛擬對象放置在現(xiàn)實世界中的特定位置并在會話中（Session）持久存在，以便后續(xù)重新訪問這些虛擬對象并與之交互。錨點一旦被創(chuàng)建，就可以用于在現(xiàn)實世界中放置虛擬物體以及調(diào)整虛擬物體的姿態(tài)。此外，WebXR平臺還支持Persistent Anchors（持久化錨點），可以根據(jù)來源保存錨點，并通過JavaScript API 恢復或刪除。

3、Hit-test（碰撞檢測）。這是一種允許開發(fā)人員將虛擬對象準確地放置在現(xiàn)實世界中的功能。它涉及從用戶設備投射虛擬光線并檢查與現(xiàn)實世界對象的交叉點。這將允許開發(fā)人員以與現(xiàn)實世界一致的方式將虛擬對象放置在用戶的環(huán)境中。

4、Planes（平面識別）。這是一項類似但更強大的功能，它允許MR應用程序檢測現(xiàn)實世界中的平面，例如桌子、地板或墻壁，從而幫助 WebXR 應用程序了解用戶在現(xiàn)實世界所處的環(huán)境。一旦檢測到平坦表面，WebXR API就可以返回有關該表面相對于設備坐標系的位置、方向和幾何數(shù)據(jù)的信息。然后用戶就可以使用此信息將虛擬對象更逼真、更準確地放置在現(xiàn)實世界中。此外，用戶還可以重建WebXR體驗中的平面，甚至可以為其添加逼真的物理效果。

5、Hands（手部追蹤）。Hand-tracking是一種替代輸入方法，用戶可以通過手部追蹤功能使用自然的手勢和動作與虛擬對象進行交互，例如抓取和投擲對象，做出手勢來觸發(fā)動作等等。手部追蹤還可用于創(chuàng)造更加身臨其境的體驗，例如讓用戶在VR中看到自己的手和手指。

如何設置開發(fā)環(huán)境

接下來，F(xiàn)elix Zhang（張?zhí)祛＃┻M一步講解了在開始構建WebXR前，開發(fā)者如何設置開發(fā)環(huán)境。他表示，開發(fā)環(huán)境的設置十分重要：目前有多種WebXR框架和引擎供開發(fā)者應用，而選擇合適的WebXR開發(fā)工具則可以讓開發(fā)者事半功倍。

Felix Zhang（張?zhí)祛＃┦紫冉榻B了一些開發(fā)者目前最常用的支持WebXR的框架和引擎。

1、Three.js。這是一個多功能且適應性強的3D庫，可以勝任從簡單的3D動畫到復雜的虛擬現(xiàn)實體驗等大量項目。它擁有一個龐大的開發(fā)者社區(qū)，從而產(chǎn)生了廣泛的開發(fā)資源，其中包括教程、綜合文檔和活躍的論壇討論。

2、Babylon.js。Babylon.js以其易于使用的API和對簡單性的高度重視脫穎而出，它特別易于3D或游戲開發(fā)的新手上手。Babylon.js還集成了一個物理引擎，簡化了開發(fā)者在沉浸式體驗中實現(xiàn)真實世界物理效果的工作。

3、A-Frame。A-Frame利用Entity-Component-System提供強大、靈活的設計模式，這在專業(yè)游戲引擎中很常見。它允許開發(fā)人員將基本的Entity（實體）組合在一起，構建復雜的 3D 場景。A-Frame憑借其聲明性、類似 HTML 的語法，提供了一種簡單直觀的開發(fā)方法，即使對于3D開發(fā)經(jīng)驗有限的開發(fā)者也十分友好。

4、Wonderland Engine和PlayCanvas。這兩個現(xiàn)代3D引擎適用于喜歡在開發(fā)時使用視覺方法與3D場景進行交互的開發(fā)者，擁有大量功能，可以使WebXR應用程序的開發(fā)更加容易。

Felix Zhang（張?zhí)祛＃┍硎荆@些框架和引擎都有其獨特的功能和優(yōu)勢，適用于有不同需求的開發(fā)者。除框架和引擎以外，F(xiàn)elix Zhang（張?zhí)祛＃┻€介紹了一些開發(fā)者工具和庫。

首先是Immersive Web Emulator。這是一個可以幫助創(chuàng)建WebXR內(nèi)容的瀏覽器擴展程序，由Felix Zhang（張?zhí)祛＃┖推鋱F隊開發(fā)。它能夠使開發(fā)人員響應式地在桌面瀏覽器上運行WebXR應用程序，而無需XR設備的支持。該擴展程序受Mozilla Reality的WebXR Emulator Extension啟發(fā)，同時Felix Zhang（張?zhí)祛＃┖蛨F隊成員努力對其進行了擴展以實現(xiàn)更好的體驗。Immersive Web Emulator的設計和構建重點是實現(xiàn)完整的輸入模擬、更高的可用性和更多的功能，例如鍵盤輸入鏡像/轉發(fā)。

Meta于今年2月在Chrome和Edge擴展程序商店正式推出了該工具，此后發(fā)布了2次重大更新。最新更新的V1.2版本完全實現(xiàn)了Immersive Web Emulator與Quest頭顯的功能對等，這意味著Quest頭顯支持的所有WebXR功能現(xiàn)在也被模擬器所支持。

接下來是Reality Accelerator Toolkit，簡稱RATK。這是一個WebXR實用程序庫，旨在簡化混合現(xiàn)實功能在WebXR應用程序中的集成。該程序庫目前與Three.js 3D庫兼容，旨在彌合底層WebXR API和Three.js提供的高層 API 之間的差距。它能夠管理錨點、檢測到的平面和現(xiàn)實世界中碰撞檢測的目標，并自動將它們轉換為Three.js場景中的Object3D實例，使開發(fā)者更容易訪問和使用它們。

最后是WebXR Samples Repo，這是Felix Zhang一直在從事研發(fā)的新項目。這是一個能用于實際生產(chǎn)環(huán)境的THREE.js模板應用程序，集成了許多Felix Zhang和團隊在開發(fā)Project Flowerbed過程中發(fā)現(xiàn)的實用庫和實用應用。WebXR Samples Repo中包括了：RATK支持、Becsy ECS、其他實用庫如對游戲手柄的封裝、以及更多示例系統(tǒng)和組件，以便開發(fā)者能更快的投入WebXR內(nèi)容創(chuàng)建工作。

測試、調(diào)試和優(yōu)化WebXR體驗

在分享的第三個環(huán)節(jié)中，F(xiàn)elix Zhang（張?zhí)祛＃┙榻B了開發(fā)者如何測試、調(diào)試和優(yōu)化WebXR應用程序，以確保它按預期工作并且給用戶更滿意的體驗。他分享了自己常用的幾種工具和技術。

第一個工具是Chrome DevTools。這是一個用于調(diào)試和測試Web應用的程序，其中包括WebXR體驗。開發(fā)者可以使用Chrome遠程調(diào)試器在聯(lián)機設備上調(diào)試WebXR頁面、獲取控制臺日志、檢查網(wǎng)絡流量或捕獲準確的性能快照。

將Immersive Web Emulator與Chrome DevTools兩個工具相結合，開發(fā)者可以在不需要物理設備的情況下調(diào)試自己的WebXR體驗——開發(fā)者可直接從瀏覽器窗口進入體驗，在模擬器的幫助下，無需佩戴XR頭顯即可完成體驗及調(diào)試。

但Felix Zhang（張?zhí)祛＃┮仓赋觯@種方法有一個缺點，即由于硬件之間的明顯差異，開發(fā)者在筆記本電腦/PC上拍攝的性能快照并不代表在Meta Quest頭顯上運行體驗的實際性能。雖然Immersive Web Emulator在調(diào)試體驗方面效果很好，但Felix Zhang建議開發(fā)者仍需定期測試頭顯端的體驗，以更好地了解其實際性能，以便進行相應地調(diào)整和更改。

第二個工具是Meta Quest Developer Hub。該開發(fā)工具為開發(fā)者提供了多種功能來調(diào)試和分析其沉浸式體驗，其中包括：

1、輕松查看logcat日志；

2、專用的性能分析器選項卡；

3、幫助開發(fā)者輕松安裝OVR Metrics工具。

第三個工具是Performance Analyzer，這是Meta Quest頭顯的實時指標監(jiān)視器。該工具允許開發(fā)者查看和自定義利用率圖表，包括CPU、GPU、幀速率、內(nèi)存等圖形化參數(shù)。

第四個工具是OVR Metrics，這是Meta Quest頭顯的性能監(jiān)控工具。它提供各種性能指標，包括幀速率、熱量、GPU和CPU統(tǒng)計數(shù)據(jù)。該工具通過頭顯中的屏幕圖形、正在運行的應用程序或可從設備檢索的報告提供這些數(shù)據(jù)。

第五個工具是用于Quest的RenderDoc。這是一款功能齊全的圖形調(diào)試工具，可以處理3D WEB內(nèi)容，開發(fā)者可以在GPU上捕獲、重放和調(diào)試場景。捕獲回放會向開發(fā)者一步一步展示GPU正在做些什么，幫助了解場景是如何渲染的，并允許檢查紋理和繪制緩沖區(qū)。

RenderDoc還提供硬件性能指標，讓開發(fā)者了解GPU性能并找到GPU優(yōu)化的潛在領域。Meta會維護自己的RenderDoc分支。這個分支可以提供對Quest 芯片組底層GPU分析數(shù)據(jù)的訪問。

在分享的最后，F(xiàn)elix Zhang（張?zhí)祛＃┲赋?，WebXR為開發(fā)者創(chuàng)建出更為優(yōu)質(zhì)的沉浸式體驗提供了強力的支持，他也呼吁廣大XR內(nèi)容開發(fā)者們加入WebXR平臺。

開發(fā)者如想了解更多關于WebXR的最新功能及更新內(nèi)容，可關注Oculus開發(fā)者網(wǎng)站和Meta的社交媒體。