AR.js
WebARのライブラリであるAR.jsでHiroとかQRコードじゃない普通の画像をマーカーとして使えるようになったって！
↓のをやったとき、本当はwebARでやりたかったんだけど、画像をマーカーとするwebARで手軽なのがなかったので結局Unity+Vuforiaでやったんだよね。
サンプル
サンプルページをスマホで開く
https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft/
恐竜の画像にかざす
恐竜が出てきた。
VuforiaとかARkitとかに比べるとあんまり安定しない・・・ロストはしないけどぐらぐらしてる。
でもこれでもwebARとしては安定しているほうなのかな？
安定しているらしい
自分で実装
こちらの記事を参考に作ります。
公式のドキュメントはここ
マーカー画像を特殊な拡張子で書き出し？
こちらのサイトでマーカー画像を3つのファイルに変換します。
☆でマーカーとしての良さを教えてくれます。
いつものアイコン☆０だった！！なんで！Vuforiaでは☆３ぐらいだったのにー
別の写真だと☆5になった
generateを押すと3つのファイルが落ちてくる。Chromeで複数ファイルのダウンロード許可ダイアログが出た。
https://github.com/Carnaux/NFT-Marker-Creator/wiki/Creating-good-markers」
コード書き換え
サンプルコードをhtmlで保存します
GitHub - AR-js-org/AR.js: Image tracking, Location Based AR, Marker tracking. All on the Web.
さっきダウンロードした画像ファイルもどこかにアップしないといけない。
そしてindex.htmlの画像urlを書き換えます。下から2番目の長いコードが画像らしい。
マーカー画像は拡張子なしで共通の名前を書く
いずれの場合も、.fset、.fset3、.isetの3つのファイルが画像記述子として使用されます。それぞれのファイルは、拡張子の前に同じ接頭辞を持ちます。これがAR.jsウェブアプリで使用するImage Descriptorの名前になります。例えば、ファイルが trex.fset、trex.fset3、および trex.iset の場合、Image Descriptor の名前は trex となります。
同じフォルダに画像を置くときは、名前だけ書けば良いのかな？
サーバーにアップして試す
githubにindex.htmlと画像をアップしてgithubPageに変換してスマホで読み込み
https://bibinba.github.io/ARJS_ImageTest/
マーカー
ヨミコミチュウの文字を変えたのは反映されたけど、読み込みが終わらない・・・
url色々変えてみたけどだめだー
これじゃダメなのか？
https://github.com/bibinba/ARJS_ImageTest/blob/master/marker_tokyo
最後に
初めてAR.jsを触った記事
関係ないけどdev.toというサイト、爆速なことで有名なんだ
