Best way to handle multiple source textures in PIXI filter

[westy]

I want to make a filter that uses multiple source textures. Each source texture is the same size (or, will be scaled to the same size).

I've played around with a few different ways of handling this, without much success. I had a look at the guide to create filters in v4 but the documentation for this case leaves a little to be desired.

I've been somewhat successful but there are still certain issues:

• The second texture seems to be slightly scaled up, leading to misalignment and a weird margin.
• Whenever the sprite goes out of bounds, the coordinate systems go out of whack.

You can see the issue in action in this jsfiddle. I need a way to have the source textures line up perfectly, without the misalignment/weird margin. (we can ignore rotation!) 

'autoFit' must be true for my application for performance reasons.

[Exca]

Something like this? http://jsfiddle.net/hs8c61bc/1/

[ivan.popelyshev]

If you have problems with coordinates, you can try to create sprite renderer plugin instead of a Filter:  https://github.com/pixijs/pixi-plugin-example 

There's one active thread about it: https://github.com/pixijs/pixi.js/issues/4553

I'm sorry but I cant find the small snippet that @yahiko made for it.

 

As for filter, to posiition texture correctly you need extra sprite. Look at how DisplacementFilter works - it calls special functions that calculates position of sprite relative to filter area. https://github.com/pixijs/pixi.js/tree/dev/src/filters/displacement

[westy]

@Exca that looks great! However, I notice there's still some margin/bleed around the edge of the sprite, any idea what's causing this and if I can prevent it?

[ivan.popelyshev]

Need to clip vFilterCoord , like its done here: https://github.com/pixijs/pixi.js/tree/dev/src/core/renderers/webgl/filters/spriteMask . That maskClamp has to be (0.5, 0.5, w-0.5, h-0.5) / (w,h) corresponding to your texture.

Sorry for ambigious answer, if you fail to understand it in a day or two, ill give you more info and may be write code. But I certainly dont want to post whole solution right now. Consider it an exercise

[westy]

@ivan.popelyshev Thanks! I'm not having much luck as I am struggling to understand both why such clipping is necessary (Does PIXI bleed textures internally or something to overcome some webgl issues?), as well as where the (0.5, 0.5, w-0.5, h-0.5) / (w,h) comes from. I also can't find any documentation on the texture transform that the sprite mask example uses, and how that factors in here.

[ivan.popelyshev]

OK, so now you have to wait when I have free time to fix @Exca example

There are no docs, its just the code. It takes time to understand that. I really should write articles about it