JSARToolKit5WebAR库⼊门翻译
介绍
JSARToolKit5是⼀个WebAR库。这是我对JSARToolKit5的初次学习将其翻译了出来⽔平有限敬请斧正。
braggartgithub:
这篇⽂章简要的说明了如何⽤JSARToolKit5建虚拟现实WebAPP。我们讲学习什么是JSARToolKit5，什么类型的ARAPP你可以使⽤以及如果如果⽤ThreeJS 3D引擎去构建3D部件。我也将简要的阐述AR是什么以及我认为什么AR是酷炫的。
简要的说JSARToolKit5 是ARToolKit 库的JS部分。你可以使⽤JSARToolKit5 将对象加⼊图像或者影像之中，使其仿佛位于真实世界之中。不仅如此你可以让虚拟对象鲜活可交互(interactive and animated)。
为了证明这类应⽤是我们可以⽤JSARToolKit5制作出来的我们将写⼀个⼩的AR应⽤增加影像到摄像头上。这个应⽤可以讲⼀个⼩的盒⼦放在视频流中你可以点击盒⼦打开它然后可以看到盒⼦⾥⾯有什么。 JSARToolKit的基础
JSARToolKit 的⼯作原理是跟踪视频中的特殊的影像。这些特殊的影像叫做AR markers，JSARToolKit 能够分辨出他们在视频流中的位置以及他们指向哪那个⽅向。通过获得AR markers位置和⽅向你可以在影像的上⾯正确的画出3D的对象，让其仿佛就在其中。想要加载JSARToolKit将压缩的script放到⽹页中即可。
我们需要三样东西来构建AR应⽤。包括AR marker、⼀个摄像头以及⼀个将三维对象画到摄像头上的⽅式。针对marker我们将使⽤⼀个特别的嵌⼊式marker--"BarcodeMarker"。摄像头我们将使⽤设备摄像头（通过getUrMedia API实现）。对于三维部件将使⽤Three.js 实现。⾸先我们将完成摄像头资源的设置。我们将使⽤getUrMedia API获得摄像头的URL之后这个URL将作为video对象的资源（video html标签）。通过这个我们将获得⼀个video元素来展⽰视频流。
这个实现的⼀个简单⽅式是使⽤⼀个JSARToolKit5的辅助函数UrMedia(options). 成功回调将带回⼀个可以被使⽤的video元素。注意在Chrome for Android⼿机视频只有在与页⾯进⾏交互之后才会执⾏。UrMedia 添加了⼀个窗⼝级别的触摸事件来操作视频元素。
我们要做的第⼀件事就是创建ARController。ARController保持着追踪已经注册的标记（markers ）并且从数据中读取视频资源。我们现在来创建新奇的视频元素（ video element）。同时我们应该明确的写出ARCameraParam 有助于复⽤。
var video = UrMedia({
maxARVideoSize: 320, // do AR processing on scaled down video of this size
facing: "environment",
onSuccess: function(video) {
console.log('got video', video);
}
});
var arController = new ARController(video, 'Data/camera_para.dat');
console.log('ARController ready for u', arController);
};
var camera = new ARCameraParam('Data/camera_para.dat');
var arController = new ARController(video.videoWidth, video.videoHeight, camera);
console.log('ARController ready for u', arController);
};
复制代码
通过JSARToolKit获得marker位置
现在我们有个视频钩⼦（ video hooked）挂接到了管理器上我们也准备追踪AR markers摄像头中的AR markers。当我们看到AR markers我们想知道他的细节包括他在那⾥以及他的位置。
幸运的是ARToolKit 准备了所有的数学并给我们了⼀个可以重⽤的变化矩阵来找出摄像头中的marker。
// Set the ARController pattern detection mode to detect barcode markers.
pottery
英语音标发音mp3arController.tPatternDetectionMode( artoolkit.AR_MATRIX_CODE_DETECTION );
// Add an event listener to listen to getMarker events on the ARController.
// Whenever ARController#process detects a marker, it fires a getMarker event
// with the marker details.
//
var detectedBarcodeMarkers = {};
arController.addEventListener('getMarker', function(ev) {
var barcodeId = ev.data.marker.idMatrix;
if (barcodeId !== -1) {
console.log("saw a barcode marker with id", barcodeId);
// Note that you need to copy the values of the transformation matrix,
/
/ as the event transformation matrix is reud for each marker event
// nt by an ARController.
//
lucifer
var transform = ev.data.matrix;defect
if (!detectedBarcodeMarkers[barcodeId]) {
detectedBarcodeMarkers[barcodeId] = {
visible: true,
matrix: new Float32Array(16)
}
}
detectedBarcodeMarkers[barcodeId].visible = true;
detectedBarcodeMarkers[barcodeId].matrix.t(transform);
}
});
var cameraMatrix = CameraMatrix();
for (var i in detectedBarcodeMarkers) {
detectedBarcodeMarkers.visible = fal;
}
// Process a video frame to find markers in it.
// Each detected marker fires a getMarker event.
//
arController.process(video);
复制代码
⽤Three.js配合JSARToolKit
通过JSARToolKit找到了标记为⽌，我们可以将其拷贝到应该被展⽰到marker上⾯的Three.js对象。注意如果逆向移动marker 出摄像头外追踪会消失并且Three.js不会获得更新。你可以让他待在原地，让他突然消失或者淡出。我更倾向于淡出失去跟踪的对象，但是他需要对于对象有着⾼精度的控制。
最酷的事情是Three.js object跟踪的marker是⼀个普通的Three.js object。所以我们可以⽤普通的技巧来处理现在的⼯作。在这个例⼦上我们使⽤⼀个接触时间来判断你什么时候敲这个对象以及处理。下⾯的代码是Three.js ⿏标光线跟踪代码。他从⿏标的位置投射出⼀个光线到3D场景并且检查投射到物体上的光线是否⼜被阻挡隔断的情况，如果找到了隔断也就是意味着⿏标在物体上⾯。这样就可以做出⼀个能够敲击的Three.js 场景。
我添加了⼀个⼩的渲染到了敲击时间上，这样当点击盒⼦对象时他会打开。为了检查，打开demo页并将摄像头打开。现在你的相机是⼀个平⾯的marker点击会出现效果。
blou怎么读
远程教育报名流程代码⽅⾯，我⽤了Three.js 交互在JSARToolKit5中。他处理了上⾯所说的所有东西，并形成了⼀些简单的⽅法。把js/artoolkit.three.js加上就⾏。以上的⽰例Firefox Android or Chrome Android⽀持桌⾯也可以IOS可以完全不⽀持。
<script src="build/artoolkit.min.js"></script>
<script src="js/artoolkit.three.js"></script>
<script>
<script>
facing: 'environment',
onSuccess: function(arScene, arController, arCameraParam) {
arController.tPatternDetectionMode(artoolkit.AR_MATRIX_CODE_DETECTION);
// Track the barcode marker with id 20.
// markerRoot is a THREE.Object3D that tracks the marker position.
//
var markerRoot = ateThreeBarcodeMarker(20);
// Add the openable box to the marker root.
//
var box = createOpenableBox();
markerRoot.add(box);
// Add the marker root to the AR scene.
//
arScene.scene.add(markerRoot);
// Add event handlers to make the box open/clo on tap.
//
window.addEventListener('touchend', function(ev) {
if (box.hit( ev.touches[0], arScene.camera )) {
}
}, fal);
window.addEventListener('mouup', function(ev) {
if (box.hit( ev, arScene.camera )) {
}
}, fal);
// Create renderer and deal with mobile orientation.
//
var renderer = new THREE.WebGLRenderer({antialias: true});
var f = Math.min(
window.innerWidth / arScene.video.videoWidth,
window.innerHeight / arScene.video.videoHeight
);
var w = f * arScene.video.videoWidth;
var h = f * arScene.video.videoHeight;
if (ientation === 'portrait') {
renderer.tSize(h,w);
renderer.ansformOrigin = '0 0';
renderer.ansform = 'rotate(-90deg) translateX(-100%)';
} el {
renderer.tSize(w,h);
}
document.body.appendChild(renderer.domElement);
// derOn on each frame,
// it does marker detection, updates the Three.js scene and draws a new frame.
//
var tick = function() {
requestAnimationFrame(tick);
};
tick();
}
);
</script>
复制代码
没有帮助的JSARToolKit 和Three.js
也许你不想使⽤helpers。或者你想⽤JSARToolKit结合其他的绘制库，下⾯将介绍如何使⽤未集成JSARToolKit 库。
⼿动集成JSARToolKit 并不需要太多的⼯作。⾸先我需要跟踪markers通过getMarker时间。以下，我将跟踪ID 20的条形码标记的位置和可见性
长沙雅思培训学校// Create a marker root object to keep track of the marker.
//
var markerRoot = new THREE.Object3D();
// Make the marker root matrix manually managed.
//
markerRoot.matrixAutoUpdate = fal;
// Add a getMarker event listener that keeps track of barcode marker with id 20.
//
arController.addEventListener('getMarker', function(ev) {
if (ev.data.marker.idMatrix === 20) {
// The marker was found in this video frame, make it visible.
markerRoot.visible = true;
// Copy the marker transformation matrix to the markerRoot matrix.回报英语
markerRoot.matrix.elements.t(ev.matrix);
}
});
// Add a cube to the marker root.
//
markerRoot.add( new THREE.Mesh(new THREE.BoxGeometry(1,1,1), new THREE.NormalGeometry()) );
// Create renderer with a size that matches the video.
//
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.tSize(video.videoWidth, video.videoHeight);
document.body.appendChild(renderer.domElement);
// Set up the scene and camera.
//
var scene = new THREE.Scene();
var camera = new THREE.Camera();
scene.add(camera);
scene.add(markerRoot);
// Make the camera matrix manually managed.
//
camera.matrixAutoUpdate = fal;
// Set the camera matrix to the AR camera matrix.
//
camera.matrix.elements.CameraMatrix());
// On each frame, detect markers, update their positions and
// render the frame on the renderer.
//
var tick = function() {
requestAnimationFrame(tick);
momo什么意思requestAnimationFrame(tick);
// Hide the marker, we don't know if it's visible in this frame.
markerRoot.visible = fal;
// Process detects markers in the video frame and nds
// getMarker events to the event listeners.
arController.process(video);
// Render the updated scene.
};
tick();
复制代码
不要被上⾯的代码吓到。这些代码重点是渲染AR场景以及跟踪barcode marker。你可以在摄像头上⾯覆盖AR场景。只需要在摄像头的上卖弄叠加⼀个平⾯。
