Dark overlay with multiple dynamically changing gradient holes.

[PeterSWD]

Hello! I'm fairly new to PixiJS and I've been trying to create a function for our game running in the browser. The main purpose of my function is to have a player(Which moves on an infinite map) move around with a dark "Binocular" area around it. I've succeeded in making this using css and javascript using radial gradients with mask composite exclude in css. Here I could make the radius of these radial gradients decrease(get smaller over time), so it has an effect of "light running out". In addition to this I also did so gradients could be added dynamically, which allowed the game to have multiple radial gradients which acted as "holes" in a dark overlay. Below is a few images to illustrate the intended function. Image 1 is meant to represent how the zone itself should look. The orange is the background, the black is the semitransparent overlay and the enemies should be visible under this overlay. The second image shows the function of two of these circles overlapping(This is how it currently works using css webkit mask and mask masking)

My problem is that this function was very laggy in firefox and I've been attempting to rework the whole system in Pixi instead. I've attempted to use regular methods of masking Graphics, but the problem is I can't seem to get this hole effect to work. I've tried to replicate some of the examples, but they haven't worked either for me.

This is the example I'm talking about: https://pixijs.com/8.x/examples/masks/filter

The closest i got to a solution was using the cut() function as a overlay and then changing the sizes of the radius dynamically(Then I'd make a function that could add "n" circles to make the other zones)

let frame = new Graphics()

.rect(0, 0, 208, 208)

.fill(0x666666, 0.1)

.stroke({ color: 0xffffff, width: 4, alignment: 0 })

hudOverlay.addChild(frame);

 

let mask = new Graphics()

 .rect(0, 0, 100, 100)

 .fill(0x00FF00)

 .circle(50, 50, 50)

 .cut();

let maskContainer = new Container();

maskContainer.mask = mask;

maskContainer.addChild(mask);

maskContainer.position.set(4,4);

hudOverlay.addChild(maskContainer);

 

let testRec = new Graphics().rect(0,0, 800, 800).fill("#49cc6c", 0.5);

maskContainer.addChild(testRec);

I then have a mask where i can just add a semi transparent rectangle (Right now it's green for testing) on top.

The main problem with this is that this is not very performant code, because masks are costly. So I am lost on what to do, I've heard many speak of generateTexture and somehow using this for masking, but I do not know how to do this in pixi v8? 

My argument for finding a way to use less masks is found in the performance tips of pixi under "Masks": https://pixijs.com/8.x/guides/production/performance-tips