ノーコードでARマーカー上にてアバターを表示したお話
🎄はじめに
メリークリスマス
野球好きのりまきです。守備をこよなく愛する野球好きです。
属性はちなヤクですが、好きな選手は色んな球団にいます。ストーブリーグもやっと落ち着いてきましたね。
⚾自己紹介
教育機関にeラーニング導入してる会社をしています。企画と営業担当なのでコードは書けません。
ポンコツの非エンジニアです。
少しくらい自分で何か作れるようになりたいと今年の夏から少し勉強してました。
出来る限りコードを書きたくない。この強い想いだけでひたすらノーコードで出来ることを探しました。
👓野球が好きすぎてARで野球に参加したくなる
ライトスタンドから野球を観戦していて、私もあのなかに入りたいな・・・
誰しも考えたことがあると思います！
ライトスタンドなんてプチ監督やプチGMだらけです。
もっと野球で感情をゆさぶられて、選手と一体感を味わうには試合に参加するしかない！！
そうだ！アバターをグラウンドで表示したらいいんじゃないか！！と思い付き、ARでアバターをグラウンド上に表示したい欲だけで開発にいたりました。
ノーコードでがんばる
非エンジニアのため、ノーコードでどこまで出来るかチャレンジもあります。
目次
1. 3Dアバターを作成する
2. 3Dアバターに動作をつける
3. ブラウザでARを動かす
4. 動作確認
5. おわりに
1.3Dアバターを作成する
AR、VR初心者なので、アバター作成も苦戦すると思いましたが、素晴らしいアプリ発見しました。
スマホで撮影するだけで3Dアバターが作れます。
スマホを固定して撮影するだけです。とってもカンタンです。
全身撮影するには、ある程度広い場所の方がいいです。
完成したらアプリ内で遊べます。
神宮球場に連れて行きました！
2. 3Dアバターに動作をつける
in3Dでは私がしたい動作はないため、動作をつける必要があります。
守備と走る、タッチするを実現したい。
こちらも神システムがありました。
adobeのシステムでアバターと動作どちらも無料で使用できます。
自分の作ったアバターもインポートできます。
in3Dからアバターをエクスポート
mixamoで使用するアバターをin3Dアプリからエクスポートします。
エクスポートできるのは3種類です。「FBX」を選びます。
エクスポートの場所を選びます。zipファイルでエクスポート！
mixamoにアップロード
ダウンロードしたzipファイルそのままアップロードします。
アップロードするとアバターが表示されます。
動作を選ぶ
野球の動作はピッチャー、キャッチャー、バッター、アンパイアはあったのですが、野手がないので攻守交替で走る動作にしました。
動作が決まったらダウンロードします。
気を付けないといけないのは、"Skin"は "WithSkin" にしないと使うシステムによってはアバターが透明になります。
ブラウザでARを動かす
参考にしたのはコチラの記事です。
3Dモデル形式を変換
3Dモデル形式をFBXからglTFに変換する必要があるとのこと。
記事ではコード書いてますが、GitHubさえ分からないのでコード書くのは諦めて、FBXからglteに変換するジェネレーターを見つけました。
いくつか試した中で一番よかったのがコチラです。
zipファイルでダウンロードできます。
Ar.js studioで作成
AR.js Studioはオープンソースの WebAR 作成プラットフォームです。
Web 画面からの操作だけで WebAR アプリケーションが作成できます
そのまま GitHub にホスティングすることもできます
ロケーション・ベースとマーカー・ベースに対応しています。
今回はマーカーで動かしたいので、Maker-basedを選択。
マーカーはPhotoshopで作ったものを使用しました。ファイルをアップロード。
アバターは変換したzipファイルをアップロードします。
Downlolad packageを選択してダウンロード。
以下のファイルがはいっています。
ar
├── assets
│ ├── asset.gltf
│ └── marker.patt
└── index.html
1 directory, 3 files
A-Frameの最新化
A-Frame のバージョンを最新化した方がいいとのことで、index.htmlをメモ帳で開いて修正します。
1.0.4 -> 1.6.0 に修正して保存
全ファイルのアップロード
すべてのファイルをサーバにアップロードすると完成です。
4.動作確認
マーカーを表示するデバイスとWebAR 画面を表示するデバイスが必要です。
QRコードをカメラで読み取ります。
カメラをの利用を許可してください。
カメラをマーカーに向けるとアバターが表示されます。
今回はQRコードをマーカーにしています。
アバターの角度を変更できるようにする
アバターがマーカーに垂直にしか表示できなかったので、アバターの角度を変更できるようにしました。
A-FRAMEの rotation の以下のコードをHTMLファイルに追記
<a-entity rotation="-90 0 0 "></a-entity>
追記することで正面向いて走るようになりました。
5.おわりに
ノーコードでARアバターができました！
途中四苦八苦しましたが、こうしてまとめると次から迷わずできそうです。
非エンジニアのみなさんも是非ARアバター作って遊んでみてください！
Discussion