webAR 探究

1、AR是什麼

AR 能夠簡單的理解爲一種實時將虛擬圖像疊加在現實場景中的技術，且能交互，優點在於把目之所及的現實場景變成了背景，並將現實世界和數字世界無縫鏈接。

AR 實現的方式和關鍵技術

AR 的主要實現方式有 2 種：光學透視式 (Optical see-through) 和視頻透視式 (Video see-through)

• 光學透視式是將電腦生成的數字圖像顯示在眼前的一層半透明鏡片上，這樣就可使現實場景和虛擬信息同時出如今視網膜上。

• 視頻透視式技術是將現實場景首先經過相機錄入電腦，通過和虛擬對象整合、壓縮，再統一呈如今用戶眼前。

目前（2018 年末） Web 前端要想實現 AR，都是靠的視頻透視式技術。

計算機視覺技術在 AR 中起着相當重要的做用。由於實現 AR 最核心的是識別與追蹤。首先，相機要先識別基準標誌、關鍵點、光學圖片等；而後再根據特徵檢測、邊緣檢測或其餘圖像處理方法來實時追蹤；最後將虛擬圖像疊加到真實場景中。

結合傳感器來提供更多的交互或讓 AR 渲染得更準確、經過網絡鏈接雲端來加速計算或交換更多數據等。

2、webAR

由上得出結論：要實現 AR 須要識別、追蹤和渲染三步。

站在巨人的肩膀上

目前沒有標準也沒有成熟的庫供使用，只有一些規範。

• WebARonARKit, WebARonARCore ARKit 和 ARCore 分別是蘋果和谷歌兩大巨頭出品的移動 AR SDK，提供的功能也相似：運動追蹤、環境感知和光線感應但這兩個都是移動 AR 的 SDK，因而谷歌的 AR 團隊提供了 WebARonARKit 和 WebARonARCore 兩個庫，以便開發者能用 Web 技術來基於 ARKit 和 ARCore 開發，從而實現 WebAR。目前這兩個庫都還在試驗階段，想吃螃蟹的人趕忙去試試。其實現原理都是結合特定系統（iOS 和 Android）擴展了 WebVR API。Google AR 團隊封裝了一個 three.ar.js 的庫，提供了一些實用的 AR API，包括 ARView, ARReticle, ARPerspectiveCamera, ARDebug 和 ARUtils 等。

• AR.js

  AR.js 是 Jerome Etienne 開發的一款 Web AR 庫，能夠用十行 HTML 就實現 AR，並有 60 FPS 的幀率。它主要封裝瞭如下幾個庫：

  1. WebRTC。獲取視頻流。
  2. JSARToolKit。主要提供了識別和追蹤 marker 的功能
  3. Three.js, Babylon.js, A-Frame。這幾個都是基於 WebGL 的渲染庫，用於渲染要在 AR 環境中顯示的東西

  由此觀之，AR.js 像是一個把全部輪子都拼起來的瑞士軍刀

• React 360

• EasyAR

技術背景

WebRTC 獲取視頻流

1. AR 首先要識別，那就要用到 WebRTC 技術。

   WebRTC（Web 實時通訊，Web Real-Time Communication），顧名思義是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術。經過WebRTC,能夠經過網頁呼起用戶的攝像頭，而且實時獲取用戶攝像頭的圖像數據的。

   它其中有個很重要的 API：getUserMedia() 能夠實時獲取攝像頭的視頻流，這是視頻透視式的 AR 實現的前提（目前 iOS 11 剛剛支持這個 API，Android 是很早就能用）。

   getUserMedia 默認獲取的是前置攝像頭，若是想獲取後置攝像頭的視頻流，須要用 navigator.mediaDevices.enumerateDevices() 將設備的音頻、視頻設備遍歷獲得

   要用 https 打開網頁才能訪問攝像頭。

2. 有了視頻流咱們就能夠分析其中的特徵點，運用計算機視覺的算法識別和追蹤視頻流中的事物。

Tracking.js, JSFeat, ConvNetJS, deeplearn.js, keras.js 識別與追蹤

