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