CRT filter for pixi-v5

by Hackerham

HTML

<script src="https://pixijs.download/dev/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 highp float;
  varying vec2 vTextureCoord;
  uniform sampler2D uSampler;
  uniform vec2 dimensions;
  uniform vec4 inputSize;
  uniform vec4 outputFrame;

  vec2 warpAmount = vec2( 2.0 / 34.0, 1.0 / 16.0 );

  vec2 warp(vec2 pos)
  {
    // warping by the center of filterArea
    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 = coord * inputSize.xy / outputFrame.zw;
    coord = warp( coord );
    coord = coord * inputSize.zw * outputFrame.zw;
    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, clear)
{
  // draw the filter...
  filterManager.applyFilter(this, input, output, clear);
}

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

filter.padding = 1;
// we need this, otheriwse padding wont affect area out of screen, color will bleed
filter.autoFit = false;

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