Jump to content

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




Link to comment
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


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.

Link to comment
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.

Link to comment
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.

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