Cacher is the code snippet organizer for pro developers

import vs from "basic.vs"
import fs from "basic.fs"

/**
 * timeはtickerで↓のように更新する
 * this.filter.uniforms.time += this.app.ticker.elapsedMS * 0.001;
 */

class BasicFilter extends PIXI.Filter {
  constructor() {
    const uniforms = {
      time: {
        type: '1f',
        value: 0.0,
      },
    }

    super(
      // vertex shader
      vs,
      // fragment shader
      fs,
      // uniforms
      uniforms,
    )
  }
}

/**
 * 基本のFragment Shader
 * http://pixijs.download/dev/docs/core_renderers_webgl_filters_Filter.js.html#line175
**/

precision mediump float;

uniform float time;
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;
uniform sampler2D uSampler;
uniform sampler2D filterSampler;

void main(void){
   vec4 masky = texture2D(filterSampler, vFilterCoord);
   vec4 sample = texture2D(uSampler, vTextureCoord);
   vec4 color;
   if(mod(vFilterCoord.x, 1.0) > 0.5) {
     color = vec4(1.0, 0.0, 0.0, 1.0);
   } else {
     color = vec4(0.0, 1.0, 0.0, 1.0);
   }
   gl_FragColor = mix(sample, masky, 0.5);
   gl_FragColor *= sample.a;
}

/**
 * 基本のVertex Shader
 * http://pixijs.download/dev/docs/core_renderers_webgl_filters_Filter.js.html#line149
**/
precision mediump float;

attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform float time;
uniform mat3 projectionMatrix;
uniform mat3 filterMatrix;
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;
varying vec4 vPos;

void main(void){
  vec4 pos = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   gl_Position = pos;
   vPos = pos;

   vFilterCoord = (filterMatrix * vec3(aTextureCoord, 1.0)).xy;
   vTextureCoord = aTextureCoord;
}