クマテクブログ

日々のメモ

自作でImageEffectを作ってみる

UnityにImageEffectというものがあります。PostEffectなどとも呼ばれているようです。
レンダリング後のイメージにエフェクトをかけるもので、よくあるカメラアプリのフィルターをイメージすると分かりやすいかもしれません。
[参考]
www.appbank.net


RPGエンカウント時に画面をぐにゃーと歪ませたりさせたり、
FPSでダメージを受けた時に一瞬ネガポジ反転させたりとゲームでも様々な場所で活用できそうですね。


さて、では早速ImageEffectを自作してみます。


下記の様にGraphics.Biltの第三引数に自作したShaderをつけたMaterialをつけて、このスクリプト自身をカメラにアタッチしてあげるだけで簡単にImageEffectがつくれます。

using UnityEngine;
using System.Collections;

[ExecuteInEditMode()]
public class MyImageEffect : MonoBehaviour {

    [SerializeField] Material material;

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


まずは簡単なネガポジ反転シェーダー
f:id:Cyario:20160408104003g:plain

Shader "Custom/Negaposi" {

	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
	}

	SubShader
	{
		Cull Off ZWrite Off ZTest Always

		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 = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = v.uv;
				return o;
			}

			sampler2D _MainTex;

			float3 frag (v2f i) : SV_Target
			{
				float3 color = tex2D(_MainTex, i.uv).rgb;
				return float3(1, 1, 1) - color.rgb;
			}
			ENDCG
		}
	}
}

docs.unity3d.com
こちらのドキュメントを参考にして、
この部分でテクスチャ(カメラに表示されている部分)を拾ってきます。(unformはつけてもつけなくても良さそうです)

Properties
{
	_MainTex ("Texture", 2D) = "white" {}
}
sampler2D _MainTex;


そしてあとはFragment Shader内でテクスチャに変化を加えてあげれば出力が変化します。

float3 frag (v2f i) : SV_Target
{
	float3 color = tex2D(_MainTex, i.uv).rgb;
	return float3(1, 1, 1) - color.rgb;
}


基本的にImageEffectをかけたいというだけであればVertex Shaderなどその他の部分をいじる必要がありませのでテンプレートとしてこれをコピーして必要に応じてFragment Shaderをいじくると簡単に作れると思います。