Jump to content

Inverse Masking


Recommended Posts

Hey guys, I've trawled through google, here and the github repo but couldn't find a good way to perform an inverse mask. I need the mask to be applied on every rAF, so generating a new canvas and re-uploading the texture to the GPU and rendering is going to be to expensive I think.

I've read that this is very easy to do in WebGL, but I would like to keep canvas fallback if possible. 

I already have a mask texture that I want to apply, but obviously it's being used as a normal mask. Are there any good performant solutions for this?

Link to comment
Share on other sites

If you have enough knowledge, you can go for it :) 

I think its something about graphics mask here: https://github.com/pixijs/pixi.js/blob/dev/src/core/renderers/webgl/managers/StencilManager.js ,

Add special field to graphics that you want to inverse the mask, then do it.

There's workaround - add big rectangle to graphics, and add everything else as HOLES, they were implemented not so long ago.

Link to comment
Share on other sites

@ivan.popelyshev thanks for the quick response. I took a look into the Stencil Manager and will try this route for a while. I'm assuming that with the workaround, it applies only to primitives shapes, or would graduated alpha's work also?

I do have another quick question relating to this one, if I try to manually reduce the pixel alpha when an inverse mask is applied, how would I go about getting the pixel data, re calculating it and then uploading? My guess would be to get both textures, and extract the pixel data using the extract function on the renderer.. then subtract the inverse mask from the texture pixel data, then re-create the texture and apply it. Is there anyway to manipulate the texture without re-uploading it to the GPU or is this not possible? I'm reaching a little beyond my understanding of how the GPU caches textures, and in what format.. an area I think I'll be learning more shortly!


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