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

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

在博文中，谷歌展示了其3D原型查看器Article，以及如何在瀏覽器中使用AR，詳細(xì)闡述了技術(shù)實(shí)現(xiàn)的細(xì)節(jié)，干貨較多。雷鋒網(wǎng)對(duì)其原文做了不改變?cè)敢獾木庉?，一起?lái)看看Web AR是如何實(shí)現(xiàn)的吧。

原型工作原理

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

（桌面端模型展示效果）

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

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

當(dāng)Article加載至支持AR的設(shè)備和瀏覽器時(shí)，瀏覽器底部會(huì)出現(xiàn)一個(gè)AR按鈕。按下AR按鈕會(huì)激活設(shè)備的攝像頭，并且會(huì)在用戶面前的地面上顯示標(biāo)線。當(dāng)用戶點(diǎn)擊屏幕，3D模型會(huì)出現(xiàn)在標(biāo)線上，以實(shí)際大小呈現(xiàn)在地面上。用戶可以圍繞物體運(yùn)動(dòng)一周，來(lái)獲得圖像和視頻無(wú)法給予的體積感和直接感。

（在AR設(shè)備中使用Article瀏覽效果）

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

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

底層技術(shù)細(xì)節(jié)

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

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

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

• 仔細(xì)地控制了場(chǎng)景中的照明數(shù)量；

• 在手機(jī)端減少了陰影效果；

• 渲染模擬器UI時(shí)，通過(guò)應(yīng)用指向距離函數(shù)的著色器來(lái)高效率地以無(wú)限制分辨率渲染效果。

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

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

太空服模型來(lái)源于Poly（谷歌的3D模型庫(kù)）。Poly中許多模型通過(guò)Creative Commons Attribution被授權(quán)，這可以使得用戶可以復(fù)制或者重新設(shè)計(jì)它們，只要?jiǎng)?chuàng)建者授權(quán)。

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

展望未來(lái)

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

via Google雷鋒網(wǎng)編譯

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見(jiàn)轉(zhuǎn)載須知。