Unity开发者联盟收藏本站
发帖教程新人必读切换到宽版

 找回密码
 立即注册
Unity开发者联盟»论坛 › 3D Answers 技术讨论 › 技术讨论 Technology Answers › Unity Shader - Bloom(光晕、泛光)
返回列表 发新帖
查看: 237|回复: 0

Unity Shader - Bloom(光晕、泛光)

[复制链接]
发表于 2024-8-2 09:21 | 显示全部楼层 |阅读模式
前言

Bloom（光晕）是一种计算机图形效果，用于视频游戏，演示和高动态范围衬着（HDRR）中，以再现真实相机的成像伪像。该效果会发生从图像中敞亮区域的边界延伸的条纹（或羽毛），从而造成超亮的光使摄像机或眼睛捕捉场景的幻觉。
效果对比如下:
左边是原图, 右边Bloom措置后的



道理:

Bloom的实现道理非常简单，大致分为三步:
1. 对需要措置的图像颠末亮度提取, 而且通过一个阙值来控制亮度 2. 对颠末亮度提取后的图像进行模糊措置(这里是采用高斯模糊) 3. 最后再叠加原图和模糊措置后的图像,输出即可
实现

下面我们来逐步的通过代码实现一下。
既然是后期特效， 那么基本框架和之前的后期措置一样， 首先在Camera上挂载一个C#脚本来捕捉摄像机衬着后的图像。
一 C#实现

新建一个Bloom.cs
PostEffectsBase 基类可以在这里获取(来自《Unity Shader入门精要》)
  1. using System.Collections;
  2. using UnityEngine;
  3. // ---------------------------【Bloom 全屏泛光后期】---------------------------
  4. //编纂状态下也运行  
  5. [ExecuteInEditMode]
  6. public class Bloom : PostEffectsBase
  7. {
  8.     public Shader bloomShader;
  9.     private Material mMaterial;
  10.     //bloom措置的shader
  11.     public Material material
  12.     {
  13.         get
  14.         {
  15.             mMaterial = CheckShaderAndCreateMaterial(bloomShader, mMaterial);
  16.             return mMaterial;
  17.         }
  18.     }
  19.     //迭代次数
  20.     [Range(0, 4)]
  21.     public int iterations = 3;
  23.     //模糊扩散范围
  24.     [Range(0.2f, 3.0f)]
  25.     public float blurSpread = 0.6f;
  26.     // 降频
  27.     private int downSample = 1;
  29.     // 亮度阙值
  30.     [Range(-1.0f, 1.0f)]
  31.     public float luminanceThreshold = 0.6f;
  32.     // bloom 强度
  33.     [Range(0.0f, 5.0f)]
  34.     public float bloomFactor = 1;
  35.     // bloom 颜色值
  36.     public Color bloomColor = new Color(1, 1, 1, 1);
  38.     void Awake()
  39.     {
  40.         bloomShader = Shader.Find(”lcl/screenEffect/Bloom”);
  41.     }
  43.     //-------------------------------------【OnRenderImage函数】------------------------------------   
  44.     // 说明：此函数在当完成所有衬着图片后被调用，用来衬着图片后期效果
  45.     //--------------------------------------------------------------------------------------------------------  
  46.     private void OnRenderImage(RenderTexture source, RenderTexture destination)
  47.     {
  48.         if (material)
  49.         {
  50.             int rtW = source.width >> downSample;
  51.             int rtH = source.height >> downSample;
  52.             RenderTexture texture1 = RenderTexture.GetTemporary(rtW, rtH, 0);
  53.             RenderTexture texture2 = RenderTexture.GetTemporary(rtW, rtH, 0);
  54.             // 亮度提取 - 通道0
  55.             material.SetFloat(”_LuminanceThreshold”, luminanceThreshold);
  56.             Graphics.Blit(source, texture1, material, 0);
  58.             // 高斯模糊 - 通道1
  59.             for (int i = 0; i < iterations; i++)
  60.             {
  61.                 //垂直高斯模糊
  62.                 material.SetVector(”_offsets”, new Vector4(0, 1.0f + i * blurSpread, 0, 0));
  63.                 Graphics.Blit(texture1, texture2, material, 1);
  64.                 //程度高斯模糊
  65.                 material.SetVector(”_offsets”, new Vector4(1.0f + i * blurSpread, 0, 0, 0));
  66.                 Graphics.Blit(texture2, texture1, material, 1);
  67.             }
  68.             //用模糊图和原始图计算出轮廓图  - 通道2
  69.             material.SetColor(”_BloomColor”, bloomColor);
  70.             material.SetFloat(”_BloomFactor”, bloomFactor);
  71.             material.SetTexture(”_BlurTex”, texture1);
  72.             Graphics.Blit(source, destination, material, 2);
  73.         }
  74.     }
  75. }
