高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)

摘要:
  图1左图有色带问题,右图显示正常在有限的亮度范围内显示自然界中相当宽广的亮度范围,正是HDR技术所要解决的问题。

1 HDR基本概念

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR),是一种表达超过了显示器所能表现的亮度范围的图像映射技术,已成为目前游戏应用不可或缺的一部分。通常,显示器能够显示R、G、B分量在[0, 255]之间的像素值。而256个不同的亮度级别显然不能表示自然界中光线的亮度情况。比如,太阳的亮度可能是一个白炽灯亮度的几千倍,是一个被白炽灯照亮的桌面的亮度的几十万倍,这远远超出了显示器的亮度表示能力。

想象在一个房间中,刺眼的阳光从窗外照进来,若使用常规方法渲染这个房间,房间中白色的墙壁的颜色是(255, 255, 255),阳光的颜色也是(255, 255, 255),墙壁将表现得和窗外的阳光颜色一样。很明显,这和我们现实看到的差异很大,现实场景中阳光要比墙壁刺眼很多,我们需要使用某种技术对阳光的亮度和墙壁的亮度进行处理,让其在显示器上的效果接近现实效果。

简单的将高范围的亮度按比例缩放后映射到[0, 255]是不可行的,比如将[0, 511]的范围按照2:1映射到[0, 255],虽然表示的亮度范围扩大了,但是将导致色带(Color Banding)问题,色带如图1所示。

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第1张  高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第2张

图1 左图有色带问题,右图显示正常

在有限的亮度范围内显示自然界中相当宽广的亮度范围,正是HDR技术所要解决的问题。

2 HDR渲染步骤

1)将整个场景渲染到一张浮点纹理上(16bit或32bit都可以);

2)色调映射(Tone Mapping);

3)渲染泛光(Bloom)效果;

4)将泛光和色调映射的结果进行叠加。

第一步很简单,只需要硬件支持浮点纹理即可,比较重要的是本文重点介绍的2、3两步,最后将2、3两步的结果进行叠加,形成最终效果图。

【显示设备上[0, 255]的亮度范围在着色器程序中使用[0, 1]的浮点数表示,下文的亮度和颜色值表示均使用着色器程序的标准。在算法中都用到了亮度的计算,每个像素的亮度的计算方法是L=0.27R+0.62G+0.06B

3 色调映射

色调映射是在有限动态范围媒介上近似显示高动态范围图像的技术。对于人眼来说也有类似的映射方式,因为人眼对亮度的感知范围远低于自然界的亮度范围,只能感知到某个范围内的光照。和显示设备不同的是,人眼对光的感知范围是动态变化的,例如从光亮的室外环境突然走入一个黑暗的室内环境,刚刚开始一片漆黑,过一会儿才可以看清周围环境,人眼的这个调节过程叫做光适应(Light Adaptation)。所以要模拟出真实的光照效果,除了表现出合适的光照,还需要模拟出人眼对光线的调节过程。

最简单的色调映射是将亮度超过1的值置为1,这种做法会出现文章开始提到的墙壁和阳光一样亮的问题;另一种简单的色调映射是将每个像素的除以最高亮度像素的亮度值,可以很好的将所有像素的亮度映射到[0, 1]之间,这种方法会导致场景中某些特别亮的像素会导致场景中的其他部分特别暗。比较好的方式是采用平均亮度值进行调节,由于平均亮度值反映了场景中的整体亮度,所以受到场景中少部分过亮或过暗的像素影响不大。

3.1 计算平均亮度

计算平均亮度的公式为:

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第3张

该公式先对亮度取对数,平均后再进行幂运算。之所以不是直接对亮度平均,而是取了对数,是为了防止过亮的像素对整体造成的影响过大,该公式来源于参考文献1。

计算平均亮度的最简单的方法是遍历所有像素,用上述公式求平均值。该方法需要CPU完成,效率不高,DirectX的“HDRLighting”例子采用了一种基于GPU加速的方法,利用像素着色器多次DownSampling,最后求得平均值,具体流程如下:

1)首先将场景渲染到纹理中,在此基础上,对该纹理取样并计算相应像素亮度的ln()值并进行平均(相当于上述公式去掉exp),存入64*64的纹理中;

2)对上一步的纹理4*4DownSampling,生成16*16的纹理;

