鑒于Web技術的最新進展，在開發基于AR的解決方案時，它提供了一組新的選擇。網絡瀏覽器的最新更新為AR的應用打開了大門。使用Web或本地應用程序構建AR體驗更好嗎？在本文中，我將簡要概述JS在本機應用程序世界中的使用，然后將深入探討什么是WebAR，它如何工作，如何與本機應用程序競爭以及哪種是更好的解決方案。

?

前面我們通過一篇文章相信介紹過WebAR：萬字干貨介紹WebAR的實現與應用

這篇文章主要詳細介紹WebAR與native AR的區別，本文譯自Hermes（Agora.io的開發人員，也是Blippar的前工程師）。

以下內容由公眾號：AIRX社區（國內領先的AI、AR、VR技術學習與交流平臺） 整理

JS在應用程序端扮演什么角色？

Javascript無處不在，包括嵌入在本機應用程序中。使用JS代碼執行C ++代碼的能力使Blippar，Zappar，Facebook，Snapchat和其他此類平臺能夠使開發人員更好地控制其AR體驗。JS具有許多吸引人的特性，但最引人注目的是Java語言由iOS和Android原生。

為了提供有關JS和C ++如何協同工作的上下文和詳細信息，我將使用Blippar的移動SDK作為示例。Blippar SDK的核心是一個基于C ++的OpenGL渲染引擎，該引擎使該應用在各個平臺之間的比價更高。Blippar的Javascript API允許第三方開發者使用JS控制底層引擎，但獲得了C ++的所有響應能力并為用戶提供了本機效果。

前面提到的所有SDK / API都比ARKit和ARCore早。現在，每個平臺都有本機實現，Viro Media創建了一個React插件，該插件可以實現本機和跨平臺AR開發。

當我們討論使用Java的AR平臺時，我們不能忽略Amazon。亞馬遜推出了Sumerian平臺，旨在彌補創作者/出版者立場之間的差距。亞馬遜在AWS之上構建了自己的XR渲染引擎和Studio。允許用戶在AWS基礎設施的所有支持下擴展他們的游戲/應用/體驗。

顯然，這是亞馬遜吸引新開發人員并保留現有客戶以在其平臺上進行構建的一種方式。這里有幾件事要注意，對于后端和架構師，這表明亞馬遜看到了明確的平臺。對于前端人員而言，Somerian工作室全部基于網絡，腳本編寫全部使用基于Javascript的API完成。

Adobe是創作者領域的另一位強大參與者，他們的Project Aero處于私人Beta版，它可以使創作者使用USDZ格式。

我們不能談論所有人，更不用說Sketchfab了。最初是供3D藝術家上傳并很好地顯示作品的資源庫，如今已發展成為具有API的市場，并且啟用了ARKit的iOS應用允許用戶在自己的世界中放置3D模型。隨著AR和VR越來越流行，Sketchfab是一家值得關注的公司。

什么是WebAR？

WebAR不僅僅是AR的子集，它還是一個籠統的術語，涵蓋了許多不同的實現。WebAR解決方案的范圍很廣，既可以使用設備的陀螺儀/加速度計傳感器作為背景，也可以使用相機輸入，也可以使用更復雜的解決方案，例如AR.js，TensorFlowJS和USDZ。

根本上，AR正在使用移動設備的傳感器來跟蹤其在增強場景中的位置。在過去的幾年中，移動瀏覽器已經增加了對JS Sensor API的支持，例如照相機，陀螺儀，加速度計，方向，磁力計（閱讀：指南針）。利用這些傳感器，開發人員可以創造一系列的體驗。

Blippar是最早通過橫幅廣告啟動瀏覽器內AR體驗的公司之一；在AR的背景下，該布局是一個相對新穎的概念，但在推出時引起了極大的轟動。該廣告是汽車內部裝飾的360?體驗3，其中按鈕重疊，以切換顯示汽車的詳細信息。

我問的第一個問題是響應速度如何？AR在計算上很昂貴，那么它如何在瀏覽器中工作？WebAssembly是網絡標準，允許瀏覽器執行匯編使用二進制文件代碼。WebAssembly文件是通過將C / C ++編譯為.wasm使用JS代碼執行的文件來創建的。

