百人计划-图形 4.1 Bloom算法

kio0o0 发布于

Bloom算法介绍

快速预览效果

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_e6dcbaebf8170231ac5ec56428d2858f.png

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_b918bbd8b78b5c4c453dc24bbeeb6cd8.png

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_9129657316741f73e5ff98767ab87799.png

亮的地方更亮了（这符合我对灯光效果的想象），还会向周围扩散

Bloom是什么

  • Bloom，也称辉光，是一种常见的屏幕效果
  • 模拟摄像机的一种图像效果，让画面中较亮的区域“扩散”到周围的区域中，造成一种朦胧的效果
  • 可以让物体具有真实的明亮效果
  • 可以实现光晕效果

Bloom的实现原理

实现思路

1.提取原图较亮区域（利用阈值）
2.模糊提取部分
3.与原图混合/叠加

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_382bc73f8bb5ab436e3c7d819509590c.png

前置知识
HDR 和 LDR

  • HDR和LDR分别是是高动态范围和低动态范围的缩写

  • LDR

    • jpg、png格式图片
    • RGB通道范围在[0,1]

  • HDR

    • HDR、EXR格式图片
    • 可以超过1
    • 主要是因为我们生活的世界亮度差异很大，LDR的范围并不能描述所有的颜色亮度
    • 常与色调映射一起使用
高斯模糊
  • 实现图像模糊的一种方式
  • 可以减少图像噪声、降低细节层次
  • 利用高斯核进行卷积运算，得到模糊的图像

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_cdb7d3bc98e76e0c3a7ccef7dd3aa758.png

高斯核

  • 通过高斯函数定义的卷积核

  • 核中心：(0,0)

  • 核大小：3x3（通常使用）

  • 标准方差σ：1.5

  • 计算步骤：

    • 将（x，y）带入公式中，计算出权重值，（权重值代表当前处理像素的影响程度，离中心越近权重越大）
    • 为了保证卷积后图像不变暗，需要对高斯核进行归一化处理（每个权重除以所有权重的和）
      https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_01ee1aaf7f8dc03f9fe7c4f6b6e51513.png

  • 如果使用二维高斯核：

    • 计算量大，N×N的高斯核需要 N * N * W * H次纹理采样

  • 二维高斯核的可分离性

    • 二维高斯核可以拆成两个一维高斯核
    • 用两个一维高斯核先后对图像进行两次卷积操作
    • 采样次数变成2 * N * W * H，大大提高性能
    • 一维高斯核中包括了很多重复的权重（下例中0.0545，0.02442）
    • 下大小为5的高斯核，实际上只需要记录三个权重值即可（0.0545、0.2442、0.4026）
      https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/c3711cbb-f616-412f-a004-8663356b1a06_f39d0b5953f08f51248500b988a7316a.png
卷积

  • 一种常用的图像操作手段

  • 利用“卷积核”对图像的每个像素进行一系列操作

  • ​卷积核：

    • 通常是由四方形网格结构，该区域内每个放个都有一个权重值

  • 当我们对图像中的像素进行卷积时：

    • 会把卷积核的中心放置在该像素上
    • 翻转核之后再依次计算核中每个元素和其覆盖的图像像素值的乘积并求和
    • 得到的结果就是该位置的新像素值
    • 周围像素对该像素的影响

    https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/卷积_34b5e8a2990b087c92a88043b4e805bb.gif

3Blue1Brown# 那么……什么是卷积？
王木头学科学#卷积介绍部分

滤波

更详细需要去回顾GAMES101-L6

从图像处理看，使用滤波可以抹掉特定频率的信号，从而实现模糊的效果。

  • 高通滤波：提取边缘（信号变化大的地方）
  • 低通滤波：模糊

卷积定理：时域上的卷积就是频域上的乘积（时域上的乘积=频域上的卷积）

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_04f5426def1e9b4ebc2aa578132c3a4f.png

Bloom算法应用

配合自发光效果

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_5fb1f7320baa4afb8620fcd1b2220814.png

配合粒子特效

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_9129657316741f73e5ff98767ab87799.png

配合ToneMapping

Bloom效果和ToneMapping结合可以较好的保留暗部和亮部的细节

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_4242c4cfc43ecb19ba248278e931830c.png

GodRay效果

使用径向模糊代替高斯模糊，模拟光线往某个方向扩散的效果

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_6babb38a8a74af81fa20476641623164.png

GodRay配合ToneMapping

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_042da73f311dc84b0d83f821edab0789.png

大佬关于GodRay不等距采样的想法

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_01fe9082d81fb500807e9476b4ca210a.png

Bloom算法实现

基于Unity Builtin管线的实现方案（作业会给出URP方案）

