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; void main(void) { vec2 r = vTextureCoord; r.y = 1.0 - r.y; vec4 tex = texture2D(uSampler,r.xy); tex += vec4((sin((r.y)+r.x + customUniform*2.)) + tex)/2.; gl_FragColor = tex; // Merge texture + Glint }