はじめに
AR.jsでカスタムマーカーを使おうとしてハマったので備忘録もかねて残しておきます。
症状
A-Frameのmarker generatorで作成したカスタムマーカーをAR.jsが認識しない。
考えられる原因と対処法
参照しているライブラリが古い可能性がある
カスタムマーカーはバージョン1.5.5以降に追加された機能です。CDNで公開されているライブラリを参照している場合、バージョン1.5.5以降のライブラリ、またはgithubの最新のコードを参照しているか確認してください。
- 1.5.5 ： https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.5/aframe/build/aframe-ar.js
- githubの最新 ： https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js
ちなみに、npmに公開されているAR.jsはバージョンが古いため（おそらく1.5.0）、モジュールの入れ替えが必要です。
タグ／属性が誤っている可能性がある
18/4/17時点の公式サイトにて、カスタムマーカーの使用法は下記のように説明されています。
<a-marker-camera type='pattern' patternUrl='path/to/pattern-marker.patt'></a-marker-camera>
上記コードでは、patternUrl属性にカスタムマーカーのパターンファイルを参照させることでカスタムマーカーを認識させる、というものですが、正しくはurl属性に指定する必要があります。
また、認識しないことの直接の原因ではありませんが、<a-marker-camera>を使用した場合、カメラがマーカーを外れたときにオブジェクトが消えずに残るという事象が発生します。そのため、<a-marker>を使用するのが正しいです。
修正後のサンプルコード
上記の原因を見直し、下記のように修正した結果、無事にカスタムマーカーを認識することができました。
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"> </script>
～省略～
<a-marker preset="custom" type="pattern" url="pattern-marker.patt"></a-marker>
おわりに
個人的には「ライブラリが古かった」という点でハマりました。
AR.jsは日本語の情報が少ないので、今後利用を検討されている方の参考になれば幸いです。