見出し画像

【第6回】エフェクト汎用シェーダー作成編(※中・上級者向け)

【エフェクト汎用シェーダー作成編(※中・上級者向き)】では、ゲームエンジン【Unity】でShaderGraphを使用したエフェクト汎用シェーダーの作成について解説します。


【第6回】SubTextureの実装

今回の学習では以下2つの機能を実装していきます。

①サブテクスチャ機能
Base_ColorテクスチャのRGB情報に対して、サブテクスチャのRGB情報を乗算することで、エフェクトの細かなディテール調整を可能にします。
Base_Colorテクスチャだけでは表現が不足する場合に、サブテクスチャを活用することで、より深みのあるビジュアルを作り出すことができます。

②マスク機能
◆マスク機能は、Alpha情報を利用して特定の領域の透明度を調整する機能です。
◆エフェクトでは、主にシルエットの形状を調整することに使用します。


◆なお、サブテクスチャは2つ作成します。
◆それぞれRGB情報Alpha情報には分岐処理を入れて、
 ”サブテクスチャとして使用するのか?”(RGB情報だけ使用する)
 ”マスクとして使用するのか?”(Alpha情報だけ使用する)
選べるようにして、汎用性の高い調整ができるようにしていきます。
◆サブテクスチャの枠は2つあるので、より複雑な表現も可能になります。




①【Sample Texture 2Dノード】と【UVControl】の作成

◆作成の流れはBaseColorテクスチャと同じですので説明は省きます。(下記画像を参考にしてください)


②Alpha情報の使用するチャンネル分岐処理の追加

◆こちらも”Rチャンネル”と”Alphaチャンネル”のどちらを使用してマスクをかけるかを選択できるようにしたいと思います。(マスクの場合、Alphaチャンネルを使用する頻度は低めですが一応入れておきます)

【Enumノード】を使用した方がマテリアルのプロパティがきれいなのですが、処理が重くなるのでこちらは【Branchノード】で分岐処理を行います。

◆デフォルトで使用するチャンネルは”Rチャンネル”を指定します。
┗Alphaチャンネルを使用する例としては、RGB情報とAlpha情報が異なるテクスチャを使用した際Alphaチャンネルを使用したい時などです。

下記画像を参考に処理を追加して下さい。


③Smoothstepの使用分岐処理の追加

◆SabTextureの ”RGB情報” と ”Alpha情報の使用チャンネル分岐処理をした結果(Alpha情報)” を【Combineノード】でRGBA情報としてまとめます。

まとめたRGBA情報に対してSmoothstep処理を追加していきます。
◆Smoothstepの使用分岐処理も追加します。


④プロパティ化

◆今回SubTextureは2つ実装するので、先ほどまでの処理を複製します。


◆SubTextureのパラメーターをプロパティ化します。

SubTexture01
SubTexture02

Tiling・Smoothstep(Min/Max)の初期値の設定を忘れないように注意して下さい。


◆「Sub01」「Sub02」のカテゴリを作成して各パラメータを格納します。

◆テクスチャのデフォルト設定は、添付画像のようなノイズテクスチャとデフォルトパーティクルのテクスチャを設定しておくと分かりやすいです。


⑤SubTextuer(RGB情報)を適切に接続する

◆SubTextuerのRGB情報は、"カラー情報を加える前"に乗算しておきたいので下記画像の箇所に処理を追加していきます。

”Base_ColorテクスチャのSmoothstep使用分岐処理後”【Splitノード】【Combineノード】を使用し、RGB情報とAlpha情報を分離させます

SubTextur01・02も同様にRGB情報とAlpha情報に分けておきます。

⒊SubTexture01のRGBを乗算するかの分岐処理を追加します。
 (【Branchノード】を使用します)

⒋SubTexture02のRGBを乗算するかの分岐処理を追加します。

グラデーションの色付けの部分SubTexture01・02の分岐処理をしたRGB情報を繋ぎなおします。

単色のカラーの色付け部分【Splitノード】【Combineノード】を使用し、"SubTexture使用分岐処理後のRGB情報"を再度分離させ、Base_ColorテクスチャのAlpha情報と一緒に格納してRGBA情報としてまとめます。

⒎Gradationの色付けに”BaseColorテクスチャのAlpha情報”を繋ぎます。

 

⒏処理は完了したので分岐処理をマテリアルから選択できるようにプロパティ化していきます。
◆Blackboardで「SubTexture(RGB)」というカテゴリを作成して下さい。

◆Booleanプロパティを作成します。
 ┗初期値はデフォルトのFalse(SubTextuerのRGBは乗算しない)を選択する設定で大丈夫です。

◆グラフに配置して分岐処理のBool値に接続して下さい。
SubTextuer01・02の接続箇所を間違えないように注意して下さい)

以上でSubTextuerが実装できました。


⑥マスク(Alpha情報)を適切に接続する

◆マスクの分岐処理は"Colorモードの選択処理の後"に追加します。
◆処理は先ほどのRGB情報の分岐処理と同じです。

⒈SubTextuer01のマスク使用分岐処理を追加します。

⒉SubTextuer02のマスク使用分岐処理を追加します。

マスターノードのAlphaに接続します。

⒋分岐処理をマテリアルから選択できるようにプロパティ化していきます。
◆Blackboardで「SubTexture(Mask)」というカテゴリを作成して下さい。

◆Booleanプロパティを作成します。
 ┗初期値はデフォルトのFalse(SubTextuerのマスク(Alpha情報)は使用しない)を選択する設定で大丈夫です。

◆グラフに配置して分岐処理のBool値に接続して下さい。
SubTextuer01・02の接続箇所を間違えないように注意して下さい)

◆「Use_Alpha_Channel(Sub01)」「Use_Alpha_Channel(Sub02)」プロパティは「SubTextuer(Mask)カテゴリに移動します。

以上でMaskの実装が出来ました。


終わりに

サブテクスチャ機能マスク機能の実装が出来ました。

細かなディテール調整シルエット調整が可能になり、より汎用性が高まったかと思います。

◆また今回の学習では、RGBA情報”分離処理(Split)””まとめる処理(Combine)””分岐処理(Branch)”がたくさん出てきました。

◆・なぜここで情報を分離するのか?
 ・なぜここで情報をまとめたいのか?
注目してみたり・・・

◆・なぜカラー情報を加える前にサブテクスチャのRGB情報の追加処理をしたいのか?
 ・カラー情報を加えた後にサブテクスチャのRGB情報の追加処理をした場合、どのような結果になるのか?
などを考えながら学習することで、なぜそこで処理を追加したのかが分かってくるかと思います


次回は【第7回】Distoritionの実装です。

お疲れさまでした!


いいなと思ったら応援しよう!

K-R_VFX
私が発信する情報やアイデアが、少しでも学習のヒントや手助けとなっていたら嬉しいです。 今後、より良いコンテンツを作り続けるためのエネルギーになりますので、よろしければ応援をお願いします。