Google Chrome 增添 AR 效果,詳解 Web AR 實現技術

作者 | 發布日期 2018 年 01 月 26 日 8:45 | 分類 Google , xR/AR/VR/MR , 網路 line share follow us in feedly line share
Google Chrome 增添 AR 效果,詳解 Web AR 實現技術


Google 一直很重視 Web 端的 VR / AR 體驗,靠著 Daydream VR 平台,Google 在 Chrome 瀏覽器上支援 VR 效果。經過一段時間的開發和探索,Google 正式展示 Chrome 的 AR 效果。

Google 部落格文章表示:「接下來幾個月,會有上億的 Android 和 iOS 裝置支援 AR 體驗,透過手機,你可以把虛擬物體放在現實世界。為了使更多人能體驗這個產品,我們一直在探索如何在網頁端實現虛擬實境效果,之後所有人透過瀏覽器就能獲得神奇的 AR 體驗。

文中 Google 展示了 3D 原型檢視器 Article,以及如何在瀏覽器使用 AR,詳細闡述了技術實現的細節,以下不改變原意編譯,來看看 Web AR 如何實現的吧。

原型工作原理

Article 是可執行於所有瀏覽器的 3D 模型檢視器。在桌面端,用戶可在檢視 3D 模型時,拖曳模型旋轉,也可以捲動縮放大小。手機端體驗類似,用戶可點擊或拖拉來旋轉模型,或以兩根手指放大縮小。

▲ 桌面端模型展示效果。

為了顯示模型不是靜態影像,而是 3D 並可互動,當用戶翻動頁面時,模型會輕微旋轉。

透過 AR,模型更栩栩如生。AR 的獨特力量在於可將虛擬和現實融合。所以我們瀏覽網頁時,找到一個模型,並把它放在房間中體驗實際大小,且可以繞其走一圈。

當 Article 加載至支援 AR 的裝置和瀏覽器時,瀏覽器底部會出現一個 AR 按鈕。按下 AR 按鈕會觸發裝置鏡頭,並會在用戶面前的地上顯示標線。當用戶點擊螢幕,3D 模型會出現在標線上,以實際大小呈現。用戶可圍繞物體運動一圈,獲得圖像和影片無法給予的體積感和直接感。

▲ AR 裝置使用 Article 瀏覽效果。

用戶還可以點擊─拖拉來重新放置模型。一些細微的特徵,如陰影和光照可幫助模型融入環境。

從用戶測試可了解,清晰的介面互動線索是幫助用戶理解 AR 如何執行的關鍵。例如,當用戶等待系統辨識一個可放置模型的表面時,地上會出現一個圓圈,根據用戶的運動會傾斜。這可幫助介紹 AR 互動──虛擬物體和物理環境之間的互動。

底層技術細節

Google 用 Three.js 來創造自適應模型檢視器 Article。Three.js 使開發者更容易接觸 Web GL 的底層技術,並 Three.js 有大量案例、檔案和解答來降低開發者的學習成本。

為了確保流暢的互動和動態效果,Google 最佳化了這些有助於效果的因素:

  • 採用低多邊形數位/類比型。
  • 仔細控制場景中的照明數量。
  • 手機端減少陰影效果。
  • 渲染模擬器 UI 時,透過應用指向距離函數的著色器,高效率地以無限制分析度渲染效果。

為了加速更新時間,更建立了一個桌面 AR 模擬器,可允許偵測 UX 變化。這使預覽變更可同時發生。模擬器之前,不管是多麼微小的變化都必須重新加載到手機裝置,每個建立─推送─加載週期都得花超過 10 秒。有了模擬器,可在桌面預覽調整,完成後再推送到手機裝置。

模擬器建立在桌面 AR polyfill 和 Three.js。如果有一行程式碼在 index.js 檔案中未被註釋,它將呈現灰色的網格環境,並添加鍵盤和滑鼠控制項來代替現實世界的物理行動。模擬器包含在 Article 的項目資料庫裡。

太空服模型來源於 Poly(Google 的 3D 模型資料庫)。Poly 許多模型透過 Creative Commons Attribution 授權,這可讓用戶複製或重新設計,只要建立者授權。

Article 的 2D 部分是透過現成資料庫和 Web 工具。為了適應布局和排版以及整體主題,使用了 Bootstrap(可使開發者輕鬆建立回應不同裝置螢幕大小的優秀網站)。為了致敬維基百科和 Medium,Google 採用 Bootswatch 的 Paper 主題。為了管理從屬關係、類和構建步驟,使用了 NPM、ES6、Babel 和 Webpack。

展望未來

網頁 AR 有巨大潛力,可用於購物、教育和娛樂等。Article 只是一系列原型工具的其中一個,還有更多值得探索:如何利用光照估計來融合虛擬 3D 物體與真實世界、如何添加敘事性 UI 註解放置在模型的正確位置。Web 上的手機 AR 目前十分有趣,因為還有很多值得探索的東西。如果想更了解 Google 實驗性瀏覽器,並開始建立自己的模型,可前往 Google 的開發者頁面

(本文由 雷鋒網 授權轉載;首圖來源:Google

延伸閱讀: