文章开始先放两组效果,文章结尾再放两组效果
本文测试场景资源来自浅墨大神,shader效果为本文效果

HDR

人们有限的视觉系统,只支持16.7百万的颜色,超出这个范围的颜色就不能显示了
bmp或jprg每个像素就是16,24或32位
每个像素都由红绿蓝构成,如果储存为24位,每个值的范围就在0,255之间,
只能表现出256:1的差别,unity的shader中是0到1
然而在自然中太阳光下的对比度是50000:1
HDR(High Dynamic Range)使图像能表现出更大范围的对比,普通的范围就叫LDR(Low Dynamic Range)

你在照相的时候能控制曝光时间从而控制亮度。
HDR效果就是可控的曝光,

色调映射 tone-mapping

传统的显示设备不能完全的显示出HDR,所以我们用tone-mapping技术。
tone-mapping让图像从HDR映射为LDR显示
http://www.ownself.org/blog/2011/tone-mapping.html中的解释很好
Tone

Mapping原是摄影学中的一个术语,因为打印相片所能表现的亮度范围不足以表现现实世界中的亮度域,而如果简单的将真实世界的整个亮度域线性压缩到照
片所能表现的亮度域内,则会在明暗两端同时丢失很多细节,这显然不是所希望的效果,Tone
Mapping就是为了克服这一情况而存在的,既然相片所能呈现的亮度域有限则我们可以根据所拍摄场景内的整体亮度通过光圈与曝光时间的长短来控制一个合
适的亮度域,这样既保证细节不丢失,也可以不使照片失真。人的眼睛也是相同的原理,这就是为什么当我们从一个明亮的环境突然到一个黑暗的环境时,可以从什
么都看不见到慢慢可以适应周围的亮度,所不同的是人眼是通过瞳孔来调节亮度域的。
一个tone-mapping的公式

Middlegrey为全屏幕或部分屏幕的中间灰度,可以控值屏幕的亮度
AvgLogLuminance就是全屏幕或部分屏幕的亮度的对数的平均值
 
AvgLogLuminance的公式
Lw是亮度,n是所取亮度数

这个操作能让L值限制位[0,1)
一些tone-mapping操作用exposure或gamma作为参数控制最终的图像。
tone-mapping是非线性的,他对暗色保有一定范围并且对亮色逐步接近动态
这个技术产生吸引人的视觉效果,有着强烈的对比和细节。

HDR Rendering In OpenGL一文中给出简要且效果不错的公式
 
关键代码如下

  1. float4 frag(v2f i) :COLOR
  2. {
  3. float4 c = tex2D(_MainTex, i.uv_MainTex);
  4. float y = dot(float4(0.3,0.59,0.11,1),c);
  5. float yd = _Exp * (_Exp / _BM + 1) / (_Exp + 1);
  6. return c*yd;
  7. }

_Exp,_BM为外部可控变量

HDR流程如下

如果分不清HDR与加亮light,可以看看skybox,加亮light是不会加亮skybox的,HDR使颜色更鲜明,像素更清晰。

Bloom泛光

辉光的原因是由于人眼晶状体的散射
我们制造bloom的原理是把图像的亮的部分通过卷积模糊再叠加到原图像上,就产生了bloom效果。
高斯模糊的滤波器是一种低通滤波器
就是去当前像素和周围的像素按一定权重混合,产生一定模糊效果

权重分布如下,离当前像素越远,权重越低

高斯正态分布曲线

二维公式

可以通过这个公式直接算出权重

  1. double sigma = (double)radius / 3.0;
  2. double sigma2 = 2.0 * sigma * sigma;
  3. double sigmap = sigma2 * PI;
  4.  
  5. for(long n = 0, i = - radius; i <=radius; ++i)
  6. {
  7. long i2 = i * i;
  8. for(long j = -radius; j <= radius; ++j, ++n)
  9. kernel[n] = exp(-(double)(i2 + j * j) / sigma2) / sigmap;
  10. }

