Strategies for lighting/masking effects with various alpha levels

[griever989]

Hi! Loving Pixi so far, but ran into a bit of a hitch trying to come up with a certain effect:

 

What I want to do is have a world where everything is dark, but then have multiple moving sprites (eg. players with lamps that can move around) that reveal the hidden area, with the center of their "light source" being the brightest, and then fading out to darkness again near the edges of their "point light sources". I can get an approximate effect for this by making a Graphics object that has all the illuminated areas, and then setting that as the mask for my world container, but using a mask in this way only seems to only allow areas to be either fully masked or not masked at all, with no respect to alpha.

 

I was wondering if there is a way to get this sort of "alpha masking" effect? I know about the AlphaMaskFilter but it seems that it doesn't move around if I translate my world viewport; it appeared to be a stationary filter over the whole screen, which isn't what I want.

 

If you check out this example that someone else made using webGL, what I want is essentially that but with the lights able to constantly move around smoothly: http://universefactory.net/test/fog/

 

I was going to attempt to add some shaders and do the same thing that's going on in that example, but I got myself a bit tripped up trying to understand how I would manage switching between those blending modes with the model that Pixi follows (and it looks like I might also need to add some support for certain modes as well).

 

Any ideas? With a slight bit of direction I wouldn't be opposed to officially implementing a feature and making a pull request, if this required something to be added to the renderer.

[griever989]

I am probably fine with the plain old masking for now. If anyone is curious how I got everything to run at an acceptable speed while having moving objects as part of the mask:

- store a GraphicsData object for each sprite that I want a light source on

- use a Geometry object as the container mask, keeping its graphicsData array filled with the GraphicsData objects from above

- when the sprites move, I additionally update the position of their GraphicsData objects and invalidate the mask by setting the dirty and clearDirty flags to true on my mask Graphics object

 

I'd still be interested in a less-hacky way to do this with blending, shaders, or masks that respect a transparency gradient.