Chrome 瀏覽器增添 AR 效果,谷歌詳解 Web AR 實(shí)現(xiàn)技術(shù)VR/AR
谷歌一直很重視 Web 端的 VR/AR 體驗(yàn),依靠 Daydream VR 平臺(tái),谷歌在 Chrome 瀏覽器上支持 VR 效果?,F(xiàn)在,經(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)。“
在博文中,谷歌展示了其 3D 原型查看器 Article,以及如何在瀏覽器中使用 AR,詳細(xì)闡述了技術(shù)實(shí)現(xiàn)的細(xì)節(jié),干貨較多。
原型工作原理
Article 是一個(gè)可以運(yùn)行于所有瀏覽器的 3D 模型查看器。在桌面端,用戶(hù)可以在查看 3D 模型時(shí),可以拖動(dòng)模型實(shí)現(xiàn)旋轉(zhuǎn)也可以滾動(dòng)來(lái)縮放大小。在手機(jī)端,體驗(yàn)是類(lèi)似的,用戶(hù)可以點(diǎn)擊或者拖拉來(lái)旋轉(zhuǎn)模型,或者以?xún)芍皇种竵?lái)放大縮小。
為了顯示模型不是靜態(tài)圖像,而是 3D 并且可交互的,當(dāng)用戶(hù)翻動(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ì)在用戶(hù)面前的地面上顯示標(biāo)線(xiàn)。當(dāng)用戶(hù)點(diǎn)擊屏幕,3D 模型會(huì)出現(xiàn)在標(biāo)線(xiàn)上,以實(shí)際大小呈現(xiàn)在地面上。用戶(hù)可以圍繞物體運(yùn)動(dòng)一周,來(lái)獲得圖像和視頻無(wú)法給予的體積感和直接感。
用戶(hù)還可以難過(guò)過(guò)點(diǎn)擊-拖拉來(lái)重新放置模型。一些細(xì)微的特征,如陰影和光照可以幫助模型融入環(huán)境。
從用戶(hù)測(cè)試中,我們了解到,清晰的界面交互線(xiàn)索是幫助用戶(hù)理解 AR 如何運(yùn)行的關(guān)鍵。例如,當(dāng)用戶(hù)等待系統(tǒng)識(shí)別出一個(gè)可以放置模型的表面時(shí),地面上會(huì)出現(xiàn)一個(gè)圓圈,根據(jù)用戶(hù)的運(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 文件中未被注釋?zhuān)鼘?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),這可以使得用戶(hù)可以復(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)系、類(lèi)和構(gòu)建步驟,我們使用了 NPM,ES6,Babel 和 Webpack。
展望未來(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è)面。
來(lái)源:京荊
1.砍柴網(wǎng)遵循行業(yè)規(guī)范,任何轉(zhuǎn)載的稿件都會(huì)明確標(biāo)注作者和來(lái)源;2.砍柴網(wǎng)的原創(chuàng)文章,請(qǐng)轉(zhuǎn)載時(shí)務(wù)必注明文章作者和"來(lái)源:砍柴網(wǎng)",不尊重原創(chuàng)的行為砍柴網(wǎng)或?qū)⒆肪控?zé)任;3.作者投稿可能會(huì)經(jīng)砍柴網(wǎng)編輯修改或補(bǔ)充。

- 游??萍纪瞥觥度朗锾一ā稸R版游戲《情緣劫》
- 阿里投資的Magic Leap神秘AR頭盔發(fā)貨 得鎖在保險(xiǎn)箱里
- NeoSensory推出觸覺(jué)反饋電子背心exoskin
- 恐怖游戲《the devil awaits vr》推出pico小怪獸版
- 2017年VR/AR領(lǐng)域投資額近30億美元 垂直領(lǐng)域受青睞
- 代碼顯示谷歌計(jì)劃將ARCore集成到Chrome OS
- 重新定義家居未來(lái)設(shè)計(jì) 酷家樂(lè)“ABC”AI 計(jì)劃發(fā)布
- 蘋(píng)果申請(qǐng)車(chē)載VR專(zhuān)利:在無(wú)人車(chē)內(nèi)盡情“抓僵尸”
- Oculus SDK加入NVIDIA LMS技術(shù) 以提升顯示效果
- VR GIF:HoloLens掃臉看穿你的心 演示逆天3D手術(shù)