UnityShader_屏幕后处理(亮度、饱和度、色彩对比度、描边)

Shader "Unity Shaders Book/Chapter 12/Brightness Saturation And Contrast" {
	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 renderTex = tex2D(_MainTex, i.uv);  
				  
				// 亮度(可以理解为0~255亮度越来越高,因此当RGB达到(255,255,255)的时候就全白)
				fixed3 finalColor = renderTex.rgb * _Brightness;
				
				// 饱和度(色彩中所含彩色成分和消色成分(也就是灰色)的比例)
				// fixed luminance = 0.299 * renderTex.r + 0.587 * renderTex.g + 0.114 * renderTex.b;
				fixed luminance = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b;
				fixed3 luminanceColor = fixed3(luminance, luminance, luminance);
				//关于lerp(A,B,Scale) = A + (B-A)*Scale 
				//因此当Scale>1的时候在很多情况下是没有意义的
				//但是在这里,据上面的差值公式 lerp(A,B,Scale) = A + (B-A)*Scale 
				//我们可以理解为 如果某个点的finalColor比灰色小则会慢慢黑化,如果比灰色大则慢慢亮化
				//亮化:某个点的RBG值不断趋近于255
				finalColor = lerp(luminanceColor, finalColor, _Saturation);
				
				// 色彩对比度(指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量,对比度中画面黑与白的比值差异范围越大代表对比越大,差异范围越小代表对比越小。)
				fixed3 avgColor = fixed3(0.5, 0.5, 0.5); //灰色
				//当_Contrast>1的时候,据上面的差值公式 lerp(A,B,Scale) = A + (B-A)*Scale 
				//我们可以理解为 如果某个点的finalColor比灰色小则会慢慢黑化,如果比灰色大则慢慢亮化
				//亮化:某个点的RBG值不断趋近于255
				finalColor = lerp(avgColor, finalColor, _Contrast);
				
				return fixed4(finalColor, renderTex.a);  
			}  
			  
			ENDCG
		}  
	}
	
	Fallback Off
}

上面在饱和度那里有两个关于亮度的计算公式,公式的推导不在这里描述,大体的原理就是:
因为人眼对RGB颜色的感知并不相同,所以转换的时候需要给予不同的权重,感知程度高的所感觉出来的就越亮,在下面贴吧有更为详细的叙述。
关于亮度公式原理
下面分别是改变亮度、饱和度、色彩对比度的gif
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

图像描边

Shader "Unity Shaders Book/Chapter 12/Edge Detection" {
	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;
				
				//分别存储着 该点及附近8个纹素的值
				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 edgeX = 0;//水平梯度
				half edgeY = 0;//竖直梯度
				for (int it = 0; it < 9; it++) {
					//计算该点的亮度(相当于把一个点的RBG值转为单个值"亮度"
					//并根据该点的亮度来区分是否为边界
					texColor = luminance(tex2D(_MainTex, i.uv[it]));
					edgeX += texColor * Gx[it];
					edgeY += texColor * Gy[it];
				}
				
				half edge = 1 - abs(edgeX) - abs(edgeY);
				
				return edge;
			}
			
			//计算了背景为原图和纯色下的颜色值,再将两者混合
			fixed4 fragSobel(v2f i) : SV_Target {
				half edge = Sobel(i);
				//将边界颜色和原来该点颜色按照edge比例混合
				fixed4 withEdgeColor = lerp(_EdgeColor, tex2D(_MainTex, i.uv[4]), edge);
				//将边界颜色和背景色按照edge比例混合
				fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, edge);
				//将上述两种颜色按照_EdgeOnly比例混合
				return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly);
 			}
			
			ENDCG
		} 
	}
	FallBack Off
}

代码中大部分关键代码都已经注释,下面讲解一下为何Sobel算子为何能判断是否为边界点:
half edge = Sobel(i) 这里算出来的edge越小,则该点越可能是一个边界点。
在Sobel方法中,我们算得的edge = 1 - abs(edgeX) - abs(edgeY)
再来拆解一下算子,如下图
在这里插入图片描述
以水平方向的算子Gx为例(从左上到有下的点分别为1~9):
①中间为检测点,因为检测的是水平方向上是否为分界点,因此点4,6对于该判断没有作用;
②以中间一条为分界线,上下两排的值是对称取反的,并且因为点2,8离 点5的距离更近,因此占的权重更大
③edgeX 得到的是检测点周围及本身9个点按照Gx权重乘积的和,
如果干点上下两排颜色越接近(转化成的亮度也越接近),那么edgeX的值也就越小(关于中间一排对称的上下两点互相抵消),edge的值就越大 ,那么该点不是分界点的可能性就越大;
反之如果干点上下两排颜色越离散(转化成的亮度也越离散),那么edgeX的值也就越大,edge的值就越小 ,那么该点是分界点的可能性就越大。
效果如下图在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值