【Unity Shader入门精要 第12章】屏幕后处理效果(二)

2024-06-01 16:44

本文主要是介绍【Unity Shader入门精要 第12章】屏幕后处理效果(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 卷积

在图像处理中,卷积操作就是使用一个卷积核对一张图像中的每个像素做一系列的操作。

卷积核通常是一个四方形网格结构,如2x2、3x3的方形区域,该区域内每个方格都有一个权重值。

当对图像中的某个像素进行卷积操作时,将卷积核的中心放置于要处理的像素上,按照卷积核每个格子中的权重值,将卷积核覆盖到的像素的进行加权计算,得到最终结果。

下图为用一个3x3的卷积核对原始图像中A像素进行卷积操作时的示意:

在这里插入图片描述

2. 边缘检测

在这个例子中,我们实现一个简单边缘检测效果。使用的方法是,通过边缘检测算子直接对屏幕图像进行卷积操作,基于卷积结果判断某像素是否位于边缘上。

边缘检测算子就是一个预先定义好的卷积核,本次使用的为Sobel算子,如下:

在这里插入图片描述
原理为对于每个像素,按照算子的范围,计算该像素左右和上下一定范围内的相邻像素的灰度值差异大小——也就是卷积的结果,我们称之为梯度。梯度越大,代表像素两侧的灰度值差异越大,当前像素就越可能是某个边缘上的像素。

因此,在片元着色器中,对于每个处理中的片元,需要采样该片元相邻的9个像素,并按照算子中的权重值计算最终梯度。为了减少在片元着色器中逐像素计算uv偏移的消耗,我们把这个计算uv偏移的过程移到了顶点着色器中,在 v2f 结构中通过一个长度为9的uv数组传递给片元着色器。

在计算得到梯度值之后,按照梯度值在原始采样颜色和边缘颜色之间进行插值,完成描边效果。

另外,也提供了一个只显示描边的展示效果,通过 _OnlyEdge 变量控制是否只显示描边,通过 _BackgroundColor 变量控制当只显示描边时非边缘区域的颜色。

最后,实现新增一个 PostEffect_EdgeDetection 脚本用于调用描边处理效果,继承自前文的后处理父类 PostEffectBase,并在 OnRenderImage 方法中为Shader中的变量赋值及调用Blit方法。

测试脚本如下:

using UnityEngine;[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class PostEffect_EdgeDetection : PostEffectBase
{public Shader EdShader;public Material EdMat;public Color EdgeColor = Color.black;public Color BackgroundColor = Color.white;[Range(0.0f, 1.0f)]public float OnlyEdge = 0f;private void OnRenderImage(RenderTexture src, RenderTexture dest){Material _mat = CheckShaderAndMaterial(EdShader, EdMat);if (null == _mat) Graphics.Blit(src, dest);else{_mat.SetColor("_EdgeColor", EdgeColor);_mat.SetColor("_BackgroundColor", BackgroundColor);_mat.SetFloat("_OnlyEdge", OnlyEdge);Graphics.Blit(src, dest, _mat);}}
}

测试Shader如下:

Shader "MyShader/Chapter_12/Chapter_12_EdgeDetection_Shader"
{Properties{_MainTex("MainTex", 2D) = "white"{}}SubShader{Pass{Tags{"LightMode" = "ForwardBase"}ZTest AlwaysZWrite OffCull OffCGPROGRAM#pragma vertex vert#pragma fragment frag#pragma multi_compile_fwdbase#include "UnityCG.cginc"struct v2f{float4 pos : SV_POSITION;float2 uv[9] : TEXCOORD0;};sampler2D _MainTex;float4 _MainTex_TexelSize;fixed4 _EdgeColor;fixed _OnlyEdge;fixed4 _BackgroundColor;v2f vert(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);half2 _uv = v.texcoord;//计算sobel算子覆盖范围的uv偏移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){//Sobel算子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};fixed _luminance;half _edgeX = 0;half _edgeY = 0;for(int it = 0; it < 9; it++){_luminance = Luminance(tex2D(_MainTex, i.uv[it]));_edgeX += _luminance * Gx[it];_edgeY += _luminance * Gy[it];}//差异越大,值越小,越可能是边界return 1 - abs(_edgeX) - abs(_edgeY);}fixed4 frag(v2f i) : SV_Target{half _edge = Sobel(i);fixed4 _samplerColor = tex2D(_MainTex, i.uv[4]);fixed4 _withEdgeColor = lerp(_EdgeColor, _samplerColor, _edge);fixed4 _onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, _edge);return lerp(_withEdgeColor, _onlyEdgeColor, _OnlyEdge);}ENDCG}}
}

效果如下:
在这里插入图片描述

3. 高斯模糊

3.1 高斯核

常见的几种通过卷积操作实现模糊效果的方式:

  • 均值模糊:通过一个各项权值相等且经过归一化处理的卷积核对图像进行卷积,也就是用像素周围一定范围相邻像素的均值作为颜色
  • 中值模糊:将相邻像素进行排序,用中值作为颜色
  • 高斯模糊:通过高斯核对图像进行卷积操作,高斯核中每项的权值通过高斯方程获得(归一化处理)

使用的高斯方程:
在这里插入图片描述
其中:

  • σ是标准方差,通常取1
  • xy分别代表横纵坐标到当前像素的整数距离

从上述公式可以看出,当σ为1时,只有xy会影响最终的模糊效果:距离越大影响越大、维度越高模糊程度越高。

由于高斯核中的权重都是由该公式求出的,因此只要确定了高斯核的维度,则其中的每一项就已经固定了,比如下面的例子中使用的5x5高斯核为:
在这里插入图片描述

3.2 优化手段

拆分高斯核

对于一个 WxH 的纹理,如果用 NxN 的高斯核直接进行滤波,则采样次数为:NxNxWxH

可以将高斯核拆分成一横一纵两个一维的高斯核,用拆分后的高斯核分别进行滤波,则采样次数就可以降低为:2xNxWxH

注意,是经过两个PASS分别滤波,也就是先用横向的高斯核对原始纹理进行滤波得到中间纹理,再用纵向的高斯核对中间纹理进行滤波得到最终的效果。并不是在一个PASS中同时用横纵高斯核进行处理,因为这样横纵高斯核采样的都是原始纹理的颜色。

降采样

由于卷积操作是在片元着色器中对纹理中的每个像素进行处理,因此,纹理的像素数量(或者说纹理的尺寸)就直接影响到计算的次数

我们可以先按照一定的比例对原始的纹理进行降采样处理,生成一个尺寸较小的临时纹理,然后对临时纹理进行高斯滤波,这样可以大大降低计算的数量。

扩大步长

要达到更好的模糊效果,最只管的方式是提高高斯核的维度,但是提高维度也意味着增加计算量。基于上文对高斯方程的分析,XY的范围越大影响越大,因此,在不提高维度的情况下,要获得更好的模糊效果,我们还可以增加XY的采样步长,也就是扩大XY的范围。

增加迭代次数

另外,还可以设置进行滤波的迭代次数,这样可以动态修改迭代次数,在满足性能要求的前提下,获得更好的模糊效果。

3.3 示例

下面的例子中,我们将5X5的高斯核拆分成如下两个一维的高斯核:
在这里插入图片描述
观察拆分后的高斯核,可以发现无论横纵,高斯权值都是对称的,且横纵高斯核中相同距离的权值相等,因此在Shader中只需要用一个长度为3的数组就可以表达拆分后的高斯核。

测试脚本

using UnityEngine;public class PostEffect_GaussianBlur : PostEffectBase
{public Shader GaussianBlurShader;public Material GaussianBlurMat;[Range(1, 8)]public float DownSampler = 1;[Range(0.2f, 3f)]public float SmaplerStep = 1;[Range(1, 4)]public float BlurRound = 1;private void OnRenderImage(RenderTexture src, RenderTexture dest){Material _mat = CheckShaderAndMaterial(GaussianBlurShader, GaussianBlurMat);if(null == _mat) Graphics.Blit(src, dest);else{int _width = (int)(src.width / DownSampler);int _height = (int)(src.height / DownSampler);RenderTexture _buffer_0 = RenderTexture.GetTemporary(_width, _height, 0);_buffer_0.filterMode = FilterMode.Bilinear;//原始图像降采样至 _buffer_0,并保持后续每次操作中 _buffer_0 都是待处理的图像Graphics.Blit(src, _buffer_0);for (int i = 0; i < BlurRound; i++){_mat.SetFloat("_SmaplerStep", SmaplerStep * i);//横向滤波RenderTexture _buffer_1 = RenderTexture.GetTemporary(_width, _height, 0);Graphics.Blit(_buffer_0, _buffer_1, _mat, 0);RenderTexture.ReleaseTemporary(_buffer_0);_buffer_0 = _buffer_1;//纵向滤波_buffer_1 = RenderTexture.GetTemporary(_width, _height, 0);Graphics.Blit(_buffer_0, _buffer_1, _mat, 1);RenderTexture.ReleaseTemporary(_buffer_0);_buffer_0 = _buffer_1;}//将最终结果输出Graphics.Blit(_buffer_0, dest);RenderTexture.ReleaseTemporary(_buffer_0);}}
}

测试Shader

Shader "MyShader/Chapter_12/Chapter_12_GaussianBlur_Shader"
{Properties{_MainTex("MainTex", 2D) = "white"{}}SubShader{ZTest Always ZWrite Off Cull Off//预定义着色器函数,可以在后续的Pass中直接调用//避免在多个Pass中重复实现同样的代码CGINCLUDE#include "UnityCG.cginc"sampler2D _MainTex;float4 _MainTex_TexelSize;half _SmaplerStep;struct v2f{float4 pos : SV_POSITION;float2 uv[5] : TEXCOORD0;};//横向滤波顶点着色函数v2f vertHorizental(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv[0] = v.texcoord;o.uv[1] = v.texcoord + _MainTex_TexelSize.xy * float2(-1, 0) * _SmaplerStep;o.uv[2] = v.texcoord + _MainTex_TexelSize.xy * float2(1, 0) * _SmaplerStep;o.uv[3] = v.texcoord + _MainTex_TexelSize.xy * float2(-2, 0) * _SmaplerStep;o.uv[4] = v.texcoord + _MainTex_TexelSize.xy * float2(2, 0) * _SmaplerStep;return o;}//纵向滤波顶点着色函数v2f vertVertical(appdata_img v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.uv[0] = v.texcoord;o.uv[1] = v.texcoord + _MainTex_TexelSize.xy * float2(0, -1) * _SmaplerStep;o.uv[2] = v.texcoord + _MainTex_TexelSize.xy * float2(0, 1) * _SmaplerStep;o.uv[3] = v.texcoord + _MainTex_TexelSize.xy * float2(0, -2) * _SmaplerStep;o.uv[4] = v.texcoord + _MainTex_TexelSize.xy * float2(0, 2) * _SmaplerStep;return o;}//通用滤波片元着色函数fixed4 frag(v2f i) : SV_Target{const half G[3] = {0.4026, 0.2442, 0.0545};fixed3 _color = tex2D(_MainTex, i.uv[0]) * G[0];for(int it = 1; it < 3; it++){_color += tex2D(_MainTex, i.uv[it * 2]) * G[it];_color += tex2D(_MainTex, i.uv[it * 2 - 1]) * G[it];}return fixed4(_color, 1);}ENDCG//横向滤波PassPass{//将Pass命名,方便后续其他效果使用Name "GAUSSIAN_BLUR_HORIZENTAL"CGPROGRAM#pragma vertex vertHorizental#pragma fragment fragENDCG}//纵向滤波PassPass{Name "GAUSSIAN_BLUR_VERTICAL"CGPROGRAM#pragma vertex vertVertical#pragma fragment fragENDCG}}
}

高斯:
在这里插入图片描述

高斯模糊:
在这里插入图片描述

这篇关于【Unity Shader入门精要 第12章】屏幕后处理效果(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1021556

相关文章

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

Python实战之屏幕录制功能的实现

《Python实战之屏幕录制功能的实现》屏幕录制,即屏幕捕获,是指将计算机屏幕上的活动记录下来,生成视频文件,本文主要为大家介绍了如何使用Python实现这一功能,希望对大家有所帮助... 目录屏幕录制原理图像捕获音频捕获编码压缩输出保存完整的屏幕录制工具高级功能实时预览增加水印多平台支持屏幕录制原理屏幕

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节:FastAPI入门一、FastAPI框架介绍什么是ASGI服务(WSGI)二、FastAP

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python利用自带模块实现屏幕像素高效操作

《Python利用自带模块实现屏幕像素高效操作》这篇文章主要为大家详细介绍了Python如何利用自带模块实现屏幕像素高效操作,文中的示例代码讲解详,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、获取屏幕放缩比例2、获取屏幕指定坐标处像素颜色3、一个简单的使用案例4、总结1、获取屏幕放缩比例from

基于Python实现PDF动画翻页效果的阅读器

《基于Python实现PDF动画翻页效果的阅读器》在这篇博客中,我们将深入分析一个基于wxPython实现的PDF阅读器程序,该程序支持加载PDF文件并显示页面内容,同时支持页面切换动画效果,文中有详... 目录全部代码代码结构初始化 UI 界面加载 PDF 文件显示 PDF 页面页面切换动画运行效果总结主

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用

使用Python实现生命之轮Wheel of life效果

《使用Python实现生命之轮Wheeloflife效果》生命之轮Wheeloflife这一概念最初由SuccessMotivation®Institute,Inc.的创始人PaulJ.Meyer... 最近看一个生命之轮的视频,让我们珍惜时间,因为一生是有限的。使用python创建生命倒计时图表,珍惜时间