LoginSignup
14
9

ビビデバの踊り方

Last updated at Posted at 2024-03-29

はじめに

星街すいせいというVTuberの新曲「ビビデバ」をご存知でしょうか。
実写とロトスコープが混じり合うMVが非常に面白いですね。

なんでも公式からモーションデータが配布されているらしく、同僚が踊ってたんですね。

で、なんか触発されて自分もちょっと踊ってみました。

普段あまり人体モデルやモーションデータを扱うことがないので、何をどうすればいいんだったかなと少し手こずりました。
やってること自体は大したことではないんですが、こういうのは慣れてない・知らないとなかなか難しそうに感じると思います。
せっかくモーションが配布されてるんだし、STYLYへアップロードしてシーンを作るまでの一連の作業を解説しようかなと思います。

モデルデータを作る

冒頭の私のモデルは数年前、会社に全身を撮れるスキャナーがあった際にスキャンしたものです。
ただそういうスキャナーで全身モデルを撮れる機会は、なかなかないと思います。
そこで今回は写真からモデルを生成していきます。

まずは写真を撮る

こんな感じで全身が映るよう写真を撮ってください。

IMG_7106.jpeg

次にそこから全身だけを切り抜きます。
iOS16で写真アプリに実装された切り抜き機能が便利ですね。
Androidユーザーは手作業でうまいことやってください。

RPReplay_Final1711709573.gif

IMG_7114.PNG

画像から3Dモデルを作る

CSMというサービスを使います。
「Image to 3D」と呼ばれる画像から3Dモデルを生成してくれます。AI様が。
基本的にあまりカスタムするような部分もなく、ポチポチやってけばいいと思います。
最後のMesh化の処理は結構時間がかかります。(フリープランだからかも)
2〜3時間はかかったかな。
そして出来上がったのがこれだ!

スクリーンショット 2024-03-29 22.16.26.png

なんていうか、こう、サスペンス・ホラー系の映画に出てましたよね?って感じ。
なんでこうなるんだよっていう気持ちはありますが、再処理するのも時間がかかるので一旦これでいきましょう。
大丈夫です、あとでリカバーします。

これをひとまずobjでDownloadします。
※fbxでもいいはずなんですが、後でUnityに入れた時にテクスチャが貼られてない状態になるんですよね。その解決のために一旦objで。

リグを入れる

作ったモデルデータはそのままでは、ただの置き物みたいなもので人型のモーションを適用できません。
そこでMIXAMOというサービスを使います。
3Dキャラクターアニメーションを作れるツールなんですが、一番の利点は人体モデルのリグを入れることができる点にあります。
先ほどDownloadしたモデルデータをアップロードして、こんな感じでリグを設定していきます。

スクリーンショット 2024-03-29 22.25.26.png

そんでもって適当にゾンビのモーションとかを当ててみます。

画面収録 2024-03-29 22.42.11.gif

う〜ん、なんか足元がくっついちゃってますね。
でもまぁ、こんなクリーチャーには足枷を付けておくべきだろという観点から考えると、これはこれで良しとします。
ではこのモデルをダウンロードします。
何が違うのかはよく分かりませんがFBX for Unityを選択しておきます。

スクリーンショット 2024-03-29 22.33.34.png

Unity編

ではダウンロードしたモデルをUnityに取り込みましょう。
その前に、2024/3/29現在においてはmobile(iOS/Android)向けのSTYLYはUnity 2019.4.40f1で作られています。
そのため使用するバージョンはなるべくこれに合わせておきましょう。

テクスチャの適用

スクリーンショット 2024-03-29 23.06.39.png

おや、何だか期待していたのとは違って石膏像のようになっていますね。
ここで先程CSMからobjとしてダウンロードしたzipを解凍します。

スクリーンショット 2024-03-29 22.43.48.png

その中にテクスチャがあるので、これをfbxをインポートしたのと同じディレクトリに持ってきましょう。

スクリーンショット 2024-03-29 23.10.04.png

無事にテクスチャが貼られましたね。
なんでこうなるのかは正直よく分からんので、詳しい人が補足解説してくれると嬉しいです。
こういうのはCSMに限らず、他のサービスを使っていてもよくあります。

Shader変更

ついでにmaterialをExtractして、shaderをUnlit/Textureにしておきます。

スクリーンショット 2024-03-29 22.44.19.png

スクリーンショット 2024-03-29 23.13.43.png

