Pixi.js: WebGL filters not working with multiply blend mode

[lightkraken]

WebGL filters seem to work fine with ADD blend mode:
http://jsfiddle.net/jcx4eunz/9/

But things don't render when using MULTIPLY blend mode:
http://jsfiddle.net/427fvtur/2/

[SharpleafCC]

Can confirm :)
Thanks @GoodBoyDigital and @englercj for your work on this, this will be amazing once it's fixed!

[Jorisslagter]

I've got the same problem. Is there a solution or a work around already?

[tomka]

It is not only multiply blend mode that fails. When using multiple graphics objects (or containers) and a filter is in use, all blend modes stop working (including ADD). Is there any workaround for this?

Works (no filter): http://jsfiddle.net/t6j3hf0x/
Doesn't work (with filter): http://jsfiddle.net/12s39ue3/

[ivanpopelyshev]

@tomka yeah, and #2222 solves that. In your case blendMode applies before filter and that leads to the problem

[tomka]

Thanks, I'd love to try and use the fix in in pull request #2222, but unfortunately it doesn't contain code anymore. Since you filed this pull request for your dev branch, you probably reset it to upstream dev. I would really appreciate if you could make these changes available in another branch (or your dev for that matter)!

And is there anything about the order of blendMode/filter application that I would need to do on my side?

[ivanpopelyshev]

Basically, i added filterBlendMode which is used inside FilterManager when the last filter applies to object. Yeah, i need to re-do that.
Its different from regular blendMode.

[GoodBoyDigital]

Hey chaps! in the latest dev branch filters have a blendMode property. Is that what you are looking for?

[ivanpopelyshev]

Oh, you somehow implemented it in v4 :) Nice! @tomka just assign blendMode to filter itself and not the graphics. And update your pixi, v2 doesnt have that

[tomka]

Thanks both of you, I just tried to get this running with v4, but no lock so far. I did see the blendMode field on filters, but it didn't seem to have an effect. If I understood you correctly, this should work (but doesn't and I am using v4 and blendMode on the filter): http://jsfiddle.net/uLjukL5m/

[ivanpopelyshev]

then its a bug :(

[up209d]

@tomka: I m seeking for this feature & glad to know the filter itself can apply blendMode, according to @ivanpopelyshev said, it would be a bug, however we can still live with that by adding a other filter which is working well with blendMode such as ColorMatrixFilter. Then add it to the end of the container filters array after BlurFilter and evrything work like a charm. Long live our Pixi !!!

http://jsfiddle.net/qxs1z6e4/

[tomka]

@up209d Thanks a lot for suggesting this workaround. So adding a no-op filter to the filters list to have more than one filter in it (which possibly requires normal blend mode), seems to make it work. @ivanpopelyshev This makes me feel that making it work for single-filter lists wouldn't be very hard (this can sometimes be deceptive though). :-)

[ivanpopelyshev]

@tomka yep, now we know that's another bug in filterManager somewhere. Do you know that there is actual no-op filter in PIXI? VoidFilter

[Saltallica]

To clarify:, for anyone who stumbles on to this issue and wants to use blend modes in v4 - the following works:

sprite.filters = [yourFilter, new PIXI.filters.VoidFilter()];
sprite.filters[1].blendMode = PIXI.BLEND_MODES.MULTIPLY;        

[themoonrat]

Closing as v4 has the workaround above

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.