3)对上一步的纹理4*4DownSampling,生成4*4的纹理;

4)对上一步的纹理4*4DownSampling,生成1*1的纹理,并计算其exp()值。

最后生成的1*1的纹理中的像素为公式中要求的平均亮度Lavg。

3.2 光适应

为了模拟人眼对于不同光强会自动调节适应范围的效果,只需要对这一帧求出的平均亮度Lavg与上一帧的平均亮度Lavg进行插值即可,当然这个插值不是线性插值,“HDRLighting”中的代码如下:

float fNewAdaptation = fAdaptedLum + (fCurrentLum - fAdaptedLum) * ( 1 - pow( 0.98f, 30 * g_fElapsedTime ) );

其中,fAdaptedLum为上一帧的Lavg,fCurrentLum为当前帧的Lavg,g_fElapsedTime为当前帧和上一帧的时间间隔,fNewAdaptation为最终Lavg计算结果。

3.3计算缩放因子

场景的整体亮度可以通过缩放因子进行调节,公式如下:

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第4张

其中Lscale(x,y)是当前像素的亮度值。Key是一个常数,Key 的大小决定了映射后场景的整体明暗程度,一般取0.18(在伽马校正理论中,0.18经过校正后大概是0.5,也就是我们感官上的中等灰度级)。Key值的选择可以看作摄像机的曝光程度,我们可以使用这个公式控制自由的摄像机的曝光程度,Key越大整个场景就显得越白。一般来说,高曝光的Key最高为0.72,低曝光的Key最低为0.045,一般程度的曝光Key选择0.18附近的值。

3.4 归一化处理

到此为止,色调映射已经基本完成,剩下的只需要将Lscale(x,y)映射到[0, 1]范围内即可,公式如下:

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第5张

其中其中Color(x,y)是当前像素的颜色值。

4 渲染泛光效果

泛光是一种光学效应,它是指在来自于强光源的光线看起来像是影响到了周围物体。想象一间房间,窗户外面阳光明媚,若往窗外看去,感觉窗户光亮的边缘有一圈模糊,这就是泛光效果。在游戏中适当的增加泛光效果,能够增强画面的真实感。

渲染泛光效果的思路很简单,主要分为两个步骤,第一步是使用bright-pass filter提取出场景中高亮部分,第二步对高亮部分进行模糊处理。"HDRLighting"中bright-pass filter的代码如下:

1 //Determine what the pixel's value will be after tone mapping occurs
2 vSample.rgb *= g_fMiddleGray/(fAdaptedLum + 0.001f);
3 
4 //Subtract out dark pixels
5 vSample.rgb -=BRIGHT_PASS_THRESHOLD;
6 
7 //Clamp to 0
8 vSample = max(vSample, 0.0f);
9 
10 //Map the resulting value into the 0 to 1 range. Higher values for
11 //BRIGHT_PASS_OFFSET will isolate lights from illuminated scene 
12 //objects.
13 vSample.rgb /= (BRIGHT_PASS_OFFSET+vSample); 

第二步则是对第一步的结果进行模糊,首先对第一步的结果进行2*2或4*4的downsampling,再使用2*2的高斯核心对其进行模糊。其中先对图像downsampling再模糊的做法是利用GPU进行图像模糊的一种提高性能的方法,因为downsampling后图像分辨率降低了,计算量自然就少了;而downsampling后的图片再放大,本身又是一种模糊,可以减少高斯模糊的采样数量。最终效果如图2所示

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第6张  高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第7张  高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第8张  

图2 图片来源于微软DirectX SDK中“HDRLighting”例子,左图为过度曝光的场景,中间图片为bright-pass filter处理后的结果,右图为模糊之后的效果

5 融合

现在需要将色调映射的图像与泛光的图像进行融合。在融合操作中除了常见的α融合外,还有一种叠加(Additive Blending)操作,它可以将两种颜色的值进行加法操作,通常会使得颜色越变越白,这正是我们所要的效果。将色调映射的图像与泛光的图像进行叠加操作,即可生成最终图像。

6、最终效果

“HDRLighting”中LDR和HDR的效果对比如图3所示。

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第9张    高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第10张

图3 “HDRLighting”中LDR和HDR的效果对比,左图为LDR,右图为HDR

