PixiJS chromatic aberration filter

chromaticAberrationFilter.frag

precision mediump float;

varying vec2 vTextureCoord;
uniform sampler2D uSampler;

uniform vec2 uResolution; // app.screen
uniform vec2 uMouse; // -1.0 ~ 1.0
uniform vec2 uRed;
uniform vec2 uGreen;
uniform vec2 uBlue;

void main(void) {
  // ピクセルの座標を取得して-1.0 ~ 1.0に正規化
  vec2 pixelCoord = vTextureCoord * uResolution;
  vec2 p = (pixelCoord * 2.0 - uResolution) / min(uResolution.x, uResolution.y);

  // 画面の端になるほど収差の度合いを大きくする
  gl_FragColor.r = texture2D(uSampler, vTextureCoord + uRed * p).r;
  gl_FragColor.g = texture2D(uSampler, vTextureCoord + uGreen * p).g;
  gl_FragColor.b = texture2D(uSampler, vTextureCoord + uBlue * p).b;
  gl_FragColor.a = texture2D(uSampler, vTextureCoord).a;
}