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\

? ? // 獲得偏移量碗脊，一個冪函數(shù)，值愈大，導(dǎo)數(shù)越大，偏移量愈大? ? ? ? ? ? ? ? ? ? ? ? \n\

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

? ? // 偏移量隨時間變化表锻，并乘以幅度吹菱，設(shè)置頻率? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? \n\

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

? ? // 使x坐標(biāo)偏移，fract取區(qū)間值（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)// 對應(yīng)vs里面的頂點(diǎn)坐標(biāo)

? ? shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)// 對應(yīng)vs里面的頂點(diǎn)顏色

? ? shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)// 對應(yīng)vs里面的頂點(diǎn)紋理坐標(biāo)

? ? 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)//對應(yīng)vs里面的頂點(diǎn)坐標(biāo)

? ? shader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION)//對應(yīng)vs里面的頂點(diǎn)顏色

? ? shader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS)//對應(yīng)vs里面的頂點(diǎn)紋理坐標(biāo)

? ? shader.link()

? ? shader.updateUniforms()

shader.use()//沒有這個會抖動一下

? ? shader.setUniformsForBuiltins()

? ? var m_nTimeUniformLocation = shader.getUniformLocationForName('u_time')

? ? gl.useProgram(shader.getProgram())

//sprs1為柳條的精靈數(shù)組

? ? 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) // 這個函數(shù)由于jsb實(shí)現(xiàn)有問題，在手機(jī)側(cè)實(shí)際只能傳遞整數(shù)租漂，需要注意阶女。html5是正常的。

? ? ? }

? ? })

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

http://gad.qq.com/article/detail/43839（發(fā)現(xiàn)問題： szGrassShadervsh報錯）

https://blog.csdn.net/themagickeyjianan/article/details/72717137（發(fā)現(xiàn)問題：圖片背景透明部分變黑）

最后編輯于：2019.03.23 23:32:47

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者