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
 
}

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