图片处理Shader的分析

前段时间一直再弄图像处理上的东西，裁剪，去噪，滤波啊等等，然后在想如果unity中做图像处理的话，该怎么做，反反复复的搜索资料，最终搜索到一个以一直没用过的API

Texture source; //原图片
RenderTexture dis;//目标图片
Material mat;
Graphics.Blit(source, dis,mat);//通过材质对原图片进行处理然后输入到目标图片上，如果原图片为null则使用材质球带的图片

对图片的处理，无非是对每个像素点的计算，就算一张正常的图片CPU处理起来都很费劲，因为像素点很多嘛！然后尝试用Shader用计算图片像素，也就是把计算放在GPU，无论是ComputerShader还是Shader归根结底都是用的GPU,我们都知道，shader在底层的数据单位使用的是一个数据结构体，那在我们用户层表现得数据单位是贴图，无论是2D还是3D表现出来得都是贴图，就是因为对图像认知得少，才导致写shader得能力太弱，（每当看到效果需求的时候，不知道效果是怎么表现得，那还怎么写shader,我可以不谦虚得说，shader我都看的懂，改也会改，但是到从0开发得时候，却无从下手，我相信大部分程序员都是这样，废话补多少，Next...）

1.效果图和原始图（左边的是处理后的效果，右边的正常的效果，颜色上有差异是因为受光上的处理）

图片处理Shader的分析

//对当前像素等于周围像素的混合（关键代码在最后一句的计算）
float4 Blur(v2f i)
{
float4 outColor = float4(0, 0, 0, 0);
float4 c1 = tex2D(_MainTex, i.uv + float2(xOffset, 0.00));
float4 c2 = tex2D(_MainTex, i.uv + float2(-1 * xOffset, 0.00));
float4 c3 = tex2D(_MainTex, i.uv + float2(0.00, yOffset));
float4 c4 = tex2D(_MainTex, i.uv + float2(0.00, -1 * yOffset));

float4 currenColor = tex2D(_MainTex, i.uv);
outColor = currenColor * (1 - powValue * 4) + c1 * powValue + c2 * powValue + c3 * powValue + c4 * powValue;
return outColor;
}

上面的shader代码是主要的像素颜色的计算（具体的函数就不解释了）

思路：当前颜色值等于周围像素范围的和，如果图片是背景透明的图片，那是不是这种像素颜色的混合方式可以生成人物的边缘

2.邻像素混合（图像处理滤波上可以搜索当这种算法，就是计算一个像素附近的多个像素的颜色进行加权平均，然后值当作当前像素的颜色）

//平均周围的像素的颜色，现在采取的是6*6范围的像素
float4 AverageColor(v2f i)
{
float4 outColor = float4(0, 0, 0, 0);

for (int k = -3; k < 3; k++)
{
for (int j = -3; j < 3; j++)
{
outColor += tex2D(_MainTex, i.uv + float2(sliderV * k, sliderV *j));
}
}

outColor = outColor/36.0;
return outColor;
}

以上代码是对像素周围平均采样的，是线性的采样的，那通过变异采样的方式，可以转为不同的图像处理，比如说高斯模糊效果，因为shader里我们无法通过像素的索引坐标进行采样，只能通过uv的方式采样，在对uv选择方式上可以进行多种变换，如果想了解更过的uv操作算法，可以去shadertoy看看，ok暂时先写到这，有什么错误的地方欢迎指出，我改正，共同学习进步，以后有时间我会多找点shader的效果进行分析和收藏！！！

图片处理Shader的分析

相关推荐