Jump to content

Best way to handle multiple source textures in PIXI filter


Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...