复制代码
二 Shader实现

下面我们重点来看看Shader是如何实现的：
1.首先我们对图像的亮度的提取

亮度的提取非常简单, 通过一个公式即可提取: 0.2125 * r + 0.7154 * g + 0.0721 * b , 这里的道理就不细说了, 感兴趣的可以去Google一下。 亮度提取成功之后我们可以通过一个阙值来控制，而且把值限制在0-1范围内
关键shader代码如下：
  1. // 亮度提取
  2. fixed luminance(fixed4 color) {
  3.     return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
  4. }
  5. // 片元着色器
  6. fixed4 fragExtractBright(v2fExtBright i) : SV_Target {
  7.     fixed4 color = tex2D(_MainTex, i.uv);
  8.     // clamp 约束到 0 - 1 区间
  9.     fixed val = clamp(luminance(color) - _LuminanceThreshold, 0.0, 1.0);
  11.     return color * val;
  12. }
复制代码
呈现效果如下:



2.模糊措置

然后我们再对以上得到的图像颠末高斯模糊措置一下, 这里也可以采用简单的均值模糊措置。
这里的模糊措置教程也不细说了，篇幅太长，可以参考我之前的一篇文章：Unity Shader - 均值模糊和高斯模糊
关键代码:
  1. // ---------------------------【高斯模糊 - start】---------------------------
  2. struct v2fBlur  
  3. {  
  4.     float4 pos : SV_POSITION;   //顶点位置  
  5.     float2 uv  : TEXCOORD0;     //纹理坐标  
  6.     float4 uv01 : TEXCOORD1;    //一个vector4存储两个纹理坐标  
  7.     float4 uv23 : TEXCOORD2;    //一个vector4存储两个纹理坐标  
  8. };  
  10. //高斯模糊顶点着色器
  11. v2fBlur vertBlur(appdata_img v)  
  12. {  
  13.     v2fBlur o;  
  14.     o.pos = UnityObjectToClipPos(v.vertex);  
  15.     //uv坐标  
  16.     o.uv = v.texcoord.xy;  
  18.     //计算一个偏移值，offset可能是（1，0，0，0）也可能是（0，1，0，0）这样就暗示了横向或者竖向取像素周围的点  
  19.     _offsets *= _MainTex_TexelSize.xyxy;  
  21.     //由于uv可以存储4个值，所以一个uv保留两个vector坐标，_offsets.xyxy * float4(1,1,-1,-1)可能暗示(0,1,0-1)，暗示像素上下两个  
  22.     //坐标，也可能是(1,0,-1,0)，暗示像素摆布两个像素点的坐标，下面*2.0，*3.0同理  
  23.     o.uv01 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1);  
  24.     o.uv23 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1) * 2.0;  
  25.     return o;  
  26. }  
  28. //高斯模糊片段着色器
  29. fixed4 fragBlur(v2fBlur i) : SV_Target  
  30. {  
  31.     fixed4 color = fixed4(0,0,0,0);  
  32.     color += 0.4026 * tex2D(_MainTex, i.uv);  
  33.     color += 0.2442 * tex2D(_MainTex, i.uv01.xy);  
  34.     color += 0.2442 * tex2D(_MainTex, i.uv01.zw);  
  35.     color += 0.0545 * tex2D(_MainTex, i.uv23.xy);  
  36.     color += 0.0545 * tex2D(_MainTex, i.uv23.zw);  
  37.     return color;  
  38. }
  39. // ---------------------------【高斯模糊 - end】---------------------------
