实现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的值,就可以实现圆镜头效果;