ここ数日、WebARコンテンツを開発できる、AR.jsを触っていました。

ARはマーカーを認識し、そこに3Dモデルを映し出すわけですが、そのマーカー部分を自由にカスタマイズしようとして、ドツボにはまっていたので、備忘録としてまとめておきます。

マーカー作成方法

AR.js Marker Trainingのページで画像をアップロードして、MarkerとImageをダウンロードしておきます。

ちなみにこちらのページに、読み取りやすいマーカーの作成方法が書いてあります
それによると、良いマーカーは
・最大解像度は16x16ピクセル
・正方形
・白/透明領域は不可。ライトグレー(例:#F0F0F0)を使用
・文字、数字、記号などの単純なテキストを含む必要あり
とのことです。

写真をマーカーにしている事例も見かけますが、これまでにカスタムマーカーが動かないというIssueがかなり頻発しているようで、難しいところのなのかもしれないです。

マーカー設置方法

Markerを任意のディレクトリに置いて、ファイルパスを指定します。
マーカ作成の際、Pattern Ratioを0.5から変更する場合、もう一箇所コードを変える必要があります。 CDNを使うのではなく、AR.jsをダウンロードして、その中のar.jsファイル内5207行目あたり、patternRatioを指定している部分を修正する必要があります。

A-Frameを使っている場合は、こちらのIssueにあるように修正するとよいらしいです(私の方では動作未確認です)
また、こちらにあるように、参照ライブラリを最新にし、タグを修正するとよいでしょう。

ちなみにPattern Ratioを大きな数(0.9など)にする場合は、マーカーの印刷サイズが小さいと読み取られないことがあります(カメラをぐっと画面に近づけたら動作しました)。もしかしたら、枠の細さの判定がシビアなのかもしれません。
注意しましょう。


まとめ

AR.jsのカスタムマーカーが動かない時に確認したいこと

・上記「良いマーカー」の条件を満たしているか?
・最新ライブラリをダウンロードして使っているか?
・Pattern Ratioで0.5以外の数字を選んだ場合、ar.jsのソースを修正しているか?
・カメラを向けているマーカーの大きさが小さすぎないか?

AR.js、まだまだ整備途中という感じですが、スマホの機種を選ばずに動作させられるという点で非常にわくわくします(以前はiOSで動かなかったようですが、2018/8/16現在、iOS11で動作しています)。
これからもいろいろ触っていきたいです。