SpriteBlur类是cocos2d-x例程中的一个类,用于将一个精灵模糊。
由于项目需要模糊场景中的精灵,于是我把该类提取出来,未做任何修改用到自己的工程中,具体是参照网上的教程做的,百度一下就能搜索到。
实际应用发现奇怪的现象:
cocos2d-x_v3.0中提供的SpriteBlur,精灵模糊后基本是正常的,边缘的地方偶尔会闪出黑边。
cocos2d-x_v3.2中提供的SpriteBlur,精灵模糊后原本是透明像素的部分变成了黑色,即便模糊半径设置为0(即不模糊)也一样。
请看下图

左侧是v3.2的效果,采样数设置的是3,模糊半径是10。
右侧是v3.0的效果,模糊半径设置的10。
自己顶一下,不知道v3.2中的这个效果是不是一个BUG。
v3.2透明像素显示为黑色的问题解决了。
在example_Blur.fsh中做如下修改即可:
将 gl_FragColor = vec4(col, 1.0) * v_fragmentColor; // 这里直接把透明度改成1了,所以会黑。
改为 gl_FragColor = vec4(col, texture2D(CC_Texture0, v_texCoord).a) * v_fragmentColor;
但是模糊以后,边缘的部分还是有点不正常。
v3.2中,经过上面的修改之后,人物头像边缘会变成白色,我又尝试了另一种修改,出来的效果与v3.0中的效果一致。
example_Blur.fsh ---->
#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);
gl_FragColor = 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)
{
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);
}
```
可以看到在人物头顶有一条明显的黑线,这点跟v3.0中的效果一样。
另外,还是不太理解Alpha的值跟高斯模糊有什么关系,按理说高斯模糊只是去重新分布rgb颜色值,为什么上一条回复中的修改与本条回复中的修改的效果会不同呢?