[PostEffect]ワイプエフェクトのImageEffect

環境

• Unity5.5
• DOTween

わーい！Shaderたのーしー！ pic.twitter.com/zMBwzZZF9l

— KUZ＊UKS (@superDebu12) 2017年2月21日

(これワイプエフェクトっていうんだろうか・・？？)

Shader側

Shader側のPropertyには

• 円の中心となるスクリーン座標 : (_HoleCenterX, _HoleCenterY)
• 円の半径 : _Radius

を定義します。

fragmentShaderの中で指定された円の中心とピクセルとの距離を計算します。
距離が_Radius未満の場合はそのままの色のままとし、_Radisu以上の場合は黒く塗りつぶします。

WipeEffect.shader

Shader "Custom/WipeEffect"
{
	Properties
	{
		_MainTex ("Texture", 2D) = "white" {}
        _HoleCenterX ("HoleCenterX", float) = 0.5
        _HoleCenterY ("HoleCenterY", float) = 0.5
        _Radius ("Radius", float) = 0.5
	}
	SubShader
	{
		// No culling or depth
		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;
            float _HoleCenterX;
            float _HoleCenterY;
            float _Radius;

			fixed4 frag (v2f i) : SV_Target
			{
                float2 pos = i.uv * _ScreenParams.xy;

                if( distance(pos.xy, fixed2(_HoleCenterX, _HoleCenterY)) < _Radius ){
                    discard;
                }
                return fixed4(0, 0, 0, 1);
			}
			ENDCG
		}
	}
}

　Script側

Script側では円の中心となるスクリーン座標をshader側に渡しています。
今回は指定されたGameObjectを中心にワイプエフェクトをかけたいので、**WorldToScreenPoint"**関数でmyCameraから見たGameObjectのスクリーン座標を取得してshader側に渡しています。

CircleEffect.cs

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using DG.Tweening;

public class CircleEffect : MonoBehaviour
{
    [SerializeField]
    private Camera myCamera;
    private Material material;

    /// <summary>
    /// シーン上の覗き穴Effect対象のGameObjectの配列
    /// </summary>
    [SerializeField]
    private GameObject[] cubeArray;

    /// <summary>
    /// 処理中フラグ
    /// </summary>
    private bool isProcess;

    /// <summary>
    /// 最終的な半径の大きさ
    /// </summary>
    [SerializeField, Range (0.1f, 1.0f)]
    private float destinationRadius;

    /// <summary>
    /// 半径の一時変数
    /// </summary>
    private float _radius;

    GameObject currentTarget;
    int index = 0;

    void Start ()
    {
        material = new Material (Shader.Find ("Custom/CircleFadeOut"));
    }

    void OnRenderImage (RenderTexture source, RenderTexture destination)
    {
        if (isProcess) {
            UpdateMaterial ();
            Graphics.Blit (source, destination, material);
        }
    }

    void UpdateMaterial ()
    {
        Vector3 screenPoint = myCamera.WorldToScreenPoint (currentTarget.transform.position);

        float currentRadius = Screen.height * _radius;
        material.SetFloat ("_HoleCenterX", screenPoint.x);
        material.SetFloat ("_HoleCenterY", screenPoint.y);
        material.SetFloat ("_Radius", currentRadius);
    }

    /// <summary>
    /// 指定されたGameObjectのスクリーン上の座標の周りを黒塗りにする
    /// </summary>
    /// <param name="target">Target.</param>
    void StartTargetWipeEffect (GameObject target)
    {
        isProcess = true;
        _radius = 2.0f;
        currentTarget = target;
        DOTween.To (r => _radius = r, _radius, destinationRadius, 1.0f)
            .OnComplete (() => {
                Debug.Log("WipeEffect Process End!");
        });
    }

    void Update ()
    {
        if (Input.GetKeyDown (KeyCode.A)) {
            StartTargetWipeEffect (cubeArray[index%cubeArray.Length]);
            index++;
        }
    }
}