Pixi.jsのCustomFilterでシェーダーのtexcoordずれてた問題

環境
v4.5.0

トラブル

pixi.jsのCustomFilterを利用して、フラグメントシェーダを利用しようとしたところ、
なんかvTextureCoordの値がずれてる気がする。

やろうとしたこと：
PIXI.GraphicsにCustomFilterかけてフラグメントシェーダだけで描画。

PIXI.SpriteにCustomFilterだと、vTextureCoordずれてなかった。

pixi始めて、すぐにぶつかったので原因はいまいちわかっていない、
そんなに情報ないので自分が変なことをしている、特殊なケースなのかもしれない。

void main(void)
{

  vec2 uv = vTextureCoord.xy;
  
  if(uv.x > 0.5){
    gl_FragColor = vec4(1., 1., 0., 1.);
  }else{
    gl_FragColor = vec4(1., 0., 0., 1.);
  }

}

上記で試すとやっぱり0.5の位置がおかしい。

解決策

この辺見ながら対策したけどいまいちピンときていない。

https://github.com/pixijs/pixi.js/issues/2572
http://www.html5gamedevs.com/topic/23790-uv-in-filters/
http://www.html5gamedevs.com/topic/24347-weird-filterareas-size-on-v4/

MyFilter = function(filterManager, input, output, clear){
    this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(matrix);
    PIXI.Filter.apply.call(this, filterManager, input, output, clear);
}

js側は上記がキモ

uniform mat3 mappedMatrix;
void main(void)
{
  vec3 map = vec3( vTextureCoord.xy,1)*mappedMatrix;
}

シェーダー側はmapをxyつかったら正常な値でましたよー。

http://pixijs.github.io/examples/#/basics/custom-filter.js
このExampleベースでつくってたので、自分はひとまず、

hoge.js

~

function onLoaded (loader,res) {
	let uniform = {type: "mat3", value: new PIXI.Matrix()};

    filter = new PIXI.Filter(null, res.shader.data, { "mappedMatrix": uniform });

    // Add the filter
    background.filters = [filter];
    background.filters[0].apply = function(filterManager, input, output, clear) {
      this.uniforms.mappedMatrix = filterManager.calculateNormalizedScreenSpaceMatrix(this.uniforms.mappedMatrix);
      PIXI.Filter.prototype.apply.call(this, filterManager, input, output, clear);
    }

    // Resume application update
    app.start();
}

こんな感じにした。
(使ってるコードから適当に抜粋したのでこれで動くかは、わからない。)