のぐそんブログ

暗いおじさんがシコシコ書くブログです。

AR.js導入メモ

AR.jsがリリースされたので、導入手順をメモしました。 わからないパラメータや処理があり、わかったら追記していこうとおもっています。

手順

AR.js導入手順。

  1. ArToolkitSourceを作成
  2. ArToolkitContextを作成
  3. ArMarkerControlsを作成
  4. ARで表示するオブジェクト作成
  5. 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に対応しているブラウザである必要があります。 現状はchromeFirefoxが対応しています。iOSchromeは対応してません。

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

まとめ

表示するだけなら、ライブラリのおかげでそれほど難しくありませんでした。