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 );


}