Kernel即为权重
Radius为所求像素与当前像素距离(半径)

针对这个公式我们可以算出3*3,5*5,7*7等滤波器,出于性能考虑,我们还是使用5*5滤波器

3*3滤波器

5*5滤波器

有现成的就不算了,算这个也消耗一些性能
我们直接用这个权重
关键代码如下

  1. float3 mc00 = tex2D (_MainTex, i.uv_MainTex-fixed2(2,2)/_inten).rgb;
  2. float3 mc10 = tex2D (_MainTex, i.uv_MainTex-fixed2(1,2)/_inten).rgb;
  3. float3 mc20 = tex2D (_MainTex, i.uv_MainTex-fixed2(0,2)/_inten).rgb;
  4. float3 mc30 = tex2D (_MainTex, i.uv_MainTex-fixed2(-1,2)/_inten).rgb;
  5. float3 mc40 = tex2D (_MainTex, i.uv_MainTex-fixed2(-2,2)/_inten).rgb;
  6.  
  7. float3 mc01 = tex2D (_MainTex, i.uv_MainTex-fixed2(2,1)/_inten).rgb;
  8. float3 mc11 = tex2D (_MainTex, i.uv_MainTex-fixed2(1,1)/_inten).rgb;
  9. float3 mc21 = tex2D (_MainTex, i.uv_MainTex-fixed2(0,1)/_inten).rgb;
  10. float3 mc31 = tex2D (_MainTex, i.uv_MainTex-fixed2(-1,1)/_inten).rgb;
  11. float3 mc41 = tex2D (_MainTex, i.uv_MainTex-fixed2(-2,1)/_inten).rgb;
  12.  
  13. float3 mc02 = tex2D (_MainTex, i.uv_MainTex-fixed2(2,0)/_inten).rgb;
  14. float3 mc12 = tex2D (_MainTex, i.uv_MainTex-fixed2(1,0)/_inten).rgb;
  15. float3 mc22mc = tex2D (_MainTex, i.uv_MainTex).rgb;
  16. float3 mc32 = tex2D (_MainTex, i.uv_MainTex-fixed2(-1,0)/_inten).rgb;
  17. float3 mc42 = tex2D (_MainTex, i.uv_MainTex-fixed2(-2,0)/_inten).rgb;
  18.  
  19. float3 mc03 = tex2D (_MainTex, i.uv_MainTex-fixed2(2,-1)/_inten).rgb;
  20. float3 mc13 = tex2D (_MainTex, i.uv_MainTex-fixed2(1,-1)/_inten).rgb;
  21. float3 mc23 = tex2D (_MainTex, i.uv_MainTex-fixed2(0,-1)/_inten).rgb;
  22. float3 mc33 = tex2D (_MainTex, i.uv_MainTex-fixed2(-1,-1)/_inten).rgb;
  23. float3 mc43 = tex2D (_MainTex, i.uv_MainTex-fixed2(-2,-1)/_inten).rgb;
  24.  
  25. float3 mc04 = tex2D (_MainTex, i.uv_MainTex-fixed2(2,-2)/_inten).rgb;
  26. float3 mc14 = tex2D (_MainTex, i.uv_MainTex-fixed2(1,-2)/_inten).rgb;
  27. float3 mc24 = tex2D (_MainTex, i.uv_MainTex-fixed2(0,-2)/_inten).rgb;
  28. float3 mc34 = tex2D (_MainTex, i.uv_MainTex-fixed2(-1,-2)/_inten).rgb;
  29. float3 mc44 = tex2D (_MainTex, i.uv_MainTex-fixed2(-2,-2)/_inten).rgb;
  30. float3 c=0;
  31. c+=(mc00+mc40+mc04+mc44);//4
  32. c+=4*(mc10+mc30+mc14+mc34+mc01+mc41+mc03+mc43);//16
  33. c+=7*(mc20+mc24+mc02+mc42);//16
  34. c+=16*(mc11+mc13+mc03+mc33);//32
  35. c+=26*(mc21+mc23+mc12+mc32);//64
  36. c+=41*mc22mc;//32
  37. c/=273;

