my funeral week

少しでも日々の生活に変化を。

Unity_ShaderGraph:超簡単煙シェーダー

こんにちは。
ここ数日間、Unityの ShaderGraphというノードベースでお手軽にシェーダーを作成できるエディター にハマっております。

シェーダーに関する知識は皆無な私ですが・・・それでもある程度は触れるくらいにはなりました。

とは言っても、そもそものシェーダーに関する知識やセオリーを知らないと、なかなか各ノードがどのような役割を持ち、どう組み合わせたらどのような結果になるのか全く想像も付かないので・・・現状はPhotoshopが如く画像合成くらいしか活用方法を見いだせていませんが・・・。まずはシェーダーとは何ができるものなのか、しっかりと理解するところから始めるべきかもしれません。

さて、とにかく今回はそんなShaderGraphの備忘録の第一弾を残して置こうと思います。

超簡単な煙シェーダー

ShaderGraphを触り始めて最初に考えたのは・・・「パーティクルで利用する煙エフェクトを素材なしでも簡単に作れんのか?」です。

初心者なりに無い知恵を絞って作り出したのがこちら。

f:id:garysfirearms108:20201017235847g:plain:w256

残念ながら見た目はあまり宜しくありませんので、ゲーム中に長時間表示させることには向きませんが、一応それっぽくはなりました。 Shuriken(ParticleSystem)の設定次第では、ギリギリ使えないこともないかもしれません。あくまでも習作です。


ShaderGraphの中身

グラフ自体の全体図はこんな感じです。

f:id:garysfirearms108:20201018000145j:plain:w512


Blackboardの中身は以下の2枚を参照。

f:id:garysfirearms108:20201018000241j:plain:w256 f:id:garysfirearms108:20201018000259j:plain:w256


ちなみにシェーダーの種類としてはライトの影響を受けない UnlitGraph から作成しています。 この時点で「煙」としては物理的におかしい気もしますが・・・。


全体図は大きく分けて以下の項目に分類できます。

  • 煙のベースの質感生成(SmokeTextureMix
  • 煙の質感調整(SmokeTextureMixTweak
  • 質感にノイズを追加(AddGradientNoise
  • 煙の形状指定(SmokeShapeMask
  • 質感と形状の合成(SmokeAlpha
  • 最終出力と色設定(SmokeColorとMaster

ひとつずつ解説していきます。


煙のベースの質感生成(SmokeTextureMix

f:id:garysfirearms108:20201018001148j:plain:w512

まずは、煙自体の質感を設定します。
ざっくり言うと、2つのノイズ画像を合成することで質感 としています。

SimpleNoiseノード を用意し、Timeを使ってTileAndOffsetのオフセットをスクロール させています。スクロールの速さは SmokeScrollSpeed というVector2を作成して外からも設定できるようにし、ノイズ自体の大きさは SmokeScale というVector1の値から設定できるようにします。

同じようにノイズをもう一つ用意して、1つ目のノイズとは逆方向にスクロールさせるようにSmokeScrollSpeedの値を「-1」を乗算しています。

出来上がった二つのノイズを加算し、煙としてある程度ランダム性が出るようにしました。これをベースとなる煙の質感としています。


煙の質感調整(SmokeTextureMixTweak

f:id:garysfirearms108:20201018001221j:plain:w512

先程の加算された状態そのままでは明るすぎるので Remapノードを使って調整 を行っています。

SmokeDepth というVector1の値を作成。それを二つに分割し、一つは「-1」を乗算して、Vector2にまとめましょう。これによってSmokeDepthの値が「0.5」なら「X:-0.5, Y:0.5」のVector2が生成されます。

Vector2の値はRemapのOutMixMaxに入力。SmokeDepth値が大きければ大きい程に煙は濃く調整されますが、おおよそ「0.1~1.0」の間くらいで制限した方が良いかと。


質感にノイズを追加(AddGradientNoise

f:id:garysfirearms108:20201018001239j:plain:w512

作成したベースの質感に対して、GradientNoiseノードを使ってさらにランダム感が出るように調整 します。 ベースのの質感生成時と同じく、Timeを使ったスクロールをさせます。ノイズの大きさとスクロールの速さはそれぞれ、GradientNoiseScaleGradientNoiseSpeed というVector1の値から調整できます。


煙の形状指定(SmokeShapeMask

f:id:garysfirearms108:20201018001256j:plain:w512

質感は出来上がったので、これを 適当なアルファマスクで抜きます面倒なので素材は用意したくありませんので、Unityおなじみの「Default-Particle」の画像をそのままマスクとして利用します。一応、Blackboardから任意の画像を設定できるように、SmokeShapeMaskTexture という設定値にしておきました。


質感と形状の合成(SmokeAlpha

f:id:garysfirearms108:20201018001317j:plain:w512

ベースの質感とGradientNoiseを乗算し、先程のDefault-Particleのアルファをさらに乗算し・・・ Shurikenからのアルファ設定も反映させる為に、VertexColorノードをSplitしてアルファ値を乗算 しています。


最終出力と色設定(SmokeColorとMaster

f:id:garysfirearms108:20201018001335j:plain:w512

完成した質感+アルファ情報をMasterノードのAlphaに接続。で、そもそもの 煙の色はShuriken側の設定をそのまま反映させたいので、先程の例と同じようにVertexColorノードをColorに入力しています。

Masterノードの設定「Surface」をTransparentにしたら完成 です。


余談

改めて言いますが、このシェーダーではあんまり「煙エフェクトとしての見た目」は良くありません。これならPhotoshopで煙のテクスチャを数枚作成してParticleに放り込んだ方がキレイでしょう。
くどいようですが習作です。私と同じような初心者の方の学習の助けにでもなれれば幸いです。

次はこのシェーダーをさらに発展させて、見た目も改善できたものを紹介できればと思います。

それでは、また次回。