web端開發增強現實應用
在前端開發中，工程師常常這樣調侃“一入前端深似海”。確實，前端的應用面十分廣，知識點比較零碎，學習範圍也比較大，當然，實現的功能也更加全面。所以對於當下十分火熱的AR，運用前端技術也可以輕鬆的實現。web 平臺在AR，SLAM或跟蹤的技術應用上將會越來越普及。
今天我們來講解如何運用JSARToolKit庫與WebRTC 的getUserMedia API，開發web 端的AR 應用。
ps：
1.部分整理翻譯於：https://www.html5rocks.com/zh/tutorials/webgl/jsartoolkit_webrtc/
2.大家也可以參考下之前的Web AR 開發指南：教程鏈接
預覽效果：
所需識別圖：
實現思路：
1.設置JSARToolKit
2.使用getUserMedia訪問網絡攝像頭
3.檢測標記
4.矩陣映射
關於JSARToolKit
JSARToolkit是一個從FLARToolkit（Flash）轉換的JavaScript庫，結合Html5 與 canvas 來實現網頁端的AR 效果。
項目地址：https://github.com/kig/JSARToolKit
對於JSARToolKit，比較重要的是navigator.getUserMedia（） 方法，它用於訪問攝像頭，傳遞一個可以使用html5 <video>標籤顯示的視頻流.但是JSARToolKit需要單個幀來檢測標記。所以首先在畫布上逐幀繪製視頻幀，並使得ToolKitcanvas.changed = true。JSARToolKit通過使用光柵化來查找每個幀並搜索標記然後計算標記位置。得到的矩陣位置然後繪製模型即可（JSARToolKit是對canvas元素進行操作，當你將畫布傳遞給JSARToolKit進行分析時，JSARToolKit將返回在圖像中找到的AR標記列表和相應的轉換矩陣。要在標記之上繪製一個3D對象，需要將位置信息傳遞給任何的一個3D引擎即可進行繪製操作）。
我們對JSARToolKit進行設置，第一步是創建canvas對象，攝像機參數對象和檢測對象。
varraster=newNyARRgbRaster_Canvas2D(canvas);
//設置攝像機參數
var param=newFLARParam(320,240);
//FLARMultiIdMarkerDetector是用於標記檢測的實際引擎
var detector=newFLARMultiIdMarkerDetector(param,120);
//在持續模式下，可以跟蹤多個幀的標記。
detector.setContinueMode(true);
param.copyCameraMatrix(display.camera.perspectiveMatrix,10,10000);
使用getUserMedia訪問網絡攝像頭
接下來，創建一個通過WebRTC API獲取網絡攝像頭視頻的視頻元素。對於預錄製的視頻，只需將視頻的源屬性設置為視頻URL。
|
檢測標記
一旦我們檢測器運行ok，我們就可以開始給它進行圖像檢測AR矩陣。首先將圖像繪製到畫布上，然後運行檢測器。檢測器將返回在圖像中找到的標記數。
//將準備好的視頻繪製到canvas上，縮放到320x240。
canvas.getContext('2d').drawImage(video,0,0,320,240);
//底層canvas已更改。
canvas.changed=true;
varmarkerCount=detector.detectMarkerLite(raster,threshold);
最後一步是迭代檢測到的標記並獲得它們的轉換矩陣。
矩陣映射
將JSARToolKit矩陣複製到glMatrix矩陣.（PS：要將庫與另一個庫（如Three.js）一起使用，還需要編寫一個將ARToolKit矩陣轉換為庫的矩陣格式的函數。還需要引入FLARParam.copyCameraMatrix方法。copyCameraMatrix方法將FLARParam透視矩陣寫入glMatrix樣式矩陣。）
如若使用X3DMO也可以這樣來操作，大同小異。首先創建X3DOM上下文將一個3DOM標籤添加到index.html中，創建一個場景，並添加一個帶有id的空的。然後在要顯示的模型中添加一個節點。
然後在JSARToolKit初始化中進行一些小的更改以便獲得權限。修改X3DOM viewfrustum中指定的剪切平面和當前的透視矩陣。X3DOM運行時API提供代理對象讀取和修改運行時參數。運行時連接到每個X3D元素，比如如下的矩陣示例：
然後 處理矩陣：
最後，我們就可以繪製模型了，將其放在矩陣中，並將其設置為MatrixTransform節點的屬性值。
然後你就會實現類似這樣的效果：
以上兩種方法大同小異，大家可以比較著使用，接下來給大家分享一些web AR 的開發資源：
1.JS-ARUCO（ARUCO是基於OpenCV的增強現實應用程序的輕便庫，現在已被移植到純JavaScript）：http://code.google.com/p/js-aruco/
2.HTML5-AR：https://github.com/dontcallmedom/html5-augmented-reality
該演示結合了地理位置，攝像機訪問，提供一個擴展現實的Web應用程序，覆蓋了實時視頻流上的幾個興趣點。
3.WebRTC Head Tracking：https://dev.opera.com/articles/head-tracking-with-webrtc/
使用WebRTC，Media Capture和Streams在JavaScript中創建頭部跟蹤。
4.HTML5 Face Detection：http://wesbos.com/html5-video-face-detection-canvas-javascript/
使用HTML5，Canvas和Javascript在你的臉上放置“Groucho Marx”風格的眼鏡，鼻子和鬍子。
AR醬原創，轉載務必註明
微信號AR醬（ARchan_TT）
AR醬官網：www.arjiang.com