介绍：
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
