码迷，mamicode.com
首页 > 编程语言 > 详细

UnityShader实例15:屏幕特效之Bloom

时间：2017-07-07 10:06:09      阅读：224      评论：0      收藏：0      [点我收藏+]

标签：return   water   细节   区分   nbsp   ica   out   游戏引擎   mode   

http://blog.csdn.net/u011047171/article/details/48522073

 

Bloom特效

 
 
 

概述

       Bloom,又称“全屏泛光”，是游戏中常用的一种镜头效果，是一种比较廉价的“伪HDR”效果（如下右图）；使用了Bloom效果后，画面的对比会得到增强，亮的地方曝光也会得到加强，画面也会呈现一种朦胧，梦幻的效果，婚纱摄影中照片处理经常用到这种类似处理效果。Bloom效果一般用来近似模拟HDR效果，效果也比较相向，但实现原理却完全不同。本例将实现一个适合移动平台使用的bloom屏幕特效。
 
技术分享技术分享
 
 
 

Bloom特效与HDR特效的异同

 
       要比较两者的异同，得先搞清楚HDR特效是什么；HDR，本身是High-Dynamic Range（高动态范围）的缩写，这本来是一个CG概念。HDR的含义，简单说，就是超越普通的光照的颜色和强度的光照。计算机在表示图象的时候是用8bit(256)级或16bit(65536)级来区分图象的亮度的，但这区区几百或几万无法再现真实自然的光照情况。因此普通情况下，无法同时显示亮部和暗部的所有细节。
       现实中，当人由黑暗地方走到光亮地方，眼睛会自动眯起来。人在黑暗的地方，为了看清楚对象，瞳孔会很大张开，以吸收更多光线。当突然走到光亮地方，瞳孔来不及收缩，所以唯有眯上眼睛，保护视网膜上的视神经。而电脑是死物，唯有靠HDR技术模拟这效果——人眼自动适应光线变化的能力。方法是快速将光线渲染得非常光亮，然后将亮度逐渐降低。而HDR的最终效果是亮处的效果是鲜亮，而黑暗处的效果是能分辨物体的轮廓和深度，而不是以往的一团黑。。
       想要实现HDR特效，首先，游戏开发者要在游戏开发过程中，利用开发工具（就是游戏引擎）将实际场景用HDRI记录下来，当然开发技术强的开发组会直接用小开发工具（比如3D MAX的某些特效插件）创造HDRI图像；其次，我们的显卡必须支持显示HDR特效，nVIDIA的显卡必须是GeForce 6系列或更高，ATI显卡至少是Radeon 9550或以上。
技术分享
       那么HDR与bloom效果的差别到底在什么地方呢？
　　第一，HDR效果就是超亮的光照与超暗的黑暗的某种结合，这个效果是光照产生的，强度、颜色等方面是游戏程序可动态控制的，是一种即时动态光影；bloom效果则是物体本身发出的光照，仅仅是将光照范围调高到过饱和，是游戏程序无法动态控制的，是一种全屏泛光。
　　第二，bloom效果无需HDR就可以实现，但是bloom效果是很受限的，它只支持8位RGBA，而HDR最高支持到32位RGBA。
　　第三，bloom效果的实现很简单，比如《半条命2》的MOD就是一个很小的很简单的MOD，而且bloom效果不受显卡的规格的限制，你甚至可以在TNT显卡上实现bloom效果（当然效果很差）！而HDR，必须是6XXX以上的显卡才能够实现，这里的HDR是指nVIDIA的HDR。这时有必要谈nVIDIA和ATI的显卡所实现的HDR，两者还是有区别的，具体区别就很专业了，总之从真实性表现来看，nVIDIA的显卡实现的HDR更好一些。HDR是nVIDIA提出的概念，从技术上来讲，ATI当然无法严格克隆nVIDIA的技术，所以ATI的HDR是另一种途径实现的尽可能接近的HDR，不能算“真”HDR，据传ATI的R520能够真正实现FP16 HDR。
技术分享技术分享
未使用HDR图像                                                        使用HDR图像
 
 

Bloom特效的实现流程

 
     Bloom效果实现的流程与HDR的物理还原不同，它只是一种简单的近似模拟：
  • 第一步： 先获取屏幕图像，然后对每个像素进行亮度检测，若大于某个阀值即保留原始颜色值，否则置为黑色；
  • 第二步：对上一步获取的图像，做一个模糊，通常使用高斯模糊。
  • 第三步：将模糊后的图片和原图片做一个加权和。
     通过这三步就可以达到一个全屏泛光的效果。
 
 
 

Bloom特效的shader实现

       本例在shader中实现大致和上面所述流程类似，只是在第一步做了少许改动，在这里我们将亮部的像素进行了扩展，关键代码如下：