まぁ、この工程はやってもやらなくてもどちらでもいいです。好み。
LiDARとかフォトグラメトリでスキャンしたモデルとかって、どうしても撮影した際のライティングがテクスチャに反映されてしまっているので、いっそライティングの効果を受けないUnlit系のshaderにしておくと無難な見え方になるんですよね。
まぁ高精度モデルで良い感じにライティングして馴染ませる、みたいなところまでやるつもりがなければとりあえずUnlit/Textureで良いんじゃないかと。

あとついでにfbxアセットを選択してInspectorからRigのAnimationTypeをHumanoidにしておきましょう。

スクリーンショット 2024-03-29 23.19.29.png

モーションを設定する

さて、以上の設定をしたアセットをシーンに置いてみるとこうなります。

スクリーンショット 2024-03-29 23.22.59.png

うん、確実にFPSゲームの敵キャラですね。
ではこいつに対してAdd ComponentでAnimatorを追加します。

スクリーンショット 2024-03-29 23.18.36.png

次にTimelineアセットを作成します。
ProjectViewで右クリックからCreate->Timelineです。

スクリーンショット 2024-03-29 23.25.51.png

で、作ったTimelineアセットをHierarchyビューにドロップします。
そうすると勝手にPlayableDirectorが付いたGameObjectが生成されます。

スクリーンショット 2024-03-29 23.27.00.png

TimelineビューでAnimationTrackを作成します。

スクリーンショット 2024-03-29 23.35.10.png

で、ここに先ほどAnimatorを追加したGameObjectをDrag&Dropします。

スクリーンショット 2024-03-29 23.36.11.png

ビビデバのモーションを当てる

さて、ここでビビデバの配布されてるモーションデータを取り込みましょう。
データはYoutubeの概要欄にリンクがあります。
suisei_vivideba_motion_.fbxを見ると、こんな感じになっていますね。
で、この真ん中のsuisei_motion|suisei_motionってやつを

スクリーンショット 2024-03-29 23.38.28.png

先程のTimelineビューに放り込んでやると

スクリーンショット 2024-03-29 23.45.01.png

こんな感じになる。
そして再生するとこうなる。

画面収録 2024-03-29 23.42.43 (1).gif

音楽も付けたければ、適当に落としてきてうまい部分カットした音声ファイルを、同じようにTimelineに放り込んで位置合わせすれば良い。

ここまでできたシーンを保存しましょう。
あ、最終的にAR表示するつもりなので、メニューのWindow->Rendering->Light Settingsから、Skybox MaterialをNoneにしておきましょう。
あと、なんかスケールが小さかったので適当なサイズに調整しました。

スクリーンショット 2024-03-30 0.28.13.png

顔を取り戻す

このまま顔が潰れたままでは人間様の面子が立たない。
なんとかしましょう。

とりあえずさっき撮った全身画像から、頭部だけ切り抜いた画像をexportします。
スクリーンショット 2024-03-29 23.52.47.png

そいつをUnityにimportしてこうやってUnlit/Transparent Cutoutなmaterialに挿して

スクリーンショット 2024-03-30 0.10.13.png

そんでもって、こう!
この階層にQuad追加して、うまい位置に合わせる。

スクリーンショット 2024-03-30 0.11.08.png

STYLY編

まずはSTYLY Plugin for Unityを入れましょう。
あ、その前にSTYLYアカウントが必要なので無ければまずは作りましょう
Pluginをimportすると、メニューバーにSTYLYが追加されます。

スクリーンショット 2024-03-30 0.15.14.png

ここからAsset Uploader Settingsを選択すると、こんなダイアログが出るので

スクリーンショット 2024-03-30 0.15.35.png

自分のアカウント情報を入れます。
API Keyはここで確認できるはず。

スクリーンショット 2024-03-30 0.16.27.png

で、Projectビューで先程保存したシーンを右クリックから STYLY->Upload prefab or scene to STYLY をします。
完了したらSTYLY STUDIOへ移動します。
そしてARシーンを作りましょう。

スクリーンショット 2024-03-30 0.26.44.png

My uploadsから先程アップロードしたアセットを選択したら完成!

スクリーンショット 2024-03-30 0.27.11.png

実機確認

うんうん、ちゃんと思った通りの感じになりましたね。
ちなみに深夜の住宅街ともなると、外灯はあれど目に見えて平面検知能力が落ちるぐらいには暗いですね。

総括

どうせ阿呆なら踊らにゃ損!

宣伝

STYLYではUnityエンジニア・サーバーサイドエンジニアを募集しています!!
ご応募お待ちしています!!

14
9
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9