实现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<CanvasScaler>().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的值，就可以实现圆镜头效果;