Blend modes like in a raster graphics editor

[ikiselev1989]

Hi community!
I didn't find this feature. It will be nice to have ability to set blend mode for sprites - ADD, MULTIPLY etc. Like in Photoshop.
I have researched a little and can to try to implement it if you give me a little help for start :) this is my first try in open source contributing.

[eonarheim]

Hi @ikiselev1989 sorry this fell off my radar!

You might be able to get the control you want to apply different color blend modes by using Materials, but you'll need to provide a custom shader.

https://excaliburjs.com/docs/material/

I think it would be a good feature to add to excalibur in general. Perhaps we can pass an attribute down to the current sprite shader? I'll need to double check this is possible with the current blend setup, but worth a try!

export enum BlendMode {
   Add = 'add',
   Multiply = 'multiply',
   ...
}

Then on an individual graphic we can add a .blendMode prop

const sprite = new ex.Sprite(...);
sprite.blendMode = BlendMode.Multiply;

We'd need to update the GraphicsSystem.ts, the ExcaliburGraphicsContextWebGL.ts and image-renderer.ts to support passing a blend mode down into the existing sprite batching process. I'd look at how we pass opacity down as a reference.

[eonarheim]

@jfelsinger @ikiselev1989 Good news, with the new version cut last night (v0.28.4) I think this is now possible with materials and custom shaders

You can reference the screen texture directly now to do some interesting blending with the background! Here is some code! https://github.com/excaliburjs/Excalibur/blob/main/sandbox/tests/material/index.ts#L231-L267

water-material.mp4

[ikiselev1989]

@eonarheim thanks for your work! Can we implement blend modes in the engine core or it will be additional available for materials and custom shaders?

[eonarheim]

@ikiselev1989 It's possible it's possible 😄 I need to figure out if I can make blend modes work with the default batch draw shader. I'll add it to my list of things!

[jfelsinger]

🥳 This is working really good! Working blend modes with just the shaders are pretty clean to do now! Thanks for the sandbox examples too

I am noticing that things can get a bit weird with camera zoom, or weirdly jittery with elastic camera. I'm looking more into what might be causing that for me though. Maybe it's just something weird I'm doing with the camera/viewport.

[eonarheim]

@jfelsinger I'll take a closer look! It's possible the screen uv needs to take some things into account... by design it should be the screen texture right before the material gets drawn.