1.创建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;
}
`
2.创建Frag片段着色器
module.exports =`
#ifdef GL_ES
precision mediump float;
#endif
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
uniform float u_edge;
uniform float u_offset;
void main()
{
float edge = u_edge;
float dis = 0.0;
vec2 texCoord = v_texCoord;
if ( texCoord.x < edge )
{
if ( texCoord.y < edge )
{
dis = distance( texCoord, vec2(edge, edge) );
}
if ( texCoord.y > (1.0 - edge) )
{
dis = distance( texCoord, vec2(edge, (1.0 - edge)) );
}
}
else if ( texCoord.x > (1.0 - edge) )
{
if ( texCoord.y < edge )
{
dis = distance( texCoord, vec2((1.0 - edge), edge ) );
}
if ( texCoord.y > (1.0 - edge) )
{
dis = distance( texCoord, vec2((1.0 - edge), (1.0 - edge) ) );
}
}
if(dis > 0.001)
{
// 外圈沟
float gap = edge * 0.02;
if(dis <= edge - gap)
{
gl_FragColor = texture2D( CC_Texture0,texCoord);
}
else if(dis <= edge)
{
// 平滑过渡
float t = smoothstep(0.,gap,edge-dis);
vec4 color = texture2D( CC_Texture0,texCoord);
gl_FragColor = vec4(color.rgb,t);
}else{
gl_FragColor = vec4(0.,0.,0.,0.);
}
}
else
{
gl_FragColor = texture2D( CC_Texture0,texCoord);
}
}
`
3.创建ShaderUtils使用shader
var ShaderUtils = {
shaderPrograms: {},
setShader: function(sprite, shaderName) {
var glProgram = this.shaderPrograms[shaderName];
if (!glProgram) {
glProgram = new cc.GLProgram();
var vert = require(cc.js.formatStr("%s.vert", shaderName));
var frag = require(cc.js.formatStr("%s.frag", shaderName));
glProgram.initWithString(vert, frag);
if (!cc.sys.isNative) {
glProgram.initWithVertexShaderByteArray(vert, frag);
glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_POSITION, cc.macro.VERTEX_ATTRIB_POSITION);
glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_COLOR, cc.macro.VERTEX_ATTRIB_COLOR);
glProgram.addAttribute(cc.macro.ATTRIBUTE_NAME_TEX_COORD, cc.macro.VERTEX_ATTRIB_TEX_COORDS);
}
glProgram.link();
glProgram.updateUniforms();
this.shaderPrograms[shaderName] = glProgram;
}
sprite._sgNode.setShaderProgram(glProgram);
return glProgram;
},
};
module.exports = ShaderUtils;
4.创建对象绑定shader脚本
var ShaderUtils = require("ShaderUtils");
cc.Class({
extends: cc.Component,
properties: {
sp: cc.Sprite,
},
onLoad : function(){
this._time = 0;
this._sin = 0;
this._program = ShaderUtils.setShader(this.sp, "circle");
},
onSliderChange(slider, eventType) {
this.edge = Number((slider.progress / 2).toFixed(2));
if (!this._program ) return;
this._program .use();
if (cc.sys.isNative) {
var glProgram_state = cc.GLProgramState.getOrCreateWithGLProgram(this.program);
glProgram_state.setUniformFloat("u_edge", this.edge);
} else {
let ed = this._program .getUniformLocationForName("u_edge");
this._program .setUniformLocationWith1f(ed, this.edge);
}
}
});
文件结构
image
image
image
最后效果
image
image
