（八）图像处理

1.前言

本篇浅谈一下图像处理包括调节亮度、灰度处理以及模糊处理。图像处理一般用于平面模型特殊要求处理，但主要用于屏幕后处理，屏幕后处理一般采用OnRenderImage方法进行。主要图像处理参考文献为六种灰度计算方法文章。

2.图像处理

2.1 亮度

亮度就是让图像看起来更亮，处理比较简单，即颜色值添加一个亮度系数，调节亮度系数越大，图像越亮，最终结果为屏幕全为白色。

                //Brightness
				fixed3 finalColor = color.rgb * _Brightness;

2.2 灰度

灰度计算方法有很多种，可以将颜色的rgb值平均化处理，也可以对rgb分量添加不同的权重进行计算，甚至可以采用单一色道，如下所示：

				//Grey
				//fixed luminance=(color.r+color.g+color.b)/3;
				//fixed luminance=color.r*0.2+color.g*0.78+color.b*0.02;
				//fixed luminance=color.r*0.3+color.g*0.59+color.b*0.11;

				//单一色道g	
				fixed luminance=color.r;
				fixed3 finalColor = fixed3(luminance,luminance,luminance);

可以通过Lerp控制灰度的程度：

				fixed luminance = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b;
				fixed3 luminanceColor = fixed3(luminance, luminance, luminance);
				finalColor = lerp(luminanceColor, finalColor, _Saturation);

2.2.1 完整代码

Shader "LL/ImageEffects" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_Brightness ("Brightness", Float) = 1
		_Saturation("Saturation", Float) = 1
		_Contrast("Contrast", Float) = 1
	}
	SubShader {
		Pass {  
			ZTest Always Cull Off ZWrite Off
			
			CGPROGRAM  
			#pragma vertex vert  
			#pragma fragment frag  
			  
			#include "UnityCG.cginc"  
			  
			sampler2D _MainTex;  
			half _Brightness;
			half _Saturation;
			half _Contrast;
			  
			struct v2f {
				float4 pos : SV_POSITION;
				half2 uv: TEXCOORD0;
			};
			  
			v2f vert(appdata_img v) {
				v2f o;
				
				o.pos = UnityObjectToClipPos(v.vertex);
				
				o.uv = v.texcoord;
						 
				return o;
			}
		
			fixed4 frag(v2f i) : SV_Target {
				fixed4 color = tex2D(_MainTex, i.uv);  

//fixed3 rgb=color.rgb*_Brightness;
				 

                //Brightness
				//fixed3 finalColor = color.rgb * _Brightness;

				//Grey
				//fixed luminance=(color.r+color.g+color.b)/3;
				//fixed luminance=color.r*0.2+color.g*0.78+color.b*0.02;
				//fixed luminance=color.r*0.3+color.g*0.59+color.b*0.11;

				//单一色道g	
				fixed luminance=color.r;
				fixed3 finalColor = fixed3(luminance,luminance,luminance);


				/*
				// Apply saturation
				fixed luminance = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b;
				fixed3 luminanceColor = fixed3(luminance, luminance, luminance);
				finalColor = lerp(luminanceColor, finalColor, _Saturation);
				
				// Apply contrast
				fixed3 avgColor = fixed3(0.5, 0.5, 0.5);
				finalColor = lerp(avgColor, finalColor, _Contrast);
				
				return fixed4(finalColor, renderTex.a);  */
				return fixed4(finalColor, color.a);
			}  
			  
			ENDCG
		}  
	}
	
	Fallback Off
}

2.3 模糊处理

图像模糊处理也比较简单，只要取临近的几个像素进行平均化即可，即可以完全相加平均，也可以通过权重计算，赋予不同位置的像素不同的权重。

2.3.1 简单处理

由于与某个像素相邻的像素有8个，但是由于是模糊处理，没必要全部用到。一般只取上下左右四个像素进行模糊处理。此处值采用上下两个像素进行模糊处理，采用权重_Weight控制每个像素权重。当其值为0.33时为绝对平均化处理，当其值为1时不做模糊处理。代码如下：