1. 獲取到視頻流以後的工做就是識別和追蹤了。

   視頻流你能夠看做是一幀一幀的圖像，因此處理視頻流的過程能夠理解爲圖像處理的過程。但這裏其實還涉及到一個如何傳輸視頻流的問題，通常有兩種方式：

   • 前端傳輸視頻流給後端，後端處理完畢返回結果到前端

   • 在前端直接處理視頻流：

     在前端直接進行圖像處理，能夠用 Tracking.js 和 JSFeat。這兩個庫相似，都是在前端作計算機視覺的，包括提取特徵點、人臉識別等。把 WebRTC 拿到的視頻流直接傳給它們並調用 API 就能獲得本身想要的效果。對於一些成熟的算法，如人臉識別，能夠直接拿到識別結果，若是本身要識別的物體比較複雜你也能夠本身進行特徵點的計算，但這可能在前端會算力不足。

     提到計算機視覺，不得不提深度學習，畢竟如今不少圖像處理算法被深度學習吊打。ConvNetJS，是斯坦福大學開源的一個前端深度學習框架，可讓你在前端完成深度神經網絡的訓練。deeplearn.js 則是 Google Brain 團隊搞的，功能和 ConvNetJS 相似。如今 ConvNetJS 好像不怎麼維護了，deeplearn.js 還在頻繁更新中，感興趣的同窗能夠試用一下。另一個緊鑼密鼓開發的深度學習庫 keras.js則是讓你能夠在瀏覽器中運行已經訓練好的 Keras 模型（Kears 是著名的深度學習開發框架），並支持 WebGL 2。

2. 除了單純的對圖像、視頻流處理，咱們還能經過移動端設備的各類傳感器數據獲取到更多的距離、深度、光照等信息，從而使識別追蹤更準確。

A-Frame, Three.js, Babylon.js, Pixi.js, WebGL 渲染與交互

1. 識別和追蹤以後，接下來是渲染。

   • A-Frame Mozilla 團隊在 2015 年開源的一款作 WebVR 的框架
   • aframe-xr A-Frame 團隊發佈的 其中包括了一些 Web AR 組件，用 A-Frame 的各類組件可讓你用不多的代碼構建出 AR 所須要的 3D 立體世界。
   • WebGL OpenGL ES 在瀏覽器端的實現，用 WebGL 你能夠操做前端的每個像素點，能調用 GPU，雖然強大，但寫起來異常複雜，學習成本也很高
   • Three.js 將繁瑣的 WebGL API 進行了封裝和優化，讓你能夠用可讀性更好的代碼在前端書寫 WebGL
   • Babylon.js 和 Three.js 的關注點不同，若是你對渲染的精細程度很是有要求，好比光線、陰影等，那麼你能夠考慮下

2. 渲染出3D場景後，如何交互？

   這些基於 WebGL 的渲染方法，有一個共性的難題是如何交互，好比 hover, click 效果如何實現。這些實現起來要依賴於 光線投射算法 Ray casting 方法。Three.js 直接提供了 Raycaster 類供實現 ray casting 算法。攝像頭（這裏的攝像頭不是指手機的攝像頭，而是你渲染時的 Camera，能夠參考 Three.js 中的 Camera）視做視點，與你在屏幕上觸碰的點座標連城一條射線，看這條射線與你視圖中哪些物體相交。

事實上在實現 AR 的時候，識別追蹤和渲染交互是同時進行的，如何給用戶更好、更流暢的體驗是如今 Web AR 的又一大難題。

性能

目前瀏覽器的算力確實還不足以與客戶端去媲美，識別和追蹤本質上是像素級的計算，對算力的要求都很高，所以 maker-based 的 AR 定位效率一般比 makerless 的要高不少。此外，計算機視覺算法的效率對性能影響也很大。

3、 demo實現

1.終端適配性參考

目前，在web端，不管採用哪一種實現手段，最主要是運行環境對webRTC、webGL 兩個特性的支持程度。

測試發現IOS 12如下不支持、IOS版微信QQ不支持、Safari支持；安卓支持良好。

2.技術方案

