Cocos2d-x 3.x 图形学渲染系列二十三

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。

CSDN视频网址：http://edu.csdn.net/lecturer/144

游戏品质的提升不仅仅只限于模型的材质和特效渲染，游戏场景的渲染也是非常重要的，针对游戏场景的渲染，通常称为后处理渲染，也称为滤镜效果。后处理渲染用通俗的语言讲就是程序运行针对的是整个游戏场景每帧的渲染，并不急于将渲染的场景立刻显示出来，而是再用后处理Shader对渲染的场景图片做最后一次渲染处理，最终将其显示出来。这个生活中装修房子类似，先把整个房间刷成白色，这个时候还不能交付给户主，在此基础上再粉刷一遍涂料。笔者本人也独立开发过大型3D游戏引擎，针对场景的渲染做过一些后处理效果，比如Bloom，Blur，SSAO，PSSM等，场景经过滤镜渲染效果的场景截图如下：

在游戏产品中展示的滤镜效果如下:

经过后处理Shader渲染后的场景如梦如幻，效果非常好。下面把引擎中使用的滤镜Shader渲染介绍给读者。

全屏 Bloom 效果，有时候也叫 Glow 效果，中文一般叫做 “ 全屏泛光 ” 。首先介绍 Bloom 的实现原理，其实比较简单，首先我们需要设置一个我们要泛光的亮度阈值，第一遍处理时，我们需要对原场景图进行筛选，所有小于这个阈值的像素都被筛掉，所有大于该值的像素留下来，这样，我们就得到了一张只包含需要泛光部分的贴图，其余部分是黑色的；泛光效果是由衍射效果产生的，我们现实世界中看到的泛光效果，最亮的地方实际上是会向暗的地方扩散的，也就是说在亮的地方，边界是不明显的，所以我们就需要对泛光是部分，也就是我们上一步操作的结果图片进行模糊操作，达到光溢出的效果，最后，我们将处理过的图像和原图像进行叠加，就得到了最终的效果。其原理效果图如下:

创建“全屏泛光”渲染的步骤，(a)场景正常渲染(b)泛光光源的渲染是使用Blur创建的 (c) 把泛光纹理加入到正常渲染的场景图中 (d) 最后产生泛光效果。Bloom效果是针对场景渲染的，实现方式很多种，在Cocos2d-x引擎中Blur的模糊处理只做了垂直处理，按照这个思路实现的Bloom渲染代码如下所示：

#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform vec2 resolution;

const float blurSize = 1.0/512.0;
const float intensity = 0.35;
void main()
{
   vec4 sum = vec4(0);
   vec2 texcoord = v_texCoord.xy;
   int j;
   int i;
   sum += texture2D(CC_Texture0, vec2(texcoord.x - 4.0*blurSize, texcoord.y)) * 0.05;
   sum += texture2D(CC_Texture0, vec2(texcoord.x - 3.0*blurSize, texcoord.y)) * 0.09;
   sum += texture2D(CC_Texture0, vec2(texcoord.x - 2.0*blurSize, texcoord.y)) * 0.12;
   sum += texture2D(CC_Texture0, vec2(texcoord.x - blurSize, texcoord.y)) * 0.15;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y)) * 0.16;
   sum += texture2D(CC_Texture0, vec2(texcoord.x + blurSize, texcoord.y)) * 0.15;
   sum += texture2D(CC_Texture0, vec2(texcoord.x + 2.0*blurSize, texcoord.y)) * 0.12;
   sum += texture2D(CC_Texture0, vec2(texcoord.x + 3.0*blurSize, texcoord.y)) * 0.09;
   sum += texture2D(CC_Texture0, vec2(texcoord.x + 4.0*blurSize, texcoord.y)) * 0.05;
	
	// 垂直Blur,使用九个取样
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 4.0*blurSize)) * 0.05;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 3.0*blurSize)) * 0.09;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - 2.0*blurSize)) * 0.12;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y - blurSize)) * 0.15;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y)) * 0.16;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + blurSize)) * 0.15;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 2.0*blurSize)) * 0.12;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 3.0*blurSize)) * 0.09;
   sum += texture2D(CC_Texture0, vec2(texcoord.x, texcoord.y + 4.0*blurSize)) * 0.05;

   //增加模糊强度
   gl_FragColor = sum*intensity + texture2D(CC_Texture0, texcoord); 
   return;
}

使用Bloom实现的效果对模型的渲染 如下图: