DisplayObject.filters questions

[yahiko 30]

I have some questions about filters and how they behave in Pixi.js.

1. When settings filters on a display object like this:

stage.filters = [filter1, filter2, filter3, filter4];

Is the order defined in the list is the same when rendered?

2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter?

Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^

Thanks for your insights

[ivan.popelyshev 533]

Good questions.

1. Yes, but i dont remember which one is applied first or last.

2. There's a pool of temporary pow2 render textures that is used. Also it needs only two textures, it swaps them every time.

We want to evade the unnecessary resize (slow on mobile), that's why pooled textures have pow2 size. It comes with a drawback - https://github.com/pixijs/pixi.js/wiki/v4-Creating-Filters

Also you can set the blendMode of last/first filter, it works like blendmode of sprite.

Also this thing wont work because of stupid setter:

var f = [filter1, filter2, filter3, filter4];
stage.filters = f; // COPIES THE ARRAY!!!
f.push(filter5); // wasnt added to stage  :(

//lets fix that
stage._filters = f; // link by referencem yes, its a hack.
f.push(filter6); // added to stage :)

 

[yahiko 30]

Thanks, you're even answering non asked questions! I experienced this issue when setting filters dynamically. Good to know this hack

Also, is it faster to have one big filter or several small ones, performing the same rendering of course?

[ivan.popelyshev 533]

That one I don't know, you have to measure the FPS itself. Do you know how to disable v-sync in chrome? I don't remember , but its valid way , just enable it and dump FPS in console, it wont be constant anymore. You'll have something like 1000FPS vs 1400FPS