use multiColorReplaceFilter on multiple sprites

[Josh Crokuis]

Hello, I'm new to Pixi.js and practice to create games.

I've created a lot of same Sprites(1,000 numbers of small svg) on a container with viewport so that I can move the container around.

I would like to change two colors each Sprites have by using MultiColorReplaceFilter.

However, when the filter works, the performance get slower obviously.

I've tried several things like autoFit, resolution, and filterArea and it might not work or maybe couldn't manage to do it properly.

Is there any thing I can do to make it better/faster to render?

[Exca]

How are you using the filter?

[Josh Crokuis]

12 hours ago, Exca said:

How are you using the filter?

In the top container with viewport, I used Multi Color Replace filter and pass these attributes to child sprites.

I also tried to use the filter in the Sprite level, but no big difference; around 15~20 fps.

[Exca]

I meant how the code is. Is it like this?

// Somewhere in scene setup
const filter = new MultiColorFilter(...);
container.filters = [filter];
container.filterArea = renderer.screen;

Also if you enable colormatrixfilter here does it slowdown? http://filters.pixijs.download/dev/demo/index.html

[Josh Crokuis]

2 hours ago, Exca said:

I meant how the code is. Is it like this?

// Somewhere in scene setup
const filter = new MultiColorFilter(...);
container.filters = [filter];
container.filterArea = renderer.screen;

Also if you enable colormatrixfilter here does it slowdown? http://filters.pixijs.download/dev/demo/index.html

ye, similarly. Seemingly looks like,

const filter = new MultiColorReplaceFilter([[0xb7ffee, 0xFF00FF], [0x6ae0a1, 0x00FFFF]], 0.3)
filter.autoFit = true
filter.resolution = 0.001
...
view.filterArea = new Rectangle(0, 0, view.width, view,height) // view is another container for viewport
...
const block = new Sprite({filter: this.filter}) // : MultiColorReplaceFilter
...
container.addChild(block)
...
app.stage.addChild(container)...

I haven't tried to use colorMatrixFilter yet. It uses RGB colors, right? Do you possibly think filter itself works better or color code does?

[Exca]

Resolution of 0.001 means that your shader size is filterArea.width * resolution (increased to power of two). Using 1 as resolution is good unless you know that you need higher / lower resolution. But 0.001 is something that would not work correctly unless you have a very niche case (no idea what that case could be).

Also are you applying the filter to all the blocks? If so that will make it very very slow. You should apply it only to the container.

Not sure which one is faster, multicolor replace or color matrix filter. But both run at 60fps on my machine.

[Josh Crokuis]

35 minutes ago, Exca said:

Resolution of 0.001 means that your shader size is filterArea.width * resolution (increased to power of two). Using 1 as resolution is good unless you know that you need higher / lower resolution. But 0.001 is something that would not work correctly unless you have a very niche case (no idea what that case could be).

Also are you applying the filter to all the blocks? If so that will make it very very slow. You should apply it only to the container.

Not sure which one is faster, multicolor replace or color matrix filter. But both run at 60fps on my machine.

Thanks for sharing your opinion and testing on your machine. I need a bunch of total blocks around 1,000 and some selected blocks will be filtered.

How did you test the filter? with many numbers of blocks?

Edited January 20, 2022 by Josh Crokuis

[Exca]

If you need to have 1000 blocks with each having separate filter then you will run into problems no matter what filter you use.

One option (if you want to go via filter route) would be to render each of the sprite into a separate texture  with the filter and then creating textures from that rendertarget and use those textures as sprites. Though if you have a need to dynamically adjust the color change then that will not work. 

Skipping the filter approach you could create a custom shader for those sprites that has the color change builtin and add the info about what color to swap into attributes. Then the sprites would render without any filters just using the custom shader which would be fast as long as they can be rendered in batches.

Both of those methods are not the easiest to setup.