AR.js導入メモ
AR.jsがリリースされたので、導入手順をメモしました。 わからないパラメータや処理があり、わかったら追記していこうとおもっています。
手順
AR.js導入手順。
- ArToolkitSourceを作成
- ArToolkitContextを作成
- ArMarkerControlsを作成
- ARで表示するオブジェクト作成
- arToolkitContextをアップデート
ArToolkitSourceを作成
ポジショントラッキング用に表示するオブジェクトを作成。 ‘webcam’, ‘image’, ‘video'のどれかを選ぶ。 ここで作成したオブジェクトをトラッキングして、3Dオブジェクトを表示させる。
sourceWidth, displayWidthなどは指定しなくてもデフォルト値が幅640、高さ480で設定される。
var arToolkitSource = new THREEx.ArToolkitSource({
//ウェブカメラの場合
sourceType: 'webcam',
//画像の場合
// sourceType : 'image',
// sourceUrl : '../../data/images/img.jpg',
// 動画の場合
// sourceType : 'video',
// sourceUrl : '../../data/videos/headtracking.mp4',
//生成されるdomエレメントのwidth,height（width="XXX")
sourceWidth: 100,
sourceHeight: 100,
//生成されるdomエレメントの表示サイズ（style.width="XXX")
displayWidth:200,
displayHeight:200
});
// 初期化することで、ArToolkitSourceオブジェクトが描画される。
arToolkitSource.init(function onReady() {
//初期化時に実行する処理
//画面のリサイズ処理を行う
arToolkitSource.onResize(renderer.domElement)
})
sourceTypeを webcamを選択した場合、 mediaDevices APIに対応しているブラウザである必要があります。 現状はchrome、Firefoxが対応しています。iOSのchromeは対応してません。
mediaDevices API
mediaDevicesは接続された利用可能な映像/音声デバイスの情報が取得できます。
MediaDevices.getUserMedia
カメラや画面共有機能、マイクを起動して、入力と共にビデオトラックやオーディオトラックを含むMediaStreamを提供します。
MediaDevices.getUserMedia({ audio: true, video: true }).then(function(stream){
//MediaStreamオブジェクトが返却される
});
MediaDevices.enumerateDevices
システム上で利用できる入出力メディアデバイスの情報を取得できます。
MediaDevices.enumerateDevices().then(function(devices){
//利用できる入出力メディアデバイス情報が返却される
});
ArToolkitContextを作成
マーカーを読み込む為のカメラ設定。
var arToolkitContext = new THREEx.ArToolkitContext({
cameraParametersUrl: 'images/camera_para.dat',
detectionMode: 'mono',
imageSmoothingEnabled: true,
maxDetectionRate: 60,
canvasWidth: arToolkitSource.parameters.sourceWidth,
canvasHeight: arToolkitSource.parameters.sourceHeight,
})
//初期化
arToolkitContext.init(function onCompleted() {
//射影行列をコピー
camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
})
| パラメーター | 内容 | 補足 |
|---|---|---|
| debug | デバック用のキャンバスを表示 | true / false |
| cameraParametersUrl | カメラのパラメーターファイルのパス。設定するファイルにはカメラのレンズ設定のようなものが入っています。 | |
| detectionMode | マーカー検出用モード | ‘color’, ‘color_and_matrix’, ‘mono’, ‘mono_and_matrix'のいずれか。初期値はcolor_and_matrix |
| matrixCodeType | detectionModeでmatrixタイプを選択した場合に設定 | 3x3, 3x3_HAMMING63, 3x3_PARITY65, 4x4, 4x4_BCH_13_9_3, 4x4_BCH_13_5_5のいずれか。初期値は3x3 |
| imageSmoothingEnabled | CanvasRenderingContext2D.imageSmoothingEnabledの設定 | 初期値はfalse |
| maxDetectionRate | マーカー検出用のレート。大きくすると検出がスムーズになり、マーカー移動時になめらかに表示される | 初期値は60 |
| canvasWidth | マーカー検出用の画像解像度。高いほうが検出されやすくなる。 | 初期値は640 |
| canvasHeight | マーカー検出用の画像解像度。高いほうが検出されやすくなる。 | 初期値は480 |
ArMarkerControlsを作成
マーカー用のコントーローラーを作成。
//パラメーター
var parameters = {
size : 1,
type : 'pattern',
patternUrl : 'sample.pat',
barcodeValue : null,
changeMatrixMode : 'modelViewMatrix',
}
//object3Dを作成
//このオブジェクトにマーカー上に表示するオブジェクを格納する
var markerRoot = new THREE.Group
scene.add(markerRoot)
//インスタンスを作成
//第1引数 arToolkitContext
//第2引数 object3D
//第3引数 パラメーター
var artoolkitMarker = new THREEx.ArMarkerControls(arToolkitContext, markerRoot, parameters)
| パラメーター | 内容 | 補足 |
|---|---|---|
| size | マーカーのサイズ |
1を設定 10を設定 |
| type | マーカーのタイプ | ‘pattern’, ‘barcode’, ‘unknown’ のいずれかを選ぶ |
| patternUrl | typeで'pattern'を選んだ場合に指定する、パターンファイルのパス | |
| barcodeValue | typeで'barcode'を選んだ場合に指定する、バーコードファイルのパス | |
| changeMatrixMode | ‘modelViewMatrix’, ‘cameraTransformMatrix'のいずれかを選択 | |
| minConfidence | マークの認識度？？ | 0~1の値を設定。初期値は0.6 |
ARで表示するオブジェクト作成
ArMarkerControlsに連携したobject3Dに表示するオブジェクトを追加する。
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshNormalMaterial({
transparent: true,
opacity: 0.5,
side: THREE.DoubleSide
});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.z = geometry.parameters.height / 2
markerRoot.add(mesh);
arToolkitContextをアップデート
arToolkitContextをアップデートし続ける。
animate();
function animate(nowMsec) {
requestAnimationFrame(animate);
arToolkitContext.update(arToolkitSource.domElement)
}
その他
オリジナルのマーカーを作る場合は下記を使用すると楽。
https://github.com/jeromeetienne/AR.js/blob/master/data/marker-generator/MGO2.swf
まとめ
表示するだけなら、ライブラリのおかげでそれほど難しくありませんでした。