採用： AR.js Efficient Augmented Reality for the Web

​ AFrame.js A web framework for building virtual reality experiences

​ AFrame-ar.js Augmented reality for a-frame.

​ AFrame-extras.min.js Add-ons and helpers for A-Frame VR.

注意：這種技術方案的特性是基於標記圖Maker，也就是說須要一張特定的訓練出的標記圖才能渲染出AR效果，

因爲識別圖須要訓練，且有特定要求，因此識別圖的外觀和識別率有關係，識別率低則會致使模型抖動劇烈。

demo1：運行AR.js官網例子

可使用設備打開 官網demo 而後對準 識別圖便可體驗，或本地運行項目來訪問。

1. 下載項目

   openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
   複製代碼

2. 安裝http-server服務（須要nodejs）

   npm install -g http-server
   複製代碼

3. 使用git bash 工具或其餘（除Windows CMD）進入到須要預覽的頁面，生成SSL證書並經過HTTPS訪問

   首先進入項目

   cd AR.js
   複製代碼

   生成SSL證書

   openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem
   複製代碼

   啓動HTTPS服務，經過127.0.0.1 或IP訪問

   http-server -S -C cert.pem -o
   複製代碼

   例如 https://192.168.3.52:8080/three.js/examples/dev.html 能夠看到這裏打開了一個dev頁面，PC端缺失攝像頭而報錯。若是你是微信打開，則報錯webRTC不支持，可用Safari訪問。

   

   使用你的手機打開該頁面，掃描特定的識別圖，便可感覺webAR的強大。這裏也體現了該框架的特性：基於maker圖片

   

這裏打開的是使用three.js寫法的demo，渲染出了一個立方體並帶有動效。



  **而在AR.js中分爲兩種寫法：使用three.js結合一堆js庫來實現、使用AFrame.js**

  在該項目中的example對比發現，使用 three.js 來構建3D場景後，還須要結合 artoolkit.js、threex.js等，<u>學習成本很是高。</u>

  使用 AFrame.js 寫法時，代碼量減小不少，但也須要了解 AFrame.js 、AFrame-ar.js 、AFrame-extras.min.js
複製代碼

demo2：使用AFrame.js、AFrame-ar.js 、AFrame-extras.min.js

AFrame.js是火狐的項目，它包含了three.js

AFrame-ar.js能夠在web頁面上渲染3d

在參考AR.js官網給出的「10行代碼實現AR效果」的例子時發現，該demo引用的aframe的版本較舊，而引用官網最新的版本時，所呈現的demo效果會有所不一樣。具體緣由未知。

如下demo與該例子所用的標籤有些許不一樣，但也能實現demo，具體起因及細節須要研究 AFrame.js 。

大體思路是：

• 引用框架

• 在代碼中使用框架的語法構建:

  • 3D場景、
  • 設置maker圖、
  • 設置模型（案例使用的是GITF2.0模型，同事提供的是fbx模型則須要進行轉換。在線轉換工具 在線模型預覽工具）
  • 設置場景攝像機.....

• 使用maker generator 訓練出一個特定的maker，下載並在代碼中指定該maker文件，maker文件與識別圖相關聯。

• 運行demo，使用設備的攝像頭對準maker關聯的圖像，便可看到AR效果

1. 像往常同樣構建一個web頁面，引入所須要的框架。

   <!-- include A-Frame obviously -->
   <script src="/aframe.min.js"></script>
   <!-- include ar.js for A-Frame -->
   <script src="/aframe-ar.js"></script>
   <!-- include A-Frame-Extras -->
   <script src="/static/js/aframe-extras.min.js"></script>
   複製代碼

