pixijs shader 实现图片波浪效果

  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=0;
        // Animate the filter
        app.ticker.add((delta) => {
            i+=0.03;
           
            filter.uniforms.customUniform = i;
        });

precision mediump float;

varying vec2 vTextureCoord;
varying vec4 vColor;

uniform sampler2D uSampler;
uniform float customUniform;

const float speed = 0.2;                      
const float frequency = 8.0;   

vec2 shift( vec2 p ) {                        
   float x = frequency * (p.x + customUniform*speed);
   float y = frequency * (p.y + customUniform*speed);
   vec2 q = cos( vec2(                        
       cos(x-y)*cos(y),                       
       sin(x+y)*sin(y) ) );                   
   return q;                                  
}        
void main(void)
{

  vec2 r = vTextureCoord;                      
    vec2 p = shift( r );             
    r += 1.0;                                 
    vec2 q = shift(r);  
    //改600.0改小可以增大效果                      
    float amplitude = 2.0 / 600.0;   
    vec2 s = vTextureCoord + amplitude * (p - q);
    s.y = 1. - s.y; // flip Y axis for ShaderToy
    gl_FragColor = texture2D( uSampler, s );


}