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

笔者介绍：姜雪伟，IT公司技术合伙人，IT高级讲师，CSDN社区专家，特邀编辑，畅销书作者，国家专利发明人;已出版书籍：《手把手教你架构3D游戏引擎》电子工业出版社和《Unity3D实战核心技术详解》电子工业出版社等。CSDN视频网址：http://edu.csdn.net/lecturer/144 在使用相机进行拍摄照片使，为了突出当前的角色,相机自动会将远处的物体进行模糊处理也就是所说的Blur效果处理。cocos2d-x引擎提供了自己的Demo，在这里我们就不介绍了，我们自己重新实现一个关于Blur渲染的实例，在这里先说一下编写思路：在片段着色器中可以得到当前像素点的颜色值，要想让这个颜色变得模糊，就要让它与它周围的像素点的颜色稍微接近一点，那么我们就需要拿到这个像素点周围的像素点的颜色值，把这些个像素点的值加起来取平均值，就得到了一个区域内的平均颜色。
   如果直接使用这个颜色，最终的效果会变得很模糊，如果只是稍微模糊一点，就要让这个平均值更接近于当前像素点原本的颜色，为此，取均值时对每个像素点增加了一个权重的定义，当前像素点的权重最高，依次向周围减弱，使得最后得到的均值颜色更接近于当前像素点原始的颜色。在Cocos2d-x引擎中的Shader脚本实现如下所示：
#ifdef GL_ES
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
//模糊对象的实际分辨率
uniform vec2 resolution;
//半径
uniform float blurRadius;
// 间隔的段数
uniform float sampleNum;

vec4 blur(vec2);

void main(void)
{
vec4 col = blur(v_texCoord); //* v_fragmentColor.rgb;
gl_FragColor = vec4(col) * v_fragmentColor;
}

vec4 blur(vec2 p)
{
if (blurRadius > 0.0 && sampleNum >1.0)
{
vec4 col = vec4(0);

vec2 unit = 1.0 / resolution.xy;

float r = blurRadius;
float sampleStep = r / sampleNum;

float count = 0.0;
//遍历一个矩形，当前的坐标中心点，遍历矩形中的每个像素点的颜色
for(float x = -r; x < r; x += sampleStep)
{
for(float y = -r; y < r; y += sampleStep)
{
//权重，p点的权重最高，向四周依次减少
float weight = (r - abs(x)) * (r - abs(y));
col += texture2D(CC_Texture0, p + vec2(x * unit.x, y * unit.y)) * weight;

count += weight;
}
}
//得到实际的模糊颜色的值
return col / count;
}

return texture2D(CC_Texture0, p);
}

下面用Blur的Shader实现把当前角色进行模糊处理，实现的效果如下：



通常情况下，Bloom和Blur这些效果一起在场景中使用会得到更好的效果。在游戏中实现的Bloom和Blur效果如下所示：