WEBAR 開發工具大集合

目前的AR開發主要是在unity，android，ios上完成的，但在WEB平台上也已經出現了一些有趣的AR案例。比如之前迪士尼的電影宣傳網頁AR遊戲。（醬發現 | APP滾出，迪士尼上線AR網頁遊戲）今天給大家分享一些關於Web+AR的技術原理與開發心得。

實現原理

AR實時地計算攝影機影像的位置及角度並加上相應模型，所以不管是用opencv或Python的CV庫，ARToolkit還是我們今天所說的用javaScripts來原生的實現AR效果，開發的步驟都大同小異：

• 獲取攝像頭

• 分析攝像源，識別Maker

• 模型虛擬疊加

• 顯示

第一部分：關於攝像頭

我們通過WebRTC API來進行攝像頭的操作，WebRTC（即Web Real-Time Communication）是一個支持網頁瀏覽器進行實時語音對話或視頻對話的技術，通過其 navigator.getUserMedia這一方法我們可以獲得攝像頭。

該方法提示用戶允許使用一個視頻輸入設備（如相機）。如果允許，則MediaStream其視頻來自這些設備的信息被傳遞到指定的成功回調。

語法：

navigator.getUserMedia（constraints，successCallback，errorCallback）;

參數說明：

constraints:指定媒體對象的類型，比如是獲取攝像頭還是麥克風，是前置攝像頭還是後置

successCallback:調用成功后的回調方法

function(stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function(e) {

// Do something with the video here.

};

}

errorCallback:調用失敗。

實例代碼：

navigator.getUserMedia = navigator.getUserMedia ||

navigator.webkitGetUserMedia ||

navigator.mozGetUserMedia;

if (navigator.getUserMedia) {

navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },

function(stream) {

var video = document.querySelector('video');

video.srcObject = stream;

video.onloadedmetadata = function(e) {

video.play;

};

},

function(err) {

console.log("The following error occurred: " + err.name);

}

);

} else {

console.log("getUserMedia not supported");

}

ps：在開發測試時，chrome因為 HTTPS 頁面啟用攝像頭，所以建議用FireFox。

相關資源推薦：

JS 調取攝像頭：http://blog.csdn.net/qq_16559905/article/details/51743588

第二部分：識別方面

在識別方面，推薦大家幾個JS庫：

• js-aruco

• jsartoolkit

• skarf.js

• awe.js

• AR.js

接下來，為大家總體性的逐一講解每個庫

js-aruco

js-aruco 是基於 ArUco（opencv 的一個增強現實的輕量庫）的JavaScript埠。

JSARToolKit and Three.js視頻：http://v.qq.com/page/l/i/k/l0393nrcjik.html

Maker要求：

具有外部未使用黑色邊框的7x7網格。內部5x5單元格包含ID信息。

white - black - black - black - black

white - black - white - white - white

black - white - black - black - white

black - white - white - white - black

如：

使用js-aruco首先我們需要創建一個AR.Detector對象

var detector = new AR.Detector;

接著接入detect功能：

var markers = detector.detect(imageData);

關於imageData：其參數必須是有效的Canvas對象

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

var imageData = context.getImageData(0, 0, width, height);

js-aruco還可以實現3D姿態估計，具體的可以看看Github上的源碼：https://github.com/jcmellado/js-aruco

提到js-aruco，我們不得不提到aruco。

3D Augmented Reality with JavaScript視頻：https://v.qq.com/x/page/l0393tof7pe.html

aruco厲害就在於它的相機校準與標識檢測。由於我們這篇主要是關於Web+AR，所以我們簡單點一下aruco，以後有機會詳細為大家解析。今天先給大分享一些關於aruco的文檔或資源：

aruco-marker是一個可以為Aruco增強現實標記庫生成標記圖像的JavaScript庫。aruco-marker生成SVG圖像，使其易於縮放到任何尺寸或列印出來。它可以直接在瀏覽器中使用也可以通過AMD（Require）或NodeJS使用。

例如：

詳細請看：https://github.com/bhollis/aruco-marker

jsartoolkit

學習資源：

下載地址：https://github.com/artoolkit/jsartoolkit5

文檔：https://artoolkit.org/blog/2016/07/jsartoolkit-and-threejs

使用jsartoolkit編寫AR應用：https://www.html5rocks.com/zh/tutorials/webgl/jsartoolkit_webrtc/

JSARToolKit 是 JavaScript 增強現實庫。它是一個根據 GPL 發布的開放源代碼庫，從FLARToolKit移植過來，JSARToolKit完美適合任何Web框架。

原理：

• JSARToolKit 要運行在畫布元素上。在您要用作紋理的圖片或視頻元素上，將 crossOrigin 屬性設置為 '' 或 『anonymous』。

• 將畫布傳遞給 JSARToolKit 進行分析后，JSARToolKit 會返回在圖片和相應轉換矩陣中發現的 AR 標記的列表。要在標記上繪製 3D 對象，請將轉換矩陣傳遞給您使用的任何 3D 呈現庫，以便通過矩陣轉換對象。然後在 WebGL 場景中繪製視頻幀，並在視頻幀上繪製對象。

• 要使用 JSARToolKit 分析視頻，請在畫布上繪製視頻，然後將畫布傳遞給 JSARToolKit。在每一幀上都執行此操作后，視頻增強現實跟蹤就設置好了。

示例：

基本操作如下：

• 載入ARCameraParam對象

• 創建一個ARController對象

• 設置檢測模式

• 如果需要，載入模式標記或多標記

• 添加getMarker事件偵聽器

• 呼叫 ARController.process(img)

var param = new ARCameraParam;

