[PIXIJS] [HELP] Drawing polygon inside rectangle with transparency (Hole inside rectangle)

[Saqirm]

Hello PIXIJS Devs.

I am working on Line of Sight in PIXIJS. So far my algo works well. I ecountered on issue, that i can not draw polygon which makes a hole inside a rectangle. 

I tried to use mask and blend modes but it did not work.

        this._lightGraphics.clear()
        beginFill(0x000000, 0.5)
        drawRect(0, 0, this.viewport.width, this.viewport.height)
        endFill()
        closePath()
        beginHole()
        drawPolygon(points)
        closePath()
        endHole()

I tried Graphics hole, it was working but not always, sometimes holes disapear for some reason.

 

Should be like this: (First image is using code above, but this is not working always) 2nd image shows there are 2 graphics (1 Rectangle which fits whole screen with black fill color and 0.5 alpha and second polygon (Vision))




I tried stacked canvas with blendMode multiply and it works. 
What is the best way to do this?

Edit: Polygon is cleared and drawn each frame. Way to make hole inside rectangle needs to be fast.

Edited July 1, 2021 by Saqirm

[ivan.popelyshev]

> I tried Graphics hole, it was working but not always, sometimes holes disapear for some reason.

if hole intersects the outer hull - it wont go well.

the best way is to do the layering.

Example1 :

create a full screen render texture , render black rect there, with white light on it. Place a sprite with this texture and corresponding blendMode

Example2:

create a container that will be shown on top of your world. set its filters to [new PIXI.filters.AlphaFilter()]. add graphics in it, as usual: black rect and lights. set "container.filters[0].blendMode = MULTIPLY"

Example3:

Learn how to use @pixi/layers https://pixijs.io/examples/#/plugin-layers/lighting.js , basically the same, but it also allos you to store the light inside character, so you can move them together. It creates fullscreen renderTexture with "clearColor" property so you can omit the rectangle.

Example4:

Learn how to use any filters with lighting: https://codesandbox.io/s/advancedlayeringfilterspixi-iycmu . Beware, this demo uses global pixi, but you can use es6 modules just fine

 

 

[Saqirm]

Thanks alot ivan. I applied 2nd example, and it works very well. 

I am using layers library. I am abit aware of creating renderTexture each frame from polygon, is it faster than 2nd example ? 

Edited July 1, 2021 by Saqirm

[ivan.popelyshev]

Its re-used, so its actually the same  the only difference is if you can detect that polygon was changed, i dont think it affects performance

Edited July 1, 2021 by ivan.popelyshev

[Saqirm]

@ivan.popelyshev Yeah, thanks for the explanation. I will use it with pixi-layers as i am using this lib for my game. Thanks for your instant reply. ? Have a nice day