ビビデバの踊り方

# はじめに

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/8ZP5eqm4JqM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

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

https://twitter.com/segur_vita/status/1772217363699843106

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

https://twitter.com/hacha/status/1773274766700380243

https://gallery.styly.cc/scene/5fc07206-8908-4dea-9adb-674e3327423e

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

# モデルデータを作る

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

## まずは写真を撮る

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

![IMG_7106.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/6578428a-aa43-56cb-fdb2-625445659776.jpeg)

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

![RPReplay_Final1711709573.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/d6bb20d7-4782-c49c-594f-a8951d90f73b.gif)

![IMG_7114.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/3003d4db-7447-7801-9403-993bd235dfd6.png)

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

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

![スクリーンショット 2024-03-29 22.16.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/9838f950-4df6-909f-7d4b-902741d6e1e3.png)

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

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

## リグを入れる

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

![スクリーンショット 2024-03-29 22.25.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/aab456a8-8548-08f7-e562-967e5ea981f2.png)

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

![画面収録 2024-03-29 22.42.11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/00f64d21-ab96-7bcb-7733-008ec72237ba.gif)

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

![スクリーンショット 2024-03-29 22.33.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/817c350c-99c4-7836-67eb-277a384e9c71.png)

# Unity編

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

## テクスチャの適用

![スクリーンショット 2024-03-29 23.06.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/529d675a-fa68-c48a-bd30-19eda64885d8.png)

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

![スクリーンショット 2024-03-29 22.43.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/8adb0e7b-43f2-be9d-0f81-895d321e8a61.png)

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

![スクリーンショット 2024-03-29 23.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/6e4a819d-bc98-d7fd-d0bf-e8c65b1379a8.png)

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

## Shader変更

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

![スクリーンショット 2024-03-29 22.44.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/e21863df-16d0-763a-5dde-c29c29275fb1.png)

![スクリーンショット 2024-03-29 23.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/ba9772ac-21f6-4048-928c-cb5867200572.png)

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


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

![スクリーンショット 2024-03-29 23.19.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/b3148ca8-9032-942b-17e9-0f8358c0afca.png)

## モーションを設定する

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

![スクリーンショット 2024-03-29 23.22.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/85eace9d-2eed-ffb5-089d-fb4812621b95.png)

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

![スクリーンショット 2024-03-29 23.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/5ce000b1-5da6-e674-594f-ec34b8e2cef9.png)

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

![スクリーンショット 2024-03-29 23.25.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/9016b9f8-c1e2-dac1-33c8-c961ca4b146c.png)

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

![スクリーンショット 2024-03-29 23.27.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/ffe78da9-af7e-6581-e53f-d58321346525.png)

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

![スクリーンショット 2024-03-29 23.35.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/a55d47f2-6da6-7dd0-4f18-081ae2a1b7fe.png)

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

![スクリーンショット 2024-03-29 23.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/7abe3ff9-d3d5-5874-a0f5-6abd898f769b.png)

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

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

![スクリーンショット 2024-03-29 23.38.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/4249c50c-e209-7be8-9d70-d01d6e61e8c0.png)

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

![スクリーンショット 2024-03-29 23.45.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/b1408308-5184-bc05-09f7-ef23ca424c91.png)

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

![画面収録 2024-03-29 23.42.43 (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/b441a8b2-e154-8e0c-b9d5-52e4eb5d3fef.gif)

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

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

![スクリーンショット 2024-03-30 0.28.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/d6524f71-b445-a000-75db-c8f06acb67ba.png)

## 顔を取り戻す

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

とりあえずさっき撮った全身画像から、頭部だけ切り抜いた画像をexportします。
![スクリーンショット 2024-03-29 23.52.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/d5e60172-d3e6-d664-be92-e45ac1c6552d.png)

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

![スクリーンショット 2024-03-30 0.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/db583f9b-4719-021f-7091-116fe200e079.png)

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

![スクリーンショット 2024-03-30 0.11.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/3421376e-590f-6987-95df-64afdfb68e57.png)

# STYLY編

まずは[STYLY Plugin for Unity](https://styly.cc/ja/download/)を入れましょう。
あ、その前にSTYLYアカウントが必要なので無ければまずは[作りましょう](https://gallery.styly.cc/signup)。
Pluginをimportすると、メニューバーにSTYLYが追加されます。

![スクリーンショット 2024-03-30 0.15.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/babf57e3-e381-49cd-0543-e057a752dc49.png)

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

![スクリーンショット 2024-03-30 0.15.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/54caa5dc-13db-c217-0dce-17f28201b107.png)

自分のアカウント情報を入れます。
API Keyは[ここ](https://gallery.styly.cc/settings/account)で確認できるはず。

![スクリーンショット 2024-03-30 0.16.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/fa25ee59-c85c-93dc-6bcb-215b11b0dac2.png)

で、Projectビューで先程保存したシーンを右クリックから **STYLY->Upload prefab or scene to STYLY** をします。
完了したら[STYLY STUDIO](https://gallery.styly.cc/studio)へ移動します。
そしてARシーンを作りましょう。

![スクリーンショット 2024-03-30 0.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/6da32b8b-e866-e805-6d9f-0b1dcd029974.png)

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

![スクリーンショット 2024-03-30 0.27.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/5671/23ac6bce-25c4-3e17-a1af-20eaea866eb4.png)

# 実機確認

<iframe width="560" height="315" src="https://www.youtube.com/embed/HEL48QtPkGM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" loading="lazy" allowfullscreen></iframe>

https://gallery.styly.cc/scene/083cf92b-7adc-4b39-9d12-1f2b45578d1f

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

# 総括

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

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

https://www.wantedly.com/projects/1360135

https://www.wantedly.com/projects/1360123