Real-time drawing onto mask

[amadare42]

Hello,

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?

 

[ivan.popelyshev]

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.

[amadare42]

 

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?

[ivan.popelyshev]

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.

[amadare42]

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?

[ivan.popelyshev]

https://pixijs.io/examples/#/masks/graphics.js

This line adds mask to stage: "app.stage.addChild(thing);"

That means you can move the mask with just x,y

If you want  you can add it to same container where hands are, then it will move with container together.
 

[amadare42]

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?

[ivan.popelyshev]

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

https://pixijs.io/examples/#/plugin-layers/lighting.js 

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.