先看效果
该效果是RawImage组件下实现。单纯Shader实现,不用c#辅助,当然,肯定也有缺点,在一些场合下或许不适用,我也希望能最大化适用,奈何技术有限。网上看过一些实现有些只适合3D,并且不适合棱角的,有些适用UI,效果也不错,但是为了泛光范围加大,性能指数级飙升,令人发指。这个shader原理就是,在一个UI里,把一部分分辨率拿出来用作泛光,一部分分辨率用来显示UI,缺点就出来了,不能够完整分辨率显示UI,因为有一部分被拿去用作泛光。
顺便还多说一局,Shader里的_Edge参数和_UVScale存在某种联系,本人愚钝,没能发现,或许是线性关系或许不是。如果处理好了,直接修改_Edge参数即可,不用手动再改_UVScale.
shader如下
//该shader无法根据Edge的参数来修正图片的UV,需要_UVScale参数手动匹配UV。_Edge参数一变化,_UVScale参数必定要修改
//该shader只适用于UGUI,并且会把图片的分辨率自动缩小一定数值,多出的分辨率用来做泛光处理
//该shader边缘光是根据长宽比例得到,不是根据像素宽度,意思就是说,长度越长,泛光越宽,越短,泛光越短
Shader "Custom/Edge"
{
Properties
{
_Edge ("Edge", Range(0, 0.5)) = 0.1
_EdgeColor ("EdgeColor", Color) = (1, 1, 1, 1)
_MainTex ("MainTex", 2D) = "white" {}
_UVScale ("UVScale", Range(0, 30)) = 0.13
_Intensity ("Intensity", Range(0, 3)) = 1.86
}
SubShader
{
Tags
{
"Queue"="Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha
Pass
{
CGPROGRAM
#pragma vertex vert
#pragma fragment frag
#include "UnityCG.cginc"
fixed _Edge;
fixed4 _EdgeColor;
sampler2D _MainTex;
float _UVScale;
float _Intensity;
float _Test;
struct appdata
{
float4 vertex : POSITION;
fixed2 uv : TEXCOORD0;
};
struct v2f
{
float4 vertex : SV_POSITION;
float4 objVertex : TEXCOORD0;
fixed2 uv : TEXCOORD1;
};
v2f vert (appdata v)
{
v2f o;
o.vertex = UnityObjectToClipPos(v.vertex);
o.objVertex = v.vertex;
o.uv = v.uv;
return o;
}
fixed4 frag (v2f i) : SV_Target
{
fixed x = i.uv.x ;
fixed y = i.uv.y;
//确定泛光的矩形的四个点
float2 leftUp = float2(_Edge,1-_Edge);
float2 leftDown = float2(_Edge,_Edge);
float2 RightUp = float2(1-_Edge,1-_Edge);
float2 RightDown = float2(1-_Edge,_Edge);
//确定该像素点距离 四个位置的距离
float leftUpD = distance(leftUp,i.uv);
float2 leftDownD = distance(leftDown,i.uv);
float2 RightUpD = distance(RightUp,i.uv);
float2 RightDownD = distance(RightDown,i.uv);
float alpha =0;
//像素判断,判断该像素在九宫格的哪个位置,然后做的alpha赋值运算
if(x<_Edge && (1-y)<_Edge)//左上
alpha= pow((_Edge-leftUpD)/_Edge,_Intensity);
else if(x<_Edge && y<_Edge)//左下
alpha= pow((_Edge-leftDownD)/_Edge,_Intensity);
else if((1-x)<_Edge && y<_Edge)//右下
alpha= pow((_Edge-RightDownD)/_Edge,_Intensity);
else if((1-x)<_Edge && (1-y)<_Edge)//左上
alpha= pow((_Edge-RightUpD)/_Edge,_Intensity);
else if((x < _Edge))//左边
alpha = pow(x/_Edge,_Intensity);
else if(1 - x < _Edge)//右边
alpha = pow((1-x)/_Edge,_Intensity);
else if(1 - y < _Edge)//上边
alpha = pow((1-y)/_Edge,_Intensity);
else if(y < _Edge) //下边
alpha =pow(y/_Edge,_Intensity);
else //中间显示的图形
{
float4 addUV = float4(-_UVScale,-_UVScale,1+_UVScale*2,1+_UVScale*2);
fixed4 col = tex2D(_MainTex, i.uv*addUV.zw+addUV.xy);
alpha=1;
_EdgeColor.xyz =col.xyz;
}
return fixed4(_EdgeColor.xyz,alpha);
}
ENDCG
}
}
}
需要注意点是
1:该shader无法根据Edge的参数来修正图片的UV,需要_UVScale参数手动匹配UV。_Edge参数一变化,_UVScale参数必定要修改 _Edge参数主要是为了缩放泛光范围,
2:该shader只适用于UGUI,并且会把图片的分辨率自动缩小一定数值,多出的分辨率用来做泛光处理
3:该shader边缘光是根据长宽比例得到,不是根据像素宽度,意思就是说,长度越长,泛光越宽,越短,泛光越短