CocosCreator1.x使用自定义圆角头像shader

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

感谢关注个人博客