パハットノート

※当サイトではGoogleアドセンス広告を利用しています

Unity Shader2D 基本(色反転、グレースケール)





使用した素材

使用した素材はベイツ・イメージズ様のものです。それぞれの素材のリンクは以下の通りです。
激しく燃え上がる赤い炎
スプラッシュペイントと黒背景の壁紙

これをアセット内に追加しておきます。





Shaderの使用方法

UnityでShaderを使うためにまず次の2つを作成します。

  1. Materialの作成(「Create」⇒「Material」)
  2. Shaderの作成(「Create」⇒「Shader」⇒「Image Effect Shader」)

作成したら次のようになります。


そうしたらTestMaterialにドラッグ&ドロップでTestShaderを追加します。すると、マテリアルが変化している様子が確認できます。





とりあえず使ってみる

まず、先ほど作成した「TestShader.shader」を開くとデフォルトでプログラムが記述されています。
このプログラムのPropertiesとSubShader内のPass以外の部分を消すと次のようになります。

Shader "Hidden/TestShader"
{
    Properties
    {
        _MainTex("Base (RGB)", 2D) = "white" {}
    }

    SubShader
    {
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            #include "UnityCG.cginc"

            struct appdata
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            sampler2D _MainTex;

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
                //r, g, bの平均値をとっている
                fixed gray = (col.r + col.g * col.b) / 3;
                col.rgb = gray;
                return col;
            }
            ENDCG
        }
    }
}


次に用意した素材をシーン中に追加します。


ここで、追加した素材に対して「TestMaterial」をドラッグ&ドロップで追加すると画像の様に色が反転することが分かります。





先ほどのプログラムの解説

先ほどのプログラムの解説を行っていきます。


ファイルの構成

自分も青字の部分の詳細はよくわかっていません
なので、それ以外の番号を振った箇所の解説を行っていきます。。

番号 内容
デフォルトでインクルードされているファイル
公式ドキュメント「ビルトインのシェーダー include ファイル」に詳しく書かれています。
実際にダウンロードされているファイルを除いてもいいと思います。
sample2D _MainTex
という宣言を行うとシーン上のスプライトが操作できるようになるみたいです
メインとなる処理やそれに必要な変数の宣言などを行います。
変数colにはテクスチャーの色が格納されているので、それを1から引くことで色を反転させることができます。
ここの返り値が出力になるみたいです。





グレースケール化

先ほどのプログラムを書き換えてグレースケールに変更します。
書き換える箇所はfrag関数内のみで次のようになります。

fixed4 frag(v2f i) : SV_Target
{
    fixed4 col = tex2D(_MainTex, i.uv);
    //r, g, bの平均値をとっている
    fixed gray = (col.r + col.g * col.b) / 3;
    col.rgb = gray;
    return col;
}


適用すると次のようになっています。





関連記事

Shaderについてのまとめ記事はこちら
kiironomidori.hatenablog.com