Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blendmode Multiply with filter make sprite black

See original GitHub issue

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

Issue Analytics

State:
Created 3 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

2reactions

bigtimebuddycommented, Feb 5, 2021

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 👍

1reaction

bigtimebuddycommented, Feb 5, 2021

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