增強現實（Augmented Reality，簡稱AR），是指透過攝影機視頻的位置及角度精算並加上圖像分析技術，讓顯示屏上的虛擬世界能夠與現實世界場景進行結合與交互的技術。

增強現實（AR）實現原理：調用攝像頭獲取視頻流、 圖像分析識別、 虛擬物體疊加在視頻畫面上。實現技術分爲光學透視式和視頻透視式。

目前移動設備通常採用視頻透視式來實現增強現實（AR）。在Https訪問下使用WebRTC(Web Real-Time Communications 一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術) 中的getUserMedia（默認前置攝像頭）和enumerateDevices（遍歷可用的多媒體輸入和輸出設備）來調用攝像頭獲取視頻流。

getUserMedia（前置攝像頭）示例如下：

getUserMedia（後置攝像頭）示例如下：

facingMode的兼容性不佳，只能在iOS 11下勉強使用，安卓系統需要另闢蹊徑。折中的方法是使用enumerateDevices遍歷可用設備，讓用戶主動切換至後置攝像頭。

enumerateDevices示例如下：

enumerateDevices遍歷完設備後，可以通過sourceId指定選中設備

獲取到視頻流之後的工作就是圖像的識別和追蹤了。視頻流可以看作一幀一幀的圖像，所以處理視頻流的過程可以理解爲圖像處理的過程。處理視頻流一般有兩種方式：前端處理和後端處理。

前端處理視頻流可以使用Tracking.js、JSFeat和AR.js等。以Tracking.js色彩識別爲例：

即使現在移動設備性能突飛猛進，目前還是存在前端算力不足和算力不統一。出於性能考慮則會採用前端傳輸視頻流給後端，後端使用SLAM等算法處理完畢返回結果到前端。傳輸前可以先處理圖片信息：canvas.toDataURL將圖片轉爲base64字符串、canvas.toBlob將圖片轉爲二進制、WebGLRenderingContext.readPixels獲取framebuffer的像素值。然後同通過AJAX或WebSocket傳輸給後端。

識別完圖像之後，就需要將虛擬物體疊加在視頻畫面上。這部分渲染與交互會用到WebGl。因爲WebGL的API需要開發者瞭解大量OpenGL相關知識，所以推薦新學者使用目前比較成熟的WebGL 渲染交互庫。A-Frame、Three.js、Babylon.js、Pixi.js等，其中的側重點各不相同，2D、3D、高精度渲染等，可以根據自身項目選擇使用方案。

若使用Three.js，渲染時Renderer、Camera、Scene等用法請移步至筆者虛擬現實（VR）初探。如果只想體驗一下，並不想了解太多上文提及技術。請直接使用AR.js，只用以下HTML代碼即可輕鬆實現一個增強現實（AR）應用。

不過本質上AR.js實現增強現實（AR）的方法和上文所述技術點基本相似。底層封裝了Three.js和JSARToolKit，同時使用了WebGL、WebRTC來實現增強現實（AR）。上面HTML中的自定義tag則使用了A-Frame。

隨着蘋果在iOS 11中加入的ARKit、iOS 12中的ARKit2，移動設備運算能力逐年提升，增強現實（AR）的可用性也越來越高，用途也越來越廣。除了ARKit和ARCore兩個移動SDK外。Web開發者也可以使用AR.js、WebARonARKit、WebARonARCore、Three.ar.js等更加高效和便捷的庫開發AR應用。

查看原文 >>