AR.js Studioを使ってみたい１　3D/AR14

　WebARを使いたい

実際に近々で試したい内容がこちら。

• ユーザ側が、端末問わず、アプリインストール無しで見られる
• 紙面上で、出来れば画像ベース（Image Tracking）
  無理ならマーカーベース
• モデルは3D（LiDARスキャンかそれっぽいのを簡単に作る）
• 3Dが浮かび上がれば良い

色々調べて、先ずは実現に一番高そうなのはこれかな、と言う事で、ここから徐々に近づけて行こうかと思います。

AR.js Studio

　今後のラインナップ（予定）

こちらのサイトを参考に、今後の計画ラインナップ。
AR-js-Studio-NoCodeでWebARをGithub-Pagesに公開する

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

マーカーもどこかの段階で自作を使用したいところ。
3Dモデルに関しては、以前フォトショ3D機能で作ったONIちゃんで試します。
3Dモデルはファイル形式が肝のようです。blenderとかで変えられるのかな。
動く3DはMixamoと組み合わせたらいけるのではないかと推測。
GitHub以外のホスティングの仕方は現在未定ですがこのサイトにできないかな。
4-6より7-8の方が難易度は低そうですが、興味の優先度でこの順です。

　１.先ずは AR.js Studio x マーカー x 画像/動画 x GitHub　

マーカーは用意されているものを使います。

画像は、この後の3DにONIちゃんを使用する予定なので、2DもONIちゃんをアップロード。

最短で出来そうな方法ということで、以前N予備校のビデオを見ながら作成した時のGitHubアカウントと連携。ほぼ緑のボタンを押しただけで完了です。

　できました。すごい。iPhoneで試してみる。

少し待っていると、リンクが生成されましたので、今回はQRコードを別途作成しました。

下記QRコードを読み込むとカメラ画面になるので・・・・
（カメラへのアクセス許可は必要です。）

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

ONIちゃんが現れました。

下記の動画は、PCのカメラでiPhone上のマーカーを読み取りした時のものです。

PC画面に映したマーカーをiPhoneで読み取るとこんな感じ。
QRコードリーダでもカメラでも行けました。マナーカメラアプリは読み取りませんでしたが。

＜ONIちゃんについてはこちら＞
ブログ：ONIちゃん登場＠Ch　動画/アニメーション８