今日からはじめるAnime Toolbox 第3回『Anime Toolboxを使ってみよう！～3Dモデルを2D素材と簡単合成してみよう』
今回のテーマ
Anime Toolboxは、映像制作に必要となる様々な機能を搭載しています。それらの機能をひとつひとつ深掘りしていくのは、もう少し慣れてからにすることにして、まずは軽く触ってみましょう。
前回、用意したAnime_URPプロジェクトを使います。
まずは、シーン内にすでに配置されている、Directional LightとMain Cameraを調整しましょう。
HierarchyウィンドウよりSampleSceneを開くと、それら2つのゲームオブジェクトがあります。
まずは作業するシーンの基本設定をしましょう
HierarchyウィンドウよりDirectional Lightを選択し、LightコンポーネントのColorを「完全な白」にしてしまいます。これは、元々配置されているDirectional Lightは太陽の色を意識しているので、少し黄みがかっているからです。ライトのカラーを白にすることで、ライトカラーに依存しない正しい色を確認できるようになります。
続いて、Main Cameraを選択し、CameraコンポーネントのField of Viewの値を20にします。
次にTimelineを使えるようにしましょう
次は新規Timelineゲームオブジェクトとアセットを作成します。
Hierarchyウィンドウの左上角にある「＋」ボタンをクリックし、Create Emptyを選択します。
するとHierarchyウィンドウの中に「空（から）のGameObject」が生成されますので、これを「Timeline」にリネームします。
「Timeline」ゲームオブジェクトが選択されている状態のままで、右下にあるTimelineウィンドウの中程にある「Create」ボタンをクリックします。
新規に「Timeline.playable」を作成し、保存する場所を聞いてきますので、Scenesフォルダを開き、「保存」ボタンを押しましょう。
すると、Timelineウィンドウ内に新しいTimelineが表示されます。この表示を固定しておきたいので、Timelineウィンドウの左上角にある「ロックアイコン」をクリックして、表示を固定（ロック）してください。
もしロックする前に、Timeline表示が消えてしまった場合には、Hierarchyウィンドウから再びTimelineゲームコンポーネントを選択してください。Timelineウィンドウ内の表示が復活します。
最後にVisual Compositorを使えるようにしましょう
Timelineが準備できたら、今度はコンポジター（Compositor）ゲームオブジェクトとアセットを追加します。コンポジターとは、ビジュアルノード環境で様々な映像加工を行う場所です。
もう一度、Hierarchyウィンドウに「空のゲームオブジェクト」を生成し、今度は「Compositor」とリネームしましょう。
Compositorゲームオブジェクトは、まだ空（から）のゲームオブジェクトのままですから、Inspectorウィンドウを見ても、Transform情報しかありません。ですので、「Add Component」ボタンより機能を追加しましょう。
「Add Component」ボタンを押して出てくるサーチボックスに「compo」と打つと、リストの中に「Visual Compositor」という候補があらわれますので、選択してください。
すると、Inspector表示が以下のように変わります。
右横のスクロールバーを下に下げていくと、「Visual Compositor」という名前のコンポーネントがあらわれます。Visual Compositorコンポーネントが表示されたら、Compositor Graphという項目の左端にある「New」ボタンをクリックします。
すると、新規のCompositorGraphアセットが生成されて、GameビューとVisual Compositorウィンドウ、そしてInspector上のプレビューに見慣れた空と大地が表示されます。これで準備は完了です！
作ったばかりのVisual Compositorをもう少し詳しく見てみましょう
ここで、もう少しVisual CompositorのInspectorと、Visual Compositorウィンドウについてみてみましょう。
Inspector内に表示されている「Visual Compositor Preview」は、右上角の「バーガーメニュー」から「Minimize in Inspector」を選択することで、最小化できます。画面が狭く感じられるようだったら、最小化してしまって構いません。
Inspectorウィンドウのスクロールバーを少し戻すと、Visual Compositorコンポーネントの少し上ぐらいに、「Target Display: Display 8」という表示があります。
これはVisual Compositorを経由した表示をどのターゲットディスプレイに表示するかを設定する項目で、標準では「Display 8」が選択されています。
GameビューのDisplay選択が「Display 8」にセットしてあるのは、これに対応しているからです。
Visual CompositorのInspector表示の中程に、「Resolution」という項目があります。
こちらが、Visual Compositorでの最終的な出力画面サイズとなっています。
もちろん、映像編集の最中には出力サイズよりも大きな素材を扱うこともありますので、各編集用のノードには、必要に応じて自由にノードの解像度を変えられるプロパティが付いています。
最後に、Gameビューと、Visual Compositorウィンドウ内で表示されている「空と大地」を見てみてください。撮っているものは同じなのに、明るさが全然違うような気がしませんか？
これにも理由があります。
Visual Compositorウィンドウ内で「空と大地」を表示しているノードの右下の方に、「1920×1080, R16G16B16A16_SFloat(64 bits)」とありますが、これはVisual Compositor内の画像処理はHDRのリニア画像であることを示しています。つまり、このVisual Compositorウィンドウ内とGameビューでの、同じ映像の見え方の違いは、sRGBでのガンマ補正が映像にかかる前と、かかった後との違いということです。
もし、ガンマ補正をかけた最終画像を確認したい時には、かならずGameビューから確認するようにしてください。
Visual Compositorをさわってみよう！
Anime Toolboxの主力機能のVisual Compositorもさわってみましょう。
今回は、キャラクターとして「ボール君」に出演してもらいましょう。
「ボール君」なら、Unityエディタのプリミティブとして用意されてますので、すぐに登場してもらうことができますしね。Blenderなら猿のスザンヌ君に登場してもらうところです。
今後、UnityとBlenderの連携の仕方も紹介したいと思ってます。お楽しみに！
もちろん、すでにUnityエディタを使い慣れている方は、ここでお手持ちの3Dキャラクターを表示していただいても結構です。
注意としては、現在作業している環境がURPであることです。そのキャラクターのマテリアルがURP向けシェーダー以外のシェーダー向けにセッティングされている場合には、適宜シェーダーを切り替える必要があります。
なお、URP環境でお手持ちの3Dキャラクターを表示する手順は、次回以降で詳しく説明したいと思います。
Hierarchyウィンドウの「＋」ボタンをクリックし、3D Object > Sphere を選択します。
Gameビュー上には、すぐに球体（スフィア）が表示されますので、Hierarchy上で名前を「Ball_kun」と変更し、併せてInspectorウィンドウからPosition Yに「0.5」を入力します。するとボール君がGameビュー内で少し浮かびあがります。
このままでは味気ないので、もう少しオシャレなカラーを載せましょう。
ProjectウィンドウよりAssetsフォルダを開き、Projectウィンドウの左上角にある「＋」ボタンから「Folder」を選択し、新規フォルダを作成します。新しくできたフォルダの名前は、「Materials」とします。
続いて、ProjectウィンドウからMaterialsフォルダをクリックで選択し、右側のなにもないペイン内で右クリックします。するとコンテキストメニューが表示されますので、Create > Material を選択してください。
New Materialが生成されたら、名前を「Toon」に変更します。
ProjectウィンドウでToonを選択したら、InspectorウィンドウのShaderドロップダウンをクリックし、メニューから「Toon」を選択します。Toonは、Unity Toon Shaderのことです。
これでマテリアル「Toon」は、名前だけでなく、機能もトゥーンシェーダーに変わりました。
さっそく「Base Map」「1st Shading Map」「2nd Shading Map」に好きな色を入れて、カラフルにしてみましょう。
併せて、「Shading Step and Feather Settings」で、3色のカラーの塗り分け強度を以下ぐらいにしておきます。
Toonマテリアルが出来たら、Hierarchyウィンドウ内のBall_kunに、Toonマテリアルをドラッグ＆ドロップしてやります。
すると、Gameビューのボール君がカラフルに変わります。
一番最初のグレーのボール君と比べれば、じゅうぶんオシャレになったとはいえ、ボール君だけではやっぱり華がないですね…。
ここでユニティちゃん登場!? （お約束）
そこでAnime Toolboxですから、2D画像も扱ってみましょう。
ユニティちゃんの公式ホームページの「Data Download」より、こんな画像を持ってきました。これらの画像をVisual Compositorで合成してみましょう。
使用するデータを用意してありますので、こちらからダウンロードしてください。
ユニティちゃんは「Unity-Chan! コーゲンシティ・オールスターズ キャラクター立ち絵パック Vol.1」から持ってきました。
これらの画像は、Unityに2Dテクスチャとしてインポートしておきます。家の背景は、sRGBのPNGデータとしてインポートできます。ユニティちゃんの立ち絵は、透過領域を持つPNGデータですので、インポート時に「Alpha is Transparency」をONにしておきます。
共に画像の縦横比をゆがめたくないので、Advanced > Non-Power of 2 のプロパティは、「None」にしておくとよいでしょう。
2D画像を背景として表示してみよう
Visual Compositorウィンドウの何もない背景部分で右クリックし、コンテキストメニューからCreate Nodeを選択します。
Create Nodeウィンドウが現れたら、「Texture2D」というノードを探してください。このノードは、2Dテクスチャを読み込むためのノードです。
Texture2Dノードを表示したら、Textureスロットの右横にあるボタンをクリックしてください。
Select Texture2Dウィンドウが現れますので、用意しておいた2D背景画を読み込んでやります。
もうひとつ、Texture2Dノードを呼び出して、今度はユニティちゃんの立ち絵を表示させます。
ユニティちゃんと背景画像を合成してみよう
次に「Blend」ノードを探します。このノードは2つの画像を合成するためのノードです。
Blendノードを呼び出したら、作業スペースを求めて、少し上のほうに移動しましょう。
何もないところから左ドラッグで矩形選択をすることで、ノードをまとめて選択し、一緒に移動することができます。
「背景」が表示されているTexture2DノードのOutputポートと、BlendノードのBGポートを接続します。同様に「ユニティちゃん」が表示されているTexture2DノードのOutputポートと、BlendノードのInputポートを接続します。ユニティちゃんの素材はαチャンネルを持っているので、Blendノードで合成すると背景の上にユニティちゃんの素材がそのまま乗っかります。
このように、各ノード間を接続したい時には、ノードの右上端にある出力用のポートから、接続先のノードの左上端にある入力用のポートに緑色の線を引っ張っていくことで接続します。この緑色の線を、UnityのVisualエディタ系のインタフェースでは「エッジ」と呼んでいます。エッジは別のアプリでは、「ワイヤー」や「リンク」と呼ばれることもありますが、機能は皆同じです。
この段階で、一度Gameビューに表示してみます。下の方にあるLayersノードをちょっと引き上げます。
BlendノードのOutputポートからエッジを引き出し、ドラッグしながらLayerノードのInputポートに接続します。
すると、それまでのRenderingノードと繋がっていたエッジが切れて、Gameビューに背景の上に合成されたユニティちゃんが表示されました。画像のサイズを調整していないので、ユニティちゃんが見切れていますね。ユニティちゃんを調整することにしましょう。
ユニティちゃんの表示を良い感じに調整しよう
ノードの配置を調整して、画面ぐらいの場所に今度は「Transform」ノードを呼び出します。
Transformノードは、画像をスケールしたり、回転させたり、表示位置を移動させたりするのに使うノードです。
ユニティちゃんが表示されているTexture2Dノードと、Transformノードを接続するとTransformノードの中でユニティちゃんが見切れています。これはVisual Compositorの出力解像度設定が、1920×1080ピクセルだからです。
Texture2Dノードの「Output Size」と、Transformノードの「Size」を合わせてやると、素材の見切れはなくなります。
続いて、TransformノードのOutputポートからエッジを引き出し、BlendノードのInputポートに繋ぎ替えます。ユニティちゃんの素材が、Transformノードを経由してBlendノードに接続されることになります。
接続ができたら、Transformノードの中のプロパティを調整して、ユニティちゃんを良い感じに表示してあげましょう。
今回のユニティちゃん素材の場合でしたら、Scaleを調整して少しサイズを縮小し、Offsetを調整することで表示位置をスライドしてやったら、良い感じで2D背景画像の前に収まりました。
3Dだけど、ボール君も混ざりたい！
最後に、今までほったらかしだった、ボール君もユニティちゃんの側に置いてあげましょう。
ボール君をユニティちゃんと合成するには、いくつか手段がありますが、今度はBlendノードとは別の方法でやってみましょう。
Create Nodeメニューから、今度は「Layer」ノードを呼び出してください。
新規にLayerノードを呼び出すと、それまであったLayerノードの上にドッキングされます。
続いて、Blendノードに繋がっている元からあったLayerノードの緑色のバーをドラッグし、軽く上に引き上げてみてください。
すると2つのLayerノードの上下が入れ替わります。
Layerノードを複数重ねることで、Photoshop的な意味での「レイヤーを重ねる」表現ができます。一方、Layersの中の各Layerノードは下のほうが後で描画されます。
従って、新規作成されたLayerノードを元からあったLayerノードよりも下にすることで、そのLayerノードに繋がれた画像は、「ユニティちゃん＋背景」のレイヤーよりも後に描画されることになります。この辺りはPhotoshopのレイヤーとは並び方が逆ですので、少々注意してください。
続いて新しく追加されたLayerノードのInputポートに、ボール君が表示されているRenderingノードのOutputポートを接続します。
ボール君がGameビューに表示されると、先に描画されるLayerノードに表示されているユニティちゃんは、Gameビュー上では上書きされて消えてしまいます。
ボール君とユニティちゃんを一緒に表示するためには、ボール君の背景を抜いてやる必要があります。
ボール君が表示されているRenderingノードのプロパティを以下のように修正します。
「Clear Flags」をONにして、「Color」にする。
「Background Color」をONにして、Aの値を「0」にする。
すると、Aの値が0に近づくほど、ボール君の背景が抜けていくことが、Gameビュー上で確認できます。
〆に、ボール君にも位置調整用のTransformノードを追加してやり、ユニティちゃんとの馴染みがよいようにToonマテリアルにアウトラインを追加してみました。
なんかユニティちゃんと同じイメージカラーのボール君相手に、ユニティちゃんも楽しそうですね。
ここまでのトラブルシューティング
ボール君の背景が上手く抜けないという人は、Main Cameraのセッティングを確認してみてください。
URPの場合、Cameraコンポーネントの Rendering > Post Processing がONになっていると、上の方法では背景が抜けません。Post ProcessingはOFFにしてください。
またの機会に説明しますが、ポストプロセスの多くはVisual Compositor側のPost Processノードでかけることになります。（HDRPを除きます）
今回のまとめ
今回は、前回用意したUniversal Render Pipeline用のAnime Toolboxプロジェクトを軽く触って、2D絵の背景、2D素材のユニティちゃん、そして3D素材のボール君をVisual Compositor上で合成してみました。
Visual CompositorのTransformノードを使うと、2D画像素材と3Dモデルのレンダリング画像を、簡単にいい感じに配置できることがわかりました。
次回は、3DモデルのSDユニティちゃんをAnime Toolboxに入れてみましょう！ お楽しみに！
この記事が気に入ったらサポートをしてみませんか？