秘密のネタ帳

別に秘密でも何でもない

アイマス人力ボカロメドレー合作振り返り 前編

ニコニコ動画での、所謂ニコマスPの合作にお誘いいただきました。

www.nicovideo.jp https://www.nicovideo.jp/watch/sm42613933

こちらの動画にて、M@STERPIECE の間奏パートの映像で参加させてもらってます。

前置き

今回は、いつもの AfterEffects での制作に加え、Unity での 3D 表現に挑戦しました。

備忘録のため、制作過程をメモします。

ざっくりワークフローと使った/習得した技術

  • blender
  • Unity
    • Visual Effect Graph
    • マテリアル/ライティング
    • ポストプロセス
    • Timeline
    • カメラ制御
    • Recorder による連番テクスチャ出力
  • AfterEffects
    • 連番テクスチャからの動画化
    • 簡単な後付けエフェクト

3D や動画制作経験者の人へ

良いやり方や、ウチはこうやってるよ!があれば教えてください。お手柔らかに。

3D・動画制作の初学者や挑戦してみたい人へ

3D の動画を作るための要素を、駆け足ながら分解して一つ一つ解説しているつもりです。参考になれば幸いです。

3D や動画制作はよくわからんが見に来てくれた人へ

制作過程のスクショ多めに載せてるので、適当に楽しんでいってください。

3D アセット制作

Visual Effect Graph

合作以前から、Unity でのエフェクト表現に興味を持っていました。

AfterEffects で言うところの有料プラグイン TrapCode に匹敵するようなエフェクトを無料で作れる!と思ったのがきっかけでした。

Unityで寿司エフェクトでも作りながらVFXの新機能について語っていきたい - Unityステーション - YouTube

Unity 公式が上げている Sushi Vfx

Visual Effect Graphの新機能で広がる表現 – Unity for Pro

Unity for Pro で紹介されているエフェクト

今回は、後者で紹介されているものを少し改造してベースのエフェクトを作成しました。

Cube のエッジに沿ってパーティクル球を生成

色変えたり

こちらは Vfx Graph という Unity のノードグラフでエフェクトを組む機能に則って作っています。

ノードグラフでの制作も楽しいですが、詳細は割愛。興味がある人はリンクから見てみてください。

これで、メッシュの表面に集まったり離れたりするエフェクトができました。

3D モデル制作

今まで AE で取り組んできた 2D 映像の延長として、立体感を持ったイラストで 2.5次元的表現をしたいと思っていました。

コストや技術的に、3D キャラモデルを踊らせるダンスムービーに手が出せなかった、ということもあります。

そこで、3D 空間でのアクリルスタンド的表現に挑戦しました。

blender でのモデリング

まずは blender でのモデル制作。次の記事を参考に制作しました。

【3D】バーチャルアクリルフィギュアを作ってみよう!|DW164

↑の記事が丁寧に書かれているので、ほとんどその通りでできました。

blender の基礎的な操作は調べつつ慣れました。

ハマりポイント

ドラッグアンドドロップで全選択をしたつもりが、領域内の頂点・面の選択漏れがありました。

D&D だと漏れが発生。密度が高いとそうなるのかも

気付かず作業を進め、テクスチャを貼ったつもりが、スカスカに。

UV埋め込みの抜けによりスカスカに。真美ごめんね

最初はUVが壊れているのかと思い、かなりハマりましたが選択漏れだと気づきました。

Ctrl+L で対象面をすべて選択して解決しました。

背景モデル

自分では作れなかったので mobiusP にお借りしました。本当にありがとうございます。

Unity シェーダー&マテリアル

Unity 空間に生成。先ほど作った Vfx にもメッシュをアサイ

Unity 内にアクリルパネルっぽいものと Vfx を生み出すのに成功しました。

Vfx Graph でメッシュを参照するときは、インポートしたメッシュの Read/Write にチェックを入れる必要がある

ここから、アクリル状の屈折マテリアルと半透明マテリアルについて触れますが、最終的に採用したのは不透明マテリアルです。↑のスクショも不透明マテリアルです。

Vfx と半透明の相性があまりに悪かったためです。

