【Unity】3Dミュージックビデオ「clapclap」制作に使用したアセットまとめ

こんにちはっ🌟八ツ橋まろんです

バーチャルYouTuberとして活動し、ミュージックビデオ(MV)の制作をしています。

先日、バーチャルYouTuberの六葉ミカさんのオリジナル楽曲[「**clapclap**」](https://www.youtube.com/watch?v=6_gbAGRfcHA&feature=youtu.be)のMV制作を担当しました。


このMVは動画編集ソフトによるエフェクト追加をせず、全てUnity上で制作しています。
本記事では、このMV制作に使用したUnityアセットやオリジナルのスクリプトを紹介します。

#ビジュアル関連
###[unity-audio-spectrum](https://github.com/keijiro/unity-audio-spectrum)
![anim02329.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/b3cd394a-9114-d25d-3f55-08e9e15d9cab.gif)
**音源のスペクトルを表示するスクリプト。**これがあるだけで音楽感が増してMVに動きがつく。とっても便利。

MVでは円形に配置して背景オブジェクトとして使用した。


###[MaronMotionGraphicsShader](https://maronvtuber.booth.pm/items/1821817) 
![anim02331.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/5ea7431e-604c-7108-9871-6e3299656ce3.gif)
![anim02330.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/04fde2ce-c643-2166-2309-4cb80c31a536.gif)
![anim02332.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/8905dd42-4883-0cf3-9bcd-4c0e8e116819.gif)

**自作の図形描画&アニメーションシェーダー。**〇や△☐、☆や♡を描画したり、図形間を行き来したり、回転やuvスクロールしたりできるので汎用性が高い。Animatorコンポーネントと併用してモーショングラフィックスができるように作った。非常に多彩な表現ができるので便利。

MVでは背景やパーティクルなど、あらゆるところに登場する。

###[MaronOutlineShader](https://maronvtuber.booth.pm/items/1858522)
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/bb84b45f-6ff1-2449-e5e5-83bae11af3df.png)
自作のアウトラインシェーダー。RenderTextureを使う方法により太いアウトラインでも破綻しない。且つ、オブジェクトのシェーダーは一切改造しなくていいのでとても便利。

MVでは間奏部分の2D演出で活躍した。アウトラインと言ってはいるが、実は上の画像の灰色の影もこれで作っている。技術解説のQiitaの記事は[**こちら**](https://qiita.com/Maron_Vtuber/items/dac8f07f80b88aa6378d)

###PostProcesing Stack V2
![vthf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/820eab77-8c92-363e-6341-4c73c84913e0.png)

Package Managerからインストールするアセット。これがある場合とない場合の見た目の違いは、上の画像を見てもらえれば一目瞭然。『盛る』って大事だね。

MVでは特にVignetteとDepth of FieldとColorGradingを使用した。

#モーション関連
###[VR Motion Recorder](https://www.pixiv.net/fanbox/creator/16717003/post/643893)
![無題1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/ee2216b8-1126-c05f-ee01-8ae9e1439a6a.png)
**HTC Vive と Viveトラッカー3個使って、VR空間でのフルトラッキングのモーション収録環境が構築できるunitypackage。**別途Final IKの購入が必要なので注意。トラッカーなしでも動く(その代わり脚は自動のIK)。説明書はVive用だが、Oculus Riftでも動く。動いたモーションをそのままUnityのアニメーションファイルとして書き出すことができ、必要であればそのままキーフレームの削減もしてくれる。

MVではダンスのモーションを全てこれで収録し、次のU Motion Proでモーション修正を行った。


###[U Motion Pro](https://assetstore.unity.com/packages/tools/animation/umotion-pro-animation-editor-95991)
![無題2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/19bd8e65-98c9-28d6-7879-42937da396a8.png)
**モーション修正に使える強力なアセット。**日本語の解説記事は少ないが、使いこなせればワンランク以上高いクオリティに手が届く。主要な使い方は公式のビデオを参考にすると良い。

MVではダンスモーションの修正と、固定ポーズの作成を行った。

#カメラワーク関連
###Cinemachine
Package Managerからインストールするアセット。CinemachineのVirtual Cameraを大量に作成してTimeline上に並べて重ねることで、カメラワークを作成できる。

MVのカメラワークの大半はCinemachineのVirtual CameraをTimelineで混ぜ合わせて作成した。
![無題re2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/0382713b-f434-0471-98db-ea2bb086d10a.png)

サビの一部に使用した素早い動きのカメラワークは、Animatorを付与したVirtual CameraをTimelineで直接キーフレームアニメーションさせて作成した。
![無題red2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/478685/028e218e-4794-3c40-3eff-13ed1af8a779.png)


###[PostProcessController](https://qiita.com/Maron_Vtuber/items/a60310779d0b790034a4)
PostProcessing Stack V2のパラメータをTimelineで操作したいために作成した自作スクリプト。カメラを動かしながら被写界深度の距離を変えたいときに重宝した。(実はPostProcessing Stack V2のパラメータはTimeline上で直接変更できないのでこのスクリプトが必要だった。技術記事は[**こちら**](https://qiita.com/Maron_Vtuber/items/a60310779d0b790034a4))

以上、アセット紹介でした💡

MVたくさん見てくれると嬉しいです✨
いつか実際の作成手順やテンプレートなんかを作って解説記事を作りたいなと思っています。それではまたね💕

[**八ツ橋まろん**](https://twitter.com/Maron_Vtuber)