当前位置： 首页 > article >正文

Unity Shader 学习13：屏幕后处理 - 使用高斯模糊的Bloom辉光效果

article 2025/2/26 2:02:51

        目录

一、基本的后处理流程 - 以将画面转化为灰度图为例

1. C#调用shader

2. Shader实现效果

二、Bloom辉光效果

1. 主要变量

2. Shader效果

（1）提取较亮区域 - pass1

（2）高斯模糊 - pass2&3

（3）图像混合 - pass4

3. C#调用流程

一、基本的后处理流程 - 以将画面转化为灰度图为例

需要使用到2个文件：Shader用来写效果处理，C#在每帧渲染时调用shader。

① shader文件就和普通的效果一样正常写，只是处理对象是 整个场景渲染好后（此时已经是一张平面贴图）的贴图：_MainTex；以及可以省略顶点着色器的输入结构体，用unity提供的appdata_img代替。

② 而C#脚本则是在OnRenderImage函数中根据算法逻辑按需使用pass进行渲染。这里将图片转为灰度图是不需要什么逻辑啦，基本上就是可以直接进行渲染，但是后面讲的bloom效果就需要加点东西。

1. C#调用shader

使用 Shader.Find 找到相应shader并创建对应的材质material，在OnRenderImage中可以利用 m.setxxx( ) 来给shader的参数赋值，再利用 Graphics.Blit(src, dest, m) 使该材质作用于_MainTex并渲染到屏幕上。

这里要传的参数就是变灰的程度。

public class BWEffect : MonoBehaviour
{
    Material m;
    [Range(0, 1)] public float bwBlend = 0;

    void Awake()
    {
        m = new Material(Shader.Find("Hidden/BWDiffuse"));
    }

    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        Debug.Log("OnRenderImage called");
        m.SetFloat("_bwBlend", bwBlend); //传参
        Graphics.Blit(src, dest, m); //渲染
    }
}

2. Shader实现效果

在片元着色器中，对_MainTex采样，并用 col.r * 0.3 + col.g * 0.59 + col.b * 0.11 提取出其灰度，用 C# 传来的 灰度程度值 在原图和灰图之间做插值。

Shader "Hidden/BWDiffuse"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _bwBlend ("WBlend", Range(0,1)) = 0
    }
    SubShader
    {
        Cull Off ZWrite Off ZTest Always
        Pass
        {
            CGPROGRAM
            #pragma vertex vert_img
            #pragma fragment frag

            #include "UnityCG.cginc"

            uniform sampler2D _MainTex;
            uniform float _bwBlend;

            fixed4 frag (v2f_img i) : SV_Target
            {
                fixed4 col = tex2D(_MainTex, i.uv); //原色
                float lum = col.r * 0.3 + col.g * 0.59 + col.b * 0.11; 
                float4 bw = float4(lum, lum, lum, 1); //灰色
                float4 result = lerp(col, bw, _bwBlend); //插值
                return result;
            }
            ENDCG
        }
    }
}

二、Bloom辉光效果

Bloom效果的实现可以分为3步：

① 提取较亮区域 

② 用高斯模糊，模拟亮区的光线扩散 

③模糊图与原图混合

1. 主要变量

[Range(0, 4)] public int iterations = 3;//高斯模糊迭代次数
[Range(0.2f, 3.0f)] public float blurSpread = 0.6f;//每次迭代模糊范围的增长速度
[Range(1, 8)] public int downSample = 2;//将图片像素量减少的降采样系数，能减少需要处理的像素量，提高性能
[Range(0.0f, 4.0f)] public float luminaceThreshold = 0.6f;//模糊阈值

luminaceThreshold：模糊阈值，它能决定提取亮部的区域范围
iterations：迭代次数，可以对图片进行多次的模糊
blurSpread：每次迭代模糊后，都要对模糊范围 (BlurSize) 进行扩大，其控制每次扩大的速度
blurSize：就是上述的blurSize，其与blurSpread的关系为 1.0f + 迭代次数i * blurSpeed ，加一是为了保证值最小能为1
downSample：对原图进行降采样，也就是降低图片的像素，这样既能优化性能，又能获得更平滑的模糊效果

2. Shader效果

（1）提取较亮区域 - pass1

