オリジナルARマーカーを作る


## やること

オリジナルのARマーカーを作ってARで遊びます

## 参考サイト

こちらのサイトを参考にさせて頂きました。

- [「AR.js」でオリジナルのマーカーを設定する方法](https://liginc.co.jp/457071)
- [JavaScript: AR.jsで年賀状を作ってみる](https://techracho.bpsinc.jp/gengen/2018_12_17/66732)

## ARのサンプルを用意

ARではおなじみHiroのマーカーで動くWebサイトを用意します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9b729d99-e362-ddb2-c80c-2d7a512d7195.png" width="200" />

<details><summary>ソースのサンプルはここをクリックすると表示</summary><div>

```html:sampleAFrame-AR.html
<!DOCTYPE html>
<html class=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>sample</title>
    <body style="margin: 0px 0px 0px 126.5px; overflow: hidden;">
        <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js"></script>
    <a-scene embedded="" arjs="trackingMethod:best; debugUIEnabled:false;" class="" canvas="" inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="">
      <a-marker preset="hiro" position="" rotation="" scale="" visible="" material="" arjs-anchor="" arjs-hit-testing="">
        <a-box position="0 0.8 0" wireframe="false" color="#843233" rotation="" scale="" visible="" material="" geometry="" src="" width="0.7" height="0.7" depth="0.7" >
          <a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"></a-animation>
        </a-box>
    </a-marker>
    <a-entity camera="" position="" rotation="" scale="" visible=""></a-entity>
    <canvas class="a-canvas" data-aframe-canvas="true"></canvas>
    <a-entity light="" data-aframe-default-light="" aframe-injected="" position="" rotation="" scale="" visible=""></a-entity>
    <a-entity light="" position="" data-aframe-default-light="" aframe-injected="" rotation="" scale="" visible=""></a-entity>
  </a-scene>
</body>
</html>
```

</div>
</details>

このように3Dオブジェクトが表示されたら成功です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/08c0360c-9612-131d-18ba-e17e082feae5.png" width="300">

## オリジナルマーカーを作ろう

ありがたいことにジェネレータサイトをがあります。こちらを使わせて頂きます。

- [AR.js Marker Training](https://jeromeetienne.github.io/AR.js/three.js/examples/marker-training/examples/generator.html)

`UPLOAD`ボタンでARマーカーにしたい画像をアップロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/e4390e13-f54e-14c9-0db6-d40b7b0cd611.png" width="400">

`DOWNLOAD MARKER`と`DONWLOAD IMAGE`ボタンでARマーカーとARマーカーのパターンファイルをダウンロードします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/04b29b8d-afc9-1a8e-82a0-03331f02689d.png" width="300">

以下のようなファイルがダウンロードできます。

- pattern-test.png
- pattern-test.patt

## sampleAFrame-AR.htmlの修正

sampleAFrame-AR.htmlの修正し、パターンファイル`pattern-test.patt`を設定します。
同じ階層（同じフォルダ）に`pattern-test.patt`を格納し、`sampleAFrame-AR.html`を以下のように修正します。

```html
<!-- 変更前 -->
<a-marker preset="hiro" position="" rotation="" scale="" visible="" material="" arjs-anchor="" arjs-hit-testing="">
<!-- 変更後 -->
<a-marker type="pattern" url="pattern-test.patt">
```

これで、オリジナルのARマーカーの設定が完了しました。

## 動作確認

`pattern-test.png`で3Dオブジェクトが表示されれば成功です。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/9aef9861-5ac0-ffc6-1183-61ff230f9722.png" width="300">


※おまけ※
ARマーカーをいくつか作って検証した結果はこちら
→ [どんなARマーカーが認識できるか試してみた](https://note.com/agw/n/n36ea390f5db1)
<a href="https://note.com/agw/n/n36ea390f5db1">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274270/fa4fbc69-5194-1188-7e59-6621ef466b32.png" width="200"></a>