之前一直在TestCpp中看到shader可以把图片变成灰色的，也没有自己手动写过，最近在网上找了些博客或者论坛了解了一些。

现在这个里面使图片变成灰色的，毕竟我也是对OpenGL了解的不是很多，只是在这边介绍他的一些实用方法。

具体代码：

bool GLSprite::init()
{
	auto spriteTest = Sprite::create("wall.png");
	spriteTest->setPosition(Point(400,240));
	this->addChild(spriteTest,-1);

	auto spriteNor = Sprite::create("Tag.png");
	spriteNor->setPosition(Point(300,240));
	this->addChild(spriteNor,2);

	auto spriteGray = Sprite::create("Tag.png");
	spriteGray->setPosition(Point(500,240));
	spriteGray->setTag(102);
	this->addChild(spriteGray,2);
	graySprite(spriteGray);

	auto spriteClose = Sprite::create("CloseNormal.png");
	auto spriteCloseSelect = Sprite::create("CloseNormal.png");
	spriteCloseSelect->setScale(1.2f);
	spriteCloseSelect->setPosition(Point( spriteClose->getBoundingBox().size.width / 2 - spriteCloseSelect->getBoundingBox().size.width / 2,spriteClose->getBoundingBox().size.height / 2 - spriteCloseSelect->getBoundingBox().size.height / 2));
	auto itemClose = MenuItemSprite::create(spriteClose,spriteCloseSelect,CC_CALLBACK_1(GLSprite::close,this));
	itemClose->setPosition(Point(780,460));
	Menu* pMenu = Menu::create(itemClose,NULL);
	pMenu->setPosition(Point::ANCHOR_BOTTOM_LEFT);
	this->addChild(pMenu,2);

//	spriteGray->setGLProgramState(GLProgramState::getOrCreateWithGLProgramName(GLProgram::SHADER_NAME_POSITION_TEXTURE_COLOR_NO_MVP));
	
	return true;
}

void GLSprite::graySprite(Sprite* sprite)
{
	if(sprite)  
	{  
		GLProgram * p = new GLProgram();  
		p->initWithFilenames("Shader/gray.vsh","Shader/gray.fsh");  
		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();  
		sprite->setShaderProgram(p);  
	} 

}

void GLSprite::close(Ref* pSender)
{
	auto sprite = (Sprite*)this->getChildByTag(102);
	sprite->setShaderProgram(ShaderCache::getInstance()->getProgram(GLProgram::SHADER_NAME_POSITION_TEXTURE_COLOR_NO_MVP));
}

里面使用了两张相同的图片作为对比效果如图：

之前在写的过程中想到如果想把图片的颜色改变回来怎么办呢？

代码中的Close()方法中有实现了。

在资源文件中同样需要使用到的是 .vsh 和 .fsh 文件。具体在下面的代码中贴出来，就不需要在跑到其他位置下载了。

gray.fsh文件

varying vec4 v_fragmentColor;	
varying vec2 v_texCoord;	
uniform sampler2D CC_Texture0;	
// gray.fsh
void main()			
{
	vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0,v_texCoord);
	float gray = dot(v_orColor.rgb,vec3(0.299,0.587,0.114));
	gl_FragColor = vec4(gray,gray,v_orColor.a);
}				

gray.vsh文件

attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
					

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
								
void main()	
{							
    gl_Position = CC_PMatrix * a_position;
	v_fragmentColor = a_color;
	v_texCoord = a_texCoord;
}