Pixijs shader 传入多张图片到片段着色器的方法

原创已于 2025-10-30 23:23:44 修改 · 207 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#着色器

于 2025-10-30 23:22:38 首次发布

Pixijs 专栏收录该内容

1 篇文章

订阅专栏

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


}