Unityのシェーダーを触ってみた

こんにちわ。
今回エンジニアブログを担当します乾です。
よろしくお願いします。

最近少しづつやっているのですが、シェーダー方面触ったことがなかった初心者なので苦戦中です。
今回は私みたいな初心者の方向けに簡単なモノクロフィルターを作っていこうと思います。

Unityには

サーフェイスシェーダ
頂点 / フラグメントシェーダ
固定関数シェーダ

以上３種類のシェーダがあります。今回はサーフェイスと頂点 / フラグメントで作ってみます。

「サーフェイスシェーダ」

1:shaderファイルの作成

Create > Shaderで作成します。

2:シェーダー処理作成

作成されたファイルを見てみるとこんな感じになっていると思います。

Shader "Custom/Monochrome" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
       #pragma surface surf Lambert  

        sampler2D _MainTex;

        struct Input {
            float2 uv_MainTex;
        };

        void surf (Input IN, inout SurfaceOutput o) {
            half4 c = tex2D (_MainTex, IN.uv_MainTex);
            o.Albedo = c.rgb;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}

surf関数内をこんな感じに数行書き換えてみます。

void surf (Input IN, inout SurfaceOutput o) {
    half4 c = tex2D (_MainTex, IN.uv_MainTex);
    float f = (c.r+c.g+c.b)/3;
    o.Albedo = half3(f,f,f);
    o.Alpha = c.a;
}

rgbの合計値を割って渡します、これだけで適応されたオブジェクトがモノクロに見えます。

3:マテリアル作成

create/materialで作成します。

作成したマテリアルに先ほど作成したシェーダーを設定します。

「頂点 / フラグメントシェーダ」

ファイル作成やら設定方法は先ほど作成した方法と同じなので省略させていただきます。

4:シェーダー処理作成

Shader "Custom/Monochrome2" {
    Properties {
        _MainTex ("Base (RGB)", 2D) = "white" {}
    }
    SubShader {
        Tags { "RenderType"="Opaque" }
        LOD 200
        Pass {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag

            #include "UnityCG.cginc"

            uniform sampler2D _MainTex;

            fixed4 frag(v2f_img i) : SV_Target {
                float4 c = tex2D(_MainTex, i.uv);
                float f = (c.r+c.g+c.b)/3;

                return float4(f,f,f,1);
            }
            ENDCG
        }
    }
}

こちらはおなじみの書き方ですね。

pragma vertex vert_img

pragma fragment frag

と関数を指定し、内部に処理を書いて行きます。

「カメラフィルター作成」

以下のようなスクリプトを作成してカメラのコンポーネントとして付けます。

using UnityEngine;
using System.Collections;

public class CameraFilter : MonoBehaviour {

    [SerializeField]
    Material mat;  // かけたい効果のマテリアル  

    void OnRenderImage ( RenderTexture src, RenderTexture dest ) {
        Graphics.Blit(src, dest, mat);
    }
}

次にインスペクター上で先ほど作成したマテリアルを指定します。

こちらが実行実行結果です。
フィルターなし

フィルターあり

まとめ

簡単に作れました、満足。
簡単なことでも初めて出来た時は嬉しい!!。

作りたいシェーダーには程遠いですけど最初はこんなもんだと思います。
今後も少しづつ勉強してもっと面白いものを作りたいです。

シェーダーを触った事のないそこのあなたも一緒にはじめてみてはいかがでしょうか!!