Blendmode Multiply with filter make sprite black

[Bouh]

Expected Behavior

Blendmode and effect should working together.

Current Behavior

Blendmode multiply make sprite black with blur effect, maybe with other effects too.

Steps to Reproduce

https://www.pixiplayground.com/#/edit/XIU2u6lFUP3iyrl3VEmRN

Environment

• pixi.js version: 6.0 and lower
• Browser & Version: Chrome 87
• OS & Version: w10
  Running Example

[bigtimebuddy]

Try this instead.

//dude.blendMode = PIXI.BLEND_MODES.MULTIPLY;

var blurFilter = new PIXI.filters.BlurFilter();
blurFilter.blendMode = PIXI.BLEND_MODES.MULTIPLY;
dude.filters = [blurFilter]

[Bouh]

It works like you suggest, any idea why the blend mode on sprite is not correct?
Blend mode on object and filters are different?

[bigtimebuddy]

This is working as intended, but I can see why this is confusing.

In general, for filters to work, Pixi does a "snapshot" of your display object to another surface then applies the filters to that. Because blend modes are a post-process, when you use multiply to your original container of sprites Pixi doesn't know what to multiply the pixels to when it does the snapshot because blend modes take into account the pixels below the object. What you actually need to do is add the blend-mode to is the filter, which will apply it to the snapshot of the original source.

Now, this would work if you the bunnies weren't on a transparent background because there's some information about what to multiply.
https://jsfiddle.net/bigtimebuddy/to5k9z0s/

In that case, we create an opaque background, add multiply to the bunnies, then blur. Everything is 👍

[Bouh]

Thanks for the explanation! :)

[bigtimebuddy]

Sure, I'm going to close this seems like I answered your question.