Zi 字媒體

目前的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-arucojsartoolkitskarf.jsawe.jsAR.js接下來，為大家總體性的逐一講解每個庫js-arucojs-aruco 是基於 ArUco（opencv 的一個增強現實的輕量庫）的JavaScript埠。JSARToolKit and Three.js視頻：http://v.qq.com/page/l/i/k/l0393nrcjik.htmlMaker要求：具有外部未使用黑色邊框的7x7網格。內部5x5單元格包含ID信息。white - black - black - black - blackwhite - black - white - white - whiteblack - white - black - black - whiteblack - 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.htmlaruco厲害就在於它的相機校準與標識檢測。由於我們這篇主要是關於Web+AR，所以我們簡單點一下aruco，以後有機會詳細為大家解析。今天先給大分享一些關於aruco的文檔或資源：aruco-marker是一個可以為Aruco增強現實標記庫生成標記圖像的JavaScript庫。aruco-marker生成SVG圖像，使其易於縮放到任何尺寸或列印出來。它可以直接在瀏覽器中使用也可以通過AMD（Require）或NodeJS使用。例如：詳細請看：https://github.com/bhollis/aruco-markerjsartoolkit學習資源：下載地址：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/jsartoolkit5skarf.js學習資源：官網：http://cg.skeelogy.com/skarfjs/下載地址：https://github.com/skeelogy/skarf.jsskarf是在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.jsAR.js是一個應用於web的高效的AR庫。具有以下特點：速度快。基於Web的：無需安裝。基於three.js + jsartoolkit5開源：它是完全開源的，免費的！標準：它適用於任何手機上WebGL於WebRTC。示例：第三部分：關於顯示我們識別marker之後，就要顯示模型了，當然若要顯示2d的圖形就很好實現了，但效果不夠驚艷。為了實現炫酷的3D效果，我們需要了解Web 3D的知識，關於web開發3D模型，我們可以了解一下幾個庫：WebGLThree.jsA-FrameWebGLWebGL（全寫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/6895582Three.jsThree.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/52370629A-Frame官網：https://aframe.io/下載地址：https://github.com/aframevr/aframe最後推薦給大家Web AR的系列教程：web AR系統-1 架構探索----https://zhuanlan.zhihu.com/p/24717199web AR系統-2 效率評估----https://zhuanlan.zhihu.com/p/24796493web AR系統-3 效率評估-websocket----https://zhuanlan.zhihu.com/p/24853634web AR系統-4 前端特徵點提取----https://zhuanlan.zhihu.com/p/25068401web AR 前端qrcode識別 - 1----https://zhuanlan.zhihu.com/p/25128932web AR 前端qrcode識別 - 2 圖片處理----https://zhuanlan.zhihu.com/p/25158289web AR 前端qrcode識別 - 3 關於流程的一些總結----https://zhuanlan.zhihu.com/p/25255704web AR 前端二維碼跟蹤 - 1 JS圖像變換以及加速方案----https://zhuanlan.zhihu.com/p/25291351web AR 前端二維碼跟蹤 - 2 homography pose的計算----https://zhuanlan.zhihu.com/p/25816168 AR醬原創，轉載務必註明微信號AR醬（ARchan_TT）AR醬官網：www.arjiang.com