将图片转为灰度，灰度就能表示该像素的亮度，之后对亮度减去阈值，此时只有原本亮度值大于阈值的值能够依然保持为正数。

不知道有没有人和我一样对最后一步的 c * val 有疑惑，确实暗部区域归0了，但是亮部区域也可能会变得比原本暗，这对吗？最后我的理解是，因为在最后一个pass中，将模糊后的图和原图混合的方式是 “相加”，也就是在原图亮度的基础上进行一个提亮，所以这样处理也能让辉光更加柔和，当然只是我的想法啦~

v2fExtractBright vertExtractBright (appdata_img v){
    v2fExtractBright o;
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv = v.texcoord;
    return o;
}
            
fixed luminance(fixed4 col){//计算灰度值
    return col.r * 0.3 + col.g * 0.59 + col.b * 0.11 ;
} 

fixed4 fragExtractBright(v2fExtractBright i): SV_TARGET0{
    fixed4 c = tex2D(_MainTex, i.uv);
    fixed lum = luminance(c);
    fixed val = clamp(lum - _LuminaceThreshold, 0.0, 1.0);
    return c * val;//截取较亮区域
}

（2）高斯模糊 - pass2&3

高斯模糊的本质是对每个顶点，利用他附近的点的颜色进行平均，使得图片变得模糊。做法就不说啦，有点老生常谈，讲几个写代码时需要对算法进行优化的点：

① 优化1：

将高斯模糊分为两个pass实现：将高斯的卷积核（比如是5x5）拆成了一个纵向向量（5x1）与一个横向向量（1x5），也就是先对图片在纵向上模糊一次，再在横向上模糊一次，反过来也成立，这就是高斯核的分离性。

这样能节省性能开销，因为 不拆的时候，假如原图有1000x1000个像素，那么模糊需要的采样数则为1000x1000(总像素数)x5x5(每个卷积核有25个值)；而如果拆成两个一维向量的乘积 进行两次模糊，就只需要1000x1000x5x2次采样。

② 优化2：

另外，由于卷积核是对称的，所以在写代码时，仅用3个位置就能表示出一个完整的高斯核。
 

_MainTex_TexelSize指的是 纹理单个像素的大小

v2fBlur vertBlurVertical (appdata_img v){
    v2fBlur o;
    o.pos = UnityObjectToClipPos(v.vertex);
    half2 uv = v.texcoord;
    //计算邻域的纹理坐标（纵向5维向量）
    o.uv[0] = uv;
    o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;//上移1个单位
    o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;//下移1个单位
    o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;//上移2个单位
    o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;//下移2个单位
    return o;
}

