《Unity Shader入门精要》笔记（二十一）

闲鱼技术01 · 发表于 2022-8-31 17:07

本文为《Unity Shader入门精要》第十二章《屏幕后处理效果》的第5节内容《Bloom效果》。

本文相关代码，详见：
原书代码，详见原作者github：
<hr/>1. 什么是Bloom效果？

Bloom特效是游戏中常见的一种屏幕效果，可以模拟真实相机的一种图像效果，它让画面中较亮的区域“扩散”到周围的区域中，产生一种朦胧的效果。

2. 案例：Bloom效果实现

2.1 效果

本案例最终效果如下：

左：原图效果，右：Bloom效果

2.2 准备工作

完成如下准备工作：

新建名为Scene_12_5的场景，并去掉天空盒子；
导入一张图片（案例图路径：Assets/Textures/Chap12/sakura1），调整图片纹理类型为Sprite (2D and UI)，并拖拽到场景中，使其生成一个Sprite，调整其位置、朝向，使其正对相机；
新建名为Bloom的C#脚本；
新建名为Chapter12-Bloom的Unity Shader；
保存场景。

2.3 编写C#脚本

打开Bloom.cs脚本，编写如下代码：
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

// 集成后处理基类
public class Bloom : PostEffectsBase
{
// Bloom效果Shader
public Shader bloomShader;
// Bloom效果材质
public Material bloomMaterial = null;
public Material material
{
      get
      {
         bloomMaterial = CheckShaderAndCreateMaterial(bloomShader, bloomMaterial);
         return bloomMaterial;
      }
}

[Range(0, 4)]
public int iterations = 3;
[Range(0.2f, 3.0f)]
public float blurSpread = 0.6f;
[Range(1, 8)]
public int downSample = 2;
// 明度，在开启HDR后，亮度可以超过1
[Range(0.0f, 4.0f)]
public float luminanceThreshold = 0.6f;

private void OnRenderImage(RenderTexture source, RenderTexture destination)
{
      if (material != null)
      {
         material.SetFloat(&#34;_LuminanceThreshold&#34;, luminanceThreshold);

         // 出于性能考虑，对纹理宽高进行降采样
         int width = source.width / downSample;
         int height = source.height / downSample;

         // 分配一个临时的缓存
         RenderTexture buffer0 = RenderTexture.GetTemporary(width, height, 0);
         // 双线性过滤
         buffer0.filterMode = FilterMode.Bilinear;
         // 取原来纹理高于明度阈值的部分，渲染到降采样后的缓存纹理中
         Graphics.Blit(source, buffer0, material, 0);

         // 经过几次迭代，将纹理进行高斯模糊后暂存到buffer0缓存中
         for (int i = 0; i < iterations; i++)
         {
            material.SetFloat(&#34;_BlurSize&#34;, 1.0f + i * blurSpread);

            RenderTexture buffer1 = RenderTexture.GetTemporary(width, height, 0);
            // 使用第2个Pass进行竖直方向上的高斯模糊
            Graphics.Blit(buffer0, buffer1, material, 1);

            RenderTexture.ReleaseTemporary(buffer0);
            buffer0 = buffer1;

            buffer1 = RenderTexture.GetTemporary(width, height, 0);
            // 使用第3个Pass进行水平方向上的高斯模糊
            Graphics.Blit(buffer0, buffer1, material, 2);

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

         // 将高斯模糊后的纹理作为Bloom纹理
         material.SetTexture(&#34;_Bloom&#34;, buffer0);
         Graphics.Blit(source, destination, material, 3);

         RenderTexture.ReleaseTemporary(buffer0);
      }
      else
      {
         Graphics.Blit(source, destination);
      }
}
}

2.4 编写Shader代码

打开Chapter12-Bloom的Shader文件，编写代码如下：
Shader &#34;Unity Shaders Book/Chapter 12/Bloom&#34;
{
Properties
{
      // 主纹理
      _MainTex (&#34;Base (RGB)&#34;, 2D) = &#34;white&#34; {}
      // 高斯模糊后的较亮区域
      _Bloom (&#34;Bloom (RGB)&#34;, 2D) = &#34;black&#34; {}
      // 提取较亮区域使用的阈值
      _LuminanceThreshold (&#34;Luminance Threshold&#34;, Float) = 0.5
      // 控制不同迭代之间高斯模糊的模糊区域范围
      _BlurSize (&#34;Blur Size&#34;, Float) = 1.0
}

SubShader
{
      CGINCLUDE

      #include &#34;UnityCG.cginc&#34;

      sampler2D _MainTex;
      // 主纹理的纹素大小（例如：一张512 * 512的纹理，纹素大小为1/512）
      // 利用纹素，做相邻区域内纹理采样时，计算各相邻区域的纹理坐标
      half4 _MainTex_TexelSize;
      sampler2D _Bloom;
      float _LuminanceThreshold;
      float _BlurSize;

      struct v2f
      {
         float4 pos : SV_POSITION;
         half2 uv : TEXCOORD0;
      };

      v2f vertExtractBright(appdata_img v)
      {
         v2f o;
         o.pos = UnityObjectToClipPos(v.vertex);
         o.uv = v.texcoord;
         return o;
      }

      fixed luminance(fixed4 color)
      {
         return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
      }

      // 截取大于阈值部分的明度
      fixed4 fragExtractBright(v2f i) : SV_Target
      {
         fixed4 c = tex2D(_MainTex, i.uv);
         fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 1.0);
         return c * val;
      }

      struct v2fBloom
      {
         float4 pos : SV_POSITION;
         // 使用half4，记录两套UV纹理
         half4 uv : TEXCOORD0;
      };

      v2fBloom vertBloom(appdata_img v)
      {
         v2fBloom o;
         o.pos = UnityObjectToClipPos(v.vertex);
         // 主纹理坐标
         o.uv.xy = v.texcoord;
         // Bloom纹理坐标
         o.uv.zw = v.texcoord;

// 对纹理坐标进行平台差异化处理（不同平台纹理坐标方向不同）
#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_Target
      {
         return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.zw);
      }

      ENDCG

      // 屏幕后处理“标配”
      ZTest Always
      Cull Off
      ZWrite Off

      Pass
      {
         CGPROGRAM

         #pragma vertex vertExtractBright
         #pragma fragment fragExtractBright

         ENDCG
      }

      // 使用上一节高斯纹理的纵向处理Pass
      UsePass &#34;Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_VERTICAL&#34;
      // 使用上一节高斯纹理的横向处理Pass
      UsePass &#34;Unity Shaders Book/Chapter 12/Gaussian Blur/GAUSSIAN_BLUR_HORIZONTAL&#34;

      Pass
      {
         CGPROGRAM

         #pragma vertex vertBloom
         #pragma fragment fragBloom

         ENDCG
      }
}

Fallback Off
}

2.5 配置Bloom脚本

将编写好的Shader文件拖拽到C#组件的Bloom Shader属性中（材质属性会自动生成填充）：

运行场景后，调整脚本的参数，可以得到不同的模糊效果：

以上是本次笔记的所有内容，下一篇笔记我们将学习《运动模糊》的相关知识。

<hr/>
写在最后

本文内容会同步发在笔者的公众号上，欢迎大家关注交流！
公众号：程序员叨叨叨（ID：i_coder）

Zephus · 发表于 2022-8-31 17:15

爷爷，快出来看，你大学关注的博主终于更新了

HuldaGnodim · 发表于 2022-8-31 17:25

[捂脸]最近一直在更

		自动登录	找回密码
密码			立即注册

《Unity Shader入门精要》笔记（二十一）

本帖子中包含更多资源