实现思路
在屏幕空间下怎么判断一个像素点是边缘点呢?可以回想一下边缘点的特征,即边缘点附近一般亮度变化大。比如一个物体内部和背景的亮度,在边缘处一般会有肉眼可见的突变,我们只要检测出这种变化就能检测出边缘了。
检测方法就是取这个像素周围的一些像素,计算他们的亮度值之后进行比对,如果周围像素亮度值差异大,则判断为边缘,这也就是俗称的‘卷积’。当然在屏幕空间进行边缘检测总会有不准确的地方,这个是无法避免的。
代码实现
最重要的就是计算一个像素当前梯度值的函数了,这个梯度值就代表该像素附近像素的亮度变化,越大就代表亮度变化越大,越有可能是边缘。
具体操作需要声明两个数组,可以看成是3*3的二维数组,代表了以该像素为中心,周围围了一圈的9个像素。当然由于shader里二维数组的限制,所以我们这里用一维数组代替二维数组。
另外还需要分别计算横向和纵向的变化,所以才需要声明两个数组,同时要注意数组里所有数字的合要为1,这个数字代表了对应像素的权值。可以想象一下在9个亮度变化不大的像素中,只有对应的权值合为1,最后计算每个像素值的亮度进行加减之后,这个梯度值才会大致为1。
大致的计算过程就是依次遍历9个像素,用Luminance函数计算对应像素的亮度值,然后依次相加,这个最后的值就是该像素的梯度值了。
half sobel(v2f i)
{
const half Gx[9] =
{
-1, -2, -1,
0, 0, 0,
1, 2, 1
};
const half Gy[9] =
{
-1, 0, 1,
-2, 0, 2,
-1, 0, 1
};
half texColor;
half edgeX = 0;
half edgeY = 0;
for (int index = 0; index < 9; index++)
{
texColor = Luminance(tex2D(_MainTex, i.uv[index]));
edgeX += texColor * Gx[index];
edgeY += texColor * Gy[index];
}
half edge = 1 - abs(edgeX) - abs(edgeY);
return edge;
}
在上面的计算中需要用到一个像素点附近的像素uv坐标,这里需要声明一个
half4 _MainTex_TexelSize;
unity就会自动填充单个像素的uv坐标差异了,接着进行计算就可以得到9个点的uv坐标
记得这里的9个点要和前面声明的数组顺序要对应。
o.uv[0] = uv + _MainTex_TexelSize.xy