Shader "LL/Blur" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_BlurSize ("Blur Size", Float) = 1.0
		_Weight("Weight",Float)=1
	}
	SubShader {
		Pass {  
			ZTest Always Cull Off ZWrite Off
			
			CGPROGRAM  
			#pragma vertex vert  
			#pragma fragment frag  
			
			#include "UnityCG.cginc"  
			
			sampler2D _MainTex;  
			half _Brightness;
			half _Saturation;
			half4 _MainTex_TexelSize;
			half _Weight;

			float _BlurSize;
			
			struct v2f {
				float4 pos : SV_POSITION;
				half2 uv[9]: TEXCOORD0;
			};
			
			v2f vert(appdata_img v) {
				v2f o;
				
				o.pos = UnityObjectToClipPos(v.vertex);
				
				half2 uv = v.texcoord;
				o.uv[0] = uv;
				o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
				o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;				
				return o;
			}
			
			fixed4 frag(v2f i) : SV_Target {

				fixed3 c = tex2D(_MainTex, i.uv[0]).rgb * _Weight;
				
				half w=(1-_Weight)/2;

				for (int index = 1; index < 3; index++) {
					c += tex2D(_MainTex, i.uv[index]).rgb * w;
				}

				return fixed4(c, 1);
			} 
			
			ENDCG
		}  
	} 
	FallBack "Diffuse"
}

计算uv时乘以_BlurSize是为了提升效果，如果只是取最临近的像素，可能由于图像梯度不那么明显导致效果不明显，所以可以调节_BlurSize值取次临近的像素进行处理。

2.3.2 高斯处理

高斯处理就是取赋予像素特定的权重进行处理。像素选取时左右上下各取四个像素值进行计算，由于对称原因，所以像素权重只有三个值：0.4026, 0.2442, 0.0545。计算代码如下：

Shader "LL/Blur" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_BlurSize ("Blur Size", Float) = 1.0
	}
	SubShader {
		Pass {  
			ZTest Always Cull Off ZWrite Off
			
			CGPROGRAM  
			#pragma vertex vert  
			#pragma fragment frag  
			
			#include "UnityCG.cginc"  
			
			sampler2D _MainTex;  
			half _Brightness;
			half _Saturation;
			half4 _MainTex_TexelSize;
			half _Contrast;
	
			float _BlurSize;
			
			struct v2f {
				float4 pos : SV_POSITION;
				half2 uv[9]: TEXCOORD0;
			};

			v2f vert(appdata_img v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				half2 uv = v.texcoord;
				
				o.uv[0] = uv;
				o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
				o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
				o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
				o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
				o.uv[5] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
				o.uv[6] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
				o.uv[7] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
				o.uv[8] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
				
				return o;
			}
			
			fixed4 frag(v2f i) : SV_Target {
				float weight[3] = {0.4026, 0.2442, 0.0545};
				
				fixed3 c = tex2D(_MainTex, i.uv[0]).rgb * weight[0];
				
				for (int index = 1; index < 3; index++) {
					c += tex2D(_MainTex, i.uv[index*2-1]).rgb * weight[index];
					c += tex2D(_MainTex, i.uv[index*2]).rgb * weight[index];

					c += tex2D(_MainTex, i.uv[index*2+3]).rgb * weight[index];
					c += tex2D(_MainTex, i.uv[index*2+4]).rgb * weight[index];
				}
				
				return fixed4(c, 1.0);
			}  
			
			ENDCG
		}  
	} 
	FallBack "Diffuse"
}

2.4 边缘处理

所谓边缘是指识别图像中某一个元素的边缘，比如识别出人体的边缘等。识别出边缘一个最基本的方法是采用梯度计算。梯度计算是对各个方向求出方向导数并基于此位置坐标计算出梯度值。涉及到实际计算时根据颜色梯度的经验方法计算就可以。颜色梯度计算是根据某一像素周围八个像素点进行计算的。计算因子为 {-1, 0, 1,-2, 0, 2,-1, 0, 1};，即每个像素乘以上述值相加并取绝对值即可。注意上述中为9个值，那是因为第5个为像素值本身，且值为0。不影响计算。

