前言
很久没有学习新知识了，前端时间偶然翻了一下《shader入门精要》看了一下bloom效果，然后发现自己对卷积，高斯模糊的概念一直也很模糊。正好借这个机会复习一下。
高斯模糊
高斯模糊其实重要的就是卷积的过程，这里真的非常推荐大家买一本入门精要，里面讲的很详细。感兴趣的同学也可以去搜一下PDF看一下里面卷积的讲解，这里就不赘述了。总之就是根据一个卷积核对图片一个像素的四周进行采样，然后在根据卷积核中四周各个位置的权重进行颜色的叠加。
不过我看到书中讲到的模糊是分为两次进行的，一次是横向的模糊，一次是纵向的模糊，不过使用的都是相同的卷积核。在后处理渲染的时候因为要处理两次，当迭代次数增加的时候，产生的DC也会每次都增加2。虽然增加的不多，不过我还是想一次同时模糊两个方向。我这里使用的是暴力手段强行同时模糊两个方向，应该还会有更好的办法，如果后面找到了会加进来。
shader代码：
Shader "My Shader/ My Gaussian Blur" {
Properties {
_MainTex ("Base (RGB)", 2D) = "white" {}
_BlurSize ("Blur Size", Float) = 1.0
}
SubShader {
CGINCLUDE
#include "UnityCG.cginc"
sampler2D _MainTex;
half4 _MainTex_TexelSize;
float _BlurSize;
struct v2f {
float4 pos : SV_POSITION;
half2 uvHorizontal[5]: TEXCOORD0;
half2 uvVertical[5]: TEXCOORD5;
};
v2f vertBlur(appdata_img v) {
v2f o;
o.pos = UnityObjectToClipPos(v.vertex);
half2 uv = v.texcoord;
o.uvVertical[0] = uv;
o.uvVertical[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
o.uvVertical[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
o.uvVertical[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
o.uvVertical[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
o.uvHorizontal[0] = uv;
o.uvHorizontal[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
o.uvHorizontal[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
o.uvHorizontal[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
o.uvHorizontal[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
return o;
}
fixed4 fragBlur(v2f i) : SV_Target {
//正常使用的是横竖两次采样，所以颜色要计算两次，这里放在一起计算，所以权重值都*0.5最后颜色才不会爆掉
float weight[3] = {0.4026*0.5, 0.2442*0.5, 0.0545*0.5};
fixed3 sumVertical = tex2D(_MainTex, i.uvVertical[0]).rgb * weight[0];
fixed3 sumHorizontal = tex2D(_MainTex, i.uvHorizontal[0]).rgb * weight[0];
for (int it = 1; it < 3; it++) {
sumVertical += tex2D(_MainTex, i.uvVertical[it*2-1]).rgb * weight[it];
sumVertical += tex2D(_MainTex, i.uvVertical[it*2]).rgb * weight[it];
sumHorizontal += tex2D(_MainTex, i.uvHorizontal[it*2-1]).rgb * weight[it];
sumHorizontal += tex2D(_MainTex, i.uvHorizontal[it*2]).rgb * weight[it];
}
return fixed4(sumVertical + sumHorizontal, 1.0);
}
ENDCG
ZTest Always Cull Off ZWrite Off
Pass {
NAME "GAUSSIAN_BLUR"
CGPROGRAM
#pragma vertex vertBlur
#pragma fragment fragBlur
ENDCG
}
}
FallBack "Diffuse"
}
c#代码：
void OnRenderImage(RenderTexture src, RenderTexture dest)
{
if (material != null)
{
int rtW = src.width / downSample;
int rtH = src.height / downSample;
RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
buffer0.filterMode = FilterMode.Bilinear;
Graphics.Blit(src, buffer0);
for (int i = 0; i < iterations; i++)
{
material.SetFloat("_BlurSize", 1.0f + i * blurSpread);
RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
// Render the vertical pass
Graphics.Blit(buffer0, buffer1, material, 0);
RenderTexture.ReleaseTemporary(buffer0);
buffer0 = buffer1;
}
Graphics.Blit(buffer0, dest);
RenderTexture.ReleaseTemporary(buffer0);
}
else
{
Graphics.Blit(src, dest);
}
}
这里c#代码中对屏幕图片进行了降采样处理，downSample就是对应的降采样比例，因为做的是模糊效果，所以降采样一定程度上可以提高模糊效果（如果降得太多会导致像素化）。其他基本没有什么额外的操作了，_BlurSize作为模糊范围传入shader参与卷积计算。
高斯模糊的一些效果
在网上看其他高斯模糊代码的时候看到了一个很有意思的效果，就是可以在模糊之后再渲染一些UI元素，就像这样：
背景模糊
我们知道，屏幕后处理是所有东西都渲染之后才进行的操作，那么他是怎么实现这种先进行后处理，然后进行UI的渲染的呢？
原文地址
在实现这个效果的时候还被UI绕蒙了，因为文中使用了另外一个相机进行模糊处理，把模糊结果存到一张RT上然后当做UI进行渲染。
当UI使用overlay（覆盖）模式的时候，UI会在场景中所有其他物体渲染后进行渲染。（我开始以为和camera模式类似，canvas会主动找主相机进行渲染，其实不是的，canvas会等相机都渲染完之后再进行覆盖渲染）
实现起来也很简单，和之前的代码相差不大，只不过脚本中多持有了一个rawImage和camera的引用：
void OnRenderImage(RenderTexture src, RenderTexture dest)
{
if (material != null)
{
if (!gameObject.activeInHierarchy && enabled) return;
int rtW = src.width / downSample;
int rtH = src.height / downSample;
buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
buffer0.filterMode = FilterMode.Bilinear;
Graphics.Blit(src, buffer0);
for (int i = 0; i < iterations; i++)
{
material.SetFloat("_BlurSize", 1.0f + i * blurSpread);
RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
// Render the vertical pass
Graphics.Blit(buffer0, buffer1, material, 0);
RenderTexture.ReleaseTemporary(buffer0);
buffer0 = buffer1;
}
Graphics.Blit(buffer0, dest);
//RenderTexture.ReleaseTemporary(buffer0);
//赋值RT
rImg.texture = buffer0;
rImg.color = m_color;
//渲染后关闭相机与本脚本，停止重复渲染，只保留RawImage作为UI元素
m_camera.enabled = false;
enabled = false;
}
else
{
Graphics.Blit(src, dest);
}
}
这里我们不能在渲染之后直接销毁RT，因为这张RT我们还要作为图片交给rawImage进行渲染，不过可以另外添加函数在不需要模糊效果的时候回收RT。
这个效果目前只能在渲染世界的时候给世界添加一层模糊效果，那么我们责编呢在UI上也实现类似效果呢。这里就要用到canvas的camera渲染模式，使用不同的canvas对UI进行分层，然后把想要模糊的UI进行处理后渲染到RT上，理论上就可以实现UI的模糊效果了，因为我们使用的是rawImage重新渲染，所以还可以自定义裁剪形状等功能。这里就不一一实现了如果后面有用到再来补充把
网友评论