谷歌一直很重視 Web 端的 VR/AR 體驗，依靠 Daydream VR 平臺，谷歌在 Chrome 瀏覽器上支持 VR 效果?，F(xiàn)在，雷鋒網(wǎng)了解到，經(jīng)過一段時間的開發(fā)和探索，谷歌開始正式展示 Chrome 上的 AR 效果。

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

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

原型工作原理

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

(桌面端模型展示效果)

為了顯示模型不是靜態(tài)圖像，而是 3D 并且可交互的，當用戶翻動頁面時，模型會輕微的旋轉(zhuǎn)。

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

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

(在 AR 設備中使用 Article 瀏覽效果)

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

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

底層技術細節(jié)

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

為了確保流暢的交互和動態(tài)效果，我們優(yōu)化了這些有助于效果的因素：

采用了低多邊形數(shù)模型

仔細地控制了場景中的照明數(shù)量

在手機端減少了陰影效果

渲染模擬器 UI 時，通過應用指向距離函數(shù)的著色器來高效率地以無限制分辨率渲染效果。

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

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

太空服模型來源于 Poly(谷歌的 3D 模型庫)。Poly 中許多模型通過 Creative Commons Attribution 被授權，這可以使得用戶可以復制或者重新設計它們，只要創(chuàng)建者授權。

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

展望未來

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