Mask issue with Webgl renderer

[PixiWizi]

Hi, All 
I'm relatively new to PixiJS and I'm facing an issue that I don't understand.
 

# What I'm trying to accomplish :

Basically I create a sprite based on an image and then I display a sort of black overlay over it.

The idea is to let the user see through the black overlay thanks to a mask which will move according to user mouse movement.

The mask texture is created using multiple graphics and filters rendered by a second webgl renderer.

 

# The issue I'm facing

Sometimes (~50% of the time) when I reload the page online, the mask is invisible. It's as if there isn't any mask applied to the black overlay whereas locally it's always working.

Attached to this post you will find two pictures :

The first one represents the black overlay with the mask which is not working.

The second one represents the black overlay with the mask which is working.

I'm using the latest release of PixiJS and the source code for this example can be found here : https://jsfiddle.net/vhynmdxh/

If someone has already solved this type of issue I would be happy to discuss with them :).

Thanks.

[ivan.popelyshev]

What I see in 10 seconds:

1. remove secondRenderer, use big graphics rectangle of screen size if you need a background.

2. if you want it to be more performant, you can use MULTIPLY blendmode instead

stage.addChild(bg);
stage.addChild(shadow);

shadow.addChild(bigGrayRectangle);
shadow.addChild(whiteCircle);
shadow.filters = [ new PIXI.filters.AlphaFilter() ];

shadow.filters[0].blendMode = PIXI.BLEND_MODES_MULTIPLY;

First bg is rendered on screen. Then shadow is rendered into separate framebuffer (because filters!) , then everything on screen is multiplied by that shadow.

More sofisticated demo: http://pixijs.io/examples/#/layers/lighting.js , it uses 'pixi-layers' to render lights assigned to bunnies inside shadow.

[themoonrat]

You shouldn't be using multiple renderers. Just use multiple containers, with the parent most container having the mask on it, seeing through to the container below it

[ivan.popelyshev]

Also, I like your description of the issue and I like all lights-related experiments.

Its good for first post on our forum!

[PixiWizi]

Hello ivan.popelyshev and themoonrat.

Thank you for such quick answers!

Regarding the mask and the use of a second renderer.

The idea was to have a white rectangle to cover the entire screen with a pure black circle centered in the middle of this rectangle to create a 'hole' in the black overlay.

At first I tried to use an image (sprite) to mask the black overlay which covers the entire screen.

However when I tried to move the mask around, the edges of the sprite texture were visible, because of the size of the image I think, maybe I'm mistaken.

To try to fix that, I found that I can generate a texture for the mask based on a canvas which would cover the entire screen.

That's why I tried to create a second renderer which would be responsible for rendering the mask texture.

@themoonrat Maybe just by using multiple graphics objects I could have obtained the same result but I'm not sure.

I hope it clarifies which solution I tried to find to make my mask work.

@ivan.popelyshev  I tried to implement your solution using the multiply blendmode as you can see here : 

However I don't know why but most of the time the 'hole' created by the PIXI.Graphics 'mask' isn't visible.

Have you already encountered this type of issue?

Thanks for your help.

[ivan.popelyshev]

Your example is too difficult to debug. Please remove all unnecessary things (like BlurFilter). Your code looks good but its not working, and I dont want to spend my time cleaning up everything before I see the cause.

Also make sure you understand what "alpha" means. What will be result if R=0.9 multiplied by a mask which has R=0 (black) and alpha=0.9? If you cant calculate it - dont use alpha, use gray color instead.

[PixiWizi]

While simplifying my code I found that if I removed a line which was responsible for altering the mask rotation everything worked has expected.

I think I've found my culprit.

Thank you for your help and your advises.