在Cocos2d-x 3.0中使用opengl shader

最新推荐文章于 2022-01-11 13:41:01 发布

我的尾巴

最新推荐文章于 2022-01-11 13:41:01 发布

阅读量827

点赞数

分类专栏： cocos2d-x 3.0 Shader

本文链接：https://blog.csdn.net/u010023457/article/details/44677153

版权

cocos2d-x 3.0 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Shader

1 篇文章 0 订阅

订阅专栏

之前一直在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, 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;
}