pixijs shader fade 从左到有右淡入 从下到上淡入效果

pixijs shader fade 从左到有右淡入     从下到上淡入效果

   const app = new PIXI.Application({ transparent: true });

        document.body.appendChild(app.view);

        // Create background image

        const background = PIXI.Sprite.from('/moban/bg_grass.jpg');

        background.width = app.screen.width;

        background.height = app.screen.height;

        app.stage.addChild(background);

        // Stop application wait for load to finish

        app.stop();

        app.loader.add('shader', '/moban/shader.frag')

            .load(onLoaded);

        let filter;

        // Handle the load completed

        function onLoaded(loader, res) {

            // Create the new filter, arguments: (vertexShader, framentSource)

            filter = new PIXI.Filter(null, res.shader.data, {

                customUniform: 0.0,

            });

            // === WARNING ===

            // specify uniforms in filter constructor

            // or set them BEFORE first use

            // filter.uniforms.customUniform = 0.0

            // Add the filter

            background.filters = [filter];

            // Resume application update

            app.start();

        }

         var i=;

        // Animate the filter

        app.ticker.add((delta) => {

            i+=0.03;

            if(i>=1.9) {

               i=1.9;

            }

            filter.uniforms.customUniform = i;

        });

precision mediump float;

varying vec2 vTextureCoord;

varying vec4 vColor;

uniform sampler2D uSampler;

uniform float customUniform;

float w = 0.2;

void main(void)

{

     vec2 uv = vTextureCoord;

    float g = 1.5;

    vec4 gamma = vec4(g, g, g, 1.0);

    vec4 color0 = pow(texture2D(uSampler, uv), gamma);

    vec4 color1 = vec4(.,.,.,.);

    float duration = 2.0;

    float t = mod(float(customUniform), duration) /  duration;

    float correction = mix(w, -w, t);

     //从左到右需要时间递增

    float choose = smoothstep(t  + w, t - w, uv.x + correction); // clamped ramp

    //从上到下需要时间递增

    // float choose = smoothstep(t  + w, t - w, uv.y + correction); // clamped ramp

    //从下到上 需要时间递减

    // float choose = smoothstep(t  - w, t + w, uv.y + correction); // clamped ramp

    gl_FragColor = mix(color1, color0, choose); // lerp

}

上面代码 算法  也可以学习下