GraphicsLab Project之辉光（Glare，Glow）效果 【转】

作者：i_dovelemon

日期：2016 / 07 / 02

来源：CSDN

主题：Render to Texture, Post process, Glare, Glow, Multi-pass rendering

引言

        从GraphicsLab Project项目立项以来，一直都在忙着搭建Shader的实验环境，现在基本的实验环境已经搭建完毕，所以就试着使用它来编写一些效果。本篇文章就将向大家讲述，如何在OpenGL中，使用GLSL编写出辉光效果。

辉光（Glare,Glow）

       辉光效果，也就是Glare，Glow效果。它的主要作用是模拟一些场景中发光物体周边的朦胧模糊的发光效果，有点类似于PS中的外发光。先来看一看这种效果的实际图片，给大家一个感性的认识。

图1

图2

图3

       上面图片给大家展示了辉光效果能够带来的视觉体验。为场景中的发光物体添加辉光效果，能够实现灯光的朦胧感觉。当然，为了整体画面的和谐也不能乱用此效果，否则就给人一种很俗气的感觉。

原理

       
下面给大家讲述下这种效果的实现方式。其实说白了它的实现原理很简单，我们只要对要添加辉光效果的物体进行一次模糊操作，然后将模糊过后的图片与原先的图片进行Alpha

Blend，就能够得到上面所示的效果。操作如图所展示的那样（这里为了简便，只在场景中绘制Glare物体，并且只添加了些许光照，没有添加其他效果）：

图4 未进行模糊的原场景

图5 对原场景进行模糊之后的图像

图6 将模糊之后的场景与原场景进行Alpha blend之后的最终效果

        上面三张图片展示了绘制一个简单辉光效果的整体步骤。原理是不是十分的简单？？？大家可以自己在PS等图像处理软件中，直接模拟看看是否能够得出这种效果来。

OpenGL实现

        在讲述具体的实现之前，我们需要先了解一些基本的知识点。在了解了这些知识点的基础之上，我们才能够实现这种效果。

渲染到纹理（Render to Texture, RTT）

       
在图形学处理中，我们经常需要对渲染好的场景进行一些处理。也就是说，我们需要一种方式，能够让我们通过图形API（OpenGL,
DirectX）绘制的场景保存到我们指定的内存（显存）中去，以便于我们后期对他进行一些处理。而在OpenGL中，我们能够很容易的实现这一点。这种技术在我的博客中也有讲到。大家可以根据博客中的描述和代码对此进行了解。

后处理(Post-processing)

       
后处理在图形学中经常被用到。我们在游戏中绘制的场景，往往是没有办法仅仅依靠光照模型计算就能够实现出来的。很多的特殊效果，都是通过对渲染好的场景进行图像空间的后期出理来得到。比如本篇文章中实现的辉光效果，就使用了这种技术。还有很多其他在图像空间进行后处理的特效，感兴趣的同学可以阅读Real-time
Rendering中关于此技术的章节。

图像模糊(Blur)

        在前面讲述辉光效果整体绘制流程的时候，讲到了我们需要对原场景图像进行模糊操作。那么怎么样才能够实现对图像的模糊操作了？

        在图像处理中，我们经常使用的模糊是基于高斯分布函数的高斯模糊。这篇文章详细的讲述了图像模糊的一些技术细节，大家可以据此了解如何进行高斯模糊。

       
高斯模糊在图像处理的时候，是使用2维的高斯分布函数对一个像素的上下左右包围的像素进行采样来实现的。我们假设模糊的半径为20个像素，按照高斯模糊的原始计算方式，每一个像素都需要计算(2
* 20) ^ 2次采样。这在图像处理上面可以接受，但是对于实时性的游戏来说，计算量就有点大了。

        为此，人们想出了一种优化的方法来实现高斯模糊。对于一个像素，它的模糊半径为20，那么我们可以分两次进行模糊，一次是横向的模糊计算，一次是纵向的模糊计算。也就是将模糊操作从O(N^2)降低到了2 * O(N)。下图展示了如何进行这样的操作：

图7

       
从图中，我们可以看到，我们先对原场景图进行一次横向的模糊计算，此次计算我们只需要采用一维的高斯分布进行计算即可。然后对横向模糊之后的图像进行纵向模糊，与横向模糊一样，使用一维的高斯分布函数进行。这样就能够得到一张高斯模糊之后的图像，它的模糊效果不比二维高斯模糊效果来的差。

OpenGL绘制流程

        下面就以我的代码中的绘制流程来向大家展示如何在OpenGL中绘制一个辉光效果：

1. void glb_display() {
2. glb_draw_normal_scene();
3. glb_draw_render_target_gauss_blur_h();
4. glb_draw_render_target_gauss_blur_v();
5. glb_draw_blend();
6. glutSwapBuffers();
7. }

