megmut Posted June 22, 2017 Share Posted June 22, 2017 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? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 22, 2017 Share Posted June 22, 2017 Theoreticaly its possible to implement in pixijs, its just better manipulation with stencil buffer. But somehow no one implemented that yet, and we have no way of prioritizing new features over another possible features. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 22, 2017 Share Posted June 22, 2017 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. Quote Link to comment Share on other sites More sharing options...
megmut Posted June 23, 2017 Author Share Posted June 23, 2017 @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! Thanks ivan.popelyshev 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.