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{
width: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 onl oaded(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
}