こんにちは、「Experience×Technology(体験×技術)」の春川です。
今回は「Plask」という、撮影した動画を3Dアニメーションに変換してくれるサービスを実際に試してみました！

ちなみに私はディレクターなので「非エンジニア」です…。
参考記事を頼りにどこまでやれるか頑張ってみたいと思います！

1.スマホで撮影

まずはスマホで何かしらが動いている動画を撮影します。
今回は子供に参考記事を見せながら「こんな感じの実験したいからフラダンス踊って〜」と頼んでみました。
「え〜いいよ〜」と満更でもない様子。

2.Plaskにmp4取り込み

まずは「Plask」にアクセスし、アカウントを作成します。
続いて、以下のダッシュボードにある「My project」のサムネをクリック。

何もない画面が出てくるので、左上の「Import」から「Import video file」をクリック。

撮影した動画をmp4形式でアップロード。
（直接カメラを起動して撮影も可能ですが、現在スマホは対応していません）

右の「Extract」ボタンをクリック。
（動画が長すぎると追加料金がかかるようなので、アラートが出たら適宜長さを調整）

編集画面に戻ると左側の「Library」に書き出したモーションが追加されているので、好きな3Dモデルにドラッグ。
その3Dモデルを右側の3Dビューにドラッグ＆ドロップ。

下にある再生ボタンを押すとキャラクターが踊ります！
ちょっとぎこちないけどいい感じ！

問題なければ3Dモデル（今回であればNaye.glb）を選択した状態で、左上の「Export」をクリック、fbxをダウンロード。

3.Unityに取り込む

フラッグでアプリを作る際はUnityを使用することが多いので、ひとまずUnityに取り込めるか実験します！
※Unityのバージョンは2021.3.15f1

まずはUnityを起動して新規プロジェクトを作成し、先ほどダウンロードしたfbxを取り込みます。

このままだとテクスチャが無く、真っ白なので、テクスチャを読み込みます。
「プロジェクト」タブの方の3Dモデルをクリックし、「インスペクター」タブの「Materials」の「テクスチャを抽出」をクリック。
フォルダ選択画面が出るので、適当な場所を選択して「Choose」をクリック。

テクスチャが反映されました！次はこの子を踊らせるぞ〜！

今度は左側の「ヒエラルキー」タブの方の3Dモデルをクリックし、「インスペクター」タブで「コンポーネントの追加」をクリック。
「Animation」と「Animator」を追加。

「Animation」は「アニメーション」の入力欄をクリックすると選択肢が出てくるので、緑の三角アイコンを選択。

「Animator」は「プロジェクト」タブの方の3Dモデルのアイコンクリックで素材を開き、アニメーションの緑三角アイコンを「ヒエラルキー」タブの方の3Dモデルへドラッグ。
そうすると「Animator」の「コントローラー」に設定が追加されます。

いよいよプレビュー画面で確認したいと思います！
プレビュー画面の右上の３点アイコンをクリックし、「アニメーション」タブを追加。

左側の「プロジェクト」タブの3Dモデルをクリックすると、細かいアニメーション設定が表示されます。これでアニメーションの紐付けは大丈夫そう！

「シーン」タブに戻って、再生アイコンをクリックするとプレビューでダンスが確認できます。できた〜！

ここまでくると無音なのが寂しい…。
音がつけられるか挑戦してみます！

4.Unityで音をつける

せっかくなので音をつけたい！ということで、もう少し頑張ってみます。
撮影した動画ファイルから音声を切り出してmp3で保存。
（Adobeの力を借りてトリミング＆書き出しをしました）

そのmp3を「プロジェクト」タブにドラッグ。
左側の「ヒエラルキー」タブで3Dモデルを選択し、右側の「インスペクター」タブで「コンポーネント」追加から「Audio Source」を選択。
「オーディオクリップ」に先ほどの「プロジェクト」タブに入れたmp3をドラッグします。

プレビューで再生するといい感じに音楽とダンスが再生されました！！
著作権の関係上こちらにはアップしませんが…いい感じです！！

今回踊っている曲はNa Leoさんの「Do the Hula」です。
可愛い曲なのでぜひ聴いてみてください！

おわりに

「非エンジニア」の私ですが、色々と途中でUnityの操作につまずきつつ、ここまで3時間くらいでできました！

例えばAR/VRアプリにちょこっとしたアニメーションをつけたキャラを配置したい、みたいな時に、通常だとCG作成からアニメーションまでCGデザイナーさん・エンジニアさんが作ることが多いと思います。
そんな時に、私みたいなエンジニア以外のメンバーで動画撮影からfbx作成まで分担できると、よりスピーディに制作ができてよいかもしれません。

これからも新しい技術を調査しつつ「やってみた」を投稿できればと思います！お楽しみに！

参考：
【Plask】AIが動画から3Dモーションを作成してくれるサービスの紹介と、それをUnityで使用する方法
Unity＋Oculus＋MMD　とりあえず書き留めておく場所

X（旧Twitter）

このnoteとも連携して発信していくので、興味のある方はフォローよろしくお願いいたします！

Experience×Technology(体験×技術)

面白い海外事例の紹介、今までの実績を振り返りながらの裏話、個性あふれるスタッフたちによるチャレンジ企画やインタビューなど、みなさんが楽しみながらExperience×Technologyの世界に触れていただけるコンテンツを発信していきます。