2. 使用AFrame的標籤，相似HTML的寫法來實現AR效果

   <body style='margin : 0px; overflow: hidden;'>
       <!-- 構建一個3d場景 -->
       <a-scene embedded arjs>
           
       <!-- 設置一個識別圖，這個很重要，AR效果能不能顯示出來全憑這張識別圖是否被識別 -->
       <a-marker preset='custom' type='pattern' url='/static/marker/test/20/pattern-marker(2).patt'>
           
           <!-- load gltf model 加載一個GLTF格式的模型，該模型就是咱們想渲染到屏幕上的效果-->
           <a-entity gltf-model="/static/gltf/CNtower.glb" scale='0.01 0.01 0.01' rotation="-90 0 0"></a-entity>    
   
           <!-- a-entity標籤也能渲染一個模型，animation-mixer屬性還可也添加動效，理解具體細節須要參考AFrame.js文檔 -->    
           <!-- <a-entity gltf-model="/static/gltf/scene.gltf" animation-mixer scale="1 1 1" rotation="-120 0 0" position="0 0.5 0"></a-entity> -->    
   
           <!-- 或者像這樣 渲染一個立方體 -->    
           <!-- <a-box position='0 0.5 0' material='color: black;'></a-box> -->
          
       </a-marker>
   
       <!-- add camera 添加一個攝像機，寫法也不一樣，具體須要看文檔-->
       <!-- <a-entity camera id="my"></a-entity> -->
       <a-camera ar-raycaster raycaster cursor="fuse:false"></a-camera>
       </a-scene>
   </body>
   複製代碼

四：總結

一、因爲項目運行在web中，所以web環境的兼容性很大程度取決於用戶運行環境的瀏覽器內核。目前webAR所依賴的技術始終逃不了 webRTC 、webGL 、若是運行環境（瀏覽器）連這兩我的特性都沒法支持，則沒法進行下一步。

經測試IOS版本微信和QQ內置的瀏覽器均沒法支持這兩個特性，折中的辦法是提示用戶使用Safari進行體驗。安卓端尚可。

二、AR最核心的是識別與追蹤，web領域的js版artoolkit不像Apple的ARCore 和Google的ARKit那樣強大，並且業界還沒造成一個成熟的解決方案，只有一些規範，草案等。

基於maker識別圖來進行識別和追蹤是一個比較高效的作法，受限於識別算法和攝像機追蹤的能力有限，因此上述demo對識別圖有着很是高的要求，通過測試28張識別圖，若是不按規則來設定識別圖則會致使識別失敗。設備攝像頭須要離識別圖很是近不然模型抖動會很是明顯，嚴重影響體驗。

若是拋開依賴識別圖這種方法，目前尚未解決方案。

因此從體驗上看，目前最大的問題是識別圖的識別率低且有特定要求，模型抖動劇烈影響體驗，與模型交互困難。頁面一直處於視頻流狀態會致使設備發熱，耗電量大幅上升。

三、在3D場景渲染，模型渲染這一層面，首先須要對底層的webGL有必定熟悉程度，最重要的是three.js這個框架，或是通過封裝的AFrame，它們用來構建3d場景和3d模型須要對這個框架有很深刻的瞭解，如何與模型進行交互等等，這些將致使一些學習成本。

通過測試，超過1MB的GITF2.0模型 使用AFrame加載不出，具體緣由還須要進一步分析，

四、國內外對webAR 的討論和demo 案例目前都比較少，可以搜到的資料幾乎都是英文版。成熟的產品更少，陰陽師的AR抽取SSR卡牌的也是基於maker圖來實現，且抖動明顯，追蹤能力也比較差。王者榮耀剛剛更新在英雄界面可以顯示AR效果目前也只在特定的OPPO聯合開發機型中實現，何況這兩款產品是更強大的APP端。

本文部份內容節選自如下參考文章

參考： Web 前端中的加強現實（AR）開發技術

​ webAR涉及的技術

​ JSARToolKit

​ Web-Powered Augmented Reality: a Hands-On Tutorial

​ Augmented Reality in 10 Lines of HTML - AR.js with a-frame magic

​ Developing Augmented Reality For The Web Using AR.Js

​ Build and access your first AR webapp in less than 10mn using ARjs

​ Using 3D models with AR.js and A-Frame

​ web AR探索和總結

​ Web 3D哪家強？

​ Web前端也能作的AR互動

​ 實現一個簡單但有趣的AR效果（Web）

​ 前端WebAR實現簡單版pokemon Go

​ 黑暗大法師demo

​