供養と知見のために、検証した半透明マテリアルについても紹介します。

屈折シェーダー

ツインテの根本の背景の星を見れば、屈折の様子がわかる…?

わかりますか、この質感。理想はこれでした。

シェーダー設定

Unity Shader Graph の Surface Type を Transparent, Refraction Model を任意のモデルに設定し IOR に値を入れて屈折を実現しています。

ちなみに屈折無し不透明シェーダーとの比較。

背景が歪まない

言うほどアクリルか?そして半透明問題

半透明マテリアルを少し遠景から。言うほどアクリルか?

遠目で質感がよくわかりません。そして、半透明どうしの前後関係が保たれない大問題が発覚しました。

アクリルの奥・手前に関係なく描画される

後半のシーンで大問題になる

不透明シェーダーの採用

当初目指した質感とは異なりますが、アウトラインが太めな表現も悪くない&エフェクトとの相性が良いということで、不透明を採用しました。

半透明なんて要らんかったんや!

背景制作

MMD 用モデルを Unity に

先述の通り、ステージのモデルを mobiusP にお借りしました。

.pmx と、各種テクスチャファイルをお借りしたため、次のフローで Unity にインポートしました。

  • blender で pmx をインポート
  • blender で fbx としてエクスポート
  • Unity で fbx をインポート

メッシュ形状は問題なくインポートされましたが、マテリアル情報が落ちているようでした。

blender 側のマテリアルを確認すると、

MMDShaderDev

MMDShaderDev という MMD 用のシェーダーが刺さっています。

標準シェーダーなら、FBX 経由で blender のマテリアル情報を Unity に持ってこれるかとは思うのですが、今回はそれができませんでした。

UV 情報は正しくエクスポート・インポートされてあるであろうことと、幸いテクスチャファイルも頂けていたため、Unity で必要分だけマテリアルを作り直してアサインしました。

HDRP/Lit シェーダーでマテリアルを作成

床は Metallic と Smoothness により質感を調整。ライトはエミッシブを設定しました。

ライティング

基本的に以下のシンプルなライティングしかやっていません。

  • サンライト一灯
  • Volume の HDRI Sky (星空、ライティングの寄与は小)
  • 一部のキャラクター毎にスポットライト

カットシーンのライティング、やりだすと考えることが多すぎる。今回は初挑戦なこともあり、キャラとエフェクトを見せるにあたりの最低限を目標にしました。

ポストプロセス + α

Motion Blur

お手軽躍動感

Unity の Motion Blur の設定から、Camera Motion Blur を有効にして、カメラの動きに対しても反応するようにしました。

Screen Space Reflection

キャラの映り込みだけじゃなくライトもちゃんと反映される

床面の映り込みはすべて SSR で表現しています。

たぶん重いだろうなと思いながら、HDRP のグラフィックス設定から SSR を有効化してそれなりの高品質に設定しました。

Reflection Probe を用いたやり方も試しましたが、今回は不採用としました。

【Unity】鏡面反射する床を作成する方法【Reflection Probe】 | テクリエイト

床面の高さが異なるとき(今回で言うとシアター組7名が立っている檀上)に Probe の高さが破綻したからです。

Depth Of Field

被写界深度。重いやつ

その他のポストプロセス

  • Bloom
    • 初期設定に毛が生えた程度のパラメータ調整
  • Exposure
    • Vfx を多発して画面の明るさが頻繁に変わる都合上、自動露出補正をオフ

ソフトパーティクル

ポストではないですがこちらでまとめて説明します。

今回のパーティクル球はスプライトで表現していますが、床やメッシュとの境目で、板ポリがぶっささります。

これを良い感じにフェードするのがソフトパーティクルです。

ソフトパーティクルなし/あり比較

実装にはこちらが非常に参考になりました。理屈を知りたい方もこちらをどうぞ。

🍇 ParticleSystemとの連携(カメラ距離)|Unity ShaderGraph CookBook vol.1【ShaderGraph 入門】

グラフィックスフィーチャーの紹介は以上です。

残りの地味な話 (タイムライン、エンコード、反省&振り返り) を後編に回します。