给cocos2d-x添加滤镜功能

介绍：

cocos做项目时经常会遇到对图片进行变色的需求，比如最常用的变灰，而cocos2dx的sprite里面并没有这个支持，需要开发者手工去拓展，即通过编写shader来解决。由服务端转来做客户端时候，每次碰到shader都会十分苦恼，无从下手，趁着这次机会学习一下怎么使用shader。通过网上学习知道了下面两种解决的方法：
针对特定的需求编写对应的shader，使用cocos引擎导出的cc.GLProgram的接口直接进行shader编写
参考photoshop的方式，预先实现不同的滤镜，供玩法灵活组合

第一种方式，功能最强大，任何功能都可以实现，但是每次都需要操作shader，尤其是处理简单的图像变化时，显得过于重量级。第二种方式，是采用了类似photoshop添加滤镜的方式来对图像进行处理，本文也主要是针对第二种方式进行介绍。该方法在阅读quick-coocs2dx项目中偶然发现，感兴趣可以下载来看看quick的封装。

使用：

local FILTERS = {
    -- colors
    GRAY =          {CCGrayFilter},                 -- {r 0.299, g 0.587, b 0.114, a 0.0} or no parameters
    RGB =           {CCRGBFilter, 3, {1, 1, 1}},    -- {0.0~1.0, 0.0~1.0, 0.0~1.0}
    HUE =           {CCHueFilter, 1, {0}},          -- {-180~ 180} see photoshop
    BRIGHTNESS =    {CCBrightnessFilter, 1, {0}},   -- {-1.0~1.0}
    SATURATION =    {CCSaturationFilter, 1, {1}},   -- {0.0~2.0}
    CONTRAST =      {CCContrastFilter, 1, {1}},     -- {0.0~4.0}
    EXPOSURE =      {CCExposureFilter, 1, {0}},     -- {-10.0, 10.0}
    GAMMA =         {CCGammaFilter, 1, {1}},        -- {0.0, 3.0}
    HAZE =          {CCHazeFilter, 2, {0, 0}},      -- {distance -0.5~0.5, slope -0.5~0.5}
    SEPIA =         {CCSepiaFilter},                -- {no parameters}
    -- blurs
    GAUSSIAN_VBLUR =    {CCGaussianVBlurFilter, 1, {0}},        -- {pixel}
    GAUSSIAN_HBLUR =    {CCGaussianHBlurFilter, 1, {0}},        -- {pixel}
    ZOOM_BLUR =         {CCZoomBlurFilter, 3, {1, 0.5, 0.5}},   -- {size, centerX, centerY}
    MOTION_BLUR =       {CCMotionBlurFilter, 2, {1, 0}},        -- {size, angle}
    -- others
    SHARPEN =       {CCSharpenFilter, 2, {0, 0}},   -- {sharpness, amount}
    MASK =          {CCMaskFilter, 1},              -- {DO NOT USE IT}
    DROP_SHADOW =   {CCDropShadowFilter, 1},        -- {DO NOT USE IT}
}

quick-cocos2dx的项目里实现了各种filter，并在脚本层封装了接口调用，这样就可以方便地对sprite添加滤镜了。

使用多组shader实现滤镜叠加：

我们知道，每个CCNode实例都持有一个m_pShaderProgram成员变量进行渲染操作，而CCGLProgram负责shader的生成、编译、缓存、attribute的bind、uniform设置等等工作，也没有提供修改接口。滤镜的叠加，除了修改cocos引擎的源码，这里也提供了另外一种方式。使用CCRenderTexture。
CCRenderTexture可以用来渲染屏幕外的内容，我们可以使用它将纹理渲染到屏幕外的区域中，再对纹理进行进一步操作。

//建立横向和纵向模糊滤镜
CCHBlurFilter* __hblurFilter = CCHBlurFilter::create(0.02f);
CCBlurBaseFilter* __vblurFilter = CCVBlurFilter::create(0.02f);
//对helloworld.pn使用横向模糊滤镜
CCSprite* __hs = CCFilteredSprite::create("helloworld.png", __hblurFilter);
__hs->setAnchorPoint(ccp(0,0));
CCSize __size = __hs->getContentSize();
//将进行过横向模糊的纹理渲染到CCRenderTexture中
CCRenderTexture* __canva = CCRenderTexture::create(__size.width, __size.height);
__canva->begin();
__hs->visit();
__canva->end();
//根据CCRenderTexture中的纹理创建新的纹理
CCTexture2D* __tex2 = new CCTexture2D();
__tex2->initWithImage(__canva->newCCImage(true));
__tex2->autorelease();
//根据新的纹理创建最终的CCFilteredSprite，应用纵向模糊滤镜
CCSprite* __final = CCFilteredSprite::createWithTexture(__tex2, __vblurFilter);
__final->setAnchorPoint(ccp(0,0));
__final->setPosition(ccp(0,0));
//显示最终效果
this->addChild(__final);

这个filters项目可以在这里找到。https://github.com/zrong/cocos2d-x-filters