Edited at

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

More than 1 year has passed since last update.

環境

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();
}


こんな感じにした。

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