讓我們考慮一下這里的含義。使用WebAssembly，可以使用原始Javascript在Web瀏覽器中以接近本機的性能運行計算密集型操作。WebAssembly使TensorFlowJS和ML5JS等項目成為可能。

WebAssembly很酷，但是僅占WebAR的一半。WebAssembly在AR的計算機視覺方面完成了所有繁重的工作，而我們擁有用于渲染的webGL。WebAssembly和WebGL是基礎，但是我們如何使用這些API創建基于Web的AR體驗？輸入由Jerome Etienne編寫的框架AR.js，該框架使用A-Frame（在Three.js之上構建）和JSARToolkit5 （ARToolKit的腳本端口），還有其他一些WebAR框架，但是大多數都需要特殊的Web瀏覽器應用程序或利用專有的API。AR.js是開源的，不需要任何特殊的應用程序，它可在默認瀏覽器中運行。

為了討論AR.js及其對WebAR的含義，值得快速瀏覽一下為框架提供支持的組件。A-Frame是在Three.js之上的基于JS的API框架，使其更像具有實體組件關系的游戲編碼。這簡化了Three.js的語法，使開發人員可以專注于體驗/游戲。然后，AR.js使用JSARToolkit跟蹤3D場景到標記，并利用Computer Vision檢測特征點。這是大多數早期基于應用程序的AR體驗的動力。AR.js為移動網絡提供了前進的腳，并可以與基于應用程序的AR競爭。

看一下蘋果和谷歌的努力，我們看到他們已經采取了一些措施，以實現3D模型與其各自的移動瀏覽器之間更深層次的集成。讓我們從Apple的.usdz文件格式開始。

什么是USDZ，它如何運作？用最簡單的話說，Apple已將ARkit功能內置到iOS的Safari中。帶有幾行html和一個文件.usdz，任何網站都可以包含AR元素。

<a rel="ar" href="model.usdz"> <img src =“ model-preview.jpg”> </a>

.USDZ是Apple的標準本機文件格式，用于在其移動瀏覽器，iMsg，電子郵件和Notes應用程序中顯示3D。

在談論USDZ和Apple之前，我們不得不提及Google在WebXR Device API和WebXR Hit Test API（Chrome Canary中）方面的進步。Google希望將基于Web的AR放在首位。

我將假設Google使用與Poly項目類似的文件類型.obj以及.glTF文件格式。與蘋果公司不同，谷歌選擇采用流行的標準格式，這表明谷歌已經在考慮降低3D生態系統中已經采用的障礙。

無需應用程序

無應用程序AR是指使用本機Web瀏覽器來提供AR體驗，使其可以在所有平臺，設備和移動OS上運行。當Blippar啟動AR數字展示位置（在網絡瀏覽器中啟動AR的橫幅廣告）時，我們看到了大量潛在客戶。代理商，零售，娛樂，制藥等機構都有巨大的需求，所有這些機構都希望與用戶互動，而無需下載應用程序。大多數代理商和品牌都愿意將AR體驗添加到現有應用程序中，但他們也意識到這種參與與刪除應用程序下載時的體驗不同。網絡無摩擦，每個人都有一個帶有QR掃描儀的相機應用程序，可以鏈接到網站。回到我前面提到的AR廣告展示位置；當時最大的爭斗集中在瀏覽器兼容性上。迄今為止，基于Web的AR體驗仍然是一個問題。

并非每個移動瀏覽器都支持Sensors API，或者設備缺少某些傳感器，這是我們在Android設備上尤其看到的一個巨大問題。通過商店發布應用程序時，可以控制可以在哪個設備上安裝該應用程序，但是在網絡上則沒有該控件。是的，它可以在網頁中添加檢查，但是隨后你會看到一個屏幕，上面寫著“抱歉，不支持您的設備”，這就很讓人崩潰！

WebAR競爭力

當前，Web瀏覽器在AR攝像機方面沒有足夠的訪問權限。AR攝像頭與傳統攝像頭的不同之處在于，它在OS級別而不是其頂部處理增強。當前基于Web的AR的實現要求在OS之上進行計算，從而導致計算滯后，限制渲染，有時甚至導致可見滯后。

要使AR通過Web更加可訪問性，邁出的一大步就是Web Standards采用API直接訪問ARCamera對象。

