JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

const fragSrc =  `
varying vec2 vTextureCoord;

uniform sampler2D uSampler;
uniform sampler2D uSampler2;

uniform vec4 filterArea;
uniform vec2 dimensions;

void main(void)
{
	vec2 pixelCoord = vTextureCoord * filterArea.xy;
	vec2 normalizedCoord = pixelCoord / dimensions;
	
	vec4 i1 = texture2D(uSampler, vTextureCoord);
	vec4 i2 = texture2D(uSampler2, normalizedCoord);
	
  // 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) {
		super(null, fragSrc);
		this.uniforms.uSampler2 = distanceFieldTex;
	}

	apply(filterManager, input, output)
	{
		this.uniforms.dimensions[0] = input.sourceFrame.width;
		this.uniforms.dimensions[1] = input.sourceFrame.height;

		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)];

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