v2fBlur vertBlurHorizontal (appdata_img v){
    v2fBlur o;
    o.pos = UnityObjectToClipPos(v.vertex);
    half2 uv = v.texcoord;
    //计算邻域的纹理坐标（横向5维向量）
    o.uv[0] = uv;
    o.uv[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;//右移1个单位
    o.uv[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;//左移1个单位
    o.uv[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;//右移2个单位
    o.uv[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;//左移2个单位
    return o;
}

fixed4 fragBlur(v2fBlur i): SV_TARGET0{
    float weight[3] = {0.4026, 0.2442, 0.0545};//高斯核的权重值
                
    fixed3 sum;//5个权重值之和
    sum = tex2D(_MainTex, i.uv[0]).rbg * weight[0];
    for(int it = 1; it < 3; it++){
        sum += tex2D(_MainTex, i.uv[it*2-1]).rgb * weight[it];
        sum += tex2D(_MainTex, i.uv[it*2]).rgb * weight[it];
    }
    return fixed4(sum, 1.0);
}

（3）图像混合 - pass4

这就是将原图的颜色直接与模糊图的亮度进行一个叠加啦，用的是加法。

v2fBloom vertBloom (appdata_img v){
    v2fBloom o;
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv.xy = v.texcoord;//xy存储_MainTex的纹理坐标
    o.uv.zw = v.texcoord;//zw存储_Bloom的纹理坐标

    //平台差异兼容，做翻转处理
    #if UNITY_UV_STARTS_AT_TOP
    if(_MainTex_TexelSize.y < 0.0)
        o.uv.w = 1.0 - o.uv.w;
    #endif

    return o;
}

fixed4 fragBloom(v2fBloom i): SV_TARGET0{
    return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
}

3. C#调用流程

① Graphics.Blit(src, buffer0, m, 0)： 先将图片降采样，用降采样后的宽高 创建临时的RenderTexture - buffer0，提取亮部存于 buffer0 中；
②  Graphics.Blit(buffer0, buffer1, m, 1)：之后就可以对 buffer0 进行纵向的高斯模糊，将计算结果存于新创建的buffer1；
③ Graphics.Blit(buffer0, buffer1, m, 2)：将buffer1给到buffer0，继续对 buffer0 进行横向的高斯模糊，将计算结果存于buffer1；
④ Graphics.Blit(buffer0, dest, m, 3)：将buffer1给到buffer0，对buffer0进行原图叠加，显示到屏幕上。

每次交换缓冲区时，代码为：
RenderTexture.ReleaseTemporary(buffer0);
buffer0 = buffer1;
为什么要先释放再交换？因为 buffer 只是引用变量，后面的 “=” 不是赋值，而是只改变了引用指向，所以如果不先进行释放，原指向数据就会永远保留在内存中，有可能会引起内存泄漏。

public class BloomEffect : MonoBehaviour
{
    Material m;
    [Range(0, 4)] public int iterations = 3;//高斯模糊迭代次数
    [Range(0.2f, 3.0f)] public float blurSpread = 0.6f;//每次迭代模糊范围的增长速度
    [Range(1, 8)] public int downSample = 2;//将图片像素量减少的降采样系数，能减少需要处理的像素量，提高性能
    [Range(0.0f, 4.0f)] public float luminaceThreshold = 0.6f;//模糊阈值


    private void Awake()
    {
        m = new Material(Shader.Find("Hidden/Bloom"));
    }

    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        Debug.Log("OnRenderImage called");
        
        //降采样
        int rtW = src.width / downSample;
        int rtH = src.height / downSample;
        RenderTexture buffer0 = RenderTexture.GetTemporary(rtW, rtH, 0);
        buffer0.filterMode = FilterMode.Bilinear;

        //pass1，提取亮区
        m.SetFloat("_LuminaceThreshold", luminaceThreshold);
        Graphics.Blit(src, buffer0, m, 0);

        //pass2&3，高斯
        for(int i = 0; i < iterations; i++)
        {
            m.SetFloat("_BlurSize", 1.0f + i * blurSpread);
            RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
            Graphics.Blit(buffer0, buffer1, m, 1);//纵向

            RenderTexture.ReleaseTemporary(buffer0);
            buffer0 = buffer1;
            buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
            Graphics.Blit(buffer0, buffer1, m, 2);//横向

            RenderTexture.ReleaseTemporary(buffer0);
            buffer0 = buffer1;
        }

        //pass4，混合
        m.SetTexture("_Bloom", buffer0);
        Graphics.Blit(buffer0, dest, m, 3);
        RenderTexture.ReleaseTemporary(buffer0);

        Graphics.Blit(src, dest, m);
    }
}


http://www.kler.cn/a/561113.html

相关文章：

  • Spring Boot 整合原生的 mybatis
  • C++与Python实现LiDAR点云投影对比：关键差异与易错点详解
  • TVS管学习记录
  • 趣解http和https各自的原理以及它们的区别
  • Unity Mixamo模型更好的适配角色模型
  • 设计模式觉醒系列(01)设计模式的基石 | 六大原则的核心是什么?
  • 二级公共基础之数据库设计基础(一) 数据库系统的基本概念
  • 基于数据可视化学习的卡路里消耗预测分析
  • 计算机毕业设计SpringBoot+Vue.js古典舞在线交流平台(源码+文档+PPT+讲解)
  • 在Spring Boot+Vue前后端分离的项目中使用JWT实现基本的权限校验
  • 2步本地安装部署国产之光大模型DeepSeek，附Mac安装教程和安装包！
  • Oracle Fusion Middleware更改weblogic密码
  • AI手机的技术细节
  • Brave132编译指南 Linux篇 - 构建与运行（七）
  • 安装Redis并把Redis设置成windows下的服务然后进行Redis实例演示
  • QT：paintEvent、QPainter、QPaintDevice
  • **模式的好处 （设计模式）
  • 计算机视觉基础｜从 OpenCV 到频域分析
  • vue中使用地图
  • 第十三：路由两个注意点：