pixijs shader 传入多张图片到片段着色器的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title> {$title} </title> <meta content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" name="viewport" /> <meta content="telephone=no" name="format-detection" /> <!-- Link Swiper's CSS --> <include file="commonheader"> </include> <style> </style> </head> <body> <include file="jiazai"> </include> <include file="commonfooter"> </include> <script src="{$yumingnew}/js/pixi.min.js" type="text/javascript"> </script> <script src="/pixijsdemo/pixi-plugins/pixi-projection.js" type="text/javascript"> </script> <script src="{$yumingnew}/js/TweenMax.js"></script> <style type="text/css"> canvas{ 100%; height: 100%; } </style> <script type="text/javascript"> 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?v=2').add('bg_grass', '/moban/images/share.jpg') .load(onLoaded); let filter; // Handle the load completed function onLoaded(loader, res) { const perlin = PIXI.Texture.from('/moban/images/share.jpg?v=2'); // Create the new filter, arguments: (vertexShader, framentSource) filter = new PIXI.Filter(null, res.shader.data, { customUniform: 0.0, noise: perlin }); // === 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; }); </script> </body> </html>
precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform sampler2D uSampler; uniform sampler2D noise; 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 }