JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.3.5/pixi.js"></script>
<body>
  <img id="grid_img" style="display: none"...

JavaScript

// warp shader effect sample not working.
// Effect is more visible in the topleft corner but it should be equal on 4 corners
// vTextureCoord seems to be off???

var app = new PIXI.Application(500, 500, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create filter
var fragSrc = `
  precision mediump float;
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;
  uniform vec2 dimensions;
  
  vec2 warpAmount = vec2( 2.0 / 34.0, 1.0 / 16.0 );

  vec2 warp(vec2 pos)
  {
    pos = pos * 2.0 - 1.0;
    pos *= vec2(
      1.0 + (pos.y * pos.y) * warpAmount.x,
      1.0 + (pos.x * pos.x) * warpAmount.y
    );
    return pos * 0.5 + 0.5;;
  }
   
  void main() {
    vec2 coord = vTextureCoord;
    coord = warp( coord );
    gl_FragColor = texture2D( uSampler, coord );
  }
`.split('\n').reduce( (c, a) => c + a.trim() + '\n' );

var uniforms = { dimensions: { type: 'v2', value: [320, 186] } };
filter = new PIXI.Filter( null, fragSrc, uniforms );

// load image
var img = document.getElementById( "grid_img" );
var texture = PIXI.Texture.from( img );
var sprite = new PIXI.Sprite( texture );
app.stage.addChild( sprite );

// apply filter
sprite.filters = [ filter ];