简单shader学习之镜面流光效果实现

主要还是参考网上的链接，进行流光效果的实现，这个demo的流光效果移动是根据一次函数的关系式的，刚开始接触shader很多都看不懂，学习中。

具体代码（lua脚本语言编写）：

local vert = [[
        attribute vec4 a_position; 
        attribute vec2 a_texCoord; 
        attribute vec4 a_color; 
        #ifdef GL_ES  
        varying lowp vec4 v_fragmentColor;
        varying mediump vec2 v_texCoord;
        #else         
        varying vec4 v_fragmentColor; 
        varying vec2 v_texCoord;  
        #endif 
        void main() 
        {
            gl_Position = CC_PMatrix * a_position; 
            v_fragmentColor = a_color;
            v_texCoord = a_texCoord;
        }
    ]]

    local frag = [[
        #ifdef GL_ES 
        precision mediump float; 
        #endif 
        varying vec2 v_texCoord;
        uniform float sys_time;
        void main()
        {
            vec4 src_color = texture2D(CC_Texture0, v_texCoord).rgba;
            float width = 0.2;
            float start = sys_time * 1.2;
            float strength = 0.1;
            float offset = 0.2;
            
            if( v_texCoord.x < (start - offset * v_texCoord.y) &&  v_texCoord.x > (start - offset * v_texCoord.y - width))
            {
                vec3 improve = strength * vec3(255, 255, 255);
                vec3 result = improve * vec3( src_color.r, src_color.g, src_color.b);
                gl_FragColor = vec4(result, src_color.a);

            } else {
                gl_FragColor = src_color;
            }
        }
    ]]  
    -- 
    local time = 0
    local sin = math.sin(time)
    local glProgram = cc.GLProgram:createWithByteArrays(vert, frag)   
    bg:setGLProgram(glProgram)   
    -- 传入模糊中心点，以左上角为（0，0）坐标，x轴向右为正，y轴向下为正
    bg:setProgramFloat("sys_time", sin)  
    -- 每次迭代的值（可自行调整）
    local delta = 1/10
    -- 由清晰变模糊（从0开始递增，公式可以优化）
    A.cycle({    
        {"delay",delta},  
        {"fn",function ()
            bg:setProgramFloat("sys_time", sin)  
            time = time + delta * 2
            sin = math.sin(time)
            if sin > 0.99 then
                sin = 0;
                time = 0;
            end
        end},

    }, 300):at(bg)

　效果图：

 

参考链接：

https://xulidong.blog.csdn.net/article/details/79942979?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-6.base