(转)Cocos2d-js中使用Shader方法--以一个简单的波纹效果为例：

Posted 2020-12-29 fingerblog

以一个简单的波纹效果为例：

一、引入shader脚本文件。

1、vertex shader

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;
}

2、fragment shader

varying vec2 v_texCoord;

#define M_PI 3.1415926535897932384626433832795

void main() {
    vec2 coord = v_texCoord;
    coord.x += (sin(coord.y * 10.0 + CC_Time[1] * 10.0) / 30.0);
    gl_FragColor = texture2D(CC_Texture0, coord);
}

3、cocos2d-js code

var sprite = this.sprite = new cc.Sprite("res/demo.png");
sprite.attr({
        x: cc.winSize.width / 2,
        y: cc.winSize.height/ 2
});
this.addChild(sprite);

var shader = this.shader = new cc.GLProgram(‘res/test.vsh‘, ‘res/test.fsh‘);
shader.link();
shader.updateUniforms();
        
sprite.shaderProgram = shader;

 

二、直接嵌入shader脚本

　　　　　　var 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;
" +
            "}";

   　　　　var fsh = "
" +
            "varying vec2 v_texCoord;
" +
            "void main()
" +
            "
{
" +
            "   vec2 coord = v_texCoord;
" +
            "   coord.x += (sin(coord.y * 10.0 + CC_Time[1] * 10.0) / 30.0);
" +
            "   gl_FragColor = texture2D(CC_Texture0, coord);
" +
            "}";

        var sprite = this.sprite = new cc.Sprite("res/grossini.png");
        var shader = new cc.GLProgram();
        if(shader.initWithString(vsh, fsh)){
            shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
            shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
            shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
            shader.link();
            shader.updateUniforms();

            sprite.shaderProgram = shader;
        }
        sprite.attr({
            x: cc.winSize.width / 2,
            y: cc.winSize.height/ 2
        });
        this.addChild(sprite);

 

原文地址：https://www.cnblogs.com/fingerblog/p/5179853.html