_inten为模糊程度

觉得冗长麻烦也可用for循环代替。

然后我们要取其中的亮色部分与原有图像混合,
这一部分直接调用unity内部函数Luminance函数求出亮度,把它与模糊的图像相乘,暗色部分自然消除
但如果直接相乘就会在暗色的边缘产生不自然的黑影,就是把暗色也“泛光了”,为此我们不让Luminance后的值为0,再加上0.1,也不影响亮度。

  1. float lum = Luminance(c);
  2. c = mc22mc + c * (lum+0.1) * _Lum;
  3. return float4(c,1);

最终与HDR结合再一起就是上图例子的最终效果

最后一道工序就是放入相机中,我们建立一个c#并负责传值

代码如下:

  1. using UnityEngine;
  2. using System.Collections;
  3. [ExecuteInEditMode]
  4. public class HDRGlow : MonoBehaviour {
  5. #region Variables
  6. public Shader curShader;
  7. private Material curMaterial;
  8. public float exp = 0.4f;
  9. public float bm = 0.4f;
  10. public int inten = 512;
  11. public float lum = 1f;
  12. #endregion
  13.  
  14. #region Properties
  15. Material material
  16. {
  17. get
  18. {
  19. if (curMaterial == null)
  20. {
  21. curMaterial = new Material(curShader);
  22. curMaterial.hideFlags = HideFlags.HideAndDontSave;
  23. }
  24. return curMaterial;
  25. }
  26. }
  27. #endregion
  28.  
  29. void Start()
  30. {
  31. if (!SystemInfo.supportsImageEffects)
  32. {
  33. enabled = false;
  34. return;
  35. }
  36.  
  37. if (!curShader && !curShader.isSupported)
  38. {
  39. enabled = false;
  40. }
  41. }
  42.  
  43. void OnRenderImage(RenderTexture sourceTexture, RenderTexture destTexture)
  44. {
  45. if (curShader != null)
  46. {
  47. material.SetFloat("_Exp", exp);
  48. material.SetFloat("_BM", bm);
  49. material.SetFloat("_Inten", inten);
  50. material.SetFloat("_Lum", lum);
  51. Graphics.Blit(sourceTexture, destTexture, material);
  52. }
  53. else
  54. {
  55. Graphics.Blit(sourceTexture, destTexture);
  56. }
  57. }
  58. void OnDisable()
  59. {
  60. if (curMaterial)
  61. {
  62. DestroyImmediate(curMaterial);
  63. }
  64. }
  65. }

Unity 的imageEffect有一个叫做BloomAndLensFlares

与本文的差别是多了色彩平衡和lens flare效果,可以试着再加上去

                                                     -------  by wolf96

