Jump to content

Real-time drawing onto mask


Recommended Posts


I'm trying to accomplish real-time drawing external images onto mask. I attached gif with effect I'm trying to achieve (radial gradient is assumed to be sprite texture).

Is there a performant way to draw onto Graphics object images with rotation and transparency? Or maybe use multiple Sprites as mask? Or maybe at least update existing texture from canvas without generating a new one?



Link to comment
Share on other sites


2 hours ago, ivan.popelyshev said:

Container with red hands masked by a sprite with gradient texture. There are many other ways to do that, but you need to understand RenderTexture and filter abstractions for it.

Thank you for the response!

The point was that mask sprites have a uniform texture. So in this example center of the gradient for each hand should not be on each specific sprite but on the area itself. So this can be accomplished using mentioned abstractions?

Link to comment
Share on other sites

20 minutes ago, ivan.popelyshev said:

Mask is also belongs to the stage. You can move it with whatever container did you put it, it doesn't even matter whether mask element belong to one container or another. Like in Adobe Flash.

Well... I'm very grateful for the responses, but I still kinda don't get how to do this. Maybe you could just point out some abstractions or links whose I need to research to be able to modify mask texture in real time?

Link to comment
Share on other sites

Okay, now I got what you meant, and managed to implement it on a small scale. However, I forgot to mention one detail which makes this solution unapplicable for me (at least as-is).

My texture is so large, that WebGL freaks out and won't render it. So I had to split it into multiple sprites to avoid quality loss. So I cannot use a single texture as a mask. I cannot assign the container to a sprite mask as well - it is either Sprite or Graphics.

Is it possible to do that if mask sprite will be added in-between sprites (illustration 1) it will be rendered correctly, using textures from intersected sprites (illustration 2)? Do graphics share the same size limitations as textures do?



Link to comment
Share on other sites

Its possible with layering: render those sprites in separate later, give it as a mask or as a filter input or whatever.


This demo uses extra plugin pixi-layers to mark the container with sprites as a Layer that has to be rendered separately with getRenderTexture().

You can ditch the plugin and use manual manipulations with renderTexture every frame.

But in the end, you will know how layering works.

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