2.4.1 梯度计算

			fixed luminance(fixed4 color) {
				return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
			}
			
			half Sobel(v2f i) {
				const half Gx[9] = {-1,  0,  1,
					-2,  0,  2,
				-1,  0,  1};
				const half Gy[9] = {-1, -2, -1,
					0,  0,  0,
				1,  2,  1};		
				
				half texColor;
				half gradX = 0;
				half gradY = 0;
				for (int index = 0; index < 9; index++) {
				//如果此处不用灰度值也可以采用当以色道值计算梯度
					texColor = luminance(tex2D(_MainTex, i.uv[index]));
					gradX += texColor * Gx[index];
					gradY += texColor * Gy[index];
				}
				
				//half edge = 1 - abs(edgeX) - abs(edgeY);
				half edge =abs(gradX) + abs(gradY);
				
				return edge;
			}

2.4.2 颜色显示

计算出梯度以后就可以采用梯度值插值计算片元的颜色：

fixed4 blendColor = lerp( tex2D(_MainTex, i.uv[4]),_EdgeColor, edge);

2.4.3 完整代码

Shader "LL/Edge" {
	Properties {
		_MainTex ("Base (RGB)", 2D) = "white" {}
		_EdgeOnly ("Edge Only", Float) = 1.0
		_EdgeColor ("Edge Color", Color) = (0, 0, 0, 1)
		_BackgroundColor ("Background Color", Color) = (1, 1, 1, 1)
	}
	SubShader {
		Pass {  
			ZTest Always Cull Off ZWrite Off
			
			CGPROGRAM
			
			#include "UnityCG.cginc"
			
			#pragma vertex vert  
			#pragma fragment fragSobel
			
			sampler2D _MainTex;  
			uniform half4 _MainTex_TexelSize;
			fixed _EdgeOnly;
			fixed4 _EdgeColor;
			fixed4 _BackgroundColor;
			
			struct v2f {
				float4 pos : SV_POSITION;
				half2 uv[9] : TEXCOORD0;
			};
			
			v2f vert(appdata_img v) {
				v2f o;
				o.pos = UnityObjectToClipPos(v.vertex);
				
				half2 uv = v.texcoord;
				
				o.uv[0] = uv + _MainTex_TexelSize.xy * half2(-1, -1);
				o.uv[1] = uv + _MainTex_TexelSize.xy * half2(0, -1);
				o.uv[2] = uv + _MainTex_TexelSize.xy * half2(1, -1);
				o.uv[3] = uv + _MainTex_TexelSize.xy * half2(-1, 0);
				o.uv[4] = uv + _MainTex_TexelSize.xy * half2(0, 0);
				o.uv[5] = uv + _MainTex_TexelSize.xy * half2(1, 0);
				o.uv[6] = uv + _MainTex_TexelSize.xy * half2(-1, 1);
				o.uv[7] = uv + _MainTex_TexelSize.xy * half2(0, 1);
				o.uv[8] = uv + _MainTex_TexelSize.xy * half2(1, 1);
				
				return o;
			}			
			
			fixed luminance(fixed4 color) {
				return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
			}
			
			half Sobel(v2f i) {
				const half Gx[9] = {-1,  0,  1,
					-2,  0,  2,
				-1,  0,  1};
				const half Gy[9] = {-1, -2, -1,
					0,  0,  0,
				1,  2,  1};		
				
				half texColor;
				half gradX = 0;
				half gradY = 0;
				for (int index = 0; index < 9; index++) {
					//texColor = luminance(tex2D(_MainTex, i.uv[index]));
					texColor = tex2D(_MainTex, i.uv[index]);
					gradX += texColor * Gx[index];
					gradY += texColor * Gy[index];
				}
				
				//half edge = 1 - abs(edgeX) - abs(edgeY);
				half edge =abs(gradX) + abs(gradY);
				
				return edge;
			}
			
			fixed4 fragSobel(v2f i) : SV_Target {
				half edge = Sobel(i);
				
				//fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[4]), edge);
				fixed4 blendColor = lerp( tex2D(_MainTex, i.uv[4]),_EdgeColor, edge);
				fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);
				return lerp(blendColor, onlyEdgeColor, _EdgeOnly);
				//return blendColor;
			}
			
			ENDCG
		} 
	}
	FallBack Off
}
如果梯度变化不大，可以在每个uv值后面乘以一个系数（如2.3.2所示），通过增大范围来扩大梯度。

3.结语

本文对几种基本的图像处理做了简单的说明。