谷歌展示3D原型查看器Article，探索WebAR實現

映維網將與大家一起探索AR內容如何在網頁上運行

（映維網 2018年01月23日）在接下來的數個月里，數以億計的安卓設備和iOS設備將能夠支持增強現實體驗。這意味著你可以通過手機感知數字世界，並在任何位置疊加數字對象。谷歌表示，為了幫助儘可能多的用戶，他們正在探索如何把增強現實帶入網頁平台，這樣未來所有人都能通過瀏覽器來使用這種新技術。在這篇文章中，谷歌將介紹他們最新構建的原型。從今天的移動瀏覽器和桌面瀏覽器再到未來支持AR的瀏覽器，映維網將與大家一起探索AR內容如何在網頁上運行。請注意：文章最後一部分主要是探討技術細節，所以如果你想進一步深入，請耐心讀完本文。

1. 原型的工作原理

Article是適用於所有瀏覽器的3D模型查看器。在桌面端，用戶可以通過拖動旋轉或滾動縮放來瀏覽3D模型（本例為太空服）。手機端的體驗相似：用戶觸摸並拖動旋轉模型，或者用兩根手指拖動放大。

桌面端模型瀏覽體驗

為了幫助表達模型的3D和互動式性質（而且不僅僅只是靜態圖像），模型會根據用戶的滾動而略微旋轉。

增強現實能夠賦予模型生命。AR的獨特功能是將數字內容與現實世界融合在一起。例如，我們可以瀏覽網頁，尋找一個模型，然後將其疊加在我們的房間里。我們可以按真實比例呈現，並且環繞模型自由走動。

當Article載入至兼容AR的設備和瀏覽器時，右下方將出現一個AR按鈕。點擊按鈕將激活設備攝像頭，同時系統將在用戶面前呈現標線。當用戶點擊屏幕時，模型將從標線出現，固定在地面上，並且以物理尺寸進行渲染。用戶可以環繞對象自由走動，感受圖像和視頻所無法表達出的體積和直接感。

通過AR兼容平板電腦來瀏覽Article的AR界面

要重新定位模型，用戶可以點擊並拖動模型，或者用兩個手指拖動旋轉。諸如陰影這樣的細微功能，甚至是照明都有助於模型與周圍環境相融。

移動和渲染模型

細微的潤色可以幫助用戶輕鬆學習如何使用AR。用戶測試顯示，清晰的界麵線索是幫助用戶了解AR工作原理的關鍵。例如，當用戶等待系統識別模型可以疊加的表面時，我們可以在地板上呈現一個圓圈，並且令其隨著設備的移動而傾斜。藉助能夠與物理環境相交的數字對象，這有助於介紹AR界面的概念（也稱為劇情界面，diagetic UI）。

劇情活動指示器暗示了體驗的AR性質

2. 技術細節

我們通過Three.js構建了我們的自適應模型查看器。Three.js令開發者使用WebGL的底層功能變得更加輕鬆，它擁有大量的示例，文檔和Stack Overflow答案來幫助簡化學習成本。

為了確保流暢的互動和動畫，我們採用了有助於性能表現的策略：

1. 使用低多邊形數模型；

2. 小心控制場景中的照明數量；

3. 在移動設備上降低陰影解析度；

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

為了加速迭代時間，我們創建了允許我們在桌面版Chrome上測試UX變化的桌面AR模擬器，這使得預覽更改幾乎可以即時發生。在模擬器之前，每次更改（不管是多麼細微的更改）都必須載入到連接的移動設備上，每個創建-推送-重新載入的周期都需要花費10秒以上。藉助模擬器，我們幾乎可以即時在桌面上預覽調整，然後只在需要時才推送至設備。

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

太空服模型來自於Poly（谷歌的3D模型庫）。大部分Poly模型都是通過Creative Commons Attribution Generic（CC-BY）進行授權。只要創作者進行了授權，用戶就可以複製和/或混合它們。我們的宇航員是由Poly團隊所創建。

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

3. 展望未來

網頁AR具備巨大的潛力，它可以用於購物，教育和娛樂等等。Article只是一系列原型中的一個，而從使用光線預測（light estimation）到更加無縫地將3D對象融合至真實世界，以及將模糊的UI注釋添加到模型的特定位置，我們還有很多需要探索的地方。網頁上的移動AR非常有趣，因為未知疆域非常巨大。如果你想了解更多關於我們的實驗性瀏覽器，並有興趣開始創建你自己的原型，請訪問谷歌的開發者官網（點擊前往）。

原文鏈接：https://yivian.com/news/40760.html

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