详细可以看入门精要12章，后期处理部分

C#代码部分

用于屏幕后处理效果的一个基类，增加了检查当前平台是否支持功能，以及创建用于处理渲染纹理的材质

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

[ExecuteInEditMode]
[RequireComponent(typeof(Camera))]
public class PostEffectsBase : MonoBehaviour
{
    protected void Start()
    {
        CheckResource();
    }

    protected void CheckResource()
    {
        bool isSupported = CheckSupport();
        if (isSupported == false)
            NotSupported();
    }

    protected void NotSupported()
    {
        enabled = false;
    }

    protected bool CheckSupport()
    {
        if (SystemInfo.supportsImageEffects == false || SystemInfo.supportsRenderTextures == false)
        {
            Debug.LogWarning("This Platform does not support image effects or render textures.");
            return false;
        }

        return true;
    }
    
    // Called when need to create the material used by this effect
    protected Material CheckShaderAndCreateMaterial(Shader shader, Material material)
    {
        if (shader == null)
        {
            return null;
        }

        if (shader.isSupported && material && material.shader == shader)
        {
            return material;
        }

        if (!shader.isSupported)
        {
            return null;
        }
        else
        {
            material = new Material(shader)
            {
                hideFlags = HideFlags.DontSave
            };
            return material ? material : null;
        }

    }
}

具体调用OnRenderImage函数的脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BloomTest : PostEffectsBase
{
    public Shader bloomShader;//bloom test shader 需要用cs脚本给shader传数据
    private Material bloomMaterial = null;
    public Material material
    {
        get
        {
            //《入门精要》P245-246 //检查shader可用性，通过后返回使用该shader的材质，否则为null
            bloomMaterial = CheckShaderAndCreateMaterial(bloomShader, bloomMaterial);
            return bloomMaterial;
        }
    }

    /* 《入门精要》P259-262 */

    [Range(0, 4)]
    public int iterations = 3;//高斯模糊迭代次数，数值越大越模糊
    [Range(0.2f, 3.0f)]
    public float blurSpread = 0.6f;//高斯模糊范围，数值越大越模糊
    [Range(1, 8)]
    public int downSample = 2;//降采样系数，控制渲染纹理的大小（render texture）,
                              //数值越大，渲染纹理越小，处理模糊像素越少，但过大可能使图像像素化（渲染纹理太小）
    [Range(0.0f, 4.0f)]//由于开启HDR，亮度范围可以超过1.0f
    public float luminanceThreshold = 0.6f;//亮度阈值范围

    //获取当前渲染图像（渲染纹理）     source原图         dest目标图像即模糊后图像
    void OnRenderImage(RenderTexture src, RenderTexture dest)
    {
        if(material != null)//检查材质是否可用
        {
            material.SetFloat("_LuminanceThreshold", luminanceThreshold);//向材质传入亮度阈值
            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, material, 0);//调用shader中第0个pass【程序中从0开始计数，其实就是第一个pass】
                                                     //提取图像较亮区域，将结果保存在buffer0

            for(int i=0; i < iterations; i++)//高斯模糊操作
            {
                material.SetFloat("_BlurSize", 1.0f + i * blurSpread);//高斯模糊范围
                RenderTexture buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);
                Graphics.Blit(buffer0, buffer1, material, 1);//调用pass1,垂直方向高斯模糊，渲染结果存入buffer1

                RenderTexture.ReleaseTemporary(buffer0);//释放缓存,模糊后结果存入buffer1
                buffer0 = buffer1;//buffer1结果存入(覆盖)buffer0
                buffer1 = RenderTexture.GetTemporary(rtW, rtH, 0);//重新分配buffer1
                Graphics.Blit(buffer0, buffer1, material, 2);//调用pass2,水平方向高斯模糊，渲染结果存入buffer1

                RenderTexture.ReleaseTemporary(buffer0);//释放缓存,模糊后结果存入buffer1
                buffer0 = buffer1;//重新分配buffer1

                /*
                 * 每次模糊使用结果为上次模糊的结果
                 */
            }
            
            //for debug
            // Graphics.Blit(buffer0,dest);//将高斯模糊循环注释，取消本行注释，可以观察pass0效果即截取亮度
            
            material.SetTexture("_Bloom", buffer0);//将buffer0（渲染纹理）数据传给shader
            Graphics.Blit(src, dest, material, 3);// 调用pass3,将模糊结果与原图混合,并输出给dest最终结果
            RenderTexture.ReleaseTemporary(buffer0);//释放缓存
        }
        else
        {
            Graphics.Blit(src, dest);//其他异常情况直接输出原图
        }
    }
}