如果該抽象可以作為標準的Web API存在，則任何瀏覽器應用程序都可以利用ARkit / ARCore或存在的任何底層平臺。Web API一旦存在，就會出現許多不同的框架。有一些實驗性瀏覽器利用ARKit / ARCore，但它們需要特定的JS框架。

USDZ是一個良好的開端，但缺少重要的組成部分，而這一層增加了對交互的支持。谷歌的努力仍然僅在Canary版本的Chrome中可用，因此在其正式版中加入之前，它將落后于蘋果公司。

當我開始寫這篇文章時，我的想法是會有一個明確的利弊清單，但是在坐下來并仔細研究了我認為的利弊之后，無論Web和Native哪里都不足，都有SDK和API可以補充。

視覺搜索只能通過基于應用程序的解決方案來實現。例如，Blippar的識別引擎不依賴QR碼，它使用ai識別其系統中的已知實體，并在存在匹配項時提供體驗。對于希望利用其現有印刷材料而不必更改其設計的公司而言，這非常有用。

視覺搜索的行為仍然是新事物，并不是很直觀，大多數人不習慣將手機對準東西，即使會出現炫酷的AR內容。

代替可視搜索，WebAR依靠QR碼。從設計角度來看，QR碼不是很性感，但是自從iOS和Android都在其本機相機應用程序中都添加了對QR碼識別的支持后，掃描QR碼的行為已得到越來越廣泛的使用。

可以提出另一個論點，即互聯網和增強現實技術在全球范圍內都可以使用，我們需要牢記，在某些新興市場中，互聯網的速度和可靠性并不那么快。這就需要支持離線使用，這只能通過應用程序獲得。另一方面，讓某人下載應用程序比訪問網站困難得多。因此，最終結論是……這確實取決于項目。

WebAR如何發展

許多人都對AR的未來做出了預測，無論它的耳機，投影儀還是植入芯片的極端特性，等等。為了加入這個世界大膽而勇敢的算命先生的行列，我將分享我的想法。當前，大多數AR內容（體驗中的媒體）都托管在設備上或從云加載。Blippar，Facebook，Snapchat，Zappar都使用基于云的CMS，該CMS基于某種觸發（鏈接，標記，面部，qr代碼等）下載AR體驗。為了提供有關云交付的AR如何工作的背景信息，移動應用程序具有某種觸發或進入點（鏈接，標記，面部，二維碼等），可以啟動體驗。此觸發器提示應用程序向后端系統發出請求，以發送體驗的資產和代碼。大多數平臺在啟動之前都會下載整個體驗，這解釋了為什么Facebook和Snapchat的上限為4 mb，以保持快速運行。在Blippar，我們提供了各種體驗，因此有時我們不得不發揮創造力。項目的內容從頁面上的視頻到3D世界，賽車上山路甚至在Apps上完全可用。因此我們的廣告系列范圍從> 1 mb到85 mb或更大。為什么這很麻煩？就像我之前提到的，我們過去常常通過對場景進行編碼以在后臺下載資產的方式來發揮創意，那么有什么大不了的呢？事實證明，為什么大小很重要，保持正確的平衡對您的AR體驗的成功至關重要，但背后還有一些頗具影響力的數字。在Blippar，我們發現，花費30秒以上才能進行加載（下載和初始化）的所有體驗都會減少約50％的體驗，而那些最初嘗試進行互動的用戶還會流失約75％的用戶。這意味著，較長的下載時間可能會導致多達90％的受眾群體流失，大約有10％的用戶會重新參與。因此，現在除了必須以某種方式讓某人下載應用程序之外，還可以使用戶保持您的應用程序需要快速加載。如果您獲得適當的平衡，則體驗可以看到每位用戶最多3倍的參與度，而停留時間是2倍。WebAR使用Web優化進行下載和傳送，但是大小仍然很重要。如果不流式傳輸內容，則體驗越大，在移動瀏覽器中加載所需的時間就越長。

公眾號[三次方AIRX]：三次方?數字化人才在線教育平臺。幫助Z時代大學生和0-5年職場人獲得混合現實、人工智能、游戲開發、大數據等能力。

總結

以上是生活随笔為你收集整理的增强现实技术（AR）在Web端的技术原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。