PixiJSで画像にグリッチエフェクトをかけるやり方を解説

import * as PIXI from 'pixi.js';
import * as filters from 'pixi-filters';

<div class="vfxwrap"><img class="vfx" src="photo.jpg"></div>

.vfxwrap{
  position: relative;
}
.vfx{
  visibility: hidden;
}
.glitch_canvas{
  position: absolute;
  display: block;
  font-size: 0;
  pointer-events:none;
}

// 画像のサイズを取得してcanvasを生成
let vfxdom = document.querySelectorAll('.vfx');
let vfxlist = new Array;
let applist = new Array;
let imgloadcount = 0; // 画像読み込み用のカウント
const padding = 80; // グリッチでDOMからはみ出す値

// 画像が読み込まれたらの処理
for (let i = 0; i < vfxdom.length; i++) {
    let img = new Image();
    img.onload = function() {
        imgloadcount++;
        if (imgloadcount === vfxdom.length) {
          setCanvasDom();
        }
    }
    img.src = vfxdom[i].src;
}

  function setCanvasDom(){
    for (let i = 0; i < vfxdom.length; i++) {
      const clientRect = vfxdom[i].getBoundingClientRect();
      const w = clientRect.width;
      const h = clientRect.height;

      // PIXI appを定義
      let app = new PIXI.Application({
              width: w + padding * 2,
              height: h + padding * 2,
              antialias: true,
              transparent: true
          });

      // canvasのDOMを配置するための枠を作成
      const canvasWrap = document.createElement("div");
      canvasWrap.setAttribute('class','glitch_canvas');
      canvasWrap.setAttribute('style','margin-left:'+padding*-1+'px;margin-top:'+padding*-1+'px;');
      canvasWrap.appendChild(app.view); // 作成したcanvasにpixi appを追加
      // そのcanvasを対象のDOMの前に配置
      vfxdom[i].parentNode.insertBefore(canvasWrap, vfxdom[i]); 

      // canvasに転写する画像情報をセット
      const srcdata = vfxdom[i].src;
      vfxlist.push(PIXI.Sprite.from(srcdata));
      vfxlist[i].x = padding;
      vfxlist[i].y = padding;
      vfxlist[i].width = w;
      vfxlist[i].height = h;

      // 図形を描画する為のContainerを定義。画像Spriteをcontainerに追加。
      const container = new PIXI.Container();
      container.addChild(vfxlist[i]);

      // Containerをappに追加
      app.stage.addChild(container);
      applist.push(app);
    }

    canvasRenderer();
  }


  function canvasRenderer(){

    for (let i = 0; i < applist.length; i++) {
      let counter = 0;

      // PIXI appのループ用
      applist[i].ticker.add(function(time) {
        applist[i].ticker.update(time);
        counter++;
        if (0 < counter && counter < 12) {
          const filter_glitch = new filters.GlitchFilter({
            slices:5,
            offset:80,
            direction:10*time,
            fillMode:0,
            average:false,
            seed:0,
            red:[0,0],
            blue:[0,0],
            green:[0,0],
          });
          filter_glitch.padding = 100;
          vfxlist[i].filters = [filter_glitch];
        }else if(counter === 13){
          const _filter_glitch = new filters.GlitchFilter({
            slices:0,
            offset:0,
            direction:0,
            fillMode:1,
            average:false,
            seed:0,
            red:[0,0],
            blue:[0,0],
            green:[0,0],
          });
          vfxlist[i].filters = [_filter_glitch];
        }else if(200 < counter){
          counter = 0;
        }
      });

    } // endfor
  }

  // リサイズの場合の処理
  window.addEventListener("resize", function(event) {
    for (let i = 0; i < applist.length; i++) {
      // 現在のDOMを取得
      const clientRect = vfxdom[i].getBoundingClientRect();
      const w = clientRect.width;
      const h = clientRect.height;
      // PIXI Spriteのサイズを変更
      vfxlist[i].width = w;
      vfxlist[i].height = h;
      // canvasのサイズを変更
      applist[i].renderer.resize(w + padding * 2, h + padding * 2);
    }
  });