复制代码
措置后的效果如下：



3.最后叠加原图和模糊措置后的图像

关键代码如下
  1. // 片元着色器
  2. fixed4 fragBloom(v2fBloom i) : SV_Target {
  3.     //对原图进行uv采样
  4.     fixed4 mainColor = tex2D(_MainTex, i.uv);
  5.     //对模糊措置后的图进行uv采样
  6.     fixed4 blurColor = tex2D(_BlurTex, i.uv);
  7.     //输出 = 原始图像 + 模糊图像 * bloom颜色 * bloom权值
  8.     fixed4 resColor = mainColor + blurColor * _BloomColor * _BloomFactor
  9.     return resColor;
  10. }
复制代码
原图和Bloom的对比效果如下(左原图,右bloom)：



最终的完整Shader代码:
  1. // ---------------------------【泛光 Bloom】---------------------------
  2. Shader ”lcl/screenEffect/Bloom”  
  3. {
  4.     // ---------------------------【属性】---------------------------
  5.     Properties
  6.     {
  7.         _MainTex (”Texture”, 2D) = ”white” {}
  8.     }
  9.     // ---------------------------【子着色器】---------------------------
  10.     SubShader
  11.     {
  12.         //后措置效果一般都是这几个状态  
  13.         ZTest Always  
  14.         Cull Off  
  15.         ZWrite Off  
  16.         Fog{ Mode Off }
  18.         CGINCLUDE
  19.         #include ”UnityCG.cginc”
  21.         sampler2D _MainTex;
  22.         half4 _MainTex_TexelSize;
  23.         sampler2D _BlurTex;
  24.         float4 _offsets;
  25.         float _LuminanceThreshold;
  26.         fixed4 _BloomColor;
  27.         float _BloomFactor;
  29.         // ---------------------------【亮度提取 - start】---------------------------
  30.         struct v2fExtBright {
  31.             float4 pos : SV_POSITION;
  32.             half2 uv : TEXCOORD0;
  33.         };
  34.         // 顶点着色器
  35.         v2fExtBright vertExtractBright(appdata_img v) {
  36.             v2fExtBright o;
  38.             o.pos = UnityObjectToClipPos(v.vertex);
  39.             o.uv = v.texcoord;
  41.             return o;
  42.         }
  43.         // 亮度提取
  44.         fixed luminance(fixed4 color) {
  45.             return  0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b;
  46.         }
  47.         // 片元着色器
  48.         fixed4 fragExtractBright(v2fExtBright i) : SV_Target {
  49.             fixed4 color = tex2D(_MainTex, i.uv);
  50.             // clamp 约束到 0 - 1 区间
  51.             fixed val = clamp(luminance(color) - _LuminanceThreshold, 0.0, 1.0);
  53.             return color * val;
  54.         }
  55.         // ---------------------------【亮度提取 - end】---------------------------
  59.         // ---------------------------【高斯模糊 - start】---------------------------
  60.         struct v2fBlur  
  61.         {  
  62.             float4 pos : SV_POSITION;   //顶点位置  
  63.             float2 uv  : TEXCOORD0;     //纹理坐标  
  64.             float4 uv01 : TEXCOORD1;    //一个vector4存储两个纹理坐标  
  65.             float4 uv23 : TEXCOORD2;    //一个vector4存储两个纹理坐标  
  66.         };  
  68.         //高斯模糊顶点着色器
  69.         v2fBlur vertBlur(appdata_img v)  
  70.         {  
  71.             v2fBlur o;  
  72.             o.pos = UnityObjectToClipPos(v.vertex);  
  73.             //uv坐标  
  74.             o.uv = v.texcoord.xy;  
  76.             //计算一个偏移值，offset可能是（1，0，0，0）也可能是（0，1，0，0）这样就暗示了横向或者竖向取像素周围的点  
  77.             _offsets *= _MainTex_TexelSize.xyxy;  
  79.             //由于uv可以存储4个值，所以一个uv保留两个vector坐标，_offsets.xyxy * float4(1,1,-1,-1)可能暗示(0,1,0-1)，暗示像素上下两个  
  80.             //坐标，也可能是(1,0,-1,0)，暗示像素摆布两个像素点的坐标，下面*2.0，*3.0同理  
  81.             o.uv01 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1);  
  82.             o.uv23 = v.texcoord.xyxy + _offsets.xyxy * float4(1, 1, -1, -1) * 2.0;  
  83.             return o;  
  84.         }  
  86.         //高斯模糊片段着色器
  87.         fixed4 fragBlur(v2fBlur i) : SV_Target  
  88.         {  
  89.             fixed4 color = fixed4(0,0,0,0);  
  90.             color += 0.4026 * tex2D(_MainTex, i.uv);  
  91.             color += 0.2442 * tex2D(_MainTex, i.uv01.xy);  
  92.             color += 0.2442 * tex2D(_MainTex, i.uv01.zw);  
  93.             color += 0.0545 * tex2D(_MainTex, i.uv23.xy);  
  94.             color += 0.0545 * tex2D(_MainTex, i.uv23.zw);  
  95.             return color;  
  96.         }
  97.         // ---------------------------【高斯模糊 - end】---------------------------
  99.         // ---------------------------【Bloom(高斯模糊和原图叠加) - start】---------------------------
  100.         struct v2fBloom {
  101.             float4 pos : SV_POSITION;
  102.             half2 uv : TEXCOORD0;
  103.         };
  104.         // 顶点着色器
  105.         v2fBloom vertBloom(appdata_img v) {
  106.             v2fBloom o;
  108.             o.pos = UnityObjectToClipPos(v.vertex);
  109.             o.uv = v.texcoord;
  110.             return o;
  111.         }
  113.         // 片元着色器
  114.         fixed4 fragBloom(v2fBloom i) : SV_Target {
  115.             //对原图进行uv采样
  116.             fixed4 mainColor = tex2D(_MainTex, i.uv);
  117.             //对模糊措置后的图进行uv采样
  118.             fixed4 blurColor = tex2D(_BlurTex, i.uv);
  119.             //输出 = 原始图像 + 模糊图像 * bloom颜色 * bloom权值
  120.             fixed4 resColor = mainColor + blurColor * _BloomColor * _BloomFactor;
  121.             return resColor;
  122.         }
  123.         // ---------------------------【Bloom - end】---------------------------
  125.         ENDCG
  127.         // 亮度提取
  128.         Pass {  
  129.             CGPROGRAM  
  130.             #pragma vertex vertExtractBright  
  131.             #pragma fragment fragExtractBright  
  132.             ENDCG  
  133.         }
  135.         //高斯模糊
  136.         Pass {
  137.             CGPROGRAM
  138.             #pragma vertex vertBlur  
  139.             #pragma fragment fragBlur
  140.             ENDCG  
  141.         }
  143.         // Bloom
  144.         Pass {
  145.             CGPROGRAM
  146.             #pragma vertex vertBloom  
  147.             #pragma fragment fragBloom
  148.             ENDCG  
  149.         }
  151.     }
  152. }
复制代码
最后

有兴趣的小伙伴可以来我的GitHub逛逛, 欢迎Star，谢谢！ 里面有我平时学习unity shader过程中实现的一些特效demo。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Unity开发者联盟 ( 粤ICP备20003399号 )

GMT+8, 2024-11-21 22:32 , Processed in 0.100936 second(s), 27 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表