cocos shader 灰度

使用Cocos Shader实现图像的灰度效果是比较常见的需求。下面是一个简单的示例代码，展示了如何使用Cocos Shader将图像转为灰度：

#ifdef GL_ES
precision mediump float;
#endif

varying vec2 v_texCoord;
uniform sampler2D texture;

void main()
{
    vec4 color = texture2D(texture, v_texCoord);
    float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
    gl_FragColor = vec4(vec3(gray), color.a);
}

在上述代码中，我们使用了灰度转换的经典算法，通过将红、绿、蓝通道的值与特定权重相乘，然后将结果作为新的颜色值。

要将上述Shader应用到Cocos引擎中的节点上，您可以按照以下步骤进行操作：

1. 创建一个Sprite节点并加载图像：

var spriteNode = new cc.Node();
var sprite = spriteNode.addComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame("path/to/your/image.png");

2. 加载并应用Shader：

cc.loader.loadRes("path/to/your/shader", cc.RawAsset, function (err, shaderCode) {
    if (err) {
        cc.error(err.message || err);
        return;
    }

    var program = new cc.GLProgram();
    program.initWithVertexShaderByteArray(cc.SHADER_POSITION_TEXTURE_COLOR_VERT, shaderCode);
    program.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
    program.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
    program.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
    program.link();
    program.updateUniforms();

    sprite._sgNode.setShaderProgram(program);
});

在上述代码中，需要将路径 "path/to/your/image.png" 替换为您的图像文件路径，将路径 "path/to/your/shader" 替换为上述Shader代码所在的文件路径。

请注意，以上示例是使用Cocos Creator进行示范，如果您使用的是Cocos2d-x引擎，则可能需要稍作调整。

希望以上信息对您有帮助！如果您有任何其他问题，请随时提问。