Is it possible to subtract a graphics shape from another shape?

[LinkTree]

Hi!

I am new here and to pixi.js and game development in general and I wanted to know if it is it possible to subtract a graphics shape from another shape using pixi.js?

 

I know it is possible using canvas' "globalCompositeOperation" with "destination-out" or "source-out" like is demonstrated here:

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

 

but I wanted to know if it is supported by webgl as well and if there's an already built method in pixi.js for it.

 

if such a method does not exist yet, what would be the best way to implement it?

 

thank you for your time.

[wayfinder]

you can add this to the webgl blendmodes:

        PIXI.blendModesWebGL[SOURCE_OUT]      = [gl.ONE_MINUS_DST_ALPHA, gl.ZERO];        PIXI.blendModesWebGL[SOURCE_IN]       = [gl.DST_ALPHA,           gl.ZERO];        PIXI.blendModesWebGL[DESTINATION_OUT] = [gl.ZERO,                gl.ONE_MINUS_SRC_ALPHA];        PIXI.blendModesWebGL[DESTINATION_IN]  = [gl.ZERO,                gl.SRC_ALPHA];

And then this to the BLEND_MODES const:

SOURCE_OUT: 17;SOURCE_IN: 18;DESTINATION_OUT: 19;DESTINATION_IN: 20;

Now you should be able to set the blendMode of objects with these compositing modes in webGL

 

i.e.:

sprite.blendMode = CONST.BLEND_MODES.SOURCE_IN;