今天我们来实现一个简单的2D精灵图描边效果,效果图如下:
准备工作:
首先我们先打开unity新建一个场景,导入一个图片,并把该图片设置为Sprite类型,如图:
实现思路:
可以通过判断该像素周围是否有透明度为 0的值,如果有,则说明该像素位于边缘。
所以我们需要打开alpha blend,即: Blend SrcAlpha OneMinusSrcAlpha,并且加入渲染队列,
Tags{
"Queue" = "Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha
下面我们开始编写片元着色器,顶点着色器就是常规的顶点坐标变换,这里就不贴代码了,主要来看看片元着色器:
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
//计算该像素的邻近像素
float2 up_uv = i.uv + float2(0,1) * _lineWidth * _MainTex_TexelSize.xy;
float2 down_uv = i.uv + float2(0,-1) * _lineWidth * _MainTex_TexelSize.xy;
float2 left_uv = i.uv + float2(-1,0) * _lineWidth * _MainTex_TexelSize.xy;
float2 right_uv = i.uv + float2(1,0) * _lineWidth * _MainTex_TexelSize.xy;
float w = tex2D(_MainTex,up_uv).a *tex2D(_MainTex,down_uv).a *tex2D(_MainTex,left_uv).a *tex2D(_MainTex,right_uv).a;
//如果有像素透明度为0,说明该像素位于边缘,颜色值为边框颜色。
if(w == 0){
col.rgb = _lineColor;
}
return col;
}
_MainTex_TexelSize:贴图像素尺寸大小
我们可以通过该属性计算出周围(上下左右)的像素坐标,然后判断有没有透明度为0的值。
如果为0就返回边框颜色。
效果如下:
虽然我们实现了该功能,但是我们仔细观察会发现边缘锯齿很严重,不平滑。我们可以做下优化,利用插值来平滑过渡:
fixed4 frag (v2f i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
float2 up_uv = i.uv + float2(0,1) * _lineWidth * _MainTex_TexelSize.xy;
float2 down_uv = i.uv + float2(0,-1) * _lineWidth * _MainTex_TexelSize.xy;
float2 left_uv = i.uv + float2(-1,0) * _lineWidth * _MainTex_TexelSize.xy;
float2 right_uv = i.uv + float2(1,0) * _lineWidth * _MainTex_TexelSize.xy;
float w = tex2D(_MainTex,up_uv).a *tex2D(_MainTex,down_uv).a *tex2D(_MainTex,left_uv).a *tex2D(_MainTex,right_uv).a;
// if(w == 0){
// col.rgb = _lineColor;
// }
col.rgb = lerp(_lineColor,col.rgb,w);
return col;
}
完整代码可以在github找到!