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

?

前面我們通過一篇文章相信介紹過WebAR：萬字干貨介紹WebAR的實(shí)現(xiàn)與應(yīng)用

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

以下內(nèi)容由公眾號：AIRX社區(qū)（國內(nèi)領(lǐng)先的AI、AR、VR技術(shù)學(xué)習(xí)與交流平臺） 整理

JS在應(yīng)用程序端扮演什么角色？

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

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

前面提到的所有SDK / API都比ARKit和ARCore早。現(xiàn)在，每個平臺都有本機(jī)實(shí)現(xiàn)，Viro Media創(chuàng)建了一個React插件，該插件可以實(shí)現(xiàn)本機(jī)和跨平臺AR開發(fā)。

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

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

Adobe是創(chuàng)作者領(lǐng)域的另一位強(qiáng)大參與者，他們的Project Aero處于私人Beta版，它可以使創(chuàng)作者使用USDZ格式。

我們不能談?wù)撍腥?#xff0c;更不用說Sketchfab了。最初是供3D藝術(shù)家上傳并很好地顯示作品的資源庫，如今已發(fā)展成為具有API的市場，并且啟用了ARKit的iOS應(yīng)用允許用戶在自己的世界中放置3D模型。隨著AR和VR越來越流行，Sketchfab是一家值得關(guān)注的公司。

什么是WebAR？

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

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

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

我問的第一個問題是響應(yīng)速度如何？AR在計算上很昂貴，那么它如何在瀏覽器中工作？WebAssembly是網(wǎng)絡(luò)標(biāo)準(zhǔn)，允許瀏覽器執(zhí)行匯編使用二進(jìn)制文件代碼。WebAssembly文件是通過將C / C ++編譯為.wasm使用JS代碼執(zhí)行的文件來創(chuàng)建的。

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

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

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

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

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

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

.USDZ是Apple的標(biāo)準(zhǔn)本機(jī)文件格式，用于在其移動瀏覽器，iMsg，電子郵件和Notes應(yīng)用程序中顯示3D。

在談?wù)揢SDZ和Apple之前，我們不得不提及Google在WebXR Device API和WebXR Hit Test API（Chrome Canary中）方面的進(jìn)步。Google希望將基于Web的AR放在首位。

我將假設(shè)Google使用與Poly項目類似的文件類型.obj以及.glTF文件格式。與蘋果公司不同，谷歌選擇采用流行的標(biāo)準(zhǔn)格式，這表明谷歌已經(jīng)在考慮降低3D生態(tài)系統(tǒng)中已經(jīng)采用的障礙。

無需應(yīng)用程序

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

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

WebAR競爭力

當(dāng)前，Web瀏覽器在AR攝像機(jī)方面沒有足夠的訪問權(quán)限。AR攝像頭與傳統(tǒng)攝像頭的不同之處在于，它在OS級別而不是其頂部處理增強(qiáng)。當(dāng)前基于Web的AR的實(shí)現(xiàn)要求在OS之上進(jìn)行計算，從而導(dǎo)致計算滯后，限制渲染，有時甚至導(dǎo)致可見滯后。

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

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

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

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

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

視覺搜索的行為仍然是新事物，并不是很直觀，大多數(shù)人不習(xí)慣將手機(jī)對準(zhǔn)東西，即使會出現(xiàn)炫酷的AR內(nèi)容。

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

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

WebAR如何發(fā)展

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。