你可以参照这个写法， 我游戏里面的云和水都是这么做的
参考 ： http://forum.cocos.com/t/creator-shader/36388
在Update里面更新变量，就可以做动态效果了
var _default_vert = require("./ss/ccShader_Default_Vert.js");
var _default_vert_no_mvp = require("./ss/ccShader_Default_Vert_noMVP.js");
var _wave_h_frag = require("./ss/ccShader_Wave_H_Frag.js");
cc.Class({
extends: cc.Component,
properties: {
_angle : {
default : 3,
visible : true
},
speed : 1,
},
onLoad: function () {
// this._angle = 15;
this._motion = 0;
this._opacity = 1;
this._use();
},
_use: function()
{
this._program = new cc.GLProgram();
if (cc.sys.isNative) {
cc.log("use native GLProgram")
this._program.initWithString(_default_vert_no_mvp, _wave_h_frag);
this._program.link();
this._program.updateUniforms();
}else{
this._program.initWithVertexShaderByteArray(_default_vert, _wave_h_frag);
this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
this._program.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
this._program.link();
this._program.updateUniforms();
}
this._uniMotion = this._program.getUniformLocationForName( "motion" );
this._uniAngle = this._program.getUniformLocationForName( "angle" );
this._uniOpacity = this._program.getUniformLocationForName( "opacity" );
if (cc.sys.isNative) {
var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this._program);
glProgram_state.setUniformFloat( this._uniAngle, this._angle );
glProgram_state.setUniformFloat( this._uniOpacity, this._opacity );
}else{
this._program.setUniformLocationWith1f( this._uniAngle, this._angle );
this._program.setUniformLocationWith1f( this._uniOpacity, this._opacity );
}
this.setProgram( this.node._sgNode, this._program );
},
// setOpacity(opacity){
// this._opacity = opacity
// },
setProgram:function (node, program) {
if (cc.sys.isNative) {
var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(program);
node.setGLProgramState(glProgram_state);
}else{
node.setShaderProgram(program);
}
var children = node.children;
if (!children)
return;
for (var i = 0; i < children.length; i++)
this.setProgram(children[i], program);
},
update: function( dt )
{
if( this._program )
{
this._program.use();
if(cc.sys.isNative){
var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this._program);
glProgram_state.setUniformFloat( this._uniMotion, ( this._motion += dt * this.speed ) );
glProgram_state.setUniformFloat( this._uniOpacity, this._opacity );
}else{
this._program.setUniformLocationWith1f( this._uniMotion, ( this._motion += dt * this.speed ) );
this._program.setUniformLocationWith1f( this._uniOpacity, this._opacity );
this._program.updateUniforms();
}
if( Math.PI * 2 < this._motion ){
this._motion -= Math.PI * 2;
}
}
}
});
vert 文件
module.exports =
attribute vec4 a_position; attribute vec2 a_texCoord; attribute vec4 a_color; varying vec2 v_texCoord; varying vec4 v_fragmentColor; void main() { gl_Position = CC_PMatrix * a_position; v_fragmentColor = a_color; v_texCoord = a_texCoord; }
frag文件
/* 水平波浪 */
module.exports =
#ifdef GL_ES precision mediump float; #endif varying vec2 v_texCoord; uniform float motion; uniform float angle; uniform float opacity; void main() { vec2 tmp = v_texCoord; tmp.x = tmp.x + 0.05 * sin(motion + tmp.y * angle); gl_FragColor = texture2D(CC_Texture0, tmp); gl_FragColor.a = gl_FragColor.a * opacity; }
我这居然成了交友平台