我的经历生动说明了人的懒惰真是深入到骨髓,当想起来写写笔记的时候,cocos2dx都已经从3.0升到3.13了。虽然我用的是3.10版本,不过应该不会有太多差别。
说起来,百度“运动模糊”的话,可以找到很多讲原理的文章,也有不少关于u3d实现运动模糊的shader,但是用cocos2dx做运动模糊的资料似乎并不太多。难道说在大家眼里,只有u3d才能高大上,cocos就只能玩玩像素鸟?啧啧,这可不太好,我们今天就来纠正一下吧。
原理的东西我们就直接略过吧,反正这种东西一搜一大把。
实现上,运动模糊有好几种做法,最直观的一种,也是最接近原理的一种:在渲染需要模糊的物体时,也将其前n帧的内容渲染出来,然后混合。
具体来说,比如你准备渲染一个角色,当你渲染这个角色第100帧的内容时,同时也需要把第99、98、97……帧的内容也渲染出来,帧数越多,模糊的效果越明显,这里我们假设取8帧的内容,那么再将每一帧的内容以1/9的比率进行混合,就能得到一个运动模糊的结果。
在真实的生产环境中,大概没有人会这样做。首先,对一个角色每一帧要渲染9次,开销不小;另外,如果角色在高速运动,那么得到的结果看起来可能更像是残影,而不是模糊。对于高速物体来说,即使游戏跑上60帧,一帧也可能会产生一段不小的距离,这时候你可能得以0.1帧的间隔,甚至更低,来渲染角色,再进行混合。这简直就是个无底洞,所以还是放弃吧。
如果能搞明白,我们的目的不是还原真相,而只是让人以为他看到了真相,那么道路就更多一些。比方说,可以通过在一帧的内容上多次采样然后混合。假设一个角色在从左往右运动,在片段着色器中,我们先按照通常的方式对角色的纹理进行采样,然后,将纹理坐标向左偏移1个像素的距离,采样一次;然后再偏移1个像素,采样一次……一共重复n次,将每一次的结果以相同的权重进行混合,就得到了一个运动模糊的效果。
在cocos2dx里,这个片段着色器大概是这样:
#ifdef GL_ES
precision lowp float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform vec2 v_ins;
uniform int i_num;
uniform float f_weight;
void main()
{
vec2 v = v_texCoord;
vec4 c = texture2D(CC_Texture0, v) * f_weight;
for (int i = 0; i < i_num; ++i)
{
v += v_ins;
c += texture2D(CC_Texture0, v) * f_weight;
}
gl_FragColor = c;
}
这段代码可以保存为一个文本文件,比如叫motionblur.frag
其中,i_num是采样次数,f_weight是混合的权重,v_ins表示每次采样时纹理坐标的偏移量。
假设角色图片为100x100像素,从左往右运动,可以令i_num为15,f_weight为0.0625,v_ins为(-0.02, 0),C++代码如下:
auto center = this->getContentSize() * Point::ANCHOR_MIDDLE;
auto size = this->getContentSize();
FileUtils *fu = FileUtils::getInstance();
GLProgram *p = nullptr;
Data fragData;
std::string str;
fragData = fu->getDataFromFile("motionblur.frag");
str.assign((const char *)fragData.getBytes(), fragData.getSize());
fragData.clear();
p = new GLProgram;
p->initWithByteArrays(ccPositionTextureColor_noMVP_vert, str.c_str());
p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION);
p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR);
p->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_TEX_COORD, GLProgram::VERTEX_ATTRIB_TEX_COORDS);
p->link();
p->updateUniforms();
auto sp = Sprite::create(“role.png");
auto ps = GLProgramState::create(p);
ps->setUniformInt("i_num", 15);
ps->setUniformFloat("f_weight", 1.f / 16.f);
ps->setUniformVec2("v_ins", Vec2(-2.f / 100.f, 0.f));
sp->setGLProgramState(ps);
sp->setPosition(center);
this->addChild(sp);
p->release();
原图和模糊后的效果大概是这样
上面的方法是用来实现单个物体的运动模糊,另外一种圆形放射状的模糊效果,可以用来模拟相机快速移动或是强烈的冲击效果。
在原理上,这跟物体运动模糊差不多,只不过,采样次数和纹理偏移不再是常量。在这种方式下,通常我们设定一个中心点,在片段着色器中,从纹理坐标位置到中心点的归一化向量,就是我们采样时的纹理偏移;而从纹理坐标到中心点的距离,则用来确定采样的次数:距离越远,采样越多。
#ifdef GL_ES
precision lowp float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform vec2 v_center;
uniform float f_ins;
uniform mediump float f_mlen;
void main()
{
vec2 os = v_center - v_texCoord;
float dis = max(sqrt(os.x * os.x + os.y * os.y), f_ins * 0.1);
mediump float num = floor(dis * f_mlen) + 1.;
float rate = 1. / num;
vec2 st = vec2(f_ins * os.x / dis, f_ins * os.y / dis);
vec4 sc = texture2D(CC_Texture0, v_texCoord);
vec4 c = vec4(0., 0., 0., 0.);
os = v_texCoord;
for (mediump float i = 1.; i < num; i += 1.)
{
os += st;
c += texture2D(CC_Texture0, os) * rate;
}
gl_FragColor.rgb = c.rgb + sc.rgb * rate;
gl_FragColor.a = sc.a;
}
典型情况下,这种效果都是应用在全屏范围下。取一张全屏大小的图片,设置参数v_center为(0.5, 0.5),f_ins为1.0 / 1136.0,f_mlen为64.0,大致可以就看到这样的效果了