pixijs shader 贴图溶解效果教程

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=-1.0;

        // Animate the filter

        app.ticker.add((delta) => {

            i+=0.03;

            if(i>=){

              i=;

            }

            filter.uniforms.customUniform = i;

        });

/moban/shader.frag代码如下

precision mediump float;

varying vec2 vTextureCoord;

varying vec4 vColor;

uniform sampler2D uSampler;

uniform float customUniform;

//

// Description : Array and textureless GLSL 2D simplex noise function.

//      Author : Ian McEwan, Ashima Arts.

//  Maintainer : stegu

//     Lastmod : 20110822 (ijm)

//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.

//               Distributed under the MIT License. See LICENSE file.

//               https://github.com/ashima/webgl-noise

//               https://github.com/stegu/webgl-noise

//

vec3 mod289(vec3 x) {

  return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec2 mod289(vec2 x) {

  return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec3 permute(vec3 x) {

  return mod289(((x*34.0)+1.0)*x);

}

float snoise(vec2 v)

  {

  const vec4 C = vec4(0.211324865405187,  // (3.0-sqrt(3.0))/6.0

                      0.366025403784439,  // 0.5*(sqrt(3.0)-1.0)

                     -0.577350269189626,  // -1.0 + 2.0 * C.x

                      0.024390243902439); // 1.0 / 41.0

// First corner

  vec2 i  = floor(v + dot(v, C.yy) );

  vec2 x0 = v -   i + dot(i, C.xx);

// Other corners

  vec2 i1;

  //i1.x = step( x0.y, x0.x ); // x0.x > x0.y ? 1.0 : 0.0

  //i1.y = 1.0 - i1.x;

  i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // x0 = x0 - 0.0 + 0.0 * C.xx ;

  // x1 = x0 - i1 + 1.0 * C.xx ;

  // x2 = x0 - 1.0 + 2.0 * C.xx ;

  vec4 x12 = x0.xyxy + C.xxzz;

  x12.xy -= i1;

// Permutations

  i = mod289(i); // Avoid truncation effects in permutation

  vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 ))

    + i.x + vec3(0.0, i1.x, 1.0 ));

  vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0);

  m = m*m ;

  m = m*m ;

// Gradients: 41 points uniformly over a line, mapped onto a diamond.

// The ring size 17*17 = 289 is close to a multiple of 41 (41*7 = 287)

  vec3 x = 2.0 * fract(p * C.www) - 1.0;

  vec3 h = abs(x) - 0.5;

  vec3 ox = floor(x + 0.5);

  vec3 a0 = x - ox;

// Normalise gradients implicitly by scaling m

// Approximation of: m *= inversesqrt( a0*a0 + h*h );

  m *= 1.79284291400159 - 0.85373472095314 * ( a0*a0 + h*h );

// Compute final noise value at P

  vec3 g;

  g.x  = a0.x  * x0.x  + h.x  * x0.y;

  g.yz = a0.yz * x12.xz + h.yz * x12.yw;

  return 130.0 * dot(m, g);

}

void main(void)

{

    vec2 uv = vTextureCoord;

    vec2 pos = uv;

    pos.x = snoise(vec2(pos.x * 2.0));

    float noise = snoise(pos);

    vec4 texture2 =  texture2D(uSampler,uv);

    float step = customUniform;

    gl_FragColor = texture2 * (1.0 - smoothstep(step, step, noise));

}