LoginSignup
12
3

More than 3 years have passed since last update.

【ShaderGraph】トゥーンっぽい炎の演出をShaderGraphで作ってみる

Last updated at Posted at 2020-12-09

本記事は「サムザップ #2 Advent Calendar 2020」の12/10の記事です。
昨日の記事は @ozaki_shinya さんの「ScriptableObjectでシステム系クラスを実装する」でした。

はじめに

サムザップ #2 Advent Calendar 2020、2つ目の記事になります。
前回と同様にShaderGraph周りで書いていこうと思います。
今回はトゥーンっぽい炎の演出をShaderGraph使って表現してみようかなと思って作ってみました。

準備

「Universal Render Pipeline(以下、Universal RP)」と「Shader Graph」の導入から行います。

使用したバージョン

今回、使用した環境のバージョン情報は下記になります。

項目 バージョン
Unity Unity2019.4.10f1
Universal RP 7.3.1
Shader Graph 7.3.1

※Universal RPの設定周りの説明は省略します(今回の設定周りは下記記事と一緒です)
【ShaderGraph】Quadで擬似的な3D空間を表現したサンプルを紹介

作成したShaderGraphの紹介

作成したShaderGraphの全体像がこちらになります。
Fire_ShaderGraph.png
量が多いので、番号振った順に紹介していこうと思います。
Fire_ShaderGraph_01.png

1.UV Sample Texture

TimeでNoiseTextureがUVスクロールするように計算します。
UV Sample Texture.png

2.Calculate UV

1の結果を使用して、UV周りの計算をします。
Calculate UV.png

3.mask sample

Mask画像を元にFire側とFire Alpha側のマスクテクスチャ周りの計算をします。
mask sample.png

4.Calucrate fire

2,3の計算結果を使って、炎演出の内側部分の表現を計算して、その結果をUnlit MasterのColorに流します。
Calucrate fire.png

ここまでで、炎演出の内側部分は完成です。残りはAlphaの計算をするだけです。

5.Calculate Alpha

2,3の計算結果を使って、炎演出の外側のゆらめき表現させるための計算して、その結果をUnlit MasterのAlphaに流します。
Calculate Alpha.png
ここでVoronoiTextureを態々用意していますが、Shaderだけで完結できそうなので、これは改修の余地ありです…

今回作成したもの

今回作ったものはこちらになります。
Quadにマテリアル割り当てるとこんな感じです。
demo_fire_quad.gif
で、適当に用意したパーティクルで再生すると…
fire_particle_demo.gif
炎の呼吸 弐ノ型 昇り炎天っ!ってことで、ShaderGraphで炎を出すことができました。
← 流行りに乗っかってやりたかっただけ…w
(タイトルも「ShaderGraph使って炎の呼吸を習得してみる」にしようと思ったけど辞めました…笑)

上にも記載しましたが、VoronoiTextureを態々用意しているのを辞められそうなので、時間があるときに修正してみようかなと思います。

最後に

明日は @mikami_akihisa さんです。

12
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
3