Unity3d HDR和Bloom效果(高动态范围图像和泛光)的更多相关文章

  1. HDR和bloom效果的区别和关系

    什么是HDR?        谈论游戏画面时常说的HDR到底是什么呢?HDR,本身是High-Dynamic Range(高动态范围)的缩写,这本来是一个CG概念.HDR的含义,简单说,就是超越普通的 ...

  2. HDR 高动态范围图像

    以下来源于百度百科: 高动态范围图像(High-Dynamic Range,简称HDR),相比普通的图像,可以提供更多的动态范围和图像细节,根据不同的曝光时间的LDR(Low-Dynamic Rang ...

  3. WebGL学习之HDR与Bloom

    原文地址:WebGL学习之HDR与Bloom 什么是HDR HDR (High Dynamic Range,高动态范围),在摄影领域,指的是可以提供更多的动态范围和图像细节的一种技术手段.简单讲就是将 ...

  4. Unity shader学习之屏幕后期处理效果之Bloom效果

    Bloom特效是游戏中常见的一种屏幕效果.这种特效可以模拟真实摄像机的一种图像效果,它让画面中较亮的区域“扩散”到周围的区域中,造成一种朦胧的效果. Bloom的实现原理很简单,首先根据一个阈值提取出 ...

  5. 【温故而知新-Javascript】图片效果(图像震动效果、闪烁效果、自动切换图像)

    1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. Unity3D——加入剑痕效果(PocketRPG Trail插件)

    首先非常感谢大家的支持,因为近期项目吃紧,所以更新的速度可能会有点慢!希望大家谅解,当然大家的支持是我最大的动力.我也会尽我所能写出更好的文章,当然因为本人是个新手并且工作的内容也不是unity3D. ...

  7. 【技术博客】在Unity3d中实现烟花效果

    在游戏开发中,我们经常需要用到类似烟花的效果.在Unity3d中,实现烟花效果的方法不止一种,我选用了Unity3d中新添加的粒子特效工具--visual effect graph来进行实现. 实现过 ...

  8. Unity3D Shader 空气扭动效果

    //预览图 //原理 一个摄像机CullingMask设置只可见"Distortion"的Layer(需要自己手动加),输入到一张RenderTexture,其实就是用于确定哪里要 ...

  9. 【转】Unity3D如何制作落叶效果

    原文地址:http://hi.baidu.com/cupgenie/item/c23861df692f59e3b3f777a8 创建一个粒子系统 GameObject>Create other& ...

随机推荐

  1. Java随机生成定长纯数字或数字字母混合数

    (转)Java随机生成定长纯数字或数字字母混合数 运行效果图: 具体实现代码

  2. 通过调整表union all的顺序优化SQL

    操作系统:Windows XP 数据库版本:SQL Server 2005 今天遇到一个SQL,过滤条件是自动生成的,因此,没法通过调整SQL的谓词达到优化的目的,只能去找SQL中的“大表”.有一个视 ...

  3. [Twisted] 事件驱动模型

    在事件驱动编程中,多个任务交替执行,并且在单一线程控制下进行.当执行I/O或者其他耗时操作时,回调函数会被注册到事件循环. 当I/O完成时,执行回调.回调函数描述了在事件完成之后,如何处理事件.事件循 ...

  4. java-成员变量的属性与成员函数的覆盖

    java中在多态的实现是通过类的继承或者接口的实现来完成的. 在类继承或者接口实现过程中就会涉及到成员属性以及成员函数的重写,需要注意的是,成员函数的重写是直接覆盖父类的(继承中),但是成员变量重写是 ...

  5. JavaScript学习总结【7】、JS RegExp

    1.RegExp 简介 RegExp 即正则表达式(Regular Expression,在代码中常简写为 regex.regexp或RE/re/reg),就是使用单个字符串来描述.匹配一系列符合某个 ...

  6. 学渣也要搞 laravel(2)—— HTTP路由[1]篇

    前几天忙了,然后快两个星期没有发博客.今天正式回归.哈哈 1. 路由 说到路由当时学的时候给我疑惑了几天..没有仔细看文档.然后一脸蒙蔽的去用 postman[谷歌插件] 测试路由方法.然后就很奇怪 ...

  7. 【python】【转】python中isinstance判断变量类型用法

    来源 http://www.jb51.net/article/15696.htm 在Python中只需要使用内置的函数isinstance,使用起来非常简单,比如下面的例子: 复制代码 代码如下: c ...

  8. #Leet Code# Unique Tree

    语言:Python 描述:使用递归实现 class Solution: # @return an integer def numTrees(self, n): : elif n == : else: ...

  9. 控制反转(IoC)与依赖注入(DI)

    1.控制反转(Inversion of Control)与依赖注入(Dependency Injection) 控制反转即IoC (Inversion of Control),它把传统上由程序代码直接 ...

  10. commons-lang阅读(一)

    基于commons-lang-2.4.jar org.apache.commons.lang.time.DateFormatUtils类 package org.apache.commons.lang ...