【复习笔记】 cocos2d-x 2.x 渲染特效实现 七 辉光效果

辉光效果经常用来做一些物体的自发光，这种发光效果不需要光照计算，只是在贴图上进行发光的模拟效果，所以有着很好的效率。辉光效果意味着贴图会变亮。为了对发光的部分做计算，需要一张glowmap贴图，当我们使用src和dst都为GL_ONE的方式，混合glowmap和原图时，原图就会对按照glowmap的样子变亮了~但是作为辉光的效果，仅仅只有变亮是不够的，由于光线在穿过空气时亮度会衰减，所以周围会有一圈逐渐消失的光晕。所以我们利用原图的模糊贴图的做glowmap，这样辉光就会有很好的光晕效果了~因为简单模糊效果不够细腻，光晕效果会不是很好，所以我们用高斯模糊来实现~

这次，我们需要对一个节点树的做高斯模糊处理，原因是这样之后，可以实现节点树的辉光效果，另外，单张贴图图片边缘不能模糊延伸的问题也可以得到解决~由于之前高斯模糊是需要做一次RTT才能实现的，而在这之前，要得到节点树的整屏贴图也要做一次RTT，所以，这次渲染过程中包含有两次RTT，按照先后顺序，具体作用分别是：生成节点树的贴图，做横向的高斯模糊。

