本文教大家如何使用shader让描边动起来。实质就是间隔一定时间改变描边的颜色。难点:如何通过程序把颜色传给shader。想在quick2.25里面尝试的朋友,参考quick2.25精灵变灰 配置一下环境。

一、shader代码。都是cocos官方自带的

//outLiner.vsh
#ifdef GL_ES 
    varying lowp vec4 v_fragmentColor;
    varying mediump vec2 v_texCoord;
#else
    varying vec4 v_fragmentColor;
    varying vec2 v_texCoord;
#endif
    attribute vec4 a_position;
    attribute vec2 a_texCoord;
    attribute vec4 a_color; 

    void main()
    {
        gl_Position = CC_MVPMatrix * a_position;
        v_fragmentColor = a_color;
        v_texCoord = a_texCoord;
    }

//outLiner.fsh

#ifdef GL_ES
    precision mediump float;
#endif
    varying vec2 v_texCoord;
    varying vec4 v_fragmentColor;
    uniform vec3 u_outlineColor;
    uniform float u_threshold;
    uniform float u_radius;
    uniform sampler2D CC_Texture0;

    void main()
    {
        float radius = u_radius;
        vec4 accum = vec4(0.0);
        vec4 normal = vec4(0.0);
        normal = texture2D(CC_Texture0, vec2(v_texCoord.x, v_texCoord.y));
//获取上下左右四个像素的纹理
        accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y - radius));
        accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y - radius));
        accum += texture2D(CC_Texture0, vec2(v_texCoord.x + radius, v_texCoord.y + radius));
        accum += texture2D(CC_Texture0, vec2(v_texCoord.x - radius, v_texCoord.y + radius));

        accum *= u_threshold;
        accum.rgb =  u_outlineColor * accum.a;
        accum.a = 0.0;

        normal = ( accum * (1.0 - normal.a)) + (normal * normal.a);

        gl_FragColor = v_fragmentColor * normal;
    }
View Code

相关文章:

  • 2022-12-23
  • 2021-09-12
  • 2021-09-10
  • 2021-11-16
  • 2021-12-16
  • 2021-12-09
  • 2021-06-01
  • 2021-10-16
猜你喜欢
  • 2021-11-02
  • 2021-10-13
  • 2021-12-29
  • 2021-09-30
  • 2021-10-31
  • 2021-11-07
  • 2021-10-09
相关资源
相似解决方案