オリジナルポストカードは”こちら”で好評発売中!

AR.js Studioを使ってみたい2 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形式でアニメーション出力

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

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

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

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

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

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

ONIちゃん
ブレイクダンス

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

QRコードスキャン後、ここに端末を
かざすとONIちゃんが現れます。
3Dモデルの位置や向き、大きさなどは
タッチ操作で変えられます。

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

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

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

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

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

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

先に下記QRコードの1つをスキャン後、
このARマークに端末をかざすと
シロちゃんが現れます。
3Dモデルの位置や向き、大きさなどは
タッチ操作で変えられます。

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

撃たれて倒れるシロちゃん
ヒップホップダンスを
するシロちゃん
背中に痛みが走る
シロちゃん
シロちゃん前方宙返り

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


<3DのONIちゃんについてはこちら>
ブログ:ONIちゃん登場@Ps/Dimension

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

コメントを残す

メールアドレスが公開されることはありません。