Shader cg语言部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
Shader "Unlit/BloomTest"
{
    Properties
    {
        //属性名要与C#脚本传递数据时用的属性名一样
        _MainTex ("Base(RGB)", 2D) = "white" {}//原图，src渲染纹理
        _Bloom ("Bloom(RGB)", 2D) = "black" {}//Bloom，模糊后的渲染纹理，会和原图（_MainTex）叠加
        _LuminanceThreshold ("Luminance Threshold", Float) = 0.5//模糊的亮度阈值
        _BlurSize ("Blur Size", Float) = 1.0//模糊范围
    }
    SubShader
    {
        CGINCLUDE
        #include "UnityCG.cginc"
        sampler2D _MainTex;
        half4 _MainTex_TexelSize;
        sampler2D _Bloom;
        float _LuminanceThreshold;
        float _BlurSize;

		struct v2fExtractBright {
			float4 pos : SV_POSITION; 
			half2 uv : TEXCOORD0;
		};	
         
		v2fExtractBright vertExtractBright(appdata_img v) {//提取较亮区域顶点着色器
			v2fExtractBright o;
			o.pos = UnityObjectToClipPos(v.vertex);//坐标变换
			o.uv = v.texcoord;	 //纹理坐标获取
			return o;
		}

        fixed luminance(fixed4 color){//亮度计算函数，rgb -> Brightness
            return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
        }

        fixed4 fragExtractBright(v2fExtractBright i) : SV_TARGET0 {//提取较亮区域片元着色器
            fixed4 c = tex2D(_MainTex, i.uv);//原图纹理采样
            fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 1.0);//截取通过阈值的亮度

            return c * val;//原图与截取结果的乘积得到图像亮区（没通过的亮度都变0了，那原图中相应区域的像素×0=0）
        }

		struct v2fBlur {
			float4 pos : SV_POSITION;
			half2 uv[5]: TEXCOORD0;//5x5 二维高斯核（最终会拆成两个一维5元素高斯核）
		};

        v2fBlur vertBlurVertical(appdata_img v){
            v2fBlur o;
            o.pos = UnityObjectToClipPos(v.vertex);

            half2 uv = v.texcoord;
            //由于是垂直运算，所以是y方向
            o.uv[0] = uv;//（0，0）
            o.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;//(0,1) 向上
            o.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;//(0,-1)向下
            o.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;//(0,2) 向上
            o.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;//(0,-2) 向下
            
            return o;
        }

        v2fBlur vertBlurHorizontal(appdata_img v){
            v2fBlur o;
            o.pos = UnityObjectToClipPos(v.vertex);
            //由于是水平运算，所以是x方向
            half2 uv = v.texcoord;
            o.uv[0] = uv;//（0，0）
            o.uv[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;//(1,0) 向右
            o.uv[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;//(-1,0) 向左
            o.uv[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;//(2,0) 向右
            o.uv[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;//(-2,0) 向左

            return o;
        }

		fixed4 fragBlur(v2fBlur i) : SV_Target {
            float weight[3] = {0.4026, 0.2442, 0.0545};//一维高斯函数的对称性{0.0545,0.0242,0.4026, 0.2442, 0.0545}
			fixed3 sum = tex2D(_MainTex, i.uv[0]).rgb * weight[0];//存储模糊后像素值

            //卷积运算
            /*
            第一次循环：uv[1]*weight[1]  uv[2]*weight[1]
            第二次循环：uv[3]*weight[2]  uv[4]*weight[2]
            */
            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);
        }

		struct v2fBloom {
			float4 pos : SV_POSITION; 
			half4 uv : TEXCOORD0;
		};

		v2fBloom vertBloom(appdata_img v) {
			v2fBloom o;
			o.pos = UnityObjectToClipPos (v.vertex);


            /*
            两个纹理坐标，储存在half4变量uv 
            xy分量：_MainTex 纹理
            zw分量：_Bloom 纹理
            */
            o.uv.xy = v.texcoord;
            o.uv.zw = v.texcoord;

            #if UNITY_UV_STARTS_AT_TOP
            if(_MainTex_TexelSize.y < 0.0)//平台差异处理，详见《入门精要》P115 5.6.1 
                o.uv.w = 1.0 - o.uv.w;
            #endif

            return o;
        }

		fixed4 fragBloom(v2fBloom i) : SV_Target {
            //return tex2D(_Bloom, i.uv.zw);//for debug 仅输出处理后图像
			return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);//原图与模糊图叠加
		} 

        ENDCG

        ZTest Always Cull Off ZWrite Off//定义用于屏幕后处理的相关渲染状态：开启深度测试（Always）关闭剔除 关闭深度写入
        Pass { //Pass 0 : 提取较亮区域
            CGPROGRAM
			#pragma vertex vertExtractBright
			#pragma fragment fragExtractBright
            ENDCG
        }

        Pass {//Pass 1 : 垂直方向高斯模糊
            CGPROGRAM
			#pragma vertex vertBlurVertical  
			#pragma fragment fragBlur
            ENDCG
        }

        Pass {//Pass 2 : 水平方向高斯模糊
            CGPROGRAM
			#pragma vertex vertBlurHorizontal  
			#pragma fragment fragBlur
            ENDCG
        }

        Pass {//Pass 3 : 原图和bloom图混合（叠加）
            CGPROGRAM
			#pragma vertex vertBloom
			#pragma fragment fragBloom
            ENDCG
        }
    }
}

参考资料

作业

手动实现Bloom效果

https://raw.githubusercontent.com/kiodyd/image-host/main/Qexo/2023/2/image_b6c6a4665818d560f2cd996ebd69a9bf.png

简单加了点Bloom，原图地球不是很亮，不敢拉太高。

URP的方案是通过ScriptableRendererFeature来实现的，下面提供几篇参考文章。

https://zhuanlan.zhihu.com/p/161658349
https://zhuanlan.zhihu.com/p/400858121

值得一提的是有个bug找了半天，这里的_Bloom纹理是通过renderPass将RT缓冲传进来的，原先builtin是用的小写"black"，但在URP中一直传不过来很奇怪，改成大写就成功了，不知道有没有大佬知道原因。

1
2
3
4
5
6
7
8
9
10
11
Properties
    {
        // 在属性面板中隐藏，名称是固定名称
        [HideInInspector]_MainTex ("Texture", 2D) = "white" {}
        // 以下变量与RenderPass中对应
        //"Black"如果写成小写“black”,renderFeature 中的高亮渲染贴图会传不过来
        _Bloom ("Bloom (RGB)", 2D) = "Black" {}//高斯模糊后的结果
        _LuminanceThreshold ("Luminance Threshold", Float) = 0.5 //阈值
		_BlurSize ("Blur Size", Float) = 1.0 //模糊半径
        _Intensity ("Intensity", Float) = 1.0 //模糊强度
    }

然后在帧调试器中发现Unity自己实现的bloom是先下采样再上采样，很神奇，下次研究下。
代码在Urp包的Runtime/Passes目录

Volume面板显示

1
2
3
4
5
6
7
8
9
10
11
[System.Serializable, VolumeComponentMenuForRenderPipeline("Custom/Bloom", typeof(UniversalRenderPipeline))]
public class CustomBloom : VolumeComponent, IPostProcessComponent
{
    public FloatParameter intensity = new FloatParameter(1.0f);
    public ClampedIntParameter iterations = new ClampedIntParameter(3, 0, 4);
    public ClampedIntParameter downSample = new ClampedIntParameter(2, 1, 8);
    public ClampedFloatParameter blurSpread = new ClampedFloatParameter(0.6f, 0.2f, 3.0f);
    public ClampedFloatParameter luminanceThreshold = new ClampedFloatParameter(0.6f, 0.0f, 4.0f);
    public bool IsActive() => active;
    public bool IsTileCompatible() => false;
}

自定义ScriptableRendererFeature

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
public class CustomBloomRenderFeature : ScriptableRendererFeature
{
    public RenderPassEvent passEvent = RenderPassEvent.BeforeRenderingPostProcessing;
    [SerializeField] private Shader _Shader;
    private Material _MatInstance;
    private CustomBloomPass _bloomPass;
    public override void Create()
    {
        _bloomPass = new CustomBloomPass()
        {
            renderPassEvent = passEvent
        };
    }

    public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
    {
        if(_Shader == null) return;
        if (_MatInstance == null)
            _MatInstance = CoreUtils.CreateEngineMaterial(_Shader);
        RenderTargetIdentifier currentRT = renderer.cameraColorTarget;
        _bloomPass.Setup(currentRT, _MatInstance);
        renderer.EnqueuePass(_bloomPass);
    }
}

自定义RendererPass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
public class CustomBloomPass : ScriptableRenderPass
{
    //标签名，用于在帧调试器中显示缓冲区的名称
    private RenderTargetIdentifier _RenderTexture;
    private Material _Material;
    private CustomBloom _Parameters;
    private RenderTargetIdentifier _buffer1;
    private RenderTargetIdentifier _buffer2;
    const string _passTag = "Custom Bloom Pass";
    readonly int _bufferid1 = Shader.PropertyToID("bufferblur1");
    readonly int _bufferid2 = Shader.PropertyToID("bufferblur2");
    public override void Execute(ScriptableRenderContext context, ref RenderingData renderingData)
    {
        // 获取Volume中的参数信息
        VolumeStack stack = VolumeManager.instance.stack;
        _Parameters = stack.GetComponent<CustomBloom>();
        
        // 根据该pass的tag信息来获取渲染命令(对象池)
        CommandBuffer command = CommandBufferPool.Get(_passTag);
        
        // 向command中写入所有的渲染命令
        Render(command, ref renderingData);
        
        // 执行命令，执行完毕后释放该命令，并一同释放已经使用过的tempRT
        context.ExecuteCommandBuffer(command);
        CommandBufferPool.Release(command);
        command.ReleaseTemporaryRT(_bufferid1);
        command.ReleaseTemporaryRT(_bufferid2);
    }


    private void Render(CommandBuffer command, ref RenderingData renderingData)
    {
        if (_Parameters.IsActive() && !renderingData.cameraData.isSceneViewCamera)
        {
            _Material.SetFloat("_Intensity", _Parameters.intensity.value);
            _Material.SetFloat("_LuminanceThreshold", _Parameters.luminanceThreshold.value);
            
            //获取目标相机的描述信息，创建一个结构体，里面有render texture各中信息，比如尺寸，深度图精度等等
            RenderTextureDescriptor opaqueDesc = renderingData.cameraData.cameraTargetDescriptor;
            int width = opaqueDesc.width / _Parameters.downSample.value;
            int height = opaqueDesc.height / _Parameters.downSample.value;
            
            // 申请缓冲区
            command.GetTemporaryRT(_bufferid1, width, height, 0, FilterMode.Bilinear, RenderTextureFormat.ARGB32);
            command.GetTemporaryRT(_bufferid2, width, height, 0, FilterMode.Bilinear, RenderTextureFormat.ARGB32);
            _buffer1 = new RenderTargetIdentifier(_bufferid1);
            _buffer2 = new RenderTargetIdentifier(_bufferid2);
            
            // 第一个PASS，获取高亮区域
            command.Blit(_RenderTexture, _buffer1, _Material, 0);
            
            // 高亮区域高斯模糊
            for (int i = 0; i < _Parameters.iterations.value; i++)
            {
                _Material.SetFloat("_BlurSize", 1.0f + i * _Parameters.blurSpread.value);
                
                // 竖直方向模糊
                command.Blit(_buffer1, _buffer2, _Material, 1);

                // 水平方向模糊
                command.Blit(_buffer2, _buffer1, _Material, 2);
            }
            
            // 混合原图和模糊结果
            // _Material.SetTexture("_Bloom", _buffer1.Identifier()); //居然没有这个重载
            command.SetGlobalTexture("_Bloom", _buffer1);
            command.Blit(_RenderTexture, _buffer2, _Material, 3);
            
            // 将结果写回原图
            command.Blit(_buffer2, _RenderTexture);
        }
    }

    public void Setup(RenderTargetIdentifier currentRT, Material matInstance)
    {
        _RenderTexture = currentRT;
        _Material = matInstance;
    }
}

Shader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
Shader "URPLearn/BloomTest"
{
    Properties
    {
        // 在属性面板中隐藏，名称是固定名称
        [HideInInspector]_MainTex ("Texture", 2D) = "white" {}
        // 以下变量与RenderPass中对应
        //"Black"如果写成小写“black”,renderFeature 中的高亮渲染贴图会传不过来
        _Bloom ("Bloom (RGB)", 2D) = "Black" {}//高斯模糊后的结果
        _LuminanceThreshold ("Luminance Threshold", Float) = 0.5 //阈值
		_BlurSize ("Blur Size", Float) = 1.0 //模糊半径
        _Intensity ("Intensity", Float) = 1.0 //模糊强度
    }
    SubShader
    {
        Tags
        {
            "RenderPipeline"="UniversalRenderPipeline"
        }
        Cull off
        ZWrite Off
        ZTest Always
        
        HLSLINCLUDE
        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"

        TEXTURE2D(_MainTex); SAMPLER(sampler_MainTex);
        TEXTURE2D(_Bloom); SAMPLER(sampler_Bloom);
        
        CBUFFER_START(UnityPerMaterial)
        float4 _MainTex_TexelSize;
        float _LuminanceThreshold;
        float _BlurSize;
        float _Intensity;
        CBUFFER_END

        struct Attributes
        {
            float4 positionOS : POSITION;
            half2 texcoord : TEXCOORD0;
        };

        // 明亮度公式
        //计算得到像素的亮度值
		half luminance(half4 color) {
			return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
		}
        
        // ######第1个PASS使用数据######
        struct v2fExtractBright
        {
            float4 positionCS : SV_POSITION;
            half2 uv : TEXCOORD0;
        };

        v2fExtractBright vertExtractBright(Attributes IN)
        {
            v2fExtractBright OUT;
            OUT.positionCS = TransformObjectToHClip(IN.positionOS);
            OUT.uv = IN.texcoord;
            return  OUT;
        }

        half4 fragExtractBright(v2fExtractBright IN) : SV_Target
        {
            half4 c = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv);

            // 计算亮度超过阈值部分的像素
            half val = clamp(luminance(c) - _LuminanceThreshold, 0, 1);
            return c * val;
        }

        // ######第2/3个PASS使用数据######
        struct v2fBlur
        {
            float4 positionCS : SV_POSITION;
            // 由于卷积核大小为5x5的二维高斯核可以拆分两个大小为5的一维高斯核
        	// uv[0]存储了当前的采样纹理
        	// uv[1][2][3][4]为高斯模糊中对邻域采样时使用的纹理坐标
            half2 uv[5] : TEXCOORD0;
        };
        
        v2fBlur vertBlurVertical(Attributes IN)
        {
            v2fBlur OUT;
            OUT.positionCS = TransformObjectToHClip(IN.positionOS);
            half2 uv = IN.texcoord;
            // 计算参与卷积的竖直方向像素UV坐标，与卷积核对应
            OUT.uv[0] = uv;
            OUT.uv[1] = uv + float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
			OUT.uv[2] = uv - float2(0.0, _MainTex_TexelSize.y * 1.0) * _BlurSize;
			OUT.uv[3] = uv + float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
			OUT.uv[4] = uv - float2(0.0, _MainTex_TexelSize.y * 2.0) * _BlurSize;
            return OUT;
        }

        v2fBlur vertBlurHorizontal(Attributes IN)
        {
            v2fBlur OUT;
            OUT.positionCS = TransformObjectToHClip(IN.positionOS);
            half2 uv = IN.texcoord;
            // 计算参与卷积的水平方向像素UV坐标，与卷积核对应
            OUT.uv[0] = uv;
            OUT.uv[1] = uv + float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
			OUT.uv[2] = uv - float2(_MainTex_TexelSize.x * 1.0, 0.0) * _BlurSize;
			OUT.uv[3] = uv + float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
			OUT.uv[4] = uv - float2(_MainTex_TexelSize.x * 2.0, 0.0) * _BlurSize;
            return OUT;
        }

        half4 fragBlur(v2fBlur IN) : SV_Target
        {
            // 高斯核权重，这里使用5x5，但有重复部分就定义大小3的数组了
            float weight[3] = {0.4026, 0.2442, 0.0545};

            half3 sum = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv[0]).rgb;

            // 中间像素
            sum *= weight[0];

            // 进行卷积计算，具体看笔记的演示图
            for (int it = 1; it < 3; it++) {
				sum += SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv[it*2-1]).rgb * weight[it];
				sum += SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv[it*2]).rgb * weight[it];
			}

            return half4(sum, 1.0f);
        }

        // ######第4个PASS使用数据######
        struct v2fBloom
        {
            float4 positionCS : SV_POSITION;
            half4 uv : TEXCOORD0;
        };

        v2fBloom vertBloom(Attributes IN)
        {
            v2fBloom OUT;
            OUT.positionCS = TransformObjectToHClip(IN.positionOS);

            OUT.uv.xy = IN.texcoord;//_MainTex的纹理坐标
            OUT.uv.zw = IN.texcoord;//_Bloom的纹理坐标
            // 平台差异化处理
        	//判断y是否小于0，如果是就进行翻转处理
			#if UNITY_UV_STARTS_AT_TOP			
			if (_MainTex_TexelSize.y < 0.0)
				OUT.uv.w = 1.0 - OUT.uv.w;
			#endif

            return OUT;
        }

        half4 fragBloom(v2fBloom IN) : SV_Target
        {
            half4 tex = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv.xy);
            half4 bloom = SAMPLE_TEXTURE2D(_Bloom, sampler_Bloom, IN.uv.zw);
            return tex + bloom * _Intensity;
        }
        ENDHLSL
        
        // 第一个Pass 提取画面中亮度高的区域
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertExtractBright
            #pragma fragment fragExtractBright
            ENDHLSL
        }
        
        // 第二个Pass 竖直方向的高斯模糊
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertBlurVertical
            #pragma fragment fragBlur
            ENDHLSL
        }
        
        // 第三个Pass 水平方向的高斯模糊
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertBlurHorizontal
            #pragma fragment fragBlur
            ENDHLSL
        }
        
        // 第四个Pass 混合模糊后的高亮区域和原图
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertBloom
            #pragma fragment fragBloom
            ENDHLSL
        }
    }
}