[csharp] view plain copy
 
 print?
  1.         struct v2f_withMaxCoords {  
  2.             half4 pos : SV_POSITION;  
  3.             half2 uv2[5] : TEXCOORD0;  
  4.         };  
  5.   
  6.   
  7. //在vert函数里对uv坐标做了四次偏移，对原像素周围临近的像素采样  
  8.         v2f_withMaxCoords vertMax (appdata_img v)  
  9.         {  
  10.             v2f_withMaxCoords o;  
  11.             o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
  12.             o.uv2[0] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,1.5);                   
  13.             o.uv2[1] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,1.5);  
  14.             o.uv2[2] = v.texcoord + _MainTex_TexelSize.xy * half2(-1.5,-1.5);  
  15.             o.uv2[3] = v.texcoord + _MainTex_TexelSize.xy * half2(1.5,-1.5);  
  16.             o.uv2[4] = v.texcoord ;  
  17.             return o;   
  18.         }     
  19. //Frag函数用偏移的uv坐标采样，并且与原像素进行对比，如果亮度比原像素大，则取代原像素，因此亮部像素得到了扩展处理。这里ONE_MINUS_INTENSITY是由脚本传递过来的参数，用来控制bloom范围，功能就是讲低于这个值的像素设置为黑色。  
  20.         fixed4 fragMax ( v2f_withMaxCoords i ) : COLOR  
  21.         {                 
  22.             fixed4 color = tex2D(_MainTex, i.uv2[4]);  
  23.             color = max(color, tex2D (_MainTex, i.uv2[0]));   
  24.             color = max(color, tex2D (_MainTex, i.uv2[1]));   
  25.             color = max(color, tex2D (_MainTex, i.uv2[2]));   
  26.             color = max(color, tex2D (_MainTex, i.uv2[3]));   
  27.             return saturate(color - ONE_MINUS_INTENSITY);  
  28.         }   
 
     流程的第二步就是讲上一步的结果做模糊处理，在这里我们使用的上一个例子所使用的高斯模糊，因此不多做解释，关键代码如下面所示：
 
[csharp] view plain copy
 
 print?
  1.         struct v2f_withBlurCoordsSGX   
  2.         {  
  3.             float4 pos : SV_POSITION;  
  4.             half2 offs[7] : TEXCOORD0;  
  5.         };  
  6.   
  7. //水平方向的像素偏移，用来做水平模糊  
  8.         v2f_withBlurCoordsSGX vertBlurHorizontalSGX (appdata_img v)  
  9.         {  
  10.             v2f_withBlurCoordsSGX o;  
  11.             o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
  12.             half2 netFilterWidth = _MainTex_TexelSize.xy * half2(1.0, 0.0) * _Parameter.x;   
  13.   
  14.             o.offs[0] = v.texcoord + netFilterWidth;  
  15.             o.offs[1] = v.texcoord + netFilterWidth*2.0;  
  16.             o.offs[2] = v.texcoord + netFilterWidth*3.0;  
  17.             o.offs[3] = v.texcoord - netFilterWidth;  
  18.             o.offs[4] = v.texcoord - netFilterWidth*2.0;  
  19.             o.offs[5] = v.texcoord - netFilterWidth*3.0;  
  20.             o.offs[6] = v.texcoord;  
  21.   
  22.             return o;   
  23.         }         
  24. //垂直方向的像素偏移，用来做水平模糊  
  25.           
  26.         v2f_withBlurCoordsSGX vertBlurVerticalSGX (appdata_img v)  
  27.         {  
  28.             v2f_withBlurCoordsSGX o;  
  29.             o.pos = mul (UNITY_MATRIX_MVP, v.vertex);     
  30.             half2 netFilterWidth = _MainTex_TexelSize.xy * half2(0.0, 1.0) * _Parameter.x;  
  31.               
  32.             o.offs[0] = v.texcoord + netFilterWidth;  
  33.             o.offs[1] = v.texcoord + netFilterWidth*2.0;  
  34.             o.offs[2] = v.texcoord + netFilterWidth*3.0;  
  35.             o.offs[3] = v.texcoord - netFilterWidth;  
  36.             o.offs[4] = v.texcoord - netFilterWidth*2.0;  
  37.             o.offs[5] = v.texcoord - netFilterWidth*3.0;  
  38.             o.offs[6] = v.texcoord;  
  39.   
  40.             return o;   
  41.         }     
  42. //用vert传过来的uv坐标数组进行采样，并乘以对应的权重进行叠加，其结果是个近似高斯模糊。  
  43.         fixed4 fragBlurSGX ( v2f_withBlurCoordsSGX i ) : COLOR  
  44.         {  
  45.               
  46.             fixed4 color = tex2D(_MainTex, i.offs[6]) * curve[3];  
  47.             color += tex2D(_MainTex, i.offs[0])*curve[2];  
  48.             color += tex2D(_MainTex, i.offs[1])*curve[1];  
  49.             color += tex2D(_MainTex, i.offs[2])*curve[0];  
  50.             color += tex2D(_MainTex, i.offs[3])*curve[2];  
  51.             color += tex2D(_MainTex, i.offs[4])*curve[1];  
  52.             color += tex2D(_MainTex, i.offs[5])*curve[0];  
  53.   
  54.             return color;  
  55.   
  56.         }     
  57.           
 
        流程的最后一步就非常简单了，将上一步获取的结果与原图进行权重求和即可，就能得到一个bloom效果。在这里我们添加了从C#脚本传递过来的权重参数_Parameter.z和颜色参数_ColorMix，用来控制bloom的强度以及颜色倾向。
 
