PixiWizi

Mask issue with Webgl renderer

Recommended Posts

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.

filter-not-working.png

filter-working.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.