GodRay效果

径向模糊介绍：

  • 径向模糊（Radial Blur）可以给画面带来很好的速度感，是各类游戏中后处理的常客，也常用于Sun Shaft等后处理特效中作为光线投射的模拟。

径向模糊的原理：

  • 首先选取一个径向轴心（Radial Center）
  • 然后将每一个采样点的uv基于此径向轴心进行偏移（offset）
  • 并进行一定次数的迭代采样
  • 最终将采样得到的RGB值累加，并除以迭代次数。

shader部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
Shader "URPLearn/GodRayTest"
{
    Properties
    {
        // 在属性面板中隐藏，名称是固定名称
        [HideInInspector]_MainTex ("Texture", 2D) = "white" {}
        // 以下变量与RenderPass中对应
        [HideInInspector]_BlurTex ("Blur", 2D) = "white" {}			//径向模糊后的结果
		_ViewPortLightPos ("ViewPortLightPos", Vector) = (0,0,0,0)	//视角空间下光源位置
        _Offsets ("Offsets", Vector) = (0,0,0,0)					//采样偏移
        _ColorThreshold ("ColorThreshold", Vector) = (0,0,0,0)		//高亮部分阈值
        _LightColor ("LightColor", Color) = (1,1,1,1)				//光颜色
        _LightFactor ("LightFactor", Float) = 1						//光强度
        _PowFactor ("PowFactor", Float) = 1							//提取高亮结果Pow系数，用于适当降低颜色过亮的情况
        _LightRadius ("LightRadius", Float) = 1						//光源影响范围
    }
    SubShader
    {
        Tags
        {
            "RenderPipeline"="UniversalRenderPipeline"
        }
        Cull off
        ZWrite Off
        ZTest Always
        
        HLSLINCLUDE
        #include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl"
        #define RADIAL_SAMPLE_COUNT 7
        
        TEXTURE2D(_MainTex); SAMPLER(sampler_MainTex);
        TEXTURE2D(_BlurTex); SAMPLER(sampler_BlurTex);
        
        CBUFFER_START(UnityPerMaterial)
        float4 _MainTex_TexelSize;
        float4 _BlurTex_TexelSize;
        float4 _ViewPortLightPos;   //视角空间下光源位置
        float4 _Offsets;            //采样偏移
        float4 _ColorThreshold;     //高亮部分阈值
        float4 _LightColor;         //光颜色
        float  _LightFactor;        //光强度
        float  _PowFactor;          //提取高亮结果Pow系数，用于适当降低颜色过亮的情况
        float  _LightRadius;        //光源影响范围
        CBUFFER_END

        struct Attributes
        {
            float4 positionOS : POSITION;
            half2 texcoord : TEXCOORD0;
        };

        // 明亮度公式
        //计算得到像素的亮度值
		half luminance(half3 color) {
			return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
		}
        
        // 提取亮部图像
		struct v2fExtractBright
		{
			float4 positionCS	: SV_POSITION;
			float2 uv			: TEXCOORD0;
		};
	 
		// 径向模糊
		struct v2fRadialBlur
		{
			float4 positionCS	: SV_POSITION;
			float2 uv			: TEXCOORD0;
			float2 blurOffset	: TEXCOORD1;
		};
	 
		// 混合
		struct v2fGodRay
		{
			float4 positionCS	: SV_POSITION;
			float2 uv			: TEXCOORD0;
			float2 uv1			: TEXCOORD1;
		};

        // 提取亮部图像VS
		v2fExtractBright vertExtractBright(Attributes IN)
		{
			v2fExtractBright OUT;
			OUT.positionCS = TransformObjectToHClip(IN.positionOS);
			OUT.uv = IN.texcoord.xy;
			// 平台差异化处理
			#if UNITY_UV_STARTS_AT_TOP
			if (_MainTex_TexelSize.y < 0)
				OUT.uv.y = 1 - OUT.uv.y;
			#endif	
			return OUT;
		}
	 
		// 提取亮部图像PS
		half4 fragExtractBright(v2fExtractBright IN) : SV_Target
		{
			half4 color = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv);
			float distFromLight = length(_ViewPortLightPos.xy - IN.uv);
			float distanceControl = saturate(_LightRadius - distFromLight);

			// 仅当color大于设置的阈值的时候才输出
			half4 thresholdColor = saturate(color - _ColorThreshold) * distanceControl;
			float luminanceColor = luminance(thresholdColor.rgb);
			luminanceColor = pow(luminanceColor, _PowFactor);
			return half4(luminanceColor, luminanceColor, luminanceColor, 1);
		}
	 
		// 径向模糊VS
		v2fRadialBlur vertRadialBlur(Attributes IN)
		{
			v2fRadialBlur OUT;
			OUT.positionCS = TransformObjectToHClip(IN.positionOS);
			OUT.uv = IN.texcoord.xy;

			// 径向模糊采样偏移值 * 沿光的方向权重
			OUT.blurOffset = _Offsets * (_ViewPortLightPos.xy - OUT.uv);

			return OUT;
		}
	 
		// 径向模拟PS
		half4 fragRadialBlur(v2fRadialBlur IN) : SV_Target
		{
			half4 color = half4(0,0,0,0);
			//通过迭代，将采样得到的RGB值累加
			for(int j = 0; j < RADIAL_SAMPLE_COUNT; j++)   
			{	
				color += SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv.xy);
				IN.uv.xy += IN.blurOffset; 	
			}
			//最后除以迭代次数
			return color / RADIAL_SAMPLE_COUNT;
		}
	 
		// 混合VS
		v2fGodRay vertGodRay(Attributes IN)
		{
			v2fGodRay OUT;
			OUT.positionCS = TransformObjectToHClip(IN.positionOS);
			OUT.uv.xy = IN.texcoord.xy;
			OUT.uv1.xy = OUT.uv.xy;
			#if UNITY_UV_STARTS_AT_TOP
			if (_MainTex_TexelSize.y < 0)
				OUT.uv.y = 1 - OUT.uv.y;
			#endif	
			return OUT;
		}

 		// 混合PS
		half4 fragGodRay(v2fGodRay IN) : SV_Target
		{
			half4 ori = SAMPLE_TEXTURE2D(_MainTex, sampler_MainTex, IN.uv1);
			half4 blur = SAMPLE_TEXTURE2D(_BlurTex, sampler_BlurTex, IN.uv);
			return ori + _LightFactor * blur * _LightColor;
		}
        ENDHLSL
        
        // 第一个Pass 提取高亮部分
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertExtractBright
            #pragma fragment fragExtractBright
            ENDHLSL
        }
        
        // 第二个Pass 径向模糊
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertRadialBlur
            #pragma fragment fragRadialBlur
            ENDHLSL
        }
        
        // 第三个Pass 将亮部图像与原图进行混合得到最终的GodRay效果
        Pass
        {
            HLSLPROGRAM
            #pragma vertex vertGodRay
            #pragma fragment fragGodRay
            ENDHLSL
        }
    }
}