上面的代码给出了我绘制的流程：

        (1).绘制正常场景 -- 此处绘制的场景保存到一张纹理A中，并且复制A纹理到B纹理中

        (2)绘制一个和屏幕一样大小的矩形，将纹理A作为该矩形的贴图，施加横向模糊的Shader计算，最后的结果保存到另外一张贴图C中

        (3)绘制一个和屏幕一样大小的矩形，将纹理C作为该矩形的贴图，施加纵向模糊的Shader计算，最后的结果保存到纹理A中（A已经被复制到B中去，所以可以被覆盖）

        (4)经过前三步之后，A纹理保存了模糊之后的图像，B纹理保存了原图像，然后画一个矩形，把这两张贴图都传递进入，进行Alpha混合计算。

Shader计算

        对于(1)步骤，使用如下的两个Shader：

1. light_pixel.vs

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Phong lights's vertex shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec3 vertex;
9. in vec3 normal;
10. uniform mat4 proj;
11. uniform mat4 view;
12. uniform mat4 world;
13. uniform mat4 trans_inv_world;
14. out vec3 vs_vertex;
15. out vec3 vs_normal;
16. void main() {
17. gl_Position = proj * view * world * vec4(vertex, 1.0);
18. vs_vertex = (world * vec4(vertex, 1.0)).xyz;
19. vs_normal = (trans_inv_world * vec4(normal, 0.0)).xyz;
20. }

1. light_pixel.ps

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Phong lights's pixel shader
6. //-------------------------------------------------------------------
7. #version 330
8. in vec3 vs_vertex;
9. in vec3 vs_normal;
10. out vec4 color;
11. uniform vec3 parallel_light_dir;
12. uniform vec3 parallel_light_ambient;
13. uniform vec3 parallel_light_diffuse;
14. uniform vec3 parallel_light_specular;
15. uniform vec3 material_ambient;
16. uniform vec3 material_diffuse;
17. uniform vec3 material_specular;
18. uniform float material_specular_pow;
19. uniform vec3 eye_pos;
20. vec3 calc_diffuse(vec3 light_vec, vec3 normal, vec3 diffuse, vec3 light_color) {
21. float ratio = dot(light_vec, normal);
22. ratio = max(ratio, 0.0);
23. return diffuse * light_color * ratio;
24. }
25. vec3 calc_specular(vec3 light_vec, vec3 normal, vec3 view_vec, vec3 specular, vec3 light_color, float pow_value) {
26. vec3 ref_light_vec = reflect(light_vec, normal);
27. float ratio = dot(ref_light_vec, view_vec);
28. ratio = max(ratio, 0.0);
29. ratio = pow(ratio, pow_value);
30. return specular * light_color * ratio;
31. }
32. void main() {
33. vec3 light_vec = -parallel_light_dir;
34. vec3 normal = normalize(vs_normal);
35. vec3 view_vec = normalize(eye_pos - vs_vertex);
36. vec3 ambient = material_ambient * parallel_light_ambient;
37. vec3 diffuse = calc_diffuse(light_vec, normal, material_diffuse, parallel_light_diffuse);
38. vec3 specular = calc_specular(light_vec, normal, view_vec, material_specular, parallel_light_specular, material_specular_pow);
39. color = vec4(ambient + diffuse + specular, 1.0);
40. }

这两个Shader只是为了实现Phong式光照计算，给场景一点光亮，对于绘制辉光效果并不是必须的，但你总得有东西才能绘制辉光效果吧！

对于步骤(2)和步骤(3)，使用如下的三个Shader：

1. gauss_blur.vs

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Gauss blur pass through vertex shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec3 vertex;
9. in vec2 texcoord;
10. out vec2 vs_texcoord;
11. void main() {
12. gl_Position = vec4(vertex, 1.0);
13. vs_texcoord = texcoord;
14. }

1. gauss_blurh.ps

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Gauss blur horizontal pass shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec2 vs_texcoord;
9. out vec4 color;
10. uniform sampler2D tex;
11. uniform float tex_width;
12. uniform float gauss_num[21];
13. void main() {
14. color = texture2D(tex, vs_texcoord) * gauss_num[0];
15. float step = 1.0 / tex_width;
16. for (int i = 1; i < 21; i++) {
17. if (vs_texcoord.x - i * step >= 0.0) {
18. color += texture2D(tex, vec2(vs_texcoord.x - i * step, vs_texcoord.y)) * gauss_num[i];
19. }
20. if (vs_texcoord.x + i * step <= 1.0) {
21. color += texture2D(tex, vec2(vs_texcoord.x + i * step, vs_texcoord.y)) * gauss_num[i];
22. }
23. }
24. }

