【unity shader】用数字图像处理的知识写屏幕后处理效果(bloom、高斯模糊、反色、曝光、黑白图像、灰度图像)

本文介绍了如何使用数字图像处理知识在Unity中实现屏幕后处理效果,包括反色、灰度图、黑白图、曝光处理、模糊(均值模糊和高斯模糊)以及Bloom效果。通过理解RGB图像的处理方式,利用Shader实现这些视觉特效,并探讨了不同处理方法的原理和代码实现。
摘要由CSDN通过智能技术生成

《关于我马上就要考研却还花时间自学数字图像处理这档事》
-写于2021年12月21日(摸鱼摸鱼)。。

计算机图形学、数字图像处理、计算机视觉(模式识别)
这三门学科各不相同,各有交叉
在这里插入图片描述
(图片转自知乎用户 孙佳明 的回答)

画图表示就长下面这样:
在这里插入图片描述
(三年美术经验,指上小学前学了一堆长大后全tm忘完了)

学了数字图像处理的我才终于意识到,原来冯女神的入门精要12章、13章讲的是数字图像处理的内容啊。怪说不得自学起来这么吃力原来我连地基都没搭就开始造房子,不塌才怪。

这里简单介绍下,unity将屏幕当成一张面片处理(别问我为什么这么处理,因为opengl是这么干的)。所以我们写的屏幕后处理效果往往更多应用的是图像处理而不是图形学的知识了。

OK,开始。
首先上模之屋把原神的胡桃和烟绯模型下载下来,用作本次示例。
接着用MMD4Mecanim这个牛逼的插件把模型转为FBX用在unity中,换上我自己写的卡通着色材质。
在这里插入图片描述

颜色处理

根据数字图像处理的内容,一幅RGB图像就是M×N×3大小的彩色像素数组,每个彩色像素点都是在特定空间位置的成彩色图像所对应的红绿蓝分量。RGB也可以视为三幅灰度图像形成的“堆叠”,当将他们送到彩色显示器的红绿蓝输入端时,会在屏幕上生成一副彩色图像。

反色(负片效果)
反色效果可以说是这次教程最简单的了,反色也可以叫补色,意思是某个颜色加上它的补色可以变成白色。而一般我们用的都是RGB色彩模型,1-图像的RGB值就可以得到图像的反色。

	    fixed4 frag (v2f i) : SV_Target
        {
   
            fixed4 col = tex2D(_MainTex, i.uv);
			//负片效果
			col = 1 - col;
			return col;
		}

在这里插入图片描述

灰度图
注意,一般如下面这张图在计算机图像邻域我们称之为灰度图像而不是黑白图像。黑白图像指的是完全只有黑白两种颜色的图像,但灰度图像在黑色与白色之间还有许多级的颜色深度,比如浅灰深灰这样的区分。
另外在单色图像中,灰度=亮度。但彩色图像则不能这么理解。
在这里插入图片描述
在图像识别邻域中,我们往往会将彩色图像转换为灰度图像后再做处理,因为梯度因素是最关键的,梯度意味着边缘,自然就用到灰度图像了。而颜色本身就容易受到光照等因素的影响,同类的物体颜色有很多变化。所以颜色本身难以提供关键信息。
(部分摘自知乎水哥的回答)

具体将彩色图像转换为一张灰度图像的流程其实就是将RGB三色通道转换为一个通道的过程。计算公式有很多:
1.浮点算法:Gray=R0.3+G0.59+B0.11
2.整数方法:Gray=(R
30+G59+B11)/100
3.移位方法:Gray =(R76+G151+B*28)>>8;
4.平均值法:Gray=(R+G+B)/3;
5.仅取绿色:Gray=G;
这里我就用冯乐乐入门精要里的计算公式:Gray=R * 0.2125 + G *0.7154 + B * 0.0721

fixed4 col = tex2D(_MainTex, i.uv);
//灰度图
fixed graycolor = col.r * 0.2125 + col.g *0.7154 + col.b * 0.0721;
return fixed4(graycolor,graycolor,graycolor,1.0);

黑白图
和灰度图做了区别后,我们自然知道黑白图就是只有颜色值为255和0的图像(即只有黑白)。
在这里插入图片描述
要想实现黑白图,可以设定一个阈值(我这里就设定0.5,也就是纯灰色),灰度值小于阈值的输出黑色,大于阈值的返回白色。
代码如下:

fixed4 frag (v2f i) : SV_Target
	{
   
    	fixed4 col = tex2D(_MainTex, i.uv);
				
		//黑白
		fixed graycolor = col.r * 0.2125 + col.g *0.7154 + col.b * 0.0721;
		//fixed4 finalColor = graycolor < 0.5 ? fixed4(0,0,0,1) : fixed4(1,1,1,1) ;
		fixed splitColor = saturate(sign(graycolor - 0.5));
		fixed4 finalColor = fixed4(splitColor,splitColor,splitColor,1);
		return finalColor;
	}

曝光处理
在这里插入图片描述
(图截自天津理工大学杨淑莹的数字图像处理课程)
在这里插入图片描述

fixed4 frag (v2f i) : SV_Target
{
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值