bloom特效
由于之前在各种场合看到别人贴出的bloom特效做的图片，一开始还以为是用的HDR技术，后来一研究才发现绝大部分都仅仅是一个bloom特效而已，遂打算学习一番。其实bloom是一个非常简单的后期图像处理过程，之所以称其为图像处理过程，是因为它是一种可以在图片生成完毕后再使用的后处理过程。那么它到底是什么样的一种过程呢？简单地说就是：
Step1. 先对图片每一像素点进行一个亮度值检测，若大于某一个阈值就保留其原始颜色值，否则置为黑色；
Step2. 对上一步结果做高斯模糊；
Step3. 将模糊后的图片和原图片做一个加权和(权值视具体情况而定)；
这里面涉及到的几个关键知识点有必要简单地说一下：
1.所谓一个像素的亮度值是什么？
亮度值并不是(R+G+B)/3,而是另外一种颜色格式(YUV颜色格式)中的Y值，YUV格式是欧洲电视系统所采用的一种颜色编码方式，其中"Y"表示明亮度，"U"和"V"表示色彩和饱和度。YUV格式在图像处理中运用广泛，比如大家耳熟能详的灰度图其实就是存放的每个像素对应的"Y"值。YUV和RGB之间有一个线性的转换关系：
Y=0.299R+0.587G+0.114B;
U=-0.147R-0.289G+0.436B;
V=0.615R-0.515G-0.100B;
可见G的值对亮度的贡献最大，而B贡献最小，这也符合人类视觉系统对于亮度的敏感程度值，因此Step1中的亮度值检测实际就是判断(0.299R+0.587G+0.114B)是否大于一个既定阈值。
2.高斯模糊是什么？
图像模糊的原理很简单，就是一张图片中每个像素都取周边一定范围内像素的加权和，最简单的权值设置方法就是均匀求权，即每个像素是这个范围内所有像素的平均值，如果范围是3*3，那么权值矩阵为:
，而高斯模糊则是利用二维正态分布来生成这个权值矩阵，比如设二维正态分布函数为G(x,y),我们可以让矩阵正中心那个点值为G(0,0),中心偏左的点为G(-1,0),以此类推,3*3的权值矩阵可以是:
。当然，这里只是随便举个例子，实际运用中肯定会比这个复杂得多，因为还要涉及到方差σ的选取等问题。实际上高斯模糊假设了在图像空间中像素的变化是缓慢的，因此相邻像素之间的变化不会太明显，但是随机的两个像素间就可能形成很大的像素差，这样也使高斯模糊能在保留信号的条件下减小噪声。但是这种方法在接近物体边缘的时候就无效了，因为图像中物体边缘两个点的颜色差值往往会比较大，所以高斯模糊会把边缘平滑掉。而另一种双边滤波方式则不会把边缘磨平，但是在bloom中，恰恰相反，我们希望得到一种看起来"颜色外溢"的效果，所以高斯模糊是个理想的选择。
只要对以上两点了解后，编写一个bloom特效程序简直就是分分钟的事了，下面是我用OPENCV写的一个对图片进行bloom处理的简单程序：
#include <cv.h>
#include <highgui.h>
#define THRESHOLD_COLOR 0x38
#define A_VALUE 1.0f
#define B_VALUE 1.0f
IplImage *img;
int main(int argc,char** argv) {
IplImage *img = cvLoadImage("chinesedragon.jpg");
cvNamedWindow("Image-in",CV_WINDOW_AUTOSIZE);
//先显示原jpg图
cvShowImage("Image-in",img); // 灰度化
IplImage *imggrey=cvCreateImage(cvGetSize(img), IPL_DEPTH_8U, 1);
cvCvtColor(img,imggrey,CV_BGR2GRAY);
cvShowImage("Image-grey",imggrey);
IplImage *tmp=cvCreateImage(cvGetSize(img), IPL_DEPTH_8U, 3);
cvZero(tmp);
for (int h=0;h<tmp->height;h++) {
uchar *p=(uchar*)(imggrey->imageData+h*imggrey->widthStep);
uchar *ptr_s = cvPtr2D(img, h, 0, NULL);
uchar *ptr_d = cvPtr2D(tmp, h, 0, NULL);
for (int w=0;w<tmp->width;w++) {
if (p[w] >= THRESHOLD_COLOR) {
ptr_d[w*3] = ptr_s[w*3];
ptr_d[w*3+1] = ptr_s[w*3+1];
ptr_d[w*3+2] = ptr_s[w*3+2];
}
}
}
cvShowImage("Image-threshold",tmp);
//分配空间存储处理后的图像
IplImage *blur=cvCreateImage(cvGetSize(img), IPL_DEPTH_8U, 3);
cvSmooth(tmp,blur,CV_GAUSSIAN,7,7);
cvShowImage("Image-gaussianblur",blur);
// 图像相加
for (int h=0;h<tmp->height;h++) {
uchar *ptr_s = cvPtr2D(img, h, 0, NULL);
uchar *ptr_d = cvPtr2D(blur, h, 0, NULL);
for (int w=0;w<tmp->width;w++) {
unsigned int r1 = A_VALUE * ptr_s[w*3] + B_VALUE * ptr_d[w*3];// * ptr_d[w*3] / 0xff;
if (r1 > 0xff) r1 = 0xff;
ptr_d[w*3] = r1;
unsigned int r2 = A_VALUE * ptr_s[w*3+1] + B_VALUE * ptr_d[w*3+1];// * ptr_d[w*3+1] / 0xff;
if (r2 > 0xff) r2 = 0xff;
ptr_d[w*3+1] = r2;
unsigned int r3 = A_VALUE * ptr_s[w*3+2] + B_VALUE * ptr_d[w*3+2];// * ptr_d[w*3+2] / 0xff;
if (r3 > 0xff) r3 = 0xff;
ptr_d[w*3+2] = r3;
}
}
cvShowImage("Image-bloom",blur);
//清除垃圾
cvReleaseImage(&imggrey);
cvReleaseImage(&img);
cvReleaseImage(&tmp);
cvWaitKey();
//销毁窗口
cvDestroyWindow("Image-in");
cvDestroyWindow("Image-grey");
cvDestroyWindow("Image-threshold");
cvDestroyWindow("Image-gaussianblur");
cvDestroyWindow("Image-bloom");
return 0;
}
最后是我用这段程序对我以前渲染的中国龙进行bloom后的效果(下面两张图分别是bloom效果图和原始图片)：
后记：我发现在很多游戏中阈值似乎设置的是0(也可能是它们用了更为复杂的方法)，这样可以避免刚好处于阈值两端的像素点间颜色不连续的问题。
在网上有一篇讲bloom和hdr区别的帖子中(可参考http://game.ali213.net/thread-2075708-1-1.html)用了一幅毁灭战士3中的图片,下面是效果比较
(1:游戏中未开启bloom的效果，2:游戏中开启bloom的效果，3:图1经过我的程序跑出来的bloom效果(阈值设为0,A,B两个value都设为1.0))
可以看出游戏中的泛光现象更加明显，可能是它用了更宽范围的高斯模糊(或类似算法)。
