cocos2d-js Shader 柳树枝效果

var TreeShader_fsh =

"                                                \n\

#ifdef GL_ES                                            \n\

    precision mediump float;                                    \n\

#endif                                                \n\

\n\

varying vec2 v_texCoord;                                      \n\

uniform sampler2D u_texture;                                    \n\

uniform float u_time;                                      \n\

\n\

// 1                                                \n\

const float speed = 2.0;                                      \n\

const float bendFactor = 0.05;                                  \n\

void main()                                            \n\

{                                                \n\

    // 获得高度，texCoord从下到上为0到1                                  \n\

    float height = v_texCoord.y;                                \n\

    // 获得偏移量，一个幂函数，值愈大，导数越大，偏移量愈大                        \n\

    float offset = pow(height, 2.5);                                \n\

    // 偏移量随时间变化，并乘以幅度，设置频率                                \n\

    offset *= (sin(u_time * speed) * bendFactor);                        \n\

    // 使x坐标偏移，fract取区间值（0，1）                                \n\

    gl_FragColor = texture2D(CC_Texture0, fract(vec2(v_texCoord.x + offset, v_texCoord.y))); \n\

}";

    var shader = this.shader = new cc.GLProgram()

    shader.initWithString(cc.SHADER_POSITION_TEXTURE_A8COLOR_VERT, TreeShader_fsh)

    shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR)// 对应vs里面的顶点坐标

    shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)// 对应vs里面的顶点颜色

    shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)// 对应vs里面的顶点纹理坐标

    shader.link()

    shader.updateUniforms()

    var shader = this.shader = new cc.GLProgram()

    shader.initWithVertexShaderByteArray(DEFAULT_VERTEX_SHADER, SEPIA_FRAGMENT_SHADER)

    shader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR)//对应vs里面的顶点坐标

    shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)//对应vs里面的顶点颜色

    shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)//对应vs里面的顶点纹理坐标

    shader.link()

    shader.updateUniforms()

shader.use()//没有这个会抖动一下

    shader.setUniformsForBuiltins()

    var m_nTimeUniformLocation = shader.getUniformLocationForName('u_time')

    gl.useProgram(shader.getProgram())

//sprs1为柳条的精灵数组

    sprs1.forEach(function(item){

    item.shaderProgram = shader

      item.t = 0

      item.scheduleUpdate()

      item.update = function(dt) {

        item.t += dt

        shader.use()

        shader.setUniformsForBuiltins()

        m_nTimeUniformLocation = shader.getUniformLocationForName('u_time')

        gl.uniform1f(m_nTimeUniformLocation, item.t) // 这个函数由于jsb实现有问题，在手机侧实际只能传递整数，需要注意。html5是正常的。

      }

    })

参考 https://www.cnblogs.com/kenkofox/p/4084684.html 

http://gad.qq.com/article/detail/43839（发现问题： szGrassShadervsh报错）

https://blog.csdn.net/themagickeyjianan/article/details/72717137（发现问题：图片背景透明部分变黑）