GraphicsLab Project之HDR渲染

作者：i_dovelemon

日期：2016 / 07 / 24

主题：HDR, Bloom, Tone mapping, Post-process, Blur

引言

        HDR渲染技术，从我学3D图形学开始的时候，打开D3D自带的例子，就向往已久，很想能够自己实现一个这样的效果。这么多年过去了，终于真真的实现了一个基本的HDR渲染流程。今天，我就来向大家介绍下，如何在OpenGL中，实现HDR的渲染。

HDR

        在讲解，如何实现HDR之前，先来看下HDR是什么，以及它的作用。首先来看下本次实例将要给大家实现的效果，如下图所示：

        上图是一个典型的HDR场景。所谓的HDR，全称是High Dynamic Range，高动态光照范围。我们知道，人类的眼睛能够接受的光照范围非常的大，而当今的显示器，大部分都之能够显示0-255这256个光照明度范围。所以，很多时候，我们通过计算机模拟或者创造出来的图像，都远远低于人类眼睛能够感知到的光照范围。而更大的范围也就意味着，我们能够看到更多的细节，画面细节越多，自然带来的效果就会越好。关于这方面的解释，大家可以参考 这篇文章，它详细的讲解了HDR的概念。

        单讨论渲染方面，在使用HDR之前，所有的光照计算都在0-255这个范围内进行计算。也就是说，一个场景中所有的明度变化只有这么多。虽然这么多的明度变化，以及能够创建出十分惊人的作品出来了，但是我们没有办法在这样的一个场景中去区分一个灯泡的亮度和太阳的亮度。这两者在现实生活中，太阳的亮度要远远的高于灯泡的亮度。如果不使用HDR的话，他们就只能够是最大的亮度值了，也就是说他们之间没有什么区别。有的人会说，我可以将太阳光定义成最高的，然后将灯泡的定义的比较低啊。可是这样做的话，你就减少的场景中暗的地方的变化范围了，也就是说暗的地方可能都是一样的，一篇漆黑。所以，HDR真真的作用，“让亮的地方更亮，让暗的地方更暗，使画面呈现一种有规律性的明暗变化，使得暗部和亮部的细节都能够展现出来”。

HDR实现原理

        在了解了前面一节所说的事实之后，我们很自然的就想到，那就扩大光照计算时使用的范围呗，干嘛要局限在0-255这样的范围里面了。的确，这就是实现HDR最基础的一个操作。我们可以不考虑显示器只能够显示0-255这个范围数据的限制，在所有的定义中，我们在更大的范围里面定义光源的亮度，计算光照，这样，我们就能够得到和现实基本一致的高动态光照范围了。

        但是，显示器之能够显示0-255这个范围的限制还是摆在那里，就算我们能够计算出HDR的光照场景出来，最终还是需要靠显示器来显示不是吗？所以，前辈们，就发明了一种称之为Tone mapping的技术。这个技术的主要目的就是将HDR的数据映射到显示器能够显示的LDR（相对HDR）范围里面，并且能够保持HDR数据的明暗过渡（至少在视觉上是这样的）关系，达到我们上面所说的亮的更亮，暗的更暗的效果出来。

        所以，通过上面的描述，很自然的就明白HDR的原理分为两个基本的步骤：

        1.在HDR范围里面进行场景的渲染，如光源的定义，光照计算等等

        2.将渲染好了的HDR场景，进行Tone mapping，最终显示在显示器上。

具体实现（OpenGL）

离屏渲染

        很明显，由于显示器只能够显示LDR的数据，所以，我们不能直接把渲染好的HDR场景保存在显示器的缓存中。为此，我们需要一种离屏渲染的计算来完成HDR数据的计算。而这种离屏渲染的方式在OpenGL中，称之为Render to target。关于在OpenGL中，如何实现离屏渲染，我的博客里面 《OpenGL&CG技术之Render to target》讲述了如何利用Frame buffer object来实现。

        除了前面提到的文章之外，我还要另外补充一些知识给大家，便于更加了解如何实现基于HDR数据的RTT。

        首先，由于我们计算出来的场景，最终的结果是HDR数据，也就是说，我们不能够使用传统的GL_UNSIGNED_BYTE的格式来保存我们的图像数据，因为他们之能够保存0-255范围内的数据。所以，我们需要使用OpenGL给我们提供的【浮点纹理】，来保存我们的HDR场景。创建浮点纹理很简单，只要下面这样就可以了：

int32_t tex_id = 0;
glGenTextures(1, reinterpret_cast<GLuint*>(&tex_id));
glBindTexture(GL_TEXTURE_2D, tex_id);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA16F, width, height, 0, GL_RGBA, GL_FLOAT, NULL);
glGenerateMipmap(GL_TEXTURE_2D);

        你可以看到，和传统的纹理创建基本一致，只是在调用glTexImage2D的时候，需要传递不一样的参数，告知显卡，我们要保存16位的浮点数据了。

        除了这个之外，你还需要知道，FBO可以绑定多个COLOR BUFFER，并且通过一些设置，能够指定