ShaderGraphで作るセル調爆発エフェクト
はじめに
こんにちは！G2 StudiosエフェクトデザイナーのH.Oです。
今回はプロジェクト外で制作したセル調爆発エフェクトをご紹介いたします。個人的に完全セル調エフェクト経験というものが少なく、来るべきその時に備えて練習のつもりでShaderGraphで制作したものです。
実現させたいこと
まずどのようなルックを目指すのか、実現させたい要件をざっくり上げてみました。
・セルルックの階調のある爆発表現
・ShaderGraphでシェーダーを作成する
・なんとなくブレス オブ ザ ワイルドのようなルックかな、という漠然としたスタート
・炎や煙の消滅はディゾルブで表現する
・汎用的に幅広く使用できる爆発シェーダーを目指す
まず2Dでやってみた
汎用性の高いシェーダーにしたいのですが、「煙、炎部分を2Dか3Dメッシュでやるか、どちらの方が楽にできるか。」先入観にとらわれずに、そんなところからのスタートです。まずはやってみようの精神で2Dから試してみることにしました。
さっそくですが、その結果がこちらです。
オレンジの炎から黒い煙への切り替わりはパーティクルのCustomDataのカーブで制御できるようにしました。
テクスチャは煙部分用、発光部分用、ディゾルブ用とRGBチャンネルごとにわけています。ノーマルマップで歪みも入れてみました。
当たり前ですが、2Dだとテクスチャに依存する部分が大きく、バリエーションを用意しようとするとテクスチャを作成するのに多くの労力が必要です。テクスチャも手描き、3Dメッシュでベースを作成しそれを加工する等いくつかの方法を試しましたが、満足のいく結果が得られませんでしたし、どれもカロリー高めでした。
これ以上ここに労力を費やしても良い結果は得られないと判断し、結果2Dは早々に撤退して3Dに切り替えることにしました。
3Dに切り替えた
3Dメッシュで作成するにあたり、UNREAL FEST EAST 2019での『DAEMON X MACHINA』のセッション動画がとても参考になりました。DAEMON X MACHINAはUE4で作成されたものですが、爆発を作成する上でのビジュアル面やシェーダー設計の考え方の部分で参考にさせていただきました。
こちらが3Dメッシュバージョンです。途中経過ですが、さっそくしっくりきました。自分が目指していた方向は完全にこちらでした。
まず炎、煙メッシュはBlenderで作成しました。Blenderだとモデファイア2つで下の画像のようなメッシュまで到達するのでとても楽です。
①IcoSphereメッシュを作成する。
②Subdivisionモデファイアでメッシュを分割する。
③DisplaceモデファイアのTextureTypeをVoronoiにしてパラメータを調整する。
ShaderGraphでライトからシャドウの方向をとれるようにしています。CustomFunctionノードを使用してhlslコードを挿入しました。
シェーダーはまず2階調のセルシェーダー部分を作成し、Fresnelでリムライトを表現できるようにしています。ディゾルブはGradientNoiseを使用してメッシュを削っています。メインとなる炎、煙にこちらのシェーダーを使用しています。
シェーダーでプロパティ化したパラメータをインスペクターで調整できるようにしています。
MainColor:メイン部分のカラー（HDR）
ShadowSize:シャドウ部分のサイズ
ShadowBlend:シャドウの境界のぼかし
ShadowColor:シャドウ部分のカラー
RimLightSize:リムライト部分のサイズ
RimLightBlend:リムライトの境界のぼかし
RimColor:リムライトのカラー
DissolveU:ScrollSpeed:ディゾルブU方向スクロールスピード
DissolveV:ScrollSpeed:ディゾルブV方向スクロールスピード
DissolveTiling:ディゾルブノイズのタイリング
DissolveEdge1:ディゾルブノイズのしきい値（最小値）
DissolveEdge2:ディゾルブノイズのしきい値（最大値）
パーティクルのCustomVertexStreamsでTEXCOORDを使用してシェーダーに渡すUV情報を定義しています。ディゾルブのアニメーションはこちらのカーブで制御できるようにしました。
最終結果
テイストを合わせたいろんな要素をプラスして最終的にこうなりました。マテリアルのパラメータでルック面の調整をできるようになりましたし、メッシュのバリエーションを作るのもとても楽です。制作当初に上げたいくつかの条件を満たす作りにできたと思います。
いくつかのシェーダーを作成しましたが、リング状部分や火の粉のシェーダーです。炎、煙部分と同じくGradientNoiseを使用したディゾルブで消滅させるようにしています。
プロパティ化したパラメータはこのようになっています。
地面で爆発するバージョンも制作してみました。
終わりに
ShaderGraphが導入されてから、シェーダーがデザイナーにとって身近な存在になりました。特にエフェクトデザイナーにとっては今後必須のスキルと言えるかもしれません。リリースするプロジェクトで実際にそれを利用するかどうかは別として、シェーダーでどのような処理をしているのか理解を深めておくと良いでしょう。最初はよくわからなくても数学の公式のように「このパターンはこの公式だ」と暗記しておくだけでもいいと思っています。続けていくと必ず点と点がつながる瞬間があります。弊社では今盛んにShaderGraph勉強会が開催されていて、学ぶことができる環境は整っています。来るべきそのときに備えて準備をしていこうと思います。
最後まで読んでいただきありがとうございました。
▼関連求人はこちら
▼G2 Studiosの中途採用情報はこちら
▼G2 Studiosの最新情報はTwitterをご確認ください