JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://pixijs.download/dev/pixi.js"></script>

JavaScript

const vertSrc = `
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;

uniform mat3 projectionMatrix;
uniform mat3 filterMatrix;

varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

void main(void)
{
   gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
   vFilterCoord = ( filterMatrix * vec3( aTextureCoord, 1.0)  ).xy;
   vTextureCoord = aTextureCoord;
}
`;
const fragSrc =  `
varying vec2 vTextureCoord;
varying vec2 vFilterCoord;

uniform sampler2D uSampler;
uniform sampler2D uSampler2;

uniform vec4 filterArea;
uniform vec2 dimensions;

void main(void)
{
	vec2 pixelCoord = vTextureCoord * filterArea.xy;
	
	vec4 i1 = texture2D(uSampler, vTextureCoord);
	vec4 i2 = texture2D(uSampler2, vFilterCoord);
	
  // Just mix the 2 textures together
	vec3 color = mix(i1.rgb, i2.rgb, 0.5);
    
	gl_FragColor = vec4(color.r, color.g, color.b, 1.0);
}
`;

class TestFilter extends PIXI.Filter {
	constructor(distanceFieldTex,sprite) {
		super(vertSrc, fragSrc);
    this.matrix = new PIXI.Matrix();
    this.sprite = sprite;
		this.uniforms.uSampler2 = distanceFieldTex;
	}

	apply(filterManager, input, output)
	{
		this.uniforms.dimensions[0] = input.sourceFrame.width;
		this.uniforms.dimensions[1] = input.sourceFrame.height;
		this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.matrix, this.sprite)
		filterManager.applyFilter(this, input, output);
	}
}

const app = new PIXI.Application({
	backgroundColor: 0xFFFFFF,
	width: 640,
	height: 480
});

// Add the view to the DOM
document.body.appendChild(app.view);

const tex = PIXI.Texture.fromImage("https://i.imgur.com/oWsBMYz.png");
const sprite = new PIXI.Sprite(tex);
app.stage.addChild(sprite);

sprite.scale.set(0.4,0.4);
sprite.position.set(-100, 100);

sprite.filters = [new TestFilter(tex, sprite)];

let t = 0;
app.ticker.add((dt) => {
	t += dt;
	sprite.x = Math.sin(t / 100) * 100;
});