其他的一些HDR渲染效果如图4-7所示。图4中很明显的观察到汽车窗户的镜面光,图5中蓝色的灯光显得比较亮,但是暗的地方也很清晰;图6和图7来自游戏“孤岛危机”,效果相当不错,其中就有HDR的功劳(当然要做到这样的画质,HDR只是冰山一角)。图6场景明暗得当,透过树叶可以看到天空略微模糊;图7中可以看到爆炸产生的碎片以及车上的显示屏有泛光效果,充分体现了亮度的差别,而这些细节让游戏更加逼真。

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第11张

图4 Unity3D文档中的HDR渲染效果图1

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第12张

图5 Unity3D文档中的HDR渲染效果图2

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第13张

图6 “孤岛危机”截图1

高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)第14张

图7 “孤岛危机”截图2

参考文献:

[1]Reinhard, Erik, Mike Stark, Peter Shirley, and James Ferwerda. "Photographic Tone Reproduction for Digital Images". ACM Transactions on Graphics (TOG), Proceedings of the 29th Annual Conference on Computer Graphics and Interactive Techniques (SIGGRAPH), pp. 267-276. New York, NY: ACM Press, 2002.

[2]Akenine-Möller T, Haines E, Hoffman N. Real-time rendering 3 [M].

[3]DirectX 9.0c SDK

[4]http://www.cnblogs.com/cxrs/archive/2013/03/22/hdr%E9%AB%98%E5%8A%A8%E6%80%81%E8%8C%83%E5%9B%B4%E5%85%89%E7%85%A7%E6%B8%B2%E6%9F%93.html

[5]http://wenku.baidu.com/view/fe31607ea26925c52cc5bf97.html

[6]http://www.zwqxin.com/archives/shaderglsl/review-high-dynamic-range.html

[7]http://zh.wikipedia.org/wiki/%E9%AB%98%E5%8A%A8%E6%80%81%E8%8C%83%E5%9B%B4%E6%88%90%E5%83%8F

免责声明:文章转载自《高动态范围光照(High Dynamic Range Imaging,简称HDRI或HDR)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇asp.net正则表达式提取网页网址、标题、图片实例以及过滤所有HTML标签实例TS基础下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Android各种屏幕分辨率(VGA、HVGA、QVGA、WQVGA、WVGA、FWVGA) 详解 .

http://blog.csdn.net/lucherr/article/details/8498400 看资料的时候经常看到各种VGA,全都混了,无奈,找了些资料总结了下,分享给大家: 这些术语都是指屏幕的分辨率。VGA:Video Graphics Array,即:显示绘图矩阵,相当于640×480 像素;HVGA:Half-size VGA,即:VG...

完美方案——iOS的WebView自适应内容高度

/////////////////////////////初始化,self.view是父控件///////////////////////////////// _webView = [[UIWebView alloc] initWithFrame: CGRectMake(0, 0, self.view.frame.size.width, 0...

Iphone各个型号机型的详细参数,尺寸和dpr以及像素

1.iPhone尺寸规格 2.单位inch(英吋) 1 inch = 2.54cm = 25.4mm 3.iPhone手机宽高 上表中的宽高(width/height)为手机的物理尺寸,包括显示屏和边框。以下为iPhone4s的宽高示意图: 4.屏幕尺寸 我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸,指的是显示屏对角线...

Java——BufferedImage对象

BufferedImage对象中最重要的两个组件是Raster与ColorModel,分别用于存储图像的像素数据和颜色数据。 1、Raster对象的作用与像素存储 BufferedImage支持从Raster对象中获取任意位置(x,y)点的像素值p(x,y) image.getRaster().getDataElements(x,y,width,heigh...

(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系? 产品经理马忠信关注 22015.08.30 13:59:20字数 2,660阅读 52,661 今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给...

1302图像模糊处理(二维数组)

描述 给定m行n列的图像各像素点的灰度值,要求用如下方法对其进行模糊化处理:1.四周最外侧的像素点灰度值不变;2.中间各像素点新灰度值为该像素点及其上下左右相邻四个像素点原灰度值的平均(舍入到最接近的整数) 输入 第一行包含两个整数n和m,表示图像包含像素点的行数和列数。1≤n≤100,1≤m≤100。接下来n行,每行m个整数,表示图像的每个像素点灰度。相...