Pixi.js: Blendmode doesn't play well with filters

[frankvanvuuren]

When a Sprite has a filter and an other blendmode than PIXI.blendModes.NORMAL the sprite is not visible.

My test:

stage = new PIXI.Stage(0x66FF99);
var renderer = new PIXI.autoDetectRenderer(400, 300);
document.body.appendChild(renderer.view);
stage.addChild(sprite = new PIXI.Sprite.fromImage('img1.jpg'));
var grayfilter = new PIXI.GrayFilter();
sprite.filters = [grayfilter];
sprite.blendMode = PIXI.blendModes.MULTIPLY;

var animate = function() {
    requestAnimFrame(animate);
    renderer.render(stage);
};
requestAnimFrame(animate);

expected result:

Sprite is visible with both the multiply blendmode (greenish) and the grayfilter filter

result:

Sprite is not visible

[GoodBoyDigital]

fixed in v3 now... thanks for sharing! :+1:

[saschagehlich]

@GoodBoyDigital / @englercj Is this happening again? http://jsfiddle.net/8zzjnw5x/

[englercj]

Hmm, seems like it might be. Reopening until I have time to check on it.

[louisatome]

I tried with the last release (3.0.10) and the bug seems to be still present.

See : https://jsfiddle.net/s9vwvbej/2/

[GoodBoyDigital]

This issue can be solved by setting the blendMode of the filter

sprite.blendMode = PIXI.blendModes.MULTIPLY;

replace with:

grayfilter.blendMode = PIXI.blendModes.MULTIPLY;

cheers! 👍

[bitbay]

sorry to comment again on a closed issue, but using version 3.0.9 and a PIXI.filters.ColorMatrixFilter, it has no blendMode property.
Setting it to whatever value (as proposed in the previous comment) has no effect at all - the blendMode of the Sprite the filter is applied to is simply ignored.
Is this a "feature" or a "bug"?

EDIT:
just for the record, there is no trace of the blendMode in the whole prototype chain up till v4.0.x - so i would label it a "missing feature" in v3.x

[louisatome]

And i would like to add that it doesn't work for BlurFilter either (check in my example above : https://jsfiddle.net/s9vwvbej/2/)

[ivanpopelyshev]

In Pixi-v4 you can use blendMode on filter itself, that will work.

graphic2.filters[0].blendMode=PIXI.BLEND_MODES.ADD;

In pixi-v3 its just not possible. You can downport it, its not that difficult :)

[bitbay]

if You are stuck on v3.x for any reason, but want to use blended filters, i found this hack useful:

class BlendedColorMatrixFilter extends PIXI.filters.ColorMatrixFilter {
    constructor(blendMode){
        super();
        this._blendMode = blendMode;
    }

    applyFilter (renderer, input, output, clear) {
        var shader = this.getShader(renderer);
        // since there is no blendModeManager.getBlendMode() to cache before-state...
        renderer.blendModeManager.setBlendMode(this._blendMode);
        renderer.filterManager.applyFilter(shader, input, output, clear);
        // ...set it "back" to normal. sigh.
        renderer.blendModeManager.setBlendMode(PIXI.BLEND_MODES.NORMAL);
    }
}

Or a more generic "composition" solution could be:

class BlendedFilterWrapper extends PIXI.AbstractFilter {
    constructor(filter){
        super();
        this._filter = filter;
        this._blendMode = PIXI.BLEND_MODES.NORMAL;
    }

    set blendMode(value) {
        this._blendMode = value;
    }

    get blendMode() {
        return this._blendMode;
    }

    applyFilter (renderer, input, output, clear) {
        var shader = this._filter.getShader(renderer);
        // since there is no blendModeManager.getBlendMode() to cache before-state...
        renderer.blendModeManager.setBlendMode(this._blendMode);
        renderer.filterManager.applyFilter(shader, input, output, clear);
        // ...set it "back" to normal. sigh.
        renderer.blendModeManager.setBlendMode(PIXI.BLEND_MODES.NORMAL);
    }
}

ES2015 classes and syntax, but i hope You get the idea, the main part is in the applyFilter method.

[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.