這裡有最全的開發和UX/UI資源，WebXR應用開發指北

前不久，英國AR獨角獸公司Blippar在經歷破產風波後再次「營業」，這回他們帶來的新產品不是基於計算機視覺的AR定位應用，不是AR購物應用，更不是Windows手機、或Google Glass應用，而是支持WebAR的AR開發平台Blippbuilder。為什麼這一次Blippar選擇了WebAR呢？

其創始人Ambarish Mitra表示：網頁目前依然是一個主流平台，我們看好網頁端AR打開市場的能力，同時，發展WebAR也有望推動未來AR技術的發展。

Blippbuilder

不管是WebAR、WebXR還是WebVR，顧名思義，指的是基於Web互聯網用於VR和AR體驗的方案，其包括VR頭顯，移動AR等，不受設備限制，通用性更強。據悉WebXR的API和WebGL可匹配，可將一個URL鏈接作為VR/AR體驗的入口，就像現在瀏覽網頁那般簡單。

WebAR雖然在行業內略顯低調，而且它的API仍然不穩定，但在進一步優化改進後，很有可能成為新時代W3C標準。不可否認的是，網頁端AR/VR/XR的應用開始越來越多，市面上也出現了越來越多的相關開發平台。

之所以WebXR（包含WebAR和WebVR）的人氣逐漸攀升，是因為對於剛入門XR的開發者來講，選擇WebXR是一個比較保靠的決定，因為它成本低、開發相對簡單，而且網頁/瀏覽器擁有大量用戶，使得WebXR非常適合用作一款營銷工具。

《蜘蛛俠：平行宇宙》AR

比如，為了宣傳電影《蜘蛛俠：平行宇宙》，索尼影業就曾推出用8th Wall AR開發平台製作的兩款Web AR體驗，通過掃描二維碼，粉絲們便可在網頁中激活動態的蜘蛛俠AR濾鏡，無需下載應用就能與心愛的超級英雄合影。

豐田AR廣告

前不久，豐田汽車與廣告公司Conill合作，也用8th Wall的開發平台製作了一款安卓瀏覽器橫幅廣告，在手機中點開廣告後，屏幕中就會彈出2020年卡羅拉的AR模型，消費者可通過手機攝像頭將AR疊加在周圍環境中，除了動態查看汽車的動力天窗、LED前燈、合金輪轂外，還能以360°的方式查看汽車內部。

此外，通過WebXR介面，開發者還可以在瀏覽器分發遊戲、影片等XR內容。這些內容不僅可以在PC端查看，也可以在Google Daydream、Oculus Rift/Quest、三星Gear VR、HTC Vive、WMR等VR設備的瀏覽器中運行。

Firefox Reality

目前，VR/AR頭顯端有多個瀏覽器支持WebXR，比如Oculus瀏覽器、Firefox Reality、Samsung Internet、Supermedium、Chrome等。

Magic Leap Helio

此外，本月初Magic Leap也宣布其瀏覽器Helio將支持WebXR，並與3D模型平台Sketchfab合作，今後開發者只需將3D作品上傳到Sketchfab平台，即可通過Magic Leap進行體驗。

Supermedium

在移動端，也有專門支持WebXR的瀏覽器應用，比如iOS WebXR Viewer、WebARonARKit（iOS）、WebARonARCore（安卓）。

Moon Rider

而一些公司也證明了在WebXR上也能開發有趣的遊戲，比如Supermedium就推出了一款網頁版VR節奏打擊遊戲：《Moon Rider》，與《Beat Saber》玩法相似，遊戲支持四種模式，除了「光劍」玩法，還有用拳頭擊打音符模塊的玩法。不過效果方面，偶爾會出現延遲、音頻不同步等問題。

總之，WebXR的應用場景不少，客戶端足夠多，不管用戶有沒有XR硬體，都能觀看AR/VR內容，也不需要下載，在未來這種形式的XR真的有望成為打開市場的利器。

WebXR開發的參考建議

那麼要開發優質的WebXR內容，應該有哪幾點考量呢？

首先，考慮到WebXR不需要用戶下載應用，那麼開發者就應該注意XR內容的大小，如果太大，可能就會需要很久時間緩衝，影響體驗感。

其次，有些360°互動式VR視頻需要安裝Google Spotlight Stories應用能運行，安裝額外的應用也會增加WebXR內容的複雜性。

另外，應該針對不同硬體平台進行內容的優化，比如，可在高端VR頭顯中運行的內容有時候並不適用於其他平台。而且，不同的VR設備解析度、FOV、DoF、感測器和手柄都會有不同，而同意的API則可被用作通用的開發工具，開發針對全部平台的內容。

針對網頁端、頭顯端也可以對WebXR內容進行優化，比如：為360°互動式網頁內容加入對滑鼠、觸屏輸入方式的支持；優化VR頭顯用戶的體驗，並加入對VR手柄的支持。

關於WebXR未來

就目前來講，開發者只需要關心如何開發優質的WebXR內容，不過在未來，相信網頁端XR內容與正式的XR應用之間的差距將縮小，這是因為：

越來越多VR/AR設備的瀏覽器提供對WebXR的原生支持；

移動端硬體對3D圖像的渲染能力越來越強；

WebXR應用增多；

AR濾鏡/攝像頭也對WebXR提供支持，比如Facebook Save to WebVR、Facebook 3D posts、Mozilla Hubs和Spoke、Adobe沉浸式平台、亞馬遜Sumerian、Unity Mobile AR廣告、谷歌AR搜索、Adobe Project Aero、Google和Mapbox的AR地圖等；

USDZ、glTF等新3D格式逐漸普及後，3D控制項的開發流程也更加成熟；

5G網路和雲計算對於VR/AR的提升。

關於WebXR開發框架與平台

那麼開發者們，如果想開發WebXR內容，該從何開始呢？目前，兩個最受歡迎的VR開發框架分別為A-Frame和React 360，二者均使用three.js 3D資源庫，開發者還可以使用babylon.js資源庫。此外，開發者們還可使用Sumerian、Vizor、Hologram或PlayCanvas工具，可用於編輯視覺內容。

更方便點的，開發者可以在8th Wall、awe、NextTech AR等AR平台上直接開發AR內容，或者也可以利用JS 3D資源庫來編寫代碼。

方便使用的資源

W3C提供的統一資源

WebXR API Spec

Legacy WebVR API Spec

用Chrome開發WebXR的資源

three.js資源（入門級）

AR.js, Argon.js, ARToolKit.js Javascript庫（用於開發AR應用）

three.js AR資源庫（支持WebARonARKit和WebARonARCore）

谷歌介紹WebAR

用three.js開發WebXR內容指南

用於babylon.js 3D引擎的WebXR工具

A-Frame對WebAR的基礎支持

用A-Frame開發WebXR所需工具系統

React 360 框架

Facebook』s 2019 F8關於WebXR的部分

亞馬遜Sumerian

Mozilla闡述基於瀏覽器的計算機視覺功能

Google Omnitone空間音頻渲染工具

Facebook空間音頻設計工具軟體套件

PlayCanvas開發VR內容教程

Magic Leap』s Helio瀏覽器

UX/UI資源

VR UX設計資精選

Mozilla VR團隊UX/UI工程師心得

Google Cardboard內容設計指南

Oculus最佳示例

WebXR開發文章

VR UX開發文章

社區

Facebook Immersive Web小組

LinkedIn Immersive Web小組

Facebook Spark AR社區（專註於Facebook和Instagram AR濾鏡）

Facebook小組（專註於空間音頻）

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！