void CCEffectSprite::visitGlow(){float blursDis[2] = {_pixelSpan/_screenBufferSize.width, _pixelSpan/_screenBufferSize.height};GLint size = sizeof(ccV3F_C4B_T2F);    long data = (long)&m_sQuad;/**/    // gen a empty texture    glGenTextures(1, &_texture);    glBindTexture(GL_TEXTURE_2D, _texture);glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, _screenBufferSize.width, _screenBufferSize.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);        // gen a off-screen framebuffer    GLint oldFBO;    glGetIntegerv(GL_RENDERBUFFER_BINDING, &oldFBO);    glGenFramebuffers(1, &_framebuffer);    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer);    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture, 0);if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {CCLOG("glCheckFramebufferStatus ERROR! 0x%04x", glCheckFramebufferStatus(GL_FRAMEBUFFER));}        // ************ first draw ******************CCNode::visit();    // ******************************************        // gen a empty textureGLuint _texture2;    glGenTextures(1, &_texture2);    glBindTexture(GL_TEXTURE_2D, _texture2);glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, _screenBufferSize.width, _screenBufferSize.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, NULL);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);        // gen a off-screen framebuffer    GLuint _framebuffer2;    glGenFramebuffers(1, &_framebuffer2);    glBindFramebuffer(GL_FRAMEBUFFER, _framebuffer2);    glFramebufferTexture2D(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_TEXTURE_2D, _texture2, 0);if (glCheckFramebufferStatus(GL_FRAMEBUFFER) != GL_FRAMEBUFFER_COMPLETE) {CCLOG("glCheckFramebufferStatus ERROR! 0x%04x", glCheckFramebufferStatus(GL_FRAMEBUFFER));}        // ************** second draw *****************// reset stackkmGLMatrixMode(KM_GL_MODELVIEW);kmGLPushMatrix();kmGLLoadIdentity();kmGLMatrixMode(KM_GL_PROJECTION);kmGLPushMatrix();kmGLLoadIdentity();glViewport(0, 0, _screenBufferSize.width, _screenBufferSize.height);CC_NODE_DRAW_SETUP();ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, _texture);    ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex);// uniformsglUniform2f(_uniforms[kUniformBlurDis], blursDis[0], 0.0f);    // attributesccV3F_C4B_T2F_Quad tempQuad;memset(&tempQuad, 0, sizeof(tempQuad));tempQuad.tl.vertices = vertex3(-1, 1, -1);tempQuad.bl.vertices = vertex3(-1, -1, -1);tempQuad.tr.vertices = vertex3(1, 1, -1);tempQuad.br.vertices = vertex3(1, -1, -1);tempQuad.tl.colors = ccc4(255, 255, 255, 255);tempQuad.bl.colors = ccc4(255, 255, 255, 255);tempQuad.tr.colors = ccc4(255, 255, 255, 255);tempQuad.br.colors = ccc4(255, 255, 255, 255);tempQuad.tl.texCoords = tex2(0, 1);tempQuad.bl.texCoords = tex2(0, 0);tempQuad.tr.texCoords = tex2(1, 1);tempQuad.br.texCoords = tex2(1, 0);data = (long)&tempQuad;    glVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, size, (GLvoid *)data);    glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, size, (GLvoid *)(data + sizeof(ccVertex3F)));    glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, size, (GLvoid *)(data + sizeof(ccVertex3F) + sizeof(ccColor4B)));        glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);    // **************************************// ************** third draw *****************glBindFramebuffer(GL_FRAMEBUFFER, oldFBO);CC_NODE_DRAW_SETUP();ccGLBlendFunc(m_sBlendFunc.src, m_sBlendFunc.dst);glActiveTexture(GL_TEXTURE0);glBindTexture(GL_TEXTURE_2D, _texture2);    ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex);// uniformsglUniform2f(_uniforms[kUniformBlurDis], 0.0f, blursDis[1]);// attributesglVertexAttribPointer(kCCVertexAttrib_Position, 3, GL_FLOAT, GL_FALSE, size, (GLvoid *)data);    glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_UNSIGNED_BYTE, GL_TRUE, size, (GLvoid *)(data + sizeof(ccVertex3F)));    glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, size, (GLvoid *)(data + sizeof(ccVertex3F) + sizeof(ccColor4B)));glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);// **************************************    // restore stackkmGLMatrixMode(KM_GL_PROJECTION);kmGLPopMatrix();kmGLMatrixMode(KM_GL_MODELVIEW);kmGLPopMatrix();CCDirector::sharedDirector()->setViewport();/**/    glDeleteTextures(1, &_texture);    glDeleteFramebuffers(1, &_framebuffer);glDeleteTextures(1, &_texture2);    glDeleteFramebuffers(1, &_framebuffer2);}

由于在shader中重用了高斯模糊，横向和纵向两次的渲染代码，所以利用u_BlurDis[1]变量还区分是当前是横向处理还是纵向处理，并且在第二次纵向处理最终可以生成高斯模糊之后，顺便使模糊贴图透明，发亮，并用一般混合方式（ONE,ONE减SCR ALPHA）在发亮贴图下混合源贴图。fragment shader代码如下：

uniform sampler2D CC_Texture0;uniform sampler2D u_Texture1;uniform sampler2D u_Texture2;uniform vec2 u_BlurDis;varying vec4 v_Color;varying vec2 v_TexCoord;void main(){/**/    vec4 finalColor = vec4(0.0, 0.0, 0.0, 0.0);        finalColor += texture2D(CC_Texture0, v_TexCoord - u_BlurDis * 4.0) * 0.05;    finalColor += texture2D(CC_Texture0, v_TexCoord - u_BlurDis * 3.0) * 0.09;    finalColor += texture2D(CC_Texture0, v_TexCoord - u_BlurDis * 2.0) * 0.12;    finalColor += texture2D(CC_Texture0, v_TexCoord - u_BlurDis * 1.0) * 0.15;    finalColor += texture2D(CC_Texture0, v_TexCoord) * 0.18;    finalColor += texture2D(CC_Texture0, v_TexCoord + u_BlurDis * 1.0) * 0.15;    finalColor += texture2D(CC_Texture0, v_TexCoord + u_BlurDis * 2.0) * 0.12;    finalColor += texture2D(CC_Texture0, v_TexCoord + u_BlurDis * 3.0) * 0.09;    finalColor += texture2D(CC_Texture0, v_TexCoord + u_BlurDis * 4.0) * 0.05;    if (u_BlurDis[1] == 0.0) {gl_FragColor = v_Color * finalColor;} else {vec4 originColor = texture2D(CC_Texture0, v_TexCoord);vec4 blurColor = v_Color * finalColor;vec4 glowColor = blurColor * 0.5;glowColor.a = glowColor.a * 0.1;gl_FragColor = glowColor + (1.0 - glowColor.a) * originColor;}}

代码中，利用高斯模糊贴图像素乘以0.5，并把其透明变为原来的0.1倍后才作为glowmap使用~这样会有好一点的发亮效果~最终效果如下：