![3d3a2cf4e550d0bda586f1debf2d0d6c.png](https://i-blog.csdnimg.cn/blog_migrate/805e0018810d64429ba1df50d0722967.jpeg)
前言
今天我们来实现一个简单的2D精灵图描边效果,效果图如下:
![f4be64698b3494e85a7ee1776953c094.png](https://i-blog.csdnimg.cn/blog_migrate/3d6a0b9356f13fbf9d56e291d93f00a7.png)
准备工作:
首先我们先打开unity新建一个场景,导入一个图片,并把该图片设置为Sprite类型,如图:
![f46afee3b64cb3652ef9ba09d9dd585f.png](https://i-blog.csdnimg.cn/blog_migrate/ce86c2b33bb757b874bc68a300098219.png)
![618e49388cc3f0b4d7ccaa3b94e4f190.png](https://i-blog.csdnimg.cn/blog_migrate/27cbd3dc3046485db66f75db4b2ef525.png)
实现思路:
思路其实很简单,可以通过判断该像素周围是否有透明度为 0的值,如果有,则说明该像素位于边缘。
所以我们需要打开alpha blend,即: Blend SrcAlpha OneMinusSrcAlpha,并且加入渲染队列,
Tags{
"Queue" = "Transparent"
}
Blend SrcAlpha OneMinusSrcAlpha
下面我们开始编写片元着色器,顶点着色器就是常规的顶点坐标变换,这里就不贴代码了,主要来看看片元着色器:
// ---------------------------【片元着色器】---------------------------
fixed4 frag (VertexOutput i) : SV_Target
{
fixed4 col = tex2D(_MainTex, i.uv);
// 采样周围4个点
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;
// 如果有一个点透明度为0 说明是边缘
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;
}
return col;
}
MainTexTexelSize:贴图像素尺寸大小 我们可以通过该属性计算出周围(上下左右)的像素坐标,然后判断有没有透明度为0的值。 如果为0就返回边框颜色。
效果如下:
![fcbe1e4b05d23b7dfe2f2a523fe0ccfe.png](https://i-blog.csdnimg.cn/blog_migrate/5abd1b7ba28151c4d99c9ad7a40fb3f3.png)
虽然我们实现了该功能,但是我们仔细观察会发现边缘锯齿很严重,不平滑。我们可以做下优化,利用插值来平滑过渡,
最终完整Shader代码如下:
// ---------------------------【2D 描边效果】---------------------------
最终效果图对比:
![0946183891e7d71367d7d139bd30b203.png](https://i-blog.csdnimg.cn/blog_migrate/a82169ac4503e0c689732baa22851d3d.jpeg)
最后
最后欢迎来我的GitHub Star,谢谢! 里面有我平时学习unity shader过程中实现的一些特效demo。