• Content Count

  • Joined

  • Last visited

  1. PixiWizi

    Mask issue with Webgl renderer

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

    Mask issue with Webgl renderer

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

    Mask issue with Webgl renderer

    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.