![見出し画像](https://assets.st-note.com/production/uploads/images/98768689/rectangle_large_type_2_2e4709106a4b5697415aacd98a8b5517.jpeg?width=1200)
Anime Toolboxのあそびかた 第2回
みなさん、Anime Toolbox、どしどし使ってますか?
筆者は、Anime Toolboxの中の、とりわけVisual Compositorが大好きで、いろんな表現の可能性を探っています。
表紙の絵が変わっています。
これは、キャラクターを代えてさらにパワーアップさせたプロジェクトデータを配布する予定だからだったりします。
前回、次回予告的にいろんなエフェクトカットをご紹介すると書きました。
毎回一つずつ丁寧に紹介していきます!。
今回のテーマは、
流背(流線背景)のつくりかた
です。
アクションシーンなどでグオーっと背景で流れているアレです。
![](https://assets.st-note.com/img/1676866997662-dnHswBtYXU.png?width=1200)
複雑な背景処理を必要とせずに前景のキャラクターアクションに集中できるので、非常によく使われてます。
気にしてみてみると、いろんなところで使われているのがわかると思います。
ところが、これ、つくるとなると意外に手数がかかるのですよね。
工程は3つとシンプルです。
テクスチャをつくる
動かす
ループできるようにシームレス化する
え、それだけ?と思いますよね。
2の動かす、はそれ自体は簡単です。
手数は、テクスチャとシームレス化にかかるわけです。
そんな悩みも、Visual Compositorの
CoherentNoiseNodeとPostProcessNodeが簡単に解決してくれます。
やってみましょう!
※今回の作例は、Built-In Render Pipelineでの作業を紹介しています。PostProcessNodeは、これまでBuilt-In Render Pipelineのみの対応でしたが、Anime Toolbox 0.18.1-exp から、HDRPとURPにもPostProcessNodeが追加されました。最後に補足としてBuilt-Inとの違いについて説明をしています。
CoherentNoiseNode
CoherentNoiseNodeを呼び出します。
じゃじゃん!
![](https://assets.st-note.com/img/1676881295378-jrvAdEqHPx.png)
![](https://assets.st-note.com/img/1676881433884-F6OyiN5JBN.png)
ノイズタイプにはFractal、CilindersとSphereがあります。
![](https://assets.st-note.com/img/1676881517643-XtovjFA5nG.png?width=1200)
![](https://assets.st-note.com/img/1676881551210-uN0KRE8M9O.png?width=1200)
どちらも使い勝手が良く、いろんな事が出来そうですよね。
とはいえ、流背ではFractalを使います。
ベースパターンの作成
まずはベースになるパターンを作ります。
初期設定を下記のようにします。
Size:3840×2160
Octaves:4
Scale:24.7
Bias:0.03
Strech X:10
Strech Y:15.9
![](https://assets.st-note.com/img/1676972445811-a7oAO6sJ6E.png)
![](https://assets.st-note.com/img/1676972433518-oHi9IoUCv3.png?width=1200)
試しに、Turbulence Powerをスクラブしてみてください。
Fractalが動き出します。
ピンときた方も多いと思います。
はい、それが正解!
PlayableDirectorNodeでベースパターンを動かす
TurbulenceのPortを開けて、PlayableDirectorNodeをつなげて自動で動かしちゃいましょう。
![](https://assets.st-note.com/img/1676884263547-GcOi9brIZZ.png?width=1200)
軽くブラーを掛けて柔らかくします。
![](https://assets.st-note.com/img/1676971872748-WYoiladQwT.png)
![](https://assets.st-note.com/img/1676972334296-J1GX5VxMBL.png?width=1200)
タッチ(味付け)を付けていく
ここから、味付けとして、違うタッチのパターンを重ねて行きましょう。
![](https://assets.st-note.com/img/1676971997995-esZ8s3GoSJ.png)
![](https://assets.st-note.com/img/1676972027804-0Ybe15AgUX.png?width=1200)
BlendNodeを使って、タッチ1をベースパターンにAddします。
![](https://assets.st-note.com/img/1676972135002-3DqPlWxIdN.png?width=1200)
![](https://assets.st-note.com/img/1676972280507-iWT4kS6Q6o.png?width=1200)
タッチ2、3を重ねる
同じような流れで、タッチ2と3を重ねていきましょう。
まずはタッチ2。
![](https://assets.st-note.com/img/1676981884083-zQ8tulsNHl.png)
![](https://assets.st-note.com/img/1676981919872-YTCPBL7n0Y.png?width=1200)
![](https://assets.st-note.com/img/1676981991649-bttLWJodrL.png?width=1200)
複雑で特徴的になってきました。
つづけてタッチ3を重ねていきましょう。
![](https://assets.st-note.com/img/1676982128531-PAOsWAXWbm.png)
![](https://assets.st-note.com/img/1676982181020-uF4l8fM4vQ.png?width=1200)
![](https://assets.st-note.com/img/1676982269102-Pv7Asmg9g1.png?width=1200)
非常に複雑で味わい深い現代アートのような様相を呈して参りましたね。
さぁ、ここからは色づけになりますよ!
PostProcessNode
エフェクトなら任せて!の便利ノード。
このノードに接続した映像にポストプロセスのエフェクトを掛けることが出来ます。
ざっとこういったエフェクトが揃っています。
![](https://assets.st-note.com/img/1676988020724-4cxxcFNc1k.png)
Post-processing Profile
先ずは、プロジェクトウインドウで、
右クリック → Create → Post-Processing Profile
として「プロファイル」を作成します。
![](https://assets.st-note.com/img/1676988183302-Yl7qGw11yf.png)
出来たプロファイルをクリックして、インスペクタウインドウに表示させます。
最初は何もありません。
![](https://assets.st-note.com/img/1676988303232-UpJis5pSmg.png)
Add Effect
そこで、Add Effectから必要なものを足していきます。
通常、このあとの作業では作ったものを複製していきますので、Effectは全部入れてしまいましょう。
![](https://assets.st-note.com/img/1676988020724-4cxxcFNc1k.png)
![](https://assets.st-note.com/img/1676988557280-6WGPysa44x.png)
次に、VisualCompositor WindowでPostProcessNodeを追加して、流背の素材を接続します。
Sizeは3840×2160を入れるのを忘れないでおきましょう。
![](https://assets.st-note.com/img/1676988946079-R6ilJ2hqHV.png?width=1200)
![](https://assets.st-note.com/img/1677031316532-hypiFkQAm3.png?width=1200)
Post Process Profileのチェックボックスにチェックを入れて、さっきつくったプロファイルをアタッチします。
![](https://assets.st-note.com/img/1677031272071-XQqxUWgrg7.png)
では、New Post-Processing Profileを選択して、Inspector上でパラメーターを調整していきましょう。
目標はこちら。
![](https://assets.st-note.com/img/1677034892189-kJeK9TVBXq.png?width=1200)
エフェクト調整
必要なEffectは「Color Grading」と「Bloom」ですのでほかは全部ディアクティブにしちゃいましょう。
![](https://assets.st-note.com/img/1677036272466-RypO0Thnx4.png)
それぞれのエフェクトでやっていることは、
Color Grading
コントラスト、ベースカラー、中間色、ハイカラーの調整。
Bloom
ちょっとまぶしい感じを出す
です。
細かい調整はあとからいくらでも出来るのですが、コントラストは後から変えると色が変化してしまうので、最初に行います。
Color Grading
Color Gradingでは、かの有名なTrackballsを使います。
![](https://assets.st-note.com/img/1677037461434-E6JNiwivLF.png)
Liftで暗い部分を締めて青を足します。
![](https://assets.st-note.com/img/1677037442449-4radynMRXU.png)
![](https://assets.st-note.com/img/1677037530307-ZAgXVfsF1t.png?width=1200)
次はGainを調整。これも同じような青を入れます。
![](https://assets.st-note.com/img/1677037663365-ACu6MIBiMx.png)
![](https://assets.st-note.com/img/1677037694816-hDxVuNqVvY.png?width=1200)
明るさは、Bloomが担当するのでいじりません。
下手にいじるとBloomの時にギラギラしすぎて困ることになります(笑)。
コントラストと基本の色使いがきまったので、次に行きます。
Gammaに関しては、他の色と同系色且つ明るめのものを入れると雰囲気がまとまりやすくなります。
ここではシアンを足していきます。
![](https://assets.st-note.com/img/1677037981507-qbIfpeZqfF.png)
![](https://assets.st-note.com/img/1677038033061-ohxFPwGJLk.png?width=1200)
いよいよ仕上げです。
Bloom
Bloomで明るさを足しちゃいます。
![](https://assets.st-note.com/img/1677036612288-TOoGfUzqwi.png)
Intensityは眩しさの度合い、Thresholdは日本語でしきい値の意で、入力映像のどの輝度レベルから効果が効いてくるかを指定するものです。
はい、キラリーン!
![](https://assets.st-note.com/img/1677040615753-bdMhhShbp3.png?width=1200)
必要に応じて、BlurNodeでなじませるのもアリです。
いかがでしょうか。
なかなか手数は掛かりますが、タッチの付け方を工夫することで、バリエーションは無限大です。
余談ですが、
「もっと簡単に作りたいよ!」
という方向けのレシピがあったりします。
それは、CoherentNoiseNodeのGradientを使う方法です。
CoherentNoiseNodeのGradient
CoherentNoiseNode
![](https://assets.st-note.com/img/1677041332486-XG2CXfpeau.png)
![](https://assets.st-note.com/img/1677041460662-DTNLiGx0pr.png)
![](https://assets.st-note.com/img/1677042002218-E5mf2kHPQ7.png?width=1200)
![](https://assets.st-note.com/img/1677042049039-Wx6jhATE2Y.png?width=1200)
ササッとつくれるちゃいます。
ですが、タッチを重ねていったものと比べると、淡泊ですよね。
そうしたカスタマイズ性が要らない用途で、便利技として覚えておいてもらえれば幸いです。
ではでは、また次回!
補足 HDRPとURP
・Anime Toolbox 0.18.1-exp から、HDRPとURPにもPostprocessingノードが追加されました。
・HDRPとURPに関しては、Volume方式のPostProcessingを使ってもらえば、同じようにポスプロをかけることができます。
ここでは、より設定に悩みやすいHDRPの例を挙げますね。
ゲームオブジェクトに「Volume」というコンポーネントをアタッチします。
![](https://assets.st-note.com/img/1677157556623-NqzOEOH9mI.png)
ProfileのNewを押して新しいProfileを作ります。それが個別のエフェクトの組み合わせを管理するものになります。
Postprocess_Volumeという名前にしました。
![](https://assets.st-note.com/img/1677157717368-aO6PGZOTf9.png)
これをPostProcessNodeにアタッチします。
![](https://assets.st-note.com/img/1677159681521-TRl1P65QJs.png?width=1200)
![](https://assets.st-note.com/img/1677159701698-dXRsY3HkSV.png)
Postprocess_VolumeをクリックしてInspectorに表示し直し、Add OverrideでPostEffectを付けていきます。
![](https://assets.st-note.com/img/1677158083677-IXA2QWYxix.png)
![](https://assets.st-note.com/img/1677158121935-PeNX9KDJTq.png)
![](https://assets.st-note.com/img/1677158153150-jvfMt12L9D.png)
![](https://assets.st-note.com/img/1677158183319-RZGoecZwxJ.png)
![](https://assets.st-note.com/img/1677158334770-dAsvx3drux.png)
![](https://assets.st-note.com/img/1677160044678-Nr0paAuf7r.png?width=1200)
![](https://assets.st-note.com/img/1677160468955-wvki6shw57.png?width=1200)
![](https://assets.st-note.com/img/1677160515462-RjhwJglA59.png)