Does Pixi.js support background blending shaders?

[AshleyScirra2]

Does Pixi.js support shaders which can sample from the background and use custom fragment shader code to blend? For example, implementing a Screen blend in a fragment shader. It's a tricky problem and I'd be interested in the implementation details if Pixi supports this, but I haven't been able to find anything on this so far.

[ivan.popelyshev]

https://github.com/pixijs/pixi-picture uses that trick to emulate OVERLAY blendmode

[AshleyScirra2]

Ah, thanks. Looks like the relevant code is in https://github.com/pixijs/pixi-picture/blob/master/src/PictureRenderer.ts. Surprised to see a readPixels in there, doesn't that kill the performance? :-S

[ivan.popelyshev]

yeah, it kills performance, but add AlphaFilter to root (ex-VoidFilter) and it'll use texture copy instead. As a downside, say goodbye to anti-aliasing

var f = new PIXI.filters.AlphaFilter();
f.filterArea = app.screen;
app.stage.filters = [f];

 

[AshleyScirra2]

I guess adding AlphaFilter forces the main scene to render to texture? FWIW the Construct engine automatically enables that if any background blending shaders are in use, might make sense for Pixi as well since it eliminates that slow path.

[ivan.popelyshev]

I didnt know that detail about Construct.

Yep, AlphaFilter or any other filter forces usage of extra framebuffer, and its possible to copy contents from its texture to another texture and use it for blending emulation.

Anyway, blending shaders are slow because of extra framebuffer and copying, dont over-use them for a few large images its fine.