AR.js 初探

写之前说几句,以下示例和参考都是github上的开源作品,小编只是分享在使用过程中的踩坑和开发心得。本文适用于小白,由于例子中可能需要使用到shell命令,小编的电脑操作系统是windows 7,如果是mac请自行转换为对应的命令行。

AR技术(增强现实技术Augmented Reality,简称 AR),AR技术在Native中已经兴起了,并且市场上有许多成功的APP,但是对于JavaScript怎么来玩转AR呢?下面我来简单的给大家演示两个不同版本,不同场景的AR小例子。

1.首先需要先到github上搜索ar.js,如下图,有2.8K star的就是了。

目录结构如下,大家可以download zip,或者git clone下来


咱们的例子主要在这个开源库上更改,它的一级目录,aframe data three.js webvr-polyfill,一看就很清晰了,今天咱们单刀直入,只看three.js部分,当然也要依赖于data目录里的数据。

事先准备,为了以后的灵活扩展,建议大家下载一份最新的three.js源码,里面有完整的例子和源码可以借鉴。

把项目download下来以后,需要部署到web服务器上,然后运行一下里面的例子,下面我以dev.html举例。目录结构如下:

这个页面比较简洁,不到300行的代码,咱们需要关注两块内容,就可以完成对这个页面例子的改动。
这几行代码什么意思呢,就是一个匹配的规则,匹配的文件是data目录中的Market标识,说白了就是用让摄像头识别这个标记,官方示例给的标记是patt.hiro,这个标记的来源图片对应着data目录中的images/hiro.png 这张图,怎么用这张图来生成patt.hiro这个标记呢,这时我们需要使用一个SDK工具,微小轻量级的,大家别担心是很重的安装包。这个工具叫artoolkit,就是AR工具箱,进入官网以后点download下载,我选择的是这个

安装完成以后,进入到D:\Program Files (x86)\ARToolKit5\bin 目录下,接下来我们就要自定义一个标记了,这里的标记是传统的长方形标记,第一代market,稍后会增加自然图片的market,这里第一代market我是用div画的,具体的效果如下:

最外层的边框 最好为黑白色,这个是官方的文档上建议的 参考链接market,然后呢把这个效果截图保存到我们刚才下载的SDK D:\Program Files (x86)\ARToolKit5\bin\image下,没有image目录就新建一个,用cmd到D:\Program Files (x86)\ARToolKit5\bin目录,运行mk_patt.exe

会弹出相机的配置选项,默认的确定就行,然后相机启动以后,把我们刚才生成的图片,对准相机然后相机识别以后会出现红绿色边框线,并且出现左上角识别的文字,这时请注意文字的方向是否正确。

然后点击鼠标左键,回到命令行,输入文件名称patt.td,然后再当前的Bin目录下找到该文件

回到AR.js-master项目中,打开data/multi/目录把刚生成的标识文件放进去,接下来回到three.js/examples/dev.html中,在chrome中打开该页面,这里有个坑,如果是外网想访问摄像机,必须走https协议,下面是我web服务的url地址:
127.0.0.1:18080/AR.js-m
效果如下:


这里声明必须使用两台设备,我的电脑打开我开发的网页,手机上保存的是我们刚才生成的market!也可以使用两台手机,最好是比较新的android机器,支持webrtc的设备

接下来如果例子运行成功以后,大家会发现我的3D模型和官方的例子并不一致,模型怎么替换呢,这就涉及到前面我说的第二处注意的地方,替换模型,并不需要改大量的源码,只需要注释掉一小部分就行。

我注释掉的部分是官方的模型运行的代码。上面部分则是three.js中的源码,我这是在红框的地方更改一下模型的定位。我这个模型大家可以直接参考three.js源码中three.js-r82\examples\webgl_loader_collada.html 这个html文件,可以直接运行的例子,将如下代码替换掉dev.html中我注释的部分即可,具体请参考截图,并不是完全替换

var loader = new THREE.ColladaLoader();

loader.options.convertUpAxis = true;
loader.load( './models/collada/monster/monster.dae', function ( collada ) {
	dae = collada.scene;
	dae.traverse( function ( child ) {
       if ( child instanceof THREE.SkinnedMesh ) {
var animation = new THREE.Animation( child, child.geometry.animation );
		    animation.play();
		 }
             });
             dae.scale.x = dae.scale.y = dae.scale.z = 0.002;
	     dae.updateMatrix();
	     init();
	     animate();
});

还需要引入依赖的js文件,只需要把这几个文件增加到AR.js-master项目中即可,three.js已经有了,余下的拷过去就行。

最后一个自定义标识的ar h5小程序就生成了,大家可以替换自己想用的3D模型,也可以条形码生成market,也可以将标识打印到A4纸上,用手机打开url掉出照相机,对着该market一扫,就出现了增强现实的模型,很赞吧!


接下来说说自然图片的标识怎么生成:

先使用SDK工具进入到D:\Program Files (x86)\ARToolKit5\bin目录,我在这新建一个image文件夹,里面拷了一张.jpg的图片,然后用命令行打开这级目录:

直接enter 使用默认值,到这一步需要输入分辨率
默认是220,然后再输入一个区间,按照提示输入6和220

然后就会采集图片的坐标点

收集完成以后会生成如下文件

我们将生成的NTF文件拷入到AR.js-master项目中data/dataNTF中,我这里新建了一个目录叫dayan的文件夹,并将文件粘贴进去,标识生成以后需要做测试了,怎么测试呢,找到如图的nft_threejs.html,这是官方用来测试自然图片的demo.

找到加载标识的地方,这里需要替换一下路径,官方的路径在web服务上会有问题

这里需要注释一下这个function回调里的代码,
替换成如下代码:

var markerRoot = arController.createThreeNFTMarker(markerId);
var loader = new THREE.ColladaLoader();
loader.options.convertUpAxis = true;
loader.load(location_path+ 'three.js/examples/models/dae/monster.dae', function (collada) {
	dae = collada.scene;
	dae.traverse( function (child) {
if (child instanceof THREE.SkinnedMesh) {
	var animation = new THREE.Animation( child, child.geometry.animation );
	animation.play();
    }
});
	dae.position.z = 40;
	dae.position.x = 80;
	dae.position.y = 80;
	dae.rotation.set( 0,Math.PI/2,Math.PI/2);
	dae.updateMatrix();
	markerRoot.add( dae );
	arScene.scene.add(markerRoot);	

});


最后代码如下图,

然后我们来跑一下我们的自然图片例子。效果如下

如果大家需要调整模型的位置和角度,请更改position和rotation的值,涉及到一定的数学原理,不会的自己调调找感觉。




最后把我制作的market图片贴一下

参考文档:
Creating and Training Traditional Template Square Markers
Training ARToolKit Natural Feature Tracking (NFT) to Recognize and Track an Image
NFT Utilities for ARToolKit

demo list:

测试AR例子
自然图片识别例子

github源码:
dragonHu/ar_test_demo

都是国外的网站,打开可能比较慢,然后大家阅读英文文档吃力的,可以使用google翻译 翻译一下,我这只是在AR.js上初步研究了一下,并没有深入,希望大家多提意见交流,我也实现了播放视频的例子,大家可以参考demo列表中的例子,我就不贴代码了。为了精准的展示例子,请大家把摄像头对准Market

目前H5 AR还是有很多壁垒和坑的,文档也相对较少,涉及的面比较多,设备性能也是问题,但是对于新技术的探索还是很有趣的,希望我这篇文章能帮到一些开发人员。

发布于 2017-04-14

文章被以下专栏收录