Chrome瀏覽器增添AR效果，谷歌詳解Web AR實現技術

谷歌一直很重視Web端的VR/AR體驗，依靠Daydream VR平台，谷歌在Chrome瀏覽器上支持VR效果。現在，雷鋒網了解到，經過一段時間的開發和探索，谷歌開始正式展示Chrome上的AR效果。

谷歌在其博客上表示：」在接下來幾個月，會有上億的設備安卓和iOS設備支持AR體驗，也就是說，通過手機，你可以把虛擬物體放置在現實世界中。為了使儘可能多的人能夠體驗這個產品，我們一直在探索如何在網頁端實現虛擬現實效果，此後所有人通過瀏覽器就能獲得神奇的AR體驗。「

在博文中，谷歌展示了其3D原型查看器Article，以及如何在瀏覽器中使用AR，詳細闡述了技術實現的細節，乾貨較多。雷鋒網對其原文做了不改變願意的編輯，一起來看看Web AR是如何實現的吧。

Article是一個可以運行於所有瀏覽器的3D模型查看器。在桌面端，用戶可以在查看3D模型時，可以拖動模型實現旋轉也可以滾動來縮放大小。在手機端，體驗是類似的，用戶可以點擊或者拖拉來旋轉模型，或者以兩隻手指來放大縮小。

（桌面端模型展示效果）

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

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

當Article載入至支持AR的設備和瀏覽器時，瀏覽器底部會出現一個AR按鈕。按下AR按鈕會激活設備的攝像頭，並且會在用戶面前的地面上顯示標線。當用戶點擊屏幕，3D模型會出現在標線上，以實際大小呈現在地面上。用戶可以圍繞物體運動一周，來獲得圖像和視頻無法給予的體積感和直接感。

（在AR設備中使用Article瀏覽效果）

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

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

我們用Three.js來創造了自適應模型查看器Article。Three.js使開發者更容易接觸到Web GL的底層技術，並且Three.js有大量的案例，文檔和大量解答來降低開發者的學習成本。

為了確保流暢的交互和動態效果，我們優化了這些有助於效果的因素：

• 採用了低多邊形數模型；

• 仔細地控制了場景中的照明數量；

• 在手機端減少了陰影效果；

• 渲染模擬器UI時，通過應用指向距離函數的著色器來高效率地以無限制解析度渲染效果。

為了加速迭代時間，我們創建了一個桌面AR模擬器，其可以允許我們檢測UX變化。這使得預覽更改可以同時發生。在模擬器之前，不管是多麼微小的變化都必須重新載入到手機設備，每個創建-推送-載入周期都得花超過10秒的時間。有了模擬器，我們可以在桌面上預覽調整，完成後再推送到手機設備。

模擬器建立在桌面AR polyfill和Three.js上。如果有一行代碼在index.js文件中未被注釋，它將會呈現出一個灰色的網格環境，並添加鍵盤和滑鼠控制項來替代現實世界中物理移動。模擬器包含在Article的項目庫中。

太空服模型來源於Poly（谷歌的3D模型庫）。Poly中許多模型通過Creative Commons Attribution被授權，這可以使得用戶可以複製或者重新設計它們，只要創建者授權。

Article的2D部分是通過現成庫和Web工具。為了適應布局和排版，以及整體的主題，我們使用了Bootstrap(其可以使得開發者可以輕鬆創建能夠響應不同設備屏幕大小的優秀網站）。為了致敬維基百科和Medium，我們採用了Bootswatch的Paper主題。為了管理從屬關係、類和構建步驟，我們使用了NPM，ES6，Babel和Webpack。

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

via Google雷鋒網編譯

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