WEB AR汇总

目前的AR开发主要是在unity,android,ios上完成的,但在WEB平台上也已经出现了一些有趣的AR案例。比如之前迪士尼的电影宣传网页AR游戏。今天给大家分享一些关于Web+AR的技术原理与开发心得。

WEB AR汇总_第1张图片

实现原理

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 } },

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-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的文档或资源:

http://www.uco.es/investiga/grupos/ava/node/26

https://sourceforge.net/projects/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框架。

WEB AR汇总_第2张图片

原理:

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

WEB AR汇总_第3张图片

官网: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

WEB AR汇总_第4张图片

下载地址: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个不同的立方体):

id: 'ar_button_one',

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

rotation: {y: 45},

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

color: 0xFF0000

}, {poi_id: 'marker’});

AR.js

WEB AR汇总_第5张图片

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

AR.js是一个应用于web的高效的AR库。

具有以下特点:

速度快。基于Web的:无需安装。基于three.js + jsartoolkit5开源:它是完全开源的,免费的!标准:它适用于任何手机上WebGL于WebRTC。

WEB AR汇总_第6张图片

第三部分:关于显示

我们识别marker之后,就要显示模型了,当然若要显示2d的图形就很好实现了,但效果不够惊艳。为了实现炫酷的3D效果,我们需要了解Web 3D的知识,关于web开发3D模型,我们可以了解一下几个库:

WebGLThree.jsA-Frame

WebGL

WEB AR汇总_第7张图片

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

WEB AR汇总_第8张图片

官网: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

 

你可能感兴趣的:(WEBAR)