cocos shader 之 黑白滤镜

效果:


VSH:

#ifdef OPENGL_ES
precision mediump vec2;
precision mediump float;
#endif

// Attributes
attribute vec3 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;

// Varyings
#ifdef GL_ES
varying vec2 v_texCoord;
#else
varying vec2 v_texCoord;
#endif
varying vec4 v_fragmentColor;

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

FSH:

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;
varying vec4 v_fragmentColor;
void main() 
{
    vec4 col = texture2D(CC_Texture0, v_texCoord );
    float h = dot(col.rgb, vec3(0.3, 0.59, 0.21));
	gl_FragColor = vec4(h, h, h, col.a);
}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Cocos ShaderCocos引擎中用于实现自定义渲染效果的功能。它基于OpenGL ES 2.0或OpenGL ES 3.0,并且可以在2D和3D场景中使用。 使用Cocos Shader,您可以创建各种独特的效果,如阴影、扭曲、发光等等。您可以通过编写GLSL(OpenGL Shading Language)代码来定义着色器程序,然后将其与Cocos引擎中的节点进行关联。 要使用Cocos Shader,首先需要创建一个自定义的Shader文件,然后在Cocos引擎中加载并应用它。您可以使用Cocos Creator编辑器或手动编写代码来实现这一点。 以下是一个简单的示例代码,展示了如何在Cocos Creator中使用Cocos Shader: ```javascript // 创建一个Sprite节点 var spriteNode = new cc.Node(); var sprite = spriteNode.addComponent(cc.Sprite); sprite.spriteFrame = new cc.SpriteFrame("path/to/your/image.png"); // 加载并应用Shader cc.loader.loadRes("path/to/your/shader", cc.RawAsset, function (err, shaderCode) { if (err) { cc.error(err.message || err); return; } // 创建自定义材质 var material = new cc.Material(); material.effectAsset = shaderCode; material.name = 'CustomShader'; // 将材质应用到Sprite节点上 sprite.setMaterial(0, material); }); ``` 在上述示例中,您需要将路径 "path/to/your/image.png" 替换为您的图像文件路径,将路径 "path/to/your/shader" 替换为您的Shader文件路径。 请注意,使用Cocos Shader需要对OpenGL ES和GLSL有一定的了解。如果您不熟悉这些概念,建议先学习相关知识。同时,Cocos官方提供了丰富的文档和示例代码,可供参考和学习。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值