cocos2dx3.X shader使图片置灰

1 OpenGL ES着色器

opengl es的着色器有.fsh和.vsh两个文件。这两个文件在被编译和链接后就可以产生可执行程序与GPU交互。attribute是从外部传进来的，每一个顶点都会有这两个属性，所以它也叫做vertex attribute（顶点属性）。而varying类型的变量是在vertex shader和fragment shader之间传递数据用的。

.vsh 是 vertex shader，用与顶点计算，可以理解控制顶点的位置，在这个文件中我们通常会传入当前顶点的位置，和纹理的坐标。新建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;
}

gray.fsh 是片段shader。在这里面我可以对于每一个像素点进行重新计算。

varying vec4 v_fragmentColor;	
varying vec2 v_texCoord;	
		
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, gray, v_orColor.a);
}		

两个文件放在resource文件夹下。

2 使图片置灰

void HelloWorld::sprAddGray(Sprite * sprite)
{
	if (sprite)
	{
		GLProgram * p = new GLProgram();
		p->initWithFilenames("gray.vsh", "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);
	}
}

3 使图片还原

void HelloWorld::sprRemoveGray(CCSprite * sprite)
{
	if (sprite !=NULL)
	{
		std::string str = "ShaderPositionTextureColor_noMVP";
		CCGLProgram * pProgram = CCShaderCache::sharedShaderCache()->programForKey(str);
		sprite ->setShaderProgram(pProgram);
		CHECK_GL_ERROR_DEBUG();
	} 
}

4 运行效果

程序中响应按钮代码如下，形成灰色与彩色图交替显示。

void HelloWorld::onBtnColorChange(Ref* MyRef)
{
	static int idx = 0;
	if (idx % 2 == 0)
	{
		sprAddGray(m_spr);
	}
	else
	{
		sprRemoveGray(m_spr);
	}
	idx++;
}