[csharp] view plain copy
 
 print?
  1.         struct v2f_simple {  
  2.             half4 pos : SV_POSITION;  
  3.             half4 uv : TEXCOORD0;  
  4.         };  
  5. //考虑到D3D9的uv坐标Y轴是反转的，因此需要做个判断进行调整，防止图像倒转。  
  6.         v2f_simple vertBloom (appdata_img v)  
  7.         {  
  8.             v2f_simple o;  
  9.             o.pos = mul (UNITY_MATRIX_MVP, v.vertex);  
  10.             o.uv = v.texcoord.xyxy;           
  11.              #if SHADER_API_D3D9  
  12.                 if (_MainTex_TexelSize.y < 0.0)  
  13.                     o.uv.w = 1.0 - o.uv.w;  
  14.             #endif  
  15.             return o;   
  16.         }  
  17.   
  18.   
  19.         fixed4 fragBloom ( v2f_simple i ) : COLOR  
  20.         {     
  21.             fixed4 color = tex2D(_MainTex, i.uv.xy);  
  22.             color += tex2D(_Bloom, i.uv.zw)*_Parameter.z*_ColorMix;  
  23.             return color;  
  24.         }     
        本例Bloom特效的shader部分关键代码就是这么多，这里就不贴出完整代码了，有需要的同学可以到文章末尾点积链接下载，在完整代码里，我们使用了CGINCLUDE和ENDCG模块化的方式组织代码，减少了一定代码量，并且是代码的可读性更好，方便C#脚本调用。

C#脚本

        C#脚本相对而言比较简单，和前面的的屏幕特效脚本类似，需要对shader的不同pass分别调用，并且开放了四个参数以方便效果的调节：Color Mix控制bloom特效的颜色倾向，Threshold控制bloom效果的范围，Intensity控制bloom特效的强度，Blur Size控制模糊范围以及模糊的质量。关键代码如下；完整代码请到文末放出的链接下载。
 
[csharp] view plain copy
 
 print?
  1. void OnRenderImage (RenderTexture sourceTexture, RenderTexture destTexture)  
  2. {     
  3.     #if UNITY_EDITOR  
  4.         FindShaders ();  
  5.         CheckSupport ();  
  6.         CreateMaterials ();   
  7.     #endif  
  8.   
  9.     if(threshold != 0 && intensity != 0){  
  10.   
  11.         int rtW = sourceTexture.width/4;  
  12.         int rtH = sourceTexture.height/4;  
  13.   
  14.         BloomMaterial.SetColor ("_ColorMix", colorMix);  
  15.         BloomMaterial.SetVector ("_Parameter", new Vector4(BlurSize*1.5f, 0.0f, intensity,0.8f - threshold));     
  16.         // material.SetFloat("_blurSize",BlurSize);  
  17.   
  18.         RenderTexture rtTempA = RenderTexture.GetTemporary (rtW, rtH, 0,rtFormat);  
  19.            rtTempA.filterMode = FilterMode.Bilinear;  
  20.   
  21.            RenderTexture rtTempB = RenderTexture.GetTemporary (rtW, rtH, 0,rtFormat);  
  22.            rtTempA.filterMode = FilterMode.Bilinear;  
  23.   
  24.            Graphics.Blit (sourceTexture, rtTempA,BloomMaterial,0);  
  25.   
  26.   
  27.            Graphics.Blit (rtTempA, rtTempB, BloomMaterial,1);  
  28.            RenderTexture.ReleaseTemporary(rtTempA);  
  29.   
  30.   
  31.            rtTempA = RenderTexture.GetTemporary (rtW, rtH, 0, rtFormat);  
  32.            rtTempB.filterMode = FilterMode.Bilinear;  
  33.            Graphics.Blit (rtTempB, rtTempA, BloomMaterial,2);  
  34.   
  35.   
  36.            BloomMaterial.SetTexture ("_Bloom", rtTempA);  
  37.            Graphics.Blit (sourceTexture, destTexture, BloomMaterial,3);  
  38.         
  39.   
  40.            RenderTexture.ReleaseTemporary(rtTempA);  
  41.            RenderTexture.ReleaseTemporary(rtTempB);  
  42.     }  
  43.   
  44.     else{  
  45.         Graphics.Blit(sourceTexture, destTexture);  
  46.           
  47.     }  
  48.       
  49.       
  50. }  

本例实现的效果如图

技术分享技术分享
 

总结

        本例bloom效果是为移动平台开发，做了不少的优化，使之在移动平台上也有不错的效率，当然本例效果还有进一步的优化空间，比如将第一步的像素扩展去掉，可以节省掉4次多余的采样，第二步的高斯模糊同样也可以降阶，甚至也可以换成均值模糊，也能节省不少的计算。
 
 

下载链接：

UnityShader实例15:屏幕特效之Bloom

标签：return   water   细节   区分   nbsp   ica   out   游戏引擎   mode   

原文地址：http://www.cnblogs.com/alps/p/7129250.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！