【cocos2d】使用 shader

最新推荐文章于 2025-03-31 23:02:57 发布

xingxinmanong

最新推荐文章于 2025-03-31 23:02:57 发布

阅读量4.7k

点赞数

分类专栏： cocos2d-x 文章标签： cocos2d shader 自定义shader

本文链接：https://blog.csdn.net/xingxinmanong/article/details/78365109

版权

本文详细介绍了在cocos2d-x中如何使用内置和自定义shader，包括如何设置图像变灰、实现水波效果，并探讨了GLProgramState在不同情况下的影响。还展示了在lua中使用shader的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用内置 shader

关于 cocos2d-x 创建和使用 shader 的过程可以参考我这篇文章
cocos2d-x shader 源码解析

先上传接下来会用到的几张图片资源，图片来自网上，参考自这篇文章
http://www.cocoachina.com/bbs/read.php?tid=1693873

源图片 colormap.jpg

colormap

法线贴图 water_normal.jpg

使用内置 shader 非常简单，直接通过一个 key 值从 GLProgramCache 缓冲区取到一个 GLProgram，然后设置给 Node 即可；默认 shader 的 key 值在 GLProgram 中定义

auto sprite = Sprite::create("colormap.jpg");
sprite->setPosition(visibleSize / 2);
addChild(sprite);
auto program = ShaderCache::getInstance()->programForKey(GLProgram::SHADER_NAME_POSITION_GRAYSCALE);
sprite->setShaderProgram(program);

这里使用的SHADER_NAME_POSITION_GRAYSCALE 是设置图像变灰的功能，其使用的顶点着色器和片段着色器分别是 ccPositionTextureColor_noMVP_vert 和 ccPositionTexture_GrayScale_frag。

ccPositionTextureColor_noMVP_vert 顶点着色器不乘以 CC_MVPMatrix 矩阵，默认都会乘上这个矩阵，这是 2.x 留下的习惯，用于将局部坐标转换为世界坐标；而 3.x 顶点在传入 shader 之前就已经做转换了，所以可以不用乘上这个矩阵，只有带上 _noMVP 的着色器才不会乘上 CC_MVPMatrix 矩阵

//ccPositionTextureColor_noMVP_vert
const char* ccPositionTextureColor_noMVP_vert = STRINGIFY(
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

#ifdef GL_ES\n
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
#else
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
#endif

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

ccPositionTexture_GrayScale_frag 为每一个颜色乘上一个数值，达到变灰的效果

//ccPositionTexture_GrayScale_frag
const char* ccPositionTexture_GrayScale_frag = STRINGIFY(

#ifdef GL_ES\n
precision mediump float;
#endif

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

void main(void)

	vec4 c = texture2D(CC_Texture0, v_texCoord);
	gl_FragColor.xyz

最低0.47元/天解锁文章