Jump to content

About blend modes and their code

Go to solution Solved by Coornio,

Recommended Posts

Hello there! It's been a while since I've been around these forums for anything, but I imagine it's at present my best bet of getting some relevant help on the topic. I apologize in advance if this may not be the most appropriate category to post, but it seemed the most relevant one. If needed, please feel free to move the thread elsewhere.


To give a bit of a background, I am programming an emulator for MegaChip-8 (something probably few people know), and I wanted to add blend modes for its sprite drawing routine to its repertoire. That much is fine and all, but the only part I've actually managed to get working correctly is normal blending (with alpha) and opaque-only in other modes.


To clarify on what I mean with opaque-only.. well, the results are only as expected when opacity of the source pixels is 1 (255). The lower it gets, the more inaccurate the output I get. I've been using paint.NET as my tool for authenticating the validity of the output pixels in my attempt to implement the various blend modes out there.


The extension of this problem I'm facing however is the limited resources available in regards to coding blends in general. A lot of the stuff from Google is either straight up nonsense, or irrelevant to the search query. The free tier of chatgpt is also completely inept and incompetent at providing useful feedback. Understanding the process of handling color with opaque pixels is super easy, but when alpha is concerned, many of the formulas I see straight up crumble.


One example would be the Difference blend, which in essence is |Src - Dst| and I got this working with opaque pixels, and also in alpha-blending mode at full opacity. The lower I go though, the less the result looks like what I get from paint.NET.


So, given this place has a bunch of very knowledgeable people that have tackled color theory, blending, and programming with all those mixed in, I was hoping I might employ your assistance in figuring out how I'm supposed to be going about this in order to do it right. Fair warning however, I am absolutely terrible at figuring out how to read math-format formulas. I would appreciate any such suggestions if you could please translate them to pseudocode. My brain picks that up waaaay easier.


Thanks to everyone who may participate!

Examples, for those interested. First picture depicts the expected result in paint.NET, and also what I'm getting when doing an opaque Difference blend in the emulator I'm writing:



This next picture showcases the expected outcome at 0.5 alpha from paint.NET



And this is what I get instead from the emulator under the same parameters:


Link to comment
Share on other sites

  • Solution
Posted (edited)

As is the usual after one posts a lengthy post requesting help, I managed to solve it with the help of another third party. For those curious:


weightSrc = Asrc / 255;
weightDst = 1 - weightSrc;

Aout = min(Adst * weightDst + Asrc,              255);
Rout = min(Rdst * weightDst + BLEND * weightSrc, 255);
Gout = min(Gdst * weightDst + BLEND * weightSrc, 255);
Bout = min(Bdst * weightDst + BLEND * weightSrc, 255);

// where BLEND stands for the particular blend operation you require, 
// eg: Difference is: abs(Rsrc - Rdst)
// eg: Multiply is: (Rsrc * Rdst) / 255
// eg: Additive is: min(Rsrc + Rdst, 255)

// normal alpha blending in particular is easier

Aout = min(Adst * weightDst +         Asrc,        255);
Rout = min(Rdst * weightDst + (Rsrc * Asrc) / 255, 255);
Gout = min(Gdst * weightDst + (Gsrc * Asrc) / 255, 255);
Bout = min(Bdst * weightDst + (Bsrc * Asrc) / 255, 255);


I am not 100% sure if I haven't made any mistakes, but some rudimentary testing through the color picker in a comparison between paint.NET's blend and mine shows practically identical values, minus rounding differences.

Edited by Coornio
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...