使用JSARToolKit5 开发AR应用 (2) Marker

相关站点

jsartoolkit5 - ARToolkit.js

Talkingdata - 用数据的心智去超越

three.js 系列教程 - 良心之作

JSARToolKit 支持多种标记

本文概述了不同的Marker类型,它们是如何在增强现实应用中使用它们的呢。

这是JSARToolKit Marker的基本概述。
Marker是图像或视频中的功能,JSARToolKit可以跟踪并告知您他们在哪里以及他们指向什么位置方向。
JSARToolKit可以跟踪的标记是平面图像。

文章中,我们将一个可打开的框放在条形码标记之上,这是一种特殊类型的内置方形标记,用于对其模式中的数字进行编码。
JSARToolKit中有两种其他类型的标记:方形图像标记和NFT(自然特征跟踪)标记。
方形图像标记是由黑色和白色轮廓包围的正方形图像。
NFT标记是使用先进的计算机视觉机制跟踪自由形式的图像标记。

我们来详细了解每个标记类型,并附上一些您可以玩的样品。

图案标记

图案标记是具有黑色和白色边框的正方形图像,可用于以最少的CPU使用来跟踪自定义图像。
图案标记应该有一个厚实的黑色边框,被一个厚实的白色边框包围。
正方形内的图像应该是高对比度和旋转非对称的(意思是:如果将其平放在桌子上并旋转90度,180度或270度,则每个角度应该看起来不同)

高对比度要求的原因是ARToolKit的工作原理。
ARToolKit将视频图像转换为黑白阈值图像,然后在该图像中查找矩形。
找到形状后,它会在矩形中采样像素,并将读取的像素与注册的标记进行比较。
如果足够的像素与标记相匹配,ARToolKit会告诉您的应用程序,它会找到一个标记,并计算将一个正方形变成矩形在屏幕上的形状的转换矩阵。

这是一个代码片段,初始化JSARToolKit并加载模式标记。
当视频中看到模式标记时,下面的代码将标记详细信息记录到控制台。

var video = document.querySelector('video');
var ar = new ARController(video.videoWidth, video.videoHeight, 'Data/camera_para.dat');
ar.onload = function() {
	var markerId;

	// Load pattern marker.
	//
	ar.loadMarker('Data/patt.hiro', function(marker) {
		markerId = marker;
	});

	ar.addEventListener('getMarker', function(ev) {
		if (ev.data.marker.idPatt === markerId) {
			console.log('saw marker', ev.data.marker);
			console.log('transformation matrix', ar.getTransformationMatrix());
		}
	});

	console.log('camera matrix', ar.getCameraMatrix());

	setInterval(function() {
		ar.process(video);
	}, 33);
};复制代码

您可以在 此演示中看到模式标记跟踪。

条码标记

条码标记使用二进制码在黑白标记上画一个数字。
它们不需要预先注册并使用非常少的CPU。
认为他们是非常低分辨率的QR码,你有这个想法。

他们在封面下工作的方式很像模式标记。
库读回阈值图像数据,将其转换为二进制,并将位转换为数字。
使用条形码标记比使用图案标记更容易。
所有您需要做的是将ARController的模式检测模式设置为其中一种条形码检测模式,并检查标记对象的idMatrix属性。

arController.setPatternDetectionMode( artoolkit.AR_MATRIX_CODE_DETECTION );

arController.addEventListener('getMarker', function(ev) {
	console.log('saw barcode marker', ev.data.marker.idMatrix);
});复制代码

您可以在 看到模式标记跟踪。

混合模式跟踪

使用混合模式标记跟踪,您可以跟踪图案标记和条形码标记。
这比跟踪只有一种类型的标记更容易出错,因为某些图案标记可能被误认为条形码标记。
但是如果你需要这样做,它很简单,只需将ARController的模式检测模式设置为混合模式跟踪。

在混合模式跟踪中,getMarker事件返回的标记分别具有idMatrix或idPatt属性,分别设置为条形码ID或模式标记ID。
不匹配的id设置为-1。

以下是如何做到这一点:

arController.setPatternDetectionMode( artoolkit.AR_TEMPLATE_MATCHING_COLOR_AND_MATRIX );

arController.addEventListener('getMarker', function(ev) {
	if (ev.data.marker.idMatrix !== -1) {
		console.log('saw barcode marker', ev.data.marker.idMatrix);
	}
	if (ev.data.marker.idPatt !== -1) {
		console.log('saw pattern marker', ev.data.marker.idPatt);
	}
});复制代码

您可以在 看到混合模式标记跟踪

NFT标记

NFT(自然特征跟踪)标记用于跟踪自定义矩形图像,并且不需要标记为正方形或在图像周围具有粗边框。
例如,如果您想在架构书中弹出交互式3D模型来构建照片,则可以在每张建筑照片中创建一个NFT标记。

要使用NFT,您需要事先创建标记(参见 )。
NFT标记包含不同尺度的多个版本的标记图像。
这样,跟踪器可以进行快速的自上而下的图像匹配,从尝试低分辨率匹配开始,并将其下降到相机分辨率匹配。

尚未在JSARToolKit5中实现NFT标记。

多标记跟踪

您可以组合方形图像标记和条形码标记来进行多标记跟踪。
在多标记跟踪中,您已经在单个平面上打印了几个标记,即使某些标记不可见,也可以跟踪表面。
以这种方式,多标记跟踪可以以更加鲁棒的方式跟踪表面,而牺牲了一些额外的CPU使用。

多标记跟踪的另一个优点是您可以将小标记放在非标记内容周围,并使非标记内容的行为像标记。
例如,如果您将地图图像打印在一张纸上,并在其周围印有小标记,则可以将AR内容放在地图的顶部,只要任何多标记图像可见,它就可以工作。

在这个意义上,多标记跟踪的行为有点像NFT跟踪。
多标记与NFT的缺点是您需要使用方形标记图像进行跟踪。
这些优点是,多标记对于将跟踪表面部分遮挡起来更加坚固,并且它们在CPU使用方面更便宜。

var markerId;
var markerCount = 0;

// Load multimarker.
//
arController.loadMultiMarker('Data/multi-barcode-4x3.dat', function(marker, subMarkerCount) {
	markerId = marker;
	markerCount = subMarkerCount;
});

arController.addEventListener('getMultiMarker', function(ev) {
	if (ev.data.multiMarkerId === markerId) {
		console.log('saw multimarker', ev.data.multiMarkerId);
		console.log('transformation matrix', arController.getTransformationMatrix());
	}
});

arController.addEventListener('getMultiMarkerSub', function(ev) {
	if (ev.data.multiMarkerId === markerId) {
		console.log('saw submarker', ev.data.markerId, ev.data.marker);
	}
});
复制代码

您可以在 看到多标记跟踪。

结论

我们已经了解了JSARToolKit中可用的不同类型的标记以及如何使用它们。
您可以跟踪的不同类型的标记是方形图像标记,条形码标记,NFT标记和多标记。

选择使用哪种类型的标记取决于您的要求。
如果您需要快速跟踪,请使用方形标记。
如果您需要自定义标记图形,则可以使用方形自定义标记或NFT标记。
如果您需要非正方形标记,则需要使用NFT标记或多标记跟踪。
对于强大的跟踪,请使用多标记跟踪。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值