アバターに野球の動きをつけたいよー
のりまきさんアバターに動作をつける
in3Dでアバターを作りました。
このアバターに動きつをつけます。
動きをつけるのは何のソフトが必要なのかをヒアリング。
動きは作るよりもあるものを使った方がよさそうとのこと。
mixamo
adobeのサービスで無料で使用できます。
mixamoに使用する形式のアバターをダウンロード。
FBX形式がいいらしい。
in3DはFBX、GLB、USDZ の3種類のフォーマットがダウンロードできます。
ダウンロードファイルはzipファイルでダウンロード
私はDropboxにアップロード！
のりまきさんmixamoで動かしてみる
ダウンロードしたzipファイルをアップロード！
最初は中のファイルだけUPしてエラー出て慌てましたが、そもそもzipファイル中のファイルそのままだとダメでしたね。
zipそのままアップロードできました！
GIF動画なので画像粗いです。
"baseball"で検索したら、守備の動作がない。審判まであるのに。。。
投手、捕手、審判。
あと一声！！！
作らないとアカンのかなぁ
のりまきさんスマホでARできるように
野球の挙動はひとまずおいといて、ARで表示できるようにしてみることにした。
いつまでもin3D内でいられない。
自分のスマホで見れるようにしたい。
mixamoからアバターと挙動をダウンロード。
今回は走っているアバターをダウンロードしてみることにする。
zipファイルがダウンロードされました！
のりまきさんHIROマーカーで表示できるようにする
参考にさせていただいたのはコチラの記事
AR.js で認識するのには「マーカー画像」と「.patt」ファイルが必要のようです。
なんで必要なのか分からないので、ChatGPTに聞いてみました。
納得。では作っていきましょう！
まずは、オリジナルマーカーを作成していきます。
マーカー画像はオリジナルで作成できるようなので、Photoshopで512×512画像作成してアップロード
確認したら「DOWNLOAD MARKER」で「.patt」ファイルがダウンロードします。
次に「DOWNLOAD IMAGE」で「マーカー画像」がダウンロードします。
まずは準備完了です。
のりまきさんpalan ARを使う
LTでpalanARを教えていただいたので、さっそく使ってみる。
1カ月無料で試せます。
mixamoで作ったrunしてるアバターを使う！
ワクワク！
作りたいARの種類を選択。今回はARマーカーを使います。
マーカーは自分が作成したものを使えるので、上記で作っていたマーカーを使用。
アバターをアップロードしたけど、無色透明・・・なんで？
気を取り直して別のアバターアップロード！
グレイやねんけど、なんで？？
mixamoで作ったアバターのダウンロードのSkinでwith Skinにすると無色透明になるみたい。
よくわからない。誰か助けて。
のりまきさんブラウザでARを動かしてみる
palanARで色がつかないので、自分でがんばるしかない。
参考にしたのはコチラの記事
第一段階は突破
コードコピーしただけだけど。
AR.jsで実現する
前回大いにコケたので、再度チャレンジ。
どこの記事みてもとってもカンタンって書いてるけど、とってもカンタンのハードルはもっと下げてほしいと切に願う。
3Dモデル形式を変換
3Dモデル形式をFBXからglTFに変換する必要があるとのこと。
ジェネレーター見つけました！！
AR.js Studio
オープンソースの WebAR 作成プラットフォーム
Web 画面からの操作だけで WebAR アプリケーションが作成できます
そのまま GitHub にホスティングすることもできます
ロケーション・ベースとマーカー・ベースに対応しています
Maker-basedを選択する
マーカーは以前作ったものを使用。
アバターをアップロード
ぎゃふん。なんで？
ちなみに記事に書いてるイーブイも表示されない。
エラーがでるけどファイル削除しないとアカン？
該当ファイル削除してもアップされないので、仕切り直し！
のりまきさん変換ジェネレーターを変えてみる
何が問題なのかサッパリ分からない。
そしてコードとGitHubとかできるだけ使いたくない私の執念。
FBXからglteに変換するジェネレーターを変更してみた。
出た！！！！！
カラーの私が走ってます！！！
大歓喜！！
Downlolad packageを選択してダウンロード
以下のファイルがはいってます。
index.htmlファイル
asesetsフォルダ
aseet.gltf
marker.patt
A-Frame のバージョンを最新化した方がいいとのことで、
1.0.4 -> 1.6.0 に修正して保存
全部のファイルアップロード
全部のファイルをサーバにUPしたらできました！！
のりまきさん第一段階突破！
QRコードでURL読み取って、マーカー表示！
なんとかできた。うれしい。