マーカーの差し替え - noonworks/a-l2d GitHub Wiki

マーカーの差し替え

1. マーカーの作成

マーカーに使う画像は、写真のようなものより、コントラストがはっきりした、ロゴのようなものの方が向いている（認識しやすい）と思います。

  1. マーカーにしたい画像を用意します。
  2. AR.js Marker Training にアクセスします。
  3. [UPLOAD]ボタンからマーカーにしたい画像を選択します。
  4. Pattern Ratio の値を調整すると枠の太さを変えられます。（枠が細いと検出率が下がります）
  5. Border color で枠の色を変更できます。（色が薄いと検出率が下がります）
  6. 調整が済んだら [DOWNLOAD MARKER] ボタンを押して pattern-marker.patt を保存します。
  7. [DOWNLOAD IMAGE] ボタンを押すと、枠付きのマーカー画像を保存できます。（表示や印刷に使えます）

※ マーカーが検出できるかどうかは、マーカーの図柄や色、大きさに依存します。各自で調整と確認をしてください。

2. マーカーのアップロード

用意したサーバーに pattern-logo.patt をアップロードします。

3. HTML ファイルの編集

HTML ファイルの中で、マーカーの設定をしているのは以下の場所です。
（サンプルでは、デフォルトのマーカー hiro を使う設定になっています。）

<a-scene
  embedded
  arjs="debugUIEnabled:false; sourceType: webcam; detectionMode: mono; maxDetectionRate: 15;"
  vr-mode-ui="enabled: false"
>
  <a-marker preset="hiro" changeMatrixMode="modelViewMatrix">
    <a-l2d src="MyModel.json"></a-l2d>
  </a-marker>
  <a-entity camera></a-entity>
  <a-light type="ambient" color="#ffffff"></a-light>
</a-scene>

下記のようにすることで、カスタムマーカー（先ほど作ったpattern-logo.patt）を使うように設定できます。

<a-scene
  embedded
  arjs="debugUIEnabled:false; sourceType: webcam; detectionMode: mono; maxDetectionRate: 15; patternRatio: 0.66"
  vr-mode-ui="enabled: false"
>
  <a-marker
    preset="custom"
    type="pattern"
    url="pattern-logo.patt"
    changeMatrixMode="modelViewMatrix"
  >
    <a-l2d src="MyModel.json"></a-l2d>
  </a-marker>
  <a-entity camera></a-entity>
  <a-light type="ambient" color="#ffffff"></a-light>
</a-scene>
  • a-marker タグ
    • preset を "custom" に変更します。
    • type="pattern" を追加します。
    • url="pattern-logo.patt" を追加します。（ファイルの場所と名前は適宜変更します）
  • a-scene タグ
    • マーカーを作成するときにPattern Ratio（枠の太さ）を変更していた場合のみ変更します。
    • patternRatio: 0.66のように、Pattern Ratioの数値を書き込みます。

4. HTML ファイルのアップロード

用意したサーバーに書き換えた HTML ファイルを上書きアップロードします。

5. 動作確認

  1. PC でマーカー画像（枠付きのもの）を表示します。
  2. スマートフォンやタブレットで、アップロードしたページにアクセスします。
  3. カメラでマーカーを映し、動作を確認します。
⚠️ **GitHub.com Fallback** ⚠️