param.onload = function {

var img = document.getElementById('my-image');

var ar = new ARController(img.width, img.height, param);

// Set pattern detection mode to detect both pattern markers and barcode markers.

// This is more error-prone than detecting only pattern markers (default) or only barcode markers.

//

// For barcode markers, use artoolkit.AR_MATRIX_CODE_DETECTION

// For pattern markers, use artoolkit.AR_TEMPLATE_MATCHING_COLOR

//

ar.setPatternDetectionMode(artoolkit.AR_TEMPLATE_MATCHING_COLOR_AND_MATRIX);

ar.addEventListener('markerNum', function (ev) {

console.log('got markers', markerNum);

});

ar.addEventListener('getMarker', function (ev) {

console.log('found marker?', ev);

});

ar.loadMarker('Data/patt.hiro', function (marker) {

console.log('loaded marker', marker);

ar.process(img);

});

};

param.src = 'Data/camera_para.dat';

具體請看文檔：https://github.com/artoolkit/jsartoolkit5

skarf.js

學習資源：

官網：http://cg.skeelogy.com/skarfjs/

下載地址：https://github.com/skeelogy/skarf.js

skarf是在Three.js中處理JavaScript增強現實庫的框架。它集成了JSARToolKit與js-aruco.並具有一下特點：

• 檢測到相關聯的標記時自動載入模型（在JSON文件中指定關聯）。目前支持的模式格式：.obj，.js和binary .js。

• 將世界原點固定到指定的主要標記，相機和其他標記位於該原點周圍

• 自動補償不同AR庫和Three.js之間的坐標系差異

• GUI標記，允許用戶使用AR標記來控制設置

• 可擴展性。以適合其他JavaScript AR庫

awe.js

學習資源：

下載地址：https://github.com/buildar/awe.js/

API文檔：https://github.com/awe-media/awe.js/wiki/awe.js-api-overview

教程：https://www.sitepoint.com/augmented-reality-in-the-browser-with-awe-js/

Awe.js是一個JavaScript庫，它使用Three.js，有很強的功能擴展性。

• geo_ar - 允許您將對象放在設定的標記點上。

• grift_ar - 兼容Oculus Rift。

• leap_ar - 與Leap Motion控制器集成。

• marker_ar - 允許你創建AR markless的體驗。

AR場景的初始化

window.awe.init({

device_type: awe.AUTO_DETECT_DEVICE_TYPE,

settings: {

container_id: 'container',

fps: 30,

default_camera_position: { x:0, y:0, z:0 },

default_lights: [{

id: 'point_light',

type: 'point',

color: 0xFFFFFF

}]

},

添加標記點：

awe.projections.add({

id: 'wormhole',

geometry: {shape: 'plane', height: 400, width: 400},

position: {x: 0, y: 0, z: 0},

rotation: {x: 90, z: 45},

material: {

type: 'phong',

color: 0x000000

}

}, {poi_id: 'marker'});

添加顯示的模型（7個不同的立方體）：

awe.projections.add({

id: 'ar_button_one',

geometry: {shape: 'cube', x: 60, y: 30, z: 5},

rotation: {y: 45},

position: {x: -5, y: -31, z: -5},

material: {

type: 'phong',

color: 0xFF0000

}

}, {poi_id: 'marker』});

AR.js

學習資源：

下載地址：https://github.com/jeromeetienne/AR.js

AR.js是一個應用於web的高效的AR庫。

具有以下特點：

• 速度快。

• 基於Web的：無需安裝。基於three.js + jsartoolkit5

• 開源：它是完全開源的，免費的！

• 標準：它適用於任何手機上WebGL於WebRTC。

示例：

第三部分：關於顯示

我們識別marker之後，就要顯示模型了，當然若要顯示2d的圖形就很好實現了，但效果不夠驚艷。為了實現炫酷的3D效果，我們需要了解Web 3D的知識，關於web開發3D模型，我們可以了解一下幾個庫：

• WebGL

• Three.js

• A-Frame

WebGL

WebGL（全寫Web Graphics Library）是一種3D繪圖標準，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，並展示3D模型或場景了。

學習資源：

API：https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

視頻教程：http://www.hewebgl.com/#

博客教程：http://blog.csdn.net/tiewen/article/details/6895582

Three.js

Three.js（https://github.com/mrdoob/three.js）是一個JavaScript 3D庫，封裝了底層的WebGL圖形介面，提供簡化、高效的三維圖形程序開發。一般我們在web的AR與VR開發上會用到它。

學習資源：

官網：https://threejs.org/

博客教程：http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html

教程：http://blog.csdn.net/lijunfan1994/article/details/52370629

A-Frame

官網：https://aframe.io/

下載地址：https://github.com/aframevr/aframe

最後推薦給大家Web AR的系列教程：

• web AR系統-1 架構探索----https://zhuanlan.zhihu.com/p/24717199

• web AR系統-2 效率評估----https://zhuanlan.zhihu.com/p/24796493

• web AR系統-3 效率評估-websocket----https://zhuanlan.zhihu.com/p/24853634

• web AR系統-4 前端特徵點提取----https://zhuanlan.zhihu.com/p/25068401

• web AR 前端qrcode識別 - 1----https://zhuanlan.zhihu.com/p/25128932

• web AR 前端qrcode識別 - 2 圖片處理----https://zhuanlan.zhihu.com/p/25158289

• web AR 前端qrcode識別 - 3 關於流程的一些總結----https://zhuanlan.zhihu.com/p/25255704

• web AR 前端二維碼跟蹤 - 1 JS圖像變換以及加速方案----https://zhuanlan.zhihu.com/p/25291351

• web AR 前端二維碼跟蹤 - 2 homography pose的計算----https://zhuanlan.zhihu.com/p/25816168

AR醬原創，轉載務必註明

微信號AR醬（ARchan_TT）

AR醬官網：www.arjiang.com