Effect Examples

This is an example application of a noise effect.

https://filters.pixijs.download/main/examples/index.html?enabled=AsciiFilter

/**
 * init(canvas, element, store, PIXI) - Initialization function
 * play({relativeTime, duration, progress}) - Animation playback function
 * pause() - Pause
 * destroy() - Destroy
 */
EModule.define("pixiNoise", [], function () {
  class Main {
    constructor() {
      this.filter = null;
    }

    init(cav, element, store, PIXI) {
      // Create noise filter
      this.filter = new store.filters.CRTFilter();
      this.filter.id = element.id;
      store.addFilter(this.filter);
    }

    // Play effect
    play({ relativeTime, duration, progress }) {
      this.filter.enabled = true;
    }

    // Stop effect
    pause() {
      this.filter.enabled = false;
    }

    // Destroy effect
    destroy(store) {
      if (this.filter) {
        this.filter.enabled = false;
        store.deleteFilter(this.filter.id);
        this.filter.destroy();
        this.filter = null;
      }
    }
  }

  return Main;
});

Custom Shader Effect

/**
 * Custom shader effect module
 */
EModule.define("pixiQuadSplitFilter", [], function () {
  // Custom shader effect class
  class QuadSplitFilter extends PIXI.Filter {
    constructor() {
      // Vertex shader (default is fine)
      const vertex = `
      attribute vec2 aVertexPosition;
      attribute vec2 aTextureCoord;
      uniform mat3 projectionMatrix;
      varying vec2 vTextureCoord;

      void main(void) {
        gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
        vTextureCoord = aTextureCoord;
      }
      `;

      // Fragment shader → Core: Multiply UV coordinates by 2 and take decimal part to achieve 2x2 tiling
      const fragment = `
      precision highp float;
      varying vec2 vTextureCoord;
      uniform sampler2D uSampler;

      void main() {
          // Multiply coordinates by 2 times, only take decimal part → Automatically split into 2×2
          vec2 uv = fract(vTextureCoord * 2.0);
          
          // Sample texture
          gl_FragColor = texture2D(uSampler, uv);
      }
      `;

      super(vertex, fragment);
    }
  }

  class Main {
    constructor() {
      this.filter = null;
    }

    init(cav, element, store, PIXI) {
      // Create noise filter
      this.filter = new QuadSplitFilter();
      this.filter.id = element.id;
      store.addFilter(this.filter);
    }

    // Play effect
    play({ relativeTime, duration, progress }) {
      this.filter.enabled = true;
    }

    // Stop effect
    pause() {
      this.filter.enabled = false;
    }

    // Destroy effect
    destroy(store) {
      if (this.filter) {
        this.filter.enabled = false;
        store.deleteFilter(this.filter.id);
        this.filter.destroy();
        this.filter = null;
      }
    }
  }

  return Main;
});