ShaderLab实现Vignette过场动画效果

实现Vignette过场动画效果

postprocessing中有渐晕效果（Vignette），镜头可以由边缘往中间慢慢变黑；

但是我打包WebGL的时候提示我postprocessing，GPU不支持...

so,用shaderlab实现了简单的效果，如果需要边缘模糊，就根据距离做透明度插值；

以下是效果展示：

PostEffectsBase

提供公共方法，所有的postprocess后期效果都继承该类；

Start方法中检查设备是否支持后期效果；

CheckShaderAndCreateMaterial方法检测是否支持shader，支持则创建并返回该shader的对应材质；

[ExecuteInEditMode]
[RequireComponent (typeof(Camera))]
public class PostEffectsBase : MonoBehaviour {

	// Called when start
	protected void CheckResources() {
		bool isSupported = CheckSupport();
		
		if (isSupported == false) {
			NotSupported();
		}
	}

	// Called in CheckResources to check support on this platform
	protected bool CheckSupport() {
		if (SystemInfo.supportsImageEffects == false || SystemInfo.supportsRenderTextures == false) {
			Debug.LogWarning("This platform does not support image effects or render textures.");
			return false;
		}
		
		return true;
	}

	// Called when the platform doesn't support this effect
	protected void NotSupported() {
		enabled = false;
	}
	
	protected virtual void Start() {
		CheckResources();
	}

	// Called when need to create the material used by this effect
	protected Material CheckShaderAndCreateMaterial(Shader shader, Material material) {
		if (shader == null) {
			return null;
		}
		
		if (shader.isSupported && material && material.shader == shader)
			return material;
		
		if (!shader.isSupported) {
			return null;
		}
		else {
			material = new Material(shader);
			material.hideFlags = HideFlags.DontSave;
			if (material)
				return material;
			else 
				return null;
		}
	}
}

MyVignette

根据屏幕大小，在shader的着色阶段，判断片元离屏幕中心距离和预设的半径比较，超过的全部设置成黑色（或其他）；

预设半径最大值为屏幕对角线的一半；

Unity屏幕（0,0）点左下角；

温馨提示：如果要同时覆盖UI，canvas的模式不能是overlay，必须改成Camera，同时UI相机要为该脚本挂载的相机；

OnRenderImage(RenderTexture source, RenderTexture destination)

该方法为MonoBehaviour生命周期，会将屏幕渲染结果source返回，函数结束会将destination显示在屏幕上；

Graphics.Blit(source, destination, material，pass)

将source经过材质material处理后，返回destination；

pass默认为-1，计算所有pass；否则只调用索引值；

public class MyVignette : PostEffectsBase
{
    public Shader vignetteShader;
    private Material vignetteMaterial;
    [Range(0, 1)] public float radio = 1;
    public Color circleColor = Color.black;
    public Vector2 screenSize;

    protected override void Start()
    {
        base.Start();
        screenSize = FindObjectOfType().referenceResolution;
        material.SetColor("_Color", circleColor);
        //计算屏幕对角线一半的长度
        float temp = Mathf.Sqrt(screenSize.x * screenSize.x + screenSize.y * screenSize.y)/2;
        material.SetFloat("_ScreenSize", temp);
        material.SetVector("_CenterPos", screenSize/2);
    }

    public Material material
    {
        get {
            vignetteMaterial = CheckShaderAndCreateMaterial(vignetteShader, vignetteMaterial);
            return vignetteMaterial;
        }
    }

    private void OnRenderImage(RenderTexture source, RenderTexture destination)
    {
        if (material != null)
        {
            material.SetFloat("_Radio", radio);

            Graphics.Blit(source, destination, material);
        }
        else
            Graphics.Blit(source, destination);
    }

}

VignetteShader

_MainTex 接收屏幕纹理

_Radio 接收半径变动

在MyVignette类中给Shader属性赋值，所以其实Properties中可以不用写（不用在材质中看这些值），直接pass中声明；

Shader "VignetteShader"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Radio("Radio",Range(0,1.0)) = 1.0
        _ScreenSize("ScreenSize",Float) = 735
        _CenterPos("CenterPos",vector) = (640,360,1)
        _Color("CircleColor",Color) = (0,0,0,1) 
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }

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

            sampler2D _MainTex;
            float4 _MainTex_ST;
            fixed _Radio;
            fixed _ScreenSize;
            float4 _CenterPos;
            float4 _Color;
            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv);
				
                //减少开方操作
                float temp = (i.vertex.x - _CenterPos.x)* (i.vertex.x - _CenterPos.x)+(i.vertex.y-_CenterPos.y)*(i.vertex.y-_CenterPos.y);
               _ScreenSize = _ScreenSize*_Radio;
               if(temp>_ScreenSize*_ScreenSize)
                    col = _Color;

                return col;
            }
            ENDCG
        }
    }
}

使用

主相机上挂在MyVigentte脚本，给MyVigentte参数赋值，将VignetteShader拖到MyVigentte中shader变量；

通过CanvasScaler获取屏幕宽高，Canvas的RenderMode设置成Screen Space-Camera；

代码修改MyVignette中Radio的值，就可以实现圆镜头效果;