トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

AR.jsで画像をマーカーにする!【Image Tracking】

AR.js

f:id:bibinbaleo:20200329193800p:plain

WebARのライブラリであるAR.jsでHiroとかQRコードじゃない普通の画像をマーカーとして使えるようになったって!

github.com

↓のをやったとき、本当はwebARでやりたかったんだけど、画像をマーカーとするwebARで手軽なのがなかったので結局Unity+Vuforiaでやったんだよね。

bibinbaleo.hatenablog.com

サンプル

サンプルページをスマホで開く

https://ar-js-org.github.io/AR.js/aframe/examples/image-tracking/nft/

恐竜の画像にかざす

https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg

https://raw.githubusercontent.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex-image-big.jpeg

恐竜が出てきた。

f:id:bibinbaleo:20200329205209p:plain

VuforiaとかARkitとかに比べるとあんまり安定しない・・・ロストはしないけどぐらぐらしてる。

でもこれでもwebARとしては安定しているほうなのかな?

安定しているらしい

webar-lab.palanar.com

自分で実装

こちらの記事を参考に作ります。

dev.to

公式のドキュメントはここ

ar-js-org.github.io

マーカー画像を特殊な拡張子で書き出し?

こちらのサイトでマーカー画像を3つのファイルに変換します。

carnaux.github.io

☆でマーカーとしての良さを教えてくれます。

いつものアイコン☆0だった!!なんで!Vuforiaでは☆3ぐらいだったのにー

f:id:bibinbaleo:20200329195314p:plain

別の写真だと☆5になった

f:id:bibinbaleo:20200329202950p:plain

generateを押すと3つのファイルが落ちてくる。Chromeで複数ファイルのダウンロード許可ダイアログが出た。

f:id:bibinbaleo:20200329195421p:plain

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番目の長いコードが画像らしい。

f:id:bibinbaleo:20200329203103p:plain

マーカー画像は拡張子なしで共通の名前を書く

いずれの場合も、.fset、.fset3、.isetの3つのファイルが画像記述子として使用されます。それぞれのファイルは、拡張子の前に同じ接頭辞を持ちます。これがAR.jsウェブアプリで使用するImage Descriptorの名前になります。例えば、ファイルが trex.fset、trex.fset3、および trex.iset の場合、Image Descriptor の名前は trex となります。

Image Tracking - AR.js DocumentationDeepL翻訳

 

同じフォルダに画像を置くときは、名前だけ書けば良いのかな?

f:id:bibinbaleo:20200329203106p:plain

 

サーバーにアップして試す

githubにindex.htmlと画像をアップしてgithubPageに変換してスマホで読み込み

https://bibinba.github.io/ARJS_ImageTest/

マーカー

f:id:bibinbaleo:20200329205313p:plain

ヨミコミチュウの文字を変えたのは反映されたけど、読み込みが終わらない・・・

f:id:bibinbaleo:20200329205426p:plain

github.com

url色々変えてみたけどだめだー

これじゃダメなのか?

https://github.com/bibinba/ARJS_ImageTest/blob/master/marker_tokyo

最後に

初めてAR.jsを触った記事

bibinbaleo.hatenablog.com

関係ないけどdev.toというサイト、爆速なことで有名なんだ

dev.to