使用JSARToolKit5 開發AR應用 (2) Marker

相關站點

jsartoolkit5 - ARToolkit.js

Talkingdata - 用數據的心智去超越

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

JSARToolKit 支持多種標記

本文概述了不一樣的Marker類型，它們是如何在加強現實應用中使用它們的呢。

這是JSARToolKit Marker的基本概述。

Marker是圖像或視頻中的功能，JSARToolKit能夠跟蹤並告知您他們在哪裏以及他們指向什麼位置方向。

JSARToolKit能夠跟蹤的標記是平面圖像。

在「

JSARToolKit5簡介」

文章中，咱們將一個可打開的框放在條形碼標記之上，這是一種特殊類型的內置方形標記，用於對其模式中的數字進行編碼。

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標記訓練的ARToolKit文檔

）。

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標記或多標記跟蹤。

對於強大的跟蹤，請使用多標記跟蹤。