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;
uniform vec4 filterArea;

vec2 mapCoord( vec2 coord )
{
    coord *= filterArea.xy;

    return coord;
}

vec2 unmapCoord( vec2 coord )
{
    coord /= filterArea.xy;

    return coord;
}

  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 = mapCoord(coord ) / dimensions;
    coord = warp( coord );
    coord = unmapCoord(coord * dimensions);
    gl_FragColor = texture2D( uSampler, coord );
  }
`.split('\n').reduce( (c, a) => c + a.trim() + '\n' );

filter = new PIXI.Filter( null, fragSrc );
filter.apply = function(filterManager, input, output)
{
  this.uniforms.dimensions[0] = input.sourceFrame.width
  this.uniforms.dimensions[1] = input.sourceFrame.height

  // draw the filter...
  filterManager.applyFilter(this, input, output);
}

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

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