Pixi.js: BLEND_MODES.ALPHA

[BetaPlays3]

I was wondering if you can add BLEND_MODES.ALPHA to the Pixi.JS blendModes list or if you have any blendMode that does exactly what ALPHA

https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BlendMode.html#ALPHA

[SukantPal]

I dunno if @ivanpopelyshev would be interested in doing that. I haven't researched this throughly, but consider the following "hack":

1. Take a constant BLEND_MODE_LAYER = <random_int>.
2. Set StateSystem.blendModes[BLEND_MODE_LAYER] to [gl.ZERO, gl.SRC_ALPHA]. See how the existing BLEND_MODES are mapped to blend factors here: https://github.com/pixijs/pixi.js/blob/6e9d62f928f55c485162f332abc05104b4a20048/packages/core/src/state/utils/mapWebGLBlendModesToPixi.ts#L13. For more information about blend factors, see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/blendFunc.
3. Create a WebGL state, like new State(). Set state.blendMode = BLEND_MODE_LAYER.
4. Try rendering with this state by applying it via renderer.state.set(state); (see https://github.com/pixijs/pixi.js/blob/6e9d62f928f55c485162f332abc05104b4a20048/packages/core/src/state/StateSystem.ts#L124)
5. or just set blendMode = BLEND_MODE_LAYER on your DisplayObject. The batch renderer might work with it (not so sure on this one)

[ivanpopelyshev]

If background is opaque, then its possible by adding renderer.state.blendModes[MY_FAVORITE_INT_NUMBER] = [gl.SRC_ALPHA, gl.ZERO, gl.SRC_ALPHA, gl.ZERO] to list of pixi blendmodes.

If background is not opaque.. well.. Im not sure. You have to make a test whether Flash actually replaces alpha or multiplies it. If it multiplies, same mode will work. If it replaces - it can be emulated only through blending shader from pixi-picture plugin.

[ivanpopelyshev]

Good question by the way. I totally forgot about that blending mode.

[ivanpopelyshev]

Of course it makes sense only if parents are layered somewhere. Instead of LAYER blending mode you have to use container.filters=[new PIXI.filters.AlphaFilter()]; that'll force container to be layered.

[ivanpopelyshev]

@BetaPlays3 hello?