AR.js Studioを使ってみたい２　3D/AR20

　WebARを使いたい　目標の復習と今回の更新内容

• ユーザ側が、端末問わず、アプリインストール無しで見られる　
  → AR.jsないしAR.js Studioかな？
• 紙面上で、出来れば画像ベース（Image Tracking） 無理ならマーカーベース
  →コードを書かないAR.js studioでは、任意の画像をマーカにするイメージトラッキングは実装できないようなので、画像ベースならAR.jsでコードを書くしかなさそう。
• モデルは3D（LiDARスキャンかそれっぽいのを簡単に作る）
  →◉ 犬キャラのシロちゃんモデルを作りました。iPad Proも予約しました。
• 3Dが浮かび上がれば良い
  →AR.js Studioならできる。

　今後の予定と今回のラインナップ

1. AR.js Studio x マーカー x 画像 x GitHub →◉
2. AR.js Studio x マーカー x 3D x GitHub →スキップ
3. AR.js Studio x マーカー x 動く3D x GitHub→この回で◉
4. AR.js Studio x マーカー x 画像 x GitHub以外でホスティング
5. AR.js Studio x マーカー x 3D x GitHub以外でホスティング
6. AR.js Studio x マーカー x 動く3D x GitHub以外でホスティング
7. AR.js Studio x マーカー x 動画 x GitHub
8. AR.js Studio x ロケーション x 画像/動画 x GitHub

AR.js studioの場合、ファイル形式は.gltf, .glb .zip（max size 50MB）と書いてあるのだけど、Mayaのエクスポートにその形式が無く、調べて出てきたglTF Exporter for Mayaも、Plug-in Managerにない。どうやらこのプラグインは2017/2018バージョンしかない模様。そういうことがあるんですね。

というわけで、Mixamoにアップロードしてアニメーションをつけたモデルを、Adobe Aeroに送ってglbにする手段をとる事にしたため、ステップ2で想定していたアニメーション無しのステップを飛ばして3へ。

参考：【WebGL特集】第8回：各ツールからglTF形式でアニメーション出力

　３. AR.js Studio x マーカー x 動く3D x GitHub

手順は前回とほぼほぼ一緒。マーカーは用意されているものを使います。

フォトショで作った3DのONIちゃんをアップロード。
前日は何故かアップロード出来なかった同じファイルが翌日いけました。
この座標？のズレは何か影響あるのかどうか。。

こちらも2Dの時と同じように、GitHubアカウントと連携で、ほぼ緑のボタンを押しただけで完了です。
なので、GitHubがどうなっているのか全くわからず。後々、こちらもきちんと理解できるようにしたいです。

　今回もQAコードにしました

QRコードリーダかカメラで、下記QRコードを読み込んで、リンク先のブラウザを開くと、カメラ画面になるので・・・・（カメラへのアクセス許可が必要になります。）

今度はその画面で、このマーカを読み取ると・・・・

ONIちゃんが現れました。楽しんだ後はそのブラウザを閉じてください。

座標のズレの件は、結局ARを見ているスマホ画面のタッチ操作で、拡大縮小、回転や移動ができるので、この程度で弄ってるレベルでは、ずれてても問題なさそう。回転の操作は少し手間取りますが。

プリントするのが面倒で、手で真似て描いたARマーカーでも認識できてびっくり。

3Dが見えるパブリッシュしたサイトにiPadからアクセスして、そのiPad上にONIちゃんが現れている様子を、iPhoneで撮っています。（ややこしくてすみません）

　3Dで新登場のシロちゃんもARになりました

AR.js Studioの第一回目のブログを書いてから数ヶ月の時を経て、苦労の末、シロちゃんモデルができましたので、これから色々使い倒したいと思います。それぞれQRコードをスキャンした後に、ARのマーカを読み取ると、そのマーカ上にシロちゃんが現れます。（カメラへのアクセス許可が必要になります。）

お好きなシロちゃんをお選びください。

シロちゃん前方宙返りはこんな感じに動きます。

＜3DのONIちゃんについてはこちら＞
ブログ：ONIちゃん登場@Ps/Dimension

＜シロちゃんについてはこちら＞
チャとシロの日常