1. gauss_blurv.ps

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Gauss blur vertical pass shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec2 vs_texcoord;
9. out vec4 color;
10. uniform sampler2D tex;
11. uniform float tex_height;
12. uniform float gauss_num[21];
13. void main() {
14. color = texture2D(tex, vs_texcoord) * gauss_num[0];
15. float step = 1.0 / tex_height;
16. for (int i = 0; i <21; i++) {
17. if (vs_texcoord.y - i * step >= 0.0) {
18. color += texture2D(tex, vec2(vs_texcoord.x, vs_texcoord.y - i * step)) * gauss_num[i];
19. }
20. if (vs_texcoord.y + i * step <= 1.0) {
21. color += texture2D(tex, vec2(vs_texcoord.x, vs_texcoord.y + i * step)) * gauss_num[i];
22. }
23. }
24. }

上面三个Shader组合完成了高斯模糊的计算。这里有几点需要注意。

       
（1）进行模糊计算的时候，逻辑上是以一个像素单位为步进值，但是由于纹理坐标是从[0,1]，所以我们需要将一个像素的步进值计算为对应的纹理坐标步进。这个操作可以在Application阶段计算完成，然后传递到Shader中，这里博主偷懒了，直接在Shader里面计算了。

        （2）Shader中的gauss_num[21]保存了模糊半径为20的高斯分布的各个数值。这个数值的计算是在Application阶段完成，然后提交到Shader中去的，如下是计算Gauss_num的函数，使用的是一维的高斯分布函数完成：

1. float glb_gauss_num(int x) {
2. float pi = 3.1415927f;
3. float e = 2.71828f;
4. float theta = 0.1f;
5. float theta2 = theta * theta;
6. float temp1 = 1.0f / (theta * sqrt(2 * pi));
7. float temp2 = pow(e, -(x * x) / 2 * theta2);
8. return temp1 * temp2;
9. }
10. void glb_calc_gauss_nums() {
11. g_GaussNum[0] = 1.0f;
12. for (int32_t i = 1; i < sizeof(g_GaussNum) / sizeof(g_GaussNum[0]); i++) {
13. g_GaussNum[i] = glb_gauss_num(i);
14. }
15. float total = 0.0f;
16. for (int32_t i = 0; i < sizeof(g_GaussNum) / sizeof(g_GaussNum[0]); i++) {
17. total += g_GaussNum[i];
18. }
19. for (int32_t i = 0; i < sizeof(g_GaussNum) / sizeof(g_GaussNum[0]); i++) {
20. g_GaussNum[i] = g_GaussNum[i] / total;
21. }
22. }

对于步骤（4），使用了如下的两个Shader：

1. blend.vs

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Blend pass through vertex shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec3 vertex;
9. in vec2 texcoord;
10. out vec2 vs_texcoord;
11. void main() {
12. gl_Position = vec4(vertex, 1.0);
13. vs_texcoord = texcoord;
14. }

1. blend.ps

1. //--------------------------------------------------------------------
2. // Declaration: Copyright (c), by i_dovelemon, 2016. All right reserved.
3. // Author: i_dovelemon[1322600812@qq.com]
4. // Date: 2016 / 06 / 29
5. // Brief: Alpha blend shader
6. //--------------------------------------------------------------------
7. #version 330
8. in vec2 vs_texcoord;
9. out vec4 color;
10. uniform sampler2D blur_tex;
11. uniform sampler2D scene_tex;
12. void main() {
13. vec4 blur_color = texture2D(blur_tex, vs_texcoord);
14. vec4 scene_color = texture2D(scene_tex, vs_texcoord);
15. color = blur_color * 0.5 + scene_color * 0.5;
16. }

最后的混合计算，我选取了模糊贴图的一半加上场景贴图的一半来进行混合操作。最终的效果如下图所示：

图8

总结

       
上面文章为了简化操作，做了很多在实际项目中不可以的操作。比如在Shader中计算纹理步进值。而在实际的情况下，实现辉光效果远远要比这里展示的复杂的多，比如场景中有不发光的物体，和发光的物体，此时需要通过Alpha贴图来标识出场景图中哪些是需要进行模糊的，而哪些是不需要进行。又比如说，发光物体在某个不发光物体的后面，那么进行模糊计算的时候，必然会让发光物体渗透到不发光物体中，会产生比较粗糙的感觉。

        所以，本片文章仅仅是为了向大家讲述辉光算法的基本原理，至于如何整合到你们自己的项目中去，需要大家自己来思考！希望本篇文章能够帮助到你们！

参考文献

        http://http.developer.nvidia.com/GPUGems/gpugems_ch21.html GPU Gems - Chapter 21.Real-time Glow

        http://www.nutty.ca/?page_id=352&link=glow Nutty-Software-Glow(aka Bloom)

        http://blog.csdn.net/a3070173/article/details/3220940 GLSL实现Glow效果

        http://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html 高斯模糊的算法-阮一峰的网络日志

        http://baike.baidu.com/link?url=bWuVG4Lbr7DM-UReJNKUDOqrNcA788yhwpgl7Ln1IE-TRqiBkEYJrRP1tJEZ2sHOa0MAat21_iVRSs2dS6R4_a 正态分布-高斯分布-百度百科