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; }); })
shader.frag代码如下
precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; uniform float customUniform; void main(void) { vec2 uvs = vTextureCoord.xy; vec4 fg = texture2D(uSampler, vTextureCoord); fg.rgb += sin(customUniform + uvs.x * 2. + uvs.y * 2.) * 0.2; gl_FragColor = fg; // Merge texture + Glint }