Pass中关键的模糊部分，提取和混合和Bloom大差不差

1
2
3
4
5
6
7
8
9
10
11
// 通过循环迭代径向模糊
for (int i = 0; i < blurIteration; i++)
{
    float offset = samplerOffset * (i * 2 + 1);
    material.SetVector("_offsets", new Vector4(offset, offset, 0, 0));
    Graphics.Blit(buffer0, buffer1, material, 1);
    
    offset = samplerOffset * (i * 2 + 2);
    material.SetVector("_offsets", new Vector4(offset, offset, 0, 0));
    Graphics.Blit(buffer1, buffer0, material, 1);
}

思考：如何实现bloom的mask功能？

自己想了想最简单的是用一张额外的Mask记录（为了避免画面变亮，可以存储的alpha值越小，bloom效果越强烈）

查阅了下，有几种方案

  • 用Alpha通道来作为Mask，乘上Bloom的结果
  • 半透明物体可能有问题，可以采用两个通道来存储原Alpha
    • 第一个pass需要加ColorMask RGB（避免影响alpha存储）
    • 第二个pass需要加ColorMask A（避免影响第一个pass输出颜色）
  • 用SRP渲染一张Mask图
  • 用Command-Buffer
  • 用模板测试
  • 直接用Mask图
  • 总结：
    • 多用一张Mask图需要将标记物体渲染成Mask图，多一遍渲染开销，但好处是容易接入已有项目，后续维护成本低点
    • 使用Alpha通道需要修改已有的shader，并且半透明物体需要两个pass
    • 具体要根据项目半透明物体数量来权衡
kio0o0

kio0o0

如果可以做到不懂就问，做不到的事情就拒绝，或许可以活得更轻松点

101
6
26
NOTICE

正在努力学习图形学中！

CATEGORYS
TAGS
AMD OS X C#笔记 Github技巧 Hackintosh Lua笔记 Unity Unity Shader入门精要 c++笔记 cocos c语言笔记 drcom shader 代码设计 卡通渲染 图形学 学习 平板 性能优化 搞机 数据结构 游戏开发 百人计划 解题 计划 路由器 重构