Cocos2d-x 3.10心得（06）－ 运动模糊

我的经历生动说明了人的懒惰真是深入到骨髓，当想起来写写笔记的时候，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，大致可以就看到这样的效果了