読者です 読者をやめる 読者になる 読者になる

WonderPlanet DEVELOPER BLOG

ワンダープラネットの開発者ブログです。モバイルゲーム開発情報を発信。

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

Shader Unity

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

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

Unityには

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

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

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

1:shaderファイルの作成

Create > Shaderで作成します。
スクリーンショット 2015-05-21 1.33.51

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で作成します。
スクリーンショット 2015-05-21 1.55.37
作成したマテリアルに先ほど作成したシェーダーを設定します。
スクリーンショット 2015-05-21 1.54.59

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

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

3:シェーダー処理作成

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);  
    }  
}  

次にインスペクター上で先ほど作成したマテリアルを指定します。
スクリーンショット 2015-05-22 2.12.37

こちらが実行実行結果です。
フィルターなし
スクリーンショット 2015-05-22 2.15.26
フィルターあり
スクリーンショット 2015-05-22 2.15.39

まとめ

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

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

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